diff --git a/src/assets/img/uradibou.jpg b/src/assets/img/uradibou.jpg new file mode 100644 index 0000000..e8b2104 Binary files /dev/null and b/src/assets/img/uradibou.jpg differ diff --git a/src/dragAndDrop.js b/src/common/dragAndDrop.js similarity index 87% rename from src/dragAndDrop.js rename to src/common/dragAndDrop.js index 8267bbe..3aa03a0 100644 --- a/src/dragAndDrop.js +++ b/src/common/dragAndDrop.js @@ -1,5 +1,3 @@ -let appt = { app: undefined }; - function onDragMove(node, event, shift = { x: 0, y: 0 }) { // shift is a tuple representing the shift between the coords of the node and the pointer const dragPoint = event.global; @@ -13,12 +11,6 @@ function onDragMove(node, event, shift = { x: 0, y: 0 }) { const right = parent.layout?.computedLayout.width - node.layout?.computedLayout.width; - console.log( - node.x, - right, - parent.width, - node.layout?.computedLayout.width, - ); if (newPos.x > right) { newPos.x = right; } @@ -60,11 +52,10 @@ function onDragStart(node, onDrop, event) { } function makeDragable(node, onDrop = () => {}) { - console.log("make drag"); node.eventMode = "static"; node.on("pointerdown", (event) => { onDragStart(node, onDrop, event); }); } -export { makeDragable, appt }; +export { makeDragable }; diff --git a/src/common/index.js b/src/common/index.js new file mode 100644 index 0000000..d209f48 --- /dev/null +++ b/src/common/index.js @@ -0,0 +1,2 @@ +export { backgroundLayout } from "./layouts"; +export { makeDragable } from "./dragAndDrop"; diff --git a/src/common/layouts.js b/src/common/layouts.js new file mode 100644 index 0000000..b0a3f13 --- /dev/null +++ b/src/common/layouts.js @@ -0,0 +1,6 @@ +export const backgroundLayout = { + width: "100%", + height: "100%", + objectFit: "cover", + position: "absolute", +}; diff --git a/src/games/fridge.js b/src/games/fridge.js new file mode 100644 index 0000000..00693da --- /dev/null +++ b/src/games/fridge.js @@ -0,0 +1,44 @@ +import { Application, Assets, Container, Sprite } from "pixi.js"; +import { makeDragable, backgroundLayout } from "../common"; +import { Game } from "./game"; + +export class Fridge extends Game { + constructor() { + super(); + const fridgeContainer = new Container(); + fridgeContainer.layout = { width: "50%" }; + const fridge = Sprite.from("frigo"); + fridge.layout = backgroundLayout; + fridgeContainer.addChild(fridge); + + const bottleContainer = new Container(); + bottleContainer.layout = { + width: "50%", + flexDirection: "row", + flexWrap: "wrap", + }; + const crate = Sprite.from("mate_caisse"); + crate.layout = backgroundLayout; + bottleContainer.addChild(crate); + + this.gameContainer.addChild(fridgeContainer); + this.gameContainer.addChild(bottleContainer); + + const bottleLayout = { + width: "12%", + height: "16%", + position: "absolute", + }; + for (let i = 0; i < 12; i++) { + const newBottle = Sprite.from("clubmate"); + newBottle.layout = bottleLayout; + makeDragable(newBottle); + this.gameContainer.addChild(newBottle); + + newBottle.x = 0; + newBottle.y = 0; + } + } + + reset() {} +} diff --git a/src/games/game.js b/src/games/game.js new file mode 100644 index 0000000..8fbb348 --- /dev/null +++ b/src/games/game.js @@ -0,0 +1,12 @@ +import { Container } from "pixi.js"; + +export class Game { + constructor() { + this._difficulty = 1; + this.gameContainer = new Container(); // main container, to add the game to a node, add this container as a child + this.gameContainer.layout = true; + } + + /* should reset the game to its initial position*/ + reset() {} +} diff --git a/src/games/index.js b/src/games/index.js new file mode 100644 index 0000000..a0355bf --- /dev/null +++ b/src/games/index.js @@ -0,0 +1,2 @@ +export { Fridge } from "./fridge.js"; +export { Opinator } from "./opinator.js"; diff --git a/src/games/opinator.js b/src/games/opinator.js new file mode 100644 index 0000000..cd82586 --- /dev/null +++ b/src/games/opinator.js @@ -0,0 +1,66 @@ +import { Application, Assets, Container, Sprite } from "pixi.js"; +import { backgroundLayout } from "../common"; +import { Game } from "./game"; + +export class Opinator extends Game { + constructor() { + super(); + this._inMove = false; // indicates if player has grabed the wire (is mouse down) + this._currentScore = 0; + this._pixelGoalScore = undefined; + this._goalScore = 10 * this._difficulty; // goal to match, measured in play area, 10 = moving the mouse on the equivalent of 10 play areas + this._lastMousePos = undefined; // use to compute the travelled distance + this.won = false; + + const backgroundSprite = Sprite.from("opinator"); + + this._pixelGoalScore = backgroundSprite.width * this._goalScore; // beware of resize mid game + + backgroundSprite.eventMode = "static"; + + backgroundSprite.on("pointerdown", (event) => { + console.log("Opinator grabbed"); + this._inMove = true; + this._lastMousePos = event.client.clone(); + }); + + backgroundSprite.on("pointerupoutside", () => { + console.log("Opinator released"); + this._inMove = false; + this._lastMousePos = undefined; + }); + backgroundSprite.on("pointerup", () => { + console.log("Opinator released"); + this._inMove = false; + this._lastMousePos = undefined; + }); + + backgroundSprite.on("mousemove", (event) => { + if (this._inMove && !this.won) { + const newMousePos = event.client; + const progress = Math.sqrt( + (newMousePos.x - this._lastMousePos.x) ** 2 + + (newMousePos.y - this._lastMousePos.y) ** 2, + ); + if (progress > 0) { + this._lastMousePos = newMousePos.clone(); + this._currentScore += progress; + console.log( + "mouse move, current score", + this._currentScore, + "goal", + this._pixelGoalScore, + ); + if (this._pixelGoalScore < this._currentScore) { + console.log("game won"); + this.won = true; + } + } //else ignore, not enough move to get some distance + } + }); + backgroundSprite.layout = backgroundLayout; + this.gameContainer.addChild(backgroundSprite); + } + + reset() {} +} diff --git a/src/main.js b/src/main.js index 9ec7285..2254dcd 100644 --- a/src/main.js +++ b/src/main.js @@ -1,16 +1,11 @@ import "@pixi/layout"; import { Application, Assets, Container, Sprite } from "pixi.js"; -import { makeDragable, appt } from "./dragAndDrop.js"; +import { Fridge, Opinator } from "./games"; +import { backgroundLayout } from "./common"; + const app = new Application(); let root = new Container(); -appt.app = app; -const backgroundLayout = { - width: "100%", - height: "100%", - objectFit: "cover", - position: "absolute", -}; async function setup() { await app.init({ background: "#1099bb", resizeTo: window }); @@ -57,108 +52,6 @@ async function preload() { await Assets.load(assets); } -class Opinator { - constructor(gameContainer) { - this.inMove = false; // indicates if player has grabed the wire (is mouse down) - this.currentScore = 0; - this.pixelGoalScore = undefined; - this.goalScore = 10; // goal to match, measured in play area, 10 = moving the mouse on the equivalent of 10 play areas - this.lastMousePos = undefined; // use to compute the travelled distance - this.won = false; - - const backgroundSprite = Sprite.from("opinator"); - - this.pixelGoalScore = backgroundSprite.width * this.goalScore; // beware of resize mid game - - backgroundSprite.eventMode = "static"; - - backgroundSprite.on("pointerdown", (event) => { - console.log("Opinator grabbed"); - this.inMove = true; - this.lastMousePos = event.client.clone(); - }); - - backgroundSprite.on("pointerupoutside", () => { - console.log("Opinator released"); - this.inMove = false; - this.lastMousePos = undefined; - }); - backgroundSprite.on("pointerup", () => { - console.log("Opinator released"); - this.inMove = false; - this.lastMousePos = undefined; - }); - - backgroundSprite.on("mousemove", (event) => { - if (this.inMove && !this.won) { - const newMousePos = event.client; - const progress = Math.sqrt( - (newMousePos.x - this.lastMousePos.x) ** 2 + - (newMousePos.y - this.lastMousePos.y) ** 2, - ); - if (progress > 0) { - this.lastMousePos = newMousePos.clone(); - this.currentScore += progress; - console.log( - "mouse move, current score", - this.currentScore, - "goal", - this.pixelGoalScore, - ); - if (this.pixelGoalScore < this.currentScore) { - console.log("game won"); - this.won = true; - } - } //else ignore, not enough move to get some distance - } - }); - backgroundSprite.layout = { - width: "100%", - height: "100%", - objectFit: "contain", - }; - gameContainer.addChild(backgroundSprite); - } -} - -class Fridge { - constructor(gameContainer) { - const fridgeContainer = new Container(); - fridgeContainer.layout = { width: "50%" }; - const fridge = Sprite.from("frigo"); - fridge.layout = backgroundLayout; - fridgeContainer.addChild(fridge); - - const bottleContainer = new Container(); - bottleContainer.layout = { - width: "50%", - flexDirection: "row", - flexWrap: "wrap", - }; - const crate = Sprite.from("mate_caisse"); - crate.layout = backgroundLayout; - bottleContainer.addChild(crate); - - gameContainer.addChild(fridgeContainer); - gameContainer.addChild(bottleContainer); - - const bottleLayout = { - width: "12%", - height: "16%", - position: "absolute", - }; - for (let i = 0; i < 12; i++) { - const newBottle = Sprite.from("clubmate"); - newBottle.layout = bottleLayout; - makeDragable(newBottle); - gameContainer.addChild(newBottle); - - newBottle.x = 0; - newBottle.y = 0; - } - } -} - function switchToGame(gameContainer, newGame) { //empty previous container //create new game and add @@ -182,7 +75,9 @@ function switchToGame(gameContainer, newGame) { maxHeight: "100%", margin: 0, }; - //const opinator = new Opinator(gameContainter); - const fridge = new Fridge(gameContainter); + const opinator = new Opinator(); + const fridge = new Fridge(); + gameContainter.addChild(fridge.gameContainer); + //gameContainter.addChild(opinator.gameContainer); root.addChild(gameContainter); })();