implement backgammon

Author: Manivela

.eslintignore

@@ -0,0 +1 @@
+src/Components/Backgammon

.eslintrc

@@ -27,7 +27,14 @@
     "react/no-unknown-property": "off",
     "no-unused-expressions": "off",
     "react/jsx-props-no-spreading": "off",
-    "consistent-return": "off"
+    "consistent-return": "off",
+    "no-lonely-if": "off",
+    "no-restricted-syntax": "off",
+    "prefer-destructuring": "off",
+    "no-multi-assign": "off",
+    "class-methods-use-this": "off",
+    "react/no-access-state-in-setstate": "off",
+    "array-callback-return": "off"
   },
   "env": {
     "browser": true

.prettierignore

@@ -0,0 +1 @@
+src/Components/Backgammon

package-lock.json

@@ -26,6 +26,7 @@
     "react-merge-refs": "^2.0.1",
     "react-router-dom": "^6.9.0",
     "react-scripts": "^5.0.1",
+    "react-serialize": "^0.2.1",
     "react-spring": "^9.7.1",
     "three": "^0.150.1",
     "vite": "^4.2.0",

package.json

@@ -16,7 +16,7 @@ class Menu extends Component {
             footer: content.footer,
             menuWidth: content.width,
             canClose: content.canClose,
-            playerNames: { p1: this.props.players.p1, p2: this.props.players.p2 },
+            playerNames: { p1: this.props.players.p1.name, p2: this.props.players.p2.name },
             playerStarts: 1,
         }
     }
