diff --git a/index.html b/index.html index 0d8b44e..51fe5c8 100644 --- a/index.html +++ b/index.html @@ -8,7 +8,7 @@ Sigmar's Garden Online - + @@ -37,6 +37,9 @@ + + + @@ -87,6 +90,6 @@ - + diff --git a/script.js b/script.js index fca6e94..6367a3b 100644 --- a/script.js +++ b/script.js @@ -325,8 +325,6 @@ class Board { .setAttribute('fill', this.orbColors[symbol]); orb.appendChild(this.symbolTpls[symbol].cloneNode(true)); - orb.dataset.index = arrayIndex; - orb.dataset.symbol = symbol; this.$orbs.appendChild(orb); let object = { @@ -407,14 +405,12 @@ class Board { + class="orb-shadow" /> + fill-opacity="0" /> { this.newGame(args.seed) diff --git a/style.css b/style.css index 377975c..29749a2 100644 --- a/style.css +++ b/style.css @@ -19,29 +19,6 @@ html, body { background: #201717; } -.disabled .orb { - opacity: 0.6; -} - -/* Highlighting */ -.highlight-salt .symbol-salt .orb-fill, -.highlight-air .symbol-air .orb-fill, -.highlight-fire .symbol-fire .orb-fill, -.highlight-water .symbol-water .orb-fill, -.highlight-earth .symbol-earth .orb-fill, -.highlight-mercury .symbol-mercury .orb-fill, -.highlight-lead .symbol-lead .orb-fill, -.highlight-tin .symbol-tin .orb-fill, -.highlight-iron .symbol-iron .orb-fill, -.highlight-copper .symbol-copper .orb-fill, -.highlight-silver .symbol-silver .orb-fill, -.highlight-gold .symbol-gold .orb-fill, -.highlight-vitae .symbol-vitae .orb-fill, -.highlight-mors .symbol-mors .orb-fill { - stroke: yellow; - stroke-width: 7px; -} - /* Orb is clickable */ .orb { cursor: pointer; @@ -62,32 +39,42 @@ html, body { .orb.disabled:hover .orb-glow, .cfg-fade-disabled .orb.disabled .orb-shadow, .cfg-fade-disabled .orb.disabled:hover .orb-shadow { - opacity: 0 !important; + fill-opacity: 0; } .cfg-no-fade-disabled.cfg-blur .orb.disabled .orb-shadow, .cfg-no-fade-disabled.cfg-blur .orb.disabled:hover .orb-shadow { - opacity: 1 !important; + fill-opacity: 1; } /* Blur effect */ -.orb-shadow, .orb-glow { +.orb-shadow { filter: url('#filterDropshadow'); } +.orb-glow { + filter: url('#filterGlow'); +} + /* Hover and select effects */ .orb-glow, .orb-shadow { - transition: opacity linear 0.1s; + transition: fill-opacity linear 0.2s; +} + +/* Default opacity */ +.orb .orb-shadow { + fill-opacity: 0.7; } +/* Glow effect */ .orb.selected .orb-glow, .orb:hover .orb-glow { - opacity: 1; + fill-opacity: 1; } .orb.selected .orb-shadow, .orb:hover .orb-shadow { - opacity: 0; + fill-opacity: 0; } /* No-anim version applies animations instantly */ @@ -120,7 +107,9 @@ html, body { text { paint-order: stroke; - font: 32px "Book Antiqua", Palatino, "Palatino Linotype", "Palatino LT STD", "URW Palladio L", "New Century Schoolbook", Georgia, "Liberation Serif", "Noto Serif", serif; + font: 32px "Book Antiqua", Palatino, "Palatino Linotype", "Palatino LT STD", + "URW Palladio L", "New Century Schoolbook", Georgia, "Liberation Serif", + "Noto Serif", serif; user-select: none; }