Move from the React front end to Phoenix LiveView

.tool-versions

@@ -1,4 +1,4 @@
 elixir 1.14.1
 python 3.9.1
 nodejs 16.14.0
-erlang 24.2.1
+erlang 26.1.1

assets/css/components/_square.scss

@@ -57,6 +57,7 @@
   border-radius: 4%;
   margin: 0.5px;
   position: relative;
+  flex-grow: 1;
 
   // This is to ensure the squares can be clicked on in PhantomJS
   // TODO: Figure out why we need this
@@ -103,7 +104,7 @@
   @each $colour in $colours {
     @each $piece in $pieces {
       &.square--#{$colour}.square--#{$piece}::before {
-        background-image: url("../static/images/#{$piece}_#{$colour}.svg");
+        background-image: url("/images/#{$piece}_#{$colour}.svg");
       }
     }
   }

assets/js/app.js

@@ -1,28 +1,22 @@
 "use strict";
 
-import "@babel/polyfill";
 import "phoenix_html";
 
-import React from "react";
-import ReactDOM from "react-dom";
-import { createStore } from "redux";
+import { Socket } from "phoenix";
+import { LiveSocket } from "phoenix_live_view";
 
-import Game from "./components/game";
-import OpponentFinder from "./components/opponent-finder";
-import chessBoardReducer from "./reducers/chess-board";
+const csrfToken = document
+  .querySelector("meta[name='csrf-token']")
+  .getAttribute("content");
 
-const store = createStore(chessBoardReducer);
+const liveSocket = new LiveSocket(
+  "/live",
+  Socket,
+  {params: {_csrf_token: csrfToken}}
+);
 
-const gameContainer = document.getElementById("game");
+liveSocket.connect();
 
-if (gameContainer != undefined) {
-  const gameId = gameContainer.getAttribute("data-game-id");
+// liveSocket.enableDebug();
 
-  ReactDOM.render(<Game store={store} gameId={gameId} />, gameContainer);
-}
-
-const opponentFinderContainer = document.getElementById("opponent-finder");
-
-if (opponentFinderContainer != undefined) {
-  ReactDOM.render(<OpponentFinder store={store} />, opponentFinderContainer);
-}
+window.liveSocket = liveSocket;