From 0be65da90a2a76b91f68e41ec3d57145c8c08823 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ond=C5=99ej=20Hru=C5=A1ka?= <ondra@ondrovo.com>
Date: Sat, 7 Dec 2019 16:27:09 +0100
Subject: [PATCH] metallic orbs style, highlight, disable, hover efefcts

---
 .idea/codeStyles/codeStyleConfig.xml |   5 +
 .idea/workspace.xml                  |  28 +++-
 images/orb-metal.svg                 | 219 +++++++++++++++++++++++++++
 index.html                           | 141 ++++++++---------
 script.js                            | 133 ++++++++++++----
 style.css                            |  45 ++++++
 6 files changed, 452 insertions(+), 119 deletions(-)
 create mode 100644 .idea/codeStyles/codeStyleConfig.xml
 create mode 100644 images/orb-metal.svg

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 @@
+<component name="ProjectCodeStyleConfiguration">
+  <state>
+    <option name="USE_PER_PROJECT_SETTINGS" value="true" />
+  </state>
+</component>
\ 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 @@
 <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>
\ 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 @@
+<?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>
diff --git a/index.html b/index.html
index e9479a6..11474d9 100644
--- a/index.html
+++ b/index.html
@@ -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>
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 = `
       <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" />
-      <ellipse
-         ry="24"
-         rx="35"
-         cy="-23"
-         cx="0"
-         fill="url(#radGradOrbTop)"
-        />
+         cx="0" cy="36.5" rx="28" ry="13"
+         fill="url(#radGradOrbBottom)" />
+      <ellipse 
+         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)",
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;
+}