metallic orbs style, highlight, disable, hover efefcts

master
Ondřej Hruška 5 years ago
parent 490d3e45d8
commit 0be65da90a
Signed by: MightyPork
GPG Key ID: 2C5FD5035250423D
  1. 5
      .idea/codeStyles/codeStyleConfig.xml
  2. 28
      .idea/workspace.xml
  3. 219
      images/orb-metal.svg
  4. 75
      index.html
  5. 131
      script.js
  6. 45
      style.css

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

@ -2,12 +2,11 @@
<project version="4"> <project version="4">
<component name="ChangeListManager"> <component name="ChangeListManager">
<list default="true" id="ae846324-9595-4559-bb25-c8da4b9670ce" name="Default Changelist" comment=""> <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$/.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$/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$/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$/style.css" beforeDir="false" afterPath="$PROJECT_DIR$/style.css" afterDir="false" />
<change beforePath="$PROJECT_DIR$/svg.js" beforeDir="false" />
</list> </list>
<option name="SHOW_DIALOG" value="false" /> <option name="SHOW_DIALOG" value="false" />
<option name="HIGHLIGHT_CONFLICTS" value="true" /> <option name="HIGHLIGHT_CONFLICTS" value="true" />
@ -19,6 +18,20 @@
<executable /> <executable />
</execution> </execution>
</component> </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"> <component name="FileTemplateManagerImpl">
<option name="RECENT_TEMPLATES"> <option name="RECENT_TEMPLATES">
<list> <list>
@ -51,7 +64,7 @@
<property name="node.js.selected.package.tslint" value="(autodetect)" /> <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_interpreter_path.stuck_in_default_project" value="undefined stuck path" />
<property name="nodejs_npm_path_reset_for_default_project" value="true" /> <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>
<component name="ServiceViewManager"> <component name="ServiceViewManager">
<option name="viewStates"> <option name="viewStates">
@ -75,6 +88,7 @@
<workItem from="1575580634353" duration="8432000" /> <workItem from="1575580634353" duration="8432000" />
<workItem from="1575636807263" duration="5000" /> <workItem from="1575636807263" duration="5000" />
<workItem from="1575669235802" duration="6368000" /> <workItem from="1575669235802" duration="6368000" />
<workItem from="1575727237976" duration="3992000" />
</task> </task>
<task id="LOCAL-00001" summary="shading line end tweaks"> <task id="LOCAL-00001" summary="shading line end tweaks">
<created>1575588833718</created> <created>1575588833718</created>
@ -98,6 +112,10 @@
<screen x="0" y="30" width="1920" height="1170" /> <screen x="0" y="30" width="1920" height="1170" />
</state> </state>
<state x="493" y="195" key="CommitChangelistDialog2/0.30.1920.1170/1920.0.1600.1200@0.30.1920.1170" timestamp="1575588833617" /> <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"> <state x="478" y="205" key="com.intellij.openapi.editor.actions.MultiplePasteAction$ClipboardContentChooser" timestamp="1575677860498">
<screen x="0" y="30" width="1920" height="1170" /> <screen x="0" y="30" width="1920" height="1170" />
</state> </state>
@ -106,9 +124,9 @@
<screen x="1920" y="0" width="1600" height="1200" /> <screen x="1920" y="0" width="1600" height="1200" />
</state> </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 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" /> <screen x="0" y="30" width="1920" height="1170" />
</state> </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> </component>
</project> </project>

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

After

Width:  |  Height:  |  Size: 8.7 KiB

