From c302c0611bfe89d2ecbdac044fe06724f63f7d9e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ond=C5=99ej=20Hru=C5=A1ka?= <ondra@ondrovo.com>
Date: Mon, 9 Dec 2019 21:32:10 +0100
Subject: [PATCH] add a You Win text, fix cant undo removing gold
---
index.html | 4 ++--
script.js | 31 +++++++++++++++++++++++++++----
style.css | 30 +++++++++++++++++++++++++++---
3 files changed, 56 insertions(+), 9 deletions(-)
diff --git a/index.html b/index.html
index 5f43e4f..b7b1e15 100644
--- a/index.html
+++ b/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>
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(`<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) {
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 {