From c05ffd290ff2c789d81ca97458c573b802ca547b Mon Sep 17 00:00:00 2001 From: bye <bye@byecorps.com> Date: Mon, 19 Aug 2024 09:46:59 +0100 Subject: [PATCH] update a ton of shit --- hampsterengine | 2 +- package.json | 2 +- src/index.html | 17 +--------------- src/js/main.js | 34 +++++++++---------------------- src/js/objects.js | 27 ++++++++++++++----------- src/js/rooms/debug_incursion.js | 36 +++++++++++++++++++++++++++++++++ src/js/rooms/debug_mouse.js | 5 ++++- src/js/rooms/game.js | 5 +++++ src/js/rooms/mainMenu.js | 25 +++++++++++++++++++++++ 9 files changed, 97 insertions(+), 56 deletions(-) create mode 100644 src/js/rooms/debug_incursion.js create mode 100644 src/js/rooms/game.js create mode 100644 src/js/rooms/mainMenu.js diff --git a/hampsterengine b/hampsterengine index 835a59e..e0128c9 160000 --- a/hampsterengine +++ b/hampsterengine @@ -1 +1 @@ -Subproject commit 835a59e5aa3e22142d346f51d1e162d7b69dbab8 +Subproject commit e0128c9b4443e92631a795d308d2a7da91b95141 diff --git a/package.json b/package.json index 4fdd858..7456c32 100644 --- a/package.json +++ b/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" diff --git a/src/index.html b/src/index.html index e203af7..70a38e3 100644 --- a/src/index.html +++ b/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> -<!--<div id="ruler"></div>--> \ No newline at end of file +<script src="./main.js"></script> \ No newline at end of file diff --git a/src/js/main.js b/src/js/main.js index d880200..5d4df43 100644 --- a/src/js/main.js +++ b/src/js/main.js @@ -1,16 +1,17 @@ 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(); diff --git a/src/js/objects.js b/src/js/objects.js index 0ea1eb5..6054b51 100644 --- a/src/js/objects.js +++ b/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 { diff --git a/src/js/rooms/debug_incursion.js b/src/js/rooms/debug_incursion.js new file mode 100644 index 0000000..cbf6d25 --- /dev/null +++ b/src/js/rooms/debug_incursion.js @@ -0,0 +1,36 @@ + +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') + +} diff --git a/src/js/rooms/debug_mouse.js b/src/js/rooms/debug_mouse.js index f2af324..22389fc 100644 --- a/src/js/rooms/debug_mouse.js +++ b/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); diff --git a/src/js/rooms/game.js b/src/js/rooms/game.js new file mode 100644 index 0000000..3d22f13 --- /dev/null +++ b/src/js/rooms/game.js @@ -0,0 +1,5 @@ + +import {Room} from "../../../hampsterengine/src/things"; + +export const rm_game = new Room(); + diff --git a/src/js/rooms/mainMenu.js b/src/js/rooms/mainMenu.js new file mode 100644 index 0000000..cefe8ac --- /dev/null +++ b/src/js/rooms/mainMenu.js @@ -0,0 +1,25 @@ +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 -- GitLab