add prototype of opinator game

DockerfileDev

@@ -3,4 +3,3 @@ FROM node:20-alpine
 WORKDIR /uradibou
 
 CMD npm install && npm run dev
-#CMD ["npm", "install &&", "npm", "run", "dev" ]

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.
 

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

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