From 6243259d27c243b5fa8e6412a8dd24b08d567acd Mon Sep 17 00:00:00 2001
From: Dan Barber <github@danbarber.me>
Date: Fri, 11 May 2018 15:51:05 -0400
Subject: [PATCH] Clean up moves display

---
 assets/css/_board.scss                      | 11 +-----
 assets/css/_game_grid.scss                  |  7 ++++
 assets/css/_game_list.scss                  |  2 +-
 assets/css/_headings.scss                   |  6 +++
 assets/css/_layout.scss                     |  2 +-
 assets/css/_move_list.scss                  | 16 ++++++++
 assets/css/_tables.scss                     | 16 ++++++++
 assets/css/_utilities.scss                  |  3 ++
 assets/css/_variables.scss                  | 11 ++++++
 assets/css/app.scss                         |  9 ++++-
 assets/css/base/_tables.scss                |  1 -
 assets/js/app.js                            |  2 +-
 assets/js/components/move-list.js           | 43 ++++++++++++++-------
 lib/chess_web/templates/game/index.html.eex |  2 +-
 lib/chess_web/templates/game/show.html.eex  |  2 -
 15 files changed, 102 insertions(+), 31 deletions(-)
 create mode 100644 assets/css/_game_grid.scss
 create mode 100644 assets/css/_headings.scss
 create mode 100644 assets/css/_move_list.scss
 create mode 100644 assets/css/_tables.scss
 create mode 100644 assets/css/_utilities.scss

diff --git a/assets/css/_board.scss b/assets/css/_board.scss
index 9c6897c..e5474cc 100644
--- a/assets/css/_board.scss
+++ b/assets/css/_board.scss
@@ -1,13 +1,3 @@
-:root {
-  --board-size: 90vmin;
-}
-
-@media (min-aspect-ratio: 10/11) {
-  :root {
-    --board-size: 80vmin;
-  }
-}
-
 @mixin move-indicator {
   border-radius: 50%;
   content: "";
@@ -25,6 +15,7 @@
   border-spacing: 1px;
   box-shadow: 0 calc(var(--board-size) / 200) calc(var(--board-size) / 40) $board-shadow-color;
   color: $white-square-color;
+  grid-area: board;
   height: var(--board-size);
   padding: calc(var(--board-size) / 20);
   position: relative;
diff --git a/assets/css/_game_grid.scss b/assets/css/_game_grid.scss
new file mode 100644
index 0000000..a2af715
--- /dev/null
+++ b/assets/css/_game_grid.scss
@@ -0,0 +1,7 @@
+.game-grid {
+  display: grid;
+  grid-gap: $base-spacing;
+  grid-template-areas: "board moves";
+  grid-template-columns: min-content 1fr;
+  grid-template-rows: var(--board-size);
+}
diff --git a/assets/css/_game_list.scss b/assets/css/_game_list.scss
index af6f663..cae4e98 100644
--- a/assets/css/_game_list.scss
+++ b/assets/css/_game_list.scss
@@ -6,6 +6,6 @@
 }
 
 .your-turn {
-  font-weight: bold;
   background-color: $your-turn-background-color;
+  font-weight: bold;
 }
