Web3N3/auction
16
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

feat: add rps page

Browse source
This commit is contained in:
Mikhail Saveliev 2024-01-09 03:15:41 +05:00
parent fe46c2fa92
commit ede7dda619
3 changed files with 90 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
frontend/casino/src/app/components/web3/RPSPlayButton.tsx
View file

@ -1,7 +1,7 @@
export const RPSPlayButton = () => {
return (
<button className="bg-rose-700 rounded-[100px] shadow text-white text-2xl font-bold py-5 px-10 hover:bg-rose-600">
<button className="bg-rose-700 rounded-[100px] shadow text-white text-2xl font-bold py-5 px-10 hover:bg-rose-600 inline-block max-w-[200px]">
Играть
</button>
</button >
)
}

57
frontend/casino/src/app/pages/RockPaperScissorsGamePage/RockPaperScissorsGamePage.tsx Normal file
View file

@ -0,0 +1,57 @@
import React, { useState } from 'react';
import ContainerLayout from "../../utils/ContainerLayout"
import { RPSPlayButton } from "../../components/web3/RPSPlayButton"
export const RockPaperScissorsGamePage = () => {
const [userChoice, setUserChoice] = useState('src/assets/img/RPS-rock.png');
const handleImageClick = () => {
// cycle
if (userChoice === 'src/assets/img/RPS-rock.png') {
setUserChoice('src/assets/img/RPS-paper.png');
} else if (userChoice === 'src/assets/img/RPS-paper.png') {
setUserChoice('src/assets/img/RPS-scissors.png');
} else {
setUserChoice('src/assets/img/RPS-rock.png');
}
};
return (
<ContainerLayout>
<div className="grid grid-cols-2">
<div className="rounded">
<p className="text-[46px] font-bold uppercase bg-slate-400 rounded inline-block p-4 m-2">
ты
</p>
</div>
<div className="rounded">
<p className="text-[46px] font-bold uppercase bg-slate-400 rounded inline-block p-4 m-2">
не ты
</p>
</div>
</div>
<div className="grid grid-cols-2">
<div className="w-[500px] h-[500px]">
<img src={userChoice} alt="your_hand" onClick={handleImageClick} />
</div>
<div className="w-[500px] h-[500px]">
<img src="src/assets/img/RPS-rock.png" alt="casino_hand" />
</div>
</div>
<div className="grid grid-cols-3 items-center">
<img src="src/assets/img/RPS-rules.png" alt="rules" />
<div className="max-h-[100px] flex items-center justify-center">
<RPSPlayButton />
</div>
<div className="bg-green-700 shadow text-white text-2xl font-bold py-4 px-6">
<p>won: 5 times</p>
<p>lost: 2 times</p>
</div>
</div>
</ContainerLayout>
)
}

31
frontend/casino/src/app/pages/SlotGamePage/SlotGamePage.tsx Normal file
View file

@ -0,0 +1,31 @@
import ContainerLayout from "../../utils/ContainerLayout"
import { RPSPlayButton } from "../../components/web3/RPSPlayButton"
export const SlotGamePage = () => {
return (
<ContainerLayout>
<div className="flex flex-col items-center text-white">
<p className="text-[46px] font-bold uppercase">
брось кубики онлайн!
</p>
<div className="justify-center flex pointer-events-none">
<div className="absolute w-[710px] h-[456px] bg-lime-800 rounded-[187px] blur-[300px]" />
</div>
<div className="flex flex-row min-w-full justify-center gap-10 relative mt-12">
<img src="src/assets/img/dice-img.png" alt="Dice" />
<img src="src/assets/img/dice-img.png" alt="Dice" />
</div>
{/* Кнопка для бека */}
<RPSPlayButton />
<div className="flex flex-row justify-around w-full font-semibold">
<div className="bg-gray-500 rounded-[30px] py-5 px-10 text-2xl">
Вы загадали: 5
</div>
<div className="bg-gray-800 rounded-[30px] py-5 px-10 text-2xl">
Выпало число: 5
</div>
</div>
</div>
</ContainerLayout>
)
}