diff --git a/src/common/dragAndDrop.js b/src/common/dragAndDrop.js index 0d59414..6afec9c 100644 --- a/src/common/dragAndDrop.js +++ b/src/common/dragAndDrop.js @@ -1,6 +1,6 @@ import { Container } from "pixi.js"; -let maxZIndex = 0; // heretic method to bring dragged sprite to the front, +let maxZIndex = 100; // heretic method to bring dragged sprite to the front, // will technically overflow if you play long enough, // it is also shitty because if you externally use zIndex on the sprites in the same container, it may not bring to front // clean solution would be to make a draggable container class diff --git a/src/games/cleanupHS.js b/src/games/cleanupHS.js index 5a5aa9e..e849b3d 100644 --- a/src/games/cleanupHS.js +++ b/src/games/cleanupHS.js @@ -13,28 +13,13 @@ const itemTypes = { TRASH: "TRASH", HARDWARE: "HARDWARE" }; export class CleanupHS extends TimedGame { constructor(width, height, ticker) { - super(10000); + super(10000, ticker); this._elementCount = this._difficulty * 6; this._elementsPlaced = 0; this._items = []; this._scree_w = width; this._scree_h = height; - this._ticker = ticker; - this._timerUpdate = () => { - this._timerDisplay(); - }; - - this._timerText = new Text({ - text: "Hello Pixi!", - style: { - fontFamily: "Arial", - fontSize: 24, - fill: 0xff1010, - align: "center", - }, - }); - this._timerText.x = 200; this.timeout = this._elementCount * 1000; // 1s per element @@ -58,14 +43,12 @@ export class CleanupHS extends TimedGame { trashcan.layout = { objectFit: "contain" }; shelf.layout = { objectFit: "contain" }; - this.gameContainer.addChild(this.trashLandingZone); - this.gameContainer.addChild(this.shelfLandingZone); - this.gameContainer.addChild(this._timerText); + this._addGameObjectChild(this.trashLandingZone); + this._addGameObjectChild(this.shelfLandingZone); } start() { super.start(); - this._ticker.add(this._timerUpdate); } reset() { @@ -93,13 +76,12 @@ export class CleanupHS extends TimedGame { makeDragable(item.sprite, (node) => { this._onItemDrop(item); }); - this.gameContainer.addChild(item.sprite); + this._addGameObjectChild(item.sprite); } } end() { super.end(); - this._ticker.remove(this._timerUpdate); } _onItemDrop(item) { @@ -150,10 +132,6 @@ export class CleanupHS extends TimedGame { this.removeTime(5000); } - _timerDisplay() { - this._timerText.text = "" + this.getRemainingTime(); - } - _timerConsoleDisplay() { console.log("time left", this.getRemainingTime()); } diff --git a/src/games/fridge.js b/src/games/fridge.js index 91987b3..5334469 100644 --- a/src/games/fridge.js +++ b/src/games/fridge.js @@ -23,8 +23,8 @@ class DropZone { } export class Fridge extends TimedGame { - constructor() { - super(10000); + constructor(ticker) { + super(10000, ticker); this._bottleCount = 6; this._bottlePlaced = 0; @@ -47,8 +47,8 @@ export class Fridge extends TimedGame { crate.layout = backgroundLayout; bottleContainer.addChild(crate); - this.gameContainer.addChild(fridgeContainer); - this.gameContainer.addChild(bottleContainer); + this._addGameObjectChild(fridgeContainer); + this._addGameObjectChild(bottleContainer); this.bottles = []; this._dropZones = []; @@ -82,7 +82,7 @@ export class Fridge extends TimedGame { for (let i = 0; i < this._bottleCount; i++) { const sprite = Sprite.from("clubmate_grey"); this._dropZones.push(new DropZone(sprite)); - this.gameContainer.addChild(sprite); + this._addGameObjectChild(sprite); sprite.x = 0; sprite.y = 0; @@ -95,7 +95,7 @@ export class Fridge extends TimedGame { this.end(true); } }); - this.gameContainer.addChild(newBottle); + this._addGameObjectChild(newBottle); this.bottles.push(newBottle); } diff --git a/src/games/game.js b/src/games/game.js index 90eea82..f0254cb 100644 --- a/src/games/game.js +++ b/src/games/game.js @@ -1,4 +1,4 @@ -import { Container } from "pixi.js"; +import { Container, RenderLayer } from "pixi.js"; export class Game { constructor() { @@ -6,6 +6,14 @@ export class Game { this.won = false; this.gameContainer = new Container(); // main container, to add the game to a node, add this container as a child this.gameContainer.layout = true; + /* + this._uiLayer = new Container(); + this._gameObjectsLayer = new Container();*/ + this._uiLayer = new RenderLayer(); + this._gameObjectsLayer = new RenderLayer(); + this._gameObjectsLayer.sortableChildren = true; + this.gameContainer.addChild(this._gameObjectsLayer); + this.gameContainer.addChild(this._uiLayer); } /* should reset the game to its initial position*/ @@ -24,4 +32,14 @@ export class Game { console.log(status ? "game won" : "game lost"); // we probably want to call a callback here } + + _addGameObjectChild(node) { + this.gameContainer.addChild(node); + this._gameObjectsLayer.attach(node); + } + + _addUiChild(node) { + this.gameContainer.addChild(node); + this._uiLayer.attach(node); + } } diff --git a/src/games/opinator.js b/src/games/opinator.js index 8ca6136..0c2d454 100644 --- a/src/games/opinator.js +++ b/src/games/opinator.js @@ -2,8 +2,8 @@ import { Application, Assets, Container, Sprite } from "pixi.js"; import { TimedGame } from "./timedGame"; export class Opinator extends TimedGame { - constructor() { - super(10000); + constructor(ticker) { + super(10000, ticker); this._inMove = false; // indicates if player has grabed the wire (is mouse down) this._currentScore = 0; this._pixelGoalScore = undefined; @@ -58,7 +58,7 @@ export class Opinator extends TimedGame { }); this._backgroundSprite.layout = { objectFit: "contain" }; this.gameContainer.layout = { width: "100%", height: "100%" }; - this.gameContainer.addChild(this._backgroundSprite); + this._addGameObjectChild(this._backgroundSprite); } reset() { diff --git a/src/games/smartMonday.js b/src/games/smartMonday.js index d3c585c..74d6cb1 100644 --- a/src/games/smartMonday.js +++ b/src/games/smartMonday.js @@ -3,8 +3,8 @@ import { TimedGame } from "./timedGame"; import { KeyBoardListener } from "../common"; export class SmartMonday extends TimedGame { - constructor() { - super(10000); + constructor(ticker) { + super(10000, ticker); this._goal = 100 * this._difficulty; // number of characters this.timeout = 1000 * (this._goal / 10); // 10 chars per second diff --git a/src/games/timedGame.js b/src/games/timedGame.js index 3aaeba4..256c4e8 100644 --- a/src/games/timedGame.js +++ b/src/games/timedGame.js @@ -1,17 +1,24 @@ import { Game } from "./game"; +import { TimerDisplay } from "../ui"; export class TimedGame extends Game { - constructor(time) { + constructor(time, ticker) { super(); this._timeoutId = undefined; this.baseTimeout = time; this.currentTimeout = time; this._timeoutStartTime = undefined; + + this.timerDisplay = new TimerDisplay(() => { + return this.getRemainingTime(); + }, ticker); + this._addUiChild(this.timerDisplay.node); } start() { super.start(); + this.timerDisplay.start(); this._timeoutStartTime = Date.now(); this._timeoutId = setInterval(() => { this._onTimeout(); @@ -43,6 +50,7 @@ export class TimedGame extends Game { end(status) { super.end(status); + this.timerDisplay.stop(); clearTimeout(this._timeoutId); this._timeoutId = undefined; } diff --git a/src/main.js b/src/main.js index 40b71d4..034cfbd 100644 --- a/src/main.js +++ b/src/main.js @@ -100,12 +100,10 @@ function switchToGame(gameContainer, newGame) { const fridge = new Fridge(app.ticker); const smartMonday = new SmartMonday(app.ticker); const cleanupHS = new CleanupHS(root.width, root.height, app.ticker); - //gameContainter.addChild(fridge.gameContainer); - //gameContainter.addChild(opinator.gameContainer); - //gameContainter.addChild(smartMonday.gameContainer); - gameContainter.addChild(cleanupHS.gameContainer); + let currentGame = opinator; + gameContainter.addChild(currentGame.gameContainer); root.addChild(gameContainter); - cleanupHS.start(); + currentGame.start(); })(); diff --git a/src/ui/index.js b/src/ui/index.js new file mode 100644 index 0000000..3245e3c --- /dev/null +++ b/src/ui/index.js @@ -0,0 +1 @@ +export { TimerDisplay } from "./timerDisplay"; diff --git a/src/ui/timerDisplay.js b/src/ui/timerDisplay.js new file mode 100644 index 0000000..26763ac --- /dev/null +++ b/src/ui/timerDisplay.js @@ -0,0 +1,30 @@ +import { Text } from "pixi.js"; + +export class TimerDisplay { + /* variable callback should be a callback giving the value to display */ + constructor(variableCallback, ticker) { + this.node = new Text({ + text: "default text", + style: { + fontFamily: "Arial", + fontSize: 24, + fill: 0xff1010, + align: "center", + }, + }); + + this.variableCallback = variableCallback; + this.callback = () => { + this.node.text = "" + this.variableCallback(); + }; + this.ticker = ticker; + } + + start() { + this.ticker.add(this.callback); + } + + stop() { + this.ticker.remove(this.callback); + } +} diff --git a/todo.md b/todo.md new file mode 100644 index 0000000..05cb93e --- /dev/null +++ b/todo.md @@ -0,0 +1,7 @@ +- game cycle -> launch a game handle end and launch next + +- diplay info + - game result + - game + - game name + - play instruction