From 22ad72f8fcce9143873448a7f3be81714d8ef58e Mon Sep 17 00:00:00 2001 From: anonfedora Date: Thu, 3 Oct 2024 05:39:00 +0100 Subject: [PATCH 1/3] Implement "change dice" on client #70 --- client/src/App.tsx | 22 +++++- client/src/assets/images/dice-10.svg | 9 +++ client/src/assets/images/dice-5.svg | 9 +++ client/src/assets/images/dice-6.svg | 9 +++ client/src/assets/images/dice-7.svg | 35 +++++++++ client/src/assets/images/dice-8.svg | 9 +++ client/src/assets/images/dice-9.svg | 9 +++ .../src/components/ControlWindows/Toolbox.tsx | 72 ++++++++++++++++--- client/src/components/DiceCard.tsx | 27 +++++++ client/src/context/dice-context.tsx | 21 ++++++ client/src/styles/DiceCard.scss | 30 ++++++++ client/src/styles/OptionCard.scss | 8 +++ client/src/styles/Toolbox.scss | 22 ++++++ 13 files changed, 271 insertions(+), 11 deletions(-) create mode 100644 client/src/assets/images/dice-10.svg create mode 100644 client/src/assets/images/dice-5.svg create mode 100644 client/src/assets/images/dice-6.svg create mode 100644 client/src/assets/images/dice-7.svg create mode 100644 client/src/assets/images/dice-8.svg create mode 100644 client/src/assets/images/dice-9.svg create mode 100644 client/src/components/DiceCard.tsx create mode 100644 client/src/context/dice-context.tsx create mode 100644 client/src/styles/DiceCard.scss diff --git a/client/src/App.tsx b/client/src/App.tsx index 866624e..14ea8aa 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 { 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("classic"); + const [dice, setDice] = useState("basic"); const [gameState, setGameState] = useState({}); + const [activeCategory, setActiveCategory] = useState("BOARD"); const [options, setOptions] = useState({ 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 = () => { }} > -
- + +
+ StarkLudo is still in active development{" "}
@@ -152,7 +164,10 @@ const App = () => { title="TOOLBOX" subtitle="Get All Your Items And Settings Done" > - + ) : null} @@ -173,6 +188,7 @@ const App = () => {
+
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..2a56edf 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); + }} + /> + ))} +
}
); }; diff --git a/client/src/components/DiceCard.tsx b/client/src/components/DiceCard.tsx new file mode 100644 index 0000000..c614397 --- /dev/null +++ b/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 ( + + ); +} diff --git a/client/src/context/dice-context.tsx b/client/src/context/dice-context.tsx new file mode 100644 index 0000000..3121192 --- /dev/null +++ b/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({ + dice: "", + changeDice: () => {}, +}); 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; + } + } } From 8791798d58473be877978ef5fd023e960d494d3c Mon Sep 17 00:00:00 2001 From: anonfedora Date: Fri, 4 Oct 2024 16:23:00 +0100 Subject: [PATCH 2/3] feat(client): implement 'change dice' functionality #70 #89 --- client/src/components/DiceCard.tsx | 8 +++++--- client/src/context/dice-context.tsx | 4 +++- 2 files changed, 8 insertions(+), 4 deletions(-) diff --git a/client/src/components/DiceCard.tsx b/client/src/components/DiceCard.tsx index c614397..abdc5bc 100644 --- a/client/src/components/DiceCard.tsx +++ b/client/src/components/DiceCard.tsx @@ -1,6 +1,8 @@ -// import "../styles/OptionCard.scss"; import "../styles/OptionCard.scss"; +interface Option { + name: string; +} export default function DiceCard({ img, active, @@ -10,7 +12,7 @@ export default function DiceCard({ img?: string; active?: boolean; onSelect?: () => void; - option?: any; + option?: Option; }) { return (