update a ton of shit

hampsterengine @ e0128c9b

-Subproject commit 835a59e5aa3e22142d346f51d1e162d7b69dbab8
+Subproject commit e0128c9b4443e92631a795d308d2a7da91b95141

package.json

@@ -5,7 +5,7 @@
     "dev:js": "esbuild src/js/main.js --bundle --watch --sourcemap --format=iife --loader:.webp=dataurl --outfile=build/main.js",
     "dev:html": "browser-sync build src --watch --https",
     "build": "run-s clear build:*",
-    "build:js": "esbuild src/js/main.js --bundle --minify --format=iife --loader:.webp=dataurl | roadroller --type js - -O 2 -o build/main.js",
+    "build:js": "esbuild src/js/main.js --bundle --minify --format=iife --loader:.webp=dataurl --outfile=build/main.js",
     "build:html": "html-inline src/index.html -b build | html-minifier -c configs/html-minifier.json -o build/index.html",
     "build:zip": "zip -FS -qjX9 build/game.zip build/index.html && advzip -z -4 build/game.zip",
     "build:zipSize": "node configs/size.js"

src/index.html

@@ -2,28 +2,13 @@
     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>
\ No newline at end of file
-<!--<div id="ruler"></div>-->
\ No newline at end of file

src/js/main.js

 
 import Canvas from "../../hampsterengine/src/canvas.js";
 import Engine from "../../hampsterengine/src/engine.js";
-import {Room} from "../../hampsterengine/src/things.js";
 
-import {Logo, MainMenuButton} from "./objects.js";
 import SoundBox from "./sb-player-small";
 // import {mus_DEMOSONG} from "./songs/DEMOSONGDONOTCOMMIT";
 
 // Rooms
+import {rm_mainMenu} from "./rooms/mainMenu";
+import {rm_game} from "./rooms/game";
 import {rm_DEBUG_button} from "./rooms/debug_button";
 import {rm_DEBUG_mouse} from "./rooms/debug_mouse";
 import {rm_DEBUG_music} from "./rooms/debug_music";
+import {rm_DEBUG_INCURSION} from "./rooms/debug_incursion";
 
 // Music
 
