Render the initial board in Phoenix

assets/css/components/_board.scss

@@ -58,6 +58,14 @@
     display: flex;
     flex-direction: row;
   }
+
+  .board__body {
+    flex-direction: column-reverse;
+  }
+
+  .board__row {
+    flex-direction: row;
+  }
 }
 
 .board--player-is-black {
@@ -70,20 +78,45 @@
     display: flex;
     flex-direction: row-reverse;
   }
+
+  .board__body {
+    flex-direction: column;
+  }
+
+  .board__row {
+    flex-direction: row-reverse;
+  }
 }
 
 .board__body {
   background: $background-color;
   border: 0.25rem solid $foreground-color;
   border-radius: calc(var(--board-size) / 100);
-  display: grid;
+  display: flex;
-  grid-template-columns: repeat(8, 1fr);
+  flex-direction: column;
-  grid-template-rows: repeat(8, 1fr);
   height: 100%;
   padding: 1%;
   width: 100%;
 }
 
+.board__row {
+  display: flex;
+  flex-grow: 1;
+
+  @include odd-between(1, 8) {
+    .square {
+      @include odd-between(1, 8) { @extend %square--black; }
+      @include even-between(1, 8) { @extend %square--white; }
+    }
+  }
+  @include even-between(1, 8) {
+    .square {
+      @include odd-between(1, 8) { @extend %square--white; }
+      @include even-between(1, 8) { @extend %square--black; }
+    }
+  }
+}
+
 .board__rank-labels {
   display: none;
   height: 90%;

assets/css/components/_square.scss

@@ -57,36 +57,13 @@
   border-radius: 4%;
   margin: 0.5px;
   position: relative;
+  flex-grow: 1;
 
   // This is to ensure the squares can be clicked on in PhantomJS
   // TODO: Figure out why we need this
   min-height: 20px;
   min-width: 20px;
 
-  @include odd-between(1, 8) { @extend %square--white; }
-  @include even-between(1, 8) { @extend %square--black; }
-
-  @include odd-between(9, 16) { @extend %square--black; }
-  @include even-between(9, 16) { @extend %square--white; }
-
-  @include odd-between(17, 24) { @extend %square--white; }
-  @include even-between(17, 24) { @extend %square--black; }
-
-  @include odd-between(25, 32) { @extend %square--black; }
-  @include even-between(25, 32) { @extend %square--white; }
-
-  @include odd-between(33, 40) { @extend %square--white; }
-  @include even-between(33, 40) { @extend %square--black; }
-
-  @include odd-between(41, 48) { @extend %square--black; }
-  @include even-between(41, 48) { @extend %square--white; }
-
-  @include odd-between(49, 56) { @extend %square--white; }
-  @include even-between(49, 56) { @extend %square--black; }
-
-  @include odd-between(57, 64) { @extend %square--black; }
-  @include even-between(57, 64) { @extend %square--white; }
-
   &::before {
     background-position: center;
     background-repeat: no-repeat;

lib/chess_web/templates/game/_board.html.eex

@@ -0,0 +1,35 @@
+<div class="board board--black-to-move board--player-is-white">
+  <div class="board__rank-labels">
+    <div class="board__label">1</div>
+    <div class="board__label">2</div>
+    <div class="board__label">3</div>
+    <div class="board__label">4</div>
+    <div class="board__label">5</div>
+    <div class="board__label">6</div>
+    <div class="board__label">7</div>
+    <div class="board__label">8</div>
+  </div>
+  <div class="board__file-labels">
+    <div class="board__label">a</div>
+    <div class="board__label">b</div>
+    <div class="board__label">c</div>
+    <div class="board__label">d</div>
+    <div class="board__label">e</div>
+    <div class="board__label">f</div>
+    <div class="board__label">g</div>
+    <div class="board__label">h</div>
+  </div>
+  <div class="board__body">
+    <%= for rank <- 0..7 do %>
+      <div class="board__row">
+        <%= for file <- 0..7 do %>
+          <%= render "_square.html",
+              rank: rank,
+              file: file,
+              piece: @game.board["#{file},#{rank}"] %>
+        <% end %>
+      </div>
+    <% end %>
+  </div>
+  <div class="game-state game-state--null"></div>
+</div>

lib/chess_web/templates/game/_square.html.eex

@@ -0,0 +1,5 @@
+<%= if @piece == nil do %>
+  <div id="f<%= @file %>-r<%= @rank %>" class="square"></div>
+<% else %>
+  <div id="f<%= @file %>-r<%= @rank %>" class="square square--<%= @piece["type"] %> square--<%= @piece["colour"] %>"></div>
+<% end %>

lib/chess_web/templates/game/show.html.eex

@@ -1,2 +1,25 @@
-<div id="game" data-game-id="<%= @game.id %>">
+<div data-game-id="<%= @game.id %>">
+  <div class="game-grid">
+    <%= render "_board.html", conn: @conn, game: @game %>
+    <div class="game-info">
+      <p>Playing Zaphod Beeblebrox <img class="game-info__opponent-status" src="/images/eye-closed.svg" alt="offline"></p>
+    </div>
+    <div class="move-list">
+      <table class="table table--condensed">
+        <thead>
+          <tr>
+            <th class="move-list__line-number"><span class="visually-hidden">Move no.</span></th>
+            <th class="move-list__header--white">White</th>
+            <th class="move-list__header--black">Black</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr>
+            <th scope="row" class="move-list__line-number">1.</th>
+            <td class="move-list__move move-list__move--white">e4</td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+  </div>
 </div>

lib/chess_web/views/game_view.ex

@@ -44,6 +44,19 @@ defmodule ChessWeb.GameView do
     (current_user(conn).id == game.user_id && "white") || "black"
   end
 
+  def files(conn, game) do
+    ranks(conn, game)
+    |> Enum.reverse
+  end
+
+  def ranks(conn, game) do
+    if game.user_id == current_user(conn).id do
+      7..0
+    else
+      0..7
+    end
+  end
+
   def player(game, user_id) do
     if game.user_id == user_id do
       "white"