Redesigned King piece

Bumps [acorn](https://github.com/acornjs/acorn) from 5.7.3 to 5.7.4.
- [Release notes](https://github.com/acornjs/acorn/releases)
- [Commits](https://github.com/acornjs/acorn/compare/5.7.3...5.7.4)

Signed-off-by: dependabot[bot] <support@github.com>

.buildpacks

@@ -1,4 +1,3 @@
-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-distillery.git
+https://github.com/gigalixir/gigalixir-buildpack-mix.git

.gitignore

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

.tool-versions

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

assets/.babelrc

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

assets/brunch-config.js

@@ -1,70 +0,0 @@
-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

@@ -1,222 +0,0 @@
-@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

@@ -1,8 +0,0 @@
-.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_info.scss

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

assets/css/_game_list.scss

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

assets/css/_headings.scss

@@ -1,18 +0,0 @@
-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

@@ -1,22 +0,0 @@
-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/_nav.scss

@@ -1,27 +0,0 @@
-[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/_variables.scss

@@ -1,48 +0,0 @@
-$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,20 +1,58 @@
-@import "bourbon/bourbon";
+// 0. Vendor - Imported from other source
+@import "vendor/bourbon/bourbon";
 @import "vendor/family";
-@import "base/base";
 
-@import "variables";
+// 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 "utilities";
+// 2. Tools – globally used mixins and functions.
+//    It’s important not to output any CSS in the first 2 layers.
 
-@import "tables";
-@import "headings";
-@import "forms";
+// 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 "layout";
-@import "nav";
+// 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 "game_list";
-@import "board";
-@import "move_list";
-@import "game_info";
-@import "game_grid";
+// 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";

assets/css/base/_base.scss

@@ -1,14 +0,0 @@
-// 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/_media.scss

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

assets/css/base/_typography.scss

@@ -1,45 +0,0 @@
-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

@@ -1,41 +0,0 @@
-// 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/components/_board.scss

@@ -0,0 +1,139 @@
+@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-grid.scss

@@ -26,15 +26,3 @@
     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/components/_game-info.scss

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

assets/css/components/_game-list.scss

@@ -0,0 +1,11 @@
+.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

@@ -0,0 +1,31 @@
+.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/_move-list.scss

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

assets/css/components/_nav.scss

@@ -0,0 +1,38 @@
+.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

@@ -0,0 +1,25 @@
+@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

@@ -0,0 +1,6 @@
+.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

@@ -0,0 +1,178 @@
+%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/_buttons.scss

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

assets/css/elements/_forms.scss

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

@@ -0,0 +1,24 @@
+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

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

assets/css/elements/_lists.scss

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

assets/css/elements/_main.scss

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

assets/css/elements/_paragraphs.scss

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

assets/css/elements/_tables.scss

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

assets/css/generic/_layout.scss

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

assets/css/generic/_typography.scss

@@ -0,0 +1,18 @@
+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

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

assets/css/objects/_form-group.scss

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

assets/css/objects/_form.scss

@@ -0,0 +1,15 @@
+.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/objects/_tables.scss

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

assets/css/settings/_board.scss

@@ -0,0 +1,17 @@
+: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

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

assets/css/settings/_colors.scss

@@ -0,0 +1,18 @@
+$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

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

assets/css/settings/_global.scss

@@ -0,0 +1,16 @@
+$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

@@ -0,0 +1,19 @@
+$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

@@ -0,0 +1,3 @@
+.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 / 2)}) {
+  &:nth-child(#{round($num * 0.5)}) {
     @content;
   }
 }

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

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

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

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

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

@@ -55,25 +55,25 @@
 
     @if $direction == "up" {
       border-color: transparent transparent $color;
-      border-width: 0 ($width / 2) $height;
+      border-width: 0 ($width * 0.5) $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 / 2) 0 ($height / 2) $width;
+      border-width: ($height * 0.5) 0 ($height * 0.5) $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 / 2) 0;
+      border-width: $height ($width * 0.5) 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 / 2) $width ($height / 2) 0;
+      border-width: ($height * 0.5) $width ($height * 0.5) 0;
     } @else if $direction == "up-left" {
       border-color: $color transparent transparent;
       border-width: $width $width 0 0;

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

@@ -19,13 +19,15 @@
 ///
 /// @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 $-local-lightness-1 / $-local-lightness-2;
+    @return math.div($-local-lightness-1, $-local-lightness-2);
   } @else {
-    @return $-local-lightness-2 / $-local-lightness-1;
+    @return math.div($-local-lightness-2, $-local-lightness-1);
   }
 }

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

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

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

@@ -11,14 +11,16 @@
 ///
 /// @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($-local-red-raw / 255);
-  $-local-green: _gamma($-local-green-raw / 255);
-  $-local-blue: _gamma($-local-blue-raw / 255);
+  $-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));
 
   @return $-local-red * 0.2126 + $-local-green * 0.7152 + $-local-blue * 0.0722;
 }

assets/js/app.js

@@ -1,74 +1,28 @@
 "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 Channel from "./services/channel";
-import Notifications from "./services/notifications";
-
+import Game from "./components/game";
+import OpponentFinder from "./components/opponent-finder";
 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();
 
-class App extends React.Component {
-  componentWillMount() {
-    const { gameId, store } = this.props;
+const gameContainer = document.getElementById("game");
 
-    store.dispatch(setGameId(gameId));
+if (gameContainer != undefined) {
+  const gameId = gameContainer.getAttribute("data-game-id");
 
-    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>
-    );
-  }
+  ReactDOM.render(<Game store={store} gameId={gameId} />, gameContainer);
 }
 
-const container = document.getElementById("app");
+const opponentFinderContainer = document.getElementById("opponent-finder");
 
-if (container != undefined) {
-  const gameId = container.getAttribute("data-game-id");
-
-  ReactDOM.render(
-    <App store={store} gameId={gameId} />,
-    container
-  );
+if (opponentFinderContainer != undefined) {
+  ReactDOM.render(<OpponentFinder store={store} />, opponentFinderContainer);
 }

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(
-        "board-square",
-        { "available": this.isAvailableSquare() }
+        "square",
+        { "square--available": this.isAvailableSquare() }
       );
     } else {
       return classNames(
-        "board-square",
-        this.props.piece.type,
-        this.props.piece.colour,
-        { "selected": this.isSelectedSquare() },
-        { "available": this.isAvailableSquare() }
+        "square",
+        `square--${this.props.piece.type}`,
+        `square--${this.props.piece.colour}`,
+        { "square--selected": this.isSelectedSquare() },
+        { "square--available": this.isAvailableSquare() }
       );
     }
   }

assets/js/components/chess-board.js

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