@ -1,13 +1,18 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en" dir="ltr">
<head> <head>
<meta charset="UTF-8"> <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> <title>Sigmar's Garden Online</title>
<link rel="stylesheet" href="style.css"> <link rel="stylesheet" href="style.css">
</head> </head>
<body> <body>
<div id="wrap"> <div id="wrap">
<svg version="1.1" baseProfile="full" width="1200" height="1000" <svg version="1.1" baseProfile="full" width="1100" height="1000"
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:xlink="http://www.w3.org/1999/xlink"
id="board"> id="board">
@ -16,65 +21,39 @@
<stop offset="0%" stop-color="#A49472"/> <stop offset="0%" stop-color="#A49472"/>
<stop offset="100%" stop-color="#C6B491"/> <stop offset="100%" stop-color="#C6B491"/>
</linearGradient> </linearGradient>
<filter id="filterDropshadow" x="-10" y="-10" width="300" height="300"> <filter id="filterDropshadow" width="300" height="300">
<feGaussianBlur stdDeviation="5"/> <feGaussianBlur stdDeviation="5"/>
</filter> </filter>
<linearGradient <linearGradient id="linGradOrbDark">
id="linGradOrbDark"> <stop style="stop-color:#000000;stop-opacity:0;" offset="0"/>
<stop <stop style="stop-color:#000000;stop-opacity:1" offset="1"/>
style="stop-color:#000000;stop-opacity:0;"
offset="0"/>
<stop
style="stop-color:#000000;stop-opacity:1"
offset="1"/>
</linearGradient> </linearGradient>
<linearGradient <linearGradient id="linGradOrbBottom">
id="linGradOrbBottom"> <stop style="stop-color:#ffffff;stop-opacity:0.85" offset="0"/>
<stop <stop style="stop-color:#ffffff;stop-opacity:0;" offset="1"/>
style="stop-color:#ffffff;stop-opacity:0.85"
offset="0"/>
<stop
style="stop-color:#ffffff;stop-opacity:0;"
offset="1"/>
</linearGradient> </linearGradient>
<linearGradient <linearGradient id="linGradOrbTop">
id="linGradOrbTop"> <stop style="stop-color:#ffffff;stop-opacity:1;" offset="0"/>
<stop <stop style="stop-color:#ffffff;stop-opacity:0;" offset="1"/>
offset="0"
style="stop-color:#ffffff;stop-opacity:1;"/>
<stop
offset="1"
style="stop-color:#ffffff;stop-opacity:0;"/>
</linearGradient> </linearGradient>
<radialGradient <linearGradient id="linGradMetallicInlay"
gradientUnits="userSpaceOnUse" 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)" gradientTransform="matrix(1.1,0,0,0.7627688,-0.9,47)"
r="33" gradientUnits="userSpaceOnUse"
fy="-96" r="33" fy="-96" fx="0" cy="-96" cx="0"
fx="0"
cy="-96"
cx="0"
id="radGradOrbTop"
xlink:href="#linGradOrbTop"/> xlink:href="#linGradOrbTop"/>
<radialGradient <radialGradient id="radGradOrbBottom"
r="33"
fy="11"
fx="0"
cy="11"
cx="0"
gradientTransform="matrix(0.72177816,0,0,0.38047885,0.55112178,40.171783)" gradientTransform="matrix(0.72177816,0,0,0.38047885,0.55112178,40.171783)"
gradientUnits="userSpaceOnUse" gradientUnits="userSpaceOnUse"
id="radGradOrbBottom" r="33" fy="11" fx="0" cy="11" cx="0"
xlink:href="#linGradOrbBottom"/> xlink:href="#linGradOrbBottom"/>
<radialGradient <radialGradient id="radGradOrbDark"
gradientTransform="matrix(1.1755206,0,0,1.8030383,0,-18.355162)" gradientTransform="matrix(1.1755206,0,0,1.8030383,0,-18.355162)"
gradientUnits="userSpaceOnUse" gradientUnits="userSpaceOnUse"
r="50" r="50" fy="19" fx="0" cy="19" cx="0"
fy="19"
fx="0"
cy="19"
cx="0"
id="radGradOrbDark"
xlink:href="#linGradOrbDark"/> xlink:href="#linGradOrbDark"/>
</defs> </defs>
<g id="boardbg"></g> <g id="boardbg"></g>