@@ -68,7 +68,7 @@ class Menu extends Component {
 
         content.body = <React.Fragment>
             <img src="./assets/congratulation.png" alt="congratulation" />
-            <p className="modal-body-centralized">{gameStatus === 60 ? players.p1 : players.p2} wins!</p>
+            <p className="modal-body-centralized">{gameStatus === 60 ? players.p1.name : players.p2.name} wins!</p>
         </React.Fragment>
 
         content.footer = this.getRegularFooter();
@@ -96,6 +96,7 @@ class Menu extends Component {
 
     //Get a new game
     getNewGame = (gameStatus, players, playerStarts) => {
+        console.log('players: ', players);
         const content = {};
 
         const p1Starts = playerStarts === 1 ? 'btn-info' : 'btn-default';
@@ -112,7 +113,8 @@ class Menu extends Component {
                 <input type="text"
                     className="form-control modal-body-t2"
                     value={players.p1}
-                    onChange={this.changePlayerName.bind(this, 1)}
+                    // onChange={this.changePlayerName.bind(this, 1)}
+                    disabled
                 />
                 <div className="input-group-btn">
                     <button className={'btn ' + p1Starts}
@@ -126,7 +128,8 @@ class Menu extends Component {
                 <input type="text"
                     className="form-control modal-body-t2"
                     value={players.p2}
-                    onChange={this.changePlayerName.bind(this, 2)}
+                    // onChange={this.changePlayerName.bind(this, 2)}
+                    disabled
                 />
                 <div className="input-group-btn">
                     <button className={'btn ' + p2Starts}

src/Components/Backgammon/components/Menu/Menu.jsx

@@ -45,7 +45,7 @@ const Status = (props) => {
             <div id="game-score">
                 <div className="player-score-container">
                     <div className="player-score-name">
-                        <p>{props.players.p1}</p>
+                        <p>{props.players.p1.name}</p>
                     </div>
                     <div className="player-score-checker">
                         <Checker player={1} count={1} />
@@ -56,7 +56,7 @@ const Status = (props) => {
                 </div>
                 <div className="player-score-container">
                     <div className="player-score-name">
-                        <p>{props.players.p2}</p>
+                        <p>{props.players.p2.name}</p>
                     </div>
                     <div className="player-score-checker">
                         <Checker player={2} count={1} />

src/Components/Backgammon/components/Status/Status.jsx

@@ -11,7 +11,7 @@
 }
 
 #viewbox {
-  width: 1200px;
+  width: 95%;
 }
 
 #game {

src/Components/Backgammon/containers/App.css

@@ -7,6 +7,68 @@ import Board from "../components/Board/Board";
 import Status from "../components/Status/Status";
 import Menu from "../components/Menu/Menu";
 import _ from "lodash";
+import { useAuthStore } from "../../../hooks/useStore";
+import { useMap } from "@joebobmiles/y-react";
+
+function withHooksAndPlayers(Component) {
+  return function WrappedComponent(props) {
+    const [currentUser] = useAuthStore((state) => [state.currentUser]);
+    const ymap = useMap("tictactoe-state");
+    const state = ymap.get("game-state");
+    const setState = (value) => ymap.set("game-state", value);
+    let users = ymap.get("users");
+    const setUsers = (value) => {
+      ymap.set("users", value);
+    };
+
+    if (users === undefined) {
+      users = { p1: null, p2: null };
+      setUsers(users);
+    }
+    if (!users.p1 || !users.p2) {
+      return (
+        <div>
+          {users.p1 ? (
+            <span>{users.p1.name}</span>
+          ) : (
+            <button
+              onClick={() => {
+                if (users.p2?.id !== currentUser.id) {
+                  setUsers({ ...users, p1: currentUser });
+                }
+              }}
+            >
+              Play as Player One
+            </button>
+          )}{" "}
+          VS{" "}
+          <button
+            onClick={() => {
+              if (users.p1?.id !== currentUser.id) {
+                setUsers({ ...users, p2: currentUser });
+              }
+            }}
+          >
+            Play as Player Two
+          </button>
+        </div>
+      );
+    }
+
+    return (<>
+      <button onClick={()=>{
+        setUsers({p1:null,p2:null})
+      }}>Reset Players</button>
+      <Component
+        {...props}
+        currentUser={currentUser}
+        state={state}
+        setState={setState}
+        users={users}
+      /></>
+    );
+  };
+}
 
 class App extends Component {
   constructor(props) {
@@ -22,19 +84,14 @@ class App extends Component {
       grayBar: { checkersP1: 0, checkersP2: 0 },
       outSideBar: { checkersP1: 15, checkersP2: 15 },
       movingChecker: false,
-      players: { p1: "Player 1", p2: "Player 2" },
+      players: { p1: this.props.users.p1, p2: this.props.users.p2 },
       showMenu: true,
     };
-    const handleData = (data) => {
-      if (data.type === "backgammon") {
-        console.log("backgammon: ", data);
-        this.setState(data.data);
-      }
-    };
-    props.setDataListeners((prevDataListeners) => [
-      ...prevDataListeners,
-      handleData,
-    ]);
+  }
+  componentDidUpdate(prevProps) {
+    if (this.props.state !== prevProps.state) {
+      this.setState(this.props.state);
+    }
   }
 
   //Toggle menu
@@ -46,16 +103,7 @@ class App extends Component {
 
   setSharedState = (newState) => {
     this.setState(newState);
-    function customizer(value) {
-      if (_.isFunction(value)) {
-        return false;
-      }
-    }
-    const withoutFunc = _.cloneDeepWith(newState, customizer);
-    this.props.sendData({
-      type: "backgammon",
-      data: withoutFunc,
-    });
+    this.props.setState(newState);
   };
 
   //set up new game
@@ -71,11 +119,6 @@ class App extends Component {
     const movingChecker = false;
     const showMenu = false;
 
-    const players = {
-      p1: this.props.id,
-      p2: this.props.players.find((p) => p.id !== this.props.id).id,
-    };
-
     history.push(this.setHistory(p1IsNext, dice, points, grayBar, outSideBar));
 
     //set points
@@ -100,7 +143,6 @@ class App extends Component {
       outSideBar: outSideBar,
       movingChecker: movingChecker,
       showMenu: showMenu,
-      players: players,
     });
   };
 
@@ -662,7 +704,7 @@ class App extends Component {
               dice={this.state.dice}
               points={this.state.points}
               p1IsNext={this.state.p1IsNext}
-              isP1={this.state.players.p1 === this.props.id}
+              isP1={this.state.players.p1.id === this.props.currentUser.id}
               gameStatus={this.state.gameStatus}
             >
               <Graybar checkers={this.state.grayBar} />
@@ -680,4 +722,4 @@ class App extends Component {
   }
 }
 
-export default App;
+export default withHooksAndPlayers(App);

src/Components/Backgammon/containers/App.jsx

@@ -3,6 +3,21 @@ import { useLocation, useMatch } from "react-router-dom";
 function Credits() {
   const isTicTacToe = useMatch("/:roomId/tictactoe");
   const isMinecraft = useMatch("/:roomId/minecraft");
+  const isBackgammon = useMatch("/:roomId/backgammon");
+  if (isBackgammon) {
+    return (
+      <div style={{ flexDirection: "column" }}>
+        <div>Credits for this example:</div>
+        <a
+          href="https://github.com/bnunesc/react-backgammon"
+          target="_blank"
+          rel="noreferrer"
+        >
+          Bruno Nunes
+        </a>
+      </div>
+    );
+  }
   if (isTicTacToe) {
     return (
       <div style={{ flexDirection: "column" }}>

src/Components/Credits.jsx

@@ -16,6 +16,7 @@ import { RequireAuth } from "./routes/RequireAuth";
 import TicTacToe from "./Components/TicTacToe";
 import Minecraft from "./Components/Minecraft/App";
 import Chat from "./Components/Chat";
+import Backgammon from "./Components/Backgammon/containers/App";
 
 const router = createBrowserRouter(
   createRoutesFromElements(
@@ -35,6 +36,7 @@ const router = createBrowserRouter(
           <Route path="tictactoe" element={<TicTacToe />} />
           <Route path="minecraft" element={<Minecraft />} />
           <Route path="chat" element={<Chat />} />
+          <Route path="backgammon" element={<Backgammon />} />
         </Route>
       </Route>
     </Route>