allow checking/clearing tutorial tables

mystery-o-matic · Jul 3, 2024 · 6a0999e · 6a0999e
1 parent 49d1da4
commit 6a0999e
Show file tree

Hide file tree

Showing 3 changed files with 86 additions and 7 deletions.
diff --git a/static/en/index.template.html b/static/en/index.template.html
@@ -263,8 +263,8 @@ <h6 id="clue-title-tutorial" class="card-title">Tutorial Clue #1</h6>
 			</div>
 			<p>
 				<div class="col-12 text-center">
-					<a onclick="true" class="btn btn-danger" role="button">Clear ♻️</a>
-					<a onclick="true" class="btn btn-info" role="button">Check 🎯</a>
+					<a onclick="clearTable('kitchen:tutorial-1'); clearTable('bathroom:tutorial-1')" class="btn btn-danger" role="button">Clear ♻️</a>
+					<a onclick="checkTutorialTable('kitchen:tutorial-1'); checkTutorialTable('bathroom:tutorial-1')" class="btn btn-info" role="button">Check 🎯</a>
 				</div>
 			</p>
 			<p>An important question still remains: where was Alice at 10:00? The location graph provides some clues:</p>
@@ -295,6 +295,12 @@ <h6 id="clue-title-tutorial" class="card-title">Tutorial Clue #1</h6>
 				<canvas id="clues-table-bathroom:tutorial-2" height="70" width="500" onclick="checkCellClicked(this, event.offsetX, event.offsetY)">
 						Your browser does not support the HTML canvas tag.</canvas>
 				</div>
+				<p>
+					<div class="col-12 text-center">
+						<a onclick="clearTable('kitchen:tutorial-2'); clearTable('bathroom:tutorial-2')" class="btn btn-danger" role="button">Clear ♻️</a>
+						<a onclick="checkTutorialTable('kitchen:tutorial-2'); checkTutorialTable('bathroom:tutorial-2')" class="btn btn-info" role="button">Check 🎯</a>
+					</div>
+				</p>
 				<br/>
 				<hr class="styled-hr">
 				<p class="fst-italic">
@@ -504,23 +510,23 @@ <h6 id="clue-title" class="card-title">Clue</h6>
 					</div>
 					<p></p>
 				<div class="col-12 text-center">
-					<canvas id="clues-table-room0" oncontextmenu="return false" height="100" width="500" onclick="checkCellClicked(this, event.offsetX, event.offsetY)">
+					<canvas id="clues-table-room0" oncontextmenu="return false" height="120" width="500" onclick="checkCellClicked(this, event.offsetX, event.offsetY)">
 						Your browser does not support the HTML canvas tag.</canvas>
 				</div>
 				<div class="col-12 text-center">
-					<canvas id="clues-table-room1" oncontextmenu="return false" height="70" width="500" onclick="checkCellClicked(this, event.offsetX, event.offsetY)">
+					<canvas id="clues-table-room1" oncontextmenu="return false" height="100" width="500" onclick="checkCellClicked(this, event.offsetX, event.offsetY)">
 						Your browser does not support the HTML canvas tag.</canvas>
 				</div>
 				<div class="col-12 text-center">
-					<canvas id="clues-table-room2" oncontextmenu="return false" height="70" width="500" onclick="checkCellClicked(this, event.offsetX, event.offsetY)">
+					<canvas id="clues-table-room2" oncontextmenu="return false" height="100" width="500" onclick="checkCellClicked(this, event.offsetX, event.offsetY)">
 						Your browser does not support the HTML canvas tag.</canvas>
 				</div>
 				<div class="col-12 text-center">
-					<canvas id="clues-table-room3" oncontextmenu="return false" height="70" width="500" onclick="checkCellClicked(this, event.offsetX, event.offsetY)">
+					<canvas id="clues-table-room3" oncontextmenu="return false" height="100" width="500" onclick="checkCellClicked(this, event.offsetX, event.offsetY)">
 						Your browser does not support the HTML canvas tag.</canvas>
 				</div>
 				<div class="col-12 text-center">
-					<canvas id="clues-table-room4" oncontextmenu="return false" height="70" width="500" onclick="checkCellClicked(this, event.offsetX, event.offsetY)">
+					<canvas id="clues-table-room4" oncontextmenu="return false" height="100" width="500" onclick="checkCellClicked(this, event.offsetX, event.offsetY)">
 						Your browser does not support the HTML canvas tag.</canvas>
 				</div>
 				<div class="col-12 text-center">

diff --git a/static/table.js b/static/table.js
@@ -396,4 +396,54 @@ async function checkCellClicked(c, x, y) {
 
 	clearClueTable(position[0], 0, ftable);
 	fillClueTable(time, table.columnSize / 3.3, '#000000', position[0], 0, ftable);
+}
+
+function clearTable(c) {
+	var name = c.replace("clues-table-", "");
+	var table = tables.get(name);
+
+	var data = tutorialData.expectedData[name];
+	for (let i = 0; i < table.nColumns; i++) {
+		for (let j = 0; j < table.nRows; j++) {
+			var value = table.data[i][j];
+			if (value == "✓" || value == "✗" || value == "?") {
+				clearClueTable(i, j, table);
+				fillClueTable("", table.columnSize / 3, '#000000', i, j, table);
+			}
+		}
+	}
+}
+
+function checkTutorialTable(c) {
+	var name = c.replace("clues-table-", "");
+	var table = tables.get(name);
+
+	var data = tutorialData.expectedData[name];
+
+	for (let i = 0; i < data.length; i++) {
+		console.log(data[i])
+		for (let j = 0; j < data[i].length; j++) {
+			var expectedValue = data[i][j];
+			var value = table.data[j][i];
+
+			if (expectedValue == "✓" || expectedValue == "✗") {
+				if (value == expectedValue) {
+					clearClueTable(j, i, table);
+					fillClueTable(value, table.columnSize / 3, '#025020', j, i, table);
+				} else {
+					if (value == "")
+						value = "?";
+					clearClueTable(j, i, table);
+					fillClueTable(value, table.columnSize / 3, '#502020', j, i, table);
+				}
+			} else if (expectedValue == "?") {
+				if (value == "?" || value == "") {
+					//Nothing
+				} else {
+					clearClueTable(j, i, table);
+					fillClueTable(value, table.columnSize / 3, '#502020', j, i, table);
+				}
+			}
+		}
+	}
 }
diff --git a/static/tutorialData.js b/static/tutorialData.js
@@ -16,5 +16,28 @@ tutorialData = {
         "scissors": "✂️",
         "rope": "🪢",
         "pistol": "🔫"
+    },
+    "expectedData": {
+        "kitchen:tutorial-1": [
+            ["", "", "", "", "", "", "", ""],
+            ["", "", "?", "?", "?", "?", "✗", "✓"],
+            ["", "", "?", "?", "?", "?", "?", "✓"],
+        ],
+        "bathroom:tutorial-1": [
+            ["", "", "", "", "", "", "", ""],
+            ["", "", "?", "?", "?", "?", "?", "?"],
+            ["", "", "?", "?", "?", "?", "?", "?"],
+        ],
+        "kitchen:tutorial-2": [
+            ["", "", "", "", "", "", "", ""],
+            ["", "", "?", "?", "?", "?", "✗", "✓"],
+            ["", "", "?", "?", "?", "?", "?", "✓"],
+        ],
+        "bathroom:tutorial-2": [
+            ["", "", "", "", "", "", "", ""],
+            ["", "", "?", "?", "?", "?", "✗", "?"],
+            ["", "", "?", "?", "?", "?", "?", "?"],
+        ]
+
     }
 }