class Game {
    constructor() {
        this.canvas = document.getElementById("gameCanvas");
        this.context = document.getElementById("2d");
        this.myName = "destiny";
        const game = this;
        const socket = io("http://127.0.0.1:4000", { transports: ['websocket'] });

        socket.on("clientsCount", function(num) {

            console.log("成功連上的人數", num);

        });
        

        socket.on("move all", function(a) {

            // 這邊就會出現問題Uncaught TypeError: Cannot read properties of null (reading 'clearRect')
            //其他地方都是正常運作的
            
            game.context.clearRect(0, 0, game.canvas.width, game.canvas.height);
            const r = 10;
            game.context.beginPath();
            game.context.arc(a.x, a.y, r, 0, 2 * Math.PI);
            game.context.fillStyle = "green";
            game.context.fill();
        });
        
        this.canvas.addEventListener("mousemove", function(e) {
            console.log("mouse on", "x:", e.clientX, "y:", e.clientY);

            
            socket.emit("mouse move go", {
                x: e.clientX,
                y: e.clientY,
                name: game.myName
            });
        });
    };
};