objects.js

import {Thing} from "../../hampsterengine/src/things";
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');
    canvas.fillRect(x + 1, y + 1, width - 2, height - 2);

    // Draw the border
    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);
}

// Public

export class Button extends Thing {
    constructor(props) {
        super(props);
        this.sprite = ButtonBorder;

        this.clicked = false;
        this.icon = null; //Image data

        this.height = 14;
        this.width = 16;

        this.depressedColour = '#645372';
    }

    draw() {
        const basey = this.y + (this.clicked ? 2 : 0);
        drawButton(this.x, basey, this.width, this.height, this.sprite, this.clicked, this.depressedColour);
    }

    mousedown() {
        this.clicked = true;
    }

    mouseup() {
    }

    mouseupOffThing() {
        this.clicked = false;
    }
}

export class MainMenuButton extends Button {
    constructor(label, action=function(){}) {
        super();

        this.label = label;
        this.action = action;

        this.fontSize = 8;
        this.font = 'serif';

        this.color = '#000000';
    }