MightyPork
/
sigmar
1
0
Fork 0
Code Issues 1 Pull Requests Releases Activity

metallic orbs style, highlight, disable, hover efefcts

Browse Source
master
Ondřej Hruška 5 years ago
parent 490d3e45d8
commit 0be65da90a
Signed by: MightyPork
GPG Key ID: 2C5FD5035250423D
6 changed files with 452 additions and 119 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 5
      .idea/codeStyles/codeStyleConfig.xml
  2. 28
      .idea/workspace.xml
  3. 219
      images/orb-metal.svg
  4. 141
      index.html
  5. 131
      script.js
  6. 45
      style.css

5
.idea/codeStyles/codeStyleConfig.xml
Unescape View File

@ -0,0 +1,5 @@
<component name="ProjectCodeStyleConfiguration">
<state>
<option name="USE_PER_PROJECT_SETTINGS" value="true" />
</state>
</component>

28
.idea/workspace.xml
Unescape View File

@ -2,12 +2,11 @@
<project version="4">
<component name="ChangeListManager">
<list default="true" id="ae846324-9595-4559-bb25-c8da4b9670ce" name="Default Changelist" comment="">
<change afterPath="$PROJECT_DIR$/.idea/codeStyles/codeStyleConfig.xml" afterDir="false" />
<change beforePath="$PROJECT_DIR$/.idea/workspace.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/workspace.xml" afterDir="false" />
<change beforePath="$PROJECT_DIR$/Screenshot_20191205_222216.png" beforeDir="false" />
<change beforePath="$PROJECT_DIR$/index.html" beforeDir="false" afterPath="$PROJECT_DIR$/index.html" afterDir="false" />
<change beforePath="$PROJECT_DIR$/script.js" beforeDir="false" afterPath="$PROJECT_DIR$/script.js" afterDir="false" />
<change beforePath="$PROJECT_DIR$/style.css" beforeDir="false" afterPath="$PROJECT_DIR$/style.css" afterDir="false" />
<change beforePath="$PROJECT_DIR$/svg.js" beforeDir="false" />
</list>
<option name="SHOW_DIALOG" value="false" />
<option name="HIGHLIGHT_CONFLICTS" value="true" />
@ -19,6 +18,20 @@
<executable />
</execution>
</component>
<component name="DatabaseView">
<option name="SHOW_INTERMEDIATE" value="true" />
<option name="GROUP_DATA_SOURCES" value="true" />
<option name="GROUP_SCHEMA" value="true" />
<option name="GROUP_CONTENTS" value="false" />
<option name="SORT_POSITIONED" value="false" />
<option name="SHOW_EMPTY_GROUPS" value="false" />
<option name="AUTO_SCROLL_FROM_SOURCE" value="false" />
<option name="HIDDEN_KINDS">
<set />
</option>
<expand />
<select />
</component>
<component name="FileTemplateManagerImpl">
<option name="RECENT_TEMPLATES">
<list>
@ -51,7 +64,7 @@
<property name="node.js.selected.package.tslint" value="(autodetect)" />
<property name="nodejs_interpreter_path.stuck_in_default_project" value="undefined stuck path" />
<property name="nodejs_npm_path_reset_for_default_project" value="true" />
<property name="settings.editor.selected.configurable" value="configurable.group.appearance" />
<property name="settings.editor.selected.configurable" value="preferences.sourceCode.JavaScript" />
</component>
<component name="ServiceViewManager">
<option name="viewStates">
@ -75,6 +88,7 @@
<workItem from="1575580634353" duration="8432000" />
<workItem from="1575636807263" duration="5000" />
<workItem from="1575669235802" duration="6368000" />
<workItem from="1575727237976" duration="3992000" />
</task>
<task id="LOCAL-00001" summary="shading line end tweaks">
<created>1575588833718</created>
@ -98,6 +112,10 @@
<screen x="0" y="30" width="1920" height="1170" />
</state>
<state x="493" y="195" key="CommitChangelistDialog2/0.30.1920.1170/1920.0.1600.1200@0.30.1920.1170" timestamp="1575588833617" />
<state x="435" y="247" key="SettingsEditor" timestamp="1575727988378">
<screen x="0" y="30" width="1920" height="1170" />
</state>
<state x="435" y="247" key="SettingsEditor/0.30.1920.1170/1920.0.1600.1200@0.30.1920.1170" timestamp="1575727988378" />
<state x="478" y="205" key="com.intellij.openapi.editor.actions.MultiplePasteAction$ClipboardContentChooser" timestamp="1575677860498">
<screen x="0" y="30" width="1920" height="1170" />
</state>
@ -106,9 +124,9 @@
<screen x="1920" y="0" width="1600" height="1200" />
</state>
<state x="1920" y="30" width="1408" height="1092" key="dock-window-1/0.30.1920.1170/1920.0.1600.1200@0.30.1920.1170" timestamp="1575583022330" />
<state width="626" height="205" key="javadoc.popup.new" timestamp="1575678034683">
<state width="626" height="205" key="javadoc.popup.new" timestamp="1575729648411">
<screen x="0" y="30" width="1920" height="1170" />
</state>
<state width="626" height="205" key="javadoc.popup.new/0.30.1920.1170/1920.0.1600.1200@0.30.1920.1170" timestamp="1575678034683" />
<state width="626" height="205" key="javadoc.popup.new/0.30.1920.1170/1920.0.1600.1200@0.30.1920.1170" timestamp="1575729648411" />
</component>
</project>

