Render the game on create.

external/GoUI

@@ -1 +1 @@
-Subproject commit 54d1229c9f12ee0edf65774a3335bff70ff78a84
+Subproject commit 237630054b0d2fcab327cd271573d769c03f593b

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; }

public/js/Go.js

@@ -9648,13 +9648,8 @@ var _user$project$Main$view = function (m) {
 		{ctor: '[]'},
 		{
 			ctor: '::',
-			_0: _elm_lang$html$Html$text(
-				_elm_lang$core$Basics$toString(m.board)),
-			_1: {
-				ctor: '::',
-				_0: A2(_user$project$Go_View$renderBoard, m.sessionSize, m.board),
-				_1: {ctor: '[]'}
-			}
+			_0: A2(_user$project$Go_View$renderBoard, m.sessionSize, m.board),
+			_1: {ctor: '[]'}
 		});
 };
 var _user$project$Main$initDummy = {

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;
+    }
+}

src/Go.cr

@@ -19,6 +19,10 @@ def lookup_game(db, cache, id) : Go::Game?
     end
 end
 
+def create_game(db, cache, game, id)
+    cache[id] = game
+end
+
 def handle_message(id, game, socket, message)
     split_command = message.split(" ")
     command = split_command[0]
@@ -33,13 +37,15 @@ 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|
-    game_id = env.params.url["id"]
-    game_password = env.params.query["password"]?
-    if game = lookup_game(nil, GAME_CACHE, game_id)
+post "/game" do |env|
+    game_id = env.params.body["id"]?
+    game_password = env.params.body["password"]?
+    if game_id == nil || game_password == nil
+        render_404
+    elsif game = lookup_game(nil, GAME_CACHE, game_id)
         id = game_id
         size = game.size.value
         black = nil
@@ -56,6 +62,42 @@ get "/game/:id" do |env|
     end
 end
 
+post "/create" do |env|
+    game_id = env.params.body["id"]?
+    user_password = env.params.body["your-password"]?
+    other_password = env.params.body["their-password"]?
+    color = env.params.body["color"]?
+
+    color_e = nil
+    if color == "black"
+        color_e = Go::Color::Black
+    elsif color == "white"
+        color_e = Go::Color::White
+    end
+
+    if game_id == nil || user_password == nil || other_password == nil || color == nil || color_e == nil
+        render_404
+    elsif game = lookup_game(nil, GAME_CACHE, game_id)
+        render_404
+    else
+        color_e = color_e.as(Go::Color)
+        user_password = user_password.as(String)
+        other_password = other_password.as(String)
+        if color_e == Go::Color::Black
+            white_pass, black_pass = other_password, user_password
+        else
+            white_pass, black_pass = user_password, other_password
+        end
+        game = Go::Game.new(Go::Size::Small, black_pass, white_pass)
+        create_game(nil, GAME_CACHE, game, game_id.as(String))   
+
+        id = game_id
+        size = game.size.value
+        black = color_e == Go::Color::Black
+        render "src/Go/views/game.ecr", "src/Go/views/base.ecr"
+    end
+end
+
 ws "/game/:id" do |socket, env|
     game_id = env.params.url["id"]
     if game = lookup_game(nil, GAME_CACHE, game_id)

src/Go/views/base.ecr

@@ -1,5 +1,6 @@
 <html>
     <head>
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
         <link rel="stylesheet" href="/css/main.css">
         <link href="https://fonts.googleapis.com/css?family=Indie+Flower|Raleway" rel="stylesheet">
     </head>

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" method="post">
+            <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" method="post">
+            <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>