buttons! they dont work.

.gitignore

@@ -2,3 +2,4 @@
 node_modules/
 build/
 
+.DS_Store

.gitmodules

 [submodule "hampsterengine"]
 	path = hampsterengine
 	url = https://github.com/byemc/hampsterengine.git
+	branch = main
+	update = rebase

assets/icons.json

+{ "frames": {
+   "icons.aseprite": {
+    "frame": { "x": 0, "y": 0, "w": 8, "h": 8 },
+    "rotated": false,
+    "trimmed": false,
+    "spriteSourceSize": { "x": 0, "y": 0, "w": 8, "h": 8 },
+    "sourceSize": { "w": 8, "h": 8 },
+    "duration": 100
+   }
+ },
+ "meta": {
+  "app": "https://www.aseprite.org/",
+  "version": "1.3.7-arm64",
+  "image": "icons.webp",
+  "format": "RGBA8888",
+  "size": { "w": 8, "h": 8 },
+  "scale": "1",
+  "slices": [
+  ]
+ }
+}

hampsterengine @ af2cf2a3

-Subproject commit c57ff8bcebbcd4164f2b48292c06709ff8232520
+Subproject commit af2cf2a30cde54565a43473096ecdcd2f9c0e39f

src/index.html

@@ -2,13 +2,28 @@
     body{
         margin:0;
         background: #1a1a1a;
+        /*display: flex;*/
+        /*justify-content: center;*/
+        /*height: 100vh;*/
+        /*width: 100vw;*/
     }
     canvas {
+        /*aspect-ratio: 4/3;*/
         width: 100vw;
         height: 100vh;
         object-fit: contain;
+        /*margin: auto;*/
         image-rendering: pixelated;
     }
+    #ruler {
+        width: 66px;
+        height: 100vh;
+        background: lightblue;
+        position: absolute;
+        top:0;left:0;
+        z-index: 999;
+    }
 </style>
 <canvas id="canvas"></canvas>
 <script src="./main.js"></script>
+<!--<div id="ruler"></div>-->
\ No newline at end of file

src/js/extras.js

+
+export function drawLineThroughPoint(x, y) {
+    // draws a line across the whole canvas through a point
+    canvas.drawLine()
+}

src/js/main.js

@@ -5,6 +5,10 @@ import {Room} from "../../hampsterengine/src/things.js";
 
 import {Logo, MainMenuButton} from "./objects.js";
 
+// Rooms
+import {rm_DEBUG_button} from "./rooms/debug_button";
+import {rm_DEBUG_mouse} from "./rooms/debug_mouse";
+
 const canvas = new Canvas('canvas');
 const engine = new Engine(canvas);
 const assets = engine.assetStore;
@@ -15,6 +19,12 @@ canvas.pixelRatio = 2;
 canvas.ctx.setTransform(canvas.pixelRatio, 0, 0, canvas.pixelRatio, 0, 0);
 canvas.ctx.imageSmoothingEnabled = false;
 
+let lastClickPos = {
+    x: 0, y: 0
+}
+
+window.lastClickPos = lastClickPos;
+
 const rm_MainMenu = new Room();
 rm_MainMenu.bgColor = 'black';
 
