diff --git a/.gitignore b/.gitignore
index c0de648453e68977c6be3cc9dffbab43c948f181..6edcbd54639dacc773b2841eeb0ca37e80319451 100644
--- a/.gitignore
+++ b/.gitignore
@@ -2,3 +2,4 @@
node_modules/
build/
+.DS_Store
diff --git a/.gitmodules b/.gitmodules
index 88a9e85fe4f01a5225daeee75e4ef5fe65903431..9adda7443cb27fae9df611936511e21b3ded851b 100644
--- a/.gitmodules
+++ b/.gitmodules
@@ -1,3 +1,5 @@
[submodule "hampsterengine"]
path = hampsterengine
url = https://github.com/byemc/hampsterengine.git
+ branch = main
+ update = rebase
diff --git a/assets/icons.aseprite b/assets/icons.aseprite
new file mode 100644
index 0000000000000000000000000000000000000000..3c21cff0ba402e217bd112d6cba66fbb697c69cf
Binary files /dev/null and b/assets/icons.aseprite differ
diff --git a/assets/icons.json b/assets/icons.json
new file mode 100644
index 0000000000000000000000000000000000000000..42fb5ced5298ffc8793d4d59a346c46c14f4d66a
--- /dev/null
+++ b/assets/icons.json
@@ -0,0 +1,21 @@
+{ "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": [
+ ]
+ }
+}
diff --git a/hampsterengine b/hampsterengine
index c57ff8bcebbcd4164f2b48292c06709ff8232520..af2cf2a30cde54565a43473096ecdcd2f9c0e39f 160000
--- a/hampsterengine
+++ b/hampsterengine
@@ -1 +1 @@
-Subproject commit c57ff8bcebbcd4164f2b48292c06709ff8232520
+Subproject commit af2cf2a30cde54565a43473096ecdcd2f9c0e39f
diff --git a/src/img/icons.webp b/src/img/icons.webp
new file mode 100644
index 0000000000000000000000000000000000000000..a749e5fe1182dc77610fd9025676b2989cf88a5c
Binary files /dev/null and b/src/img/icons.webp differ
diff --git a/src/index.html b/src/index.html
index 70a38e33b9f67a05945e5a8ea3b3617ad5dd4135..e203af7f882eba463f3ca8e026815d6efb92930a 100644
--- a/src/index.html
+++ b/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>
\ No newline at end of file
+<script src="./main.js"></script>
+<!--<div id="ruler"></div>-->
\ No newline at end of file
diff --git a/src/js/extras.js b/src/js/extras.js
new file mode 100644
index 0000000000000000000000000000000000000000..9ca2444acc369552540c6c6511f943007535043e
--- /dev/null
+++ b/src/js/extras.js
@@ -0,0 +1,5 @@
+
+export function drawLineThroughPoint(x, y) {
+ // draws a line across the whole canvas through a point
+ canvas.drawLine()
+}
diff --git a/src/js/main.js b/src/js/main.js
index e8747ffebe885442f5d075c4020919ef7e0e45df..3c69ab577c8a0afcf59e2e0665725de6d51294db 100644
--- a/src/js/main.js
+++ b/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();
}
-engine.room = engine.getRoomIndex('mainMenu');
-if (document.location.hash) engine.room = engine.getRoomIndex(document.location.hash);
+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');
+}
main();
diff --git a/src/js/objects.js b/src/js/objects.js
index a2580f42f1097c7d0dd4b8a2db246935d766b965..8daaaa1168c27f43e0fffe6f670863f5f86991e9 100644
--- a/src/js/objects.js
+++ b/src/js/objects.js
@@ -1,15 +1,60 @@
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);
+ }
+
+ mousedown() {
+ super.mousedown();
+ this.clicked = true;
+ }
+
+ mouseupOffThing() {
+ super.mouseupOffThing();
+ }
}
-export class MainMenuButton extends Thing {
+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() {
diff --git a/src/js/rooms/debug_button.js b/src/js/rooms/debug_button.js
new file mode 100644
index 0000000000000000000000000000000000000000..dd17d0314ec524ff65e655734472c725158539ca
--- /dev/null
+++ b/src/js/rooms/debug_button.js
@@ -0,0 +1,9 @@
+
+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);
diff --git a/src/js/rooms/debug_mouse.js b/src/js/rooms/debug_mouse.js
new file mode 100644
index 0000000000000000000000000000000000000000..8cbed1221f620b96e38c92803c9e8d9b6c676559
--- /dev/null
+++ b/src/js/rooms/debug_mouse.js
@@ -0,0 +1,23 @@
+
+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, {})
+}
+