219
images/orb-metal.svg
Unescape View File

@ -0,0 +1,219 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
enable-background="new"
id="svg8"
version="1.1"
viewBox="-50 -50 100 100"
height="100"
width="100">
<defs
id="defs2">
<linearGradient
id="linearGradient922">
<stop
style="stop-color:#000000;stop-opacity:0;"
offset="0"
id="stop920" />
<stop
style="stop-color:#000000;stop-opacity:0.99297422"
offset="1"
id="stop918" />
</linearGradient>
<linearGradient
id="linearGradient4653">
<stop
style="stop-color:#ffffff;stop-opacity:0.84330988"
offset="0"
id="stop4649" />
<stop
style="stop-color:#ffffff;stop-opacity:0;"
offset="1"
id="stop4651" />
</linearGradient>
<linearGradient
id="linearGradient4637">
<stop
id="stop4633"
offset="0"
style="stop-color:#ffffff;stop-opacity:1;" />
<stop
id="stop4635"
offset="1"
style="stop-color:#ffffff;stop-opacity:0;" />
</linearGradient>
<radialGradient
gradientUnits="userSpaceOnUse"
gradientTransform="matrix(1.1078691,0,0,0.7627688,-0.94566995,47.164715)"
r="33.125"
fy="-95.8965"
fx="2.2236617"
cy="-95.8965"
cx="2.2236617"
id="radialGradient4639"
xlink:href="#linearGradient4637" />
<radialGradient
r="33.125"
fy="11.306266"
fx="1.1293175"
cy="11.306266"
cx="1.1293175"
gradientTransform="matrix(0.72177816,0,0,0.38047885,0.55112178,40.171783)"
gradientUnits="userSpaceOnUse"
id="radialGradient4645"
xlink:href="#linearGradient4653" />
<radialGradient
gradientTransform="matrix(1.1755206,0,0,1.8030383,4.1701369e-7,-18.355162)"
gradientUnits="userSpaceOnUse"
r="50"
fy="19.390772"
fx="-6.7772191e-08"
cy="19.390772"
cx="-6.7772191e-08"
id="radialGradient924"
xlink:href="#linearGradient922" />
<linearGradient
gradientUnits="userSpaceOnUse"
y2="8.0552349"
x2="45.535713"
y1="8.0552349"
x1="-43.75"
id="linearGradient1400"
xlink:href="#linearGradient922" />
<linearGradient
gradientUnits="userSpaceOnUse"
y2="8.0552349"
x2="45.535713"
y1="8.0552349"
x1="-43.75"
id="linearGradient1400-9"
xlink:href="#linearGradient922"
gradientTransform="translate(-1.6071431,-12.162378)" />
<linearGradient
gradientUnits="userSpaceOnUse"
y2="8.0552349"
x2="45.535713"
y1="8.0552349"
x1="-43.75"
id="linearGradient1400-6"
xlink:href="#linearGradient922"
gradientTransform="matrix(0.952,0,0,0.84951179,0.57857129,-22.110875)" />
<linearGradient
gradientUnits="userSpaceOnUse"
y2="8.0552349"
x2="45.535713"
y1="8.0552349"
x1="-43.75"
id="linearGradient1400-8"
xlink:href="#linearGradient922"
gradientTransform="matrix(0.936,0,0,0.80651516,-0.83571431,14.12833)" />
<linearGradient
gradientUnits="userSpaceOnUse"
y2="8.0552349"
x2="45.535713"
y1="8.0552349"
x1="-43.75"
id="linearGradient1400-0"
xlink:href="#linearGradient922"
gradientTransform="matrix(0.784,0,0,0.61303033,-0.87857136,26.847611)" />
<linearGradient
gradientUnits="userSpaceOnUse"
y2="8.0552349"
x2="45.535713"
y1="8.0552349"
x1="-43.75"
id="linearGradient1400-6-5"
xlink:href="#linearGradient922"
gradientTransform="matrix(0.898,0,0,0.82801348,0.18035709,-32.116272)" />
<linearGradient
gradientUnits="userSpaceOnUse"
y2="8.0552349"
x2="45.535713"
y1="8.0552349"
x1="-43.75"
id="linearGradient1400-0-8"
xlink:href="#linearGradient922"
gradientTransform="matrix(0.784,0,0,0.61303033,-2.1285704,-41.545246)" />
</defs>
<metadata
id="metadata5">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title></dc:title>
</cc:Work>
</rdf:RDF>
</metadata>
<g
style="display:inline"
id="layer1">
<circle
mask="none"
r="50"
cy="0"
cx="0"
id="path4520"
style="display:inline;opacity:1;fill:#008ed3;fill-opacity:0.81338028;fill-rule:evenodd;stroke:none;stroke-width:0.26458332;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;paint-order:normal" />
<circle
style="display:inline;opacity:1;fill:url(#radialGradient924);fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:0.26458332;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;paint-order:normal"
id="circle916"
cx="0"
cy="0"
r="50"
mask="none" />
<g
style="opacity:0.36053132"
id="layer2">
<path
id="path1392"
d="M -43.75,9.2857139 C -30.010378,16.025483 26.753132,-7.8871183 45.535714,11.964285 15.246713,-2.1819387 -29.821429,19.702381 -43.75,9.2857139 Z"
style="fill:url(#linearGradient1400);fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" />
<path
id="path1392-0"
d="M -45.357143,-2.8766642 C -31.617521,3.8631045 25.145989,-20.049496 43.928571,-0.19809327 13.63957,-14.344317 -31.428572,7.5400025 -45.357143,-2.8766642 Z"
style="display:inline;opacity:1;fill:url(#linearGradient1400-9);fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" />
<path
id="path1392-1"
d="m -41.071429,-14.222551 c 13.08012,5.7255132 67.118982,-14.588524 85,2.275477 -28.835129,-12.017384 -71.74,6.5736044 -85,-2.275477 z"
style="display:inline;opacity:1;fill:url(#linearGradient1400-6);fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" />
<path
id="path1392-2"
d="M -41.785714,21.6174 C -28.925428,27.053125 24.205217,7.7672504 41.785714,23.777708 13.435209,12.368564 -28.748572,30.018599 -41.785714,21.6174 Z"
style="display:inline;opacity:1;fill:url(#linearGradient1400-8);fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:0.99999994px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" />
<path
id="path1392-7"
d="m -35.178572,32.540035 c 10.771863,4.131683 55.274455,-10.527466 70,1.642045 -23.746577,-8.672064 -59.08,4.743688 -70,-1.642045 z"
style="display:inline;opacity:1;fill:url(#linearGradient1400-0);fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:0.99999982px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" />
<path
id="path1392-1-2"
d="m -39.107144,-24.427576 c 12.33818,5.58062 63.311813,-14.219337 80.178571,2.217893 -27.199522,-11.713264 -67.670714,6.407248 -80.178571,-2.217893 z"
style="display:inline;opacity:1;fill:url(#linearGradient1400-6-5);fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" />
<path
id="path1392-7-3"
d="m -36.428571,-35.852822 c 10.771863,4.131683 55.274455,-10.527466 70,1.642045 -23.7465774,-8.672064 -59.08,4.743688 -70,-1.642045 z"
style="display:inline;opacity:1;fill:url(#linearGradient1400-0-8);fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:0.99999982px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" />
</g>
<ellipse
style="opacity:1;fill:url(#radialGradient4645);fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:1;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;paint-order:normal"
id="ellipse4643"
cx="0.80357033"
cy="36.607143"
rx="28.125"
ry="13.214285" />
<ellipse
ry="24.017857"
rx="33.125"
cy="-23.303572"
cx="0.446428"
id="path4631"
style="display:inline;opacity:1;fill:url(#radialGradient4639);fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:1;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;paint-order:normal" />
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 8.7 KiB

