2020-coding-projects/uno/client/uno.js

import {
    Renderer
} from './render.js';
import {
    EventHandler
} from './EventHandler.js';
import {
    SocketHandler
} from './socket.js';
import {
    Game
} from './Game.js';
import {
    Card
} from './Card.js';
import {
    Player
} from './Player.js';


const socketHandler = new SocketHandler('ws://localhost:8000');
socketHandler.onMessage({
    cb: (type, data, e) => {
        console.log(type, data, e);

    }
});

export function triggerCreateGame() {
    socketHandler.initGame().then(result => {
        createGame(result);
    });
}

export function triggerJoinGame(id) {
    socketHandler.joinGame(id).then(result => {
        createGame(result);
    });
}

function createGame(data) {
    socketHandler.initialized = true;
    socketHandler.gameToken = data.gameID;

    const game = new Game();
    game.player.id = data.playerID;
    game.activePlayerID = data.activePlayerID;
    game.onCardPlayed = (card) => {
        console.log(card);
        socketHandler.playCard(card);
    };
    game.onCardDrawn = () => {
        socketHandler.drawCard();
    };
    game.onColorSelected = (color) => {
        socketHandler.selectColor(color);
    };

    if (data.players) {
        data.players.forEach(player => game.playerJoined(new Player(game, player.playerID, player.playerName), player.cardCount));
    }

    game.init();
    console.log(game);

    game.player.setHand(data.hand.map(card => new Card(card.Color, card.Value, true)));
    data.playingStack.forEach(card => {
        game.playingStack.cards.unshift(new Card(card.Color, card.Value, true));
    })

    const canvas = document.getElementById('canvas');
    const renderer = new Renderer(canvas, game);
    renderer.setSize(window.innerWidth, window.innerHeight);
    renderer.draw();

    window.addEventListener('resize', () => {
        console.log('test');
        renderer.setSize(window.innerWidth, window.innerHeight);
    });

    const eventHandler = new EventHandler(canvas);
    game.registerEventHandler(eventHandler);

    socketHandler.onMessage({
        type: 'game.joined',
        cb: (type, data) => {
            game.playerJoined(new Player(game, data.playerID, data.playerName), data.cardCount);
        },
    })
    socketHandler.onMessage({
        type: 'card.played',
        cb: (type, data) => {
            console.log(data);

            game.playingStack.add(new Card(data.card.Color, data.card.Value, true));
        },
    });
    socketHandler.onMessage({
        type: 'card.color',
        cb: (type, data) => {
            console.log(data);

            game.playingStack.setTopColor(data.color);
        },
    });
    socketHandler.onMessage({
        type: 'card.drawn',
        cb: (type, data) => {
            const player = game.players.find(p => p.id === data.playerID)
            for (let i = 0; i < data.count; i++) {
                player.addCard(new Card("", "", false));
            }
        },
    });
    socketHandler.onMessage({
        type: 'color.choose',
        cb: (type, data) => {
            game.choosingColor = true;
        },
    });
    socketHandler.onMessage({
        type: 'turn.completed',
        cb: (type, data) => {
            game.choosingColor = false;
            game.activePlayerID = data.activePlayerID;
            game.clockwise = data.directionClockwise;
        },
    });
    socketHandler.onMessage({
        type: 'player.hand',
        cb: (type, data) => {
            console.log(data);

            game.player.setHand(data.cards.map(card => new Card(card.Color, card.Value, true)));
        },
    })
}