@@ -32,36 +33,19 @@ let lastClickPos = {
 
 window.lastClickPos = lastClickPos;
 
-const rm_MainMenu = new Room();
-rm_MainMenu.bgColor = '#f0f0f0';
-
-const logo = new Logo();
-logo.x = 30;
-logo.y = 45;
-logo.align = 2
-rm_MainMenu.things.push(logo);
-
-const newGameButton = new MainMenuButton('New Game');
-newGameButton.x = 30;
-newGameButton.y = 70;
-rm_MainMenu.things.push(newGameButton);
-
-rm_MainMenu.drawGui = _ => {
-    canvas.setFillColor('#0f0f0f');
-    canvas.drawText("(c) bye 2024", 30, canvas.height-25,{
-        font: '8px serif'
-    });
-}
-
-engine.registerRoom(rm_MainMenu, 'mainMenu');
+engine.registerRoom(rm_mainMenu, 'mainMenu');
+engine.registerRoom(rm_game, 'game');
 
+//Debug rooms. Comment out to not include in build (esbuild will not import them if they arent used)
 engine.registerRoom(rm_DEBUG_button, 'debug_button');
 engine.registerRoom(rm_DEBUG_mouse, 'debug_mouse');
 engine.registerRoom(rm_DEBUG_music, 'debug_music');
+engine.registerRoom(rm_DEBUG_INCURSION, 'debug_incursion')
 
 function main() {
     requestAnimationFrame(main);
-    canvas.fill(engine.room.bgColor ?? 'white');
+    engine.frames++;
+    canvas.fill(engine.room.bgColor ?? 'black');
 
     engine.step();
     engine.draw();

src/js/objects.js

@@ -6,8 +6,6 @@ import ButtonBorder from "../img/button.webp";
 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);
@@ -16,12 +14,12 @@ function drawButton(x, y, width, height, sprite, clicked, depressedColour) {
     }
 
     canvas.setFillColor('white');
-    canvas.fillRect(x + 1, basey + 1, width - 2, height - 2);
+    canvas.fillRect(x + 1, y + 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);
+    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
@@ -41,7 +39,8 @@ export class Button extends Thing {
     }
 
     draw() {
-        drawButton(this.x, this.y, this.width, this.height, this.sprite, this.clicked, this.depressedColour);
+        const basey = this.y + (this.clicked ? 2 : 0);
+        drawButton(this.x, basey, this.width, this.height, this.sprite, this.clicked, this.depressedColour);
     }
 
     mousedown() {
@@ -63,7 +62,7 @@ export class MainMenuButton extends Button {
         this.label = label;
         this.action = action;
 
-        this.fontSize = 10;
+        this.fontSize = 8;
         this.font = 'serif';
 
         this.color = '#000000';
@@ -78,15 +77,14 @@ export class MainMenuButton extends Button {
         const padding = this.fontSize/2;
         canvas.setFillColor(this.bgColor);
 
-        const rectHeight = this.fontSize + padding;
-        this.height = rectHeight;
         this.width = text.width + padding;
 
-        drawButton(this.x, this.y, this.width, this.height, this.sprite, this.clicked, this.depressedColour);
+        const basey = this.y + (this.clicked ? 2 : 0);
+        drawButton(this.x, basey, this.width, this.height, this.sprite, this.clicked, this.depressedColour);
 
         canvas.setFillColor(this.color);
         canvas.drawText(
-            this.label, this.x + (text.width + padding)/2, this.y + rectHeight/2, {
+            this.label, this.x + this.width/2, basey + this.height/2, {
                 font: font, textBaseline: "middle", textAlign: "center"
             }
         );
@@ -94,6 +92,11 @@ export class MainMenuButton extends Button {
         // DO NOT REMOVE THIS. THE TEXT ON THE MAIN MENU BREAKS OTHERWISE.
         canvas.drawText("", 0, 0, {})
     }
+
+    mouseup() {
+        super.mouseup();
+        this.action();
+    }
 }
 
 export class Logo extends Thing {

src/js/rooms/debug_incursion.js

+
+import {Room} from "../../../hampsterengine/src/things";
+
+export const rm_DEBUG_INCURSION = new Room();
+
+rm_DEBUG_INCURSION.frames = [];
+
+rm_DEBUG_INCURSION.draw = _ => {
+    // Convert the current frame number to HEX and set it as the background colour
+    canvas.fill(`#${engine.frames.toString(16)}`);
+    canvas.setFillColor('black')
+    canvas.drawText(engine.frames.toString(16), 2, canvas.height, {});
+
+    // Draw 60 frames ago
+    if (rm_DEBUG_INCURSION.frames.at(-165)) canvas.drawImageFromCenter(rm_DEBUG_INCURSION.frames.at(-120), canvas.center.x, canvas.center.y, 160, 160);
+
+    canvas.setFillColor('white')
+    canvas.drawText('THIS ROOM MAY CAUSE SEIZURES', canvas.center.x, 50, {
+        textAlign: 'center', textBaseline: 'middle'
+    })
+
+    // Get the current state of the canvas
+    canvas.canvas.toBlob((blob) => {
+        const image = new Image();
+        const url = URL.createObjectURL(blob);
+
+        image.onload = _=> {
+            rm_DEBUG_INCURSION.frames.push(image);
+        }
+
+        image.src = url;
+    });
+
+    canvas.setFillColor('black')
+
+}

src/js/rooms/debug_mouse.js

@@ -13,6 +13,8 @@ rm_DEBUG_mouse.drawGui = _=> {
     canvas.drawLine(0, lastClick.y, canvas.width, lastClick.y);
     canvas.drawText(`LAST(${Math.round(lastClick.x)},${Math.round(lastClick.y)})`, lastClick.x+2, lastClick.y-2, {})
 
+    const cur = engine.mouse;
+
     if (engine.mouseDown) {
         // Draw the mousedown position
         const moused = engine.mouseDownPos;
@@ -22,10 +24,11 @@ rm_DEBUG_mouse.drawGui = _=> {
         canvas.drawLine(0, moused.y, canvas.width, moused.y);
         canvas.drawText(`DOW(${Math.round(moused.x)},${Math.round(moused.y)})`, moused.x+2, moused.y-2, {})
 
+        //Draw a line to the current position
+        canvas.drawLine(moused.x, moused.y, cur.x, cur.y)
     }
 
     // Draw the current mouse position onto the screen.
-    const cur = engine.mouse;
     canvas.setFillColor('black');
     canvas.setStrokeColor('black');
     canvas.drawLine(cur.x, 0, cur.x, canvas.height);

src/js/rooms/game.js

+
+import {Room} from "../../../hampsterengine/src/things";
+
+export const rm_game = new Room();
+

src/js/rooms/mainMenu.js

+import {Room} from "../../../hampsterengine/src/things";
+import {Logo, MainMenuButton} from "../objects";
+
+export const rm_mainMenu = new Room();
+rm_mainMenu.bgColor = '#f0f0f0';
+
+const logo = new Logo();
+logo.x = 30;
+logo.y = 45;
+logo.align = 2
+rm_mainMenu.things.push(logo);
+
+const newGameButton = new MainMenuButton('New Game', _=>{
+    engine.room = engine.getRoomIndex('game');
+});
+newGameButton.x = 30;
+newGameButton.y = 70;
+rm_mainMenu.things.push(newGameButton);
+
+rm_mainMenu.drawGui = _ => {
+    canvas.setFillColor('#0f0f0f');
+    canvas.drawText("(c) bye 2024", 30, canvas.height-25,{
+        font: '8px serif'
+    });
+}
\ No newline at end of file