From 9d60519f5c1c27ccf55a721c87b0e2dd5d1df73d Mon Sep 17 00:00:00 2001
From: Danila Fedorin <danila.fedorin@gmail.com>
Date: Fri, 25 May 2018 17:45:34 -0700
Subject: [PATCH] Modify Elm HTML output and create stylesheet.

---
 Makefile              |  2 +
 external/GoUI         |  2 +-
 public/css/main.css   | 55 +++++++++++++++++++++++++++
 public/js/Go.js       | 13 ++++++-
 public/scss/main.scss | 87 +++++++++++++++++++++++++++++++++++++++++++
 src/Go/views/game.ecr |  2 +-
 6 files changed, 158 insertions(+), 3 deletions(-)
 create mode 100644 public/css/main.css
 create mode 100644 public/scss/main.scss

diff --git a/Makefile b/Makefile
index 0f10866..75cd6eb 100644
--- a/Makefile
+++ b/Makefile
@@ -1,2 +1,4 @@
 generate-elm :
 	cd external/GoUI && elm make Go.elm --output ../../public/js/Go.js
+generate-css :
+	scss public/scss/main.scss > public/css/main.css
diff --git a/external/GoUI b/external/GoUI
index 4acfc09..54d1229 160000
--- a/external/GoUI
+++ b/external/GoUI
@@ -1 +1 @@
-Subproject commit 4acfc0911a8864c517cb23712c76cddcbc561e69
+Subproject commit 54d1229c9f12ee0edf65774a3335bff70ff78a84
diff --git a/public/css/main.css b/public/css/main.css
new file mode 100644
index 0000000..c46bd58
--- /dev/null
+++ b/public/css/main.css
@@ -0,0 +1,55 @@
+h1, h2, h3, h4, h5, h6 {
+  font-family: "Indie Flower", serif; }
+
+h1 {
+  font-size: 5em;
+  margin: 0px;
+  text-align: center; }
+
+body {
+  font-family: "Raleway", sans-serif;
+  margin: 0px;
+  background-color: #f4f4f4; }
+
+.content-wrapper {
+  max-width: 750px;
+  margin: auto; }
+
+.board {
+  background-color: tomato;
+  padding: 20px;
+  max-width: 500px;
+  margin: auto;
+  border-radius: 10px; }
+
+.black-player .overlay:hover {
+  background-color: black; }
+
+.white-player .overlay:hover {
+  background-color: white; }
+
+.board-cell {
+  display: inline-block;
+  position: relative;
+  padding: 5.55556%; }
+  .board-cell .overlay {
+    position: absolute;
+    box-sizing: border-box;
+    top: 10%;
+    left: 10%;
+    width: 80%;
+    height: 80%;
+    border-radius: 50%;
+    transition: background-color .25s; }
+  .board-cell.small {
+    padding: 5.55556%; }
+  .board-cell.medium {
+    padding: 3.84615%; }
+  .board-cell.large {
+    padding: 2.63158%; }
+
+.black-cell .overlay {
+  background-color: black; }
+
+.white-cell .overlay {
+  background-color: white; }
diff --git a/public/js/Go.js b/public/js/Go.js
index a33d625..867caba 100644
--- a/public/js/Go.js
+++ b/public/js/Go.js
@@ -9504,7 +9504,18 @@ var _user$project$Go_View$renderIndex = function (_p0) {
 				_1: {ctor: '[]'}
 			}
 		},
-		{ctor: '[]'});
+		{
+			ctor: '::',
+			_0: A2(
+				_elm_lang$html$Html$div,
+				{
+					ctor: '::',
+					_0: _elm_lang$html$Html_Attributes$class('overlay'),
+					_1: {ctor: '[]'}
+				},
+				{ctor: '[]'}),
+			_1: {ctor: '[]'}
+		});
 };
 var _user$project$Go_View$renderBoard = F2(
 	function (size, board) {
diff --git a/public/scss/main.scss b/public/scss/main.scss
new file mode 100644
index 0000000..b37a2e0
--- /dev/null
+++ b/public/scss/main.scss
@@ -0,0 +1,87 @@
+$background-grey: #f4f4f4;
+
+@mixin board-cell($size) {
+    padding: 100%/$size/2;
+}
+
+h1, h2, h3, h4, h5, h6 {
+    font-family: "Indie Flower", serif;
+}
+
+h1 {
+    font-size: 5em;
+    margin: 0px;
+    text-align: center;
+}
+
+body {
+    font-family: "Raleway", sans-serif;
+    margin: 0px;
+    background-color: $background-grey;
+}
+
+.content-wrapper {
+    max-width: 750px;
+    margin: auto;
+}
+
+.board {
+    background-color: tomato;
+    padding: 20px;
+    max-width: 500px;
+    margin: auto;
+    border-radius: 10px;
+}
+
+.black-player .overlay {
+    &:hover {
+        background-color: black;
+    }
+}
+
+.white-player .overlay {
+    &:hover {
+        background-color: white;
+    }
+}
+
+.board-cell {
+    display: inline-block;
+    position: relative;
+    @include board-cell(9);
+
+    .overlay {
+        position: absolute;
+        box-sizing: border-box;
+        top: 10%;
+        left: 10%;
+        width: 80%;
+        height: 80%;
+        border-radius: 50%;
+        transition: background-color .25s;
+    }
+
+    &.small {
+        @include board-cell(9);
+    }
+
+    &.medium {
+        @include board-cell(13);
+    }
+
+    &.large {
+        @include board-cell(19);
+    }
+}
+
+.black-cell {
+    .overlay {
+        background-color: black;
+    }
+}
+
+.white-cell {
+    .overlay {
+        background-color: white;
+    }
+}
diff --git a/src/Go/views/game.ecr b/src/Go/views/game.ecr
index 08eb053..816e39e 100644
--- a/src/Go/views/game.ecr
+++ b/src/Go/views/game.ecr
@@ -1,4 +1,4 @@
-<div id="elm-root"></div>
+<div id="elm-root" class="<%= black ? "black" : "white" %>-player"></div>
 <script src="/js/Go.js"></script>
 <script>
     var node = document.getElementById('elm-root')