diff --git a/client/src/App.tsx b/client/src/App.tsx index 18b701f..bc0f431 100644 --- 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("classic"); const [gameState, setGameState] = useState({}); + const [activeCategory, setActiveCategory] = useState("BOARD"); const [options, setOptions] = useState({ 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 = () => { }} > -
- - StarkLudo is still in active development{" "} - -
-
-
-
+ +
+ + StarkLudo is still in active development{" "} +
- - - - - -
-
+
+
+
+
+ + + + + +
-
-
-
- - - - - {activeWindow === "account" ? ( - setActiveWindow("")} - title="PROFILE" - subtitle="Your Profile Information" - > - - - ) : null} +
+
+
+
+ + + + + {activeWindow === "account" ? ( + setActiveWindow("")} + title="PROFILE" + subtitle="Your Profile Information" + > + + + ) : null} - {activeWindow === "leaderboard" ? ( - setActiveWindow("")} - title="LEADERBOARD" - subtitle="Global Player Rankings" - > - - - ) : null} + {activeWindow === "leaderboard" ? ( + setActiveWindow("")} + title="LEADERBOARD" + subtitle="Global Player Rankings" + > + + + ) : null} - {activeWindow === "multiplayer" ? ( - setActiveWindow("")} - title="MULTIPLAYER" - subtitle="Choose An Account To Play With" - > - - - ) : null} + {activeWindow === "multiplayer" ? ( + setActiveWindow("")} + title="MULTIPLAYER" + subtitle="Choose An Account To Play With" + > + + + ) : null} - {activeWindow === "toolbox" ? ( - setActiveWindow("")} - title="TOOLBOX" - subtitle="Get All Your Items And Settings Done" - > - - - ) : null} + {activeWindow === "toolbox" ? ( + setActiveWindow("")} + title="TOOLBOX" + subtitle="Get All Your Items And Settings Done" + > + + + ) : null} - {activeWindow === "help" ? ( - setActiveWindow("")} - title="HELP" - subtitle="Get Guides, Tips, And Tricks Needed For A Successful Game" - > - - - ) : null} - + {activeWindow === "help" ? ( + setActiveWindow("")} + title="HELP" + subtitle="Get Guides, Tips, And Tricks Needed For A Successful Game" + > + + + ) : null} + +
-
- - -
-
+ + +
+
+ diff --git a/client/src/assets/images/dice-10.svg b/client/src/assets/images/dice-10.svg new file mode 100644 index 0000000..74ded39 --- /dev/null +++ b/client/src/assets/images/dice-10.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/client/src/assets/images/dice-5.svg b/client/src/assets/images/dice-5.svg new file mode 100644 index 0000000..5711272 --- /dev/null +++ b/client/src/assets/images/dice-5.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/client/src/assets/images/dice-6.svg b/client/src/assets/images/dice-6.svg new file mode 100644 index 0000000..3fb90e8 --- /dev/null +++ b/client/src/assets/images/dice-6.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/client/src/assets/images/dice-7.svg b/client/src/assets/images/dice-7.svg new file mode 100644 index 0000000..b0538d6 --- /dev/null +++ b/client/src/assets/images/dice-7.svg @@ -0,0 +1,35 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/client/src/assets/images/dice-8.svg b/client/src/assets/images/dice-8.svg new file mode 100644 index 0000000..4796f78 --- /dev/null +++ b/client/src/assets/images/dice-8.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/client/src/assets/images/dice-9.svg b/client/src/assets/images/dice-9.svg new file mode 100644 index 0000000..ddfbab2 --- /dev/null +++ b/client/src/assets/images/dice-9.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/client/src/components/ControlWindows/Toolbox.tsx b/client/src/components/ControlWindows/Toolbox.tsx index c2ea748..e679b85 100644 --- a/client/src/components/ControlWindows/Toolbox.tsx +++ b/client/src/components/ControlWindows/Toolbox.tsx @@ -2,9 +2,23 @@ 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" }, @@ -12,19 +26,48 @@ const Toolbox = () => { { 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 (
- - - - + + + +

Active Dice

-
Basic
+
{dice.charAt(0).toUpperCase()+dice.slice(1).toLowerCase()} dice
-
+ {activeCategory === "BOARD" &&
{boardOptions.map((item) => ( { }} /> ))} -
+
} + {activeCategory === "DICE" &&
+ {diceOptions.map((item) => ( + { + changeDice(item.option, item.img); + }} + /> + ))} +
}
); }; diff --git a/client/src/components/Dice.tsx b/client/src/components/Dice.tsx index fe899c5..d8038a6 100644 --- 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 && ( -
+ {/*
@@ -123,7 +125,8 @@ const Dice = () => {
-
+
*/} + dice {!options.hasThrownDice && ( diff --git a/client/src/components/DiceCard.tsx b/client/src/components/DiceCard.tsx new file mode 100644 index 0000000..abdc5bc --- /dev/null +++ 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 ( + + ); +} diff --git a/client/src/context/dice-context.tsx b/client/src/context/dice-context.tsx new file mode 100644 index 0000000..7af0b1e --- /dev/null +++ b/client/src/context/dice-context.tsx @@ -0,0 +1,42 @@ +import { createContext, ReactNode, useState} from "react"; +import dice5 from "../assets/images/dice-5.svg" + +export type DiceType = + | "" + | "basic" + | "gold" + | "black" + | "unique" + | "red" + | "silver" + | string; + +interface DiceContextType { + dice: DiceType; + img: string; + changeDice: (newDice: DiceType, newImg: string) => void; +} + +export const DiceContext = createContext({ + dice: "", + img: dice5, + changeDice: () => { + throw new Error("changeDice function must be overridden"); + }, +}); + +export const DiceProvider = ({ children }: { children: ReactNode }) => { + const [dice, setDice] = useState("basic"); + const [img, setImg] = useState(dice5); + + const changeDice = (newDice: DiceType, newImg: string) => { + setDice(newDice); + setImg(newImg); + }; + + return ( + + {children} + + ); +}; diff --git a/client/src/styles/Dice.scss b/client/src/styles/Dice.scss index 5d99509..3d41db2 100644 --- a/client/src/styles/Dice.scss +++ b/client/src/styles/Dice.scss @@ -34,6 +34,20 @@ align-items: center; } +#dice-img { + width: 100px; + height: 100px; + border-radius: 10px; + display: inline-grid; + grid-template: repeat(3, 1fr) / repeat(3, 1fr); + grid-template-areas: + "tl tc tr" + "cl cc cr" + "bl bc br"; + justify-items: center; + align-items: center; +} + @media only screen and (max-width: 400px) { #dice-body { width: 70px; diff --git a/client/src/styles/DiceCard.scss b/client/src/styles/DiceCard.scss new file mode 100644 index 0000000..8801a2d --- /dev/null +++ b/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; + } + } +} diff --git a/client/src/styles/OptionCard.scss b/client/src/styles/OptionCard.scss index c8d26fe..e27e0c9 100644 --- a/client/src/styles/OptionCard.scss +++ b/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; + } } } diff --git a/client/src/styles/Toolbox.scss b/client/src/styles/Toolbox.scss index 5ed24b6..ca6bf9e 100644 --- a/client/src/styles/Toolbox.scss +++ b/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; + } + } }