Redesigned King piece

.buildpacks

@@ -1,3 +1,4 @@
+https://github.com/gigalixir/gigalixir-buildpack-clean-cache.git
 https://github.com/HashNuke/heroku-buildpack-elixir
 https://github.com/gjaldon/heroku-buildpack-phoenix-static
-https://github.com/gigalixir/gigalixir-buildpack-mix.git
+https://github.com/gigalixir/gigalixir-buildpack-distillery.git

.gitignore

@@ -3,7 +3,6 @@
 /db
 /deps
 /*.ez
-/.elixir_ls
 
 # Generated on crash by the VM
 erl_crash.dump

.tool-versions

@@ -1,4 +1,2 @@
-elixir 1.14.1
-python 3.9.1
-nodejs 16.14.0
-erlang 24.2.1
+elixir 1.6.6
+python 2.7.14

assets/.babelrc

@@ -1,3 +0,0 @@
-{
-  "presets": ["@babel/preset-react"]
-}

assets/brunch-config.js

@@ -0,0 +1,70 @@
+exports.config = {
+  // See http://brunch.io/#documentation for docs.
+  files: {
+    javascripts: {
+      joinTo: {
+        "js/app.js": /^js/,
+        "js/vendor.js": /^(?!js)/,
+      },
+    },
+    stylesheets: {
+      joinTo: "css/app.css",
+      order: {
+        after: ["web/static/css/app.css"], // concat app.css last
+      },
+    },
+    templates: {
+      joinTo: "js/app.js",
+    },
+  },
+
+  conventions: {
+    // This option sets where we should place non-css and non-js assets in.
+    // By default, we set this to "/assets/static". Files in this directory
+    // will be copied to `paths.public`, which is "priv/static" by default.
+    assets: /^(static)/,
+  },
+
+  // Phoenix paths configuration
+  paths: {
+    // Dependencies and current project directories to watch
+    watched: ["static", "css", "js", "vendor"],
+
+    // Where to compile files to
+    public: "../priv/static",
+  },
+
+  // Configure your plugins
+  plugins: {
+    sass: {
+      mode: "native",
+    },
+    babel: {
+      plugins: [
+        "transform-object-rest-spread",
+        "transform-class-properties",
+      ],
+      presets: [
+        [
+          "env", {
+            "browsers": ["> 5% in US"],
+            "useBuiltIns": true,
+          },
+        ],
+        "es2015",
+        "react",
+      ],
+      ignore: [/vendor/],
+    },
+  },
+
+  modules: {
+    autoRequire: {
+      "js/app.js": ["js/app"],
+    },
+  },
+
+  npm: {
+    enabled: true,
+  },
+};

assets/css/_board.scss

@@ -0,0 +1,222 @@
+@mixin move-indicator {
+  border-radius: 50%;
+  content: "";
+  display: block;
+  height: 2%;
+  position: absolute;
+  right: 2%;
+  width: 2%;
+}
+
+.board {
+  background: lighten($black-square-color, 7%);
+  border-collapse: unset;
+  border-radius: 2.8%;
+  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;
+  width: var(--board-size);
+
+  &.white-to-move::before {
+    @include move-indicator;
+    background: $white;
+  }
+
+  &.black-to-move::before {
+    @include move-indicator;
+    background: $black;
+  }
+
+  &.player-is-white.white-to-move::before,
+  &.player-is-black.black-to-move::before {
+    bottom: 2%;
+  }
+
+  &.player-is-white.black-to-move::before,
+  &.player-is-black.white-to-move::before {
+    top: 2%;
+  }
+
+  .board-rank-labels,
+  .board-file-labels {
+    display: none;
+  }
+
+  &.player-is-white {
+    .board-rank-labels {
+      display: flex;
+      flex-direction: column-reverse;
+    }
+
+    .board-file-labels {
+      display: flex;
+      flex-direction: row;
+    }
+  }
+
+  &.player-is-black {
+    .board-rank-labels {
+      display: flex;
+      flex-direction: column;
+    }
+
+    .board-file-labels {
+      display: flex;
+      flex-direction: row-reverse;
+    }
+  }
+}
+
+.board-rank-labels {
+  display: flex;
+  height: 90%;
+  left: 0;
+  position: absolute;
+  width: 5%;
+}
+
+.board-file-labels {
+  display: flex;
+  height: 5%;
+  position: absolute;
+  top: 0;
+  width: 90%;
+}
+
+.board-game-state {
+  align-items: center;
+  background-color: $game-state-background-color;
+  border-radius: calc(var(--board-size) / 75);
+  bottom: -2.5%;
+  box-shadow: 0 calc(var(--board-size) / 200) calc(var(--board-size) / 40) $board-shadow-color, inset 0 0 0 calc(var(--board-size) / 300) $white-square-color;
+  color: $foreground-color;
+  display: none;
+  font-size: calc(var(--board-size) / 40);
+  height: 6%;
+  justify-content: center;
+  position: absolute;
+  right: 5%;
+  width: 15%;
+
+  &.check,
+  &.checkmate,
+  &.stalemate {
+    display: block; // So PhantomJS will display it.
+    display: flex;
+  }
+
+  &.checkmate,
+  &.stalemate {
+    font-size: calc(var(--board-size) / 30);
+    height: 7.5%;
+    left: calc(50% - 15%);
+    top: calc(50% - 3.5%);
+    width: 30%;
+  }
+}
+
+.board-label {
+  align-items: center;
+  display: flex;
+  flex-grow: 1;
+  justify-content: center;
+}
+
+.board-body {
+  display: grid;
+  grid-template-columns: repeat(8, 1fr);
+  grid-template-rows: repeat(8, 1fr);
+
+  height: 100%;
+  width: 100%;
+}
+
+%black-square {
+  background-color: $black-square-color;
+
+  &.selected {
+    background-color: mix($black-square-color, $selected-square-color, 60%);
+    box-shadow: inset 0 0 0 calc(var(--board-size) / 400) $selected-outline-color;
+  }
+
+  &.available {
+    background-color: mix($black-square-color, $available-square-color, 80%);
+    box-shadow: inset 0 0 0 calc(var(--board-size) / 400) $available-outline-color;
+  }
+}
+
+%white-square {
+  background-color: $white-square-color;
+
+  &.selected {
+    background-color: mix($white-square-color, $selected-square-color, 60%);
+    box-shadow: inset 0 0 0 calc(var(--board-size) / 400) $selected-outline-color;
+  }
+
+  &.available {
+    background-color: mix($white-square-color, $available-square-color, 80%);
+    box-shadow: inset 0 0 0 calc(var(--board-size) / 400) $available-outline-color;
+  }
+}
+
+.board-square {
+  background-position: center;
+  background-repeat: no-repeat;
+  background-size: 100%;
+  border-radius: 2%;
+  margin: 0.5px;
+
+  // 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 %white-square; }
+  @include even-between(1, 8) { @extend %black-square; }
+
+  @include odd-between(9, 16) { @extend %black-square; }
+  @include even-between(9, 16) { @extend %white-square; }
+
+  @include odd-between(17, 24) { @extend %white-square; }
+  @include even-between(17, 24) { @extend %black-square; }
+
+  @include odd-between(25, 32) { @extend %black-square; }
+  @include even-between(25, 32) { @extend %white-square; }
+
+  @include odd-between(33, 40) { @extend %white-square; }
+  @include even-between(33, 40) { @extend %black-square; }
+
+  @include odd-between(41, 48) { @extend %black-square; }
+  @include even-between(41, 48) { @extend %white-square; }
+
+  @include odd-between(49, 56) { @extend %white-square; }
+  @include even-between(49, 56) { @extend %black-square; }
+
+  @include odd-between(57, 64) { @extend %black-square; }
+  @include even-between(57, 64) { @extend %white-square; }
+
+  @each $colour in $colours {
+    @each $piece in $pieces {
+      &.#{$colour}.#{$piece} {
+        background-image: url(/images/#{$piece}_#{$colour}.svg);
+      }
+    }
+  }
+}
+
+@media (min-width: 480px) {
+  .board-body {
+    grid-gap: 1px;
+  }
+}
+
+@media (min-width: 768px) {
+  .board-body {
+    grid-gap: 2px;
+  }
+}

assets/css/_forms.scss

@@ -0,0 +1,8 @@
+.form {
+  background-color: $form-background-color;
+  border-radius: $base-border-radius;
+  border: 1px solid rgba(255, 255, 255, 0.2);
+  margin: 0 auto;
+  max-width: 40rem;
+  padding: $base-spacing;
+}

assets/css/_game_grid.scss

@@ -26,3 +26,15 @@
     grid-template-rows: min-content min-content min-content;
   }
 }
+
+@media (max-height: 960px), (max-width: 768px) {
+  html {
+    font-size: 0.9em;
+  }
+}
+
+@media (max-height: 480px), (max-width: 400px) {
+  html {
+    font-size: 0.8em;
+  }
+}

assets/css/_game_info.scss

@@ -0,0 +1,3 @@
+.game-info {
+  grid-area: game-info;
+}

assets/css/_game_list.scss

@@ -0,0 +1,11 @@
+.player-indicator {
+  img {
+    height: 1.5em;
+    vertical-align: middle;
+  }
+}
+
+.your-turn {
+  background-color: $your-turn-background-color;
+  font-weight: bold;
+}

assets/css/_headings.scss

@@ -0,0 +1,18 @@
+h1,
+h2,
+h3,
+h4 {
+  font-weight: 300;
+}
+
+h1 {
+  font-size: 1.6em;
+  margin: 0;
+}
+
+.heading {
+  font-family: $heading-font-family;
+  font-size: modular-scale(1);
+  line-height: $heading-line-height;
+  margin: 0 0 $small-spacing;
+}

assets/css/_layout.scss

@@ -0,0 +1,22 @@
+html {
+  background: $background-color;
+  color: mix($background-color, $foreground-color, 20%);
+  font-weight: 300;
+}
+
+a {
+  color: mix($background-color, $link-color, 30%);
+}
+
+main {
+  margin-top: 5vmin;
+}
+
+.container {
+  margin: 0 auto;
+  width: 90%;
+}
+
+.form-group {
+  margin-top: 2em;
+}

assets/css/_move_list.scss

@@ -4,7 +4,7 @@
 }
 
 .move-list__line-number {
-  color: $foreground-color;
+  color: mix($background-color, $foreground-color);
   font-feature-settings: "tnum";
   font-variant-numeric: tabular-nums;
 }

assets/css/_nav.scss

@@ -0,0 +1,27 @@
+[role='banner'] {
+  background: $black;
+  margin-bottom: 1em;
+  padding: 0.5em 0;
+
+  .container {
+    display: flex;
+  }
+
+  h1 {
+    flex: 0;
+  }
+
+  a {
+    color: $white;
+    text-decoration: none;
+
+    &:hover {
+      color: $link-color;
+    }
+  }
+
+  .user-nav {
+    flex: 1;
+    text-align: right;
+  }
+}

assets/css/_tables.scss

@@ -11,6 +11,6 @@
 
   th,
   td {
-    padding: 0 $small-spacing 0 0;
+    padding: 0 $base-spacing 0 0;
   }
 }

assets/css/_variables.scss

@@ -0,0 +1,48 @@
+$black: #000;
+$white: #fff;
+
+$background-color: #1e3f51;
+$foreground-color: $white;
+
+$link-color: #fd0;
+
+$form-background-color: darken($background-color, 4%);
+
+$board-border-color: #000;
+$board-shadow-color: rgba(0, 0, 0, 0.4);
+
+$board-square-size: 9vmin;
+$base-font-size: 16px;
+
+$black-square-color: #777;
+$white-square-color: #bbb;
+
+$selected-square-color: #0cf;
+$available-square-color: #6f0;
+
+$your-turn-background-color: rgba($white, 0.1);
+
+$game-state-background-color: rgba(darken($black-square-color, 10%), 0.9);
+
+$square-outline-color: darken($black-square-color, 20%);
+$selected-outline-color: lighten($selected-square-color, 20%);
+$available-outline-color: rgba(lighten($available-square-color, 20%), 0.5);
+
+$colours: "black" "white";
+$pieces: king queen bishop knight rook pawn;
+
+:root {
+  --board-size: 64vw;
+}
+
+@media (min-aspect-ratio: 14/11) {
+  :root {
+    --board-size: 80vmin;
+  }
+}
+
+@media (max-aspect-ratio: 9/11) {
+  :root {
+    --board-size: 90vmin;
+  }
+}

assets/css/app.scss

@@ -1,58 +1,20 @@
-// 0. Vendor - Imported from other source
-@import "vendor/bourbon/bourbon";
+@import "bourbon/bourbon";
 @import "vendor/family";
+@import "base/base";
 
-// 1. Settings – used with preprocessors and contain font,
-//    colors definitions, etc.
-@import "settings/colors";
-@import "settings/typography";
-@import "settings/forms";
-@import "settings/global";
-@import "settings/chess";
-@import "settings/board";
+@import "variables";
 
-// 2. Tools – globally used mixins and functions.
-//    It’s important not to output any CSS in the first 2 layers.
+@import "utilities";
 
-// 3. Generic – reset and/or normalize styles, box-sizing definition, etc.
-//    This is the first layer which generates actual CSS.
-@import "generic/typography";
-@import "generic/layout";
+@import "tables";
+@import "headings";
+@import "forms";
 
-// 4. Elements – styling for bare HTML elements (like H1, A, etc.).
-//    These come with default styling from the browser so we can redefine
-//    them here.
-@import "elements/main";
-@import "elements/headings";
-@import "elements/paragraphs";
-@import "elements/links";
-@import "elements/lists";
-@import "elements/tables";
-@import "elements/forms";
-@import "elements/buttons";
+@import "layout";
+@import "nav";
 
-// 5. Objects – class-based selectors which define undecorated design patterns,
-//    for example media object known from OOCSS
-@import "objects/container";
-@import "objects/form";
-@import "objects/form-group";
-@import "objects/tables";
-
-// 6. Components – specific UI components.
-//    This is where majority of our work takes place and our UI components
-//    are often composed of Objects and Components
-@import "components/nav";
-@import "components/board";
-@import "components/square";
-@import "components/game-list";
-@import "components/game-grid";
-@import "components/game-info";
-@import "components/move-list";
-@import "components/game-state";
-@import "components/player-finder";
-@import "components/search-input";
-
-// 7. Utilities – utilities and helper classes with ability to override
-//    anything which goes before in the triangle, eg. hide helper class
-@import "utilities/visually-hidden";
-@import "utilities/text-right";
+@import "game_list";
+@import "board";
+@import "move_list";
+@import "game_info";
+@import "game_grid";

assets/css/base/_base.scss

@@ -0,0 +1,14 @@
+// Bitters 1.8.0
+// http://bitters.bourbon.io
+// Copyright 2013-2017 thoughtbot, inc.
+// MIT License
+
+@import "variables";
+
+@import "buttons";
+@import "forms";
+@import "layout";
+@import "lists";
+@import "media";
+@import "tables";
+@import "typography";

assets/css/base/_buttons.scss

@@ -1,6 +1,6 @@
-$_button-border-color: $foreground-color;
-$_button-background-color: $foreground-color;
-$_button-background-color-hover: $background-color;
+$_button-border-color: $action-color;
+$_button-background-color: rgba(0, 0, 0, 0);
+$_button-background-color-hover: $action-color;
 
 #{$all-buttons} {
   appearance: none;
@@ -11,8 +11,9 @@ $_button-background-color-hover: $background-color;
   cursor: pointer;
   display: inline-block;
   font-family: $base-font-family;
-  font-size: inherit;
-  font-weight: $base-font-weight;
+  font-size: 16px;
+  -webkit-font-smoothing: antialiased;
+  font-weight: 600;
   line-height: 1;
   padding: $small-spacing $base-spacing;
   text-align: center;
@@ -28,8 +29,8 @@ $_button-background-color-hover: $background-color;
   }
 
   &:focus {
-    background-color: $_button-background-color-hover;
-    color: contrast-switch($_button-background-color-hover);
+    outline: $focus-outline;
+    outline-offset: $focus-outline-offset;
   }
 
   &:disabled {

assets/css/base/_forms.scss

@@ -1,6 +1,6 @@
-@use "sass:math";
-
-$_form-background-color: $background-color;
+$_form-background-color: #fff;
+$_form-box-shadow: inset 0 1px 3px rgba(#000, 0.06);
+$_form-box-shadow-focus: $_form-box-shadow, 0 0 5px rgba($action-color, 0.7);
 
 fieldset {
   background-color: transparent;
@@ -10,15 +10,15 @@ fieldset {
 }
 
 legend {
-  font-weight: $heavy-font-weight;
-  margin-bottom: $small-spacing * 0.5;
+  font-weight: 600;
+  margin-bottom: $small-spacing / 2;
   padding: 0;
 }
 
 label {
   display: block;
-  font-weight: $heavy-font-weight;
-  margin-bottom: $small-spacing * 0.5;
+  font-weight: 600;
+  margin-bottom: $small-spacing / 2;
 }
 
 input,
@@ -26,7 +26,7 @@ select,
 textarea {
   display: block;
   font-family: $base-font-family;
-  font-size: inherit;
+  font-size: 16px;
 }
 
 #{$all-text-inputs} {
@@ -34,19 +34,25 @@ textarea {
   background-color: $_form-background-color;
   border: $base-border;
   border-radius: $base-border-radius;
+  box-shadow: $_form-box-shadow;
   box-sizing: border-box;
-  color: $foreground-color;
   margin-bottom: $small-spacing;
-  padding: math.div($base-spacing, 3);
+  padding: $base-spacing / 3;
   transition: border-color $base-duration $base-timing;
   width: 100%;
 
+  &:hover {
+    border-color: shade($base-border-color, 20%);
+  }
+
   &:focus {
-    border: 1px solid $base-border-color;
+    border-color: $action-color;
+    box-shadow: $_form-box-shadow-focus;
     outline: none;
   }
 
   &:disabled {
+    background-color: shade($_form-background-color, 5%);
     cursor: not-allowed;
 
     &:hover {
@@ -55,7 +61,7 @@ textarea {
   }
 
   &::placeholder {
-    opacity: 1;
+    color: tint($base-font-color, 40%);
   }
 }
 
@@ -66,7 +72,7 @@ textarea {
 [type="checkbox"],
 [type="radio"] {
   display: inline;
-  margin-right: $x-small-spacing;
+  margin-right: $small-spacing / 2;
 }
 
 [type="file"] {
@@ -78,3 +84,13 @@ select {
   margin-bottom: $small-spacing;
   width: 100%;
 }
+
+[type="checkbox"],
+[type="radio"],
+[type="file"],
+select {
+  &:focus {
+    outline: $focus-outline;
+    outline-offset: $focus-outline-offset;
+  }
+}

assets/css/base/_layout.scss

@@ -1,8 +1,6 @@
 html {
-  background: $background-color;
+  background-color: $viewport-background-color;
   box-sizing: border-box;
-  color: $foreground-color;
-  font-weight: $base-font-weight;
 }
 
 *,
@@ -11,11 +9,11 @@ html {
   box-sizing: inherit;
 }
 
-body {
-  margin: 0;
-}
-
 html,
 body {
   height: 100%;
 }
+
+body {
+  margin: 0;
+}

assets/css/base/_lists.scss

@@ -10,7 +10,7 @@ dl {
 }
 
 dt {
-  font-weight: $heavy-font-weight;
+  font-weight: 600;
   margin: 0;
 }
 

assets/css/base/_media.scss

@@ -0,0 +1,9 @@
+figure {
+  margin: 0;
+}
+
+img,
+picture {
+  margin: 0;
+  max-width: 100%;
+}

assets/css/base/_tables.scss

@@ -19,11 +19,10 @@ tr {
 }
 
 th {
-  font-weight: $heavy-font-weight;
+  font-weight: 600;
 }
 
 th,
 td {
   padding: $x-small-spacing;
 }
-

assets/css/base/_typography.scss

@@ -0,0 +1,45 @@
+html {
+  color: $base-font-color;
+  font-family: $base-font-family;
+  font-size: 100%;
+  line-height: $base-line-height;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  font-family: $heading-font-family;
+  font-size: modular-scale(1);
+  line-height: $heading-line-height;
+  margin: 0 0 $small-spacing;
+}
+
+p {
+  margin: $small-spacing 0 $small-spacing;
+}
+
+a {
+  color: $action-color;
+  text-decoration-skip: ink;
+  transition: color $base-duration $base-timing;
+
+  &:hover {
+    color: shade($action-color, 25%);
+  }
+
+  &:focus {
+    outline: $focus-outline;
+    outline-offset: $focus-outline-offset;
+  }
+}
+
+hr {
+  border-bottom: $base-border;
+  border-left: 0;
+  border-right: 0;
+  border-top: 0;
+  margin: $base-spacing 0;
+}

assets/css/base/_variables.scss

@@ -0,0 +1,41 @@
+// Typography
+$base-font-family: $font-stack-system;
+$heading-font-family: $base-font-family;
+
+// Line height
+$base-line-height: 1.5;
+$heading-line-height: 1.2;
+
+// Other Sizes
+$base-border-radius: 0.5rem;
+$base-spacing: 2em;
+$small-spacing: $base-spacing / 2;
+$x-small-spacing: $small-spacing / 2;
+$base-z-index: 0;
+
+// Colors
+$blue: #1565c0;
+$dark-gray: #333;
+$medium-gray: #999;
+$light-gray: #ddd;
+
+// Font Colors
+$base-font-color: $light-gray;
+$action-color: $light-gray;
+
+// Border
+$base-border-color: $light-gray;
+$base-border: 1px solid $base-border-color;
+
+// Background Colors
+$viewport-background-color: #fff;
+
+// Focus
+$focus-outline-color: transparentize($action-color, 0.4);
+$focus-outline-width: 3px;
+$focus-outline: $focus-outline-width solid $focus-outline-color;
+$focus-outline-offset: 2px;
+
+// Animations
+$base-duration: 150ms;
+$base-timing: ease;

assets/css/bourbon/bourbon/library/_modular-scale.scss

@@ -67,8 +67,6 @@
 ///
 /// @require {function} _fetch-bourbon-setting
 
-@use "sass:math";
-
 @function modular-scale(
   $increment,
   $value: _fetch-bourbon-setting("modular-scale-base"),
@@ -80,7 +78,7 @@
 
   // scale $v2 to just above $v1
   @while $v2 > $v1 {
-    $v2: math.div($v2, $ratio); // will be off-by-1
+    $v2: ($v2 / $ratio); // will be off-by-1
   }
   @while $v2 < $v1 {
     $v2: ($v2 * $ratio); // will fix off-by-1
@@ -104,15 +102,15 @@
   @if $increment < 0 {
     // adjust $v2 to just below $v1
     @if $double-stranded {
-      $v2: math.div($v2, $ratio);
+      $v2: ($v2 / $ratio);
     }
 
     @for $i from $increment through -1 {
-      @if $double-stranded and math.div($v1, $ratio) < $v2 {
+      @if $double-stranded and ($v1 / $ratio) < $v2 {
         $value: $v2;
-        $v2: math.div($v2, $ratio);
+        $v2: ($v2 / $ratio);
       } @else {
-        $v1: math.div($v1, $ratio);
+        $v1: ($v1 / $ratio);
         $value: $v1;
       }
     }

assets/css/bourbon/bourbon/library/_strip-unit.scss

@@ -12,8 +12,6 @@
 ///   // Output
 ///   $dimension: 10;
 
-@use "sass:math";
-
 @function strip-unit($value) {
-  @return math.div($value, $value * 0 + 1);
+  @return ($value / ($value * 0 + 1));
 }

assets/css/bourbon/bourbon/library/_triangle.scss

@@ -55,25 +55,25 @@
 
     @if $direction == "up" {
       border-color: transparent transparent $color;
-      border-width: 0 ($width * 0.5) $height;
+      border-width: 0 ($width / 2) $height;
     } @else if $direction == "up-right" {
       border-color: transparent $color transparent transparent;
       border-width: 0 $width $width 0;
     } @else if $direction == "right" {
       border-color: transparent transparent transparent $color;
-      border-width: ($height * 0.5) 0 ($height * 0.5) $width;
+      border-width: ($height / 2) 0 ($height / 2) $width;
     } @else if $direction == "down-right" {
       border-color: transparent transparent $color;
       border-width: 0 0 $width $width;
     } @else if $direction == "down" {
       border-color: $color transparent transparent;
-      border-width: $height ($width * 0.5) 0;
+      border-width: $height ($width / 2) 0;
     } @else if $direction == "down-left" {
       border-color: transparent transparent transparent $color;
       border-width: $width 0 0 $width;
     } @else if $direction == "left" {
       border-color: transparent $color transparent transparent;
-      border-width: ($height * 0.5) $width ($height * 0.5) 0;
+      border-width: ($height / 2) $width ($height / 2) 0;
     } @else if $direction == "up-left" {
       border-color: $color transparent transparent;
       border-width: $width $width 0 0;

assets/css/bourbon/bourbon/utilities/_contrast-ratio.scss

@@ -19,15 +19,13 @@
 ///
 /// @access private
 
-@use "sass:math";
-
 @function _contrast-ratio($color-1, $color-2) {
   $-local-lightness-1: _lightness($color-1) + 0.05;
   $-local-lightness-2: _lightness($color-2) + 0.05;
 
   @if $-local-lightness-1 > $-local-lightness-2 {
-    @return math.div($-local-lightness-1, $-local-lightness-2);
+    @return $-local-lightness-1 / $-local-lightness-2;
   } @else {
-    @return math.div($-local-lightness-2, $-local-lightness-1);
+    @return $-local-lightness-2 / $-local-lightness-1;
   }
 }

assets/css/bourbon/bourbon/utilities/_gamma.scss

@@ -11,13 +11,11 @@
 ///
 /// @access private
 
-@use "sass:math";
-
 @function _gamma($channel) {
   @if $channel < 0.03928 {
-    @return math.div($channel, 12.92);
+    @return $channel / 12.92;
   } @else {
-    $c: math.div($channel + 0.055, 1.055);
-    @return math.div(133 * $c * $c * $c + 155 * $c * $c, 288);
+    $c: ($channel + 0.055) / 1.055;
+    @return (133 * $c * $c * $c + 155 * $c * $c) / 288;
   }
 }

assets/css/bourbon/bourbon/utilities/_lightness.scss

@@ -11,16 +11,14 @@
 ///
 /// @access private
 
-@use "sass:math";
-
 @function _lightness($hex-color) {
   $-local-red-raw: red(rgba($hex-color, 1));
   $-local-green-raw: green(rgba($hex-color, 1));
   $-local-blue-raw: blue(rgba($hex-color, 1));
 
-  $-local-red: _gamma(math.div($-local-red-raw, 255));
-  $-local-green: _gamma(math.div($-local-green-raw, 255));
-  $-local-blue: _gamma(math.div($-local-blue-raw, 255));
+  $-local-red: _gamma($-local-red-raw / 255);
+  $-local-green: _gamma($-local-green-raw / 255);
+  $-local-blue: _gamma($-local-blue-raw / 255);
 
   @return $-local-red * 0.2126 + $-local-green * 0.7152 + $-local-blue * 0.0722;
 }

assets/css/components/_board.scss

@@ -1,139 +0,0 @@
-@mixin move-indicator {
-  border-radius: 50%;
-  content: "";
-  display: block;
-  height: 1.5%;
-  position: absolute;
-  right: 3%;
-  width: 1.5%;
-}
-
-.board {
-  background: $background-color;
-  border-collapse: unset;
-  border-radius: 2.8%;
-  border-spacing: 1px;
-  color: $foreground-color;
-  grid-area: board;
-  height: var(--board-size);
-  padding: calc(var(--board-size) / 20);
-  position: relative;
-  width: var(--board-size);
-}
-
-.board--white-to-move,
-.board--black-to-move {
-  &::before {
-    @include move-indicator;
-    background: $foreground-color;
-  }
-}
-
-.board--player-is-white.board--white-to-move,
-.board--player-is-black.board--black-to-move {
-  &::before {
-    bottom: 3%;
-  }
-}
-
-.board--player-is-white.board--black-to-move,
-.board--player-is-black.board--white-to-move {
-  &::before {
-    top: 3%;
-  }
-}
-
-.board__rank-labels,
-.board__file-labels {
-  display: none;
-}
-
-.board--player-is-white {
-  .board__rank-labels {
-    display: flex;
-    flex-direction: column-reverse;
-  }
-
-  .board__file-labels {
-    display: flex;
-    flex-direction: row;
-  }
-}
-
-.board--player-is-black {
-  .board__rank-labels {
-    display: flex;
-    flex-direction: column;
-  }
-
-  .board__file-labels {
-    display: flex;
-    flex-direction: row-reverse;
-  }
-}
-
-.board__body {
-  background: $background-color;
-  border: 0.25rem solid $foreground-color;
-  border-radius: calc(var(--board-size) / 100);
-  display: grid;
-  grid-template-columns: repeat(8, 1fr);
-  grid-template-rows: repeat(8, 1fr);
-  height: 100%;
-  padding: 1%;
-  width: 100%;
-}
-
-.board__rank-labels {
-  display: none;
-  height: 90%;
-  left: 0;
-  position: absolute;
-  width: 5%;
-}
-
-.board__file-labels {
-  display: none;
-  height: 5%;
-  position: absolute;
-  top: 0;
-  width: 90%;
-}
-
-.board__label {
-  align-items: center;
-  display: flex;
-  flex-grow: 1;
-  font-size: calc(0.25rem + (var(--board-size) / 50));
-  justify-content: center;
-}
-
-@media (max-aspect-ratio: 9/11) and (max-width: 640px),
-       (max-aspect-ratio: 9/11) and (max-height: 640px),
-       (min-aspect-ratio: 9/11) and (max-width: 720px),
-       (min-aspect-ratio: 9/11) and (max-height: 720px) {
-  .board__body {
-    border-width: 0.1875rem;
-  }
-}
-
-@media (max-aspect-ratio: 9/11) and (max-width: 480px),
-       (max-aspect-ratio: 9/11) and (max-height: 480px),
-       (min-aspect-ratio: 9/11) and (max-width: 560px),
-       (min-aspect-ratio: 9/11) and (max-height: 560px) {
-  .board__body {
-    border-width: 0.125rem;
-  }
-}
-
-@media (min-width: 480px) {
-  .board__body {
-    grid-gap: 1px;
-  }
-}
-
-@media (min-width: 768px) {
-  .board__body {
-    grid-gap: 2px;
-  }
-}

assets/css/components/_game-info.scss

@@ -1,8 +0,0 @@
-.game-info {
-  grid-area: game-info;
-}
-
-.game-info__opponent-status {
-  height: 1rem;
-  vertical-align: middle;
-}

assets/css/components/_game-list.scss

@@ -1,11 +0,0 @@
-.games-list__player-indicator {
-  img {
-    height: 1.5em;
-    vertical-align: middle;
-  }
-}
-
-.games-list__your-turn {
-  background-color: $background-color;
-  font-weight: $heavy-font-weight;
-}

assets/css/components/_game-state.scss

@@ -1,31 +0,0 @@
-.game-state {
-  align-items: center;
-  background-color: $foreground-color;
-  border-radius: calc(var(--board-size) / 100);
-  bottom: -2.5%;
-  box-shadow: 0 0 0 0.2rem $background-color;
-  color: $background-color;
-  display: none;
-  font-size: calc(var(--board-size) / 40);
-  height: 6%;
-  justify-content: center;
-  left: 5%;
-  position: absolute;
-  width: 15%;
-}
-
-.game-state--check,
-.game-state--checkmate,
-.game-state--stalemate {
-  display: block; // So PhantomJS will display it.
-  display: flex;
-}
-
-.game-state--checkmate,
-.game-state--stalemate {
-  font-size: calc(var(--board-size) / 30);
-  height: 7.5%;
-  left: calc(50% - 15%);
-  top: calc(50% - 3.5%);
-  width: 30%;
-}

assets/css/components/_nav.scss

@@ -1,38 +0,0 @@
-.header {
-  background: $nav-background-color;
-  color: $nav-foreground-color;
-  margin-bottom: $small-spacing;
-  padding: $x-small-spacing 0;
-
-  .container {
-    align-items: flex-end;
-    display: flex;
-  }
-
-  a {
-    color: $nav-foreground-color;
-    text-decoration: underline dashed;
-
-    &:hover {
-      color: $nav-foreground-color;
-      text-decoration: underline;
-    }
-  }
-}
-
-.header__title {
-  flex: 0;
-
-  a {
-    text-decoration: none;
-
-    &:hover {
-      text-decoration: underline dashed;
-    }
-  }
-}
-
-.header__user-nav {
-  flex: 1;
-  text-align: right;
-}

assets/css/components/_player-finder.scss

@@ -1,25 +0,0 @@
-@use "sass:math";
-
-.opponent-finder__result {
-  border-bottom: 1px dotted $black;
-  border-bottom-left-radius: $base-border-radius;
-  border-bottom-right-radius: $base-border-radius;
-  border-left: 1px dotted $black;
-  border-right: 1px dotted $black;
-  margin-top: -$small-spacing;
-  padding: math.div($small-spacing, 3);
-}
-
-.opponent-finder__result-item {
-  border-radius: $base-border-radius * 0.5;
-  cursor: pointer;
-  display: block;
-  padding: math.div($small-spacing, 3) $base-spacing * 0.5;
-  text-decoration: none;
-
-  &:hover,
-  &:focus {
-    background: $black;
-    color: $white;
-  }
-}

assets/css/components/_search-input.scss

@@ -1,6 +0,0 @@
-.search-input {
-  background-image: url("../static/images/search-icon.svg");
-  background-position: center right 0.5rem;
-  background-repeat: no-repeat;
-  border: 1px solid $base-border-color;
-}

assets/css/components/_square.scss

@@ -1,178 +0,0 @@
-%square--black {
-  background: repeating-linear-gradient(
-    45deg,
-    $background-color,
-    $background-color ($diagonal-pixel * 5),
-    $foreground-color ($diagonal-pixel * 5),
-    $foreground-color ($diagonal-pixel * 8)
-  );
-
-  &.square--selected {
-    box-shadow: inset 0 0 0 0.2rem $foreground-color,
-                inset 0 0 0 0.4rem $background-color;
-  }
-
-  &.square--available {
-    &::after {
-      border-radius: 50%;
-      bottom: 20%;
-      box-shadow: 0 0 0 0.2rem $foreground-color,
-                  0 0 0 0.4rem $background-color,
-                  inset 0 0 0 0.2rem $background-color;
-      content: "";
-      display: block;
-      left: 20%;
-      position: absolute;
-      right: 20%;
-      top: 20%;
-    }
-  }
-}
-
-%square--white {
-  background-color: $background-color;
-
-  &.square--selected {
-    box-shadow: inset 0 0 0 0.2rem $foreground-color;
-  }
-
-  &.square--available {
-    &::after {
-      border-radius: 50%;
-      bottom: 20%;
-      box-shadow: 0 0 0 0.2rem $foreground-color,
-                  0 0 0 0.4rem $background-color,
-                  inset 0 0 0 0.2rem $background-color;
-      content: "";
-      display: block;
-      left: 20%;
-      position: absolute;
-      right: 20%;
-      top: 20%;
-    }
-  }
-}
-
-.square {
-  border-radius: 4%;
-  margin: 0.5px;
-  position: relative;
-
-  // 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;
-    background-size: 100%;
-    bottom: 0;
-    content: "";
-    display: block;
-    left: 0;
-    position: absolute;
-    right: 0;
-    top: 0;
-  }
-
-  @each $colour in $colours {
-    @each $piece in $pieces {
-      &.square--#{$colour}.square--#{$piece}::before {
-        background-image: url("../static/images/#{$piece}_#{$colour}.svg");
-      }
-    }
-  }
-}
-
-@media (max-aspect-ratio: 9/11) and (max-width: 640px),
-       (max-aspect-ratio: 9/11) and (max-height: 640px),
-       (min-aspect-ratio: 9/11) and (max-width: 720px),
-       (min-aspect-ratio: 9/11) and (max-height: 720px) {
-  %square--black {
-    background: repeating-linear-gradient(
-      45deg,
-      $background-color,
-      $background-color ($diagonal-pixel * 3),
-      $foreground-color ($diagonal-pixel * 3),
-      $foreground-color ($diagonal-pixel * 5)
-    );
-
-    &.square--selected {
-      box-shadow: inset 0 0 0 0.15rem $foreground-color,
-                  inset 0 0 0 0.3rem $background-color;
-    }
-
-    &.square--available::after {
-      box-shadow: 0 0 0 0.15rem $foreground-color,
-                  0 0 0 0.3rem $background-color,
-                  inset 0 0 0 0.15rem $background-color;
-    }
-  }
-
-  %square--white {
-    &.square--selected {
-      box-shadow: inset 0 0 0 0.15rem $foreground-color;
-    }
-
-    &.square--available::after {
-      box-shadow: 0 0 0 0.15rem $foreground-color,
-                  0 0 0 0.3rem $background-color,
-                  inset 0 0 0 0.15rem $background-color;
-    }
-  }
-}
-
-@media (max-aspect-ratio: 9/11) and (max-width: 480px),
-       (max-aspect-ratio: 9/11) and (max-height: 480px),
-       (min-aspect-ratio: 9/11) and (max-width: 560px),
-       (min-aspect-ratio: 9/11) and (max-height: 560px) {
-  %square--black {
-    &.square--selected {
-      box-shadow: inset 0 0 0 0.1rem $foreground-color,
-                  inset 0 0 0 0.2rem $background-color;
-    }
-
-    &.square--available::after {
-      box-shadow: 0 0 0 0.1rem $foreground-color,
-                  0 0 0 0.2rem $background-color,
-                  inset 0 0 0 0.1rem $background-color;
-    }
-  }
-
-  %square--white {
-    &.square--selected {
-      box-shadow: inset 0 0 0 0.1rem $foreground-color;
-    }
-
-    &.available::after {
-      box-shadow: 0 0 0 0.1rem $foreground-color,
-                  0 0 0 0.2rem $background-color,
-                  inset 0 0 0 0.1rem $background-color;
-    }
-  }
-}

assets/css/elements/_headings.scss

@@ -1,24 +0,0 @@
-h1,
-h2,
-h3,
-h4,
-h5,
-h6 {
-  font-family: $heading-font-family;
-  font-size: modular-scale(1);
-  line-height: $heading-line-height;
-  margin: 0 0 $small-spacing;
-}
-
-h1 {
-  font-size: modular-scale(2);
-  font-weight: $base-font-weight;
-  margin: 0;
-}
-
-.heading {
-  font-family: $heading-font-family;
-  font-size: modular-scale(1);
-  line-height: $heading-line-height;
-  margin: 0 0 $small-spacing;
-}

assets/css/elements/_links.scss

@@ -1,3 +0,0 @@
-a {
-  color: $foreground-color;
-}

assets/css/elements/_main.scss

@@ -1,3 +0,0 @@
-main {
-  margin-top: 5vmin;
-}

assets/css/elements/_paragraphs.scss

@@ -1,3 +0,0 @@
-p {
-  margin: $small-spacing 0;
-}

assets/css/generic/_typography.scss

@@ -1,18 +0,0 @@
-html {
-  color: $base-font-color;
-  font-family: $base-font-family;
-  font-size: $large-font-size;
-  line-height: $base-line-height;
-}
-
-@media (max-height: 960px), (max-width: 1024px) {
-  html {
-    font-size: $base-font-size;
-  }
-}
-
-@media (max-height: 480px), (max-width: 768px) {
-  html {
-    font-size: $small-font-size;
-  }
-}

assets/css/objects/_container.scss

@@ -1,4 +0,0 @@
-.container {
-  margin: 0 auto;
-  width: $container-width;
-}

assets/css/objects/_form-group.scss

@@ -1,3 +0,0 @@
-.form-group {
-  margin-top: $base-spacing;
-}

assets/css/objects/_form.scss

@@ -1,15 +0,0 @@
-.form {
-  h2 {
-    margin: 0 auto;
-    max-width: $base-form-width;
-    padding: $base-spacing;
-  }
-
-  form {
-    border: $base-solid-border;
-    border-radius: $base-border-radius;
-    margin: 0 auto;
-    max-width: $base-form-width;
-    padding: 0 $base-spacing $base-spacing;
-  }
-}

assets/css/settings/_board.scss

@@ -1,17 +0,0 @@
-:root {
-  --board-size: 64vw;
-}
-
-@media (min-aspect-ratio: 14/11) {
-  :root {
-    --board-size: 80vmin;
-  }
-}
-
-@media (max-aspect-ratio: 9/11) {
-  :root {
-    --board-size: 90vmin;
-  }
-}
-
-$diagonal-pixel: 0.7071067812px;

assets/css/settings/_chess.scss

@@ -1,2 +0,0 @@
-$colours: "black" "white";
-$pieces: king queen bishop knight rook pawn;

assets/css/settings/_colors.scss

@@ -1,18 +0,0 @@
-$black: #000;
-$white: #fff;
-
-// Background Colors
-$background-color: $white;
-$foreground-color: $black;
-
-$nav-background-color: $black;
-$nav-foreground-color: $white;
-
-$link-color: $black;
-
-// Font Colors
-$base-font-color: $black;
-$action-color: $black;
-
-// Border
-$base-border-color: $black;

assets/css/settings/_forms.scss

@@ -1 +0,0 @@
-$base-form-width: 40rem;

assets/css/settings/_global.scss

@@ -1,16 +0,0 @@
-$base-border-radius: 0.5rem;
-$base-spacing: 2rem;
-$small-spacing: $base-spacing * 0.5;
-$x-small-spacing: $small-spacing * 0.5;
-$base-z-index: 0;
-
-$container-width: 90%;
-
-// Border
-$base-border-color: $black;
-$base-border: 1px dashed $base-border-color;
-$base-solid-border: 0.25rem solid $base-border-color;
-
-// Animations
-$base-duration: 150ms;
-$base-timing: ease;

assets/css/settings/_typography.scss

@@ -1,19 +0,0 @@
-$base-font-family: "Enriqueta", serif;
-$base-font-size: 1em;
-$heading-font-family: $base-font-family;
-
-$small-font-size: 0.8em;
-$large-font-size: 1.2em;
-
-// Line height
-$base-line-height: 1.5;
-$heading-line-height: 1.2;
-
-// Font weights
-$base-font-weight: 400;
-$heavy-font-weight: 700;
-
-// Modular scale
-$bourbon: (
-  "modular-scale-ratio": $major-third,
-);

assets/css/utilities/_text-right.scss

@@ -1,3 +0,0 @@
-.text-right {
-  text-align: right;
-}

assets/css/vendor/_family.scss

@@ -130,7 +130,7 @@
 /// @content [Write the style you want to apply to the children, and it will be added within the @content directive]
 /// @param {number} $num - id of the child
 @mixin middle($num) {
-  &:nth-child(#{round($num * 0.5)}) {
+  &:nth-child(#{round($num / 2)}) {
     @content;
   }
 }

assets/js/app.js

@@ -1,28 +1,74 @@
 "use strict";
 
-import "@babel/polyfill";
+import "babel-polyfill";
 import "phoenix_html";
 
 import React from "react";
 import ReactDOM from "react-dom";
 import { createStore } from "redux";
 
-import Game from "./components/game";
-import OpponentFinder from "./components/opponent-finder";
+import Channel from "./services/channel";
+import Notifications from "./services/notifications";
+
 import chessBoardReducer from "./reducers/chess-board";
+import { setGameId } from "./store/actions";
+import Listeners from "./store/listeners";
+
+import ChessBoard from "./components/chess-board";
+import MoveList from "./components/move-list";
+import GameInfo from "./components/game-info";
 
 const store = createStore(chessBoardReducer);
+const notifications = new Notifications();
 
-const gameContainer = document.getElementById("game");
+class App extends React.Component {
+  componentWillMount() {
+    const { gameId, store } = this.props;
 
-if (gameContainer != undefined) {
-  const gameId = gameContainer.getAttribute("data-game-id");
+    store.dispatch(setGameId(gameId));
 
-  ReactDOM.render(<Game store={store} gameId={gameId} />, gameContainer);
+    this.listeners = new Listeners(store);
+    this.listeners.setListeners(notifications);
+
+    this.channel = new Channel(store, gameId);
+  }
+
+  get moves() {
+    const { store } = this.props;
+    return store.getState().moves;
+  }
+
+  get opponent() {
+    const { store } = this.props;
+    return store.getState().opponent;
+  }
+
+  render() {
+    const { store, gameId } = this.props;
+
+    return (
+      <div className="game-grid">
+        <ChessBoard
+          gameId={gameId}
+          store={store}
+          channel={this.channel}
+        />
+
+        <GameInfo store={store} />
+
+        <MoveList store={store} />
+      </div>
+    );
+  }
 }
 
-const opponentFinderContainer = document.getElementById("opponent-finder");
+const container = document.getElementById("app");
 
-if (opponentFinderContainer != undefined) {
-  ReactDOM.render(<OpponentFinder store={store} />, opponentFinderContainer);
+if (container != undefined) {
+  const gameId = container.getAttribute("data-game-id");
+
+  ReactDOM.render(
+    <App store={store} gameId={gameId} />,
+    container
+  );
 }

assets/js/components/chess-board-square.js

@@ -22,16 +22,16 @@ class ChessBoardSquare extends React.Component {
   get squareClass() {
     if (this.props.piece == undefined) {
       return classNames(
-        "square",
-        { "square--available": this.isAvailableSquare() }
+        "board-square",
+        { "available": this.isAvailableSquare() }
       );
     } else {
       return classNames(
-        "square",
-        `square--${this.props.piece.type}`,
-        `square--${this.props.piece.colour}`,
-        { "square--selected": this.isSelectedSquare() },
-        { "square--available": this.isAvailableSquare() }
+        "board-square",
+        this.props.piece.type,
+        this.props.piece.colour,
+        { "selected": this.isSelectedSquare() },
+        { "available": this.isAvailableSquare() }
       );
     }
   }

assets/js/components/chess-board.js

@@ -81,11 +81,7 @@ class ChessBoard extends React.Component {
     const turn = this.turn;
     const player = this.player;
 
-    return classNames(
-      "board",
-      `board--${turn}-to-move`,
-      `board--player-is-${player}`
-    );
+    return classNames("board", turn + "-to-move", "player-is-" + player);
   }
 
   render() {
@@ -94,7 +90,7 @@ class ChessBoard extends React.Component {
         <RankLabels />
         <FileLabels />
 
-        <div className="board__body">
+        <div className="board-body">
           {this.renderSquares()}
         </div>