feat:
This commit is contained in:
parent
7ce025914d
commit
98bfb9ef28
10 changed files with 77 additions and 31 deletions
|
@ -1,4 +1,4 @@
|
|||
import LoadingImg from '../../../assets/Capibebra.gif'
|
||||
import LoadingImg from '../../../assets/LoadingScreen.gif'
|
||||
import { styled } from '../../../styles'
|
||||
|
||||
const LoadingStyle = styled('div', {
|
||||
|
@ -12,7 +12,7 @@ const LoadingStyle = styled('div', {
|
|||
const Loading = () => {
|
||||
return (
|
||||
<LoadingStyle>
|
||||
<img src={LoadingImg} />
|
||||
<img style={{ width: '100vw' }} src={LoadingImg} />
|
||||
</LoadingStyle>
|
||||
)
|
||||
}
|
||||
|
|
|
@ -1,6 +1,13 @@
|
|||
import {usePlayRPS} from "../../web3/functions/RPS/usePlayRPS.ts";
|
||||
|
||||
export const RPSPlayButton = () => {
|
||||
|
||||
const { playRPS } = usePlayRPS()
|
||||
|
||||
return (
|
||||
<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
|
||||
onClick={() => { playRPS('rock') }}
|
||||
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 >
|
||||
)
|
||||
|
|
|
@ -1,6 +1,13 @@
|
|||
import {useSlotMachine} from "../../web3/functions/SlotMachine/useSlotMachine.ts";
|
||||
|
||||
export const SlotPlayButton = () => {
|
||||
|
||||
const { playSlot } = useSlotMachine()
|
||||
|
||||
return (
|
||||
<button className="bg-rose-700 rounded-[100px] shadow text-white text-2xl font-bold py-5 px-10 hover:bg-rose-600">
|
||||
<button
|
||||
onClick={() => { playSlot() }}
|
||||
className="bg-rose-700 rounded-[100px] shadow text-white text-2xl font-bold py-5 px-10 hover:bg-rose-600">
|
||||
Крутить
|
||||
</button>
|
||||
)
|
||||
|
|
|
@ -67,7 +67,7 @@ export const MainPage = () => {
|
|||
<div className="flex flex-col h-full justify-between">
|
||||
<div className="flex flex-row justify-between min-w-[200px] my-auto">
|
||||
<span className="text-xl font-bold uppercase">Rock paper scissors</span>
|
||||
<a href="/rock-paper-scissors" className="min-w-[100px]max-h-[45px] bg-blue-500 rounded-[10px] border border-blue-400 font-bold px-3 items-center flex justify-center py-2">Play now</a>
|
||||
<Link to="/rock-paper-scissors" className="min-w-[100px]max-h-[45px] bg-blue-500 rounded-[10px] border border-blue-400 font-bold px-3 items-center flex justify-center py-2">Play now</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
@ -83,7 +83,7 @@ export const MainPage = () => {
|
|||
<div className="flex flex-col h-full justify-between">
|
||||
<div className="flex flex-row justify-between min-w-[200px] my-auto">
|
||||
<span className="text-xl font-bold uppercase">Slot machine</span>
|
||||
<a href="/slot" className="min-w-[100px]max-h-[45px] bg-blue-500 rounded-[10px] border border-blue-400 font-bold px-3 items-center flex justify-center py-2">Play now</a>
|
||||
<Link to="/slot" className="min-w-[100px]max-h-[45px] bg-blue-500 rounded-[10px] border border-blue-400 font-bold px-3 items-center flex justify-center py-2">Play now</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
|
|||
import Reel from '../../components/App/Slot/Reel';
|
||||
import { useEffect, useState } from 'react';
|
||||
import { RPSPlayButton } from '../../components/web3/RPSPlayButton';
|
||||
import {SlotPlayButton} from "../../components/web3/SlotPlayButton.tsx";
|
||||
|
||||
export const SlotGamePage = () => {
|
||||
const [isHorizontal, setIsHorizontal] = useState(false)
|
||||
|
@ -55,7 +56,7 @@ export const SlotGamePage = () => {
|
|||
</div>
|
||||
|
||||
<div className="max-w-[100px]">
|
||||
<RPSPlayButton />
|
||||
<SlotPlayButton />
|
||||
</div>
|
||||
</div>
|
||||
</ContainerLayout>
|
||||
|
|
33
frontend/casino/src/app/web3/functions/RPS/usePlayRPS.ts
Normal file
33
frontend/casino/src/app/web3/functions/RPS/usePlayRPS.ts
Normal file
|
@ -0,0 +1,33 @@
|
|||
import {useWalletConnect} from "@cityofzion/wallet-connect-sdk-react";
|
||||
import {useCallback} from "react";
|
||||
import {useGetResult} from "../utils/useGetResult.ts";
|
||||
import {config} from "../config/config.ts";
|
||||
|
||||
export const usePlayRPS = () => {
|
||||
const wcSdk = useWalletConnect()
|
||||
const { getResult, ...statuses } = useGetResult()
|
||||
|
||||
const playRPS = useCallback(async (value: string) => {
|
||||
console.log(config.rps.contractAddress)
|
||||
const resp = await wcSdk.invokeFunction({
|
||||
invocations: [{
|
||||
scriptHash: config.rps.contractAddress,
|
||||
operation: 'playRPS',
|
||||
args: [
|
||||
{ type: 'String', value: value },
|
||||
{ type: 'Integer', value: '40' },
|
||||
]
|
||||
}],
|
||||
signers: [{
|
||||
scopes: 'Global',
|
||||
}]
|
||||
})
|
||||
console.log(resp)
|
||||
await getResult(resp, 'rouletteNumber')
|
||||
}, [wcSdk, getResult])
|
||||
|
||||
return {
|
||||
playRPS,
|
||||
...statuses
|
||||
}
|
||||
}
|
|
@ -1,34 +1,20 @@
|
|||
import {useWalletConnect} from "@cityofzion/wallet-connect-sdk-react";
|
||||
import {useCallback} from "react";
|
||||
import {useGetResult} from "../utils/useGetResult.ts";
|
||||
import {useStatusState} from "../../../hooks/useStatusState.ts";
|
||||
import {config} from "../config/config.ts";
|
||||
|
||||
export const useSlotMachine = () => {
|
||||
const wcSdk = useWalletConnect()
|
||||
const { getResult } = useGetResult()
|
||||
const { statuses, wrapPromise } = useStatusState()
|
||||
const { getResult, ...statuses } = useGetResult()
|
||||
|
||||
const playSlotMachine = useCallback(wrapPromise(async () => {
|
||||
// const resp = await wcSdk.invokeFunction({
|
||||
// invocations: [{
|
||||
// scriptHash: '270c825a5ac041e18be45074bbb942255164a214',
|
||||
// operation: 'balanceOf',
|
||||
// args: [
|
||||
// { type: 'Hash160', value: 'NQCLAHuu4umnR99KB5m7U8ppJFtWqhw6DS' },
|
||||
// ]
|
||||
// }],
|
||||
// signers: [{
|
||||
// scopes: 'Global',
|
||||
// }]
|
||||
// })
|
||||
const playSlot = useCallback(async () => {
|
||||
console.log(config.slotMachine.contractAddress)
|
||||
const resp = await wcSdk.invokeFunction({
|
||||
invocations: [{
|
||||
scriptHash: config.slotMachine.contractAddress,
|
||||
operation: 'playRoulette',
|
||||
operation: 'rollSlot',
|
||||
args: [
|
||||
{ type: 'Integer', value: '40' },
|
||||
{ type: 'Integer', value: '3' },
|
||||
]
|
||||
}],
|
||||
signers: [{
|
||||
|
@ -36,12 +22,11 @@ export const useSlotMachine = () => {
|
|||
}]
|
||||
})
|
||||
console.log(resp)
|
||||
const result = await getResult(resp)
|
||||
console.log(result)
|
||||
}), [wcSdk, getResult, wrapPromise])
|
||||
await getResult(resp, 'rouletteNumber')
|
||||
}, [wcSdk, getResult])
|
||||
|
||||
return {
|
||||
playSlotMachine,
|
||||
playSlot,
|
||||
...statuses
|
||||
}
|
||||
}
|
|
@ -1,14 +1,17 @@
|
|||
export const config = {
|
||||
craps: {
|
||||
contractAddress: 'b068a57e65eb0cb13ab5409b70c1d43ccee7d1f5'
|
||||
contractAddress: '490e3778e5247eccea7ff960e7253047b4c72545'
|
||||
},
|
||||
roulette: {
|
||||
contractAddress: '9a8e8297364f134f29bafe1322323af73e5ab434'
|
||||
},
|
||||
slotMachine: {
|
||||
contractAddress: '13f7312810758d0e2271e2c620ba93f3568e0e8c'
|
||||
contractAddress: '21ab5b0e8979723de78dbdb4177aeb10a8ebef16'
|
||||
},
|
||||
zaCoin: {
|
||||
contractAddress: 'fdfb5c2974779e9cb9347e083a80054feae55a2d'
|
||||
},
|
||||
rps: {
|
||||
contractAddress: 'ae71ad7c8174530cddecf483e8094539f84fcd7f'
|
||||
}
|
||||
}
|
BIN
frontend/casino/src/assets/LoadingScreen.gif
Normal file
BIN
frontend/casino/src/assets/LoadingScreen.gif
Normal file
Binary file not shown.
After Width: | Height: | Size: 5.6 MiB |
|
@ -0,0 +1,10 @@
|
|||
// vite.config.ts
|
||||
import { defineConfig } from "file:///Users/lewinup/Documents/Frontend/web3-casino/frontend/casino/node_modules/vite/dist/node/index.js";
|
||||
import react from "file:///Users/lewinup/Documents/Frontend/web3-casino/frontend/casino/node_modules/@vitejs/plugin-react/dist/index.mjs";
|
||||
var vite_config_default = defineConfig({
|
||||
plugins: [react()]
|
||||
});
|
||||
export {
|
||||
vite_config_default as default
|
||||
};
|
||||
//# sourceMappingURL=data:application/json;base64,ewogICJ2ZXJzaW9uIjogMywKICAic291cmNlcyI6IFsidml0ZS5jb25maWcudHMiXSwKICAic291cmNlc0NvbnRlbnQiOiBbImNvbnN0IF9fdml0ZV9pbmplY3RlZF9vcmlnaW5hbF9kaXJuYW1lID0gXCIvVXNlcnMvbGV3aW51cC9Eb2N1bWVudHMvRnJvbnRlbmQvd2ViMy1jYXNpbm8vZnJvbnRlbmQvY2FzaW5vXCI7Y29uc3QgX192aXRlX2luamVjdGVkX29yaWdpbmFsX2ZpbGVuYW1lID0gXCIvVXNlcnMvbGV3aW51cC9Eb2N1bWVudHMvRnJvbnRlbmQvd2ViMy1jYXNpbm8vZnJvbnRlbmQvY2FzaW5vL3ZpdGUuY29uZmlnLnRzXCI7Y29uc3QgX192aXRlX2luamVjdGVkX29yaWdpbmFsX2ltcG9ydF9tZXRhX3VybCA9IFwiZmlsZTovLy9Vc2Vycy9sZXdpbnVwL0RvY3VtZW50cy9Gcm9udGVuZC93ZWIzLWNhc2luby9mcm9udGVuZC9jYXNpbm8vdml0ZS5jb25maWcudHNcIjtpbXBvcnQgeyBkZWZpbmVDb25maWcgfSBmcm9tICd2aXRlJ1xuaW1wb3J0IHJlYWN0IGZyb20gJ0B2aXRlanMvcGx1Z2luLXJlYWN0J1xuXG4vLyBodHRwczovL3ZpdGVqcy5kZXYvY29uZmlnL1xuZXhwb3J0IGRlZmF1bHQgZGVmaW5lQ29uZmlnKHtcbiAgcGx1Z2luczogW3JlYWN0KCldLFxufSlcbiJdLAogICJtYXBwaW5ncyI6ICI7QUFBeVcsU0FBUyxvQkFBb0I7QUFDdFksT0FBTyxXQUFXO0FBR2xCLElBQU8sc0JBQVEsYUFBYTtBQUFBLEVBQzFCLFNBQVMsQ0FBQyxNQUFNLENBQUM7QUFDbkIsQ0FBQzsiLAogICJuYW1lcyI6IFtdCn0K
|
Loading…
Reference in a new issue