g.lagaffe/uradibou
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

change file organization, add a generic class Game as parent class for all mini games

Browse source
This commit is contained in:
lagaffe 2026-04-18 14:38:54 +02:00
parent c97b1460c5
commit 885ceca5f0
9 changed files with 140 additions and 122 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

BIN
src/assets/img/uradibou.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 49 KiB

11
src/dragAndDrop.js → src/common/dragAndDrop.js
View file

@ -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 };

2
src/common/index.js Normal file
View file

@ -0,0 +1,2 @@
export { backgroundLayout } from "./layouts";
export { makeDragable } from "./dragAndDrop";

6
src/common/layouts.js Normal file
View file

@ -0,0 +1,6 @@
export const backgroundLayout = {
width: "100%",
height: "100%",
objectFit: "cover",
position: "absolute",
};

44
src/games/fridge.js Normal file
View file

@ -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() {}
}

12
src/games/game.js Normal file
View file

@ -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() {}
}

2
src/games/index.js Normal file
View file

@ -0,0 +1,2 @@
export { Fridge } from "./fridge.js";
export { Opinator } from "./opinator.js";

66
src/games/opinator.js Normal file
View file

@ -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() {}
}

119
src/main.js
View file

@ -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);
})();