diff --git a/.idea/codeStyles/codeStyleConfig.xml b/.idea/codeStyles/codeStyleConfig.xml
new file mode 100644
index 0000000..79ee123
--- /dev/null
+++ b/.idea/codeStyles/codeStyleConfig.xml
@@ -0,0 +1,5 @@
+
+
+
+
+
\ No newline at end of file
diff --git a/.idea/workspace.xml b/.idea/workspace.xml
index 1af757d..bc9527b 100644
--- a/.idea/workspace.xml
+++ b/.idea/workspace.xml
@@ -2,12 +2,11 @@
+
-
-
@@ -19,6 +18,20 @@
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/images/orb-metal.svg b/images/orb-metal.svg
new file mode 100644
index 0000000..462bad3
--- /dev/null
+++ b/images/orb-metal.svg
@@ -0,0 +1,219 @@
+
+
diff --git a/index.html b/index.html
index e9479a6..11474d9 100644
--- a/index.html
+++ b/index.html
@@ -1,91 +1,70 @@
-
+
-
- Sigmar's Garden Online
-
+
+
+
+
+
+
+ Sigmar's Garden Online
+
-
-
diff --git a/script.js b/script.js
index 71d357e..481fa38 100644
--- a/script.js
+++ b/script.js
@@ -12,7 +12,6 @@ class Svg {
}
}
-
class Board {
constructor() {
this.$boardbg = document.getElementById('boardbg');
@@ -58,10 +57,13 @@ class Board {
this.buf0 = [];
this.buf1 = [];
+ let o;
+
this.placeOrb(0, 0, 'salt');
this.placeOrb(1, 0, 'air');
this.placeOrb(2, 0, 'fire');
- this.placeOrb(3, 0, 'water');
+ o = this.placeOrb(3, 0, 'water');
+ o.classList.add('selected');
this.placeOrb(4, 0, 'earth');
this.placeOrb(5, 0, 'mercury');
this.placeOrb(0, 1, 'lead');
@@ -72,6 +74,16 @@ class Board {
this.placeOrb(5, 1, 'gold');
this.placeOrb(6, 1, 'vitae');
this.placeOrb(0, 2, 'mors');
+
+ o = this.placeOrb(1, 2, 'copper');
+ o.classList.add('disabled');
+
+ o = this.placeOrb(2, 2, 'copper');
+ o.classList.add('disabled');
+ o.classList.add('highlight');
+
+ o = this.placeOrb(3, 2, 'copper');
+ o.classList.add('highlight');
}
xyToIndex(x, y) {
@@ -94,44 +106,97 @@ class Board {
placeOrb(x, y, symbol) {
const { rx, ry } = this.xyToCoord(x, y);
- let o = this.orb.cloneNode(true);
+ let template;
+ if (this.metals.includes(symbol)) {
+ template = this.metallicOrbNode;
+ } else {
+ template = this.orbNode;
+ }
+
+ let o = template.cloneNode(true);
+ o.classList.add(`element-${symbol}`);
o.setAttributeNS(null, 'transform', `translate(${rx},${ry}),scale(0.75)`);
o.querySelector('.orb-fill').setAttributeNS(null, 'fill', this.orbColors[symbol]);
- o.appendChild(this.symbols[symbol].cloneNode(true));
+ o.appendChild(this.symbolNodes[symbol].cloneNode(true));
this.$orbs.appendChild(o);
return o;
}
initOrb() {
- this.orb = Svg.makeNode("g");
- this.orb.innerHTML = `
+ this.orbNode = Svg.makeNode("g", {
+ "class": "orb",
+ });
+ this.orbNode.innerHTML = `
+
+
+
-
+ cx="0" cy="36.5" rx="28" ry="13"
+ fill="url(#radGradOrbBottom)" />
+
`;
+
+ let metallicInlay = Svg.makeNode("g");
+ //fill:url(#linearGradient1400);fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1
+ metallicInlay.innerHTML = `
+
+
+
+
+
+
+
+
+
+ `;
+
+ this.metallicOrbNode = this.orbNode.cloneNode(true);
+ this.metallicOrbNode.appendChild(metallicInlay);
}
initCell() {
@@ -199,7 +264,7 @@ class Board {
initGlyphs() {
//font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-family:'Trebuchet MS';-inkscape-font-specification:'Trebuchet MS';fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:0.26458332px;stroke-opacity:1
- let symbols = {
+ let symbolPaths = {
salt: 'm 13.229166,291.52894 c -3.193365,0.056 -6.2293596,-2.11498 -7.2925669,-5.11388 -1.1013996,-2.92841 -0.2242509,-6.48596 2.1908174,-8.50166 2.5380605,-2.28864 6.6278455,-2.54558 9.4211355,-0.56925 2.346844,1.54401 3.721353,4.41788 3.400731,7.21296 -0.300944,3.62792 -3.485132,6.74361 -7.122041,6.95045 -0.19901,0.0144 -0.398548,0.0214 -0.598076,0.0214 z m -6.1435917,-8.51297 c 4.0957287,0 8.1914567,0 12.2871847,0 -0.315436,-3.07409 -3.239662,-5.6097 -6.336645,-5.4279 -2.970056,0.0389 -5.6195586,2.4852 -5.9505397,5.4279 z m 6.1435917,6.94037 c 2.96606,0.0757 5.716029,-2.30671 6.114844,-5.23796 0.09389,-0.3732 -0.542301,-0.11772 -0.794471,-0.19272 -3.821322,0 -7.642643,0 -11.4639647,0 0.352809,3.02068 3.0769237,5.49713 6.1435917,5.43068 z',
air: 'm 5.1145913,291.51845 c 2.7048586,-5.16509 5.4097167,-10.33018 8.1145757,-15.49527 2.704858,5.16509 5.409717,10.33018 8.114575,15.49527 -5.409717,0 -10.819434,0 -16.2291507,0 z m 6.0387527,-7.84199 c 1.383881,0 2.767763,0 4.151644,0 -0.69194,-1.35592 -1.383881,-2.71185 -2.075821,-4.06777 -0.691941,1.35592 -1.383882,2.71185 -2.075823,4.06777 z m -3.1661517,6.18553 c 3.4946497,0 6.9892987,0 10.4839477,0 -0.789791,-1.54463 -1.579581,-3.08927 -2.369372,-4.6339 -1.915068,0 -3.830136,0 -5.745204,0 -0.7897906,1.54463 -1.5795811,3.08927 -2.3693717,4.6339 z',
fire: 'm 5.1145923,291.51845 c 2.7048582,-5.16509 5.4097167,-10.33018 8.1145747,-15.49527 2.704858,5.16509 5.409716,10.33018 8.114574,15.49527 -5.409716,0 -10.819432,0 -16.2291487,0 z m 2.872601,-1.65646 c 3.4946487,0 6.9892977,0 10.4839467,0 -1.747324,-3.41777 -3.494649,-6.83553 -5.241973,-10.2533 -1.747325,3.41777 -3.4946491,6.83553 -5.2419737,10.2533 z',
@@ -216,15 +281,17 @@ class Board {
mors: 'm 14.482436,292.72274 -0.358077,-0.35808 v -2.86461 h 2.864614 v -1.79038 h -2.864614 v -3.93885 h 5.371152 l -6.445382,-8.95192 -6.0873063,8.95192 h 5.3711513 v 3.93885 H 9.4693607 v 1.79038 h 2.8646133 v 2.86461 l -0.358076,0.35808 z M 16.27282,282.33852 H 9.8274367 l 3.2226923,-4.65501 z',
};
+ this.metals = [ 'mercury', 'lead', 'tin', 'iron', 'copper', 'silver', 'gold' ];
+
this.orbColors = {
- salt: '#f2ebda',
- air: '#b3eeff',
+ salt: '#f2e7b4',
+ air: '#9ee0ff',
fire: '#ff540b',
water: '#0fdac3',
earth: '#99ff11',
// TODO metals need color adjust + ideally should have different visuals
- mercury: '#f2ebda',
+ mercury: '#f2e7b4',
lead: '#728686',
tin: '#c5be9b',
iron: '#b59e97',
@@ -236,12 +303,12 @@ class Board {
mort: '#433c29',
};
- this.symbols = {};
+ this.symbolNodes = {};
- for (let s in symbols) {
- if (symbols.hasOwnProperty(s)) {
- let path = symbols[s];
- this.symbols[s] = Svg.makeNode('path', {
+ for (let s in symbolPaths) {
+ if (symbolPaths.hasOwnProperty(s)) {
+ let path = symbolPaths[s];
+ this.symbolNodes[s] = Svg.makeNode('path', {
d: path,
// weird magic numbers
transform: "scale(2.5),translate(-13,-283)",
diff --git a/style.css b/style.css
index d4dd8ca..af15cab 100644
--- a/style.css
+++ b/style.css
@@ -10,3 +10,48 @@ html,body {
#board {
border: 1px dotted white;
}
+
+.orb.disabled {
+ opacity: 0.6;
+}
+
+.orb.highlight .orb-fill,
+.highlight-salt .orb.element-salt .orb-fill,
+.highlight-air .orb.element-air .orb-fill,
+.highlight-fire .orb.element-fire .orb-fill,
+.highlight-water .orb.element-water .orb-fill,
+.highlight-earth .orb.element-earth .orb-fill,
+.highlight-mercury .orb.element-mercury .orb-fill,
+.highlight-lead .orb.element-lead .orb-fill,
+.highlight-tin .orb.element-tin .orb-fill,
+.highlight-iron .orb.element-iron .orb-fill,
+.highlight-copper .orb.element-copper .orb-fill,
+.highlight-silver .orb.element-silver .orb-fill,
+.highlight-gold .orb.element-gold .orb-fill,
+.highlight-vitae .orb.element-vitae .orb-fill,
+.highlight-mors .orb.element-mors .orb-fill {
+ stroke: yellow;
+ stroke-width: 7px;
+}
+
+.orb.disabled .orb-glow,
+.orb.disabled .orb-shadow,
+.orb.disabled:hover .orb-glow,
+.orb.disabled:hover .orb-shadow{
+ fill-opacity: 0;
+}
+
+.orb .orb-glow,
+.orb .orb-shadow {
+ transition: fill-opacity linear 0.2s;
+}
+
+.orb:hover .orb-glow,
+.orb.selected .orb-glow {
+ fill-opacity: 1;
+}
+
+.orb:hover .orb-shadow,
+.orb.selected .orb-shadow {
+ fill-opacity: 0;
+}