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

import {
    cardDecks
} from "./CardDeck.js";
import {
    Player
} from "./Player.js";
import {
    Stack
} from "./Stack.js";
import {
    SocketHandler
} from "./socket.js";
import {
    Card
} from "./Card.js";

export class Game {
    constructor() {
        this.players = [];
        this.player = new Player(this);
        this.players.push(this.player);
        this.activePlayerID = null;
        this.players[0].isTurn = true;

        this.clockwise = true;

        this.deck = cardDecks[0];
        this.drawingStack = new Stack();
        this.playingStack = new Stack();


        this.config = {
            startingCards: 10,
        };

        this.eventHandlers = [];
        this.eventListeners = [];

        this.arrowRotation = 0;
        this.choosingColor = false;
    }

    init() {
        this.player.init();

        for (let i = 0; i < 5; i++) {
            this.drawingStack.add(new Card("", "", false));
        }

        this.registerListener('click', (data) => {
            if (this.choosingColor) {
                return;
            }

            console.log(data);
            const minX = this.renderer.width / 2 - 330;
            const maxX = minX + 130;
            const minY = this.renderer.height / 2 - 330;
            const maxY = minY + 180;
            if (data.x > minX && data.x < maxX && data.y > minY && data.y < maxX) {
                console.log('found');
                this.onCardDrawn();
            }
        });

        this.registerListener('click', (data) => {
            if (!this.choosingColor) {
                return;
            }

            const centerX = this.renderer.width / 2;
            const centerY = this.renderer.height / 2;
            const dx = data.x - centerX;
            const dy = data.y - centerY;
            const d = Math.sqrt(dx ** 2, dy ** 2)
            if (d <= 125) {
                if (dx > 0 && dy > 0) {
                    this.onColorSelected('RED');
                } else if (dx > 0 && dy < 0) {
                    this.onColorSelected('BLUE');
                } else if (dx < 0 && dy > 0) {
                    this.onColorSelected('GREEN');
                } else {
                    this.onColorSelected('YELLOW');
                }
            }
        })
    }

    registerEventHandler(eventHandler) {
        this.eventHandlers.push(eventHandler);
        this.eventListeners.forEach(listener => eventHandler.on(...listener));
    }

    registerListener(type, eventListener, x = 0, y = 0, width = 1, height = 1) {
        this.eventListeners.push([
            type,
            eventListener,
            x,
            y,
            width,
            height
        ]);
        this.eventHandlers.forEach(handler => handler.on(type, eventListener), x, y, width, height);
    }

    onCardPlayed() {}
    onCardDrawn() {}
    onColorSelected(color) {}

    playerJoined(player, cardCount) {
        this.players.push(player);
        for (let i = 0; i < cardCount; i++) {
            player.hand.push(new Card("", "", false));
        }
    }

    playCard(card) {
        if (this.activePlayerID === this.player.id) {
            this.onCardPlayed(card);
        }
    }

    draw(renderer) {
        // Drawing main stack
        renderer.push();
        renderer.anchor('center', 'center');
        this.playingStack.draw(renderer);
        renderer.pop();

        // Drawing direction
        renderer.push();
        renderer.anchor('center', 'center');
        renderer.rotate(this.arrowRotation);
        this.renderer.begin().arc(0, 0, 200, 0, 0.8 * Math.PI).stroke(0).strokeWidth(20).close();
        this.renderer.begin().arc(0, 0, 200, Math.PI, 1.8 * Math.PI).stroke(0).strokeWidth(20).close();
        if (this.clockwise) {
            this.renderer.begin().rotate(0.8, 'RADIANS').translate(200, 0).triangle(-30, 0, 60, 60).fill(0).close();
            this.renderer.begin().rotate(1.8, 'RADIANS').translate(200, 0).triangle(-30, 0, 60, 60).fill(0).close();
            this.arrowRotation++;
        } else {
            this.renderer.begin().rotate(0, 'RADIANS').translate(200, 0).triangle(-30, 0, 60, -60).fill(0).close();
            this.renderer.begin().rotate(1, 'RADIANS').translate(200, 0).triangle(-30, 0, 60, -60).fill(0).close();
            this.arrowRotation--;
        }
        if (this.arrowRotation > 360) {
            this.arrowRotation -= 360;
        } else if (this.arrowRotation < 0) {
            this.arrowRotation += 360;
        }
        renderer.pop();

        // Drawing backup stack
        renderer.push();
        renderer.anchor('center', 'center');
        renderer.translate(-250, -250);
        this.drawingStack.draw(renderer);
        renderer.pop();

        // Drawing color selection
        if (this.choosingColor) {
            renderer.push();
            renderer.anchor('center', 'center');
            renderer.begin().arc(0, 0, 125, 0, 0.5 * Math.PI).finish().fill('RED').close();
            renderer.begin().arc(0, 0, 125, 0.5 * Math.PI, Math.PI).finish().fill('GREEN').close();
            renderer.begin().arc(0, 0, 125, Math.PI, 1.5 * Math.PI).finish().fill('YELLOW').close();
            renderer.begin().arc(0, 0, 125, 1.5 * Math.PI, 2 * Math.PI).finish().fill('BLUE').close();
            renderer.pop();
        }

        // Drawing own hand
        renderer.push();
        renderer.anchor('center', 'bottom');
        if (this.activePlayerID === this.player.id) {
            renderer.begin().text("Your turn", 0, -200).fill(0).close();
        }

        this.player.draw(renderer);
        renderer.pop();

        // Drawing other players
        if (this.players.length > 1) {
            renderer.push();
            renderer.anchor('right', 'center');
            renderer.rotate(-90);
            this.players[1].draw(renderer);
            renderer.pop();
        }
        if (this.players.length > 2) {
            renderer.push();
            renderer.anchor('center', 'top');
            renderer.rotate(-180);
            renderer.begin().roundedRect(0, 0, 100, 150, 10).fill(0).close();
            this.players[2].draw(renderer);
            renderer.pop();
        }
        if (this.players.length > 3) {
            renderer.push();
            renderer.anchor('left', 'center');
            renderer.rotate(90);
            renderer.begin().roundedRect(0, 0, 100, 150, 10).fill(0).close();
            this.players[3].draw(renderer);
            renderer.pop();
        }
    }
}