Skip to content

Commit

Permalink
Varaman: fix modals, fix timer tournament
Browse files Browse the repository at this point in the history
  • Loading branch information
@faizov
faizov committed Jun 19, 2024
1 parent 356e935 commit f79f7c4
Show file tree
Hide file tree
Showing 2 changed files with 73 additions and 65 deletions.
9 changes: 7 additions & 2 deletions frontend/apps/vara-man/src/feature/tournament-game/components/game-players/index.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import React, { useEffect, useState } from 'react';
import { useAtom } from 'jotai';
import { useAtom, useSetAtom } from 'jotai';
import { useAccount, useApi } from '@gear-js/react-hooks';
import { Button } from '@gear-js/vara-ui';

Expand All @@ -8,7 +8,7 @@ import { cn } from '@/app/utils';
import { SpriteIcon } from '@/components/ui/sprite-icon';
import { useApp } from '@/app/context/ctx-app';
import { useGameMessage } from '@/app/hooks/use-game';
import { PRIZE_POOL } from '@/feature/game/consts';
import { GAME_OVER, PRIZE_POOL } from '@/feature/game/consts';
import { ConfirmCancelModal } from '../modals/confirm-cancel';
import { useEzTransactions } from '@dapps-frontend/ez-transactions';
import { useCheckBalance } from '@dapps-frontend/hooks';
Expand All @@ -28,6 +28,7 @@ export const GamePlayers = () => {
});
const gasLimit = 120000000000;

const setGameOver = useSetAtom(GAME_OVER);
const [sortedParticipants, setSortedParticipants] = useState<any>([]);
const [isOpenCancelModal, setIsOpenCancelModal] = useState(false);

Expand Down Expand Up @@ -65,6 +66,10 @@ export const GamePlayers = () => {
const now = Date.now();
const timeLeft = endTime - now;
setTimeLeft(Math.max(timeLeft, 0));

if (timeLeft <= 0) {
setGameOver(true);
}
};

const timerId = setInterval(updateTimer, 1000);
Expand Down
129 changes: 66 additions & 63 deletions frontend/apps/vara-man/src/feature/tournament-game/components/modals/game-over.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ import { Key } from 'react';
import { useAtom, useSetAtom } from 'jotai';
import { useAccount } from '@gear-js/react-hooks';

import { Button, Modal } from '@/components';
import { Button } from '@/components';
import { Icons } from '@/components/ui/icons';
import { useGame } from '@/app/context/ctx-game';
import { useApp } from '@/app/context/ctx-app';
Expand All @@ -13,6 +13,7 @@ import { useGameMessage } from '@/app/hooks/use-game';
import { SpriteIcon } from '@/components/ui/sprite-icon';
import { useEzTransactions } from '@dapps-frontend/ez-transactions';
import { useCheckBalance } from '@dapps-frontend/hooks';
import { Modal } from '@/components/ui/modal/modal2';

