Skip to content

Commit

Permalink
feat: Create Toolbox Page Using Existing Card Component #129 (#168)
Browse files Browse the repository at this point in the history
  • Loading branch information
@martinvibes
martinvibes authored Dec 22, 2024
1 parent fbcae46 commit aa26d0c
Show file tree
Hide file tree
Showing 4 changed files with 335 additions and 188 deletions.
245 changes: 131 additions & 114 deletions client/src/App.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -109,130 +109,147 @@ const App = ({ sdk }: { sdk: SDK<StarkludoSchemaType> }) => {

return (
<>
<Router>
{showMobileResponsiveWarning ? (
<Router>
{showMobileResponsiveWarning ? (
<MobileResponsiveWarning />
) : (
<>
<StarknetProvider>
<GameContext.Provider
value={{
gameState: gameState,
setGameData: setGameData,
options: options,
setGameOptions: setGameOptions,
}}
>
<BoardContext.Provider value={{ board, toggleBoard }}>
<ColorProvider>
<DiceProvider>
<Routes>
<Route path="/color-settings" element={<ColorSettings/>}/>
<Route path="/settings" element={<Settings />} />
<Route path="/" element={ <>
<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="layout-stretch-lock">
<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>
<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 === "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 === "help" ? (
<ControlWindowLayout
toggle={() => setActiveWindow("")}
title="HELP"
subtitle="Get Guides, Tips, And Tricks Needed For A Successful Game"
>
<GameHelp />
</ControlWindowLayout>
) : null}
<Control
toggleActiveWindow={toggleActiveWindow}
/>
<GameContext.Provider
value={{
gameState: gameState,
setGameData: setGameData,
options: options,
setGameOptions: setGameOptions,
}}
>
<BoardContext.Provider value={{ board, toggleBoard }}>
<ColorProvider>
<DiceProvider>
<Routes>
<Route
path="/color-settings"
element={<ColorSettings />}
/>
<Route path="/settings" element={<Settings />} />
<Route
path="/"
element={
<>
<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="layout-stretch-lock">
<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>
<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 === "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 === "help" && (
<GameHelp
onClose={() =>
setActiveWindow("")
}
/>
)}
<Control
toggleActiveWindow={
toggleActiveWindow
}
/>
</div>
</div>
</div>
</Col>
</Row>
</div>
</div>
</Col>
</Row>
</div>
</div>
<Footer />
</>
}/>
</Routes>
</DiceProvider>
</ColorProvider>
</BoardContext.Provider>
</GameContext.Provider>
<ToastContainer position="bottom-center" />
<Footer />
</>
}
/>
</Routes>
</DiceProvider>
</ColorProvider>
</BoardContext.Provider>
</GameContext.Provider>
<ToastContainer position="bottom-center" />
</StarknetProvider>
</>
)}
</Router>

)}
</Router>
</>

);
};

Expand Down
3 changes: 3 additions & 0 deletions client/src/assets/images/close_icon.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.
Loading

0 comments on commit aa26d0c

Please sign in to comment.