Skip to content
Snippets Groups Projects
objects.js 3.29 KiB
Newer Older
  • Learn to ignore specific revisions
  • Bye's avatar
    Bye committed
    import {Thing} from "../../hampsterengine/src/things";
    
    Bye's avatar
    Bye committed
    import ButtonBorder from "../img/button.webp";
    
    // Private
    
    function drawButton(x, y, width, height, sprite, clicked, depressedColour) {
        width = Math.ceil(width)
        height = Math.ceil(height)
    
        if (!clicked) {
            canvas.setFillColor(depressedColour);
            canvas.fillRect(x, y + height - 2, width, 2);
            canvas.fillRect(x + 1, y + height - 1, width - 2, 2);
        }
    
        canvas.setFillColor('white');
    
    Bye's avatar
    Bye committed
        canvas.fillRect(x + 1, y + 1, width - 2, height - 2);
    
    Bye's avatar
    Bye committed
    
        // Draw the border
    
    Bye's avatar
    Bye committed
        canvas.sliceImage(sprite, x, y, 3, height, 0, 0, 3, 14);
        canvas.sliceImage(sprite, x+3, y, width - 5, height, 3, 0, 11, 14);
        canvas.sliceImage(sprite, x+width-2, y, 3, height, 14, 0, 3, 14);
    
    Bye's avatar
    Bye committed
    }
    
    // Public
    
    Bye's avatar
    Bye committed
    
    export class Button extends Thing {
        constructor(props) {
            super(props);
    
    Bye's avatar
    Bye committed
            this.sprite = ButtonBorder;
    
            this.clicked = false;
            this.icon = null; //Image data
    
            this.height = 14;
            this.width = 16;
    
    
    Bye's avatar
    Bye committed
            this.depressedColour = '#645372';
    
    Bye's avatar
    Bye committed
        }
    
    
    Bye's avatar
    Bye committed
        draw() {
    
    Bye's avatar
    Bye committed
            const basey = this.y + (this.clicked ? 2 : 0);
            drawButton(this.x, basey, this.width, this.height, this.sprite, this.clicked, this.depressedColour);
    
    Bye's avatar
    Bye committed
        }
    
        mousedown() {
            this.clicked = true;
        }
    
    
    Bye's avatar
    Bye committed
        mouseup() {
        }
    
    
    Bye's avatar
    Bye committed
        mouseupOffThing() {
    
    Bye's avatar
    Bye committed
            this.clicked = false;
    
    Bye's avatar
    Bye committed
        }
    
    Bye's avatar
    Bye committed
    }
    
    Bye's avatar
    Bye committed
    
    
    Bye's avatar
    Bye committed
    export class MainMenuButton extends Button {
    
    Bye's avatar
    Bye committed
        constructor(label, action=function(){}) {
            super();
    
            this.label = label;
            this.action = action;
    
    
    Bye's avatar
    Bye committed
            this.fontSize = 8;
    
    Bye's avatar
    Bye committed
            this.font = 'serif';
    
    
    Bye's avatar
    Bye committed
            this.color = '#000000';
    
    Bye's avatar
    Bye committed
        }
    
        draw() {
            const font = `${this.fontSize}px ${this.font}`;
    
            canvas.ctx.font = font;
            let text = canvas.ctx.measureText(this.label);
    
            const padding = this.fontSize/2;
            canvas.setFillColor(this.bgColor);
    
            this.width = text.width + padding;
    
    Bye's avatar
    Bye committed
    
    
    Bye's avatar
    Bye committed
            const basey = this.y + (this.clicked ? 2 : 0);
            drawButton(this.x, basey, this.width, this.height, this.sprite, this.clicked, this.depressedColour);
    
    Bye's avatar
    Bye committed
    
            canvas.setFillColor(this.color);
            canvas.drawText(
    
    Bye's avatar
    Bye committed
                this.label, this.x + this.width/2, basey + this.height/2, {
    
    Bye's avatar
    Bye committed
                    font: font, textBaseline: "middle", textAlign: "center"
                }
            );
    
    
    Bye's avatar
    Bye committed
            // DO NOT REMOVE THIS. THE TEXT ON THE MAIN MENU BREAKS OTHERWISE.
            canvas.drawText("", 0, 0, {})
    
    Bye's avatar
    Bye committed
        }
    
    Bye's avatar
    Bye committed
    
        mouseup() {
            super.mouseup();
            this.action();
        }
    
    Bye's avatar
    Bye committed
    }
    
    export class Logo extends Thing {
        constructor(props) {
            super(props);
            this.spriteImage = null;
            this.align = 1; // 1=Center
                            // 2=Left
        }
    
        draw() {
    
    Bye's avatar
    Bye committed
            canvas.setFillColor('#0f0f0f');
    
    Bye's avatar
    Bye committed
            let font = 'Times New Roman';
            let align = (function () {
                switch (this.align) {
                    default: return 'center';
                    case 2: return 'left';
                    case 3: return  'right';
                }
            })
            canvas.drawText('Committee of', this.x, this.y, {
                textAlign: align,
                textBaseline: 'bottom',
                font: `12px ${font}`
            })
            canvas.drawText('THIRTEEN', this.x, this.y, {
                textAlign: align,
                textBaseline: 'top',
                font: `24px ${font}`
            });
        }
    
    }