From a11e6742267ebb1f5c187cfbe713f9a0f7221d14 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 21:09:12 +0100
Subject: [PATCH] improve board effects and design, add more accurate tile
 graphics

---
 .gitignore                           |   1 +
 .idea/$CACHE_FILE$                   |   6 -
 .idea/codeStyles/codeStyleConfig.xml |   5 -
 .idea/encodings.xml                  |   6 -
 .idea/misc.xml                       |   6 -
 .idea/modules.xml                    |   8 -
 .idea/php.xml                        |  13 -
 .idea/sigmar.iml                     |   8 -
 .idea/vcs.xml                        |   6 -
 .idea/workspace.xml                  | 130 -------
 images/tile-ex-sw.svg                | 218 +++++++++++
 images/tile-ex.svg                   |  70 ++++
 images/tile.svg                      | 218 +++++++++++
 index.html                           |  20 +-
 script.js                            | 531 +++++++++++++++++----------
 style.css                            |  71 ++--
 16 files changed, 910 insertions(+), 407 deletions(-)
 delete mode 100644 .idea/$CACHE_FILE$
 delete mode 100644 .idea/codeStyles/codeStyleConfig.xml
 delete mode 100644 .idea/encodings.xml
 delete mode 100644 .idea/misc.xml
 delete mode 100644 .idea/modules.xml
 delete mode 100644 .idea/php.xml
 delete mode 100644 .idea/sigmar.iml
 delete mode 100644 .idea/vcs.xml
 delete mode 100644 .idea/workspace.xml
 create mode 100644 images/tile-ex-sw.svg
 create mode 100644 images/tile-ex.svg
 create mode 100644 images/tile.svg