type Props = {
tournamentGame: ITournamentGameInstance;
Expand Down Expand Up @@ -49,11 +50,10 @@ export const GameOverModal = ({ tournamentGame }: Props) => {
};

const onCancelGame = () => {
setIsPending(true);

if (!gasless.isLoading) {
if (isAdmin) {
checkBalance(gasLimit, () =>
checkBalance(gasLimit, () => {
setIsPending(true);
handleMessage({
payload: {
CancelTournament: {},
Expand All @@ -62,10 +62,11 @@ export const GameOverModal = ({ tournamentGame }: Props) => {
gasLimit,
onSuccess,
onError,
}),
);
});
});
} else {
checkBalance(gasLimit, () =>
checkBalance(gasLimit, () => {
setIsPending(true);
handleMessage({
payload: {
LeaveGame: {},
Expand All @@ -74,8 +75,8 @@ export const GameOverModal = ({ tournamentGame }: Props) => {
gasLimit,
onSuccess,
onError,
}),
);
});
});
setPreviousGame(null);
}
}
Expand All @@ -87,71 +88,73 @@ export const GameOverModal = ({ tournamentGame }: Props) => {

return (
<div>
<Modal onClose={() => null}>
<div className="flex flex-col justify-center gap-5 text-center">
<h3 className="text-3xl font-semibold">Game Over</h3>
{winners.length > 1 ? (
winners.map((winner: { points: string; name: string }[], index: Key | null | undefined) => (
<div key={index} className="flex items-center justify-between gap-3 w-4/5 mx-auto">
<Modal open>
<Modal.Content classNameContent='max-w-[600px]'>
<div className="flex flex-col justify-center gap-5 text-center">
<h3 className="text-3xl font-semibold">Game Over</h3>
{winners.length > 1 ? (
winners.map((winner: { points: string; name: string }[], index: Key | null | undefined) => (
<div key={index} className="flex items-center justify-between gap-3 w-4/5 mx-auto">
<div>
<p className="text-[#555756]">{winner?.[1].name}</p>
</div>
<div className="flex items-center gap-5 ml-5">
<div className="bg-[#F7F9FA] w-fullfont-medium flex gap-5 justify-center items-center">
<span className="flex items-center gap-1 font-semibold">
<Icons.statsCoins width={20} height={20} />
{winner?.[1].points}
</span>
</div>
<div className="bg-[#F7F9FA] w-full font-medium flex gap-5 justify-center items-center">
<span className="flex items-center gap-1 font-semibold">
<SpriteIcon name="vara-coin" height={20} width={20} />
{prizePool} VARA
</span>
</div>
</div>
</div>
))
) : (
<div>
<div>
<p className="text-[#555756]">{winner?.[1].name}</p>
<p className="text-[#555756] mt-2">{winners?.[0][1].name} wins!</p>
</div>
<div className="flex items-center gap-5 ml-5">
<div className="bg-[#F7F9FA] w-fullfont-medium flex gap-5 justify-center items-center">
<span className="flex items-center gap-1 font-semibold">
<Icons.statsCoins width={20} height={20} />
{winner?.[1].points}
<div className="flex">
<div className="bg-[#F7F9FA] w-full p-5 font-medium flex gap-5 justify-center items-center">
Score:
<span className="flex items-center gap-2 font-semibold">
<Icons.statsCoins />
{winners?.[0][1].points}
</span>
</div>
<div className="bg-[#F7F9FA] w-full font-medium flex gap-5 justify-center items-center">
<span className="flex items-center gap-1 font-semibold">
<SpriteIcon name="vara-coin" height={20} width={20} />
<div className="bg-[#F7F9FA] w-full p-5 font-medium flex gap-5 justify-center items-center">
Winner prize:
<span className="flex items-center gap-2 font-semibold">
<SpriteIcon name="vara-coin" height={24} width={24} />
{prizePool} VARA
</span>
</div>
</div>
</div>
))
) : (
<div>
<div>
<p className="text-[#555756] mt-2">{winners?.[0][1].name} wins!</p>
</div>
<div className="flex">
<div className="bg-[#F7F9FA] w-full p-5 font-medium flex gap-5 justify-center items-center">
Score:
<span className="flex items-center gap-2 font-semibold">
<Icons.statsCoins />
{winners?.[0][1].points}
</span>
</div>
<div className="bg-[#F7F9FA] w-full p-5 font-medium flex gap-5 justify-center items-center">
Winner prize:
<span className="flex items-center gap-2 font-semibold">
<SpriteIcon name="vara-coin" height={24} width={24} />
{prizePool} VARA
</span>
</div>
</div>
</div>
)}
)}

<div className="flex justify-evenly gap-5">
<Button
variant="gray"
onClick={() => {
onResetGame();
onCancelGame();
}}
disabled={isPending}
className="w-full">
Close
</Button>
<Button onClick={onCancelGame} isLoading={isPending} disabled={isPending} className="w-full">
Play again
</Button>
<div className="flex justify-evenly gap-5">
<Button
variant="gray"
onClick={() => {
onResetGame();
onCancelGame();
}}
disabled={isPending}
className="w-full">
Close
</Button>
<Button onClick={onCancelGame} isLoading={isPending} disabled={isPending} className="w-full">
Play again
</Button>
</div>
</div>
</div>
</Modal.Content>
</Modal>
</div>
);
Expand Down

0 comments on commit f79f7c4

Please sign in to comment.