diff --git a/DockerfileDev b/DockerfileDev index 5e12e3c..794d0ca 100644 --- a/DockerfileDev +++ b/DockerfileDev @@ -3,4 +3,3 @@ FROM node:20-alpine WORKDIR /uradibou CMD npm install && npm run dev -#CMD ["npm", "install &&", "npm", "run", "dev" ] diff --git a/readme.md b/readme.md index 7e1802f..fa99d28 100644 --- a/readme.md +++ b/readme.md @@ -1,9 +1,15 @@ ### archi -we use docker +we use podman -I will try to make a clean setup, so 2 docker files, one for quick tests during dev the other for production +#### to develop +run rundev.sh and you should be able to modify the code and have live update +#### to deploy +run run.sh, it build the production image and starts a container + + +I will try to make a clean setup, so 2 docker files, one for quick tests during dev the other for production. It is not possible to merge the two dockerfiles because the dev one needs a bind volume to update code from host which we dont want in production the dev docker uses vite live update feature. to do that, it has a volume bind to it containing the code (src). this allows to be able to modify live without rebuilding the image nore re launching the container. diff --git a/rundev.sh b/rundev.sh index 1f0a1ba..6acbb0b 100644 --- a/rundev.sh +++ b/rundev.sh @@ -1,2 +1,2 @@ podman image build --file DockerfileDev -t uradibou_dev:latest . -podman container run --rm -p 5173:5173 --name uradibou --volume src:/uradibou uradibou_dev:latest +podman container run --rm -p 5173:5173 --name uradibou --volume ./src:/uradibou uradibou_dev:latest diff --git a/src/assets/img/background1.jpg b/src/assets/img/background1.jpg new file mode 100644 index 0000000..6b31a9d Binary files /dev/null and b/src/assets/img/background1.jpg differ diff --git a/src/assets/img/opinator.avif b/src/assets/img/opinator.avif new file mode 100644 index 0000000..b4cf582 Binary files /dev/null and b/src/assets/img/opinator.avif differ diff --git a/src/main.js b/src/main.js index a1288a0..fa5c544 100644 --- a/src/main.js +++ b/src/main.js @@ -1,45 +1,106 @@ // description: This example demonstrates how to use a Container to group and manipulate multiple sprites import { Application, Assets, Container, Sprite } from "pixi.js"; -(async () => { - // Create a new application - const app = new Application(); +const app = new Application(); - // Initialize the application +async function setup() { await app.init({ background: "#1099bb", resizeTo: window }); - - // Append the application canvas to the document body document.body.appendChild(app.canvas); +} - // Create and add a container to the stage - const container = new Container(); +async function preload() { + const assets = [ + { + alias: "background", + src: "assets/img/background1.jpg", + }, + { + alias: "opinator", + src: "assets/img/opinator.avif", + }, + ]; + await Assets.load(assets); +} - app.stage.addChild(container); +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; - // Load the bunny texture - const texture = await Assets.load("https://pixijs.com/assets/bunny.png"); + const backgroundSprite = Sprite.from("opinator"); - // Create a 5x5 grid of bunnies in the container - for (let i = 0; i < 45; i++) { - const bunny = new Sprite(texture); + this.pixelGoalScore = backgroundSprite.width * this.goalScore; // beware of resize mid game - bunny.x = (i % 5) * 40; - bunny.y = Math.floor(i / 5) * 40; - container.addChild(bunny); + 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 + } + }); + + gameContainer.addChild(backgroundSprite); + } +} + +(async () => { + await setup(); + await preload(); + + const background = Sprite.from("background"); + + if (app.screen.width > app.screen.height) { + background.width = app.screen.width * 1.2; + background.scale.y = background.scale.x; + } else { + background.height = app.screen.height * 1.2; + background.scale.x = background.scale.y; } - // Move the container to the center - container.x = app.screen.width / 2; - container.y = app.screen.height / 2; + app.stage.addChild(background); - // Center the bunny sprites in local container coordinates - container.pivot.x = container.width / 2; - container.pivot.y = container.height / 2; + const gameContainter = new Container(); - // Listen for animate update - app.ticker.add((time) => { - // Continuously rotate the container! - // * use delta to create frame-independent transform * - container.rotation -= 0.01 * time.deltaTime; - }); + const opinator = new Opinator(gameContainter); + + app.stage.addChild(gameContainter); })();