teetopia/client/js/viewer/GameView.js

import { FiniteStateMachine } from "../libraries/FiniteStateMachine.js";
import { SpritesheetAtlas } from "../libraries/SpritesheetAtlas.js";
import { WebsocketCommunicator } from "../libraries/WebsocketCommunicator.js";

import { CharacterCreationState } from "./states/CharacterCreationState.js";
import { OverworldState } from "./states/OverworldState.js";

export class GameView {
    constructor() {
        this.stateMachine = new FiniteStateMachine();
        this.characterAtlas = new SpritesheetAtlas()
        this.stateMachine.registerState("charactercreation", new CharacterCreationState(this))
        this.stateMachine.registerState("play", new OverworldState(this))
        this.websocket = new WebsocketCommunicator()
    }
    async init() {
        this.websocket.subscribe(this)
        this.websocket.connect().then((websocket) => {
            websocket.send("connect")
        }, (e) => {
            console.error(e)
        })

        let initialLoading = []
        initialLoading.push(this.characterAtlas.load("./assets/roguelikeChar_transparent.png", { width: 16, height: 16, margin: 1 }))

        await Promise.all(initialLoading)
        this.stateMachine.setCurrentState("charactercreation");
        this.stateMachine.getCurrentState().enter();
    }

    draw(ctx, scaledCanvas) {
        this.stateMachine.getCurrentState().draw(ctx, scaledCanvas);
    }

    update(delta) {
        this.stateMachine.getCurrentState().update(delta);
    }

    handleMessage(message) {
        console.log("got message", message)
    }

    handleClose() {
        console.log("socket closed")
    }
}