From 2a8a94c9e539319c76c0a72967b39f2e7e7b279e Mon Sep 17 00:00:00 2001
From: Benjamin Auder <benjamin.auder@somewhere>
Date: Mon, 9 Mar 2020 21:31:59 +0100
Subject: [PATCH] Small fixes + early draft of Eightpieces variant

---
 .../public/images/pieces/Eightpieces/bj.svg   |  91 ++++++++++++++++
 .../public/images/pieces/Eightpieces/bl_e.svg |  96 +++++++++++++++++
 .../public/images/pieces/Eightpieces/bl_n.svg |  96 +++++++++++++++++
 .../images/pieces/Eightpieces/bl_ne.svg       |  96 +++++++++++++++++
 .../images/pieces/Eightpieces/bl_nw.svg       |  91 ++++++++++++++++
 .../public/images/pieces/Eightpieces/bl_s.svg |  96 +++++++++++++++++
 .../images/pieces/Eightpieces/bl_se.svg       |  96 +++++++++++++++++
 .../images/pieces/Eightpieces/bl_sw.svg       |  96 +++++++++++++++++
 .../public/images/pieces/Eightpieces/bl_w.svg |  96 +++++++++++++++++
 .../public/images/pieces/Eightpieces/bs.svg   |  95 ++++++++++++++++
 .../public/images/pieces/Eightpieces/wj.svg   |  97 +++++++++++++++++
 .../public/images/pieces/Eightpieces/wl_e.svg |  91 ++++++++++++++++
 .../public/images/pieces/Eightpieces/wl_n.svg |  91 ++++++++++++++++
 .../images/pieces/Eightpieces/wl_ne.svg       |  91 ++++++++++++++++
 .../images/pieces/Eightpieces/wl_nw.svg       |  86 +++++++++++++++
 .../public/images/pieces/Eightpieces/wl_s.svg |  91 ++++++++++++++++
 .../images/pieces/Eightpieces/wl_se.svg       |  91 ++++++++++++++++
 .../images/pieces/Eightpieces/wl_sw.svg       |  91 ++++++++++++++++
 .../public/images/pieces/Eightpieces/wl_w.svg |  91 ++++++++++++++++
 .../public/images/pieces/Eightpieces/ws.svg   | 102 ++++++++++++++++++
 client/src/variants/Eightpieces.js            | 100 +++++++++++++++++
 client/src/views/MyGames.vue                  |  11 +-
 22 files changed, 1980 insertions(+), 2 deletions(-)
 create mode 100644 client/public/images/pieces/Eightpieces/bj.svg
 create mode 100644 client/public/images/pieces/Eightpieces/bl_e.svg
 create mode 100644 client/public/images/pieces/Eightpieces/bl_n.svg
 create mode 100644 client/public/images/pieces/Eightpieces/bl_ne.svg
 create mode 100644 client/public/images/pieces/Eightpieces/bl_nw.svg
 create mode 100644 client/public/images/pieces/Eightpieces/bl_s.svg
 create mode 100644 client/public/images/pieces/Eightpieces/bl_se.svg
 create mode 100644 client/public/images/pieces/Eightpieces/bl_sw.svg
 create mode 100644 client/public/images/pieces/Eightpieces/bl_w.svg
 create mode 100644 client/public/images/pieces/Eightpieces/bs.svg
 create mode 100644 client/public/images/pieces/Eightpieces/wj.svg
 create mode 100644 client/public/images/pieces/Eightpieces/wl_e.svg
 create mode 100644 client/public/images/pieces/Eightpieces/wl_n.svg
 create mode 100644 client/public/images/pieces/Eightpieces/wl_ne.svg
 create mode 100644 client/public/images/pieces/Eightpieces/wl_nw.svg
 create mode 100644 client/public/images/pieces/Eightpieces/wl_s.svg
 create mode 100644 client/public/images/pieces/Eightpieces/wl_se.svg
 create mode 100644 client/public/images/pieces/Eightpieces/wl_sw.svg
 create mode 100644 client/public/images/pieces/Eightpieces/wl_w.svg
 create mode 100644 client/public/images/pieces/Eightpieces/ws.svg
 create mode 100644 client/src/variants/Eightpieces.js

