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. 75
      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"> <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>

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

75
index.html
Unescape View File

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

131
script.js
Unescape View File

@ -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)",

45
style.css
Unescape View File

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

Write Preview
Loading…
Cancel
Save