Skip to content
This repository has been archived by the owner on Nov 8, 2024. It is now read-only.

Commit

Permalink
Merge pull request #7 from XcavateBlockchain/connect-game-functions
Browse files Browse the repository at this point in the history
Connect game functions
  • Loading branch information
izaakwalz authored Jul 6, 2024
2 parents 44409c0 + 50564a5 commit a6712b9
Show file tree
Hide file tree
Showing 12 changed files with 326 additions and 100 deletions.
3 changes: 3 additions & 0 deletions .gitignore
Original file line number Diff line number Diff line change
Expand Up @@ -27,10 +27,13 @@ yarn-error.log*

# local env files
.env*.local
.env

# vercel
.vercel

# typescript
*.tsbuildinfo
next-env.d.ts

account.json
6 changes: 5 additions & 1 deletion next.config.mjs
Original file line number Diff line number Diff line change
@@ -1,4 +1,8 @@
/** @type {import('next').NextConfig} */
const nextConfig = {};
const nextConfig = {
eslint: {
ignoreDuringBuilds: true
}
};

export default nextConfig;
1 change: 1 addition & 0 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,7 @@
"@polkadot/api": "^11.3.1",
"@polkadot/extension-dapp": "^0.47.6",
"@polkadot/extension-inject": "^0.47.6",
"@polkadot/keyring": "^12.6.2",
"@radix-ui/react-alert-dialog": "^1.1.1",
"@radix-ui/react-dialog": "^1.1.1",
"@radix-ui/react-slot": "^1.1.0",
Expand Down
3 changes: 3 additions & 0 deletions pnpm-lock.yaml

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

43 changes: 32 additions & 11 deletions src/app/(dashboard)/home/_components/live-game-container.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -27,19 +27,30 @@ type GameType = 0 | 1;