diff --git a/assets/css/_headings.scss b/assets/css/_headings.scss
new file mode 100644
index 0000000..2f41025
--- /dev/null
+++ b/assets/css/_headings.scss
@@ -0,0 +1,6 @@
+.heading {
+  font-family: $heading-font-family;
+  font-size: modular-scale(1);
+  line-height: $heading-line-height;
+  margin: 0 0 $small-spacing;
+}
diff --git a/assets/css/_layout.scss b/assets/css/_layout.scss
index 26a22bc..25d5eb5 100644
--- a/assets/css/_layout.scss
+++ b/assets/css/_layout.scss
@@ -1,6 +1,7 @@
 html {
   background: $background-color;
   color: mix($background-color, $foreground-color, 20%);
+  font-weight: 300;
 }
 
 a {
@@ -11,7 +12,6 @@ h1,
 h2,
 h3,
 h4 {
-  font-variant: small-caps;
   font-weight: 300;
 }
 
diff --git a/assets/css/_move_list.scss b/assets/css/_move_list.scss
new file mode 100644
index 0000000..235f151
--- /dev/null
+++ b/assets/css/_move_list.scss
@@ -0,0 +1,16 @@
+.move-list {
+  grid-area: moves;
+  overflow-y: auto;
+}
+
+.move-list__line-number {
+  color: mix($background-color, $foreground-color);
+  font-variant-numeric: tabular-nums;
+  font-feature-settings: "tnum";
+}
+
+.move-list__header--white,
+.move-list__move--white,
+.move-list__line-number {
+  text-align: right;
+}
diff --git a/assets/css/_tables.scss b/assets/css/_tables.scss
new file mode 100644
index 0000000..d561a29
--- /dev/null
+++ b/assets/css/_tables.scss
@@ -0,0 +1,16 @@
+.table--condensed {
+  width: auto;
+
+  caption {
+    text-align: left;
+  }
+
+  tr {
+    border: 0;
+  }
+
+  th,
+  td {
+    padding: 0 $base-spacing 0 0;
+  }
+}
diff --git a/assets/css/_utilities.scss b/assets/css/_utilities.scss
new file mode 100644
index 0000000..6e6bbe4
--- /dev/null
+++ b/assets/css/_utilities.scss
@@ -0,0 +1,3 @@
+.visually-hidden {
+  display: none;
+}
diff --git a/assets/css/_variables.scss b/assets/css/_variables.scss
index d8b3c11..f23c8a2 100644
--- a/assets/css/_variables.scss
+++ b/assets/css/_variables.scss
@@ -28,3 +28,14 @@ $available-outline-color: rgba(lighten($available-square-color, 20%), 0.5);
 
 $colours: "black" "white";
 $pieces: king queen bishop knight rook pawn;
+
+:root {
+  --board-size: 90vmin;
+}
+
+@media (min-aspect-ratio: 10/11) {
+  :root {
+    --board-size: 80vmin;
+  }
+}
+
diff --git a/assets/css/app.scss b/assets/css/app.scss
index 68a0709..e55b32d 100644
--- a/assets/css/app.scss
+++ b/assets/css/app.scss
@@ -1,11 +1,18 @@
 @import "bourbon/bourbon";
-@import "base/base";
 @import "vendor/family";
+@import "base/base";
 
 @import "variables";
 
+@import "utilities";
+
+@import "tables";
+@import "headings";
+
 @import "layout";
 @import "nav";
 
 @import "game_list";
 @import "board";
+@import "move_list";
+@import "game_grid";
diff --git a/assets/css/base/_tables.scss b/assets/css/base/_tables.scss
index a2928c0..e25bc52 100644
--- a/assets/css/base/_tables.scss
+++ b/assets/css/base/_tables.scss
@@ -1,6 +1,5 @@
 table {
   border-collapse: collapse;
-  margin: $base-spacing 0;
   table-layout: fixed;
   text-align: left;
   width: 100%;
diff --git a/assets/js/app.js b/assets/js/app.js
index fd0c663..dcb8d3f 100644
--- a/assets/js/app.js
+++ b/assets/js/app.js
@@ -35,7 +35,7 @@ class App extends React.Component {
     const { store, gameId } = this.props;
 
     return (
-      <div>
+      <div className="game-grid">
         <ChessBoard
           gameId={gameId}
           store={store}
diff --git a/assets/js/components/move-list.js b/assets/js/components/move-list.js
index 25a16e3..759b70d 100644
--- a/assets/js/components/move-list.js
+++ b/assets/js/components/move-list.js
@@ -1,6 +1,7 @@
 import React from "react";
-import { connect } from "react-redux";
 import _ from "lodash";
+import { connect } from "react-redux";
+import classNames from "classnames";
 
 const pieceToNotation = (piece) => {
   const pieces = {
@@ -15,10 +16,14 @@ const pieceToNotation = (piece) => {
   return pieces[piece.type];
 };
 
+const moveClass = (move) => {
+  return classNames("move-list__move", "move-list__move--" + move.piece.colour);
+}
+
 const renderMove = (move) => {
   if (move != undefined) {
     return (
-      <td className="move">
+      <td className={moveClass(move)}>
         {pieceToNotation(move.piece)}
         {move.piece_captured ? "x" : ""}
         {move.to}
@@ -28,9 +33,12 @@ const renderMove = (move) => {
 };
 
 const renderMoves = (moves) => {
+  let lineNumber = 1;
+
   return _.map(moves, (move) => {
     return (
       <tr key={move[0].id}>
+        <th scope="row" className="move-list__line-number">{lineNumber++}.</th>
         {renderMove(move[0])}
         {renderMove(move[1])}
       </tr>
@@ -40,17 +48,26 @@ const renderMoves = (moves) => {
 
 const MoveList = (props) => {
   return (
-    <table className="move-list">
-      <thead>
-        <tr>
-          <th>White</th>
-          <th>Black</th>
-        </tr>
-      </thead>
-      <tbody>
-        {renderMoves(props.moves)}
-      </tbody>
-    </table>
+    <div className="move-list">
+      <table className="table table--condensed">
+        <caption className="heading">Moves</caption>
+
+        <thead>
+          <tr>
+            <th className="move-list__line-number">
+              <span className="visually-hidden">Move no.</span>
+            </th>
+
+            <th className="move-list__header--white">White</th>
+            <th className="move-list__header--black">Black</th>
+          </tr>
+        </thead>
+
+        <tbody>
+          {renderMoves(props.moves)}
+        </tbody>
+      </table>
+    </div>
   );
 };
 
diff --git a/lib/chess_web/templates/game/index.html.eex b/lib/chess_web/templates/game/index.html.eex
index e101c96..b268a11 100644
--- a/lib/chess_web/templates/game/index.html.eex
+++ b/lib/chess_web/templates/game/index.html.eex
@@ -1,6 +1,6 @@
 <h2><%= gettext "Listing games" %></h2>
 
-<table class="table">
+<table class="table table--games-list">
   <tbody>
     <%= for game <- @games do %>
       <tr class="<%= turn_class(@conn, game) %>">
diff --git a/lib/chess_web/templates/game/show.html.eex b/lib/chess_web/templates/game/show.html.eex
index 162a4a7..18255f9 100644
--- a/lib/chess_web/templates/game/show.html.eex
+++ b/lib/chess_web/templates/game/show.html.eex
@@ -1,5 +1,3 @@
-<p><%= link gettext("Back to games"), to: game_path(@conn, :index) %></p>
-
 <h2><%= gettext "Game with %{name}", name: opponent(@conn, @game).name %></h2>
 
 <div id="app" data-game-id="<%= @game.id %>">