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

@@ -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);
+  }
+}

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);
 }