export default function LiveGamePlay({ type }: { type: GameType }) {
const [openGameSheet, setOpenGameSheet] = useState<boolean>(false);

const [propertyDisplay, setPropertyDisplay] = useState(null);
const [display, setDisplay] = useState<'start' | 'play' | 'success' | 'fail'>('start');

function closeGameSheet() {
setOpenGameSheet(false);
}

const game: IGamePlaySection = {
start: <StartGame type={type} setDisplay={setDisplay} close={closeGameSheet} />,
start: (
<StartGame
type={type}
setDisplay={setDisplay}
close={closeGameSheet}
setPropertyDisplay={setPropertyDisplay}
/>
),
play: <GameMode setDisplay={setDisplay} close={closeGameSheet} />,
success: <GuessPass close={closeGameSheet} />,
fail: <GuessFail close={closeGameSheet} />
};

console.log(propertyDisplay);

return (
<Sheet open={openGameSheet} onOpenChange={setOpenGameSheet}>
<SheetTrigger asChild>
Expand Down Expand Up @@ -67,24 +78,34 @@ export default function LiveGamePlay({ type }: { type: GameType }) {
interface GameProps {
type: GameType;
setDisplay: Dispatch<SetStateAction<'start' | 'play' | 'success' | 'fail'>>;
setPropertyDisplay: Dispatch<SetStateAction<any>>;
close: () => void;
}

function StartGame({ type, close, setDisplay }: GameProps) {
function StartGame({ type, close, setDisplay, setPropertyDisplay }: GameProps) {
const { address } = useSubstrateContext();
const [isPending, startTransition] = useTransition();

function onPlay() {
startTransition(async () => {
await playGame(type, address);
setDisplay('play');
});
const [isLoading, setIsLoading] = useState(false);

// const [isPending, startTransition] = useTransition();

async function onPlay() {
try {
setIsLoading(true);
await playGame(type, address, data => {
setPropertyDisplay(data);
setDisplay('play');
});
setIsLoading(false);
} catch (error) {
console.log(error);
setIsLoading(false);
}
}

return (
<div className="space-y-[44px]">
<div className="flex items-center justify-between">
<Button variant={'text'} onClick={close} className="p-0" disabled={isPending}>
<Button variant={'text'} onClick={close} className="p-0" disabled={isLoading}>
<Icons.CaretLeft className="size-6" />
Return
</Button>
Expand All @@ -97,7 +118,7 @@ function StartGame({ type, close, setDisplay }: GameProps) {
<Button
className="size-[250px] rounded-full p-10 font-heading text-[2.84569rem] font-bold shadow-game"
onClick={onPlay}
disabled={isPending}
disabled={isLoading}
>
Start <br /> Game
</Button>
Expand Down
18 changes: 9 additions & 9 deletions src/app/(dashboard)/profile/page.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -124,7 +124,7 @@ export default function Page({
<div className="flex justify-between">
<div className="flex gap-2">
<img
className="h-24 w-24 rounded-full"
className="size-24 rounded-full"
src="/images/profile.jpeg"
alt="Rounded avatar"
style={{ boxShadow: '0px 0px 24px 0px #ECB278', border: '4px solid #DAB436' }}
Expand All @@ -145,7 +145,7 @@ export default function Page({
</span>
</div>
</div>
<Card className="mt-10 w-[100%] gap-2" title="Gallery">
<Card className="mt-10 w-full gap-2" title="Gallery">
<div className="mt-3 flex gap-3">
<CircleCard color="#ECB278" />
<CircleCard color="#57A0C5" />
Expand All @@ -160,30 +160,30 @@ export default function Page({
<Link href="/" className=" inline-block p-2 py-3 font-normal text-[#FFFFFF] ">
Nfts
</Link>
<span className=" mx-0 inline-flex h-5 w-5 items-center justify-center rounded-md bg-[#DC7DA6] text-[10px] font-normal text-[#FFFFFF]">
<span className=" mx-0 inline-flex size-5 items-center justify-center rounded-md bg-[#DC7DA6] text-[10px] font-normal text-[#FFFFFF]">
23
</span>
</li>
<li>
<Link href="/" className="inline-block p-2 py-3 font-normal text-[#FFFFFF]">
Listed
</Link>
<span className=" mx-0 inline-flex h-5 w-5 items-center justify-center rounded-md bg-[#DC7DA6] text-[10px] font-normal text-[#FFFFFF]">
<span className=" mx-0 inline-flex size-5 items-center justify-center rounded-md bg-[#DC7DA6] text-[10px] font-normal text-[#FFFFFF]">
0
</span>
</li>
<li>
<Link href="/" className="inline-block p-2 py-3 font-normal text-[#FFFFFF]">
Offers
</Link>
<span className=" mx-0 inline-flex h-5 w-5 items-center justify-center rounded-md bg-[#DC7DA6] text-[10px] font-normal text-[#FFFFFF]">
<span className=" mx-0 inline-flex size-5 items-center justify-center rounded-md bg-[#DC7DA6] text-[10px] font-normal text-[#FFFFFF]">
4
</span>
</li>
<li className="">
<Link href="/" className="inline-block p-2 py-3 font-normal text-[#FFFFFF]">
Challenges{' '}
<span className=" mx-0 inline-flex h-5 w-5 items-center justify-center rounded-md bg-[#DC7DA6] text-[10px] font-normal text-[#FFFFFF]">
<span className=" mx-0 inline-flex size-5 items-center justify-center rounded-md bg-[#DC7DA6] text-[10px] font-normal text-[#FFFFFF]">
20
</span>
</Link>
Expand All @@ -198,18 +198,18 @@ export default function Page({
key={collection}
variant={'outline'}
size={'sm'}
href={`${BASE_URL}?collection=${collection}`}
className={
active ? 'border-primary-300 bg-primary-300/15 text-primary-300' : ''
}
asChild
>
{collection}
<Link href={`${BASE_URL}?collection=${collection}`}>{collection}</Link>
</Button>
);
})}
</div>
<section className="flex w-full flex-col gap-8">
<div className="grid h-full w-full grid-cols-4 gap-[23px]">
<div className="grid size-full grid-cols-4 gap-[23px]">
{siteConfig.nfts.map((nft: any) => (
<ProfileNFTCard
key={nft.nftId}
Expand Down
47 changes: 36 additions & 11 deletions src/app/(dashboard)/test/page.tsx
Original file line number Diff line number Diff line change
@@ -1,38 +1,63 @@
'use client';

import { useState } from 'react';
import { processImages } from '../../actions';
// import { processImages } from '../../actions';
import { checkResult } from '../../actions';
import { playGame } from '@/lib/extrinsic';

export default function HomePage() {
const [imageSrcs, setImageSrcs] = useState<string[]>([]);
const [loading, setLoading] = useState(false);
const [error, setError] = useState('');
const [propertyDisplay, setPropertyDisplay] = useState(null);

const handleGetImages = async () => {
setLoading(true);
setError('');
// const handleGetImages = async () => {
// setLoading(true);
// setError('');
// try {
// // const images = await processImages();
// await checkResult();
// // setImageSrcs(images);
// } catch (error) {
// console.log(error);
// setError('Failed to fetch images');
// } finally {
// setLoading(false);
// }
// };

const handlePlayGame = async () => {
console.log('Button clicked');
try {
const images = await processImages();
setImageSrcs(images);
await playGame(0, '5FEda1GYvjMYcBiuRE7rb85QbD5bQNHuZajhRvHYTxm4PPz5', data => {
setPropertyDisplay(data);
});
} catch (error) {
setError('Failed to fetch images');
} finally {
setLoading(false);
console.log('error: ', error);
}
};

return (
<div>
<h1>Home Page</h1>
<button onClick={handleGetImages} disabled={loading}>
{/* <button onClick={handleGetImages} disabled={loading}>
{loading ? 'Processing...' : 'Get Processed Images'}
</button>
</button> */}
{error && <p>{error}</p>}
<div>
{imageSrcs.map((src, index) => (
<img key={index} src={src} alt={`Processed Image ${index + 1}`} />
))}
</div>

<button onClick={handlePlayGame}>TEST BUTTON</button>
{propertyDisplay && (
<div>
<h3>Game Details:</h3>
<p>{propertyDisplay}</p>{' '}
{/* Adjust this to display actual data from propertyDisplay */}
</div>
)}
</div>
);
}
Loading

0 comments on commit a6712b9

Please sign in to comment.