From 8081f3a483f7078c42853c0b7f302b181f9afa9a Mon Sep 17 00:00:00 2001
From: sessionm21 <sessionm@oregonstate.edu>
Date: Sat, 2 Jun 2018 21:07:38 -0700
Subject: [PATCH] using svg images

---
 public/css/main.css   | 31 +++++++++++----------
 public/svg/black.svg  | 59 +++++++++++++++++++++++++++++++++++++++
 public/svg/circle.svg | 58 +++++++++++++++++++++++++++++++++++++++
 public/svg/cross.svg  | 64 +++++++++++++++++++++++++++++++++++++++++++
 public/svg/white.svg  | 59 +++++++++++++++++++++++++++++++++++++++
 5 files changed, 257 insertions(+), 14 deletions(-)
 create mode 100644 public/svg/black.svg
 create mode 100644 public/svg/circle.svg
 create mode 100644 public/svg/cross.svg
 create mode 100644 public/svg/white.svg

diff --git a/public/css/main.css b/public/css/main.css
index 63fe325..16654ce 100644
--- a/public/css/main.css
+++ b/public/css/main.css
@@ -23,36 +23,39 @@ body {
   border-radius: 10px; }
 
 .black-player .overlay:hover {
-  background-color: black; }
+  background-image: url("../svg/black.svg"); }
 
 .white-player .overlay:hover {
-  background-color: white; }
+  background-image: url("../svg/white.svg"); }
 
 .board-cell {
   display: inline-block;
   position: relative;
-  padding: 5.55556%; }
+  background-image: url("../svg/cross.svg");
+  background-size: 100%;
+  padding: 5.5555555556%; }
   .board-cell .overlay {
     position: absolute;
     box-sizing: border-box;
-    top: 10%;
-    left: 10%;
-    width: 80%;
-    height: 80%;
-    border-radius: 50%;
-    transition: background-color .25s; }
+    top: 0%;
+    left: 0%;
+    width: 100%;
+    height: 100%;
+    background-image: url("../svg/cross.svg");
+    transition: background-image .25s;
+    background-size: 100%; }
   .board-cell.small {
-    padding: 5.55556%; }
+    padding: 5.5555555556%; }
   .board-cell.medium {
-    padding: 3.84615%; }
+    padding: 3.8461538462%; }
   .board-cell.large {
-    padding: 2.63158%; }
+    padding: 2.6315789474%; }
 
 .black-cell .overlay {
-  background-color: black; }
+  background-image: url("../svg/black.svg"); }
 
 .white-cell .overlay {
-  background-color: white; }
+  background-image: url("../svg/white.svg"); }
 
 .split-wrapper {
   display: flex;
diff --git a/public/svg/black.svg b/public/svg/black.svg
new file mode 100644
index 0000000..6579684
--- /dev/null
+++ b/public/svg/black.svg
@@ -0,0 +1,59 @@
+<?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"
+   id="svg4"
+   sodipodi:docname="black.svg"
+   inkscape:version="0.92.2 2405546, 2018-03-11">
+  <metadata
+     id="metadata10">
+    <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="defs8" />
+  <sodipodi:namedview
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1"
+     objecttolerance="10"
+     gridtolerance="10"
+     guidetolerance="10"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:window-width="1159"
+     inkscape:window-height="719"
+     id="namedview6"
+     showgrid="false"
+     inkscape:zoom="2.36"
+     inkscape:cx="50"
+     inkscape:cy="50"
+     inkscape:window-x="307"
+     inkscape:window-y="38"
+     inkscape:window-maximized="0"
+     inkscape:current-layer="svg4" />
+  <circle
+     cx="50"
+     cy="50"
+     r="40"
+     stroke="black"
+     stroke-width="3"
+     fill="red"
+     id="circle2"
+     style="fill:#000000" />
+</svg>
diff --git a/public/svg/circle.svg b/public/svg/circle.svg
new file mode 100644
index 0000000..bc301dc
--- /dev/null
+++ b/public/svg/circle.svg
@@ -0,0 +1,58 @@
+<?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"
+   id="svg4"
+   sodipodi:docname="circle.svg"
+   inkscape:version="0.92.2 2405546, 2018-03-11">
+  <metadata
+     id="metadata10">
+    <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="defs8" />
+  <sodipodi:namedview
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1"
+     objecttolerance="10"
+     gridtolerance="10"
+     guidetolerance="10"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:window-width="1159"
+     inkscape:window-height="719"
+     id="namedview6"
+     showgrid="false"
+     inkscape:zoom="2.36"
+     inkscape:cx="50"
+     inkscape:cy="50"
+     inkscape:window-x="307"
+     inkscape:window-y="38"
+     inkscape:window-maximized="0"
+     inkscape:current-layer="svg4" />
+  <circle
+     cx="50"
+     cy="50"
+     r="40"
+     stroke="black"
+     stroke-width="3"
+     fill="red"
+     id="circle2"
+     style="fill:#000000" />
+</svg>
diff --git a/public/svg/cross.svg b/public/svg/cross.svg
new file mode 100644
index 0000000..6b36ac4
--- /dev/null
+++ b/public/svg/cross.svg
@@ -0,0 +1,64 @@
+<?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"
+   id="svg14"
+   sodipodi:docname="crossB.svg"
+   inkscape:version="0.92.2 2405546, 2018-03-11">
+  <metadata
+     id="metadata20">
+    <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="defs18" />
+  <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="1028"
+     id="namedview16"
+     showgrid="false"
+     inkscape:zoom="8.27"
+     inkscape:cx="50"
+     inkscape:cy="50"
+     inkscape:window-x="0"
+     inkscape:window-y="0"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="svg14" />
+  <line
+     x1="50"
+     y1="0"
+     x2="50"
+     y2="100"
+     style="stroke:rgb(0,0,0);stroke-width:2"
+     id="line10" />
+  <line
+     x1="0"
+     y1="50"
+     x2="100"
+     y2="50"
+     style="stroke:rgb(0,0,0);stroke-width:2"
+     id="line12" />
+</svg>
diff --git a/public/svg/white.svg b/public/svg/white.svg
new file mode 100644
index 0000000..1aae189
--- /dev/null
+++ b/public/svg/white.svg
@@ -0,0 +1,59 @@
+<?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"
+   id="svg4"
+   sodipodi:docname="white.svg"
+   inkscape:version="0.92.2 2405546, 2018-03-11">
+  <metadata
+     id="metadata10">
+    <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="defs8" />
+  <sodipodi:namedview
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1"
+     objecttolerance="10"
+     gridtolerance="10"
+     guidetolerance="10"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:window-width="1159"
+     inkscape:window-height="719"
+     id="namedview6"
+     showgrid="false"
+     inkscape:zoom="2.36"
+     inkscape:cx="50"
+     inkscape:cy="50"
+     inkscape:window-x="307"
+     inkscape:window-y="38"
+     inkscape:window-maximized="0"
+     inkscape:current-layer="svg4" />
+  <circle
+     cx="50"
+     cy="50"
+     r="40"
+     stroke="black"
+     stroke-width="3"
+     fill="red"
+     id="circle2"
+     style="fill:#ffffff" />
+</svg>