141
index.html
Unescape View File

@ -1,91 +1,70 @@
<!DOCTYPE html>
<html lang="en">
<html lang="en" dir="ltr">
<head>
<meta charset="UTF-8">
<title>Sigmar's Garden Online</title>
<link rel="stylesheet" href="style.css">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta name="apple-mobile-web-app-capable" content="yes">
<title>Sigmar's Garden Online</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="wrap">
<svg version="1.1" baseProfile="full" width="1200" height="1000"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
id="board">
<defs>
<linearGradient id="linGradSlotBg" x1="0" x2="0" y1="0" y2="1">
<stop offset="0%" stop-color="#A49472"/>
<stop offset="100%" stop-color="#C6B491"/>
</linearGradient>
<filter id="filterDropshadow" x="-10" y="-10" width="300" height="300">
<feGaussianBlur stdDeviation="5"/>
</filter>
<linearGradient
id="linGradOrbDark">
<stop
style="stop-color:#000000;stop-opacity:0;"
offset="0"/>
<stop
style="stop-color:#000000;stop-opacity:1"
offset="1"/>
</linearGradient>
<linearGradient
id="linGradOrbBottom">
<stop
style="stop-color:#ffffff;stop-opacity:0.85"
offset="0"/>
<stop
style="stop-color:#ffffff;stop-opacity:0;"
offset="1"/>
</linearGradient>
<linearGradient
id="linGradOrbTop">
<stop
offset="0"
style="stop-color:#ffffff;stop-opacity:1;"/>
<stop
offset="1"
style="stop-color:#ffffff;stop-opacity:0;"/>
</linearGradient>
<radialGradient
gradientUnits="userSpaceOnUse"
gradientTransform="matrix(1.1,0,0,0.7627688,-0.9,47)"
r="33"
fy="-96"
fx="0"
cy="-96"
cx="0"
id="radGradOrbTop"
xlink:href="#linGradOrbTop"/>
<radialGradient
r="33"
fy="11"
fx="0"
cy="11"
cx="0"
gradientTransform="matrix(0.72177816,0,0,0.38047885,0.55112178,40.171783)"
gradientUnits="userSpaceOnUse"
id="radGradOrbBottom"
xlink:href="#linGradOrbBottom"/>
<radialGradient
gradientTransform="matrix(1.1755206,0,0,1.8030383,0,-18.355162)"
<svg version="1.1" baseProfile="full" width="1100" height="1000"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
id="board">
<defs>
<linearGradient id="linGradSlotBg" x1="0" x2="0" y1="0" y2="1">
<stop offset="0%" stop-color="#A49472"/>
<stop offset="100%" stop-color="#C6B491"/>
</linearGradient>
<filter id="filterDropshadow" width="300" height="300">
<feGaussianBlur stdDeviation="5"/>
</filter>
<linearGradient id="linGradOrbDark">
<stop style="stop-color:#000000;stop-opacity:0;" offset="0"/>
<stop style="stop-color:#000000;stop-opacity:1" offset="1"/>
</linearGradient>
<linearGradient id="linGradOrbBottom">
<stop style="stop-color:#ffffff;stop-opacity:0.85" offset="0"/>
<stop style="stop-color:#ffffff;stop-opacity:0;" offset="1"/>
</linearGradient>
<linearGradient id="linGradOrbTop">
<stop style="stop-color:#ffffff;stop-opacity:1;" offset="0"/>
<stop style="stop-color:#ffffff;stop-opacity:0;" offset="1"/>
</linearGradient>
<linearGradient id="linGradMetallicInlay"
gradientUnits="userSpaceOnUse"
y2="8" x2="45" y1="8" x1="-45"
xlink:href="#linGradOrbDark" />
<radialGradient id="radGradOrbTop"
gradientTransform="matrix(1.1,0,0,0.7627688,-0.9,47)"
gradientUnits="userSpaceOnUse"
r="50"
fy="19"
fx="0"
cy="19"
cx="0"
id="radGradOrbDark"
xlink:href="#linGradOrbDark"/>
</defs>
<g id="boardbg"></g>
<g id="orbs"></g>
</svg>
<div id="menu">
<a id="new-game" href=""></a>
<div id="counts">
r="33" fy="-96" fx="0" cy="-96" cx="0"
xlink:href="#linGradOrbTop"/>
<radialGradient id="radGradOrbBottom"
gradientTransform="matrix(0.72177816,0,0,0.38047885,0.55112178,40.171783)"
gradientUnits="userSpaceOnUse"
r="33" fy="11" fx="0" cy="11" cx="0"
xlink:href="#linGradOrbBottom"/>
<radialGradient id="radGradOrbDark"
gradientTransform="matrix(1.1755206,0,0,1.8030383,0,-18.355162)"
gradientUnits="userSpaceOnUse"
r="50" fy="19" fx="0" cy="19" cx="0"
xlink:href="#linGradOrbDark"/>
</defs>
<g id="boardbg"></g>
<g id="orbs"></g>
</svg>
<div id="menu">
<a id="new-game" href=""></a>
<div id="counts">
</div>
</div>
</div>
</div>
</div>
<script type="module" src="script.js"></script>
</body>

