Add npm run server to start up the backend.

Pull ENDPOINT value from REACT_APP_QUICKCHESS_API.
Switch to ES Modules.

package.json

@@ -2,6 +2,7 @@
   "name": "quickchess",
   "version": "0.1.0",
   "private": true,
+  "type": "module",
   "dependencies": {
     "@testing-library/jest-dom": "^5.11.4",
     "@testing-library/react": "^11.1.0",
@@ -18,7 +19,8 @@
     "start": "react-scripts start",
     "build": "react-scripts build",
     "test": "react-scripts test",
-    "eject": "react-scripts eject"
+    "eject": "react-scripts eject",
+    "server": "node server.js"
   },
   "eslintConfig": {
     "extends": [
@@ -38,7 +40,7 @@
       "last 1 safari version"
     ]
   },
-  "homepage": "./",
+  "homepage": "https://quickchess.sage.boats",
   "devDependencies": {
     "react-test-renderer": "^17.0.1"
   }

server.js

@@ -1,9 +1,9 @@
-const { textFromBoard } = require('./src/logic')
+import { textFromBoard } from './src/logic.js'
-const { Board } = require('./src/backend');
+import { Board } from './src/backend.js';
 
-const express = require('express');
+import express from 'express';
-const http = require('http');
+import http from 'http';
-const socketIo = require('socket.io');
+import { Server } from 'socket.io';
 
 const port = process.env.PORT || 4001;
 
@@ -11,7 +11,7 @@ const app = express();
 
 const server = http.createServer(app);
 
-const io = socketIo(server, {
+const io = new Server(server, {
   cors: {
     cors: true,
   }
@@ -28,7 +28,9 @@ io.on("connection", (socket) => {
   }
   //interval = setInterval(() => getApiAndEmit(socket), 5000);
   socket.on("disconnect", () => {
-    console.log("Client disconnected");
+    const game = socket.connectedGame
+    const gameMessage = game ? `from game '${game.key}'` : "and was not attached to a game"
+    console.log("Client disconnected " + gameMessage);
     clearInterval(interval);
   });
 
@@ -41,12 +43,14 @@ io.on("connection", (socket) => {
       game.sockets.push(socket);
     } else {
       game = {
+        key,
         sockets: [socket],
         board: new Board(),
         moveDate: null,
       };
       console.log(`Created game '${key}'`);
     }
+    socket.connectedGame = game;
     games.set(key, game);
     getApiAndEmit(socket, game.board);
   });

src/backend.js

@@ -1,4 +1,4 @@
-const { Piece, startingBoard, BLACK, WHITE, PAWN, ROOK, KNIGHT, BISHOP, QUEEN, KING, EMPTY } = require('./logic')
+import { Piece, startingBoard, BLACK, WHITE, PAWN, ROOK, KNIGHT, BISHOP, QUEEN, KING, EMPTY } from './logic.js'
 
 const SHUFFLING_ENABLED = 0;
 
@@ -15,7 +15,7 @@ function settingText(setting) {
   }
 }
 
-class Board {
+export class Board {
   constructor(props) {
     this.state = props?.text ?
       this.stateFromText(props.text) : startingBoard();
@@ -428,8 +428,6 @@ class Board {
   }
 }
 
-module.exports = { Board }
-
 // export default Board;
 // export {Board, Piece};
 // export { BLACK, WHITE, PAWN, ROOK, KNIGHT, BISHOP, QUEEN, KING, EMPTY };

src/index.js

@@ -6,7 +6,7 @@ import Board from './components/Board';
 
 import './index.css';
 
-const ENDPOINT = "https://quickchess.undercover.cafe";
+const ENDPOINT = process.env.REACT_APP_QUICKCHESS_API || "https://quickchess.undercover.cafe";
 
 class NameForm extends React.Component {
   constructor(props) {