style select-avater page & active player panel

jbshryne · Feb 12, 2024 · a48574a · a48574a
1 parent dad4950
commit a48574a
Show file tree

Hide file tree

Showing 7 changed files with 78 additions and 20 deletions.
diff --git a/src/App.css b/src/App.css
@@ -94,6 +94,22 @@ img {
   width: 100vw;
 }
 
+.select-page {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  /* justify-content: center; */
+  height: 95vh;
+  width: 100vw;
+}
+
+.select-page h1 {
+  font-family: "Uncial Antiqua", sans-serif;
+  margin: 0px 10px;
+  font-size: 40px;
+  /* color: rgb(221, 196, 162); */
+}
+
 .rules-page {
   display: flex;
   flex-direction: column;
@@ -315,6 +331,18 @@ ul {
   border: none;
 }
 
+.controls {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 60px;
+  padding: 10px;
+  margin: 10px;
+  background-color: rgba(211, 211, 210, 0.2);
+}
+
 button {
   font-family: "Cinzel", cursive;
   font-weight: 700;

diff --git a/src/App.js b/src/App.js
@@ -1,4 +1,3 @@
-// import { Outlet } from "react-router-dom";
 import { Route, Routes } from "react-router-dom";
 import "./App.css";
 import NavBar from "./components/NavBar";
@@ -28,9 +27,9 @@ function App() {
               // </AuthChecker>
             }
           />
-          <Route path="/select-avatar" element={<SelectAvatar />} />
-          <Route path="/game/quester" element={<Multiplayer playerID="0" />} />
-          <Route path="/game/monster" element={<Multiplayer playerID="1" />} />
+          <Route path="/select" element={<SelectAvatar />} />
+          <Route path="/game/0" element={<Multiplayer playerID="0" />} />
+          <Route path="/game/1" element={<Multiplayer playerID="1" />} />
         </Routes>
       </main>
     </div>

diff --git a/src/components/Board.jsx b/src/components/Board.jsx
@@ -14,7 +14,7 @@ import {
   GiChest,
 } from "react-icons/gi";
 
-export function Board({ ctx, G, moves, events }) {
+export function Board({ ctx, G, moves, events, playerID, isMultiplayer }) {
   // declare state variables
   // console.log("gsap", gsap);
   const [p1Status, setP1Status] = useState(G.messages.p1);
@@ -213,10 +213,20 @@ export function Board({ ctx, G, moves, events }) {
     const movement = player.moveTiles;
     const action = player.hasDoneAction;
     const powerup = player.powerup;
+
     const isCurrentPlayer = currentPlayer.name === name;
+    let isActivePlayer;
+    if (isMultiplayer) {
+      console.log("playerID", playerID);
+      console.log("ctx.currentPlayer", ctx.currentPlayer);
+      isActivePlayer =
+        currentPlayer.name === player.name && playerID === ctx.currentPlayer;
+    } else {
+      isActivePlayer = isCurrentPlayer;
+    }
 
     return (
-      <div className={`player-panel ${isCurrentPlayer && "active"}`}>
+      <div className={`player-panel ${isActivePlayer && "active"}`}>
         <section className="player-status-section">
           <p className="player-name">
             {name === "Quester" ? (
@@ -281,7 +291,7 @@ export function Board({ ctx, G, moves, events }) {
         <section>
           <button
             onClick={() => events.endTurn()}
-            className={currentPlayer.name !== name ? "disabled" : ""}
+            className={!isActivePlayer ? "disabled" : ""}
           >
             End Turn
           </button>

diff --git a/src/components/NavBar.jsx b/src/components/NavBar.jsx
@@ -17,7 +17,10 @@ const NavBar = () => {
       </Link>
       <section>
         <Link to="/game" className="nav-bar-item">
-          <span>GAME</span>
+          <span>PLAY GAME</span>
+        </Link>
+        <Link to="/select" className="nav-bar-item">
+          <span>MULTIPLAYER</span>
         </Link>
         <Link to="/rules" className="nav-bar-item">
           <span>HOW TO PLAY</span>

diff --git a/src/pages/Demo.jsx b/src/pages/Demo.jsx
@@ -6,11 +6,10 @@ import { Board } from "../components/Board";
 
 const Multiplayer = Client({
   game: DungeonThrowdown,
-  //   numPlayers: 2,
   board: BoardDisplay,
+  debug: false,
+  //   numPlayers: 2,
   //   multiplayer: SocketIO({ server: "localhost:8000" }),
-
-  // debug: false,
 });
 
 function BoardDisplay({ G, ctx, moves, events, playerID }) {

diff --git a/src/pages/Multiplayer.jsx b/src/pages/Multiplayer.jsx
@@ -9,8 +9,7 @@ const Multiplayer = Client({
   numPlayers: 2,
   board: BoardDisplay,
   multiplayer: SocketIO({ server: process.env.REACT_APP_SERVER }),
-
-  // debug: false,
+  debug: false,
 });
 
 function BoardDisplay({ G, ctx, moves, events, playerID }) {
@@ -26,7 +25,14 @@ function BoardDisplay({ G, ctx, moves, events, playerID }) {
   return (
     <div id="board-display">
       <p className="game-message">{gameMessage}</p>
-      <Board G={G} ctx={ctx} moves={moves} events={events} />
+      <Board
+        G={G}
+        ctx={ctx}
+        moves={moves}
+        events={events}
+        playerID={playerID}
+        isMultiplayer={true}
+      />
     </div>
   );
 }

diff --git a/src/pages/SelectAvatar.jsx b/src/pages/SelectAvatar.jsx
@@ -1,15 +1,28 @@
 import React from "react";
 import { Link } from "react-router-dom";
+import { GiFishMonster, GiSwordwoman } from "react-icons/gi";
 
 const SelectAvatar = () => {
   return (
-    <div>
+    <div className="select-page">
       <h1>Choose your avatar</h1>
-      <Link to="/game/quester">
-        <button>Quester</button>
-      </Link>
-      <Link to="/game/monster">
-        <button>Monster</button>
+      <div className="controls">
+        <Link to="/game/0">
+          <button>
+            <GiSwordwoman style={{ fontSize: "50" }} />
+          </button>
+        </Link>
+        <Link to="/game/1">
+          <button>
+            <GiFishMonster style={{ fontSize: "50" }} />
+          </button>
+        </Link>
+      </div>
+      <p>
+        <b>NOTE: Multiplayer mode is currently under development</b>
+      </p>
+      <Link to="game">
+        <button>PLAY LOCAL GAME</button>
       </Link>
     </div>
   );