Skip to content

Commit

Permalink
Varaman: fix timer restart game
Browse files Browse the repository at this point in the history
  • Loading branch information
@faizov
faizov committed May 30, 2024
1 parent 60397e7 commit 4850cb6
Show file tree
Hide file tree
Showing 4 changed files with 103 additions and 112 deletions.
2 changes: 1 addition & 1 deletion frontend/apps/vara-man/src/components/sections/home/home-register.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ import { ArrowRight, Search } from 'lucide-react';
import { WalletNew } from '@dapps-frontend/ui/';
import IntroImage from '@/assets/images/welcome.png';
import { Icons } from '@/components/ui/icons';
import { EzSignlessTransactions, EzTransactionsSwitch, useEzTransactions } from '@dapps-frontend/ez-transactions';
import { EzTransactionsSwitch, useEzTransactions } from '@dapps-frontend/ez-transactions';
import { SIGNLESS_ALLOWED_ACTIONS } from '@/app/consts';

const selectMode = [
Expand Down
141 changes: 65 additions & 76 deletions frontend/apps/vara-man/src/feature/single-game/Game.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,85 +1,74 @@
import { useSearchParams } from 'react-router-dom';
import { useAtom } from 'jotai'
import { useAtom } from 'jotai';
import { useState } from 'react';
import { ArrowUp, ArrowDown, ArrowLeft, ArrowRight } from 'lucide-react';

import { GameCanvas } from './GameCanvas'
import { GameCanvas } from './GameCanvas';
import { useGame } from '@/app/context/ctx-game';
import { Icons } from '@/components/ui/icons'
import { Icons } from '@/components/ui/icons';
import { GameTimer } from './components/timer';

import { IGameLevel } from '@/app/types/game';
import { calculatePoints } from '../game/utils/calculatePoints';
import { COINS, GAME_OVER } from '../game/consts';

export const Game = () => {
const [searchParams] = useSearchParams()
const [, setGameOver] = useAtom(GAME_OVER)
const { configState } = useGame()
const [coins] = useAtom(COINS);

const score = configState && calculatePoints(coins, configState, searchParams.get("level") as IGameLevel)

return (
<div>
<div className="w-full flex flex-col justify-center items-center">
<div className="w-[588px] flex justify-between my-3">
<div className="flex gap-3 items-center">
<div className="flex gap-3 items-center font-semibold">
<Icons.statsTimer />

<GameTimer />
</div>

<div className="flex gap-3 items-center font-semibold">
<Icons.statsCoins />
{score}
</div>

</div>
<div className="flex gap-3 items-center font-semibold cursor-pointer" onClick={() => setGameOver(true)}>
<Icons.exit />
Exit
</div>

</div>

<GameCanvas />

<div className="flex gap-5 my-3">
<div className="flex gap-3 items-center">
<div className="bg-[#DFDFDF] rounded-sm p-1">
<ArrowUp color='#767676' />
</div>

<div className="bg-[#DFDFDF] rounded-sm p-1">
<ArrowDown color='#767676' />
</div>

<span>Use arrows to move</span>
</div>

<div className="flex gap-3 items-center">
<div className="bg-[#DFDFDF] rounded-sm p-1">
<ArrowLeft color='#767676' />
</div>

<div className="bg-[#DFDFDF] rounded-sm p-1">
<ArrowRight color='#767676' />
</div>

<span>Rotate</span>
</div>

<div className="flex gap-3 items-center">
<div className="bg-[#DFDFDF] rounded-sm p-1 px-3 font-bold text-[#726F6F]">
Shift
</div>

<span>Hold shift to run</span>
</div>
</div>

</div>
</div>
)
}
const [searchParams] = useSearchParams();
const [, setGameOver] = useAtom(GAME_OVER);
const { configState } = useGame();
const [coins] = useAtom(COINS);
const [gameRestarted, setGameRestarted] = useState(false);

const score = configState && calculatePoints(coins, configState, searchParams.get('level') as IGameLevel);

const handleGameRestart = () => {
setGameRestarted((prev) => !prev);
setGameOver(false);
};

return (
<div>
<div className="w-full flex flex-col justify-center items-center">
<div className="w-[588px] flex justify-between my-3">
<div className="flex gap-3 items-center">
<div className="flex gap-3 items-center font-semibold">
<Icons.statsTimer />
<GameTimer gameRestarted={gameRestarted} />
</div>
<div className="flex gap-3 items-center font-semibold">
<Icons.statsCoins />
{score}
</div>
</div>
<div className="flex gap-3 items-center font-semibold cursor-pointer" onClick={() => setGameOver(true)}>
<Icons.exit />
Exit
</div>
</div>
<GameCanvas onRestart={handleGameRestart} />
<div className="flex gap-5 my-3">
<div className="flex gap-3 items-center">
<div className="bg-[#DFDFDF] rounded-sm p-1">
<ArrowUp color="#767676" />
</div>
<div className="bg-[#DFDFDF] rounded-sm p-1">
<ArrowDown color="#767676" />
</div>
<span>Use arrows to move</span>
</div>
<div className="flex gap-3 items-center">
<div className="bg-[#DFDFDF] rounded-sm p-1">
<ArrowLeft color="#767676" />
</div>
<div className="bg-[#DFDFDF] rounded-sm p-1">
<ArrowRight color="#767676" />
</div>
<span>Rotate</span>
</div>
<div className="flex gap-3 items-center">
<div className="bg-[#DFDFDF] rounded-sm p-1 px-3 font-bold text-[#726F6F]">Shift</div>
<span>Hold shift to run</span>
</div>
</div>
</div>
</div>
);
};
12 changes: 7 additions & 5 deletions frontend/apps/vara-man/src/feature/single-game/GameCanvas.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,21 +1,22 @@
import { useRef, useEffect, useMemo, useState } from 'react';
import { useRef, useEffect } from 'react';
import { useSearchParams } from 'react-router-dom';
import { useAtom } from 'jotai';