diff --git a/.gitignore b/.gitignore
index e69de29..9f11b75 100644
--- a/.gitignore
+++ b/.gitignore
@@ -0,0 +1 @@
+.idea/
diff --git a/.idea/$CACHE_FILE$ b/.idea/$CACHE_FILE$
deleted file mode 100644
index 6cb8985..0000000
--- a/.idea/$CACHE_FILE$
+++ /dev/null
@@ -1,6 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<project version="4">
-  <component name="NodePackageJsonFileManager">
-    <packageJsonPaths />
-  </component>
-</project>
\ No newline at end of file
diff --git a/.idea/codeStyles/codeStyleConfig.xml b/.idea/codeStyles/codeStyleConfig.xml
deleted file mode 100644
index 79ee123..0000000
--- a/.idea/codeStyles/codeStyleConfig.xml
+++ /dev/null
@@ -1,5 +0,0 @@
-<component name="ProjectCodeStyleConfiguration">
-  <state>
-    <option name="USE_PER_PROJECT_SETTINGS" value="true" />
-  </state>
-</component>
\ No newline at end of file
diff --git a/.idea/encodings.xml b/.idea/encodings.xml
deleted file mode 100644
index 97626ba..0000000
--- a/.idea/encodings.xml
+++ /dev/null
@@ -1,6 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<project version="4">
-  <component name="Encoding">
-    <file url="PROJECT" charset="UTF-8" />
-  </component>
-</project>
\ No newline at end of file
diff --git a/.idea/misc.xml b/.idea/misc.xml
deleted file mode 100644
index 28a804d..0000000
--- a/.idea/misc.xml
+++ /dev/null
@@ -1,6 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<project version="4">
-  <component name="JavaScriptSettings">
-    <option name="languageLevel" value="ES6" />
-  </component>
-</project>
\ No newline at end of file
diff --git a/.idea/modules.xml b/.idea/modules.xml
deleted file mode 100644
index 368536a..0000000
--- a/.idea/modules.xml
+++ /dev/null
@@ -1,8 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<project version="4">
-  <component name="ProjectModuleManager">
-    <modules>
-      <module fileurl="file://$PROJECT_DIR$/.idea/sigmar.iml" filepath="$PROJECT_DIR$/.idea/sigmar.iml" />
-    </modules>
-  </component>
-</project>
\ No newline at end of file
diff --git a/.idea/php.xml b/.idea/php.xml
deleted file mode 100644
index 2de3486..0000000
--- a/.idea/php.xml
+++ /dev/null
@@ -1,13 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<project version="4">
-  <component name="MessDetector">
-    <phpmd_settings>
-      <MessDetectorConfiguration tool_path="/bin/phpmd.phar" />
-    </phpmd_settings>
-  </component>
-  <component name="PhpCodeSniffer">
-    <phpcs_settings>
-      <PhpCSConfiguration tool_path="/usr/bin/phpcs" />
-    </phpcs_settings>
-  </component>
-</project>
\ No newline at end of file
diff --git a/.idea/sigmar.iml b/.idea/sigmar.iml
deleted file mode 100644
index c956989..0000000
--- a/.idea/sigmar.iml
+++ /dev/null
@@ -1,8 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<module type="WEB_MODULE" version="4">
-  <component name="NewModuleRootManager">
-    <content url="file://$MODULE_DIR$" />
-    <orderEntry type="inheritedJdk" />
-    <orderEntry type="sourceFolder" forTests="false" />
-  </component>
-</module>
\ No newline at end of file
diff --git a/.idea/vcs.xml b/.idea/vcs.xml
deleted file mode 100644
index 94a25f7..0000000
--- a/.idea/vcs.xml
+++ /dev/null
@@ -1,6 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<project version="4">
-  <component name="VcsDirectoryMappings">
-    <mapping directory="$PROJECT_DIR$" vcs="Git" />
-  </component>
-</project>
\ No newline at end of file
diff --git a/.idea/workspace.xml b/.idea/workspace.xml
deleted file mode 100644
index 030250d..0000000
--- a/.idea/workspace.xml
+++ /dev/null
@@ -1,130 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<project version="4">
-  <component name="ChangeListManager">
-    <list default="true" id="ae846324-9595-4559-bb25-c8da4b9670ce" name="Default Changelist" comment="">
-      <change beforePath="$PROJECT_DIR$/.idea/workspace.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/workspace.xml" 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" />
-    </list>
-    <option name="SHOW_DIALOG" value="false" />
-    <option name="HIGHLIGHT_CONFLICTS" value="true" />
-    <option name="HIGHLIGHT_NON_ACTIVE_CHANGELIST" value="false" />
-    <option name="LAST_RESOLUTION" value="IGNORE" />
-  </component>
-  <component name="ComposerSettings">
-    <execution>
-      <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>
-        <option value="HTML File" />
-        <option value="JavaScript File" />
-      </list>
-    </option>
-  </component>
-  <component name="Git.Settings">
-    <option name="RECENT_GIT_ROOT_PATH" value="$PROJECT_DIR$" />
-  </component>
-  <component name="ProjectId" id="1Ua2xmATC20JV9v8YJ5ClMc5t93" />
-  <component name="ProjectLevelVcsManager" settingsEditedManually="true" />
-  <component name="ProjectViewState">
-    <option name="hideEmptyMiddlePackages" value="true" />
-    <option name="showExcludedFiles" value="true" />
-    <option name="showLibraryContents" value="true" />
-  </component>
-  <component name="PropertiesComponent">
-    <property name="DefaultHtmlFileTemplate" value="HTML File" />
-    <property name="RunOnceActivity.ShowReadmeOnStart" value="true" />
-    <property name="SHARE_PROJECT_CONFIGURATION_FILES" value="true" />
-    <property name="WebServerToolWindowFactoryState" value="false" />
-    <property name="ignore_missing_gitignore" value="true" />
-    <property name="node.js.detected.package.eslint" value="true" />
-    <property name="node.js.detected.package.tslint" value="true" />
-    <property name="node.js.path.for.package.eslint" value="project" />
-    <property name="node.js.path.for.package.tslint" value="project" />
-    <property name="node.js.selected.package.eslint" 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_npm_path_reset_for_default_project" value="true" />
-    <property name="settings.editor.selected.configurable" value="preferences.sourceCode.JavaScript" />
-  </component>
-  <component name="ServiceViewManager">
-    <option name="viewStates">
-      <list>
-        <serviceView>
-          <treeState>
-            <expand />
-            <select />
-          </treeState>
-        </serviceView>
-      </list>
-    </option>
-  </component>
-  <component name="TaskManager">
-    <task active="true" id="Default" summary="Default task">
-      <changelist id="ae846324-9595-4559-bb25-c8da4b9670ce" name="Default Changelist" comment="" />
-      <created>1575580633016</created>
-      <option name="number" value="Default" />
-      <option name="presentableId" value="Default" />
-      <updated>1575580633016</updated>
-      <workItem from="1575580634353" duration="8432000" />
-      <workItem from="1575636807263" duration="5000" />
-      <workItem from="1575669235802" duration="6368000" />
-      <workItem from="1575727237976" duration="6073000" />
-    </task>
-    <task id="LOCAL-00001" summary="shading line end tweaks">
-      <created>1575588833718</created>
-      <option name="number" value="00001" />
-      <option name="presentableId" value="LOCAL-00001" />
-      <option name="project" value="LOCAL" />
-      <updated>1575588833718</updated>
-    </task>
-    <option name="localTasksCounter" value="2" />
-    <servers />
-  </component>
-  <component name="TypeScriptGeneratedFilesManager">
-    <option name="version" value="1" />
-  </component>
-  <component name="VcsManagerConfiguration">
-    <MESSAGE value="shading line end tweaks" />
-    <option name="LAST_COMMIT_MESSAGE" value="shading line end tweaks" />
-  </component>
-  <component name="WindowStateProjectService">
-    <state x="493" y="195" key="CommitChangelistDialog2" timestamp="1575588833617">
-      <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>
-    <state x="478" y="205" key="com.intellij.openapi.editor.actions.MultiplePasteAction$ClipboardContentChooser/0.30.1920.1170/1920.0.1600.1200@0.30.1920.1170" timestamp="1575677860498" />
-    <state x="1920" y="30" width="1408" height="1092" key="dock-window-1" timestamp="1575583022330">
-      <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="1575733473943">
-      <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="1575733473943" />
-  </component>
-</project>
\ No newline at end of file
diff --git a/images/tile-ex-sw.svg b/images/tile-ex-sw.svg
new file mode 100644
index 0000000..ad0666a
--- /dev/null
+++ b/images/tile-ex-sw.svg
@@ -0,0 +1,218 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<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"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="100"
+   height="100"
+   viewBox="0 0 26.458333 26.458333"
+   version="1.1"
+   id="svg1568"
+   inkscape:version="0.92.4 5da689c313, 2019-01-14"
+   sodipodi:docname="tile-ex-sw.svg">
+  <defs
+     id="defs1562">
+    <linearGradient
+       inkscape:collect="always"
+       id="linearGradient5898">
+      <stop
+         id="stop5896"
+         offset="0"
+         style="stop-color:#c1b495;stop-opacity:1" />
+      <stop
+         id="stop5894"
+         offset="1"
+         style="stop-color:#9e906f;stop-opacity:1" />
+    </linearGradient>
+    <radialGradient
+       inkscape:collect="always"
+       xlink:href="#linearGradient5898"
+       id="radialGradient5900"
+       cx="13.229165"
+       cy="291.02457"
+       fx="13.229165"
+       fy="291.02457"
+       r="9.8552256"
+       gradientUnits="userSpaceOnUse"
+       gradientTransform="matrix(1.7254491,-4.9104912e-8,5.383127e-8,1.8915239,-9.5971015,-257.22095)" />
+  </defs>
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0.0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="3.959798"
+     inkscape:cx="56.139713"
+     inkscape:cy="41.877659"
+     inkscape:document-units="mm"
+     inkscape:current-layer="layer1"
+     showgrid="false"
+     units="px"
+     showguides="true"
+     inkscape:guide-bbox="true"
+     inkscape:window-width="1920"
+     inkscape:window-height="1139"
+     inkscape:window-x="0"
+     inkscape:window-y="30"
+     inkscape:window-maximized="1"
+     inkscape:snap-bbox="true"
+     inkscape:snap-bbox-midpoints="true"
+     inkscape:snap-global="false">
+    <sodipodi:guide
+       position="26.458333,0"
+       orientation="1,0"
+       id="guide2138"
+       inkscape:locked="false"
+       inkscape:label=""
+       inkscape:color="rgb(0,0,255)" />
+    <sodipodi:guide
+       position="0,26.458333"
+       orientation="0,1"
+       id="guide2140"
+       inkscape:locked="false"
+       inkscape:label=""
+       inkscape:color="rgb(0,0,255)" />
+    <sodipodi:guide
+       position="0,0"
+       orientation="1,0"
+       id="guide2142"
+       inkscape:locked="false"
+       inkscape:label=""
+       inkscape:color="rgb(0,0,255)" />
+    <sodipodi:guide
+       position="0,0"
+       orientation="0,1"
+       id="guide2146"
+       inkscape:locked="false"
+       inkscape:label=""
+       inkscape:color="rgb(0,0,255)" />
+    <sodipodi:guide
+       position="0,13.229166"
+       orientation="0,1"
+       id="guide5881"
+       inkscape:locked="false"
+       inkscape:label=""
+       inkscape:color="rgb(0,0,255)" />
+    <sodipodi:guide
+       position="49.999999,0"
+       orientation="1,0"
+       id="guide5883"
+       inkscape:locked="false"
+       inkscape:label=""
+       inkscape:color="rgb(0,0,255)" />
+    <sodipodi:guide
+       position="13.229166,0"
+       orientation="1,0"
+       id="guide5885"
+       inkscape:locked="false"
+       inkscape:label=""
+       inkscape:color="rgb(0,0,255)" />
+  </sodipodi:namedview>
+  <metadata
+     id="metadata1565">
+    <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
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     transform="translate(0,-270.54167)">
+    <path
+       inkscape:label="back-and-bottom"
+       transform="matrix(0.81746386,-0.47196298,0.47519507,0.823062,-132.56101,57.743511)"
+       inkscape:transform-center-y="1.0151446e-05"
+       inkscape:transform-center-x="-2.8921192e-06"
+       d="M 28.028064,282.66339 21.029591,294.7851 H 7.0326457 L 0.03417301,282.66339 7.0326457,270.54168 H 21.029591 Z"
+       inkscape:randomized="0"
+       inkscape:rounded="0"
+       inkscape:flatsided="true"
+       sodipodi:arg2="0.52359878"
+       sodipodi:arg1="0"
+       sodipodi:r2="12.12171"
+       sodipodi:r1="13.996945"
+       sodipodi:cy="282.66339"
+       sodipodi:cx="14.031118"
+       sodipodi:sides="6"
+       id="back-and-bottom"
+       style="display:inline;opacity:1;fill:#9e9272;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0.27934605;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;paint-order:normal"
+       sodipodi:type="star"
+       sodipodi:insensitive="true" />
+    <path
+       transform="matrix(0.81746386,-0.47196298,0.47519507,0.823062,-132.56101,57.743511)"
+       style="display:inline;opacity:1;fill:#d0c6ab;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0.27934605;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;paint-order:normal"
+       inkscape:transform-center-x="-2.8921192e-06"
+       inkscape:transform-center-y="1.0151446e-05"
+       d="M 28.028064,282.66339 21.029591,294.7851 7.0326457,270.54168 H 21.029591 Z"
+       id="top-left_right"
+       inkscape:connector-curvature="0"
+       sodipodi:nodetypes="ccccc"
+       inkscape:label="top-left_right"
+       sodipodi:insensitive="true" />
+    <path
+       transform="matrix(0.81746386,-0.47196298,0.47519507,0.823062,-132.56101,57.743511)"
+       style="display:inline;opacity:1;fill:#b4a682;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0.27934605;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;paint-order:normal"
+       inkscape:transform-center-x="-2.8921192e-06"
+       inkscape:transform-center-y="1.0151446e-05"
+       d="M 14.031114,282.66339 H 0.03417301 L 7.0326457,270.54168 Z"
+       id="left"
+       inkscape:connector-curvature="0"
+       inkscape:label="left"
+       sodipodi:nodetypes="cccc"
+       sodipodi:insensitive="true" />
+    <path
+       inkscape:label="top-right"
+       sodipodi:nodetypes="cccc"
+       inkscape:connector-curvature="0"
+       id="top-right"
+       d="m 28.028064,282.66339 h -13.99695 l 6.998477,-12.12171 z"
+       inkscape:transform-center-y="1.0151446e-05"
+       inkscape:transform-center-x="-2.8921192e-06"
+       style="display:inline;opacity:1;fill:#d7d3c1;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0.27934605;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;paint-order:normal"
+       transform="matrix(0.81746386,-0.47196298,0.47519507,0.823062,-132.56101,57.743511)"
+       sodipodi:insensitive="true" />
+    <path
+       sodipodi:type="star"
+       style="display:inline;opacity:1;fill:#ab9f7e;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0.30460548;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;paint-order:normal"
+       id="inner"
+       sodipodi:sides="6"
+       sodipodi:cx="14.031118"
+       sodipodi:cy="282.66339"
+       sodipodi:r1="14.311931"
+       sodipodi:r2="12.12171"
+       sodipodi:arg1="0"
+       sodipodi:arg2="0.52359878"
+       inkscape:flatsided="true"
+       inkscape:rounded="0"
+       inkscape:randomized="0"
+       d="m 28.343049,282.66339 -7.155965,12.3945 H 6.8751531 L -0.28081226,282.66339 6.8751531,270.2689 H 21.187084 Z"
+       inkscape:transform-center-x="-3.2154621e-06"
+       inkscape:transform-center-y="1.0948642e-05"
+       transform="matrix(0.74967562,-0.43282542,0.43578949,0.75480954,-120.47135,76.486841)"
+       inkscape:label="inner"
+       sodipodi:insensitive="true" />
+    <circle
+       style="opacity:1;fill:url(#radialGradient5900);fill-opacity:1;fill-rule:nonzero;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="circle"
+       cx="13.229166"
+       cy="283.77084"
+       r="10.155904"
+       inkscape:label="circle" />
+  </g>
+</svg>
diff --git a/images/tile-ex.svg b/images/tile-ex.svg
new file mode 100644
index 0000000..1529f6c
--- /dev/null
+++ b/images/tile-ex.svg
@@ -0,0 +1,70 @@
+<?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"
+   id="svg1568"
+   version="1.1"
+   viewBox="0 0 26.458333 26.458333"
+   height="100"
+   width="100">
+  <defs>
+    <linearGradient
+       id="linearGradient5898">
+      <stop
+         style="stop-color:#c1b495;stop-opacity:1"
+         offset="0"
+         id="stop5896" />
+      <stop
+         style="stop-color:#9e906f;stop-opacity:1"
+         offset="1"
+         id="stop5894" />
+    </linearGradient>
+    <radialGradient
+       gradientTransform="matrix(1.7254491,-4.9104912e-8,5.383127e-8,1.8915239,-9.5971015,-257.22095)"
+       gradientUnits="userSpaceOnUse"
+       r="9.8552256"
+       fy="291.02457"
+       fx="13.229165"
+       cy="291.02457"
+       cx="13.229165"
+       id="radialGradient5900"
+       xlink:href="#linearGradient5898" />
+  </defs>
+  <g transform="translate(0,-270.54167)">
+    <path
+       transform="matrix(0.81746386,-0.47196298,0.47519507,0.823062,-132.56101,57.743511)"
+       d="M 28.028064,282.66339 21.029591,294.7851 H 7.0326457 L 0.03417301,282.66339 7.0326457,270.54168 H 21.029591 Z"
+       id="back-and-bottom"
+       fill="#9e9272" />
+    <path
+       transform="matrix(0.81746386,-0.47196298,0.47519507,0.823062,-132.56101,57.743511)"
+       d="M 28.028064,282.66339 21.029591,294.7851 7.0326457,270.54168 H 21.029591 Z"
+       id="top-left_right"
+       fill="#d0c6ab" />
+    <path
+       transform="matrix(0.81746386,-0.47196298,0.47519507,0.823062,-132.56101,57.743511)"
+       d="M 14.031114,282.66339 H 0.03417301 L 7.0326457,270.54168 Z"
+       id="left"
+       fill="#b4a682" />
+    <path
+       transform="matrix(0.81746386,-0.47196298,0.47519507,0.823062,-132.56101,57.743511)"
+       d="m 28.028064,282.66339 h -13.99695 l 6.998477,-12.12171 z"
+       id="top-right"
+       fill="#d7d3c1" />
+    <path
+       transform="matrix(0.74967562,-0.43282542,0.43578949,0.75480954,-120.47135,76.486841)"
+       d="m 28.343049,282.66339 -7.155965,12.3945 H 6.8751531 L -0.28081226,282.66339 6.8751531,270.2689 H 21.187084 Z"
+       id="inner"
+       fill="#ab9f7e" />
+    <circle
+       r="10.155904"
+       cy="283.77084"
+       cx="13.229166"
+       id="circle"
+       fill="url(#radialGradient5900)" />
+  </g>
+</svg>
diff --git a/images/tile.svg b/images/tile.svg
new file mode 100644
index 0000000..06b3d95
--- /dev/null
+++ b/images/tile.svg
@@ -0,0 +1,218 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<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"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="100"
+   height="100"
+   viewBox="0 0 26.458333 26.458333"
+   version="1.1"
+   id="svg1568"
+   inkscape:version="0.92.4 5da689c313, 2019-01-14"
+   sodipodi:docname="tile.svg">
+  <defs
+     id="defs1562">
+    <linearGradient
+       inkscape:collect="always"
+       id="linearGradient5898">
+      <stop
+         id="stop5896"
+         offset="0"
+         style="stop-color:#c1b495;stop-opacity:1" />
+      <stop
+         id="stop5894"
+         offset="1"
+         style="stop-color:#9e906f;stop-opacity:1" />
+    </linearGradient>
+    <radialGradient
+       inkscape:collect="always"
+       xlink:href="#linearGradient5898"
+       id="radialGradient5900"
+       cx="13.229165"
+       cy="291.02457"
+       fx="13.229165"
+       fy="291.02457"
+       r="9.8552256"
+       gradientUnits="userSpaceOnUse"
+       gradientTransform="matrix(1.7254491,-4.9104912e-8,5.383127e-8,1.8915239,-9.5971015,-257.22095)" />
+  </defs>
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0.0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="3.959798"
+     inkscape:cx="56.139713"
+     inkscape:cy="41.877659"
+     inkscape:document-units="mm"
+     inkscape:current-layer="layer1"
+     showgrid="false"
+     units="px"
+     showguides="true"
+     inkscape:guide-bbox="true"
+     inkscape:window-width="1920"
+     inkscape:window-height="1139"
+     inkscape:window-x="0"
+     inkscape:window-y="30"
+     inkscape:window-maximized="1"
+     inkscape:snap-bbox="true"
+     inkscape:snap-bbox-midpoints="true"
+     inkscape:snap-global="false">
+    <sodipodi:guide
+       position="26.458333,0"
+       orientation="1,0"
+       id="guide2138"
+       inkscape:locked="false"
+       inkscape:label=""
+       inkscape:color="rgb(0,0,255)" />
+    <sodipodi:guide
+       position="0,26.458333"
+       orientation="0,1"
+       id="guide2140"
+       inkscape:locked="false"
+       inkscape:label=""
+       inkscape:color="rgb(0,0,255)" />
+    <sodipodi:guide
+       position="0,0"
+       orientation="1,0"
+       id="guide2142"
+       inkscape:locked="false"
+       inkscape:label=""
+       inkscape:color="rgb(0,0,255)" />
+    <sodipodi:guide
+       position="0,0"
+       orientation="0,1"
+       id="guide2146"
+       inkscape:locked="false"
+       inkscape:label=""
+       inkscape:color="rgb(0,0,255)" />
+    <sodipodi:guide
+       position="0,13.229166"
+       orientation="0,1"
+       id="guide5881"
+       inkscape:locked="false"
+       inkscape:label=""
+       inkscape:color="rgb(0,0,255)" />
+    <sodipodi:guide
+       position="49.999999,0"
+       orientation="1,0"
+       id="guide5883"
+       inkscape:locked="false"
+       inkscape:label=""
+       inkscape:color="rgb(0,0,255)" />
+    <sodipodi:guide
+       position="13.229166,0"
+       orientation="1,0"
+       id="guide5885"
+       inkscape:locked="false"
+       inkscape:label=""
+       inkscape:color="rgb(0,0,255)" />
+  </sodipodi:namedview>
+  <metadata
+     id="metadata1565">
+    <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
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     transform="translate(0,-270.54167)">
+    <path
+       inkscape:label="back-and-bottom"
+       transform="matrix(0.81746386,-0.47196298,0.47519507,0.823062,-132.56101,57.743511)"
+       inkscape:transform-center-y="1.0151446e-05"
+       inkscape:transform-center-x="-2.8921192e-06"
+       d="M 28.028064,282.66339 21.029591,294.7851 H 7.0326457 L 0.03417301,282.66339 7.0326457,270.54168 H 21.029591 Z"
+       inkscape:randomized="0"
+       inkscape:rounded="0"
+       inkscape:flatsided="true"
+       sodipodi:arg2="0.52359878"
+       sodipodi:arg1="0"
+       sodipodi:r2="12.12171"
+       sodipodi:r1="13.996945"
+       sodipodi:cy="282.66339"
+       sodipodi:cx="14.031118"
+       sodipodi:sides="6"
+       id="path5873"
+       style="display:inline;opacity:1;fill:#9e9272;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0.27934605;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;paint-order:normal"
+       sodipodi:type="star"
+       sodipodi:insensitive="true" />
+    <path
+       transform="matrix(0.81746386,-0.47196298,0.47519507,0.823062,-132.56101,57.743511)"
+       style="display:inline;opacity:1;fill:#d0c6ab;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0.27934605;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;paint-order:normal"
+       inkscape:transform-center-x="-2.8921192e-06"
+       inkscape:transform-center-y="1.0151446e-05"
+       d="M 28.028064,282.66339 21.029591,294.7851 7.0326457,270.54168 H 21.029591 Z"
+       id="path5887"
+       inkscape:connector-curvature="0"
+       sodipodi:nodetypes="ccccc"
+       inkscape:label="top-left_right"
+       sodipodi:insensitive="true" />
+    <path
+       transform="matrix(0.81746386,-0.47196298,0.47519507,0.823062,-132.56101,57.743511)"
+       style="display:inline;opacity:1;fill:#b4a682;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0.27934605;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;paint-order:normal"
+       inkscape:transform-center-x="-2.8921192e-06"
+       inkscape:transform-center-y="1.0151446e-05"
+       d="M 14.031114,282.66339 H 0.03417301 L 7.0326457,270.54168 Z"
+       id="path5878"
+       inkscape:connector-curvature="0"
+       inkscape:label="left"
+       sodipodi:nodetypes="cccc"
+       sodipodi:insensitive="true" />
+    <path
+       inkscape:label="top-right"
+       sodipodi:nodetypes="cccc"
+       inkscape:connector-curvature="0"
+       id="path5892"
+       d="m 28.028064,282.66339 h -13.99695 l 6.998477,-12.12171 z"
+       inkscape:transform-center-y="1.0151446e-05"
+       inkscape:transform-center-x="-2.8921192e-06"
+       style="display:inline;opacity:1;fill:#d7d3c1;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0.27934605;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;paint-order:normal"
+       transform="matrix(0.81746386,-0.47196298,0.47519507,0.823062,-132.56101,57.743511)"
+       sodipodi:insensitive="true" />
+    <path
+       sodipodi:type="star"
+       style="display:inline;opacity:1;fill:#ab9f7e;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0.30460548;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;paint-order:normal"
+       id="path2134"
+       sodipodi:sides="6"
+       sodipodi:cx="14.031118"
+       sodipodi:cy="282.66339"
+       sodipodi:r1="14.311931"
+       sodipodi:r2="12.12171"
+       sodipodi:arg1="0"
+       sodipodi:arg2="0.52359878"
+       inkscape:flatsided="true"
+       inkscape:rounded="0"
+       inkscape:randomized="0"
+       d="m 28.343049,282.66339 -7.155965,12.3945 H 6.8751531 L -0.28081226,282.66339 6.8751531,270.2689 H 21.187084 Z"
+       inkscape:transform-center-x="-3.2154621e-06"
+       inkscape:transform-center-y="1.0948642e-05"
+       transform="matrix(0.74967562,-0.43282542,0.43578949,0.75480954,-120.47135,76.486841)"
+       inkscape:label="inner"
+       sodipodi:insensitive="true" />
+    <circle
+       style="opacity:1;fill:url(#radialGradient5900);fill-opacity:1;fill-rule:nonzero;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="path5890"
+       cx="13.229166"
+       cy="283.77084"
+       r="10.155904"
+       inkscape:label="circle" />
+  </g>
+</svg>
diff --git a/index.html b/index.html
index 28423bc..ce237f8 100644
--- a/index.html
+++ b/index.html
@@ -17,11 +17,11 @@
          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 id="linGradSlotBg">
