add a You Win text, fix cant undo removing gold

master
Ondřej Hruška 5 years ago
parent 2cc247f929
commit c302c0611b
Signed by: MightyPork
GPG Key ID: 2C5FD5035250423D
  1. 4
      index.html
  2. 31
      script.js
  3. 30
      style.css

@ -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>

@ -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) {

@ -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 {

Loading…
Cancel
Save