Skip to content

Commit

Permalink
Base to work on
Browse files Browse the repository at this point in the history
  • Loading branch information
@ClanCo
ClanCo committed Dec 12, 2024
1 parent dbf4607 commit d4f8fcb
Show file tree
Hide file tree
Showing 4 changed files with 63 additions and 94 deletions.
8 changes: 1 addition & 7 deletions client/src/ui/components/GameBoard.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,10 +1,4 @@
import React, {
useState,
useCallback,
useEffect,
useMemo,
useRef,
} from "react";
import React, { useState, useCallback, useEffect, useMemo } from "react";
import { Card } from "@/ui/elements/card";
import { useDojo } from "@/dojo/useDojo";
import { GameBonus } from "../containers/GameBonus";
Expand Down
74 changes: 14 additions & 60 deletions client/src/ui/componentsDev/GameBoardDev.tsx → client/src/ui/componentsDev/DevBoard.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,23 +1,16 @@
import React, { useState, useCallback, useEffect, useMemo } from "react";
import { Card } from "@/ui/elements/card";
import { useDojo } from "@/dojo/useDojo";
import { GameBonus } from "../containers/GameBonus";
import { useMediaQuery } from "react-responsive";
import { Account } from "starknet";
import { transformDataContractIntoBlock } from "@/utils/gridUtils";
import { Block } from "@/types/types";
import { Bonus, BonusType } from "@/dojo/game/types/bonus";
import { ModeType } from "@/dojo/game/types/mode";
import useTournament from "@/hooks/useTournament";
import { Game } from "@/dojo/game/models/game";
import useRank from "@/hooks/useRank";
import { BonusType } from "@/dojo/game/types/bonus";

import "../../grid.css";
import BonusAnimation from "../components/BonusAnimation";
import NextLine from "../components/NextLine";
import GameScores from "../components/GameScores";
import GridDev from "./GridDev";
import TournamentTimer from "../components/TournamentTimer";
import GridDev from "./DevGrid";

