uradibou/src/main.js

import "@pixi/layout";
import { Application, Assets, Container, Sprite } from "pixi.js";

import { makeDragable, appt } from "./dragAndDrop.js";
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 });

    root = app.stage;
    const setRootLayout = () => {
        root.layout = {
            width: app.screen.width,
            height: app.screen.height,
            maxWidth: app.screen.width,
            maxHeight: app.screen.height,
        };
    };
    setRootLayout();
    app.renderer.on("resize", () => {
        setRootLayout();
    });
    document.body.appendChild(app.canvas);
}

async function preload() {
    const assets = [
        {
            alias: "background",
            src: "assets/img/background1.jpg",
        },
        {
            alias: "opinator",
            src: "assets/img/opinator.avif",
        },
        {
            alias: "frigo",
            src: "assets/img/frigo.jpg",
        },
        {
            alias: "clubmate",
            src: "assets/img/clubmate.png",
        },
        {
            alias: "mate_caisse",
            src: "assets/img/caisse.jpg",
        },
    ];
    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
}

(async () => {
    await setup();
    await preload();

    const background = Sprite.from("background");
    background.layout = backgroundLayout;

    root.addChild(background);

    const gameContainter = new Container();
    gameContainter.layout = {
        position: "absolute",
        width: "100%",
        height: "100%",
        maxWidth: "100%",
        maxHeight: "100%",
        margin: 0,
    };
    //const opinator = new Opinator(gameContainter);
    const fridge = new Fridge(gameContainter);
    root.addChild(gameContainter);
})();