Skip to content

Commit

Permalink
Merge branch 'sivicstudio:dev' into dev
Browse files Browse the repository at this point in the history
  • Loading branch information
@PoulavBhowmick03
PoulavBhowmick03 authored Oct 15, 2024
2 parents c957575 + 164cab7 commit c7f8f73
Show file tree
Hide file tree
Showing 11 changed files with 303 additions and 120 deletions.
161 changes: 82 additions & 79 deletions client/src/App.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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";
Expand Down Expand Up @@ -98,92 +99,94 @@ const App = () => {
}}
>
<BoardContext.Provider value={{ board, toggleBoard }}>
<DiceProvider>
<div className="game-behaviour-warning">
<FiAlertTriangle size={20} />
StarkLudo is still in active development{" "}
<FiZap color="yellow" size={20} />
</div>
<div className="layout-container">
<div className="mobile-header">
<Header />
<ColorProvider>
<DiceProvider>
<div className="game-behaviour-warning">
<FiAlertTriangle size={20} />
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
activeCategory={activeCategory}
onCategoryClick={handleCategoryClick}
/>
</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>
</DiceProvider>
</Col>
</Row>
<Footer />
</div>
</DiceProvider>
</ColorProvider>
</BoardContext.Provider>
</GameContext.Provider>
<ToastContainer position="bottom-center" />
Expand All @@ -192,4 +195,4 @@ const App = () => {
);
};

export default App;
export default App;
3 changes: 3 additions & 0 deletions client/src/assets/images/Circle.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
4 changes: 4 additions & 0 deletions client/src/assets/images/Crown.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
3 changes: 3 additions & 0 deletions client/src/assets/images/Eyedropper.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
3 changes: 3 additions & 0 deletions client/src/assets/images/Polygon.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
101 changes: 67 additions & 34 deletions client/src/components/ControlWindows/Toolbox.tsx
View file
Original file line number Diff line number Diff line change
@@ -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<ToolboxProps> = ({
activeCategory,
onCategoryClick,
}) => {
const { board, toggleBoard } = useContext(BoardContext);
const { dice, changeDice } = useContext(DiceContext);
const { design, changeDesign } = useContext(ColorContext);

const boardOptions = [
{ name: "Classic", option: "classic" },
Expand All @@ -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 (
<div className="toolbox">
<div className="categories">
Expand All @@ -51,10 +68,10 @@ const Toolbox = ({ activeCategory, onCategoryClick }: ToolboxProps) => {
DICE
</button>
<button
className={`category ${activeCategory === "AVATAR" ? "active" : ""}`}
onClick={() => onCategoryClick("AVATAR")}
className={`category ${activeCategory === "PIECE" ? "active" : ""}`}
onClick={() => onCategoryClick("AVATER")}
>
AVATAR
AVATER
</button>
<button
className={`category ${activeCategory === "COLOR" ? "active" : ""}`}
Expand All @@ -64,34 +81,50 @@ const Toolbox = ({ activeCategory, onCategoryClick }: ToolboxProps) => {
</button>
</div>
<div className="active-category">
<h3>Active Dice</h3>
<h5>{dice.charAt(0).toUpperCase()+dice.slice(1).toLowerCase()} dice</h5>
<h3>Active Piece</h3>
<h5>
{/* {dice.charAt(0).toUpperCase() + dice.slice(1).toLowerCase()} */}
{design.charAt(0).toUpperCase() + design.slice(1)}
</h5>
</div>
{activeCategory === "BOARD" && <div className="options">
{boardOptions.map((item) => (
<OptionCard
key={item.option}
option={item}
active={board === item.option}
onSelect={() => {
toggleBoard(item.option);
}}
/>
))}
</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>}
{activeCategory === "BOARD" && (
<div className="options">
{boardOptions.map((item) => (
<OptionCard
key={item.option}
option={item}
active={board === item.option}
onSelect={() => toggleBoard(item.option)}
/>
))}
</div>
)}
{activeCategory === "DICE" && (
<div className="dice-options">
{diceOptions.map((item) => (
<DiceCard
img={item.img}
key={item.option}
option={item}
active={dice === item.option}
onSelect={() => changeDice(item.option, item.img)}
/>
))}
</div>
)}
{activeCategory === "COLOR" && (
<div className="piece-options">
{pieceDesigns.map((item) => (
<PieceDesignCard
key={item.option}
option={item}
active={design === item.option}
// eslint-disable-next-line @typescript-eslint/no-explicit-any
onSelect={() => changeDesign(item.option as any)}
/>
))}
</div>
)}
</div>
);
};
Expand Down
8 changes: 4 additions & 4 deletions client/src/components/Marker.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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";
Expand All @@ -11,6 +12,7 @@ const Marker: React.FC<MarkerProps> = ({ pos, size, tileMap }) => {
const clickMap: Record<string, number> = { r: 0, g: 1, y: 2, b: 3 };
const markerRef = useRef<HTMLDivElement>(null);
const { gameState, options } = useContext(GameContext);
const { design } = useContext(ColorContext);

useEffect(() => {
const countInArray = (array: string[], val: string) => {
Expand All @@ -34,17 +36,15 @@ const Marker: React.FC<MarkerProps> = ({ pos, size, tileMap }) => {
}
}, [gameState, pos, size, tileMap]);

const move:
| ((event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void)
| undefined = () => {
const move = () => {
const sound = new Audio(markerSound);
sound.play();
moveMarker(pos, clickMap[pos.charAt(0)]);
};

return (
<div
className={`marker-${pos.charAt(0)}`}
className={`marker-${pos.charAt(0)} marker-${design}`}
ref={markerRef}
onClick={
options.hasThrownDice &&
Expand Down
Loading

0 comments on commit c7f8f73

Please sign in to comment.