eyeofmidas.com/htdocs/ballsort/js/game/Slot.js

import { Ball } from "./Ball.js";

export class Slot {
    constructor(id) {
        this.id = id;
        this.balls = [];
        
    }

    addBall(ball) {
        this.balls.push(ball);
    }

    removeBall() {
        return this.balls.pop();
    }

    draw(ctx, scaledCanvas) {
        ctx.beginPath();
        ctx.moveTo(0,0);
        ctx.lineTo(Slot.width, 0);
        ctx.lineTo(Slot.width, Slot.height);
        ctx.arcTo(Slot.width, Slot.height + Slot.width / 2, Slot.width / 2, Slot.height + Slot.width / 2, Slot.width / 2);
        ctx.arcTo(0, Slot.height + Slot.width / 2, 0, Slot.height, Slot.width / 2);
        ctx.closePath();
        ctx.fill();
        // ctx.stroke();

        for(let i = 0; i < this.balls.length; i++) {
            ctx.save();
            ctx.translate(Slot.width / 2, Slot.height - i * (2 * (Ball.radius + Ball.radiusPadding)) - Slot.width / 4);
            this.balls[i].draw(ctx, scaledCanvas);
            ctx.restore();
        }
    }

    update(delta) {

    }

    canAddBall(ballToAdd) {
        if(this.balls.length == 0) { return true; } //it's empty
        if(this.balls.length == 4) { return false; } //it's full
        if(this.balls[this.balls.length -1].colorId != ballToAdd.colorId) { return false; } //color doesn't match

        return true;
    }

    colorsAllMatch() {
        if(this.balls.length == 0) {
            return true;
        }
        if(this.balls.length == 4) {
            let ballColorId = this.balls[0].colorId;
            for(let i = 0; i < this.balls.length; i++) {
                let ball = this.balls[i];
                if(ball.colorId != ballColorId) {
                    return false;
                }
            }
            return true;
        }
        return false;
    }
}

Slot.width = 40;
Slot.widthPadding = 10;
Slot.height = 160;
Slot.heightPadding = 80;