@ -12,7 +12,6 @@ class Svg {
} }
} }
class Board { class Board {
constructor() { constructor() {
this.$boardbg = document.getElementById('boardbg'); this.$boardbg = document.getElementById('boardbg');
@ -58,10 +57,13 @@ class Board {
this.buf0 = []; this.buf0 = [];
this.buf1 = []; this.buf1 = [];
let o;
this.placeOrb(0, 0, 'salt'); this.placeOrb(0, 0, 'salt');
this.placeOrb(1, 0, 'air'); this.placeOrb(1, 0, 'air');
this.placeOrb(2, 0, 'fire'); 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(4, 0, 'earth');
this.placeOrb(5, 0, 'mercury'); this.placeOrb(5, 0, 'mercury');
this.placeOrb(0, 1, 'lead'); this.placeOrb(0, 1, 'lead');
@ -72,6 +74,16 @@ class Board {
this.placeOrb(5, 1, 'gold'); this.placeOrb(5, 1, 'gold');
this.placeOrb(6, 1, 'vitae'); this.placeOrb(6, 1, 'vitae');
this.placeOrb(0, 2, 'mors'); 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) { xyToIndex(x, y) {
@ -94,44 +106,97 @@ class Board {
placeOrb(x, y, symbol) { placeOrb(x, y, symbol) {
const { rx, ry } = this.xyToCoord(x, y); 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.setAttributeNS(null, 'transform', `translate(${rx},${ry}),scale(0.75)`);
o.querySelector('.orb-fill').setAttributeNS(null, 'fill', this.orbColors[symbol]); 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); this.$orbs.appendChild(o);
return o; return o;
} }
initOrb() { initOrb() {
this.orb = Svg.makeNode("g"); this.orbNode = Svg.makeNode("g", {
this.orb.innerHTML = ` "class": "orb",
});
this.orbNode.innerHTML = `
<circle <circle
r="50" r="50" cy="5" cx="0"
cy="0" fill="black"
cx="0" 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" fill="red"
class="orb-fill" class="orb-fill"
fill-opacity="0.80" /> fill-opacity="0.80" />
<circle <circle
cx="0" cx="0" cy="0" r="50"
cy="0"
r="50"
fill="url(#radGradOrbDark)" /> fill="url(#radGradOrbDark)" />
<ellipse <ellipse
cx="0" cx="0" cy="36.5" rx="28" ry="13"
cy="36.5" fill="url(#radGradOrbBottom)" />
fill="url(#radGradOrbBottom)"
rx="28"
ry="13" />
<ellipse <ellipse
ry="24" ry="24" rx="35" cy="-23" cx="0"
rx="35" fill="url(#radGradOrbTop)" />
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() { initCell() {
@ -199,7 +264,7 @@ class Board {
initGlyphs() { 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 //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', 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', 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', 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', 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 = { this.orbColors = {
salt: '#f2ebda', salt: '#f2e7b4',
air: '#b3eeff', air: '#9ee0ff',
fire: '#ff540b', fire: '#ff540b',
water: '#0fdac3', water: '#0fdac3',
earth: '#99ff11', earth: '#99ff11',
// TODO metals need color adjust + ideally should have different visuals // TODO metals need color adjust + ideally should have different visuals
mercury: '#f2ebda', mercury: '#f2e7b4',
lead: '#728686', lead: '#728686',
tin: '#c5be9b', tin: '#c5be9b',
iron: '#b59e97', iron: '#b59e97',
@ -236,12 +303,12 @@ class Board {
mort: '#433c29', mort: '#433c29',
}; };
this.symbols = {}; this.symbolNodes = {};
for (let s in symbols) { for (let s in symbolPaths) {
if (symbols.hasOwnProperty(s)) { if (symbolPaths.hasOwnProperty(s)) {
let path = symbols[s]; let path = symbolPaths[s];
this.symbols[s] = Svg.makeNode('path', { this.symbolNodes[s] = Svg.makeNode('path', {
d: path, d: path,
// weird magic numbers // weird magic numbers
transform: "scale(2.5),translate(-13,-283)", transform: "scale(2.5),translate(-13,-283)",

@ -10,3 +10,48 @@ html,body {
#board { #board {
border: 1px dotted white; 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;
}

Loading…
Cancel
Save