Skip to content

Commit

Permalink
Change modals
Browse files Browse the repository at this point in the history
  • Loading branch information
faizov committed Jun 19, 2024
1 parent ab6bc79 commit d05a3af
Show file tree
Hide file tree
Showing 6 changed files with 92 additions and 84 deletions.
10 changes: 7 additions & 3 deletions frontend/apps/vara-man/src/components/ui/modal/modal2.tsx
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import { cn } from '@/app/utils';
import * as Dialog from '@radix-ui/react-dialog';
import { ReactNode } from 'react';
// import { CrossIcon } from '@/assets/images';

export function Modal({
open,
Expand All @@ -18,11 +18,15 @@ export function Modal({
);
}

function ModalContent({ children }: { children: ReactNode }) {
function ModalContent({ children, classNameContent }: { children: ReactNode; classNameContent?: string }) {
return (
<Dialog.Portal>
<Dialog.Overlay className="fixed inset-0 bg-black/50 data-[state=closed]:animate-[dialog-overlay-hide_200ms] data-[state=open]:animate-[dialog-overlay-show_200ms] backdrop-blur-lg" />
<Dialog.Content className="fixed left-1/2 top-1/2 w-full max-w-md -translate-x-1/2 -translate-y-1/2 rounded-md bg-white p-8 text-gray-900 shadow data-[state=closed]:animate-[dialog-content-hide_200ms] data-[state=open]:animate-[dialog-content-show_200ms]">
<Dialog.Content
className={cn(
'fixed left-1/2 top-1/2 w-full max-w-md -translate-x-1/2 -translate-y-1/2 rounded-md bg-white p-8 text-gray-900 shadow data-[state=closed]:animate-[dialog-content-hide_200ms] data-[state=open]:animate-[dialog-content-show_200ms]',
classNameContent,
)}>
{children}
</Dialog.Content>
</Dialog.Portal>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,7 @@ export const GameOverModal = ({ restartGame }: any) => {

return (
<div>
<Modal open={true}>
<Modal open>
<Modal.Content>
<div className="flex flex-col justify-center gap-5 text-center">
<div>
Expand Down
Original file line number Diff line number Diff line change
@@ -1,25 +1,26 @@


import { Modal } from '@/components/ui/modal/modal2';
import { Button } from '@gear-js/vara-ui';
import { Modal } from '@/components';

type Props = {
setIsOpenCancelModal: (_: boolean) => void
onCancelGame: () => void
}
setIsOpenCancelModal: (_: boolean) => void;
onCancelGame: () => void;
};
export const ConfirmCancelModal = ({ setIsOpenCancelModal, onCancelGame }: Props) => {

return (
<Modal onClose={() => null}>
<h2 className='typo-h2'>Sure you want to end the game?</h2>
<div className="flex flex-col gap-5 mt-5">
<p className="text-[#555756]">
This action cannot be undone. The game will be concluded, and all players will exit the gaming room. Any entry fees will be refunded to all players.
</p>
<div className="flex gap-10">
<Button color='grey' text="End tournament" onClick={onCancelGame} />
<Button text="Continue tournament" onClick={() => setIsOpenCancelModal(false)} />
</div>
</div>
</Modal>
)
}
return (
<Modal open>
<Modal.Content classNameContent="max-w-[700px]">
<h2 className="typo-h2">Sure you want to end the game?</h2>
<div className="flex flex-col gap-5 mt-5">
<p className="text-[#555756]">
This action cannot be undone. The game will be concluded, and all players will exit the gaming room. Any
entry fees will be refunded to all players.
</p>
<div className="flex gap-10">
<Button color="grey" text="End tournament" onClick={onCancelGame} />
<Button text="Continue tournament" onClick={() => setIsOpenCancelModal(false)} />
</div>
</div>
</Modal.Content>
</Modal>
);
};
Original file line number Diff line number Diff line change
@@ -1,22 +1,22 @@


import { useGame } from '@/app/context/ctx-game';
import { Modal } from '@/components';
import { Modal } from '@/components/ui/modal/modal2';
import { Button } from '@gear-js/vara-ui';

export const GameCanceledModal = () => {
const { setPreviousGame } = useGame()
return (
<Modal onClose={() => null}>
<h2 className='typo-h2' >The game has been canceled by the administrator</h2>
<div className="flex flex-col gap-5 mt-5">
<p className="text-[#555756]">
Game administrator Samovit has ended the game. All spent VARA tokens for the entry fee will be refunded.
</p>
<div className="flex gap-10">
<Button color='grey' text="OK" className="w-1/3" onClick={() => setPreviousGame(null)} />
</div>
</div>
</Modal>
)
}
const { setPreviousGame } = useGame();
return (
<Modal open>
<Modal.Content classNameContent="max-w-[700px]">
<h2 className="typo-h2">The game has been canceled by the administrator</h2>
<div className="flex flex-col gap-5 mt-5">
<p className="text-[#555756]">
Game administrator Samovit has ended the game. All spent VARA tokens for the entry fee will be refunded.
</p>
<div className="flex gap-10">
<Button color="grey" text="OK" className="w-1/3" onClick={() => setPreviousGame(null)} />
</div>
</div>
</Modal.Content>
</Modal>
);
};
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import { useApp } from '@/app/context/ctx-app';
import { useGameMessage } from '@/app/hooks/use-game';
import { Modal } from '@/components';
import { Modal } from '@/components/ui/modal/modal2';

import { SpriteIcon } from '@/components/ui/sprite-icon';
import { useEzTransactions } from '@dapps-frontend/ez-transactions';
import { useCheckBalance } from '@dapps-frontend/hooks';
Expand Down Expand Up @@ -76,52 +77,54 @@ export const GameFindModal = ({ findGame, setIsOpenFindModal }: GameFindModalPro
});

return (
<Modal onClose={() => null}>
<h2 className="typo-h2"> The game has been found</h2>
<div className="flex flex-col gap-5 mt-5">
<p className="text-[#555756]">
To proceed, review the parameters of the gaming session and click the “Join” button. If applicable, you will
need to pay the entry fee and required amount of gas immediately after clicking the “Join” button. After the
end of the game, any unused gas will be refunded.
</p>
<Modal open>
<Modal.Content classNameContent="max-w-[650px]">
<h2 className="typo-h2"> The game has been found</h2>
<div className="flex flex-col gap-5 mt-5">
<p className="text-[#555756]">
To proceed, review the parameters of the gaming session and click the “Join” button. If applicable, you will
need to pay the entry fee and required amount of gas immediately after clicking the “Join” button. After the
end of the game, any unused gas will be refunded.
</p>

<div className="bg-[#f0f2f3] rounded-2xl text-black p-4">
<div className="flex flex-col gap-2">
<div className="flex items-center justify-between pr-[100px]">
<p>Entry fee</p>
<div className="font-semibold flex items-center">
<SpriteIcon name="vara-coin" width={24} height={24} className="mr-2" />
{bid} VARA
<div className="bg-[#f0f2f3] rounded-2xl text-black p-4">
<div className="flex flex-col gap-2">
<div className="flex items-center justify-between pr-[100px]">
<p>Entry fee</p>
<div className="font-semibold flex items-center">
<SpriteIcon name="vara-coin" width={24} height={24} className="mr-2" />
{bid} VARA
</div>
</div>
</div>

<div className="flex items-center justify-between pr-[100px]">
<p>Players already joined the game</p>
<div className="font-semibold flex items-center">
<SpriteIcon name="user" width={24} height={24} className="mr-2" />
<span className="font-semibold">{findGame.participants} </span>
/10
<div className="flex items-center justify-between pr-[100px]">
<p>Players already joined the game</p>
<div className="font-semibold flex items-center">
<SpriteIcon name="user" width={24} height={24} className="mr-2" />
<span className="font-semibold">{findGame.participants} </span>
/10
</div>
</div>
</div>
</div>
</div>

<form onSubmit={handleSubmit}>
<Input
type="text"
label="Enter your name:"
placeholder="Username"
required
className="w-full"
{...getInputProps('username')}
/>
<form onSubmit={handleSubmit}>
<Input
type="text"
label="Enter your name:"
placeholder="Username"
required
className="w-full"
{...getInputProps('username')}
/>

<div className="flex gap-10 mt-5">
<Button color="grey" text="Cancel" className="w-full" onClick={() => setIsOpenFindModal(false)} />
<Button type="submit" text="Join" className="w-full" isLoading={isPending} />
</div>
</form>
</div>
<div className="flex gap-10 mt-5">
<Button color="grey" text="Cancel" className="w-full" onClick={() => setIsOpenFindModal(false)} />
<Button type="submit" text="Join" className="w-full" isLoading={isPending} />
</div>
</form>
</div>
</Modal.Content>
</Modal>
);
};
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ export const GamePlayAgainModal = ({ setIsOpenPlayAgain, restartGame }: GamePlay
const setCoins = useSetAtom(COINS);

return (
<Modal open={true}>
<Modal open>
<Modal.Content>
<div className="flex flex-col items-center">
<h2 className="typo-h2">Game over</h2>
Expand Down

0 comments on commit d05a3af

Please sign in to comment.