From a61a6a4f25be1a5fc0d4c68f58101f2094d50196 Mon Sep 17 00:00:00 2001
From: Chris Couzens <ccouzens@gmail.com>
Date: Sat, 20 Apr 2024 12:52:07 +0100
Subject: [PATCH] Add a 4th animation that rotates colours

Unlike the others, this animation doesn't reset when you go to a new maze.

So it becomes an easter egg way to change the game colour.

Whether it affects dialogs seems to be browser dependent.
---
 public/game-win-animations.css | 20 ++++++++++++++++++++
 src/game/app.ts                |  2 +-
 2 files changed, 21 insertions(+), 1 deletion(-)

diff --git a/public/game-win-animations.css b/public/game-win-animations.css
index 14cbd41..8e1385a 100644
--- a/public/game-win-animations.css
+++ b/public/game-win-animations.css
@@ -60,3 +60,23 @@
     stroke-width: 1;
   }
 }
+
+:root {
+  animation: 10s infinite normal hue-rotate;
+  animation-timing-function: linear;
+  animation-play-state: paused;
+}
+
+:root.win[data-animation="4"] {
+  animation-play-state: running;
+}
+
+@keyframes hue-rotate {
+  from {
+    filter: hue-rotate(0);
+  }
+
+  to {
+    filter: hue-rotate(360deg);
+  }
+}
diff --git a/src/game/app.ts b/src/game/app.ts
index 4598861..747573b 100644
--- a/src/game/app.ts
+++ b/src/game/app.ts
@@ -113,7 +113,7 @@ function newMaze(app: App): void {
     "viewBox",
     `-0.125 -0.125 ${app.computer.maze_width(app.maze) + 0.25} ${app.computer.maze_height(app.maze) + 0.25}`,
   );
-  app.root.dataset["animation"] = `${Math.floor(Math.random() * 3) + 1}`;
+  app.root.dataset["animation"] = `${Math.floor(Math.random() * 4) + 1}`;
   renderAfterMove(app);
 }