commit 1fc4298d1282233dc3d38653e652a97a358cb0ea
Author: Ondřej Hruška <ondra@ondrovo.com>
Date:   Fri Dec 6 00:31:20 2019 +0100

    initial

diff --git a/.idea/$CACHE_FILE$ b/.idea/$CACHE_FILE$
new file mode 100644
index 0000000..6cb8985
--- /dev/null
+++ b/.idea/$CACHE_FILE$
@@ -0,0 +1,6 @@
+<?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/encodings.xml b/.idea/encodings.xml
new file mode 100644
index 0000000..97626ba
--- /dev/null
+++ b/.idea/encodings.xml
@@ -0,0 +1,6 @@
+<?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
new file mode 100644
index 0000000..28a804d
--- /dev/null
+++ b/.idea/misc.xml
@@ -0,0 +1,6 @@
+<?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
new file mode 100644
index 0000000..368536a
--- /dev/null
+++ b/.idea/modules.xml
@@ -0,0 +1,8 @@
+<?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
new file mode 100644
index 0000000..2de3486
--- /dev/null
+++ b/.idea/php.xml
@@ -0,0 +1,13 @@
+<?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
new file mode 100644
index 0000000..c956989
--- /dev/null
+++ b/.idea/sigmar.iml
@@ -0,0 +1,8 @@
+<?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/workspace.xml b/.idea/workspace.xml
new file mode 100644
index 0000000..f1c9c69
--- /dev/null
+++ b/.idea/workspace.xml
@@ -0,0 +1,83 @@
+<?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="" />
+    <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="FileTemplateManagerImpl">
+    <option name="RECENT_TEMPLATES">
+      <list>
+        <option value="HTML File" />
+        <option value="JavaScript File" />
+      </list>
+    </option>
+  </component>
+  <component name="ProjectId" id="1Ua2xmATC20JV9v8YJ5ClMc5t93" />
+  <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="WebServerToolWindowFactoryState" value="false" />
+    <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="configurable.group.appearance" />
+  </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="8033000" />
+    </task>
+    <servers />
+  </component>
+  <component name="TypeScriptGeneratedFilesManager">
+    <option name="version" value="1" />
+  </component>
+  <component name="WindowStateProjectService">
+    <state x="478" y="205" key="com.intellij.openapi.editor.actions.MultiplePasteAction$ClipboardContentChooser" timestamp="1575587621420">
+      <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="1575587621420" />
+    <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="1575588579111">
+      <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="1575588579111" />
+  </component>
+</project>
\ No newline at end of file
diff --git a/Screenshot_20191205_222216.png b/Screenshot_20191205_222216.png
new file mode 100644
index 0000000..1b51d35
Binary files /dev/null and b/Screenshot_20191205_222216.png differ
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..4a7d93c
--- /dev/null
+++ b/index.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+	<meta charset="UTF-8">
+	<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" id="board">
+		<defs>
+			<linearGradient id="slotbg" x1="0" x2="0" y1="0" y2="1">
+				<stop offset="0%" stop-color="#A49472"/>
+				<stop offset="100%" stop-color="#C6B491"/>
+			</linearGradient>
+			<filter id="dropshadow" x="-10" y="-10" width="300" height="300">
+				<feGaussianBlur stdDeviation="5"/>
+			</filter>
+		</defs>
+	</svg>
+	<div id="menu">
+		<a id="new-game" href=""></a>
+		<div id="counts">
+
+		</div>
+	</div>
+</div>
+<script type="module" src="script.js"></script>
+</body>
+</html>
diff --git a/script.js b/script.js
new file mode 100644
index 0000000..f93458d
--- /dev/null
+++ b/script.js
@@ -0,0 +1,121 @@
+import Svg from "./svg.js"
+
+class Board {
+  constructor() {
+    this.$board = document.getElementById('board');
+    // this.cells = [];
+
+    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.$board.appendChild(polygon);
+
+    this.buf0 = [];
+    this.buf1 = [];
+
+    for (let y = 0; y < 6; y++) {
+      for (let x = 0; x < 6 + y; x++) {
+        this.makeCell(x, y);
+      }
+    }
+    for (let y = 0; y < 5; y++) {
+      for (let x = 0; x < 10 - y; x++) {
+        this.makeCell(x+y+1, 6+y);
+      }
+    }
+
+    this.buf0.forEach((elem) => {
+      this.$board.appendChild(elem);
+    });
+
+    this.buf1.forEach((elem) => {
+      this.$board.appendChild(elem);
+    });
+  }
+
+  xyToIndex(x, y) {
+    return y * 11 + x
+  }
+
+  xyToCoord(x, y) {
+    const gap = 6;
+    const xstep = 86+gap;
+    const ystep = 75+gap;
+    const xbase = 300;
+    const ybase = 60;
+
+    let rx = xbase + xstep * x - y*Math.floor(xstep/2);
+    let ry = ybase + ystep * y;
+
+    return { rx, ry }
+  }
+
+  makeCell(x, y, color='gray') {
+    const bdr = 5;
+    const idx = this.xyToIndex(x, y);
+    const { rx, ry } = this.xyToCoord(x, y);
+
+    let polygon_shadow = Svg.makeNode("polygon", {
+      'points': "43,-25 0,-50 -43,-25 -43,25 0,50 43,25",
+      'transform': "translate("+rx+","+ry+"),scale(1.1)",
+      'fill': '#000000',
+      'filter': "url('#dropshadow')",
+    });
+
+    let polygon = Svg.makeNode("polygon", {
+      'points': "43,-25 0,-50 -43,-25 -43,25 0,50 43,25",
+      'transform': "translate("+rx+","+ry+")",
+      'fill': '#C8B898',
+    });
+
+    let left_line = Svg.makeNode("polyline", {
+      'points': "-43,-25 -43,25",
+      'transform': "translate("+rx+","+ry+")",
+      'stroke': '#B6A986',
+      'stroke-width': bdr,
+      'fill': 'transparent',
+      'stroke-linecap': 'square',
+    });
+
+    let bottom_line = Svg.makeNode("polyline", {
+      'points': "-43,25 0,50 43,25",
+      'transform': "translate("+rx+","+ry+")",
+      'stroke': '#9E906D',
+      'stroke-width': bdr,
+      'fill': 'transparent',
+      'stroke-linecap': 'square',
+    });
+
+    let up_line = Svg.makeNode("polyline", {
+      'points': "43,25 43,-25 0,-50 -43,-25",
+      'transform': "translate("+rx+","+ry+")",
+      'stroke': '#CCC3AA',
+      'stroke-width': bdr,
+      'fill': 'transparent',
+      'stroke-linecap': 'none',
+    });
+
+    let circle = Svg.makeNode("ellipse", {
+      'transform': "translate("+rx+","+ry+")",
+      'cx': 0,
+      'cy': 0,
+      'rx': 39,
+      'ry': 39,
+      'fill': 'url(#slotbg)',
+    });
+
+    // this.cells[idx] = polygon;
+    this.buf0.push(polygon_shadow);
+    this.buf1.push(polygon);
+    this.buf1.push(left_line);
+    this.buf1.push(bottom_line);
+    this.buf1.push(up_line);
+    this.buf1.push(circle);
+    return polygon;
+  }
+}
+
+new Board();
diff --git a/style.css b/style.css
new file mode 100644
index 0000000..dd7b5db
--- /dev/null
+++ b/style.css
@@ -0,0 +1,12 @@
+*,*:before,*:after {
+	box-sizing: border-box;
+}
+
+html,body {
+	background:black;
+	color:white;
+}
+
+#board {
+	border: 1px solid white;
+}
diff --git a/svg.js b/svg.js
new file mode 100644
index 0000000..cde9817
--- /dev/null
+++ b/svg.js
@@ -0,0 +1,13 @@
+export default 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]);
+        }
+      }
+    }
+    return n
+  }
+}