1 files changed, 46 insertions, 6 deletions

diff --git a/src/index.html.in b/src/index.html.in
index aca8b6d..14731f6 100644
--- a/src/index.html.in
+++ b/src/index.html.in
@@ -32,6 +32,8 @@ const INPUT_NONE  = 0;
 const INPUT_CLICK = 1;
 const INPUT_RCLICK = 2;
 const INPUT_PAUSE_PLAY = 3;
+const INPUT_MOVE = 4;
+const INPUT_RESTART = 5;
 
 const WASM =
 #include "../build/main.wasm.b64"
@@ -39,6 +41,19 @@ const WASM =
 const MUSIC =
 #include "../build/music.mp3.b64"
 
+const IMAGES = [
+#include "../build/continue.png.b64"
+,
+#include "../build/exit.png.b64"
+,
+#include "../build/pause.png.b64"
+,
+#include "../build/play.png.b64"
+,
+#include "../build/restart.png.b64"
+,
+];
+
 async function main() {
     let bytes   = Uint8Array.from(atob(WASM), function(c) {
         return c.charCodeAt(0);
@@ -51,12 +66,22 @@ async function main() {
     let ctx     = canvas.getContext("2d");
     let memory  = exports.memory;
 
+	let mousex = 0;
+	let mousey = 0;
+
 	const audio = new Audio();
 	audio.src = MUSIC;
 	audio.volume = 0.2;
 	audio.loop = true;
 	let musicPlaying = false;
 
+	let images = [null];
+	for (let i = 0; i < IMAGES.length; i++) {
+		const image = new Image();
+		image.src = IMAGES[i];
+		images.push(image);
+	}
+
 	const start = Date.now();
 	function now() {
 		return Date.now() - start;
@@ -73,13 +98,16 @@ async function main() {
     function render() {
         let width  = canvas.width  = min(html.clientWidth, max_width());
         let height = canvas.height = width;
-        let ptr    = exports.game_render(width, height);
+        let ptr    = exports.game_render(width, height, mousex, mousey);
         let dl     = new Int32Array(memory.buffer, ptr);
         let len    = dl[0];
         let ops    = dl.subarray(1);
 
+					ctx.fillStyle = "#000000";
+					ctx.fillRect(0, 0, width, height);
+			console.log("frame");
         for (let i = 0; i < len; i++) {
-            let op    = ops.subarray(6*i, 6*i+6);
+            let op    = ops.subarray(7*i, 7*i+7);
 					const color = new Uint8Array(new Uint32Array(op.subarray(4, 6)).buffer);
 					ctx.fillStyle = `#${color[0].toString(16).padStart(2, "0")}${color[1].toString(16).padStart(2, "0")}${color[2].toString(16).padStart(2, "0")}`;
 					ctx.globalAlpha = color[3] / 255;
@@ -87,6 +115,10 @@ async function main() {
 					ctx.strokeStyle = `#${color[4].toString(16).padStart(2, "0")}${color[5].toString(16).padStart(2, "0")}${color[6].toString(16).padStart(2, "0")}`;
 					ctx.globalAlpha = color[7] / 255;
 						ctx.strokeRect(op[0], op[1], op[2], op[3]);
+					if (op[6] !== 0) {
+						ctx.globalAlpha = 1;
+						ctx.drawImage(images[op[6]], op[0], op[1], op[2], op[3]);
+					}
         }
     }
 
@@ -94,9 +126,15 @@ async function main() {
     window.addEventListener("resize", onresize);
     onresize();
 
+	canvas.addEventListener("mousemove", function(e) {
+		mousex = e.clientX;
+		mousey = e.clientY;
+		exports.game_update(INPUT_MOVE, mousex, mousey, now());
+	});
+
 	canvas.addEventListener("mousedown", function(e) {
-		const mousex = e.clientX;
-		const mousey = e.clientY;
+		mousex = e.clientX;
+		mousey = e.clientY;
 		if (e.button == 0) {
 			exports.game_update(INPUT_CLICK, mousex, mousey, now());
 		} else if (e.button == 2) {
@@ -115,14 +153,16 @@ async function main() {
 
 	document.addEventListener("keydown", function (e) {
 		if (e.key === " ") {
-			exports.game_update(INPUT_PAUSE_PLAY, 0, 0, now());
+			exports.game_update(INPUT_PAUSE_PLAY, mousex, mousey, now());
+		} else if (e.key == "r") {
+			exports.game_update(INPUT_RESTART, mousex, mousey, now());
 		}
 	});
 
     function animate() {
         // TODO: stop requesting frames when state is static
         requestAnimationFrame(animate);
-        exports.game_update(INPUT_NONE, 0, 0, now());
+        exports.game_update(INPUT_NONE, mousex, mousey, now());
         render();
     }
     requestAnimationFrame(animate);