add a You Win text, fix cant undo removing gold

index.html

@@ -8,7 +8,7 @@
     <meta name="apple-mobile-web-app-capable" content="yes">
 
     <title>Sigmar's Garden Online</title>
-    <link rel="stylesheet" href="style.css?cache=2019-12-09b">
+    <link rel="stylesheet" href="style.css?cache=2019-12-09c">
 
     <meta name="author" content="Ondřej Hruška">
     <meta name="description" content="Play Sigmar's Garden online. Opus Magnum minigame re-implemented in JavaScript and SVG.">
@@ -87,6 +87,6 @@
         </div>
     </div>
 </div>
-<script src="script.js?cache=2019-12-09b"></script>
+<script src="script.js?cache=2019-12-09c"></script>
 </body>
 </html>

script.js

@@ -664,6 +664,10 @@ class Board {
     this.buttons.toggleFullscreen = this.addButton(x0, cfgy0+ysp2*-1.5, 'Fullscreen', 'config');
 
     this.buttons.btnAbout = this.addButton(x0, cfgy0+ysp2*-2.5, 'Help', 'config');
+
+    let youWin = Svg.fromXML(`<text class="you-win" opacity="0" x="0" y="0">Good work!</text>`);
+    this.$root.appendChild(youWin);
+    this.youWin = youWin;
   }
 
   updateSettingsGUI(cfg) {
@@ -1515,6 +1519,7 @@ class Game {
    * @param orb
    */
   inGameBoardClick(n, orb) {
+    let removed = false;
     this.debug(`Clicked orb ${n}: ${orb.symbol}`);
 
     if (!this.isAvailableAtPlaytime(n)) {
@@ -1530,11 +1535,12 @@ class Game {
 
       this.addUndoRecord([{
         symbol: orb.symbol,
-        n: orb.n,
+        n,
       }]);
 
       this.board.removeOrbByIndex(n);
       this.selectedOrb = null;
+      removed = true;
       wantRefresh = true;
     } else if (this.selectedOrb === null) {
       this.debug(`Select orb`);
@@ -1571,6 +1577,8 @@ class Game {
           this.board.removeOrbByIndex(n);
           this.board.removeOrbByIndex(this.selectedOrb.n);
 
+          removed = true;
+
           if ([orb.symbol, otherSymbol].includes(this.nextMetal)) {
             this.debug("Advance metal transmutation sequence.");
             this.advanceMetal();
@@ -1593,6 +1601,12 @@ class Game {
     if (wantRefresh) {
       if (this.countOrbs() === 0) {
         this.info("Good work!");
+
+        if (removed) {
+          setTimeout(() => {
+            this.board.youWin.classList.add('show');
+          }, 500);
+        }
       }
 
       this.updateGameGui();
@@ -1662,8 +1676,10 @@ class Game {
    * Update button hiding attributes, disabled orb effects, etc
    */
   updateGameGui() {
+    let nOrbs = this.countOrbs();
+
     this.board.buttons.restart
-      .classList.toggle('disabled', this.countOrbs() === 55);
+      .classList.toggle('disabled', nOrbs === 55);
 
     this.board.buttons.undo
       .classList.toggle('disabled', this.undoStack.length === 0);
@@ -1671,10 +1687,17 @@ class Game {
     // Update orb disabled status
     for (let n = 0; n < BOARD_SIZE; n++) {
       if (this.board.grid[n]) {
-        const ava = this.isAvailableAtPlaytime(n);
-        this.board.grid[n].node.classList.toggle('disabled', !ava);
+        const disabled = !this.isAvailableAtPlaytime(n);
+        let node = this.board.grid[n].node;
+        if (node.classList.contains('disabled') !== disabled) {
+          node.classList.toggle('disabled', disabled);
+        }
       }
     }
+
+    if (nOrbs !== 0) {
+      this.board.youWin.classList.remove('show');
+    }
   }
 
   newGame(seed) {

style.css

@@ -118,6 +118,12 @@ html, body {
 	stroke: transparent !important;
 }
 
+text {
+	paint-order: stroke;
+	font: 32px "Book Antiqua", Palatino, "Palatino Linotype", "Palatino LT STD", Georgia, serif;
+	user-select: none;
+}
+
 /* GUI */
 .button-text {
 	fill: #8d7761;
@@ -125,10 +131,28 @@ html, body {
 	text-anchor: start;
 	text-align: left;
 	stroke-width: 2px;
-	paint-order: stroke;
-	font: 32px "Book Antiqua", Palatino, "Palatino Linotype", "Palatino LT STD", Georgia, serif;
 	cursor: pointer;
-	user-select: none;
+}
+
+.you-win {
+	font-size: 64px;
+	text-anchor: middle;
+	dominant-baseline: middle;
+	fill: #ead38a;
+	stroke: #2d2520;
+	stroke-width: 4px;
+
+	opacity: 0;
+	pointer-events: none;
+	transition: opacity linear 0.2s;
+}
+
+.you-win.show {
+	opacity: 1;
+}
+
+.cfg-no-anim .you-win {
+	transition: none;
 }
 
 .button-text.config {