Merge pull request #89 from anonfedora/anonfedora

Implement "change dice" on client #70
sivicstudio · Oct 6, 2024 · 3cf0417 · 3cf0417
2 parents 8a24dcb + 8d3654e
commit 3cf0417
Show file tree

Hide file tree

Showing 15 changed files with 378 additions and 83 deletions.
diff --git a/client/src/App.tsx b/client/src/App.tsx
@@ -19,6 +19,7 @@ import Control from "./components/Control";
 import { StarknetProvider } from "./starknet-provider";
 import { FiAlertTriangle, FiZap } from "react-icons/fi";
 import { BoardContext, BoardType } from "./context/board-context";
+import { DiceProvider } from "./context/dice-context";
 import ControlWindowLayout from "./components/ControlWindows/ControlWindowLayout";
 import GameHelp from "./components/ControlWindows/GameHelp";
 import Toolbox from "./components/ControlWindows/Toolbox";
@@ -30,6 +31,7 @@ const App = () => {
   const [activeWindow, setActiveWindow] = useState("");
   const [board, setBoard] = useState<BoardType>("classic");
   const [gameState, setGameState] = useState({});
+  const [activeCategory, setActiveCategory] = useState("BOARD");
   const [options, setOptions] = useState<OptionsProps>({
     gameIsOngoing: false,
     playersLength: 0,
@@ -52,6 +54,10 @@ const App = () => {
     setBoard(newBoard);
   };
 
+  const handleCategoryClick = (category: string) => {
+    setActiveCategory(category);
+  };
+
   const setGameData = useCallback((game: object) => {
     setGameState(game);
   }, []);
@@ -92,87 +98,92 @@ const App = () => {
           }}
         >
           <BoardContext.Provider value={{ board, toggleBoard }}>
-            <div className="game-behaviour-warning">
-              <FiAlertTriangle size={40} style={{ marginRight: "10px" }} />
-              StarkLudo is still in active development{" "}
-              <FiZap color="yellow" size={20} />
-            </div>
-            <div className="layout-container">
-              <div className="mobile-header">
-                <Header />
+            <DiceProvider>
+              <div className="game-behaviour-warning">
+                <FiAlertTriangle size={40} style={{ marginRight: "10px" }} />
+                StarkLudo is still in active development{" "}
+                <FiZap color="yellow" size={20} />
               </div>
-              <Row gutter={0}>
-                <Col xs={12} sm={12} md={7} lg={7}>
-                  <Ludo />
-                </Col>
-                <Col xs={12} sm={12} md={5} lg={5}>
-                  <div className="sidebar">
-                    <div>
+              <div className="layout-container">
+                <div className="mobile-header">
+                  <Header />
+                </div>
+                <Row gutter={0}>
+                  <Col xs={12} sm={12} md={7} lg={7}>
+                    <Ludo />
+                  </Col>
+                  <Col xs={12} sm={12} md={5} lg={5}>
+                    <div className="sidebar">
                       <div>
-                        <div className="desktop-header">
-                          <Header />
-                        </div>
-                        <Menu />
-                        <RestartGame />
-                        <Alert />
-                        <Dice />
-                        {activeWindow === "account" ? (
-                          <ControlWindowLayout
-                            toggle={() => setActiveWindow("")}
-                            title="PROFILE"
-                            subtitle="Your Profile Information"
-                          >
-                            <GameAccount />
-                          </ControlWindowLayout>
-                        ) : null}
+                        <div>
+                          <div className="desktop-header">
+                            <Header />
+                          </div>
+                          <Menu />
+                          <RestartGame />
+                          <Alert />
+                          <Dice />
+                          {activeWindow === "account" ? (
+                            <ControlWindowLayout
+                              toggle={() => setActiveWindow("")}
+                              title="PROFILE"
+                              subtitle="Your Profile Information"
+                            >
+                              <GameAccount />
+                            </ControlWindowLayout>
+                          ) : null}
 
-                        {activeWindow === "leaderboard" ? (
-                          <ControlWindowLayout
-                            toggle={() => setActiveWindow("")}
-                            title="LEADERBOARD"
-                            subtitle="Global Player Rankings"
-                          >
-                            <Leaderboard />
-                          </ControlWindowLayout>
-                        ) : null}
+                          {activeWindow === "leaderboard" ? (
+                            <ControlWindowLayout
+                              toggle={() => setActiveWindow("")}
+                              title="LEADERBOARD"
+                              subtitle="Global Player Rankings"
+                            >
+                              <Leaderboard />
+                            </ControlWindowLayout>
+                          ) : null}
 
-                        {activeWindow === "multiplayer" ? (
-                          <ControlWindowLayout
-                            toggle={() => setActiveWindow("")}
-                            title="MULTIPLAYER"
-                            subtitle="Choose An Account To Play With"
-                          >
-                            <Multiplayer />
-                          </ControlWindowLayout>
-                        ) : null}
+                          {activeWindow === "multiplayer" ? (
+                            <ControlWindowLayout
+                              toggle={() => setActiveWindow("")}
+                              title="MULTIPLAYER"
+                              subtitle="Choose An Account To Play With"
+                            >
+                              <Multiplayer />
+                            </ControlWindowLayout>
+                          ) : null}
 
-                        {activeWindow === "toolbox" ? (
-                          <ControlWindowLayout
-                            toggle={() => setActiveWindow("")}
-                            title="TOOLBOX"
-                            subtitle="Get All Your Items And Settings Done"
-                          >
-                            <Toolbox />
-                          </ControlWindowLayout>
-                        ) : null}
+                          {activeWindow === "toolbox" ? (
+                            <ControlWindowLayout
+                              toggle={() => setActiveWindow("")}
+                              title="TOOLBOX"
+                              subtitle="Get All Your Items And Settings Done"
+                            >
+                              <Toolbox
+                                activeCategory={activeCategory}
+                                onCategoryClick={handleCategoryClick}
+                              />
+                            </ControlWindowLayout>
+                          ) : null}
 
-                        {activeWindow === "help" ? (
-                          <ControlWindowLayout
-                            toggle={() => setActiveWindow("")}
-                            title="HELP"
-                            subtitle="Get Guides, Tips, And Tricks Needed For A Successful Game"
-                          >
-                            <GameHelp />
-                          </ControlWindowLayout>
-                        ) : null}
-                        <Control toggleActiveWindow={toggleActiveWindow} />
+                          {activeWindow === "help" ? (
+                            <ControlWindowLayout
+                              toggle={() => setActiveWindow("")}
+                              title="HELP"
+                              subtitle="Get Guides, Tips, And Tricks Needed For A Successful Game"
+                            >
+                              <GameHelp />
+                            </ControlWindowLayout>
+                          ) : null}
+                          <Control toggleActiveWindow={toggleActiveWindow} />
+                        </div>
                       </div>
                     </div>
-                  </div>
-                </Col>
-              </Row>
-              <Footer />
-            </div>
+                  </Col>
+                </Row>
+                <Footer />
+              </div>
+            </DiceProvider>
           </BoardContext.Provider>
         </GameContext.Provider>
         <ToastContainer position="bottom-center" />

diff --git a/client/src/assets/images/dice-10.svg b/client/src/assets/images/dice-10.svg
diff --git a/client/src/assets/images/dice-5.svg b/client/src/assets/images/dice-5.svg
diff --git a/client/src/assets/images/dice-6.svg b/client/src/assets/images/dice-6.svg
diff --git a/client/src/assets/images/dice-7.svg b/client/src/assets/images/dice-7.svg
diff --git a/client/src/assets/images/dice-8.svg b/client/src/assets/images/dice-8.svg
diff --git a/client/src/assets/images/dice-9.svg b/client/src/assets/images/dice-9.svg
diff --git a/client/src/components/ControlWindows/Toolbox.tsx b/client/src/components/ControlWindows/Toolbox.tsx
@@ -2,29 +2,72 @@ import { useContext } from "react";
 import "../../styles/Toolbox.scss";
 import { BoardContext } from "../../context/board-context";
 import OptionCard from "../OptionCard";
+import { DiceContext } from "../../context/dice-context";
+import dice10 from "../../assets/images/dice-10.svg";
+import dice9 from "../../assets/images/dice-9.svg";
+import dice8 from "../../assets/images/dice-8.svg";
+import dice7 from "../../assets/images/dice-7.svg";
+import dice6 from "../../assets/images/dice-6.svg";
+import dice5 from "../../assets/images/dice-5.svg";
+import DiceCard from "../DiceCard";
 
-const Toolbox = () => {
+interface ToolboxProps {
+  activeCategory: string;
+  onCategoryClick: (category: string) => void;
+}
+
+const Toolbox = ({ activeCategory, onCategoryClick }: ToolboxProps) => {
   const { board, toggleBoard } = useContext(BoardContext);
+  const { dice, changeDice } = useContext(DiceContext);
 
   const boardOptions = [
     { name: "Classic", option: "classic" },
     { name: "Wooden", option: "wooden-board" },
     { name: "Fire", option: "fire-board" },
   ];
 
+  const diceOptions = [
+    { name: "Basic Dice", option: "basic", img: dice5 },
+    { name: "Gold Dice", option: "gold", img: dice6 },
+    { name: "Black Dice", option: "black", img: dice7 },
+    { name: "Unique Dice", option: "unique", img: dice8 },
+    { name: "Red Dice", option: "red", img: dice9 },
+    { name: "Silver Dice", option: "silver", img: dice10 },
+  ];
+
   return (
     <div className="toolbox">
       <div className="categories">
-        <button className="category">BOARD</button>
-        <button className="category">DICE</button>
-        <button className="category">AVATAR</button>
-        <button className="category">COLOR</button>
+        <button
+          className={`category ${activeCategory === "BOARD" ? "active" : ""}`}
+          onClick={() => onCategoryClick("BOARD")}
+        >
+          BOARD
+        </button>
+        <button
+          className={`category ${activeCategory === "DICE" ? "active" : ""}`}
+          onClick={() => onCategoryClick("DICE")}
+        >
+          DICE
+        </button>
+        <button
+          className={`category ${activeCategory === "AVATAR" ? "active" : ""}`}
+          onClick={() => onCategoryClick("AVATAR")}
+        >
+          AVATAR
+        </button>
+        <button
+          className={`category ${activeCategory === "COLOR" ? "active" : ""}`}
+          onClick={() => onCategoryClick("COLOR")}
+        >
+          COLOR
+        </button>
       </div>
       <div className="active-category">
         <h3>Active Dice</h3>
-        <h5>Basic</h5>
+        <h5>{dice.charAt(0).toUpperCase()+dice.slice(1).toLowerCase()} dice</h5>
       </div>
-      <div className="options">
+      {activeCategory === "BOARD" && <div className="options">
         {boardOptions.map((item) => (
           <OptionCard
             key={item.option}
@@ -35,7 +78,20 @@ const Toolbox = () => {
             }}
           />
         ))}
-      </div>
+      </div>}
+      {activeCategory === "DICE" && <div className="dice-options">
+        {diceOptions.map((item) => (
+          <DiceCard
+            img={item.img}
+            key={item.option}
+            option={item}
+            active={board === item.option}
+            onSelect={() => {
+              changeDice(item.option, item.img);
+            }}
+          />
+        ))}
+      </div>}
     </div>
   );
 };

diff --git a/client/src/components/Dice.tsx b/client/src/components/Dice.tsx
@@ -4,11 +4,13 @@ import { Row, Col } from "react-simple-flex-grid";
 import "../styles/Dice.scss";
 import { GameContext } from "../context/game-context";
 import diceSound from "../assets/audio/shaking-dice-25620.mp3";
+import { DiceContext } from "../context/dice-context";
 
 const Dice = () => {
   const { moveValidator } = useGame();
   const [diceClass, setDiceClass] = useState("");
   const { options, setGameOptions } = useContext(GameContext);
+  const { img} = useContext(DiceContext);
   const audioRef = useRef(new Audio(diceSound));
 
   // cc = center-center; tl = top-left; br = bottom-right; etc.
@@ -113,7 +115,7 @@ const Dice = () => {
       {options.gameIsOngoing && (
         <Row gutter={0} className="dice-container">
           <Col xs={options.hasThrownDice ? 12 : 6}>
-            <div id="dice-body" className={`${diceClass}`}>
+            {/* <div id="dice-body" className={`${diceClass}`}>
               <div id="tl" className="dot" />
               <div id="tc" className="dot" />
               <div id="tr" className="dot" />
@@ -123,7 +125,8 @@ const Dice = () => {
               <div id="bl" className="dot" />
               <div id="bc" className="dot" />
               <div id="br" className="dot" />
-            </div>
+            </div> */}
+              <img id="dice-img" className={`${diceClass}`} src={img} alt="dice" />
           </Col>
 
           {!options.hasThrownDice && (

diff --git a/client/src/components/DiceCard.tsx b/client/src/components/DiceCard.tsx
@@ -0,0 +1,29 @@
+import "../styles/OptionCard.scss";
+
+interface Option {
+  name: string;
+}
+export default function DiceCard({
+  img,
+  active,
+  onSelect,
+  option,
+}: {
+  img?: string;
+  active?: boolean;
+  onSelect?: () => void;
+  option?: Option;
+}) {
+  return (
+    <button
+      className={`option-container ${active ? "active" : ""}`}
+      onClick={onSelect}
+    >
+      <div className="option">
+        <div className="name-label">{option?.name}</div>
+        <img src={img} alt="board" />
+        <div className="option-label">5/6</div>
+      </div>
+    </button>
+  );
+}