interface GameBoardProps {
initialGrid: number[][];
Expand All @@ -28,11 +21,9 @@ interface GameBoardProps {
hammerCount: number;
waveCount: number;
totemCount: number;
account: Account | null;
game: Game;
}

const GameBoardDev: React.FC<GameBoardProps> = ({
const DevBoard: React.FC<GameBoardProps> = ({
initialGrid,
nextLine,
score,
Expand All @@ -41,15 +32,7 @@ const GameBoardDev: React.FC<GameBoardProps> = ({
waveCount,
hammerCount,
totemCount,
account,
game,
}) => {
const {
setup: {
systemCalls: { applyBonus },
},
} = useDojo();

const isMdOrLarger = useMediaQuery({ query: "(min-width: 768px)" });
const ROWS = 10;
const COLS = 8;
Expand Down Expand Up @@ -101,22 +84,19 @@ const GameBoardDev: React.FC<GameBoardProps> = ({
}
};

const handleBonusWaveTx = useCallback(
async (rowIndex: number) => {
// TBD : should I keep it ?
setIsTxProcessing(true);
console.log("handleBonusWaveTx", rowIndex);
},
[account, applyBonus],
);
const handleBonusWaveTx = useCallback(async (rowIndex: number) => {
// TBD : should I keep it ?
setIsTxProcessing(true);
console.log("handleBonusWaveTx", rowIndex);
}, []);

const handleBonusHammerTx = useCallback(
async (rowIndex: number, colIndex: number) => {
// TBD : should I keep it ?
setIsTxProcessing(true);
console.log("handleBonusHammerTx", rowIndex, colIndex);
},
[account, applyBonus],
[],
);

const handleBonusTikiTx = useCallback(
Expand All @@ -125,7 +105,7 @@ const GameBoardDev: React.FC<GameBoardProps> = ({
setIsTxProcessing(true);
console.log("handleBonusTikiTx", rowIndex, colIndex);
},
[account, applyBonus],
[],
);

const selectBlock = useCallback(
Expand Down Expand Up @@ -160,12 +140,6 @@ const GameBoardDev: React.FC<GameBoardProps> = ({
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [initialGrid]);

const { endTimestamp } = useTournament(game.mode.value);
const { rank, suffix } = useRank({
tournamentId: game.tournament_id,
gameId: game.id,
});

if (memoizedInitialData.length === 0) return null; // otherwise sometimes
// the grid is not displayed in Grid because the data is not ready

Expand Down Expand Up @@ -214,10 +188,9 @@ const GameBoardDev: React.FC<GameBoardProps> = ({
gridWidth={COLS}
selectBlock={selectBlock}
bonus={bonus}
account={account}
score={game.score}
combo={game.combo}
maxCombo={game.max_combo}
score={score}
combo={combo}
maxCombo={maxCombo}
setOptimisticScore={setOptimisticScore}
setOptimisticCombo={setOptimisticCombo}
setOptimisticMaxCombo={setOptimisticMaxCombo}
Expand All @@ -243,28 +216,9 @@ const GameBoardDev: React.FC<GameBoardProps> = ({
gridWidth={COLS}
/>
</div>

{(game.mode.value === ModeType.Daily ||
game.mode.value === ModeType.Normal) && (
<div className="flex w-full items-center justify-between px-1 mt-2 md:mt-3 font-semibold md:font-normal">
<div>
Ranked {rank}
<sup>{suffix}</sup>
</div>
<div className="flex gap-4">
<h2 className="text-GRID_SIZEsm md:text-base font-semibold">
Tournament:
</h2>
<TournamentTimer
mode={game.mode.value}
endTimestamp={endTimestamp}
/>
</div>
</div>
)}
</Card>
</>
);
};

export default GameBoardDev;
export default DevBoard;
16 changes: 3 additions & 13 deletions client/src/ui/componentsDev/GridDev.tsx → client/src/ui/componentsDev/DevGrid.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
import { useCallback, useEffect, useRef, useState } from "react";
import { Account } from "starknet";
import { useDojo } from "@/dojo/useDojo";
import { GameState } from "@/enums/gameEnums";
import { Block } from "@/types/types";
Expand Down Expand Up @@ -40,7 +39,6 @@ interface GridProps {
gridHeight: number;
selectBlock: (block: Block) => void;
bonus: BonusType;
account: Account | null;
isTxProcessing: boolean;
setIsTxProcessing: React.Dispatch<React.SetStateAction<boolean>>;
score: number;
Expand All @@ -51,7 +49,7 @@ interface GridProps {
setOptimisticMaxCombo: React.Dispatch<React.SetStateAction<number>>;
}

const GridDev: React.FC<GridProps> = ({
const DevGrid: React.FC<GridProps> = ({
initialData,
nextLineData,
setNextLineHasBeenConsumed,
Expand All @@ -60,7 +58,6 @@ const GridDev: React.FC<GridProps> = ({
gridSize,
selectBlock,
bonus,
account,
score,
combo,
maxCombo,
Expand All @@ -70,12 +67,6 @@ const GridDev: React.FC<GridProps> = ({
isTxProcessing,
setIsTxProcessing,
}) => {
const {
setup: {
systemCalls: { move },
},
} = useDojo();

// ==================== Refs ====================

// Grid Position will be used to trigger particle in the right spot
Expand Down Expand Up @@ -331,7 +322,6 @@ const GridDev: React.FC<GridProps> = ({
}

if (startColIndex === finalColIndex) return;
if (!account) return;

isProcessingRef.current = true;
setIsTxProcessing(true);
Expand All @@ -346,7 +336,7 @@ const GridDev: React.FC<GridProps> = ({
isProcessingRef.current = false; // Reset the ref
},
// eslint-disable-next-line react-hooks/exhaustive-deps
[account, isMoving, gridHeight, move],
[isMoving, gridHeight],
);

// Send the move transaction when the currentMove state is updated
Expand Down Expand Up @@ -629,4 +619,4 @@ const GridDev: React.FC<GridProps> = ({
);
};

export default GridDev;
export default DevGrid;
59 changes: 45 additions & 14 deletions client/src/ui/screens/DevPage.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ import { useTheme } from "@/ui/elements/theme-provider/hooks";
import ImageAssets from "@/ui/theme/ImageAssets";
import { useMediaQuery } from "react-responsive";
import BackGroundBoard from "../components/BackgroundBoard";
import DevBoard from "../componentsDev/DevBoard";

interface DevPageProps {
onSkip: () => void;
Expand All @@ -15,24 +16,54 @@ const DevPage = ({ onSkip }: DevPageProps) => {
const imageTotemTheme =
theme === "dark" ? imgAssets.imageTotemDark : imgAssets.imageTotemLight;

const gridTest = [
[0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 3, 3, 3, 3, 3, 3],
[4, 4, 4, 4, 0, 3, 3, 3],
[2, 2, 0, 3, 3, 3, 2, 2],
[4, 4, 4, 4, 2, 2, 0, 1],
];

const nextRowTest = [0, 1, 1, 1, 1, 1, 1, 1];

return (
<PasswordProtected onSkip={onSkip}>
<div className="h-screen-viewport flex flex-col w-full" id="portal-root">
<BackGroundBoard imageBackground={imgAssets.imageBackground}>
<BackGroundBoard
imageBackground={imageTotemTheme}
initial={{ scale: 1 }}
animate={isMdOrLarger ? { scale: [1, 0.995, 1] } : {}}
transition={{
duration: 2,
repeat: Infinity,
repeatType: "reverse",
ease: "easeInOut",
}}
>
<div></div>
<div className="flex flex-col flex-1 relative">
<BackGroundBoard imageBackground={imgAssets.imageBackground}>
<BackGroundBoard
imageBackground={imageTotemTheme}
initial={{ scale: 1 }}
animate={isMdOrLarger ? { scale: [1, 0.995, 1] } : {}}
transition={{
duration: 2,
repeat: Infinity,
repeatType: "reverse",
ease: "easeInOut",
}}
>
<div className="relative w-full">
<div className="flex flex-col items-center game-container">
<DevBoard
initialGrid={gridTest}
nextLine={nextRowTest}
score={10}
combo={4}
maxCombo={5}
hammerCount={1}
totemCount={1}
waveCount={1}
/>
</div>
</div>
</BackGroundBoard>
</BackGroundBoard>
</BackGroundBoard>
</div>
</div>
</PasswordProtected>
);
Expand Down

0 comments on commit d4f8fcb

Please sign in to comment.