diff --git a/client/public/images/pieces/Eightpieces/bj.svg b/client/public/images/pieces/Eightpieces/bj.svg
new file mode 100644
index 00000000..18dd5c1a
--- /dev/null
+++ b/client/public/images/pieces/Eightpieces/bj.svg
@@ -0,0 +1,91 @@
+<?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:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   height="100%"
+   width="100%"
+   version="1.1"
+   viewBox="0 0 2048 2048"
+   id="svg16"
+   sodipodi:docname="bj.svg"
+   inkscape:version="0.92.4 5da689c313, 2019-01-14">
+  <metadata
+     id="metadata22">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <defs
+     id="defs20" />
+  <sodipodi:namedview
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1"
+     objecttolerance="10"
+     gridtolerance="10"
+     guidetolerance="10"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:window-width="1920"
+     inkscape:window-height="1180"
+     id="namedview18"
+     showgrid="false"
+     inkscape:zoom="0.11523438"
+     inkscape:cx="1041.3559"
+     inkscape:cy="1024"
+     inkscape:window-x="0"
+     inkscape:window-y="20"
+     inkscape:window-maximized="0"
+     inkscape:current-layer="svg16" />
+  <path
+     style="color:#000000;display:block;fill:#000000;fill-rule:nonzero"
+     d="m 1161,1706 h 170 v 137 h 274 V 1468 L 1383,1297 V 819 L 1553,649 V 444 h 153 V 205 H 341 v 239 h 153 v 205 l 171,170 v 478 l -222,171 v 375 h 273 v -137 h 171 v 137 h 274 z M 564,460 V 358 h 920 v 102 z m 460,1092 H 512 v -46 l 73,-55 h 879 l 71,55 v 46 z m 0,-169 H 674 l 60,-47 v -57 h 580 v 57 l 60,47 z m 0,-546 H 734 v -46 l -60,-58 h 700 l -60,58 v 46 z m 0,-172 H 610 l -46,-43 v -58 h 920 v 58 l -46,43 z"
+     display="block"
+     id="path2"
+     inkscape:connector-curvature="0" />
+  <g
+     id="g14"
+     transform="matrix(1,0,0,-1,0,2048)"
+     style="fill:#ffffff;fill-rule:nonzero">
+    <path
+       style="color:#000000;display:block"
+       d="m 564,1588 v 102 h 920 v -102 z"
+       display="block"
+       id="path4"
+       inkscape:connector-curvature="0" />
+    <path
+       style="color:#000000;display:block"
+       d="M 1024,496 H 512 v 46 l 73,55 h 879 l 71,-55 v -46 z"
+       display="block"
+       id="path6"
+       inkscape:connector-curvature="0" />
+    <path
+       style="color:#000000;display:block"
+       d="M 1024,665 H 674 l 60,47 v 57 h 580 v -57 l 60,-47 z"
+       display="block"
+       id="path8"
+       inkscape:connector-curvature="0" />
+    <path
+       style="color:#000000;display:block"
+       d="M 1024,1211 H 734 v 46 l -60,58 h 700 l -60,-58 v -46 z"
+       display="block"
+       id="path10"
+       inkscape:connector-curvature="0" />
+    <path
+       style="color:#000000;display:block"
+       d="M 1024,1383 H 610 l -46,43 v 58 h 920 v -58 l -46,-43 z"
+       display="block"
+       id="path12"
+       inkscape:connector-curvature="0" />
+  </g>
+</svg>
diff --git a/client/public/images/pieces/Eightpieces/bl_e.svg b/client/public/images/pieces/Eightpieces/bl_e.svg
new file mode 100644
index 00000000..d6ba119e
--- /dev/null
+++ b/client/public/images/pieces/Eightpieces/bl_e.svg
@@ -0,0 +1,96 @@
+<?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:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   version="1.1"
+   width="45"
+   height="45"
+   id="svg12"
+   sodipodi:docname="bl_e.svg"
+   inkscape:version="0.92.4 5da689c313, 2019-01-14">
+  <metadata
+     id="metadata18">
+    <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 />
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <defs
+     id="defs16" />
+  <sodipodi:namedview
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1"
+     objecttolerance="10"
+     gridtolerance="10"
+     guidetolerance="10"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:window-width="960"
+     inkscape:window-height="1180"
+     id="namedview14"
+     showgrid="false"
+     inkscape:zoom="14.833529"
+     inkscape:cx="23.016186"
+     inkscape:cy="22.5"
+     inkscape:window-x="0"
+     inkscape:window-y="20"
+     inkscape:window-maximized="0"
+     inkscape:current-layer="svg12" />
+  <g
+     id="g10"
+     transform="matrix(-0.59753999,-0.85528924,-0.59753999,0.85528924,47.808008,20.059356)">
+    <title
+       id="title2">Unicorn</title>
+    <g
+       id="Head"
+       style="opacity:1;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#000000;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1">
+      <path
+         id="Neck"
+         d="m 22,10 c 10.5,1 16.5,8 16,29 H 15 c 0,-9 10,-6.5 8,-21"
+         style="fill:#000000;stroke:#000000"
+         inkscape:connector-curvature="0" />
+      <path
+         id="Face"
+         d="m 24,18 c 0.38,2.91 -5.55,7.37 -8,9 -3,2 -2.82,4.34 -5,4 -1.042,-0.94 1.41,-3.04 0,-3 -1,0 0.19,1.23 -1,2 C 9,30 6,31 6,26 6,24 12,14 12,14 12,14 4.4725,7.525 4.9587,6.85 5.445,6.175 13.945,11.3 14,10.5 c -0.73,-0.994 -0.5,-2 -0.5,-3 1,-1 3,2.5 3,2.5 h 2 c 0,0 0.78,-1.992 2.5,-3 1,0 1,3 1,3"
+         style="fill:#000000;stroke:#000000"
+         inkscape:connector-curvature="0" />
+      <path
+         id="Nose"
+         d="m 9.5,25.5 a 0.5,0.5 0 1 1 -1,0 0.5,0.5 0 1 1 1,0 z"
+         style="fill:#ffffff;stroke:#ffffff"
+         inkscape:connector-curvature="0" />
+      <path
+         id="Eye"
+         d="m 15,15.5 a 0.5,1.5 0 1 1 -1,0 0.5,1.5 0 1 1 1,0 z"
+         transform="matrix(0.866,0.5,-0.5,0.866,9.693,-5.173)"
+         style="fill:#ffffff;stroke:#ffffff"
+         inkscape:connector-curvature="0" />
+      <path
+         id="Mane"
+         d="M 24.55,10.4 24.1,11.85 24.6,12 c 3.15,1 5.65,2.49 7.9,6.75 2.25,4.26 3.25,10.31 2.75,20.25 l -0.05,0.5 h 2.25 L 37.5,39 C 38,28.94 36.62,22.15 34.25,17.66 31.88,13.17 28.46,11.02 25.06,10.5 Z"
+         style="fill:#ffffff;stroke:none"
+         inkscape:connector-curvature="0" />
+    </g>
+  </g>
+  <path
+     style="fill:none;stroke:#000000;stroke-width:1.01100898px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+     d="m 41.607967,24.480654 2.164816,-2.609357 -2.107846,-2.527814"
+     id="path23"
+     inkscape:connector-curvature="0" />
+  <path
+     style="fill:none;stroke:#000000;stroke-width:1.01100898px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+     d="m 43.136562,21.853288 -2.221786,-0.08155"
+     id="path38"
+     inkscape:connector-curvature="0" />
+</svg>
diff --git a/client/public/images/pieces/Eightpieces/bl_n.svg b/client/public/images/pieces/Eightpieces/bl_n.svg
new file mode 100644
index 00000000..748768b0
--- /dev/null
+++ b/client/public/images/pieces/Eightpieces/bl_n.svg
@@ -0,0 +1,96 @@
+<?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:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   version="1.1"
+   width="45"
+   height="45"
+   id="svg12"
+   sodipodi:docname="bl_n.svg"
+   inkscape:version="0.92.4 5da689c313, 2019-01-14">
+  <metadata
+     id="metadata18">
+    <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>
+  <defs
+     id="defs16" />
+  <sodipodi:namedview
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1"
+     objecttolerance="10"
+     gridtolerance="10"
+     guidetolerance="10"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:window-width="960"
+     inkscape:window-height="1180"
+     id="namedview14"
+     showgrid="false"
+     inkscape:zoom="14.833529"
+     inkscape:cx="23.016186"
+     inkscape:cy="22.5"
+     inkscape:window-x="0"
+     inkscape:window-y="20"
+     inkscape:window-maximized="0"
+     inkscape:current-layer="svg12" />
+  <g
+     id="g10"
+     transform="matrix(0.85528924,0.59753999,-0.85528924,0.59753999,23.650061,-2.5480498)">
+    <title
+       id="title2">Unicorn</title>
+    <g
+       id="Head"
+       style="opacity:1;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#000000;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1">
+      <path
+         id="Neck"
+         d="m 22,10 c 10.5,1 16.5,8 16,29 H 15 c 0,-9 10,-6.5 8,-21"
+         style="fill:#000000;stroke:#000000"
+         inkscape:connector-curvature="0" />
+      <path
+         id="Face"
+         d="m 24,18 c 0.38,2.91 -5.55,7.37 -8,9 -3,2 -2.82,4.34 -5,4 -1.042,-0.94 1.41,-3.04 0,-3 -1,0 0.19,1.23 -1,2 C 9,30 6,31 6,26 6,24 12,14 12,14 12,14 4.4725,7.525 4.9587,6.85 5.445,6.175 13.945,11.3 14,10.5 c -0.73,-0.994 -0.5,-2 -0.5,-3 1,-1 3,2.5 3,2.5 h 2 c 0,0 0.78,-1.992 2.5,-3 1,0 1,3 1,3"
+         style="fill:#000000;stroke:#000000"
+         inkscape:connector-curvature="0" />
+      <path
+         id="Nose"
+         d="m 9.5,25.5 a 0.5,0.5 0 1 1 -1,0 0.5,0.5 0 1 1 1,0 z"
+         style="fill:#ffffff;stroke:#ffffff"
+         inkscape:connector-curvature="0" />
+      <path
+         id="Eye"
+         d="m 15,15.5 a 0.5,1.5 0 1 1 -1,0 0.5,1.5 0 1 1 1,0 z"
+         transform="matrix(0.866,0.5,-0.5,0.866,9.693,-5.173)"
+         style="fill:#ffffff;stroke:#ffffff"
+         inkscape:connector-curvature="0" />
+      <path
+         id="Mane"
+         d="M 24.55,10.4 24.1,11.85 24.6,12 c 3.15,1 5.65,2.49 7.9,6.75 2.25,4.26 3.25,10.31 2.75,20.25 l -0.05,0.5 h 2.25 L 37.5,39 C 38,28.94 36.62,22.15 34.25,17.66 31.88,13.17 28.46,11.02 25.06,10.5 Z"
+         style="fill:#ffffff;stroke:none"
+         inkscape:connector-curvature="0" />
+    </g>
+  </g>
+  <path
+     style="fill:none;stroke:#000000;stroke-width:1.01100898px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+     d="M 19.228763,3.6519906 21.83812,1.4871741 24.365934,3.5950217"
+     id="path23"
+     inkscape:connector-curvature="0" />
+  <path
+     style="fill:none;stroke:#000000;stroke-width:1.01100898px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+     d="m 21.856129,2.1233961 0.08155,2.2217854"
+     id="path38"
+     inkscape:connector-curvature="0" />
+</svg>
diff --git a/client/public/images/pieces/Eightpieces/bl_ne.svg b/client/public/images/pieces/Eightpieces/bl_ne.svg
new file mode 100644
index 00000000..c3873e80
--- /dev/null
+++ b/client/public/images/pieces/Eightpieces/bl_ne.svg
@@ -0,0 +1,96 @@
+<?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:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   version="1.1"
+   width="45"
+   height="45"
+   id="svg12"
+   sodipodi:docname="bl_ne.svg"
+   inkscape:version="0.92.4 5da689c313, 2019-01-14">
+  <metadata
+     id="metadata18">
+    <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 />
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <defs
+     id="defs16" />
+  <sodipodi:namedview
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1"
+     objecttolerance="10"
+     gridtolerance="10"
+     guidetolerance="10"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:window-width="960"
+     inkscape:window-height="1180"
+     id="namedview14"
+     showgrid="false"
+     inkscape:zoom="14.833529"
+     inkscape:cx="23.016186"
+     inkscape:cy="22.5"
+     inkscape:window-x="0"
+     inkscape:window-y="20"
+     inkscape:window-maximized="0"
+     inkscape:current-layer="svg12" />
+  <g
+     id="g10"
+     transform="matrix(-1,0,0,1,40.547519,0)">
+    <title
+       id="title2">Unicorn</title>
+    <g
+       id="Head"
+       style="opacity:1;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#000000;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1">
+      <path
+         id="Neck"
+         d="m 22,10 c 10.5,1 16.5,8 16,29 H 15 c 0,-9 10,-6.5 8,-21"
+         style="fill:#000000;stroke:#000000"
+         inkscape:connector-curvature="0" />
+      <path
+         id="Face"
+         d="m 24,18 c 0.38,2.91 -5.55,7.37 -8,9 -3,2 -2.82,4.34 -5,4 -1.042,-0.94 1.41,-3.04 0,-3 -1,0 0.19,1.23 -1,2 C 9,30 6,31 6,26 6,24 12,14 12,14 12,14 4.4725,7.525 4.9587,6.85 5.445,6.175 13.945,11.3 14,10.5 c -0.73,-0.994 -0.5,-2 -0.5,-3 1,-1 3,2.5 3,2.5 h 2 c 0,0 0.78,-1.992 2.5,-3 1,0 1,3 1,3"
+         style="fill:#000000;stroke:#000000"
+         inkscape:connector-curvature="0" />
+      <path
+         id="Nose"
+         d="m 9.5,25.5 a 0.5,0.5 0 1 1 -1,0 0.5,0.5 0 1 1 1,0 z"
+         style="fill:#ffffff;stroke:#ffffff"
+         inkscape:connector-curvature="0" />
+      <path
+         id="Eye"
+         d="m 15,15.5 a 0.5,1.5 0 1 1 -1,0 0.5,1.5 0 1 1 1,0 z"
+         transform="matrix(0.866,0.5,-0.5,0.866,9.693,-5.173)"
+         style="fill:#ffffff;stroke:#ffffff"
+         inkscape:connector-curvature="0" />
+      <path
+         id="Mane"
+         d="M 24.55,10.4 24.1,11.85 24.6,12 c 3.15,1 5.65,2.49 7.9,6.75 2.25,4.26 3.25,10.31 2.75,20.25 l -0.05,0.5 h 2.25 L 37.5,39 C 38,28.94 36.62,22.15 34.25,17.66 31.88,13.17 28.46,11.02 25.06,10.5 Z"
+         style="fill:#ffffff;stroke:none"
+         inkscape:connector-curvature="0" />
+    </g>
+  </g>
+  <path
+     style="fill:none;stroke:#000000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+     d="M 37.944228,7.7726519 38.230245,4.4357874 34.98872,4.7218044"
+     id="path23"
+     inkscape:connector-curvature="0" />
+  <path
+     style="fill:none;stroke:#000000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+     d="M 37.687349,4.9576271 35.78057,6.7690678"
+     id="path38"
+     inkscape:connector-curvature="0" />
+</svg>
diff --git a/client/public/images/pieces/Eightpieces/bl_nw.svg b/client/public/images/pieces/Eightpieces/bl_nw.svg
new file mode 100644
index 00000000..aa2c2ed3
--- /dev/null
+++ b/client/public/images/pieces/Eightpieces/bl_nw.svg
@@ -0,0 +1,91 @@
+<?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:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   version="1.1"
+   width="45"
+   height="45"
+   id="svg12"
+   sodipodi:docname="bl.svg"
+   inkscape:version="0.92.4 5da689c313, 2019-01-14">
+  <metadata
+     id="metadata18">
+    <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>
+  <defs
+     id="defs16" />
+  <sodipodi:namedview
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1"
+     objecttolerance="10"
+     gridtolerance="10"
+     guidetolerance="10"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:window-width="960"
+     inkscape:window-height="1180"
+     id="namedview14"
+     showgrid="false"
+     inkscape:zoom="14.833529"
+     inkscape:cx="22.881356"
+     inkscape:cy="22.5"
+     inkscape:window-x="960"
+     inkscape:window-y="20"
+     inkscape:window-maximized="0"
+     inkscape:current-layer="svg12" />
+  <g
+     id="g10">
+    <title
+       id="title2">Unicorn</title>
+    <g
+       id="Head"
+       style="opacity:1; fill:none; fill-opacity:1; fill-rule:evenodd; stroke:#000000; stroke-width:1.5; stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4; stroke-dasharray:none; stroke-opacity:1;">
+      <path
+         id="Neck"
+         d="M 22,10 C 32.5,11 38.5,18 38,39 L 15,39 C 15,30 25,32.5 23,18"
+         style="fill:#000000; stroke:#000000;" />
+      <path
+         id="Face"
+         fill="#000000"
+         d="m24,18c0.38,2.91 -5.55,7.37 -8,9c-3,2 -2.82,4.34 -5,4c-1.042,-0.94 1.41,-3.04 0,-3c-1,0 0.19,1.23 -1,2c-1,0 -4,1 -4,-4c0,-2 6,-12 6,-12c0,0 -7.5275,-6.475 -7.0413,-7.15c0.4863,-0.675 8.9863,4.45 9.0413,3.65c-0.73,-0.994 -0.5,-2 -0.5,-3c1,-1 3,2.5 3,2.5l2,0c0,0 0.78,-1.992 2.5,-3c1,0 1,3 1,3"
+         style="fill:#000000; stroke:#000000;" />
+      <path
+         id="Nose"
+         d="M 9.5 25.5 A 0.5 0.5 0 1 1 8.5,25.5 A 0.5 0.5 0 1 1 9.5 25.5 z"
+         style="fill:#ffffff; stroke:#ffffff;" />
+      <path
+         id="Eye"
+         d="M 15 15.5 A 0.5 1.5 0 1 1  14,15.5 A 0.5 1.5 0 1 1  15 15.5 z"
+         transform="matrix(0.866,0.5,-0.5,0.866,9.693,-5.173)"
+         style="fill:#ffffff; stroke:#ffffff;" />
+      <path
+         id="Mane"
+         d="M 24.55,10.4 L 24.1,11.85 L 24.6,12 C 27.75,13 30.25,14.49 32.5,18.75 C 34.75,23.01 35.75,29.06 35.25,39 L 35.2,39.5 L 37.45,39.5 L 37.5,39 C 38,28.94 36.62,22.15 34.25,17.66 C 31.88,13.17 28.46,11.02 25.06,10.5 L 24.55,10.4 z "
+         style="fill:#ffffff; stroke:none;" />
+    </g>
+  </g>
+  <path
+     style="fill:none;stroke:#000000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+     d="M 2.6032906,7.7726519 2.3172736,4.4357874 5.558799,4.7218044"
+     id="path23"
+     inkscape:connector-curvature="0" />
+  <path
+     style="fill:none;stroke:#000000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+     d="M 2.8601695,4.9576271 4.7669492,6.7690678"
+     id="path38"
+     inkscape:connector-curvature="0" />
+</svg>
diff --git a/client/public/images/pieces/Eightpieces/bl_s.svg b/client/public/images/pieces/Eightpieces/bl_s.svg
new file mode 100644
index 00000000..8b93bf3f
--- /dev/null
+++ b/client/public/images/pieces/Eightpieces/bl_s.svg
@@ -0,0 +1,96 @@
+<?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:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   version="1.1"
+   width="45"
+   height="45"
+   id="svg12"
+   sodipodi:docname="bl_s.svg"
+   inkscape:version="0.92.4 5da689c313, 2019-01-14">
+  <metadata
+     id="metadata18">
+    <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>
+  <defs
+     id="defs16" />
+  <sodipodi:namedview
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1"
+     objecttolerance="10"
+     gridtolerance="10"
+     guidetolerance="10"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:window-width="960"
+     inkscape:window-height="1180"
+     id="namedview14"
+     showgrid="false"
+     inkscape:zoom="14.833529"
+     inkscape:cx="23.151016"
+     inkscape:cy="22.5"
+     inkscape:window-x="0"
+     inkscape:window-y="20"
+     inkscape:window-maximized="0"
+     inkscape:current-layer="svg12" />
+  <g
+     id="g10"
+     transform="matrix(0.85528924,-0.59753999,-0.85528924,-0.59753999,23.650061,47.474009)">
+    <title
+       id="title2">Unicorn</title>
+    <g
+       id="Head"
+       style="opacity:1;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#000000;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1">
+      <path
+         id="Neck"
+         d="m 22,10 c 10.5,1 16.5,8 16,29 H 15 c 0,-9 10,-6.5 8,-21"
+         style="fill:#000000;stroke:#000000"
+         inkscape:connector-curvature="0" />
+      <path
+         id="Face"
+         d="m 24,18 c 0.38,2.91 -5.55,7.37 -8,9 -3,2 -2.82,4.34 -5,4 -1.042,-0.94 1.41,-3.04 0,-3 -1,0 0.19,1.23 -1,2 C 9,30 6,31 6,26 6,24 12,14 12,14 12,14 4.4725,7.525 4.9587,6.85 5.445,6.175 13.945,11.3 14,10.5 c -0.73,-0.994 -0.5,-2 -0.5,-3 1,-1 3,2.5 3,2.5 h 2 c 0,0 0.78,-1.992 2.5,-3 1,0 1,3 1,3"
+         style="fill:#000000;stroke:#000000"
+         inkscape:connector-curvature="0" />
+      <path
+         id="Nose"
+         d="m 9.5,25.5 a 0.5,0.5 0 1 1 -1,0 0.5,0.5 0 1 1 1,0 z"
+         style="fill:#ffffff;stroke:#ffffff"
+         inkscape:connector-curvature="0" />
+      <path
+         id="Eye"
+         d="m 15,15.5 a 0.5,1.5 0 1 1 -1,0 0.5,1.5 0 1 1 1,0 z"
+         transform="matrix(0.866,0.5,-0.5,0.866,9.693,-5.173)"
+         style="fill:#ffffff;stroke:#ffffff"
+         inkscape:connector-curvature="0" />
+      <path
+         id="Mane"
+         d="M 24.55,10.4 24.1,11.85 24.6,12 c 3.15,1 5.65,2.49 7.9,6.75 2.25,4.26 3.25,10.31 2.75,20.25 l -0.05,0.5 h 2.25 L 37.5,39 C 38,28.94 36.62,22.15 34.25,17.66 31.88,13.17 28.46,11.02 25.06,10.5 Z"
+         style="fill:#ffffff;stroke:none"
+         inkscape:connector-curvature="0" />
+    </g>
+  </g>
+  <path
+     style="fill:none;stroke:#000000;stroke-width:1.01100898px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+     d="m 19.228763,41.273969 2.609357,2.164816 2.527814,-2.107847"
+     id="path23"
+     inkscape:connector-curvature="0" />
+  <path
+     style="fill:none;stroke:#000000;stroke-width:1.01100898px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+     d="m 21.856129,42.802563 0.08155,-2.221785"
+     id="path38"
+     inkscape:connector-curvature="0" />
+</svg>
diff --git a/client/public/images/pieces/Eightpieces/bl_se.svg b/client/public/images/pieces/Eightpieces/bl_se.svg
new file mode 100644
index 00000000..d6f4d489
--- /dev/null
+++ b/client/public/images/pieces/Eightpieces/bl_se.svg
@@ -0,0 +1,96 @@
+<?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:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   version="1.1"
+   width="45"
+   height="45"
+   id="svg12"
+   sodipodi:docname="bl_se.svg"
+   inkscape:version="0.92.4 5da689c313, 2019-01-14">
+  <metadata
+     id="metadata18">
+    <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 />
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <defs
+     id="defs16" />
+  <sodipodi:namedview
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1"
+     objecttolerance="10"
+     gridtolerance="10"
+     guidetolerance="10"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:window-width="960"
+     inkscape:window-height="1180"
+     id="namedview14"
+     showgrid="false"
+     inkscape:zoom="14.833529"
+     inkscape:cx="23.016186"
+     inkscape:cy="22.5"
+     inkscape:window-x="0"
+     inkscape:window-y="20"
+     inkscape:window-maximized="0"
+     inkscape:current-layer="svg12" />
+  <g
+     id="g10"
+     transform="matrix(0,-1,-1,0,42.209248,44.626812)">
+    <title
+       id="title2">Unicorn</title>
+    <g
+       id="Head"
+       style="opacity:1;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#000000;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1">
+      <path
+         id="Neck"
+         d="m 22,10 c 10.5,1 16.5,8 16,29 H 15 c 0,-9 10,-6.5 8,-21"
+         style="fill:#000000;stroke:#000000"
+         inkscape:connector-curvature="0" />
+      <path
+         id="Face"
+         d="m 24,18 c 0.38,2.91 -5.55,7.37 -8,9 -3,2 -2.82,4.34 -5,4 -1.042,-0.94 1.41,-3.04 0,-3 -1,0 0.19,1.23 -1,2 C 9,30 6,31 6,26 6,24 12,14 12,14 12,14 4.4725,7.525 4.9587,6.85 5.445,6.175 13.945,11.3 14,10.5 c -0.73,-0.994 -0.5,-2 -0.5,-3 1,-1 3,2.5 3,2.5 h 2 c 0,0 0.78,-1.992 2.5,-3 1,0 1,3 1,3"
+         style="fill:#000000;stroke:#000000"
+         inkscape:connector-curvature="0" />
+      <path
+         id="Nose"
+         d="m 9.5,25.5 a 0.5,0.5 0 1 1 -1,0 0.5,0.5 0 1 1 1,0 z"
+         style="fill:#ffffff;stroke:#ffffff"
+         inkscape:connector-curvature="0" />
+      <path
+         id="Eye"
+         d="m 15,15.5 a 0.5,1.5 0 1 1 -1,0 0.5,1.5 0 1 1 1,0 z"
+         transform="matrix(0.866,0.5,-0.5,0.866,9.693,-5.173)"
+         style="fill:#ffffff;stroke:#ffffff"
+         inkscape:connector-curvature="0" />
+      <path
+         id="Mane"
+         d="M 24.55,10.4 24.1,11.85 24.6,12 c 3.15,1 5.65,2.49 7.9,6.75 2.25,4.26 3.25,10.31 2.75,20.25 l -0.05,0.5 h 2.25 L 37.5,39 C 38,28.94 36.62,22.15 34.25,17.66 31.88,13.17 28.46,11.02 25.06,10.5 Z"
+         style="fill:#ffffff;stroke:none"
+         inkscape:connector-curvature="0" />
+    </g>
+  </g>
+  <path
+     style="fill:none;stroke:#000000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+     d="m 34.671391,41.887949 3.336865,0.286017 -0.286017,-3.241525"
+     id="path23"
+     inkscape:connector-curvature="0" />
+  <path
+     style="fill:none;stroke:#000000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+     d="M 37.370021,41.67021 35.55858,39.763431"
+     id="path38"
+     inkscape:connector-curvature="0" />
+</svg>
diff --git a/client/public/images/pieces/Eightpieces/bl_sw.svg b/client/public/images/pieces/Eightpieces/bl_sw.svg
new file mode 100644
index 00000000..51aeb9d2
--- /dev/null
+++ b/client/public/images/pieces/Eightpieces/bl_sw.svg
@@ -0,0 +1,96 @@
+<?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:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   version="1.1"
+   width="45"
+   height="45"
+   id="svg12"
+   sodipodi:docname="bl_sw.svg"
+   inkscape:version="0.92.4 5da689c313, 2019-01-14">
+  <metadata
+     id="metadata18">
+    <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>
+  <defs
+     id="defs16" />
+  <sodipodi:namedview
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1"
+     objecttolerance="10"
+     gridtolerance="10"
+     guidetolerance="10"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:window-width="960"
+     inkscape:window-height="1180"
+     id="namedview14"
+     showgrid="false"
+     inkscape:zoom="14.833529"
+     inkscape:cx="23.016186"
+     inkscape:cy="22.5"
+     inkscape:window-x="0"
+     inkscape:window-y="20"
+     inkscape:window-maximized="0"
+     inkscape:current-layer="svg12" />
+  <g
+     id="g10"
+     transform="rotate(-90,21.717726,22.909086)">
+    <title
+       id="title2">Unicorn</title>
+    <g
+       id="Head"
+       style="opacity:1;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#000000;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1">
+      <path
+         id="Neck"
+         d="m 22,10 c 10.5,1 16.5,8 16,29 H 15 c 0,-9 10,-6.5 8,-21"
+         style="fill:#000000;stroke:#000000"
+         inkscape:connector-curvature="0" />
+      <path
+         id="Face"
+         d="m 24,18 c 0.38,2.91 -5.55,7.37 -8,9 -3,2 -2.82,4.34 -5,4 -1.042,-0.94 1.41,-3.04 0,-3 -1,0 0.19,1.23 -1,2 C 9,30 6,31 6,26 6,24 12,14 12,14 12,14 4.4725,7.525 4.9587,6.85 5.445,6.175 13.945,11.3 14,10.5 c -0.73,-0.994 -0.5,-2 -0.5,-3 1,-1 3,2.5 3,2.5 h 2 c 0,0 0.78,-1.992 2.5,-3 1,0 1,3 1,3"
+         style="fill:#000000;stroke:#000000"
+         inkscape:connector-curvature="0" />
+      <path
+         id="Nose"
+         d="m 9.5,25.5 a 0.5,0.5 0 1 1 -1,0 0.5,0.5 0 1 1 1,0 z"
+         style="fill:#ffffff;stroke:#ffffff"
+         inkscape:connector-curvature="0" />
+      <path
+         id="Eye"
+         d="m 15,15.5 a 0.5,1.5 0 1 1 -1,0 0.5,1.5 0 1 1 1,0 z"
+         transform="matrix(0.866,0.5,-0.5,0.866,9.693,-5.173)"
+         style="fill:#ffffff;stroke:#ffffff"
+         inkscape:connector-curvature="0" />
+      <path
+         id="Mane"
+         d="M 24.55,10.4 24.1,11.85 24.6,12 c 3.15,1 5.65,2.49 7.9,6.75 2.25,4.26 3.25,10.31 2.75,20.25 l -0.05,0.5 h 2.25 L 37.5,39 C 38,28.94 36.62,22.15 34.25,17.66 31.88,13.17 28.46,11.02 25.06,10.5 Z"
+         style="fill:#ffffff;stroke:none"
+         inkscape:connector-curvature="0" />
+    </g>
+  </g>
+  <path
+     style="fill:none;stroke:#000000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+     d="m 6.3464976,41.887949 -3.336865,0.286017 0.286017,-3.241525"
+     id="path23"
+     inkscape:connector-curvature="0" />
+  <path
+     style="fill:none;stroke:#000000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+     d="m 3.6478676,41.67021 1.811441,-1.906779"
+     id="path38"
+     inkscape:connector-curvature="0" />
+</svg>
diff --git a/client/public/images/pieces/Eightpieces/bl_w.svg b/client/public/images/pieces/Eightpieces/bl_w.svg
new file mode 100644
index 00000000..9613643f
--- /dev/null
+++ b/client/public/images/pieces/Eightpieces/bl_w.svg
@@ -0,0 +1,96 @@
+<?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:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   version="1.1"
+   width="45"
+   height="45"
+   id="svg12"
+   sodipodi:docname="bl_w.svg"
+   inkscape:version="0.92.4 5da689c313, 2019-01-14">
+  <metadata
+     id="metadata18">
+    <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>
+  <defs
+     id="defs16" />
+  <sodipodi:namedview
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1"
+     objecttolerance="10"
+     gridtolerance="10"
+     guidetolerance="10"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:window-width="960"
+     inkscape:window-height="1180"
+     id="namedview14"
+     showgrid="false"
+     inkscape:zoom="14.833529"
+     inkscape:cx="23.016186"
+     inkscape:cy="22.5"
+     inkscape:window-x="0"
+     inkscape:window-y="20"
+     inkscape:window-maximized="0"
+     inkscape:current-layer="svg12" />
+  <g
+     id="g10"
+     transform="matrix(0.59753999,-0.85528924,0.59753999,0.85528924,-2.2140523,20.059356)">
+    <title
+       id="title2">Unicorn</title>
+    <g
+       id="Head"
+       style="opacity:1;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#000000;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1">
+      <path
+         id="Neck"
+         d="m 22,10 c 10.5,1 16.5,8 16,29 H 15 c 0,-9 10,-6.5 8,-21"
+         style="fill:#000000;stroke:#000000"
+         inkscape:connector-curvature="0" />
+      <path
+         id="Face"
+         d="m 24,18 c 0.38,2.91 -5.55,7.37 -8,9 -3,2 -2.82,4.34 -5,4 -1.042,-0.94 1.41,-3.04 0,-3 -1,0 0.19,1.23 -1,2 C 9,30 6,31 6,26 6,24 12,14 12,14 12,14 4.4725,7.525 4.9587,6.85 5.445,6.175 13.945,11.3 14,10.5 c -0.73,-0.994 -0.5,-2 -0.5,-3 1,-1 3,2.5 3,2.5 h 2 c 0,0 0.78,-1.992 2.5,-3 1,0 1,3 1,3"
+         style="fill:#000000;stroke:#000000"
+         inkscape:connector-curvature="0" />
+      <path
+         id="Nose"
+         d="m 9.5,25.5 a 0.5,0.5 0 1 1 -1,0 0.5,0.5 0 1 1 1,0 z"
+         style="fill:#ffffff;stroke:#ffffff"
+         inkscape:connector-curvature="0" />
+      <path
+         id="Eye"
+         d="m 15,15.5 a 0.5,1.5 0 1 1 -1,0 0.5,1.5 0 1 1 1,0 z"
+         transform="matrix(0.866,0.5,-0.5,0.866,9.693,-5.173)"
+         style="fill:#ffffff;stroke:#ffffff"
+         inkscape:connector-curvature="0" />
+      <path
+         id="Mane"
+         d="M 24.55,10.4 24.1,11.85 24.6,12 c 3.15,1 5.65,2.49 7.9,6.75 2.25,4.26 3.25,10.31 2.75,20.25 l -0.05,0.5 h 2.25 L 37.5,39 C 38,28.94 36.62,22.15 34.25,17.66 31.88,13.17 28.46,11.02 25.06,10.5 Z"
+         style="fill:#ffffff;stroke:none"
+         inkscape:connector-curvature="0" />
+    </g>
+  </g>
+  <path
+     style="fill:none;stroke:#000000;stroke-width:1.01100898px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+     d="m 3.9859887,24.480654 -2.164816,-2.609357 2.107846,-2.527814"
+     id="path23"
+     inkscape:connector-curvature="0" />
+  <path
+     style="fill:none;stroke:#000000;stroke-width:1.01100898px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+     d="m 2.4573937,21.853288 2.221786,-0.08155"
+     id="path38"
+     inkscape:connector-curvature="0" />
+</svg>
diff --git a/client/public/images/pieces/Eightpieces/bs.svg b/client/public/images/pieces/Eightpieces/bs.svg
new file mode 100644
index 00000000..25f487e3
--- /dev/null
+++ b/client/public/images/pieces/Eightpieces/bs.svg
@@ -0,0 +1,95 @@
+<?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:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   height="100%"
+   width="100%"
+   version="1.1"
+   viewBox="0 0 2048 2048"
+   id="svg16"
+   sodipodi:docname="bs.svg"
+   inkscape:version="0.92.4 5da689c313, 2019-01-14">
+  <metadata
+     id="metadata22">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <defs
+     id="defs20" />
+  <sodipodi:namedview
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1"
+     objecttolerance="10"
+     gridtolerance="10"
+     guidetolerance="10"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:window-width="1920"
+     inkscape:window-height="1180"
+     id="namedview18"
+     showgrid="false"
+     inkscape:zoom="0.23046875"
+     inkscape:cx="1041.3559"
+     inkscape:cy="1024"
+     inkscape:window-x="0"
+     inkscape:window-y="20"
+     inkscape:window-maximized="0"
+     inkscape:current-layer="svg16" />
+  <path
+     style="color:black;"
+     d="m1290 582l-42 102q-102 22-224 22-121 0-222-22l-42-101q124 31 264 31 138 0 266-32zm-84 206l-29 70v27q-76 11-153 11-75 0-152-11l-1-27-27-70q85 15 180 15 96 0 182-15zm-35-378q-40 30-80 95h-32q0-49 23-95h89zm-206 0q23 49 23 95h-32q-39-64-81-95h90zm59-18q-14-57-34-79t-53-46q-36-25-85-42t-109-9l-281 39q-17 2-30 0t-26-2q-21 0-53-9t-51-28l-97 159q18 20 32 28t33 17q58 27 124 33 28 2 55 1t56 2q54-9 108-16t110-16q60 0 81 12 11 6 35 22t48 47q-53 6-108 20t-97 31l104 258q-78 45-109 72t-49 64q-26 46-33 89t-7 77q1 60 28 132t104 130q63 48 123 99t119 119q-74 38-74 121 0 56 39 96t97 40q56 0 96-40t40-96q0-82-74-121 58-68 117-119t125-99q75-57 102-129t29-133q0-34-7-77t-32-89q-20-36-50-63t-108-73l104-258q-44-16-99-30t-106-21q23-31 47-47t36-22q21-12 81-12 54 8 108 15t110 17q27-3 54-2t57-1q64-6 124-33 18-9 32-17t33-28l-98-159q-18 18-50 27t-53 10q-13 0-26 2t-31 0l-280-39q-60-9-111 8t-85 45q-33 27-52 46t-33 77zm-37 744v-85q0-37 37-37t37 37v86h90q35 0 35 36t-35 36h-90v90q0 37-37 37t-37-37v-90h-88q-35 0-35-36t35-36l88-1z"
+     fill-rule="nonzero"
+     transform="translate(0,2048) scale(1,-1)"
+     display="block"
+     fill="#000"
+     id="path2" />
+  <g
+     fill-rule="nonzero"
+     fill="#fff"
+     id="g14">
+    <path
+       style="color:black;"
+       d="m1290 1466-42-102q-102-22-224-22-121 0-222 22l-42 101q124-31 264-31 138 0 266 32z"
+       display="block"
+       id="path4" />
+    <path
+       style="color:black;"
+       d="m1206 1260-29-70v-27q-76-11-153-11-75 0-152 11l-1 27-27 70q85-15 180-15 96 0 182 15z"
+       display="block"
+       id="path6" />
+    <path
+       style="color:black;"
+       d="m1171 1638q-40-30-80-95h-32q0 49 23 95h89z"
+       display="block"
+       id="path8" />
+    <path
+       style="color:black;"
+       d="m965 1638q23-49 23-95h-32q-39 64-81 95h90z"
+       display="block"
+       id="path10" />
+    <path
+       style="color:black;"
+       d="m987 912v85q0 37 37 37t37-37v-86h90q35 0 35-36t-35-36h-90v-90q0-37-37-37t-37 37v90h-88q-35 0-35 36t35 36l88 1z"
+       display="block"
+       id="path12" />
+  </g>
+  <rect
+     style="fill:#000000"
+     id="rect28"
+     width="390.50848"
+     height="381.83051"
+     x="833.08472"
+     y="672.54236" />
+</svg>
diff --git a/client/public/images/pieces/Eightpieces/wj.svg b/client/public/images/pieces/Eightpieces/wj.svg
new file mode 100644
index 00000000..3d283bc5
--- /dev/null
+++ b/client/public/images/pieces/Eightpieces/wj.svg
@@ -0,0 +1,97 @@
+<?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:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   height="100%"
+   width="100%"
+   version="1.1"
+   viewBox="0 0 2048 2048"
+   id="svg18"
+   sodipodi:docname="wj.svg"
+   inkscape:version="0.92.4 5da689c313, 2019-01-14">
+  <metadata
+     id="metadata24">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <defs
+     id="defs22" />
+  <sodipodi:namedview
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1"
+     objecttolerance="10"
+     gridtolerance="10"
+     guidetolerance="10"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:window-width="1920"
+     inkscape:window-height="1180"
+     id="namedview20"
+     showgrid="false"
+     inkscape:zoom="0.11523438"
+     inkscape:cx="1041.3559"
+     inkscape:cy="1024"
+     inkscape:window-x="0"
+     inkscape:window-y="20"
+     inkscape:window-maximized="0"
+     inkscape:current-layer="svg18" />
+  <path
+     style="color:#000000;display:block;fill:#000000;fill-rule:nonzero"
+     d="m 1161,1706 h 170 v 137 h 274 V 1468 L 1383,1297 V 819 L 1553,649 V 444 h 153 V 205 H 341 v 239 h 153 v 205 l 171,170 v 478 l -222,171 v 375 h 273 v -137 h 171 v 137 h 274 z M 1639,376 H 409 V 273 H 1639 Z M 1484,580 H 564 V 444 h 920 z m -170,717 H 734 V 819 h 580 z m 222,239 v 239 h -137 v -137 h -308 v 137 H 956 V 1638 H 649 v 137 H 512 V 1536 Z M 1459,649 1356,751 H 693 L 588,649 Z m -110,716 127,103 H 572 l 128,-103 z"
+     display="block"
+     id="path2"
+     inkscape:connector-curvature="0" />
+  <g
+     id="g12"
+     transform="matrix(1,0,0,-1,0,2048)"
+     style="fill:#ffffff;fill-rule:nonzero">
+    <path
+       style="color:#000000;display:block"
+       d="M 1639,1672 H 409 v 103 h 1230 z"
+       display="block"
+       id="path4"
+       inkscape:connector-curvature="0" />
+    <path
+       style="color:#000000;display:block"
+       d="M 1484,1468 H 564 v 136 h 920 z"
+       display="block"
+       id="path6"
+       inkscape:connector-curvature="0" />
+    <path
+       style="color:#000000;display:block"
+       d="M 1314,751 H 734 v 478 h 580 z"
+       display="block"
+       id="path8"
+       inkscape:connector-curvature="0" />
+    <path
+       style="color:#000000;display:block"
+       d="M 1536,512 V 273 H 1399 V 410 H 1091 V 273 H 956 V 410 H 649 V 273 H 512 v 239 z"
+       display="block"
+       id="path10"
+       inkscape:connector-curvature="0" />
+  </g>
+  <path
+     style="color:#000000;display:block;fill:#ffffff;fill-rule:nonzero"
+     d="M 1459,649 1356,751 H 693 L 588,649 Z"
+     display="block"
+     id="path14"
+     inkscape:connector-curvature="0" />
+  <path
+     style="color:#000000;display:block;fill:#ffffff;fill-rule:nonzero"
+     d="m 1349,1365 127,103 H 572 l 128,-103 z"
+     display="block"
+     id="path16"
+     inkscape:connector-curvature="0" />
+</svg>
diff --git a/client/public/images/pieces/Eightpieces/wl_e.svg b/client/public/images/pieces/Eightpieces/wl_e.svg
new file mode 100644
index 00000000..74df7f64
--- /dev/null
+++ b/client/public/images/pieces/Eightpieces/wl_e.svg
@@ -0,0 +1,91 @@
+<?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:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   version="1.1"
+   width="45"
+   height="45"
+   id="svg11"
+   sodipodi:docname="wl_e.svg"
+   inkscape:version="0.92.4 5da689c313, 2019-01-14">
+  <metadata
+     id="metadata17">
+    <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 />
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <defs
+     id="defs15" />
+  <sodipodi:namedview
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1"
+     objecttolerance="10"
+     gridtolerance="10"
+     guidetolerance="10"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:window-width="960"
+     inkscape:window-height="1180"
+     id="namedview13"
+     showgrid="false"
+     inkscape:zoom="14.833529"
+     inkscape:cx="23.016186"
+     inkscape:cy="22.5"
+     inkscape:window-x="0"
+     inkscape:window-y="20"
+     inkscape:window-maximized="0"
+     inkscape:current-layer="svg11" />
+  <g
+     id="g9"
+     transform="matrix(-0.59753453,-0.8552894,-0.59753453,0.8552894,47.913637,19.982467)">
+    <title
+       id="title2">Unicorn</title>
+    <g
+       id="Head"
+       style="opacity:1;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#000000;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1">
+      <path
+         id="Neck"
+         d="m 22,10 c 10.5,1 16.5,8 16,29 H 15 c 0,-9 10,-6.5 8,-21"
+         style="fill:#ffffff;stroke:#000000"
+         inkscape:connector-curvature="0" />
+      <path
+         id="Face"
+         d="m 24,18 c 0.38,2.91 -5.55,7.37 -8,9 -3,2 -2.82,4.34 -5,4 -1.042,-0.94 1.41,-3.04 0,-3 -1,0 0.19,1.23 -1,2 C 9,30 6,31 6,26 6,24 12,14 12,14 12,14 4.4725,7.525 4.9587,6.85 5.445,6.175 13.945,11.3 14,10.5 c -0.73,-0.994 -0.5,-2 -0.5,-3 1,-1 3,2.5 3,2.5 h 2 c 0,0 0.78,-1.992 2.5,-3 1,0 1,3 1,3"
+         style="fill:#ffffff;stroke:#000000"
+         inkscape:connector-curvature="0" />
+      <path
+         id="Nose"
+         d="m 9.5,25.5 a 0.5,0.5 0 1 1 -1,0 0.5,0.5 0 1 1 1,0 z"
+         style="fill:#000000;stroke:#000000"
+         inkscape:connector-curvature="0" />
+      <path
+         id="Eye"
+         d="m 15,15.5 a 0.5,1.5 0 1 1 -1,0 0.5,1.5 0 1 1 1,0 z"
+         transform="matrix(0.866,0.5,-0.5,0.866,9.693,-5.173)"
+         style="fill:#000000;stroke:#000000"
+         inkscape:connector-curvature="0" />
+    </g>
+  </g>
+  <path
+     style="fill:none;stroke:#000000;stroke-width:1.01100445px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+     d="m 43.811917,22.102569 -3.4181,-0.489253"
+     id="path19"
+     inkscape:connector-curvature="0" />
+  <path
+     style="fill:none;stroke:#000000;stroke-width:1.01100445px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+     d="m 41.64712,24.711927 2.164797,-2.609358 -2.107828,-2.527814"
+     id="path23"
+     inkscape:connector-curvature="0" />
+</svg>
diff --git a/client/public/images/pieces/Eightpieces/wl_n.svg b/client/public/images/pieces/Eightpieces/wl_n.svg
new file mode 100644
index 00000000..709c7501
--- /dev/null
+++ b/client/public/images/pieces/Eightpieces/wl_n.svg
@@ -0,0 +1,91 @@
+<?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:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   version="1.1"
+   width="45"
+   height="45"
+   id="svg11"
+   sodipodi:docname="wl_n.svg"
+   inkscape:version="0.92.4 5da689c313, 2019-01-14">
+  <metadata
+     id="metadata17">
+    <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>
+  <defs
+     id="defs15" />
+  <sodipodi:namedview
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1"
+     objecttolerance="10"
+     gridtolerance="10"
+     guidetolerance="10"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:window-width="960"
+     inkscape:window-height="1180"
+     id="namedview13"
+     showgrid="false"
+     inkscape:zoom="14.833529"
+     inkscape:cx="23.016186"
+     inkscape:cy="22.5"
+     inkscape:window-x="0"
+     inkscape:window-y="20"
+     inkscape:window-maximized="0"
+     inkscape:current-layer="svg11" />
+  <g
+     id="g9"
+     transform="matrix(0.8552894,0.59753453,-0.8552894,0.59753453,24.254527,-2.8002507)">
+    <title
+       id="title2">Unicorn</title>
+    <g
+       id="Head"
+       style="opacity:1;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#000000;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1">
+      <path
+         id="Neck"
+         d="m 22,10 c 10.5,1 16.5,8 16,29 H 15 c 0,-9 10,-6.5 8,-21"
+         style="fill:#ffffff;stroke:#000000"
+         inkscape:connector-curvature="0" />
+      <path
+         id="Face"
+         d="m 24,18 c 0.38,2.91 -5.55,7.37 -8,9 -3,2 -2.82,4.34 -5,4 -1.042,-0.94 1.41,-3.04 0,-3 -1,0 0.19,1.23 -1,2 C 9,30 6,31 6,26 6,24 12,14 12,14 12,14 4.4725,7.525 4.9587,6.85 5.445,6.175 13.945,11.3 14,10.5 c -0.73,-0.994 -0.5,-2 -0.5,-3 1,-1 3,2.5 3,2.5 h 2 c 0,0 0.78,-1.992 2.5,-3 1,0 1,3 1,3"
+         style="fill:#ffffff;stroke:#000000"
+         inkscape:connector-curvature="0" />
+      <path
+         id="Nose"
+         d="m 9.5,25.5 a 0.5,0.5 0 1 1 -1,0 0.5,0.5 0 1 1 1,0 z"
+         style="fill:#000000;stroke:#000000"
+         inkscape:connector-curvature="0" />
+      <path
+         id="Eye"
+         d="m 15,15.5 a 0.5,1.5 0 1 1 -1,0 0.5,1.5 0 1 1 1,0 z"
+         transform="matrix(0.866,0.5,-0.5,0.866,9.693,-5.173)"
+         style="fill:#000000;stroke:#000000"
+         inkscape:connector-curvature="0" />
+    </g>
+  </g>
+  <path
+     style="fill:none;stroke:#000000;stroke-width:1.01100445px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+     d="m 22.134424,1.3014693 0.489254,3.4181001"
+     id="path19"
+     inkscape:connector-curvature="0" />
+  <path
+     style="fill:none;stroke:#000000;stroke-width:1.01100445px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+     d="m 19.525066,3.4662661 2.609358,-2.1647968 2.527815,2.1078284"
+     id="path23"
+     inkscape:connector-curvature="0" />
+</svg>
diff --git a/client/public/images/pieces/Eightpieces/wl_ne.svg b/client/public/images/pieces/Eightpieces/wl_ne.svg
new file mode 100644
index 00000000..d465e729
--- /dev/null
+++ b/client/public/images/pieces/Eightpieces/wl_ne.svg
@@ -0,0 +1,91 @@
+<?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:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   version="1.1"
+   width="45"
+   height="45"
+   id="svg11"
+   sodipodi:docname="wl_ne.svg"
+   inkscape:version="0.92.4 5da689c313, 2019-01-14">
+  <metadata
+     id="metadata17">
+    <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>
+  <defs
+     id="defs15" />
+  <sodipodi:namedview
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1"
+     objecttolerance="10"
+     gridtolerance="10"
+     guidetolerance="10"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:window-width="960"
+     inkscape:window-height="1180"
+     id="namedview13"
+     showgrid="false"
+     inkscape:zoom="14.833529"
+     inkscape:cx="23.016186"
+     inkscape:cy="22.5"
+     inkscape:window-x="0"
+     inkscape:window-y="20"
+     inkscape:window-maximized="0"
+     inkscape:current-layer="svg11" />
+  <g
+     id="g9"
+     transform="matrix(-1,0,0,1,40.423042,0)">
+    <title
+       id="title2">Unicorn</title>
+    <g
+       id="Head"
+       style="opacity:1;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#000000;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1">
+      <path
+         id="Neck"
+         d="m 22,10 c 10.5,1 16.5,8 16,29 H 15 c 0,-9 10,-6.5 8,-21"
+         style="fill:#ffffff;stroke:#000000"
+         inkscape:connector-curvature="0" />
+      <path
+         id="Face"
+         d="m 24,18 c 0.38,2.91 -5.55,7.37 -8,9 -3,2 -2.82,4.34 -5,4 -1.042,-0.94 1.41,-3.04 0,-3 -1,0 0.19,1.23 -1,2 C 9,30 6,31 6,26 6,24 12,14 12,14 12,14 4.4725,7.525 4.9587,6.85 5.445,6.175 13.945,11.3 14,10.5 c -0.73,-0.994 -0.5,-2 -0.5,-3 1,-1 3,2.5 3,2.5 h 2 c 0,0 0.78,-1.992 2.5,-3 1,0 1,3 1,3"
+         style="fill:#ffffff;stroke:#000000"
+         inkscape:connector-curvature="0" />
+      <path
+         id="Nose"
+         d="m 9.5,25.5 a 0.5,0.5 0 1 1 -1,0 0.5,0.5 0 1 1 1,0 z"
+         style="fill:#000000;stroke:#000000"
+         inkscape:connector-curvature="0" />
+      <path
+         id="Eye"
+         d="m 15,15.5 a 0.5,1.5 0 1 1 -1,0 0.5,1.5 0 1 1 1,0 z"
+         transform="matrix(0.866,0.5,-0.5,0.866,9.693,-5.173)"
+         style="fill:#000000;stroke:#000000"
+         inkscape:connector-curvature="0" />
+    </g>
+  </g>
+  <path
+     style="fill:none;stroke:#000000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+     d="M 38.230245,4.6716101 35.084059,7.2457627"
+     id="path19"
+     inkscape:connector-curvature="0" />
+  <path
+     style="fill:none;stroke:#000000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+     d="M 37.944228,8.0084746 38.230245,4.6716101 34.98872,4.9576271"
+     id="path23"
+     inkscape:connector-curvature="0" />
+</svg>
diff --git a/client/public/images/pieces/Eightpieces/wl_nw.svg b/client/public/images/pieces/Eightpieces/wl_nw.svg
new file mode 100644
index 00000000..a5aba418
--- /dev/null
+++ b/client/public/images/pieces/Eightpieces/wl_nw.svg
@@ -0,0 +1,86 @@
+<?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:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   version="1.1"
+   width="45"
+   height="45"
+   id="svg11"
+   sodipodi:docname="wl.svg"
+   inkscape:version="0.92.4 5da689c313, 2019-01-14">
+  <metadata
+     id="metadata17">
+    <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>
+  <defs
+     id="defs15" />
+  <sodipodi:namedview
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1"
+     objecttolerance="10"
+     gridtolerance="10"
+     guidetolerance="10"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:window-width="960"
+     inkscape:window-height="1180"
+     id="namedview13"
+     showgrid="false"
+     inkscape:zoom="14.833529"
+     inkscape:cx="22.881356"
+     inkscape:cy="22.5"
+     inkscape:window-x="0"
+     inkscape:window-y="20"
+     inkscape:window-maximized="0"
+     inkscape:current-layer="svg11" />
+  <g
+     id="g9">
+    <title
+       id="title2">Unicorn</title>
+    <g
+       id="Head"
+       style="opacity:1; fill:none; fill-opacity:1; fill-rule:evenodd; stroke:#000000; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; stroke-miterlimit:4; stroke-dasharray:none; stroke-opacity:1;">
+      <path
+         id="Neck"
+         d="M 22,10 C 32.5,11 38.5,18 38,39 L 15,39 C 15,30 25,32.5 23,18"
+         style="fill:#ffffff; stroke:#000000;" />
+      <path
+         id="Face"
+         d="m24,18c0.38,2.91 -5.55,7.37 -8,9c-3,2 -2.82,4.34 -5,4c-1.042,-0.94 1.41,-3.04 0,-3c-1,0 0.19,1.23 -1,2c-1,0 -4,1 -4,-4c0,-2 6,-12 6,-12c0,0 -7.5275,-6.475 -7.0413,-7.15c0.4863,-0.675 8.9863,4.45 9.0413,3.65c-0.73,-0.994 -0.5,-2 -0.5,-3c1,-1 3,2.5 3,2.5l2,0c0,0 0.78,-1.992 2.5,-3c1,0 1,3 1,3"
+         style="fill:#ffffff; stroke:#000000;" />
+      <path
+         id="Nose"
+         d="M 9.5 25.5 A 0.5 0.5 0 1 1 8.5,25.5 A 0.5 0.5 0 1 1 9.5 25.5 z"
+         style="fill:#000000; stroke:#000000;" />
+      <path
+         id="Eye"
+         d="M 15 15.5 A 0.5 1.5 0 1 1  14,15.5 A 0.5 1.5 0 1 1  15 15.5 z"
+         transform="matrix(0.866,0.5,-0.5,0.866,9.693,-5.173)"
+         style="fill:#000000; stroke:#000000;" />
+    </g>
+  </g>
+  <path
+     style="fill:none;stroke:#000000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+     d="M 2.1927966,4.6716101 5.3389831,7.2457627"
+     id="path19"
+     inkscape:connector-curvature="0" />
+  <path
+     style="fill:none;stroke:#000000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+     d="M 2.4788136,8.0084746 2.1927966,4.6716101 5.434322,4.9576271"
+     id="path23"
+     inkscape:connector-curvature="0" />
+</svg>
diff --git a/client/public/images/pieces/Eightpieces/wl_s.svg b/client/public/images/pieces/Eightpieces/wl_s.svg
new file mode 100644
index 00000000..c615a7ac
--- /dev/null
+++ b/client/public/images/pieces/Eightpieces/wl_s.svg
@@ -0,0 +1,91 @@
+<?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:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   version="1.1"
+   width="45"
+   height="45"
+   id="svg11"
+   sodipodi:docname="wl_s.svg"
+   inkscape:version="0.92.4 5da689c313, 2019-01-14">
+  <metadata
+     id="metadata17">
+    <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>
+  <defs
+     id="defs15" />
+  <sodipodi:namedview
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1"
+     objecttolerance="10"
+     gridtolerance="10"
+     guidetolerance="10"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:window-width="960"
+     inkscape:window-height="1180"
+     id="namedview13"
+     showgrid="false"
+     inkscape:zoom="14.833529"
+     inkscape:cx="23.016186"
+     inkscape:cy="22.5"
+     inkscape:window-x="0"
+     inkscape:window-y="20"
+     inkscape:window-maximized="0"
+     inkscape:current-layer="svg11" />
+  <g
+     id="g9"
+     transform="matrix(0.8552894,-0.59753453,-0.8552894,-0.59753453,24.254527,47.287884)">
+    <title
+       id="title2">Unicorn</title>
+    <g
+       id="Head"
+       style="opacity:1;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#000000;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1">
+      <path
+         id="Neck"
+         d="m 22,10 c 10.5,1 16.5,8 16,29 H 15 c 0,-9 10,-6.5 8,-21"
+         style="fill:#ffffff;stroke:#000000"
+         inkscape:connector-curvature="0" />
+      <path
+         id="Face"
+         d="m 24,18 c 0.38,2.91 -5.55,7.37 -8,9 -3,2 -2.82,4.34 -5,4 -1.042,-0.94 1.41,-3.04 0,-3 -1,0 0.19,1.23 -1,2 C 9,30 6,31 6,26 6,24 12,14 12,14 12,14 4.4725,7.525 4.9587,6.85 5.445,6.175 13.945,11.3 14,10.5 c -0.73,-0.994 -0.5,-2 -0.5,-3 1,-1 3,2.5 3,2.5 h 2 c 0,0 0.78,-1.992 2.5,-3 1,0 1,3 1,3"
+         style="fill:#ffffff;stroke:#000000"
+         inkscape:connector-curvature="0" />
+      <path
+         id="Nose"
+         d="m 9.5,25.5 a 0.5,0.5 0 1 1 -1,0 0.5,0.5 0 1 1 1,0 z"
+         style="fill:#000000;stroke:#000000"
+         inkscape:connector-curvature="0" />
+      <path
+         id="Eye"
+         d="m 15,15.5 a 0.5,1.5 0 1 1 -1,0 0.5,1.5 0 1 1 1,0 z"
+         transform="matrix(0.866,0.5,-0.5,0.866,9.693,-5.173)"
+         style="fill:#000000;stroke:#000000"
+         inkscape:connector-curvature="0" />
+    </g>
+  </g>
+  <path
+     style="fill:none;stroke:#000000;stroke-width:1.01100445px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+     d="m 22.134424,43.186164 0.489254,-3.4181"
+     id="path19"
+     inkscape:connector-curvature="0" />
+  <path
+     style="fill:none;stroke:#000000;stroke-width:1.01100445px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+     d="m 19.525066,41.021367 2.609358,2.164797 2.527815,-2.107829"
+     id="path23"
+     inkscape:connector-curvature="0" />
+</svg>
diff --git a/client/public/images/pieces/Eightpieces/wl_se.svg b/client/public/images/pieces/Eightpieces/wl_se.svg
new file mode 100644
index 00000000..d369fc82
--- /dev/null
+++ b/client/public/images/pieces/Eightpieces/wl_se.svg
@@ -0,0 +1,91 @@
+<?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:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   version="1.1"
+   width="45"
+   height="45"
+   id="svg11"
+   sodipodi:docname="wl_se.svg"
+   inkscape:version="0.92.4 5da689c313, 2019-01-14">
+  <metadata
+     id="metadata17">
+    <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 />
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <defs
+     id="defs15" />
+  <sodipodi:namedview
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1"
+     objecttolerance="10"
+     gridtolerance="10"
+     guidetolerance="10"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:window-width="960"
+     inkscape:window-height="1180"
+     id="namedview13"
+     showgrid="false"
+     inkscape:zoom="14.833529"
+     inkscape:cx="23.016186"
+     inkscape:cy="22.5"
+     inkscape:window-x="0"
+     inkscape:window-y="20"
+     inkscape:window-maximized="0"
+     inkscape:current-layer="svg11" />
+  <g
+     id="g9"
+     transform="matrix(0,-1,-1,0,41.834771,44.376812)">
+    <title
+       id="title2">Unicorn</title>
+    <g
+       id="Head"
+       style="opacity:1;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#000000;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1">
+      <path
+         id="Neck"
+         d="m 22,10 c 10.5,1 16.5,8 16,29 H 15 c 0,-9 10,-6.5 8,-21"
+         style="fill:#ffffff;stroke:#000000"
+         inkscape:connector-curvature="0" />
+      <path
+         id="Face"
+         d="m 24,18 c 0.38,2.91 -5.55,7.37 -8,9 -3,2 -2.82,4.34 -5,4 -1.042,-0.94 1.41,-3.04 0,-3 -1,0 0.19,1.23 -1,2 C 9,30 6,31 6,26 6,24 12,14 12,14 12,14 4.4725,7.525 4.9587,6.85 5.445,6.175 13.945,11.3 14,10.5 c -0.73,-0.994 -0.5,-2 -0.5,-3 1,-1 3,2.5 3,2.5 h 2 c 0,0 0.78,-1.992 2.5,-3 1,0 1,3 1,3"
+         style="fill:#ffffff;stroke:#000000"
+         inkscape:connector-curvature="0" />
+      <path
+         id="Nose"
+         d="m 9.5,25.5 a 0.5,0.5 0 1 1 -1,0 0.5,0.5 0 1 1 1,0 z"
+         style="fill:#000000;stroke:#000000"
+         inkscape:connector-curvature="0" />
+      <path
+         id="Eye"
+         d="m 15,15.5 a 0.5,1.5 0 1 1 -1,0 0.5,1.5 0 1 1 1,0 z"
+         transform="matrix(0.866,0.5,-0.5,0.866,9.693,-5.173)"
+         style="fill:#000000;stroke:#000000"
+         inkscape:connector-curvature="0" />
+    </g>
+  </g>
+  <path
+     style="fill:none;stroke:#000000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+     d="M 37.472324,42.317837 34.898172,39.171651"
+     id="path19"
+     inkscape:connector-curvature="0" />
+  <path
+     style="fill:none;stroke:#000000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+     d="m 34.742193,42.436309 3.336865,0.286017 -0.286017,-3.241525"
+     id="path23"
+     inkscape:connector-curvature="0" />
+</svg>
diff --git a/client/public/images/pieces/Eightpieces/wl_sw.svg b/client/public/images/pieces/Eightpieces/wl_sw.svg
new file mode 100644
index 00000000..8ec16795
--- /dev/null
+++ b/client/public/images/pieces/Eightpieces/wl_sw.svg
@@ -0,0 +1,91 @@
+<?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:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   version="1.1"
+   width="45"
+   height="45"
+   id="svg11"
+   sodipodi:docname="wl_sw.svg"
+   inkscape:version="0.92.4 5da689c313, 2019-01-14">
+  <metadata
+     id="metadata17">
+    <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>
+  <defs
+     id="defs15" />
+  <sodipodi:namedview
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1"
+     objecttolerance="10"
+     gridtolerance="10"
+     guidetolerance="10"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:window-width="960"
+     inkscape:window-height="1180"
+     id="namedview13"
+     showgrid="false"
+     inkscape:zoom="14.833529"
+     inkscape:cx="23.016186"
+     inkscape:cy="22.5"
+     inkscape:window-x="0"
+     inkscape:window-y="20"
+     inkscape:window-maximized="0"
+     inkscape:current-layer="svg11" />
+  <g
+     id="g9"
+     transform="rotate(-90,21.628127,22.748685)">
+    <title
+       id="title2">Unicorn</title>
+    <g
+       id="Head"
+       style="opacity:1;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#000000;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1">
+      <path
+         id="Neck"
+         d="m 22,10 c 10.5,1 16.5,8 16,29 H 15 c 0,-9 10,-6.5 8,-21"
+         style="fill:#ffffff;stroke:#000000"
+         inkscape:connector-curvature="0" />
+      <path
+         id="Face"
+         d="m 24,18 c 0.38,2.91 -5.55,7.37 -8,9 -3,2 -2.82,4.34 -5,4 -1.042,-0.94 1.41,-3.04 0,-3 -1,0 0.19,1.23 -1,2 C 9,30 6,31 6,26 6,24 12,14 12,14 12,14 4.4725,7.525 4.9587,6.85 5.445,6.175 13.945,11.3 14,10.5 c -0.73,-0.994 -0.5,-2 -0.5,-3 1,-1 3,2.5 3,2.5 h 2 c 0,0 0.78,-1.992 2.5,-3 1,0 1,3 1,3"
+         style="fill:#ffffff;stroke:#000000"
+         inkscape:connector-curvature="0" />
+      <path
+         id="Nose"
+         d="m 9.5,25.5 a 0.5,0.5 0 1 1 -1,0 0.5,0.5 0 1 1 1,0 z"
+         style="fill:#000000;stroke:#000000"
+         inkscape:connector-curvature="0" />
+      <path
+         id="Eye"
+         d="m 15,15.5 a 0.5,1.5 0 1 1 -1,0 0.5,1.5 0 1 1 1,0 z"
+         transform="matrix(0.866,0.5,-0.5,0.866,9.693,-5.173)"
+         style="fill:#000000;stroke:#000000"
+         inkscape:connector-curvature="0" />
+    </g>
+  </g>
+  <path
+     style="fill:none;stroke:#000000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+     d="m 3.2418896,42.317837 2.574152,-3.146186"
+     id="path19"
+     inkscape:connector-curvature="0" />
+  <path
+     style="fill:none;stroke:#000000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+     d="m 5.9720206,42.436309 -3.336865,0.286017 0.286017,-3.241525"
+     id="path23"
+     inkscape:connector-curvature="0" />
+</svg>
diff --git a/client/public/images/pieces/Eightpieces/wl_w.svg b/client/public/images/pieces/Eightpieces/wl_w.svg
new file mode 100644
index 00000000..6c49f43d
--- /dev/null
+++ b/client/public/images/pieces/Eightpieces/wl_w.svg
@@ -0,0 +1,91 @@
+<?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:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   version="1.1"
+   width="45"
+   height="45"
+   id="svg11"
+   sodipodi:docname="wl_w.svg"
+   inkscape:version="0.92.4 5da689c313, 2019-01-14">
+  <metadata
+     id="metadata17">
+    <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>
+  <defs
+     id="defs15" />
+  <sodipodi:namedview
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1"
+     objecttolerance="10"
+     gridtolerance="10"
+     guidetolerance="10"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:window-width="960"
+     inkscape:window-height="1180"
+     id="namedview13"
+     showgrid="false"
+     inkscape:zoom="14.833529"
+     inkscape:cx="23.016186"
+     inkscape:cy="22.5"
+     inkscape:window-x="0"
+     inkscape:window-y="20"
+     inkscape:window-maximized="0"
+     inkscape:current-layer="svg11" />
+  <g
+     id="g9"
+     transform="matrix(0.59753453,-0.8552894,0.59753453,0.8552894,-2.1744975,19.982467)">
+    <title
+       id="title2">Unicorn</title>
+    <g
+       id="Head"
+       style="opacity:1;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#000000;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1">
+      <path
+         id="Neck"
+         d="m 22,10 c 10.5,1 16.5,8 16,29 H 15 c 0,-9 10,-6.5 8,-21"
+         style="fill:#ffffff;stroke:#000000"
+         inkscape:connector-curvature="0" />
+      <path
+         id="Face"
+         d="m 24,18 c 0.38,2.91 -5.55,7.37 -8,9 -3,2 -2.82,4.34 -5,4 -1.042,-0.94 1.41,-3.04 0,-3 -1,0 0.19,1.23 -1,2 C 9,30 6,31 6,26 6,24 12,14 12,14 12,14 4.4725,7.525 4.9587,6.85 5.445,6.175 13.945,11.3 14,10.5 c -0.73,-0.994 -0.5,-2 -0.5,-3 1,-1 3,2.5 3,2.5 h 2 c 0,0 0.78,-1.992 2.5,-3 1,0 1,3 1,3"
+         style="fill:#ffffff;stroke:#000000"
+         inkscape:connector-curvature="0" />
+      <path
+         id="Nose"
+         d="m 9.5,25.5 a 0.5,0.5 0 1 1 -1,0 0.5,0.5 0 1 1 1,0 z"
+         style="fill:#000000;stroke:#000000"
+         inkscape:connector-curvature="0" />
+      <path
+         id="Eye"
+         d="m 15,15.5 a 0.5,1.5 0 1 1 -1,0 0.5,1.5 0 1 1 1,0 z"
+         transform="matrix(0.866,0.5,-0.5,0.866,9.693,-5.173)"
+         style="fill:#000000;stroke:#000000"
+         inkscape:connector-curvature="0" />
+    </g>
+  </g>
+  <path
+     style="fill:none;stroke:#000000;stroke-width:1.01100445px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+     d="m 1.9272225,22.102569 3.4181,-0.489253"
+     id="path19"
+     inkscape:connector-curvature="0" />
+  <path
+     style="fill:none;stroke:#000000;stroke-width:1.01100445px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+     d="m 4.0920195,24.711927 -2.164797,-2.609358 2.107828,-2.527814"
+     id="path23"
+     inkscape:connector-curvature="0" />
+</svg>
diff --git a/client/public/images/pieces/Eightpieces/ws.svg b/client/public/images/pieces/Eightpieces/ws.svg
new file mode 100644
index 00000000..457c8f28
--- /dev/null
+++ b/client/public/images/pieces/Eightpieces/ws.svg
@@ -0,0 +1,102 @@
+<?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:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   height="100%"
+   width="100%"
+   version="1.1"
+   viewBox="0 0 2048 2048"
+   id="svg18"
+   sodipodi:docname="ws.svg"
+   inkscape:version="0.92.4 5da689c313, 2019-01-14">
+  <metadata
+     id="metadata24">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <defs
+     id="defs22" />
+  <sodipodi:namedview
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1"
+     objecttolerance="10"
+     gridtolerance="10"
+     guidetolerance="10"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:window-width="1920"
+     inkscape:window-height="1180"
+     id="namedview20"
+     showgrid="false"
+     inkscape:zoom="0.23046875"
+     inkscape:cx="1041.3559"
+     inkscape:cy="1024"
+     inkscape:window-x="0"
+     inkscape:window-y="20"
+     inkscape:window-maximized="0"
+     inkscape:current-layer="svg18" />
+  <path
+     style="color:black;"
+     d="m1024 1166q97 0 186 15 98-35 142-109 38-64 38-141 0-46-23-101t-75-101q-59-49-129-107t-139-137q-70 78-140 136t-128 108q-53 45-75 100t-23 102q0 77 37 141 43 74 143 109 88-15 186-15z"
+     fill-rule="nonzero"
+     display="block"
+     fill="#fff"
+     id="path2" />
+  <path
+     style="color:black;"
+     d="m988 1138l-83 1q-34 0-34 34t34 34h83v86q0 35 36 35 35 0 35-35v-86h86q33 0 33-34t-33-34h-86v-82q0-36-35-36-36 0-36 36v81zm36-578q68 0 132 11t125 28q-117 31-257 31-142 0-257-31 58-16 123-27t134-12zm0 1089q68 0 68 68t-68 68-68-68 68-68zm0-949q117 0 225-23l-48 123q-88 14-177 14-91 0-178-14l-48-123q107 23 226 23zm0 182q97 0 186-15 98 35 142 109 38 64 38 141 0 46-23 101t-75 101q-59 49-129 107t-139 137q-70-78-140-136t-128-108q-53-45-75-100t-23-102q0-77 37-141 43-74 143-109 88 15 186 15zm-36-377h-32q-56-90-107-113-24-12-53-22t-67-10q-7 0-107 16-48 7-76 15t-44 10q-57 7-133-6-46-8-86-29l48-78q12 12 31 15t36 8q42 7 80 2 13-3 51-7t101-15q75-11 102-11 105 0 161 40 34 26 64 72t31 113zm36-113q-14-57-34-79t-53-46q-36-25-85-42t-109-9l-281 39q-17 2-30 0t-26-2q-21 0-53-9t-51-28l-97 159q18 20 32 28t33 17q58 27 124 33 28 2 55 1t56 2q54-9 108-16t110-16q60 0 81 12 11 6 35 22t48 47q-53 6-108 20t-97 31l104 258q-78 45-109 72t-49 64q-26 46-33 89t-7 77q1 60 28 132t104 130q63 48 123 99t119 119q-74 38-74 121 0 56 39 96t97 40q56 0 96-40t40-96q0-82-74-121 58-68 117-119t125-99q75-57 102-129t29-133q0-34-7-77t-32-89q-20-36-50-63t-108-73l104-258q-44-16-99-30t-106-21q23-31 47-47t36-22q21-12 81-12 54 8 108 15t110 17q27-3 54-2t57-1q64-6 124-33 18-9 32-17t33-28l-98-159q-18 18-50 27t-53 10q-13 0-26 2t-31 0l-280-39q-60-9-111 8t-85 45q-33 27-52 46t-33 77zm35 113q0-66 30-112t66-73q55-40 161-40 26 0 102 11 62 10 100 14t51 8q38 5 80-2 16-4 35-7t33-16l48 78q-41 21-87 29-76 13-133 6-17-2-44-10t-75-15q-101-16-107-16-39 0-68 10t-52 22q-53 24-108 113h-32z"
+     fill-rule="nonzero"
+     transform="translate(0,2048) scale(1,-1)"
+     display="block"
+     fill="#000"
+     id="path4" />
+  <g
+     fill-rule="nonzero"
+     fill="#fff"
+     id="g16">
+    <path
+       style="color:black;"
+       d="m1024 1488q68 0 132-11t125-28q-117-31-257-31-142 0-257 31 58 16 123 27t134 12z"
+       display="block"
+       id="path6" />
+    <path
+       style="color:black;"
+       d="m1024 399q68 0 68-68t-68-68-68 68 68 68z"
+       display="block"
+       id="path8" />
+    <path
+       style="color:black;"
+       d="m1024 1348q117 0 225 23l-48-123q-88-14-177-14-91 0-178 14l-48 123q107-23 226-23z"
+       display="block"
+       id="path10" />
+    <path
+       style="color:black;"
+       d="m988 1543h-32q-56 90-107 113-24 12-53 22t-67 10q-7 0-107-16-48-7-76-15t-44-10q-57-7-133 6-46 8-86 29l48 78q12-12 31-15t36-8q42-7 80-2 13 3 51 7t101 15q75 11 102 11 105 0 161-40 34-26 64-72t31-113z"
+       display="block"
+       id="path12" />
+    <path
+       style="color:black;"
+       d="m1059 1543q0 66 30 112t66 73q55 40 161 40 26 0 102-11 62-10 100-14t51-8q38-5 80 2 16 4 35 7t33 16l48-78q-41-21-87-29-76-13-133-6-17 2-44 10t-75 15q-101 16-107 16-39 0-68-10t-52-22q-53-24-108-113h-32z"
+       display="block"
+       id="path14" />
+  </g>
+  <rect
+     style="fill:#ffffff"
+     id="rect28"
+     width="390.50848"
+     height="355.7966"
+     x="820.06781"
+     y="707.25421" />
+</svg>
diff --git a/client/src/variants/Eightpieces.js b/client/src/variants/Eightpieces.js
new file mode 100644
index 00000000..06ece2a6
--- /dev/null
+++ b/client/src/variants/Eightpieces.js
@@ -0,0 +1,100 @@
+import { ArrayFun } from "@/utils/array";
+import { randInt, shuffle } from "@/utils/alea";
+import { ChessRules, PiPo, Move } from "@/base_rules";
+
+export const VariantRules = class EightpiecesRules extends ChessRules {
+  static get JAILER() {
+    return "j";
+  }
+  static get SENTRY() {
+    return "s";
+  }
+  static get LANCER() {
+    return "l";
+  }
+
+  static get PIECES() {
+    return ChessRules.PIECES.concat([V.JAILER, V.SENTRY, V.LANCER]);
+  }
+
+  getPpath(b) {
+    // TODO: more subtle, path depends on the orientations
+    // lancerOrientations should probably be a 8x8 array, for speed.
+    return (
+      ([V.JAILER, V.SENTRY, V.LANCER].includes(b[1])
+        ? "Eightpieces/" : "") + b
+    );
+  }
+
+  static IsGoodFen(fen) {
+    if (!ChessRules.IsGoodFen(fen)) return false;
+    const fenParsed = V.ParseFen(fen);
+    // 5) Check lancers orientations (if there are any left)
+    if (
+      !fenParsed.lancers ||
+      (
+        fenParsed.lancers != "-" &&
+        !fenParsed.lancers.match(/^([a-h][1-8][0-7],?)+$/)
+      )
+    ) {
+      return false;
+    }
+    return true;
+  }
+
+  static ParseFen(fen) {
+    const fenParts = fen.split(" ");
+    return Object.assign(ChessRules.ParseFen(fen), {
+      lancers: fenParts[5],
+    });
+  }
+
+  static GenRandInitFen(randomness) {
+    // TODO: special conditions
+  }
+
+  getFen() {
+    return (
+      super.getFen() + " " + this.getLancersFen()
+    );
+  }
+
+  getFenForRepeat() {
+    return (
+      this.getBaseFen() + "_" +
+      this.getTurnFen() + "_" +
+      this.getFlagsFen() + "_" +
+      this.getEnpassantFen() + "_" +
+      this.getLancersFen()
+    );
+  }
+
+  getLancersFen() {
+    let res = "";
+    this.lancerOrientations.forEach(o => {
+      res += V.CoordsToSquare(o.sq) + o.dir + ",";
+    });
+    res = res.slice(0, -1);
+    return res || "-";
+  }
+
+  setOtherVariables(fen) {
+    super.setOtherVariables(fen);
+    const fenParsed = V.ParseFen(fen);
+    // Also init lancer orientations (from FEN):
+    this.lancerOrientations = 32; // TODO
+  }
+
+  // getPotentialMoves, isAttacked: TODO
+
+  // updatedVariables: update lancers' orientations
+
+  // subTurn : if sentry moved to some enemy piece.
+
+  static get VALUES() {
+    return Object.assign(
+      { l: 5, s: 4, j: 5 }, //experimental
+      ChessRules.VALUES
+    );
+  }
+};
diff --git a/client/src/views/MyGames.vue b/client/src/views/MyGames.vue
index 5d862073..953c976e 100644
--- a/client/src/views/MyGames.vue
+++ b/client/src/views/MyGames.vue
@@ -141,11 +141,17 @@ export default {
             {
               vname: vname,
               type: type,
-              score: "*"
+              score: "*",
+              turn: "w"
             },
             gameInfo
           );
-          this[type + "Games"].push(game);
+          // TODO: the new game isn't sorted. Maybe apply a different strategy:
+          // 1) Sort all at loading,
+          // 2) Insert in place when new games arrive,
+          // 3) Change position when score or turn change.
+          // And GameList just show list unsorted.
+          this[type + "Games"].unshift(game);
           this.tryShowNewsIndicator(type);
           break;
         }
@@ -165,6 +171,7 @@ export default {
           g.players[0].sid == this.st.user.sid
             ? "w"
             : "b";
+        if (!!g.turn) return g.turn == myColor;
         const rem = g.movesCount % 2;
         return (
           (rem == 0 && myColor == "w") ||
-- 
2.44.0