UserInterface with TextMessages implemented.
This commit is contained in:
parent
88d1c0db87
commit
479a150f9d
31
js/module.js
31
js/module.js
|
@ -12,7 +12,9 @@ import ImageLoader from "./ImageLoader.js";
|
|||
import Level from "./Level.js";
|
||||
import InterfaceEvent from "./events/InterfaceEvent.js";
|
||||
import UrlParam from "./UrlParam.js";
|
||||
import TextBox from "./TextBox.js";
|
||||
import UserInterface from "./ui/UserInterface.js";
|
||||
import TextMessageGisela from "./ui/TextMessageGisela.js";
|
||||
import TextMessageMrCroc from "./ui/TextMessageMrCroc.js";
|
||||
|
||||
function MainLoop(timestamp)
|
||||
{
|
||||
|
@ -105,10 +107,7 @@ function MainLoop(timestamp)
|
|||
architecture.draw(context, camera);
|
||||
mrCroc.draw(context, camera);
|
||||
gisela.draw(context, camera);
|
||||
|
||||
if (gameFinished) {
|
||||
textBoxGameFinished.draw(context, window.innerWidth * 0.5, window.innerHeight - 100);
|
||||
}
|
||||
userInterface.draw(context);
|
||||
|
||||
lastRendered = timestamp;
|
||||
}
|
||||
|
@ -123,7 +122,8 @@ function MainLoop(timestamp)
|
|||
lastTimestamp = undefined;
|
||||
lastRendered = undefined;
|
||||
textBoxGameFinished.updateLines(window.innerWidth - 40, context);
|
||||
textBoxGameFinished.animate();
|
||||
textBoxGameFinished.animate(75);
|
||||
userInterface.addTextBox(textBoxGameFinished);
|
||||
}
|
||||
|
||||
window.requestAnimationFrame(MainLoop);
|
||||
|
@ -157,7 +157,9 @@ let mrCroc, gisela, architecture;
|
|||
let camera = new Camera();
|
||||
let gameFinished = false;
|
||||
let hasPlayerLeftArchitecture = false;
|
||||
let textBoxGameStart;
|
||||
let textBoxGameFinished;
|
||||
let userInterface = new UserInterface();
|
||||
|
||||
let KeyLeft = new Key('ArrowLeft');
|
||||
let KeyRight = new Key('ArrowRight');
|
||||
|
@ -197,19 +199,16 @@ window.addEventListener(
|
|||
);
|
||||
|
||||
context = canvas.getContext('2d');
|
||||
textBoxGameFinished = new TextBox(
|
||||
textBoxGameFinished = new TextMessageGisela(
|
||||
'Gisela: "Thanks for showing up, Mr. Croc, but I\'m not in danger."',
|
||||
window.innerWidth - 40,
|
||||
context
|
||||
);
|
||||
textBoxGameFinished.font = 'Silkscreen';
|
||||
textBoxGameFinished.verticalAlignment = 'bottom';
|
||||
textBoxGameFinished.alignment = 1;
|
||||
textBoxGameFinished.hasShadow = true;
|
||||
textBoxGameFinished.textSize = 48;
|
||||
textBoxGameFinished.hasBorder = true;
|
||||
textBoxGameFinished.colorText = 'yellow';
|
||||
textBoxGameFinished.colorBorder = 'black';
|
||||
|
||||
textBoxGameStart = new TextMessageMrCroc('Mr. Croc: "Where is Gisela? I have to find her!"', context);
|
||||
textBoxGameStart.animate(75, 1000);
|
||||
textBoxGameStart.show(1000);
|
||||
textBoxGameStart.hide(10000);
|
||||
userInterface.addTextBox(textBoxGameStart);
|
||||
|
||||
architecture = RetroArchitecture.createFromData(level);
|
||||
camera.borderRight = architecture.columns * architecture.tileWidth;
|
||||
|
|
|
@ -0,0 +1,9 @@
|
|||
const TextAlignment = {
|
||||
LEFT: 0,
|
||||
CENTER: 1,
|
||||
RIGHT: 2,
|
||||
TOP: 3,
|
||||
BOTTOM: 4,
|
||||
};
|
||||
|
||||
export default TextAlignment;
|
|
@ -1,20 +1,23 @@
|
|||
import TextLine from "./TextLine.js";
|
||||
import TextAlignment from "./TextAlignment.js";
|
||||
import UserInterfaceElement from "./UserInterfaceElement.js";
|
||||
|
||||
export default class TextBox
|
||||
export default class TextBox extends UserInterfaceElement
|
||||
{
|
||||
constructor(text, width, context)
|
||||
{
|
||||
super();
|
||||
this.text = text;
|
||||
this.width = width;
|
||||
this.colorText = 'red';
|
||||
this.colorShadow = 'black';
|
||||
this.colorBorder = 'black';
|
||||
this.hasShadow = false;
|
||||
this.hasBorder = false;
|
||||
this.hasShadow = true;
|
||||
this.hasBorder = true;
|
||||
this.font = 'Silkscreen';
|
||||
this.textSize = 32;
|
||||
this.alignment = 0;
|
||||
this.verticalAlignment = 'top';
|
||||
this.textSize = 48;
|
||||
this.alignment = TextAlignment.CENTER;
|
||||
this.verticalAlignment = TextAlignment.BOTTOM;
|
||||
this.lines = [];
|
||||
|
||||
this.updateLines(width, context);
|
||||
|
@ -26,10 +29,12 @@ export default class TextBox
|
|||
this.lines = this.getLinesForWidth(this.text, context, width)
|
||||
}
|
||||
|
||||
animate(msForChar = 100)
|
||||
animate(msForChar = 100, timeoutMilliseconds = 0)
|
||||
{
|
||||
let milliseconds = 0;
|
||||
|
||||
setTimeout(
|
||||
() => {
|
||||
for (let l = 0; l < this.lines.length; l++) {
|
||||
this.lines[l].chars = 0;
|
||||
setTimeout(
|
||||
|
@ -40,11 +45,18 @@ export default class TextBox
|
|||
|
||||
milliseconds += this.lines[l].text.length * msForChar;
|
||||
}
|
||||
}, timeoutMilliseconds
|
||||
);
|
||||
}
|
||||
|
||||
draw(context, x, y)
|
||||
draw(context, x = null, y = null)
|
||||
{
|
||||
if (this.verticalAlignment === 'bottom') {
|
||||
if (x === null && y === null) {
|
||||
x = this.position.x;
|
||||
y = this.position.y;
|
||||
}
|
||||
|
||||
if (this.verticalAlignment === TextAlignment.BOTTOM) {
|
||||
let currentHeight = y;
|
||||
|
||||
for (let l = this.lines.length - 1; l >= 0; l--) {
|
|
@ -1,10 +1,9 @@
|
|||
import TextAlignment from "./TextAlignment.js";
|
||||
|
||||
export default class TextLine
|
||||
{
|
||||
constructor(text)
|
||||
{
|
||||
this.LEFT = 0;
|
||||
this.CENTER = 1;
|
||||
this.RIGHT = 2;
|
||||
this.text = text;
|
||||
this.estimatedTextWidth = null;
|
||||
this.colorText = 'red';
|
||||
|
@ -13,7 +12,7 @@ export default class TextLine
|
|||
this.font = 'sans-serif';
|
||||
this.alphaText = 1.0;
|
||||
this.size = 32;
|
||||
this.alignment = this.LEFT;
|
||||
this.alignment = TextAlignment.LEFT;
|
||||
this.chars = this.text.length;
|
||||
this.hasShadow = false;
|
||||
this.hasBorder = false;
|
||||
|
@ -44,12 +43,12 @@ export default class TextLine
|
|||
}
|
||||
|
||||
switch (this.alignment) {
|
||||
case this.LEFT:
|
||||
case TextAlignment.LEFT:
|
||||
break;
|
||||
case this.CENTER:
|
||||
case TextAlignment.CENTER:
|
||||
x -= this.estimatedTextWidth * 0.5;
|
||||
break;
|
||||
case this.RIGHT:
|
||||
case TextAlignment.RIGHT:
|
||||
x -= this.estimatedTextWidth;
|
||||
break;
|
||||
}
|
|
@ -0,0 +1,24 @@
|
|||
import TextBox from "./TextBox.js";
|
||||
import GeometryPoint from "../geometry/GeometryPoint.js";
|
||||
|
||||
export default class TextMessage extends TextBox
|
||||
{
|
||||
constructor(text, context) {
|
||||
super(text, window.innerWidth - 40, context);
|
||||
this.update();
|
||||
this.context = context;
|
||||
}
|
||||
|
||||
update()
|
||||
{
|
||||
this.defaultWidth = window.innerWidth - 40;
|
||||
this.defaultPosition = new GeometryPoint(window.innerWidth * 0.5, window.innerHeight - 100);
|
||||
}
|
||||
|
||||
render()
|
||||
{
|
||||
this.update();
|
||||
this.setPosition(this.defaultPosition.x, this.defaultPosition.y);
|
||||
this.updateLines(this.defaultWidth, this.context);
|
||||
}
|
||||
}
|
|
@ -0,0 +1,10 @@
|
|||
import TextMessage from "./TextMessage.js";
|
||||
|
||||
export default class TextMessageGisela extends TextMessage
|
||||
{
|
||||
constructor(text, context) {
|
||||
super(text, context);
|
||||
this.colorText = '#ffd400';
|
||||
this.render();
|
||||
}
|
||||
}
|
|
@ -0,0 +1,10 @@
|
|||
import TextMessage from "./TextMessage.js";
|
||||
|
||||
export default class TextMessageMrCroc extends TextMessage
|
||||
{
|
||||
constructor(text, context) {
|
||||
super(text, context);
|
||||
this.colorText = '#15de00';
|
||||
this.render();
|
||||
}
|
||||
}
|
|
@ -0,0 +1,25 @@
|
|||
export default class UserInterface
|
||||
{
|
||||
constructor()
|
||||
{
|
||||
this.textBoxes = [];
|
||||
}
|
||||
|
||||
addTextBox(textBox)
|
||||
{
|
||||
this.textBoxes.push(textBox);
|
||||
|
||||
return this.textBoxes.length - 1;
|
||||
}
|
||||
|
||||
draw(context)
|
||||
{
|
||||
this.textBoxes.forEach(
|
||||
(textBox) => {
|
||||
if (textBox.isVisible) {
|
||||
textBox.draw(context);
|
||||
}
|
||||
}
|
||||
)
|
||||
}
|
||||
}
|
|
@ -0,0 +1,38 @@
|
|||
import GeometryPoint from "../geometry/GeometryPoint.js";
|
||||
|
||||
export default class UserInterfaceElement
|
||||
{
|
||||
constructor()
|
||||
{
|
||||
this.position = new GeometryPoint(0, 0);
|
||||
this.isVisible = true;
|
||||
}
|
||||
|
||||
setPosition(x, y)
|
||||
{
|
||||
this.position.x = x;
|
||||
this.position.y = y;
|
||||
}
|
||||
|
||||
hide(timeoutMilliseconds = 0)
|
||||
{
|
||||
setTimeout(
|
||||
() => {
|
||||
this.isVisible = false
|
||||
}, timeoutMilliseconds
|
||||
);
|
||||
}
|
||||
|
||||
show(timeoutMilliseconds = 0)
|
||||
{
|
||||
if (timeoutMilliseconds > 0) {
|
||||
this.isVisible = false;
|
||||
}
|
||||
|
||||
setTimeout(
|
||||
() => {
|
||||
this.isVisible = true;
|
||||
}, timeoutMilliseconds
|
||||
);
|
||||
}
|
||||
}
|
Loading…
Reference in New Issue