import { IGameLevel, TileMap } from '@/app/types/game';

import { GameOverModal } from './components/modals/game-over';
import { useGameMessage } from '@/app/hooks/use-game';
import { useApp } from '@/app/context/ctx-app';

import { findMapLevel } from '../game/utils/findMapLevel';
import { Game } from '../game/models/Game';
import { COINS, GAME_OVER } from '../game/consts';
import { useCheckBalance } from '@dapps-frontend/hooks';
import { useEzTransactions } from '@dapps-frontend/ez-transactions';
import useOnScreen from '@/hooks/use-on-screen';

export const GameCanvas = () => {
type Props = {
onRestart: () => void;
};

export const GameCanvas = ({ onRestart }: Props) => {
const [searchParams] = useSearchParams();
const [coins, setCoins] = useAtom(COINS);
const [gameOver, setGameOver] = useAtom(GAME_OVER);
Expand Down Expand Up @@ -103,6 +104,7 @@ export const GameCanvas = () => {

const restartGame = () => {
gameInstanceRef.current = null;
onRestart(); // Notify the parent component
};

return (
Expand Down
60 changes: 30 additions & 30 deletions frontend/apps/vara-man/src/feature/single-game/components/timer/index.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,41 +1,41 @@
import { useEffect, useState } from 'react'
import { useEffect, useState } from 'react';
import { useAtom } from 'jotai';

import { GAME_OVER } from '@/feature/game/consts';

export const GameTimer = () => {
const [, setGameOver] = useAtom(GAME_OVER);
type Props = {
gameRestarted: boolean;
};

const [timeLeft, setTimeLeft] = useState('');
export const GameTimer = ({ gameRestarted }: Props) => {
const [, setGameOver] = useAtom(GAME_OVER);
const [timeLeft, setTimeLeft] = useState('');
const [startTime, setStartTime] = useState<number | null>(null);

const [startTime, setStartTime] = useState<number | null>(null);
useEffect(() => {
const start = Date.now();
setStartTime(start);

useEffect(() => {
const start = Date.now();
setStartTime(start);
const totalGameTime = 10 * 60 * 1000;

const totalGameTime = 10 * 60 * 1000;
const updateTimer = () => {
const now = Date.now();
const elapsedTime = now - (startTime || now);
const remainingTime = totalGameTime - elapsedTime;

const updateTimer = () => {
const now = Date.now();
const elapsedTime = now - (startTime || now);
const remainingTime = totalGameTime - elapsedTime;
if (remainingTime <= 0) {
setTimeLeft('00:00');
setGameOver(true);
} else {
const minutes = Math.floor((remainingTime / (1000 * 60)) % 60);
const seconds = Math.floor((remainingTime / 1000) % 60);
setTimeLeft(`${minutes < 10 ? '0' : ''}${minutes}:${seconds < 10 ? '0' : ''}${seconds}`);
}
};

if (remainingTime <= 0) {
setTimeLeft(`00:00`);
setGameOver(true);
} else {
const minutes = Math.floor((remainingTime / (1000 * 60)) % 60);
const seconds = Math.floor((remainingTime / 1000) % 60);
setTimeLeft(`${minutes < 10 ? '0' : ''}${minutes}:${seconds < 10 ? '0' : ''}${seconds}`);
}
};
const timerId = setInterval(updateTimer, 1000);
const timerId = setInterval(updateTimer, 1000);

return () => clearInterval(timerId);
}, [setGameOver, startTime]);
return () => clearInterval(timerId);
}, [setGameOver, startTime, gameRestarted]);

return (
<>{timeLeft}</>
);
}
return <>{timeLeft}</>;
};

0 comments on commit 4850cb6

Please sign in to comment.