Skip to content

Commit

Permalink
Feat: Gameboard grid implementation (#172)
Browse files Browse the repository at this point in the history 
* made updates

* added gameboard and assets

* feat: Add Tailwind CSS configuration and integrate with Vite

* Added the game board

* fix: correct spelling of 'highlighted' in LudoGame component

* feat: add SVG assets for game components
  • Loading branch information
@josephchimebuka
josephchimebuka authored Dec 31, 2024
1 parent dd7ccec commit bc88c3f
Show file tree
Hide file tree
Showing 40 changed files with 1,208 additions and 438 deletions.
39 changes: 0 additions & 39 deletions client/pnpm-lock.yaml
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

6 changes: 6 additions & 0 deletions client/postcss.config.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
export default {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
}
237 changes: 122 additions & 115 deletions client/src/App.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,6 +33,8 @@ import { SDK } from "@dojoengine/sdk";
import Settings from "./components/Settings";
import ToolboxPage from "./components/Toolbox";
import { AvatarProvider } from "./context/avatar-context";
import GamePlay from "./components/GamePlay";
import { GameProvider } from "./context/game-context-2.";

const App = ({ sdk }: { sdk: SDK<StarkludoSchemaType> }) => {

Expand Down Expand Up @@ -85,8 +87,7 @@ const App = ({ sdk }: { sdk: SDK<StarkludoSchemaType> }) => {
if (options.gameIsOngoing) {
if (options.winners.length === options.playersLength - 1) {
toast(
`The game has ended. Player ${
chance[options.winners[0]]
`The game has ended. Player ${chance[options.winners[0]]
} is the winner`
);
setGameOptions({
Expand Down Expand Up @@ -127,123 +128,129 @@ const App = ({ sdk }: { sdk: SDK<StarkludoSchemaType> }) => {
<BoardContext.Provider value={{ board, toggleBoard }}>
<ColorProvider>
<DiceProvider>
<AvatarProvider>
<Routes>
<Route
path="/color-settings"
element={<ColorSettings />}
/>
<Route path="/settings" element={<Settings />} />
<Route path="/toolbox" element={<ToolboxPage />} />
<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}
<AvatarProvider>
<Routes>
<Route
path="/color-settings"
element={<ColorSettings />}
/>
<Route path="/settings" element={<Settings />} />
<Route path="/toolbox" element={<ToolboxPage />} />
<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 === "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" && (
<GameHelp
onClose={() =>
setActiveWindow("")
}
/>
)}
<Control
toggleActiveWindow={
toggleActiveWindow
}
/>
</div>
</div>
</div>
</Col>
</Row>
</div>
</div>
<Footer />
</>
}
/>
</Routes>
</AvatarProvider>
// {activeWindow === "help" && (
// <GameHelp
// onClose={() =>
// setActiveWindow("")
// }
// />
// )}
// <Control
// toggleActiveWindow={
// toggleActiveWindow
// }
// />
// </div>
// </div>
// </div>
// </Col>
// </Row>
// </div>
// </div>
// <Footer />
// </>

<>
<GameProvider>
<GamePlay />
</GameProvider>
</>
}
/>
</Routes>
</AvatarProvider>
</DiceProvider>
</ColorProvider>
</BoardContext.Provider>
Expand Down
Binary file added client/src/assets/images/bg-dice.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file removed client/src/assets/images/bg.png
View file
Binary file not shown.
Binary file added client/src/assets/images/blue.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified client/src/assets/images/board.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added client/src/assets/images/box1.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added client/src/assets/images/box2.png
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: 0 additions & 3 deletions client/src/assets/images/close_icon.svg
View file

This file was deleted.

Binary file added client/src/assets/images/dice.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file removed client/src/assets/images/favicon.png
View file
Binary file not shown.
Binary file added client/src/assets/images/golden.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added client/src/assets/images/green.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added client/src/assets/images/pause.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added client/src/assets/images/player1.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added client/src/assets/images/player2.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added client/src/assets/images/player3.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added client/src/assets/images/player4.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added client/src/assets/images/red.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added client/src/assets/images/retro.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added client/src/assets/images/unique.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added client/src/assets/images/yellow.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
43 changes: 43 additions & 0 deletions client/src/components/CenterTile.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,43 @@
import React from 'react';
import Dice from './Dice';
import HighlightedDiv from './HighligtedDiv';

interface CenterTileProps {
color?: string;
width?: string;
height?: string;
}

const CenterTile: React.FC<CenterTileProps> = ({ color, width, height }) => {
return (
<div className="w-40 h-36 flex justify-between">
<div className="flex justify-between w-full border border-[#5cd7f8]">
<div className="border h-full w-1/4 border-[#5cd7f8]">
<div className="border h-1/4 border-[#5cd7f8]"></div>
<HighlightedDiv className="bg-[#545841] border h-2/4 border-[#5cd7f8]" ></HighlightedDiv>
<div className="border h-1/4 border-[#5cd7f8]"></div>
</div>

<div className="border w-2/4 border-[#5cd7f8]">
<HighlightedDiv className="bg-[#626b74] border h-1/4 border-[#5cd7f8]"></HighlightedDiv>
<div
className="border h-[75px] w-[107px] overflow-none bg-white border-[#5cd7f8] flex items-center justify-center relative"

>
<Dice onRoll={function (numbers: number[]): void {
throw new Error('Function not implemented.');
} } />
</div>
<HighlightedDiv className="border h-1/4 bg-[#973d34] border-[#5cd7f8]"></HighlightedDiv>
</div>
<div className="border w-1/4 border-[#5cd7f8]">
<div className="border h-1/4 border-[#5cd7f8]"></div>
<HighlightedDiv className="bg-[#c89252] border h-2/4 border-[#5cd7f8]"></HighlightedDiv>
<div className="border h-1/4 border-[#5cd7f8]"></div>
</div>
</div>
</div>
);
};

export default CenterTile;
2 changes: 1 addition & 1 deletion client/src/components/ColorSettings.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -132,4 +132,4 @@ const СolorSettings = () => {
);
};

export default СolorSettings;
export default СolorSettings;
Loading

0 comments on commit bc88c3f

Please sign in to comment.