Merge pull request #1 from barrymun/multiplayer-support

Multiplayer support

.dockerignore

@@ -0,0 +1 @@
+node_modules/

.eslintrc.json

@@ -2,7 +2,7 @@
   "root": true,
   "parser": "@typescript-eslint/parser",
   "parserOptions": {
-    "project": "./tsconfig.json"
+    "project": ["./tsconfig.json", "./client/tsconfig.json", "./server/tsconfig.json"]
   },
   "ignorePatterns": ["node_modules/", "build/", "*.config.js"],
   "plugins": ["@typescript-eslint", "prettier", "import"],
@@ -16,13 +16,20 @@
   "settings": {
     "import/resolver": {
       "typescript": {
-        "project": "./tsconfig.json"
+        "project": ["./tsconfig.json", "./client/tsconfig.json", "./server/tsconfig.json"]
       }
     }
   },
   "rules": {
-    "max-len": ["error", { "code": 120 }],
+    "max-len": [
+      "warn",
+      {
+        "code": 120
+      }
+    ],
     "no-unused-vars": "off",
+    "@typescript-eslint/no-empty-interface": "off",
+    "@typescript-eslint/no-non-null-assertion": "off",
     "@typescript-eslint/no-unused-vars": [
       "warn",
       {
@@ -42,7 +49,7 @@
       }
     ],
     "sort-imports": [
-      "error",
+      "warn",
       {
         "ignoreCase": false,
         "ignoreDeclarationSort": true,
@@ -51,7 +58,7 @@
         "allowSeparatedGroups": true
       }
     ],
-    "import/no-unresolved": "warn",
+    "import/no-unresolved": "error",
     "import/order": [
       "warn",
       {
@@ -63,6 +70,14 @@
           "index",
           "unknown"
         ],
+        "pathGroups": [
+          {
+            "pattern": "utils/**",
+            "group": "internal"
+          }
+        ],
+        "distinctGroup": false,
+        "pathGroupsExcludedImportTypes": ["builtin"],
         "newlines-between": "always",
         "alphabetize": {
           "order": "asc",

.gitignore

@@ -1,21 +1,23 @@
 # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 
 # dependencies
-/node_modules
-/.pnp
-.pnp.js
+node_modules/
 
 # testing
-/coverage
+coverage/
 
 # production
-/build
+build/
 
 # misc
 .DS_Store
+.env
 .env.local
+.env.development
 .env.development.local
+.env.test
 .env.test.local
+.env.production
 .env.production.local
 
 npm-debug.log*

README.md

@@ -83,3 +83,4 @@ This Chess TypeScript project is licensed under the MIT License. See the [LICENS
 - [x] fix grab piece issue where the "image" itself is "grabbed" (desktop)
 - [x] disable right click on piece grab
 - [x] change favicon and title
+- [ ] fix move history text for promoted pawns

client/.eslintrc.json

@@ -0,0 +1,3 @@
+{
+  "extends": "../.eslintrc.json"
+}

client/package.json

@@ -0,0 +1,56 @@
+{
+  "name": "client",
+  "version": "0.0.0",
+  "private": true,
+  "dependencies": {
+    "@radix-ui/react-icons": "^1.3.0",
+    "@radix-ui/themes": "^2.0.3",
+    "@testing-library/jest-dom": "^5.14.1",
+    "@testing-library/react": "^13.0.0",
+    "@testing-library/user-event": "^13.2.1",
+    "@types/jest": "^27.0.1",
+    "@types/node": "^16.7.13",
+    "@types/react": "^18.0.0",
+    "@types/react-dom": "^18.0.0",
+    "common": "file:../common/build",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-router-dom": "^6.22.0",
+    "react-scripts": "5.0.1",
+    "socket.io-client": "^4.7.4",
+    "web-vitals": "^2.1.0"
+  },
+  "devDependencies": {
+    "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
+    "@types/lodash": "^4.14.202",
+    "autoprefixer": "^10.4.17",
+    "lodash": "^4.17.21",
+    "postcss": "^8.4.33",
+    "setimmediate": "^1.0.5",
+    "tailwindcss": "^3.4.1"
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  },
+  "scripts": {
+    "start": "BROWSER=none react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test --watchAll=false",
+    "eject": "react-scripts eject"
+  },
+  "eslintConfig": {
+    "extends": [
+      "react-app",
+      "react-app/jest"
+    ]
+  }
+}

client/src/App.tsx

@@ -0,0 +1,15 @@
+import { Route, Routes } from "react-router-dom";
+
+import { Home, Multiplayer, SinglePlayer } from "routes";
+
+function App() {
+  return (
+    <Routes>
+      <Route path="/" element={<Home />} />
+      <Route path="/singleplayer" element={<SinglePlayer />} />
+      <Route path="/multiplayer" element={<Multiplayer />} />
+    </Routes>
+  );
+}
+
+export default App;

src/components/chess-board-x-labels.tsx → client/src/components/chess-board-x-labels.tsx

@@ -1,15 +1,27 @@
+import { Box, Text } from "@radix-ui/themes";
 import { FC } from "react";
 
+import { useGameState, useNetwork } from "hooks";
 import { xLabels } from "utils";
 
 interface ChessBoardXLabelsProps {}
 
 const ChessBoardXLabels: FC<ChessBoardXLabelsProps> = () => {
+  const { isMultiplayer } = useGameState();
+  const { currentPlayer } = useNetwork();
+
+  const getLabels = () => {
+    if (isMultiplayer && currentPlayer === "black") {
+      return [...xLabels].reverse();
+    }
+    return xLabels;
+  };
+
   return (
-    <div className="flex text-white">
-      {xLabels.map((x) => {
+    <Box className="flex">
+      {getLabels().map((x) => {
         return (
-          <div
+          <Box
             key={x}
             className="
               w-mobile 
@@ -24,11 +36,11 @@ const ChessBoardXLabels: FC<ChessBoardXLabelsProps> = () => {
               xs:text-xs
             "
           >
-            {x}
-          </div>
+            <Text>{x}</Text>
+          </Box>
         );
       })}
-    </div>
+    </Box>
   );
 };
 

src/components/chess-board-y-labels.tsx → client/src/components/chess-board-y-labels.tsx

@@ -1,15 +1,27 @@
+import { Box, Text } from "@radix-ui/themes";
 import { FC } from "react";
 
+import { useGameState, useNetwork } from "hooks";
 import { yLabels } from "utils";
 
 interface ChessBoardYLabelsProps {}
 
 const ChessBoardYLabels: FC<ChessBoardYLabelsProps> = () => {
+  const { isMultiplayer } = useGameState();
+  const { currentPlayer } = useNetwork();
+
+  const getLabels = () => {
+    if (isMultiplayer && currentPlayer === "black") {
+      return yLabels;
+    }
+    return [...yLabels].reverse();
+  };
+
   return (
-    <div className="text-white">
-      {[...yLabels].reverse().map((x) => {
+    <Box>
+      {getLabels().map((x) => {
         return (
-          <div
+          <Box
             key={x}
             className="
               w-4 
@@ -24,11 +36,11 @@ const ChessBoardYLabels: FC<ChessBoardYLabelsProps> = () => {
               xs:text-xs
             "
           >
-            {x}
-          </div>
+            <Text>{x}</Text>
+          </Box>
         );
       })}
-    </div>
+    </Box>
   );
 };