From ec679296406d003c1be4261aa5b03882264fa7ac Mon Sep 17 00:00:00 2001 From: Mystic <149405096+Gift-Naomi@users.noreply.github.com> Date: Mon, 14 Oct 2024 18:03:18 +0000 Subject: [PATCH 1/2] feat: add ludo seed style options --- client/src/App.tsx | 161 +++++++++--------- client/src/assets/images/Circle.svg | 3 + client/src/assets/images/Crown.svg | 4 + client/src/assets/images/Eyedropper.svg | 3 + client/src/assets/images/Polygon.svg | 3 + .../src/components/ControlWindows/Toolbox.tsx | 100 +++++++---- client/src/components/Marker.tsx | 8 +- client/src/components/PieceDesignCard.tsx | 28 +++ client/src/context/color-context.tsx | 34 ++++ client/src/styles/Marker.scss | 30 +++- client/src/styles/PieceDesignCard.scss | 54 ++++++ 11 files changed, 308 insertions(+), 120 deletions(-) create mode 100644 client/src/assets/images/Circle.svg create mode 100644 client/src/assets/images/Crown.svg create mode 100644 client/src/assets/images/Eyedropper.svg create mode 100644 client/src/assets/images/Polygon.svg create mode 100644 client/src/components/PieceDesignCard.tsx create mode 100644 client/src/context/color-context.tsx create mode 100644 client/src/styles/PieceDesignCard.scss diff --git a/client/src/App.tsx b/client/src/App.tsx index b73a6de..4a6e948 100644 --- a/client/src/App.tsx +++ b/client/src/App.tsx @@ -20,6 +20,7 @@ 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 { ColorProvider } from "./context/color-context"; import ControlWindowLayout from "./components/ControlWindows/ControlWindowLayout"; import GameHelp from "./components/ControlWindows/GameHelp"; import Toolbox from "./components/ControlWindows/Toolbox"; @@ -98,92 +99,94 @@ 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} + +
-
- - -
-
- + + +
+
+ + @@ -192,4 +195,4 @@ const App = () => { ); }; -export default App; \ No newline at end of file +export default App; diff --git a/client/src/assets/images/Circle.svg b/client/src/assets/images/Circle.svg new file mode 100644 index 0000000..c1e6b23 --- /dev/null +++ b/client/src/assets/images/Circle.svg @@ -0,0 +1,3 @@ + + + diff --git a/client/src/assets/images/Crown.svg b/client/src/assets/images/Crown.svg new file mode 100644 index 0000000..66d0464 --- /dev/null +++ b/client/src/assets/images/Crown.svg @@ -0,0 +1,4 @@ + + + + diff --git a/client/src/assets/images/Eyedropper.svg b/client/src/assets/images/Eyedropper.svg new file mode 100644 index 0000000..42fc65b --- /dev/null +++ b/client/src/assets/images/Eyedropper.svg @@ -0,0 +1,3 @@ + + + diff --git a/client/src/assets/images/Polygon.svg b/client/src/assets/images/Polygon.svg new file mode 100644 index 0000000..01b163f --- /dev/null +++ b/client/src/assets/images/Polygon.svg @@ -0,0 +1,3 @@ + + + diff --git a/client/src/components/ControlWindows/Toolbox.tsx b/client/src/components/ControlWindows/Toolbox.tsx index e679b85..33b0c6f 100644 --- a/client/src/components/ControlWindows/Toolbox.tsx +++ b/client/src/components/ControlWindows/Toolbox.tsx @@ -1,24 +1,34 @@ -import { useContext } from "react"; +import React, { useContext } from "react"; import "../../styles/Toolbox.scss"; import { BoardContext } from "../../context/board-context"; -import OptionCard from "../OptionCard"; import { DiceContext } from "../../context/dice-context"; +import { ColorContext } from "../../context/color-context"; +import OptionCard from "../OptionCard"; +import DiceCard from "../DiceCard"; +import PieceDesignCard from "../PieceDesignCard"; 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"; +import map from "../../assets/images/Eyedropper.svg"; +import king from "../../assets/images/Crown.svg"; +import square from "../../assets/images/Polygon.svg"; +import circle from "../../assets/images/Circle.svg"; interface ToolboxProps { activeCategory: string; onCategoryClick: (category: string) => void; } -const Toolbox = ({ activeCategory, onCategoryClick }: ToolboxProps) => { +const Toolbox: React.FC = ({ + activeCategory, + onCategoryClick, +}) => { const { board, toggleBoard } = useContext(BoardContext); const { dice, changeDice } = useContext(DiceContext); + const { design, changeDesign } = useContext(ColorContext); const boardOptions = [ { name: "Classic", option: "classic" }, @@ -35,6 +45,13 @@ const Toolbox = ({ activeCategory, onCategoryClick }: ToolboxProps) => { { name: "Silver Dice", option: "silver", img: dice10 }, ]; + const pieceDesigns = [ + { name: "Default", option: "default", img: map }, + { name: "King", option: "king", img: king }, + { name: "Box", option: "box", img: square }, + { name: "Circle", option: "circle", img: circle }, + ]; + return (
@@ -51,10 +68,10 @@ const Toolbox = ({ activeCategory, onCategoryClick }: ToolboxProps) => { DICE
-

Active Dice

-
{dice.charAt(0).toUpperCase()+dice.slice(1).toLowerCase()} dice
+

Active Piece

+
+ {/* {dice.charAt(0).toUpperCase() + dice.slice(1).toLowerCase()} */} + {design.charAt(0).toUpperCase() + design.slice(1)} +
- {activeCategory === "BOARD" &&
- {boardOptions.map((item) => ( - { - toggleBoard(item.option); - }} - /> - ))} -
} - {activeCategory === "DICE" &&
- {diceOptions.map((item) => ( - { - changeDice(item.option, item.img); - }} - /> - ))} -
} + {activeCategory === "BOARD" && ( +
+ {boardOptions.map((item) => ( + toggleBoard(item.option)} + /> + ))} +
+ )} + {activeCategory === "DICE" && ( +
+ {diceOptions.map((item) => ( + changeDice(item.option, item.img)} + /> + ))} +
+ )} + {activeCategory === "COLOR" && ( +
+ {pieceDesigns.map((item) => ( + changeDesign(item.option as any)} + /> + ))} +
+ )}
); }; diff --git a/client/src/components/Marker.tsx b/client/src/components/Marker.tsx index dfafbcf..4fd4566 100644 --- a/client/src/components/Marker.tsx +++ b/client/src/components/Marker.tsx @@ -2,6 +2,7 @@ import React, { useEffect, useRef, useContext } from "react"; import { GameContext } from "../context/game-context"; import { useGame } from "../hooks/game-hook"; import { MarkerProps } from "../types"; +import { ColorContext } from "../context/color-context"; import markerSound from "../assets/seed_click_sound.wav"; import "../styles/Marker.scss"; @@ -11,6 +12,7 @@ const Marker: React.FC = ({ pos, size, tileMap }) => { const clickMap: Record = { r: 0, g: 1, y: 2, b: 3 }; const markerRef = useRef(null); const { gameState, options } = useContext(GameContext); + const { design } = useContext(ColorContext); useEffect(() => { const countInArray = (array: string[], val: string) => { @@ -34,9 +36,7 @@ const Marker: React.FC = ({ pos, size, tileMap }) => { } }, [gameState, pos, size, tileMap]); - const move: - | ((event: React.MouseEvent) => void) - | undefined = () => { + const move = () => { const sound = new Audio(markerSound); sound.play(); moveMarker(pos, clickMap[pos.charAt(0)]); @@ -44,7 +44,7 @@ const Marker: React.FC = ({ pos, size, tileMap }) => { return (
void; +} + +const PieceDesignCard: React.FC = ({ + option, + active, + onSelect, +}) => { + return ( + + ); +}; + +export default PieceDesignCard; diff --git a/client/src/context/color-context.tsx b/client/src/context/color-context.tsx new file mode 100644 index 0000000..69de2b7 --- /dev/null +++ b/client/src/context/color-context.tsx @@ -0,0 +1,34 @@ +/* eslint-disable @typescript-eslint/no-empty-function */ +import React, { createContext, useState, useContext } from "react"; + +type PieceDesign = "default" | "king" | "box" | "circle"; + +interface ColorContextType { + design: PieceDesign; + changeDesign: (newDesign: PieceDesign) => void; +} + +const ColorContext = createContext({ + design: "default", + changeDesign: () => {}, +}); + +export const useColor = () => useContext(ColorContext); + +export const ColorProvider: React.FC<{ children: React.ReactNode }> = ({ + children, +}) => { + const [design, setDesign] = useState("default"); + + const changeDesign = (newDesign: PieceDesign) => { + setDesign(newDesign); + }; + + return ( + + {children} + + ); +}; + +export { ColorContext }; diff --git a/client/src/styles/Marker.scss b/client/src/styles/Marker.scss index bc5af08..5a61d64 100644 --- a/client/src/styles/Marker.scss +++ b/client/src/styles/Marker.scss @@ -77,7 +77,6 @@ } } } - } .marker-b { @@ -105,7 +104,6 @@ } } } - } @keyframes pulse { @@ -116,4 +114,30 @@ to { transform: scale(1.2); } -} \ No newline at end of file +} + +.marker-default .pin { + border-radius: 50% 50% 0 50%; + transform: rotate(45deg); +} + +.marker-king .pin { + border-radius: 50% 50% 25% 25%; + &::before { + content: "♔"; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + font-size: 1.5em; + color: white; + } +} + +.marker-box .pin { + border-radius: 15%; +} + +.marker-circle .pin { + border-radius: 50%; +} diff --git a/client/src/styles/PieceDesignCard.scss b/client/src/styles/PieceDesignCard.scss new file mode 100644 index 0000000..110bd66 --- /dev/null +++ b/client/src/styles/PieceDesignCard.scss @@ -0,0 +1,54 @@ +// .piece-design-card { +// display: inline-flex; +// justify-content: center; +// align-items: center; +// padding: 20px; +// } + +.piece-design-card { + padding: 2.5px; + background: linear-gradient(180deg, #2dccfd 0%, #ff01ff 100%); + border-radius: 12px; + cursor: pointer; + transition: all 0.5s ease-in-out; + margin: 10px; + &.active { + background: #2dccfd; + transform: scale(1.2); + } + &:hover { + background: #2dccfd; + } + .option { + padding: 5px 12px; + display: flex; + flex-direction: column; + align-items: center; + border-radius: 12px; + height: 80px; + background: linear-gradient(180deg, #1b0043 0%, #0e0121 100%); + .option-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; + } + + img { + padding: 5px 7px; + } + + .name-label { + // width: 70%f; + text-align: center; + color: #f5f5f5; + font-size: 14px; + line-height: 12px; + font-weight: bold; + } + } + } + \ No newline at end of file From 67f8a90dda5cce100563e29c3c6d983b68ca5543 Mon Sep 17 00:00:00 2001 From: Mystic <149405096+Gift-Naomi@users.noreply.github.com> Date: Mon, 14 Oct 2024 18:47:40 +0000 Subject: [PATCH 2/2] fix: resolve linting issues --- client/src/components/ControlWindows/Toolbox.tsx | 1 + client/src/context/color-context.tsx | 1 + client/src/styles/PieceDesignCard.scss | 7 ------- 3 files changed, 2 insertions(+), 7 deletions(-) diff --git a/client/src/components/ControlWindows/Toolbox.tsx b/client/src/components/ControlWindows/Toolbox.tsx index 33b0c6f..139d5fb 100644 --- a/client/src/components/ControlWindows/Toolbox.tsx +++ b/client/src/components/ControlWindows/Toolbox.tsx @@ -119,6 +119,7 @@ const Toolbox: React.FC = ({ key={item.option} option={item} active={design === item.option} + // eslint-disable-next-line @typescript-eslint/no-explicit-any onSelect={() => changeDesign(item.option as any)} /> ))} diff --git a/client/src/context/color-context.tsx b/client/src/context/color-context.tsx index 69de2b7..5b18fc6 100644 --- a/client/src/context/color-context.tsx +++ b/client/src/context/color-context.tsx @@ -13,6 +13,7 @@ const ColorContext = createContext({ changeDesign: () => {}, }); +// eslint-disable-next-line react-refresh/only-export-components export const useColor = () => useContext(ColorContext); export const ColorProvider: React.FC<{ children: React.ReactNode }> = ({ diff --git a/client/src/styles/PieceDesignCard.scss b/client/src/styles/PieceDesignCard.scss index 110bd66..9fc0250 100644 --- a/client/src/styles/PieceDesignCard.scss +++ b/client/src/styles/PieceDesignCard.scss @@ -1,10 +1,3 @@ -// .piece-design-card { -// display: inline-flex; -// justify-content: center; -// align-items: center; -// padding: 20px; -// } - .piece-design-card { padding: 2.5px; background: linear-gradient(180deg, #2dccfd 0%, #ff01ff 100%);