diff --git a/index.html b/index.html index 5f43e4f..b7b1e15 100644 --- a/index.html +++ b/index.html @@ -8,7 +8,7 @@ Sigmar's Garden Online - + @@ -87,6 +87,6 @@ - + diff --git a/script.js b/script.js index e3e67a6..fca6e94 100644 --- a/script.js +++ b/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(`Good work!`); + 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) { diff --git a/style.css b/style.css index 81a6655..e4950e3 100644 --- a/style.css +++ b/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 {