@@ -30,6 +40,7 @@ newGameButton.y = 70;
 rm_MainMenu.things.push(newGameButton);
 
 rm_MainMenu.drawGui = _ => {
+    canvas.setFillColor('white');
     canvas.drawText("(c) bye 2024", 30, canvas.height-45,{
         font: '8px serif'
     });
@@ -37,6 +48,48 @@ rm_MainMenu.drawGui = _ => {
 
 engine.registerRoom(rm_MainMenu, 'mainMenu');
 
+engine.registerRoom(rm_DEBUG_button, 'debug_button');
+engine.registerRoom(rm_DEBUG_mouse, 'debug_mouse');
+
+// const rm_DEBUG_music = new Room();
+// rm_DEBUG_music.audio = document.createElement("audio");
+// rm_DEBUG_music.start = _=> {
+//     canvas.pixelRatio =1;
+//     canvas.ctx.setTransform(1, 0, 0, 1, 0, 0);
+//
+//     const player = new Soundbox();
+//     const audio = rm_DEBUG_music.audio;
+//     player.init(song);
+//
+//     let done = false;
+//     setInterval(_=>{
+//         if (done) return;
+//
+//         done = player.generate() >= 1;
+//
+//         if (done) {
+//             const wave = player.createWave();
+//             audio.src = URL.createObjectURL(new Blob([wave], {type: "audio/wav"}));
+//             audio.play();
+//         }
+//     })
+// }
+//
+// rm_DEBUG_music.drawGui = _ => {
+//     const audio = rm_DEBUG_music.audio;
+//
+//     // get the time in seconds
+//     const date = new Date(0);
+//     date.setSeconds(audio.currentTime);
+//     const timeString = date.toISOString().substring(11, 19);
+//
+//     canvas.setFillColor('black');
+//     canvas.drawText(audio.paused ? 'Paused' : 'Playing', 10, canvas.height - 10, {});
+//     canvas.drawText(`${timeString}`, 10, canvas.height - 30, {});
+// }
+//
+// engine.registerRoom(rm_DEBUG_music, 'debug_music');
+
 function main() {
     requestAnimationFrame(main);
     canvas.fill(engine.room.bgColor ?? 'white');
@@ -48,6 +101,18 @@ function main() {
     engine.drawCursor();
 }
 
+console.debug(engine.rooms);
+
+canvas.canvas.addEventListener('click', ev => {
+    lastClickPos.x = engine.mouse.x;
+    lastClickPos.y = engine.mouse.y;
+    console.log(lastClickPos);
+})
+
+if (document.location.hash) {
+    console.log('Requesting room', document.location.hash.substring(1));
+    engine.room = engine.getRoomIndex(document.location.hash.substring(1));
+} else {
     engine.room = engine.getRoomIndex('mainMenu');
-if (document.location.hash) engine.room = engine.getRoomIndex(document.location.hash);
+}
 main();

src/js/objects.js

 import {Thing} from "../../hampsterengine/src/things";
-import ButtonBKG from "../img/button.webp";
+import ButtonBorder from "../img/button.webp";
+
+// Private
+
+function drawButton(x, y, width, height, sprite, clicked, depressedColour) {
+    width = Math.ceil(width)
+    height = Math.ceil(height)
+    // base co-ords
+    const basey = y + (clicked ? 2 : 0);
+
+    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, basey + 1, width - 2, height - 2);
+
+    // Draw the border
+    canvas.sliceImage(sprite, x, basey, 3, height, 0, 0, 3, 14);
+    canvas.sliceImage(sprite, x+3, basey, width - 5, height, 3, 0, 11, 14);
+    canvas.sliceImage(sprite, x+width-2, basey, 3, height, 14, 0, 3, 14);
+}
+
+// Public
 
 export class Button extends Thing {
     constructor(props) {
         super(props);
-        this.sprite = ButtonBKG;
+        this.sprite = ButtonBorder;
+
+        this.clicked = false;
+        this.icon = null; //Image data
+
+        this.height = 14;
+        this.width = 16;
+
+        this.depressedColour = '#3e3546';
     }
 
+    draw() {
+        drawButton(this.x, this.y, this.width, this.height, this.sprite, this.clicked, this.depressedColour);
     }
 
-export class MainMenuButton extends Thing {
+    mousedown() {
+        super.mousedown();
+        this.clicked = true;
+    }
+
+    mouseupOffThing() {
+        super.mouseupOffThing();
+    }
+}
+
+export class MainMenuButton extends Button {
     constructor(label, action=function(){}) {
         super();
 
@@ -19,8 +64,7 @@ export class MainMenuButton extends Thing {
         this.fontSize = 10;
         this.font = 'serif';
 
-        this.bgColor = '#5f5f5f';
-        this.color = '#ffffff';
+        this.color = '#000000';
     }
 
     draw() {
@@ -35,7 +79,8 @@ export class MainMenuButton extends Thing {
         const rectHeight = this.fontSize + padding;
         this.height = rectHeight;
         this.width = text.width + padding;
-        canvas.fillRect(this.x, this.y, this.width, rectHeight);
+
+        drawButton(this.x, this.y, this.width, this.height, this.sprite, this.clicked, this.depressedColour);
 
         canvas.setFillColor(this.color);
         canvas.drawText(
@@ -44,9 +89,8 @@ export class MainMenuButton extends Thing {
             }
         );
 
-        canvas.drawText("", 10, canvas.height-10, {
-            textBaseline: "alphabetic"
-        })
+        // DO NOT REMOVE THIS. THE TEXT ON THE MAIN MENU BREAKS OTHERWISE.
+        canvas.drawText("", 0, 0, {})
     }
 
     click() {

src/js/rooms/debug_button.js

+
+import {Room, Thing} from "../../../hampsterengine/src/things";
+import {Button} from "../objects";
+
+export const rm_DEBUG_button = new Room();
+rm_DEBUG_button.bgColor = 'gray';
+
+const demoButton = new Button();
+rm_DEBUG_button.things.push(demoButton);

src/js/rooms/debug_mouse.js

+
+import {Room} from "../../../hampsterengine/src/things";
+
+export const rm_DEBUG_mouse = new Room();
+
+
+rm_DEBUG_mouse.drawGui = _=> {
+    // Draw the last click
+    canvas.setFillColor('red');
+    canvas.setStrokeColor('red');
+    canvas.drawLine(lastClickPos.x, 0, lastClickPos.x, canvas.height);
+    canvas.drawLine(0, lastClickPos.y, canvas.width, lastClickPos.y);
+    canvas.drawText(`LAST(${Math.round(lastClickPos.x)},${Math.round(lastClickPos.y)})`, lastClickPos.x+2, lastClickPos.y-2, {})
+
+
+    // Draw the current mouse position onto the screen.
+    canvas.setFillColor('black');
+    canvas.setStrokeColor('black');
+    canvas.drawLine(engine.mouse.x, 0, engine.mouse.x, canvas.height);
+    canvas.drawLine(0, engine.mouse.y, canvas.width, engine.mouse.y);
+    canvas.drawText(`CUR(${Math.round(engine.mouse.x)},${Math.round(engine.mouse.y)})`, engine.mouse.x+2, engine.mouse.y-2, {})
+}
+