131
script.js
Unescape View File

@ -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 = `
<circle
r="50"
cy="0"
cx="0"
r="50" cy="5" cx="0"
fill="black"
class="orb-shadow"
filter="url('#filterDropshadow')"
fill-opacity="0.7" />
<circle
r="55" cy="2" cx="0"
fill="white"
class="orb-glow"
filter="url('#filterDropshadow')"
fill-opacity="0" />
<circle
r="49" cy="0" cx="0"
fill="#9F9F9F"
class="orb-background" />
<circle
r="50" cy="0" cx="0"
fill="red"
class="orb-fill"
fill-opacity="0.80" />
<circle
cx="0"
cy="0"
r="50"
cx="0" cy="0" r="50"
fill="url(#radGradOrbDark)" />
<ellipse
cx="0"
cy="36.5"
fill="url(#radGradOrbBottom)"
rx="28"
ry="13" />
cx="0" cy="36.5" rx="28" ry="13"
fill="url(#radGradOrbBottom)" />
<ellipse
ry="24"
rx="35"
cy="-23"
cx="0"
fill="url(#radGradOrbTop)"
/>
ry="24" rx="35" cy="-23" cx="0"
fill="url(#radGradOrbTop)" />
`;
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 = `
<g fill-opacity="0.3" transform="translate(-3,0)">
<path
id="path1392"
d="M -43.75,9.2857139 C -30.010378,16.025483 26.753132,-7.8871183 45.535714,11.964285 15.246713,-2.1819387 -29.821429,19.702381 -43.75,9.2857139 Z"
fill="url(#linGradMetallicInlay)" />
<path
id="path1392-0"
d="M -45.357143,-2.8766642 C -31.617521,3.8631045 25.145989,-20.049496 43.928571,-0.19809327 13.63957,-14.344317 -31.428572,7.5400025 -45.357143,-2.8766642 Z"
fill="url(#linGradMetallicInlay)" />
<path
id="path1392-1"
d="m -41.071429,-14.222551 c 13.08012,5.7255132 67.118982,-14.588524 85,2.275477 -28.835129,-12.017384 -71.74,6.5736044 -85,-2.275477 z"
fill="url(#linGradMetallicInlay)" />
<path
id="path1392-2"
d="M -41.785714,21.6174 C -28.925428,27.053125 24.205217,7.7672504 41.785714,23.777708 13.435209,12.368564 -28.748572,30.018599 -41.785714,21.6174 Z"
fill="url(#linGradMetallicInlay)" />
<path
id="path1392-7"
d="m -35.178572,32.540035 c 10.771863,4.131683 55.274455,-10.527466 70,1.642045 -23.746577,-8.672064 -59.08,4.743688 -70,-1.642045 z"
fill="url(#linGradMetallicInlay)" />
<path
id="path1392-1-2"
d="m -39.107144,-24.427576 c 12.33818,5.58062 63.311813,-14.219337 80.178571,2.217893 -27.199522,-11.713264 -67.670714,6.407248 -80.178571,-2.217893 z"
fill="url(#linGradMetallicInlay)" />
<path
id="path1392-7-3"
d="m -36.428571,-35.852822 c 10.771863,4.131683 55.274455,-10.527466 70,1.642045 -23.7465774,-8.672064 -59.08,4.743688 -70,-1.642045 z"
fill="url(#linGradMetallicInlay)" />
</g>
`;
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)",

45
style.css
Unescape View File

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

Write Preview
Loading…
Cancel
Save