From d0863cbc9e6276776eecfbdab3f95e3bf33cfeef Mon Sep 17 00:00:00 2001
From: Charlie Stanton <charlie@shtanton.xyz>
Date: Mon, 7 Apr 2025 18:53:49 +0100
Subject: polish

---
 src/index.html.in | 105 +++++++++++++++++++++++++++++++++++++++++++++++++-----
 1 file changed, 97 insertions(+), 8 deletions(-)

(limited to 'src/index.html.in')

diff --git a/src/index.html.in b/src/index.html.in
index 46d39e4..5414f09 100644
--- a/src/index.html.in
+++ b/src/index.html.in
@@ -11,9 +11,9 @@ html, body {
     overflow: hidden;
     text-align: center;
     width: 100%;
+		color: white;
 }
 h1 {
-    color: white;
     margin: 0;
 }
 button {
@@ -22,9 +22,84 @@ button {
     margin: 0.3em;
     width: 25%;
 }
+
+canvas {
+	margin: auto;
+}
 </style>
 
-<canvas></canvas>
+<div id="tutorial" style="overflow-y: scroll; height: 90vh">
+	<h1>Depths of the Mind</h1>
+
+	<p>
+		The mind is an intricate thing, with many tiny components working together
+		in perfect harmony... Until something came in and messed everything up!
+	</p>
+
+	<p>
+		If you want to set all the pieces of the mind right, you'll need to know how
+		it works!
+	</p>
+
+	<img src=
+#include "../build/tutorial_black_white.png.b64"
+			>
+
+	<p>
+		The structure of the brain consists of black blocks filling a white void.
+	</p>
+
+	<img src=
+#include "../build/tutorial_red_yellow.png.b64"
+			>
+
+	<p>
+		Black blocks will turn red when clicked (if you have red in your inventory on the left).
+		While the brain is running, black blocks next to red blocks will turn red!
+		Red blocks will eventually tire to yellow, and then back to black. They don't stay red very long!
+		This is what allows the brain to send signals along a series of black blocks.
+		Yellow blocks can be placed with a right click on a black block (if you have one in your inventory)
+	</p>
+
+	<img src=
+#include "../build/tutorial_direction_red.png.b64"
+			 >
+
+	<p>
+		Sometimes, only one side of a block turns red.
+		When this happens, it will try to move in that direction (and leave a yellow behind it)
+		but if it cannot it will turn clockwise and try again.
+	</p>
+
+	<span>
+		<img src=
+#include "../build/tutorial_blue_1.png.b64"
+				 >
+		<img src=
+#include "../build/tutorial_blue_2.png.b64"
+				 >
+
+	<p>
+		Blue blocks need to be moved around to keep things running smoothly!
+		When a blue block is touched by a single red block, it will start rolling
+		away from it.
+		Each level has a goal in faint red which needs at least one blue block to be delivered to it.
+		Some levels will also have faint blue areas that create new blue blocks for you!
+	</p>
+
+		<img src=
+#include "../build/tutorial_blue_clone.png.b64"
+				 >
+
+	<p>
+		Finally, if a blue block touches a red block <em>while in motion</em> it will be cloned!
+		One will be left behind and the other will continue.
+	</p>
+
+	<button id="play-button">Play!</button>
+</div>
+
+<canvas style="display: none;"></canvas>
 
 <script>
 // Mirror these in src/all.c
@@ -73,6 +148,7 @@ async function main() {
     let exports = wasm.exports;
     let html    = document.querySelector("html");
     let canvas  = document.querySelector("canvas");
+	const tutorial = document.querySelector("#tutorial");
     let ctx     = canvas.getContext("2d");
     let memory  = exports.memory;
 
@@ -140,11 +216,18 @@ async function main() {
     window.addEventListener("resize", onresize);
     onresize();
 
+	function doUpdate(input) {
+		if (exports.game_update(input, mousex, mousey, now()) !== 0) {
+			canvas.style.display = "none";
+			tutorial.style.display = "block";
+		}
+	}
+
 	canvas.addEventListener("mousemove", function(e) {
 		const rect = e.target.getBoundingClientRect();
 		mousex = e.clientX - rect.left;
 		mousey = e.clientY - rect.top;
-		exports.game_update(INPUT_MOVE, mousex, mousey, now());
+		doUpdate(INPUT_MOVE);
 	});
 
 	canvas.addEventListener("mousedown", function(e) {
@@ -152,15 +235,21 @@ async function main() {
 		mousex = e.clientX - rect.left;
 		mousey = e.clientY - rect.top;
 		if (e.button == 0) {
-			exports.game_update(INPUT_CLICK, mousex, mousey, now());
+			doUpdate(INPUT_CLICK);
 		} else if (e.button == 2) {
 			e.preventDefault();
-			exports.game_update(INPUT_RCLICK, mousex, mousey, now());
+			doUpdate(INPUT_RCLICK);
 		}
+	});
+
+	document.getElementById("play-button").addEventListener("click", function (e) {
 		if (!musicPlaying) {
 			musicPlaying = true;
 			audio.play();
 		}
+
+		canvas.style.display = "block";
+		tutorial.style.display = "none";
 	});
 
 	canvas.addEventListener("contextmenu", function (e) {
@@ -169,16 +258,16 @@ async function main() {
 
 	document.addEventListener("keydown", function (e) {
 		if (e.key === " ") {
-			exports.game_update(INPUT_PAUSE_PLAY, mousex, mousey, now());
+			doUpdate(INPUT_PAUSE_PLAY);
 		} else if (e.key == "r") {
-			exports.game_update(INPUT_RESTART, mousex, mousey, now());
+			doUpdate(INPUT_RESTART);
 		}
 	});
 
     function animate() {
         // TODO: stop requesting frames when state is static
         requestAnimationFrame(animate);
-        exports.game_update(INPUT_NONE, mousex, mousey, now());
+				doUpdate(INPUT_NONE);
         render();
     }
     requestAnimationFrame(animate);
-- 
cgit v1.2.3