README.md

@@ -1,7 +1,8 @@
 # QuickChess
 
-This is a simple implementation of Chess in React. It supports all moves, including castling and en passant. A live build can be seen here:
+This is a simple implementation of Chess in React. It supports nearly all moves,
-[https://quickchess.win/](https://quickchess.win/). Assets
+with castling still to be added. A live build can be seen here:
+[https://sagev.space/quickchess/](https://sagev.space/quickchess/). Assets
 borrowed from Wikipedia.
 
 # Building

package.json

@@ -1,15 +1,14 @@
 {
-  "name": "quickchess",
+  "name": "chess",
   "version": "0.1.0",
   "private": true,
-  "type": "module",
   "dependencies": {
     "@testing-library/jest-dom": "^5.11.4",
-    "@testing-library/react": "^14.0.0",
+    "@testing-library/react": "^11.1.0",
     "@testing-library/user-event": "^12.1.10",
     "express": "^4.17.1",
-    "react": "^18.2.0",
+    "react": "^17.0.1",
-    "react-dom": "^18.2.0",
+    "react-dom": "^17.0.1",
     "react-scripts": "5.0.1",
     "socket.io": "^3.0.5",
     "socket.io-client": "^3.0.5",
@@ -17,10 +16,9 @@
   },
   "scripts": {
     "start": "react-scripts start",
-    "build": "npm ci && react-scripts build",
+    "build": "react-scripts build",
     "test": "react-scripts test",
-    "eject": "react-scripts eject",
+    "eject": "react-scripts eject"
-    "server": "node server.js"
   },
   "eslintConfig": {
     "extends": [
@@ -40,8 +38,8 @@
       "last 1 safari version"
     ]
   },
-  "homepage": "https://quickchess.sage.boats",
+  "homepage": "./",
   "devDependencies": {
-    "react-test-renderer": "^18.2.0"
+    "react-test-renderer": "^17.0.1"
   }
 }

server.js

@@ -1,9 +1,9 @@
-import { textFromBoard } from './src/logic.js'
+const { textFromBoard } = require('./src/logic')
-import { Board } from './src/backend.js';
+const { Board } = require('./src/backend');
 
-import express from 'express';
+const express = require('express');
-import http from 'http';
+const http = require('http');
-import { Server } from 'socket.io';
+const socketIo = require('socket.io');
 
 const port = process.env.PORT || 4001;
 
@@ -11,7 +11,7 @@ const app = express();
 
 const server = http.createServer(app);
 
-const io = new Server(server, {
+const io = socketIo(server, {
   cors: {
     cors: true,
   }
@@ -28,9 +28,7 @@ io.on("connection", (socket) => {
   }
   //interval = setInterval(() => getApiAndEmit(socket), 5000);
   socket.on("disconnect", () => {
-    const game = socket.connectedGame
+    console.log("Client disconnected");
-    const gameMessage = game ? `from game '${game.key}'` : "and was not attached to a game"
-    console.log("Client disconnected " + gameMessage);
     clearInterval(interval);
   });
 
@@ -43,14 +41,12 @@ 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,16 @@
-import { Piece, startingBoard, BLACK, WHITE, PAWN, ROOK, KNIGHT, BISHOP, QUEEN, KING, EMPTY } from './logic.js'
+import { Piece } from './logic'
+
+
+const BLACK = 0; const WHITE = 1;
+
+const PAWN = 0;
+const ROOK = 1;
+const KNIGHT = 2;
+const BISHOP = 3;
+const QUEEN = 4;
+const KING = 5;
+
+const EMPTY = -1;
 
 const SHUFFLING_ENABLED = 0;
 
@@ -15,10 +27,22 @@ function settingText(setting) {
   }
 }
 
-export class Board {
+function range(n) {
+  return Array.from(Array(n).keys());
+}
+
+function imageFromPiece(piece) {
+  if (piece && piece.type >= 0) {
+    const image = piece.color === WHITE ? piece.type : piece.type + 6;
+    return Images[image];
+  }
+  return null;
+}
+
+class Board {
   constructor(props) {
     this.state = props?.text ?
-      this.stateFromText(props.text) : startingBoard();
+      this.stateFromText(props.text) : this.originalState();
   }
 
   setHand(hand) {
@@ -428,6 +452,8 @@ export class Board {
   }
 }
 
+module.exports = { Board }
+
 // export default Board;
 // export {Board, Piece};
 // export { BLACK, WHITE, PAWN, ROOK, KNIGHT, BISHOP, QUEEN, KING, EMPTY };

src/components/Board.js

@@ -1,8 +1,9 @@
 import React from 'react';
-import Popup from './Popup.js';
+import Popup from './Popup';
 
 import '../index.css';
-import { Piece, startingBoard, PAWN, ROOK, KNIGHT, BISHOP, QUEEN, KING, EMPTY, BLACK, WHITE } from '../logic.js';
+import { Piece, startingBoard, PAWN, ROOK, KNIGHT, BISHOP, QUEEN, KING, EMPTY, BLACK, WHITE } from '../logic';
+
 
 const Images = [
     './white_pawn.svg',
@@ -619,4 +620,5 @@ class Board extends React.Component {
 }
 
 export default Board;
-export { Piece, BLACK, WHITE, PAWN, ROOK, KNIGHT, BISHOP, QUEEN, KING, EMPTY };
+export {Piece};
+export { BLACK, WHITE, PAWN, ROOK, KNIGHT, BISHOP, QUEEN, KING, EMPTY };

src/components/Popup.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import './style.css';
 
-class Popup extends React.Component {
+class Popup extends React.Component {
   render() {
     return (
       <div className='popup'>

src/index.css

@@ -10,13 +10,6 @@ body {
   justify-content: center;
 }
 
-#root {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  height: 100%;
-}
-
 ol, ul {
   padding-left: 30px;
 }
@@ -61,11 +54,6 @@ ol, ul {
   }
 }
 
-.game {
-  height: 100%;
-  display: flex;
-}
-
 .square {
   background: #fff;
   border: none;
@@ -106,7 +94,6 @@ ol, ul {
 
 .game-board {
   display: flex;
-  flex-direction: column;
   justify-content: center;
   align-items: center;
 }
@@ -124,4 +111,4 @@ ol, ul {
 .icon:hover {
   opacity: 1;
   margin-top: -0.35em;
-}
+}

src/index.js

@@ -2,11 +2,12 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 import io from 'socket.io-client';
 
-import Board from './components/Board.js';
+import Board from './components/Board';
 
 import './index.css';
 
-const ENDPOINT = process.env.REACT_APP_QUICKCHESS_API || "https://api.quickchess.win";
+
+const ENDPOINT = "https://quickchess.undercover.cafe";
 
 class NameForm extends React.Component {
   constructor(props) {
@@ -34,7 +35,7 @@ class NameForm extends React.Component {
         </label>
         <div style={{ textAlign: 'center', width: '80%' }}>
           <input className='big-input' style={{ width: '50%' }} name='lobby-name' type="text" value={this.state.value} onChange={this.handleChange} />
-          <input className='big-input' style={{ marginLeft: '8px' }} type="submit" value="Join" />
+          <input className='big-input' style={{ marginLeft: '8px' }} type="submit" value="Submit" />
         </div>
       </form>
     );
@@ -77,14 +78,11 @@ class Game extends React.Component {
 
   render() {
     return (
-      <>
+      <div className="game">
-        <h2 className="white-on-light">QuickChess</h2>
+        <div className="game-board">
-        <div className="game">
+          {this.state.gameKey ? this.state.board : <NameForm onSubmit={this.setGameKey.bind(this)} />}
-          <div className="game-board">
-            {this.state.gameKey ? this.state.board : <NameForm onSubmit={this.setGameKey.bind(this)} />}
-          </div>
         </div>
-      </>
+      </div>
     );
   }
 }

src/logic.js

@@ -1,16 +1,16 @@
-export const BLACK = 0;
+const BLACK = 0;
-export const WHITE = 1;
+const WHITE = 1;
 
-export const PAWN = 0;
+const PAWN = 0;
-export const ROOK = 1;
+const ROOK = 1;
-export const KNIGHT = 2;
+const KNIGHT = 2;
-export const BISHOP = 3;
+const BISHOP = 3;
-export const QUEEN = 4;
+const QUEEN = 4;
-export const KING = 5;
+const KING = 5;
 
-export const EMPTY = -1;
+const EMPTY = -1;
 
-export class Piece {
+class Piece {
   constructor(color, type) {
     this.color = color;
     this.type = type;
@@ -75,7 +75,7 @@ export class Piece {
   }
 }
 
-export const startingBoard = () => {
+const startingBoard = () => {
   let squares = [];
   const mainRow = [ROOK, KNIGHT, BISHOP, QUEEN, KING, BISHOP, KNIGHT, ROOK];
   function add(num, color, type) {
@@ -101,9 +101,9 @@ export const startingBoard = () => {
   });
 }
 
-export const textFromBoard = ({ state }) => {
+const textFromBoard = ({ state }) => {
-  const turn = state?.blackIsNext ? 'B' : 'W';
+  const turn = (this.state.blackIsNext? 'B' : 'W');
-  return turn + state?.squares.map(square => {
+  return turn + this.state.squares.map(square => {
     if (!square) {
       return '_';
     }
@@ -128,3 +128,5 @@ export const textFromBoard = ({ state }) => {
     }
   }).join('');
 }
+
+export { Piece, startingBoard, textFromBoard, PAWN, ROOK, KNIGHT, BISHOP, QUEEN, KING, EMPTY, BLACK, WHITE }