Skip to content
Snippets Groups Projects
Select Git revision
  • d96e9e9328d732fe3a8eecc90305cfc144cd4143
  • main default protected
2 results

objects.js

Blame
  • objects.js 2.15 KiB
    import {Thing} from "../../hampsterengine/src/things";
    import ButtonBKG from "../img/button.webp";
    
    export class Button extends Thing {
        constructor(props) {
            super(props);
            this.sprite = ButtonBKG;
        }
    
    }
    
    export class MainMenuButton extends Thing {
        constructor(label, action=function(){}) {
            super();
    
            this.label = label;
            this.action = action;
    
            this.fontSize = 10;
            this.font = 'serif';
    
            this.bgColor = '#5f5f5f';
            this.color = '#ffffff';
        }
    
        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);
    
            const rectHeight = this.fontSize + padding;
            this.height = rectHeight;
            this.width = text.width + padding;
            canvas.fillRect(this.x, this.y, this.width, rectHeight);
    
            canvas.setFillColor(this.color);
            canvas.drawText(
                this.label, this.x + (text.width + padding)/2, this.y + rectHeight/2, {
                    font: font, textBaseline: "middle", textAlign: "center"
                }
            );
    
            canvas.drawText("", 10, canvas.height-10, {
                textBaseline: "alphabetic"
            })
        }
    
        click() {
            this.action();
        }
    }
    
    export class Logo extends Thing {
        constructor(props) {
            super(props);
            this.spriteImage = null;
            this.align = 1; // 1=Center
                            // 2=Left
        }
    
        draw() {
            canvas.setFillColor('#efefef');
            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}`
            });
        }
    
    }