+                <stop style="stop-color:#c1b495;stop-opacity:1" offset="0" />
+                <stop style="stop-color:#9e906f;stop-opacity:1" offset="1" />
             </linearGradient>
-            <filter id="filterDropshadow" width="300" height="300">
+            <filter id="filterDropshadow" x="-10" y="-10" width="300" height="300">
                 <feGaussianBlur stdDeviation="5"/>
             </filter>
             <linearGradient id="linGradOrbDark">
@@ -55,9 +55,17 @@
                     gradientUnits="userSpaceOnUse"
                     r="50" fy="19" fx="0" cy="19" cx="0"
                     xlink:href="#linGradOrbDark"/>
+            <radialGradient
+                    gradientTransform="matrix(1.7254491,-4.9104912e-8,5.383127e-8,1.8915239,-9.5971015,-257.22095)"
+                    gradientUnits="userSpaceOnUse"
+                    r="9.8552256" fy="291.02457" fx="13.229165" cy="291.02457" cx="13.229165"
+                    id="radGradSlotBg"
+                    xlink:href="#linGradSlotBg" />
         </defs>
-        <g id="boardbg"></g>
-        <g id="orbs"></g>
+        <g id="root">
+            <g id="boardbg"></g>
+            <g id="orbs"></g>
+        </g>
     </svg>
     <div id="menu">
         <a id="new-game" href=""></a>
