fix the shadow fading bug, remove some unused code

master
Ondřej Hruška 5 years ago
parent 352f97de8f
commit 288d321eff
Signed by: MightyPork
GPG Key ID: 2C5FD5035250423D
  1. 7
      index.html
  2. 12
      script.js
  3. 49
      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-09d">
<link rel="stylesheet" href="style.css?cache=2019-12-10">
<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.">
@ -37,6 +37,9 @@
<filter id="filterDropshadow" x="-10" y="-10" width="300" height="300">
<feGaussianBlur stdDeviation="5"/>
</filter>
<filter id="filterGlow" x="-10" y="-10" width="300" height="300">
<feGaussianBlur stdDeviation="3"/>
</filter>
<linearGradient id="linGradOrbDark">
<stop style="stop-color:#000000;stop-opacity:0;" offset="0"/>
<stop style="stop-color:#000000;stop-opacity:1" offset="1"/>
@ -87,6 +90,6 @@
</div>
</div>
</div>
<script src="script.js?cache=2019-12-09c"></script>
<script src="script.js?cache=2019-12-10"></script>
</body>
</html>

@ -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 {
<circle
r="50" cy="5" cx="0"
fill="black"
class="orb-shadow"
opacity="1"
fill-opacity="0.7" />
class="orb-shadow" />
<circle
r="55" cy="0" cx="0"
fill="white"
class="orb-glow"
opacity="0" />
fill-opacity="0" />
<circle
r="49" cy="0" cx="0"
fill="#9F9F9F"
@ -929,6 +925,10 @@ class Game {
this.applySettings();
this.installButtonHandlers();
// this.board.testGraphics();
// window.orb = this.board.getOrbByIndex(0).node;
// return;
// Defer start to give browser time to render the background
setTimeout(() => {
this.newGame(args.seed)

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

Loading…
Cancel
Save