Implement "change dice" on client #70

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 { DiceContext, DiceType } from "./context/dice-context";
 import ControlWindowLayout from "./components/ControlWindows/ControlWindowLayout";
 import GameHelp from "./components/ControlWindows/GameHelp";
 import Toolbox from "./components/ControlWindows/Toolbox";
@@ -29,7 +30,9 @@ import GameAccount from "./components/ControlWindows/GameAccount";
 const App = () => {
   const [activeWindow, setActiveWindow] = useState("");
   const [board, setBoard] = useState<BoardType>("classic");
+  const [dice, setDice] = useState<DiceType>("basic");
   const [gameState, setGameState] = useState({});
+  const [activeCategory, setActiveCategory] = useState("BOARD");
   const [options, setOptions] = useState<OptionsProps>({
     gameIsOngoing: false,
     playersLength: 0,
@@ -52,6 +55,14 @@ const App = () => {
     setBoard(newBoard);
   };
 
+  const changeDice = (newDice: DiceType) => {
+    setDice(newDice);
+  };
+
+  const handleCategoryClick = (category: string) => {
+    setActiveCategory(category);
+  };
+
   const setGameData = useCallback((game: any) => {
     setGameState(game);
   }, []);
@@ -92,8 +103,9 @@ const App = () => {
           }}
         >
           <BoardContext.Provider value={{ board, toggleBoard }}>
-            <div className="game-behaviour-warning">
-              <FiAlertTriangle size={40} style={{ marginRight: "10px" }} />
+            <DiceContext.Provider value={{ dice, changeDice }}>
+              <div className="game-behaviour-warning">
+                <FiAlertTriangle size={40} style={{ marginRight: "10px" }} />
               StarkLudo is still in active development{" "}
               <FiZap color="yellow" size={20} />
             </div>
@@ -152,7 +164,10 @@ const App = () => {
                             title="TOOLBOX"
                             subtitle="Get All Your Items And Settings Done"
                           >
-                            <Toolbox />
+                            <Toolbox 
+                            activeCategory={activeCategory} 
+                            onCategoryClick={handleCategoryClick}
+                            />
                           </ControlWindowLayout>
                         ) : null}
 
@@ -173,6 +188,7 @@ const App = () => {
               </Row>
               <Footer />
             </div>
+            </DiceContext.Provider>
           </BoardContext.Provider>
         </GameContext.Provider>
         <ToastContainer position="bottom-center" />

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);
+            }}
+          />
+        ))}
+      </div>}
     </div>
   );
 };

client/src/components/DiceCard.tsx

@@ -0,0 +1,27 @@
+// import "../styles/OptionCard.scss";
+import "../styles/OptionCard.scss";
+
+export default function DiceCard({
+  img,
+  active,
+  onSelect,
+  option,
+}: {
+  img?: string;
+  active?: boolean;
+  onSelect?: () => void;
+  option?: any;
+}) {
+  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>
+  );
+}

client/src/context/dice-context.tsx

@@ -0,0 +1,21 @@
+import { createContext } from "react";
+
+export type DiceType =
+  | ""
+  | "basic"
+  | "gold"
+  | "black"
+  | "unique"
+  | "red"
+  | "silver"
+  | string;
+
+interface DiceContextType {
+  dice: DiceType;
+  changeDice: (newDice: DiceType) => void;
+}
+
+export const DiceContext = createContext<DiceContextType>({
+  dice: "",
+  changeDice: () => {},
+});

client/src/styles/DiceCard.scss

@@ -0,0 +1,30 @@
+.dice-container {
+  padding: 1.5px;
+  background: linear-gradient(180deg, #2dccfd 0%, #ff01ff 100%);
+  border-radius: 12px;
+  cursor: pointer;
+  transition: all 0.5s ease-in-out;
+  &.active {
+    background: #2dccfd;
+  }
+  &:hover {
+    background: #2dccfd;
+  }
+  .dice {
+    padding: 5px 12px;
+    // display: flex;
+    // flex-direction: column;
+    // align-items: center;
+    border-radius: 12px;
+    background: linear-gradient(180deg, #1b0043 0%, #0e0121 100%);
+    .dice-label {
+      border-top: rgba(45, 204, 253, 0.48) 1px solid;
+      width: 100%f;
+      text-align: center;
+      color: #f5f5f5;
+      font-size: 14px;
+      line-height: 24px;
+      font-weight: bold;
+    }
+  }
+}

client/src/styles/OptionCard.scss

@@ -26,5 +26,13 @@
       line-height: 24px;
       font-weight: bold;
     }
+    .name-label {
+      width: 70%f;
+      text-align: center;
+      color: #f5f5f5;
+      font-size: 14px;
+      line-height: 12px;
+      font-weight: bold;
+    }
   }
 }

client/src/styles/Toolbox.scss

@@ -13,6 +13,18 @@
       border-radius: 12px 12px 0 0;
       background-color: #230056;
       cursor: pointer;
+
+      &:hover {
+        background-color: #e0e0e0; // Hover effect for all buttons
+      }
+
+      &.active {
+        background: linear-gradient(to bottom, #00bfff, #00008b);
+        border-radius: 12px 12px 0 0;
+        border: 2px solid #00bfff;
+        color: white; // Active text color (white)
+        font-weight: bold;
+      }
     }
   }
   .active-category {
@@ -40,4 +52,14 @@
     grid-template-columns: 1fr 1fr;
     gap: 12px;
   }
+  .dice-options {
+    display: grid;
+    padding: 12px 0;
+    grid-template-columns: 1fr 1fr 1fr;
+    gap: 12px;
+    img {
+      height: 70px;
+      width: 57px;
+    }
+  }
 }