diff --git a/script.js b/script.js
index 0f301ec..c4a7024 100644
--- a/script.js
+++ b/script.js
@@ -1,70 +1,80 @@
 class Svg {
-  static makeNode(n, v=null) {
-    n = document.createElementNS("http://www.w3.org/2000/svg", n);
-    if (v) {
-      for (let p in v) {
-        if (v.hasOwnProperty(p)) {
-          n.setAttributeNS(null, p, v[p]);
+  /**
+   * Build a node from XML
+   *
+   * @param {String} code
+   * @param {String|null} wrapper - wrapper element, by default no wrapper.
+   * @param {Object|null} wrapperOpts - opts to add to the wrapper
+   * @returns {Node}
+   */
+  static fromXML(code, wrapper = null, wrapperOpts = null) {
+    let n = document.createElementNS("http://www.w3.org/2000/svg", wrapper || 'g');
+
+    if (wrapperOpts) {
+      for (let p in wrapperOpts) {
+        if (wrapperOpts.hasOwnProperty(p)) {
+          n.setAttribute(p, wrapperOpts[p]);
         }
       }
     }
-    return n
+
+    n.innerHTML = code.trim();
+    if (wrapper === null) {
+      return n.childNodes[0];
+    } else {
+      return n;
+    }
+  }
+
+  /**
+   * Build a node from XML, wrapped in `<g>`
+   *
+   * @param {String} code
+   * @param {Object|null} wrapperOpts - opts to add to the wrapper
+   * @returns {Node}
+   */
+  static fromXMLg(code, wrapperOpts = null) {
+    return Svg.fromXML(code, 'g', wrapperOpts);
   }
 }
 
+/**
+ * Game board
+ *
+ * Orb grid coordinates:
+ *   x - grid X coordinate (counted from the left edge of a triangle starting in the top left corner)
+ *   y - grid Y coordinate (row)
+ */
 class Board {
   constructor() {
-    this.$boardbg = document.getElementById('boardbg');
+    this.$bg = document.getElementById('boardbg');
     this.$orbs = document.getElementById('orbs');
     this.$svg = document.getElementById('board');
+    this.$root = document.getElementById('root');
 
-    this.initOrb();
-    this.initGlyphs();
-    this.initCell();
-
-    // background
-    const { rx, ry } = this.xyToCoord(5, 5);
-    let polygon = Svg.makeNode("polygon", {
-      points: "43,-25 0,-50 -43,-25 -43,25 0,50 43,25",
-      transform: "translate("+rx+","+ry+"),scale(10.7),rotate(30)",
-      fill: '#7e6c56', //'#AE9B79'
-    });
-    this.$boardbg.appendChild(polygon);
-
-    // build the board
+    this.TILE_W = 91;
+    this.TILE_H = 79;
+    this.SCREEN_PAD = 20;
 
-    this.buf0 = [];
-    this.buf1 = [];
+    // Orb grid
+    this.gameGrid = {};
 
-    for (let y = 0; y < 6; y++) {
-      for (let x = 0; x < 6 + y; x++) {
-        this.placeCell(x, y);
-      }
-    }
-    for (let y = 0; y < 5; y++) {
-      for (let x = 0; x < 10 - y; x++) {
-        this.placeCell(x+y+1, 6+y);
-      }
-    }
-
-    this.buf0.forEach((elem) => {
-      this.$boardbg.appendChild(elem);
-    });
+    this.initOrb();
+    this.initGlyphs();
+    this.initTile();
 
-    this.buf1.forEach((elem) => {
-      this.$boardbg.appendChild(elem);
-    });
+    this.buildBackground();
 
-    this.buf0 = [];
-    this.buf1 = [];
+    this.initAutoScaling();
 
+    // XXX test content
     let o;
 
     this.placeOrb(0, 0, 'salt');
     this.placeOrb(1, 0, 'air');
     this.placeOrb(2, 0, 'fire');
     o = this.placeOrb(3, 0, 'water');
-    o.classList.add('selected');
+    o.node.classList.add('selected');
     this.placeOrb(4, 0, 'earth');
     this.placeOrb(5, 0, 'mercury');
     this.placeOrb(0, 1, 'lead');
@@ -77,200 +87,344 @@ class Board {
     this.placeOrb(0, 2, 'mors');
 
     o = this.placeOrb(1, 2, 'copper');
-    o.classList.add('disabled');
+    o.node.classList.add('disabled');
 
     o = this.placeOrb(2, 2, 'copper');
-    o.classList.add('disabled');
-    o.classList.add('highlight');
+    o.node.classList.add('disabled');
+
+    this.highlight('copper');
+  }
+
+  /**
+   * Resize to window and set up window resize event handler.
+   */
+  initAutoScaling() {
+    this.rescaleTimeout = null;
+    window.addEventListener('resize', () => {
+      console.log('window resize');
+      if (this.rescaleTimeout === null) {
+        this.rescaleTimeout = setTimeout(() => this.rescaleCanvas(), 60)
+      }
+    });
+
+    this.rescaleCanvas();
+  }
 
-    o = this.placeOrb(3, 2, 'copper');
-    o.classList.add('highlight');
+  /**
+   * Resize to current window size
+   */
+  rescaleCanvas() {
+    let w = window.innerWidth;
+    let h = window.innerHeight;
+    const pad = this.SCREEN_PAD;
+    let scaleX = w / (1066 + pad * 2);
+    let scaleY = h / (926 + pad * 2);
+    let scale = Math.min(scaleX, scaleY);
+    this.$root.setAttribute('transform', `translate(${w / 2},${h / 2}) scale(${scale})`)
+
+    this.rescaleTimeout = null;
   }
 
-  highlight(symbol=null) {
+  /**
+   * Highlight a symbol. All other highlights are removed.
+   *
+   * @param {String|null} symbol - symbol to highlight, null to hide highlights
+   */
+  highlight(symbol = null) {
+    this.$svg.setAttribute('class', '');
+
     if (symbol !== null) {
-      //this.$svg
+      this.$svg.classList.add(`highlight-${symbol}`);
     }
   }
 
-  xyToIndex(x, y) {
+  /**
+   * Convert grid coordinates to gameGrid array index
+   *
+   * @param x
+   * @param y
+   * @returns {Number}
+   */
+  gridXyToArrayIndex(x, y) {
     return y * 11 + x
   }
 
-  xyToCoord(x, y) {
-    const gap = 6;
-    const xstep = 86+gap;
-    const ystep = 75+gap;
-    const xbase = (this.$svg.getAttribute('width') - 5.5 * ystep - gap*2) / 2;
-    const ybase = (this.$svg.getAttribute('height') - 10 * ystep - gap*2) / 2;
-
-    let rx = xbase + xstep * x - y*Math.floor(xstep/2);
-    let ry = ybase + ystep * y;
+  /**
+   * Convert grid coordinates to graphic coordinates
+   *
+   * @param x
+   * @param y
+   * @returns {{rx: number, ry: number}}
+   */
+  gridXyToCoord(x, y) {
+    let rx = this.TILE_W * (-2.5 + x - y * 0.5);
+    let ry = this.TILE_H * (-5 + y);
+    return {rx, ry};
+  }
 
-    return { rx, ry }
+  /**
+   * Remove an orb from the grid at the given coordinates.
+   *
+   * @param x - board X
+   * @param y - board Y
+   */
+  removeOrb(x, y) {
+    const arrayIndex = this.gridXyToArrayIndex(x, y);
+    if (this.gameGrid[arrayIndex]) {
+      this.$orbs.removeChild(this.gameGrid[arrayIndex].node);
+      this.gameGrid[arrayIndex] = null;
+    }
   }
 
+  /**
+   * Place an orb on the grid
+   *
+   * @param x - board X
+   * @param y - board Y
+   * @param symbol - alchemical symbol name
+   * @returns {object} - orb object
+   */
   placeOrb(x, y, symbol) {
-    const { rx, ry } = this.xyToCoord(x, y);
+    const {rx, ry} = this.gridXyToCoord(x, y);
+
+    this.removeOrb(x, y);
 
     let template;
     if (this.metals.includes(symbol)) {
-      template = this.metallicOrbNode;
+      template = this.metallicOrbTpl;
     } else {
-      template = this.orbNode;
+      template = this.orbTpl;
     }
 
     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.symbolNodes[symbol].cloneNode(true));
+    o.setAttribute('transform', `translate(${rx},${ry})`);
+    o.querySelector('.orb-fill')
+      .setAttribute('fill', this.orbColors[symbol]);
+    o.appendChild(this.symbolTpls[symbol].cloneNode(true));
 
     this.$orbs.appendChild(o);
-    return o;
+
+    const arrayIndex = this.gridXyToArrayIndex(x, y);
+
+    let object = {
+      node: o,
+      symbol
+    };
+
+    this.gameGrid[arrayIndex] = object;
+    return object;
+  }
+
+  /**
+   * Build board background
+   */
+  buildBackground() {
+    // Background hexagon
+    let polygon = Svg.fromXML(`
+      <polygon 
+        points="43,-25 0,-50 -43,-25 -43,25 0,50 43,25"
+        transform="translate(0,0) scale(10.7) rotate(30)"
+        fill="#7e6c56" />
+    `);
+    this.$bg.appendChild(polygon);
+
+    // -- Tile grid --
+
+    // Grid is built in two passes - shadows must be placed first
+    this.buf0 = [];
+    this.buf1 = [];
+
+    for (let y = 0; y < 6; y++) {
+      for (let x = 0; x < 6 + y; x++) {
+        this.placeTile(x, y);
+      }
+    }
+
+    for (let y = 0; y < 5; y++) {
+      for (let x = 0; x < 10 - y; x++) {
+        this.placeTile(x + y + 1, 6 + y);
+      }
+    }
+
+    this.buf0.forEach((elem) => {
+      this.$bg.appendChild(elem);
+    });
+
+    this.buf1.forEach((elem) => {
+      this.$bg.appendChild(elem);
+    });
+
+    delete this.buf0;
+    delete this.buf1;
   }
 
+  /**
+   * Init the orb template
+   */
   initOrb() {
-    this.orbNode = Svg.makeNode("g", {
-      "class": "orb",
+    this.orbTpl = Svg.fromXMLg(`
+      <g transform="scale(0.75)">
+        <circle
+           r="50" cy="5" cx="0"
+           fill="black"
+           class="orb-shadow"
+           filter="url('#filterDropshadow')"
+           opacity="1"
+           fill-opacity="0.7" />
+        <circle
+           r="55" cy="2" cx="0"
+           fill="white"
+           class="orb-glow"
+           opacity="0"
+           filter="url('#filterDropshadow')" />
+        <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"
+           fill="url(#radGradOrbDark)" />
+        <ellipse
+           cx="0" cy="36.5" rx="28" ry="13"
+           fill="url(#radGradOrbBottom)" />
+        <ellipse 
+           ry="24" rx="35" cy="-23" cx="0"
+           fill="url(#radGradOrbTop)" />
+      </g>
+    `, {
+      'class': 'orb',
     });
-    this.orbNode.innerHTML = `
-      <circle
-         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"
-         fill="url(#radGradOrbDark)" />
-      <ellipse
-         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)">
+
+    let metallicEffect = Svg.fromXML(`
+      <g fill-opacity="0.3" transform="translate(-3,0) scale(0.75)">
         <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);
+    this.metallicOrbTpl = this.orbTpl.cloneNode(true);
+    this.metallicOrbTpl.appendChild(metallicEffect);
   }
 
-  initCell() {
-    this.tileShadow = Svg.makeNode("polygon", {
-      'points': "43,-25 0,-50 -43,-25 -43,25 0,50 43,25",
-      // 'transform': `scale(1.1)`,
-      'fill': '#000000',
-      'filter': "url('#filterDropshadow')",
-    });
-
-    let tile = Svg.makeNode("g");
-    const bdr = 5;
-
-    tile.appendChild(Svg.makeNode("polygon", {
-      'points': "43,-25 0,-50 -43,-25 -43,25 0,50 43,25",
-      'fill': '#C8B898',
-    }));
-
-    tile.appendChild(Svg.makeNode("polyline", {
-      'points': "-43,-24 -43,24",
-      'stroke': '#B6A986',
-      'stroke-width': bdr,
-      'fill': 'transparent',
-      'stroke-linecap': 'square',
-    }));
-
-    tile.appendChild(Svg.makeNode("polyline", {
-      'points': "-42,25 0,50 42,25",
-      'stroke': '#9E906D',
-      'stroke-width': bdr,
-      'fill': 'transparent',
-      'stroke-linecap': 'square',
-    }));
-
-    tile.appendChild(Svg.makeNode("polyline", {
-      'points': "43,25 43,-25 0,-50 -43,-25",
-      'stroke': '#CCC3AA',
-      'stroke-width': bdr,
-      'fill': 'transparent',
-      'stroke-linecap': 'none',
-    }));
-
-    tile.appendChild(Svg.makeNode("ellipse", {
-      'cx': 0,
-      'cy': 0,
-      'rx': 39,
-      'ry': 39,
-      'fill': 'url(#linGradSlotBg)',
-    }));
-
-    this.tile = tile;
+  /**
+   * Init the tile template
+   */
+  initTile() {
+    const offsetX = -13.25;
+    const offsetY = -283.75;
+    const scale = 3.9;
+    const scaleShadow = scale + 0.1;
+
+    this.tileShadowTpl = Svg.fromXMLg(`
+      <g transform="scale(${scaleShadow}) translate(${offsetX},${offsetY})">    
+        <path
+           transform="matrix(0.81746386,-0.47196298,0.47519507,0.823062,-132.56101,57.743511)"
+           d="M 28.028064,282.66339 21.029591,294.7851 H 7.0326457 L 0.03417301,282.66339 7.0326457,270.54168 H 21.029591 Z"
+           fill="#000000"
+           fill-opacity="0.6"
+           filter="url('#filterDropshadow')" />
+      </g>
+    `);
+
+
+    /*
+      paths:
+        back-and-bottom
+        top-left_right
+        left
+        top-right
+        inner
+        circle
+    */
+    this.tileTpl = Svg.fromXMLg(`
+      <g transform="scale(${scale}) translate(${offsetX},${offsetY})">
+        <path
+           transform="matrix(0.81746386,-0.47196298,0.47519507,0.823062,-132.56101,57.743511)"
+           d="M 28.028064,282.66339 21.029591,294.7851 H 7.0326457 L 0.03417301,282.66339 7.0326457,270.54168 H 21.029591 Z"
+           fill="#9e9272" />
+        <path
+           transform="matrix(0.81746386,-0.47196298,0.47519507,0.823062,-132.56101,57.743511)"
+           d="M 28.028064,282.66339 21.029591,294.7851 7.0326457,270.54168 H 21.029591 Z"
+           fill="#d0c6ab" />
+        <path
+           transform="matrix(0.81746386,-0.47196298,0.47519507,0.823062,-132.56101,57.743511)"
+           d="M 14.031114,282.66339 H 0.03417301 L 7.0326457,270.54168 Z"
+           fill="#b4a682" />
+        <path
+           transform="matrix(0.81746386,-0.47196298,0.47519507,0.823062,-132.56101,57.743511)"
+           d="m 28.028064,282.66339 h -13.99695 l 6.998477,-12.12171 z"
+           fill="#d7d3c1" />
+        <path
+           transform="matrix(0.74967562,-0.43282542,0.43578949,0.75480954,-120.47135,76.486841)"
+           d="m 28.343049,282.66339 -7.155965,12.3945 H 6.8751531 L -0.28081226,282.66339 6.8751531,270.2689 H 21.187084 Z"
+           fill="#ab9f7e" />
+        <circle
+           r="10.155904"
+           cy="283.77084"
+           cx="13.229166"
+           fill="url(#radGradSlotBg)" />
+      </g>
+    `);
   }
 
-  placeCell(x, y) {
-    const { rx, ry } = this.xyToCoord(x, y);
+  /**
+   * Add a board tile to the image.
+   *
+   * @param x
+   * @param y
+   */
+  placeTile(x, y) {
+    const {rx, ry} = this.gridXyToCoord(x, y);
+
+    /*
+    // Debug circle
+    this.$svg.appendChild(Svg.makeNode('circle', {
+      r: this.TILE_W/2,
+      cy: ry, cx: rx,
+      fill: 'none',
+      stroke: 'black',
+      'stroke-width': 2,
+    }));
+    */
 
-    let polygon_shadow = this.tileShadow.cloneNode(true);
-    polygon_shadow.setAttributeNS(null, 'transform', `translate(${rx},${ry}),scale(1.1)`);
+    let polygon_shadow = this.tileShadowTpl.cloneNode(true);
+    polygon_shadow.setAttribute('transform', `translate(${rx},${ry}),scale(1.1)`);
     this.buf0.push(polygon_shadow);
 
-    let tile = this.tile.cloneNode(true);
-    tile.setAttributeNS(null, 'transform', `translate(${rx},${ry})`);
+    let tile = this.tileTpl.cloneNode(true);
+    tile.setAttribute('transform', `translate(${rx},${ry})`);
     this.buf1.push(tile);
   }
 
+  /**
+   * Init the orb glyph templates
+   */
   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 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',
@@ -284,11 +438,11 @@ class Board {
       copper: 'm 13.229167,276.61943 c -2.112981,-0.0765 -4.0685271,1.78337 -4.04295,3.90894 -0.1277359,1.92476 1.447325,3.68809 3.331873,3.93182 2.025344,0.379 4.29148,-0.9459 4.680309,-3.02816 0.350755,-1.61444 -0.419466,-3.36035 -1.832442,-4.20966 -0.633357,-0.40672 -1.386458,-0.60708 -2.13679,-0.60294 z m -4.1567215,8.05748 c -2.3050816,-2.02524 -2.2795847,-5.96633 -0.1160579,-8.08364 2.0292494,-2.23826 5.8431584,-2.42533 8.0888084,-0.41068 1.604759,1.29217 2.357262,3.46519 1.988157,5.48009 -0.363367,2.37123 -2.511902,4.28305 -4.882744,4.48852 0,0.90097 0,1.80194 0,2.70291 0.928266,0 1.856531,0 2.784797,0 0,0.42318 0,0.84635 0,1.26953 -0.928266,0 -1.856531,0 -2.784797,0 0,0.87708 0,1.75415 0,2.63123 -0.614294,0 -1.228589,0 -1.842883,0 0,-0.87708 0,-1.75415 0,-2.63123 -0.928266,0 -1.856532,0 -2.7847978,0 0,-0.42318 0,-0.84635 0,-1.26953 0.9282658,0 1.8565318,0 2.7847978,0 0,-0.90438 0,-1.80876 0,-2.71314 -1.207048,-0.10173 -2.3584982,-0.63012 -3.2352805,-1.46406 z',
       silver: 'm 9.9755063,275.73179 c -0.6014253,0.18082 -1.8508344,-0.12736 -1.9078968,0.74722 0.1176844,0.4442 0.7067667,0.30018 1.0195284,0.4996 2.4102181,0.84689 4.3760261,3.03219 4.6611691,5.61268 0.329015,2.2322 -0.292857,4.61262 -1.845188,6.27899 -0.950816,1.0625 -2.3118271,1.60982 -3.6314341,2.04088 -0.3010461,0.22955 -0.1186419,0.78 0.2735733,0.75652 2.3443258,0.46012 4.8961488,-0.14011 6.7090618,-1.72152 1.916707,-1.49245 3.236515,-3.83656 3.14282,-6.30499 -0.01445,-1.96756 -0.864897,-3.88727 -2.285751,-5.24448 -1.577433,-1.67996 -3.811286,-2.7316 -6.1358827,-2.6649 z m 2.7602927,2.03153 c 1.072404,0.39734 1.870102,1.27809 2.623097,2.10375 1.308542,1.47534 1.847166,3.59612 1.292761,5.50102 -0.534285,1.8245 -1.854209,3.45004 -3.574828,4.26864 -0.191682,0.0234 0.647922,-0.682 0.817217,-1.00958 1.833102,-2.3961 2.027928,-5.83879 0.732872,-8.5234 -0.452679,-0.90448 -1.108696,-1.7015 -1.891119,-2.34043 z',
       gold: 'm 13.219492,275.7189 c -2.986621,0.01 -5.9729442,1.75519 -7.2157492,4.51399 -1.4447671,2.86838 -0.9743467,6.60206 1.2502049,8.94534 1.6486642,1.87365 4.2016723,2.85934 6.6817843,2.61607 3.746213,-0.22926 7.026658,-3.46775 7.307955,-7.20938 0.345627,-3.27431 -1.477563,-6.74322 -4.539965,-8.07025 -1.086444,-0.51129 -2.281439,-0.79866 -3.48423,-0.79577 z m 0,1.55427 c 2.485623,0.002 4.974789,1.48839 5.934079,3.82276 1.125698,2.44571 0.57943,5.58664 -1.449826,7.40023 -2.35696,2.37064 -6.611547,2.37064 -8.9685065,0 -2.1169053,-1.88824 -2.608931,-5.21179 -1.3089579,-7.69696 1.0280707,-2.17935 3.4218714,-3.51551 5.7932114,-3.52603 z m 0.0066,4.19203 c -1.370356,-0.0494 -2.523547,1.30386 -2.277873,2.64791 0.150011,1.3618 1.658854,2.29772 2.951679,1.86852 1.391568,-0.36367 2.080533,-2.14843 1.33192,-3.36846 -0.389128,-0.716 -1.20151,-1.14581 -2.005726,-1.14797 z',
-      vitae: 'm 11.975898,274.8189 0.358077,0.35808 v 2.86461 H 9.4693607 v 1.79038 h 2.8646143 v 3.93885 H 6.9628227 l 6.4453823,8.95192 6.087306,-8.95192 H 14.12436 v -3.93885 h 2.864613 v -1.79038 H 14.12436 v -2.86461 l 0.358076,-0.35808 z m -1.790384,10.38422 h 6.445383 l -3.222692,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',
+      vitae: 'm 11.975898,274.8189 0.358077,0.35808 v 2.86461 H 9.4693607 v 1.79038 h 2.8646143 v 3.93885 H 6.9628227 l 6.4453823,8.95192 6.087306,-8.95192 H 14.12436 v -3.93885 h 2.864613 v -1.79038 H 14.12436 v -2.86461 l 0.358076,-0.35808 z m -1.790384,10.38422 h 6.445383 l -3.222692,4.65501 z',
     };
 
-    this.metals = [ 'mercury', 'lead', 'tin', 'iron', 'copper', 'silver', 'gold' ];
+    this.metals = ['mercury', 'lead', 'tin', 'iron', 'copper', 'silver', 'gold'];
 
     this.orbColors = {
       salt: '#f2e7b4',
@@ -306,24 +460,31 @@ class Board {
       silver: '#cfcac3',
       gold: '#ffba50',
 
+      mors: '#433c29',
       vitae: '#F5A79E',
-      mort: '#433c29',
     };
 
-    this.symbolNodes = {};
+    this.symbolTpls = {};
 
     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)",
-          fill: 'white',
-        })
+        this.symbolTpls[s] = Svg.fromXMLg(`
+            <path
+              d="${path}"
+              transform="scale(2) translate(-13,-283.5)"
+              stroke="black"
+              stroke-width="2"
+              stroke-opacity="0.3"
+              paint-order="stroke"
+              fill="white"
+            />
+        `);
       }
     }
   }
 }
 
-new Board();
+/* Start */
+
+window.board = new Board();
diff --git a/style.css b/style.css
index af15cab..6c61787 100644
--- a/style.css
+++ b/style.css
@@ -7,29 +7,35 @@ html,body {
 	color:white;
 }
 
+#wrap {
+	position: absolute;
+	left: 0; top: 0; right: 0; bottom: 0;
+	overflow: hidden;
+}
+
 #board {
-	border: 1px dotted white;
+	height: 100%;
+	width: 100%;
 }
 
-.orb.disabled {
+.disabled .orb {
 	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 {
+.highlight-salt .element-salt .orb-fill,
+.highlight-air .element-air .orb-fill,
+.highlight-fire .element-fire .orb-fill,
+.highlight-water .element-water .orb-fill,
+.highlight-earth .element-earth .orb-fill,
+.highlight-mercury .element-mercury .orb-fill,
+.highlight-lead .element-lead .orb-fill,
+.highlight-tin .element-tin .orb-fill,
+.highlight-iron .element-iron .orb-fill,
+.highlight-copper .element-copper .orb-fill,
+.highlight-silver .element-silver .orb-fill,
+.highlight-gold .element-gold .orb-fill,
+.highlight-vitae .element-vitae .orb-fill,
+.highlight-mors .element-mors .orb-fill {
 	stroke: yellow;
 	stroke-width: 7px;
 }
@@ -37,21 +43,30 @@ html,body {
 .orb.disabled .orb-glow,
 .orb.disabled .orb-shadow,
 .orb.disabled:hover .orb-glow,
-.orb.disabled:hover .orb-shadow{
-	fill-opacity: 0;
+.orb.disabled:hover .orb-shadow {
+	opacity: 0;
+}
+
+.orb {
+	cursor: pointer;
+}
+
+.orb.disabled {
+	cursor: default;
+	opacity: 0.6;
 }
 
-.orb .orb-glow,
-.orb .orb-shadow {
-	transition: fill-opacity linear 0.2s;
+.orb-glow,
+.orb-shadow {
+	transition: opacity linear 0.2s;
 }
 
-.orb:hover .orb-glow,
-.orb.selected .orb-glow {
-	fill-opacity: 1;
+.orb.selected .orb-glow,
+.orb:hover .orb-glow  {
+	opacity: 1;
 }
 
-.orb:hover .orb-shadow,
-.orb.selected .orb-shadow {
-	fill-opacity: 0;
+.orb.selected .orb-shadow,
+.orb:hover .orb-shadow {
+	opacity: 0;
 }