From 3ee9274f49e62fb6a3f8e59b7d2e9dc271211701 Mon Sep 17 00:00:00 2001
From: Danila Fedorin <danila.fedorin@gmail.com>
Date: Fri, 25 May 2018 23:01:55 -0700
Subject: [PATCH] Add a form for creating / joining sessions.

---
 public/css/main.css    | 66 +++++++++++++++++++++++++++++++--
 public/scss/main.scss  | 84 +++++++++++++++++++++++++++++++++++++++++-
 src/Go.cr              |  2 +-
 src/Go/views/index.ecr | 29 +++++++++++++++
 4 files changed, 176 insertions(+), 5 deletions(-)
 create mode 100644 src/Go/views/index.ecr

diff --git a/public/css/main.css b/public/css/main.css
index c46bd58..63fe325 100644
--- a/public/css/main.css
+++ b/public/css/main.css
@@ -1,10 +1,10 @@
 h1, h2, h3, h4, h5, h6 {
-  font-family: "Indie Flower", serif; }
+  font-family: "Indie Flower", serif;
+  text-align: center; }
 
 h1 {
   font-size: 5em;
-  margin: 0px;
-  text-align: center; }
+  margin: 0px; }
 
 body {
   font-family: "Raleway", sans-serif;
@@ -53,3 +53,63 @@ body {
 
 .white-cell .overlay {
   background-color: white; }
+
+.split-wrapper {
+  display: flex;
+  width: 100%; }
+  @media screen and (max-width: 640px) {
+    .split-wrapper {
+      flex-direction: column; } }
+
+.split-item {
+  flex-grow: 1;
+  box-sizing: border-box; }
+
+.split-wrapper form {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 10px; }
+  .split-wrapper form input {
+    margin-top: 20px;
+    padding: 5px;
+    padding-left: 10px;
+    padding-right: 10px;
+    border: none;
+    outline: none;
+    width: 100%;
+    max-width: 300px; }
+  .split-wrapper form input[type="radio"] {
+    opacity: 0;
+    width: 0px;
+    height: 0px; }
+    .split-wrapper form input[type="radio"]:checked ~ label {
+      color: tomato;
+      transition: color .25s; }
+  .split-wrapper form input[type="submit"] {
+    padding: 10px;
+    background-color: tomato;
+    color: white; }
+    .split-wrapper form input[type="submit"]:focus, .split-wrapper form input[type="submit"]:hover {
+      background-color: inherit;
+      color: tomato;
+      transition: background-color .25s, color .25s; }
+  .split-wrapper form input[type="text"] {
+    background-color: inherit;
+    border-bottom: solid tomato;
+    border-width: 2px;
+    height: 3em;
+    box-sizing: border-box;
+    display: block; }
+    .split-wrapper form input[type="text"]:focus {
+      border-width: 3px;
+      transition: background-color .25s, border-width .25s; }
+  .split-wrapper form .radio-parent {
+    display: flex;
+    margin-top: 20px;
+    width: 100%;
+    max-width: 300px; }
+  .split-wrapper form .radio-wrapper {
+    flex-grow: 1;
+    display: inline-block;
+    text-align: center; }
diff --git a/public/scss/main.scss b/public/scss/main.scss
index b37a2e0..7b7e020 100644
--- a/public/scss/main.scss
+++ b/public/scss/main.scss
@@ -6,12 +6,12 @@ $background-grey: #f4f4f4;
 
 h1, h2, h3, h4, h5, h6 {
     font-family: "Indie Flower", serif;
+    text-align: center;
 }
 
 h1 {
     font-size: 5em;
     margin: 0px;
-    text-align: center;
 }
 
 body {
@@ -85,3 +85,85 @@ body {
         background-color: white;
     }
 }
+
+.split-wrapper {
+    display: flex;
+    @media screen and (max-width: 640px) {
+        flex-direction: column;
+    }
+    width: 100%;
+}
+
+.split-item {
+    flex-grow: 1;
+    box-sizing: border-box;
+}
+
+.split-wrapper form {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding: 10px;
+
+    input {
+        margin-top: 20px;
+        padding: 5px;
+        padding-left: 10px;
+        padding-right: 10px;
+        border: none;
+        outline: none;
+        width: 100%;
+        max-width: 300px;
+    }
+
+    input[type="radio"] {
+        opacity: 0;
+        width: 0px;
+        height: 0px;
+
+        &:checked ~ label {
+            color: tomato;
+            transition: color .25s;
+        }
+    }
+
+    input[type="submit"] {
+        padding: 10px;
+        background-color: tomato;
+        color: white;
+
+        &:focus, &:hover {
+            background-color: inherit;
+            color: tomato;
+            transition: background-color .25s, color .25s;
+        }
+    }
+
+    input[type="text"] {
+        background-color: inherit;
+        border-bottom: solid tomato;
+        border-width: 2px;
+
+        &:focus {
+            border-width: 3px;
+            transition: background-color .25s, border-width .25s;
+        }
+
+        height: 3em;
+        box-sizing: border-box;
+        display: block;
+    }
+    
+    .radio-parent {
+        display: flex;
+        margin-top: 20px;
+        width: 100%;
+        max-width: 300px;
+    }
+
+    .radio-wrapper {
+        flex-grow: 1;
+        display: inline-block;
+        text-align: center;
+    }
+}
diff --git a/src/Go.cr b/src/Go.cr
index f60a467..472e6e5 100644
--- a/src/Go.cr
+++ b/src/Go.cr
@@ -33,7 +33,7 @@ def handle_message(id, game, socket, message)
 end
 
 get "/" do |env|
-    "Hello!"
+    render "src/Go/views/index.ecr", "src/Go/views/base.ecr"
 end
 
 get "/game/:id" do |env|
diff --git a/src/Go/views/index.ecr b/src/Go/views/index.ecr
new file mode 100644
index 0000000..3e065aa
--- /dev/null
+++ b/src/Go/views/index.ecr
@@ -0,0 +1,29 @@
+<div class="split-wrapper">
+    <div class="split-item">
+        <h2>Create Game</h2>
+        <form autocomplete="off" id="create-form" action="/create">
+            <input required placeholder="Session Name" type="text" name="id"></input>
+            <input required placeholder="Your Password" type="text" name="your-password"></input>
+            <input required placeholder="Their Password" type="text" name="their-password"></input>
+            <div class="radio-parent">
+                <div class="radio-wrapper">
+                    <input type="radio" name="color" id="radio-black" value="black" checked></input>
+                    <label for="radio-black">Black</label>
+                </div>
+                <div class="radio-wrapper">
+                    <input type="radio" name="color" id="radio-white" value="white"></input>
+                    <label for="radio-white">White</label>
+                </div>
+            </div>
+            <input type="submit" value="Create Game"></input>
+        </form>
+    </div>
+    <div class="split-item">
+        <h2>Join Game</h2>
+        <form autocomplete="off" id="join-form" action="/game">
+            <input required placeholder="Session Name" type="text" name="id"></input>
+            <input required placeholder="Your Password" type="text" name="password"></input>
+            <input type="submit" value="Join Game"></input>
+        </form>
+    </div>
+</div>