Merge pull request #9 from XcavateBlockchain/connect-game-functions

Connect game functions

src/app/(dashboard)/home/_components/game-mode.tsx

@@ -29,13 +29,15 @@ import { useSubstrateContext } from '@/context/polkadot-contex';
 import { getNextGameID } from '@/lib/queries';
 import { submitGameAnswer } from '@/lib/extrinsic';
 import Form, { useZodForm } from '@/components/ui/form';
+import { GameData } from '@/types';
 
 interface GameProps {
+  data: GameData;
   setDisplay: Dispatch<SetStateAction<'start' | 'play' | 'success' | 'fail'>>;
   close: () => void;
 }
 
-export default function GameMode({ setDisplay, close }: GameProps) {
+export default function GameMode({ data, setDisplay, close }: GameProps) {
   // const [isPending, startTransition] = useTransition();
   const [isLoading, setIsLoading] = useState(false);
   const [gameId, setGameID] = useState<any>();
@@ -109,8 +111,9 @@ export default function GameMode({ setDisplay, close }: GameProps) {
               {Array.from({ length: 5 }).map((_, index) => (
                 <SliderMainItem key={index} className="bg-transparent">
                   <Image
-                    src={'/images/Xleafgreen_property_NFT5_apartment.webp'}
-                    alt=""
+                    src={data.cover_image}
+                    // src={'/images/Xleafgreen_property_NFT5_apartment.webp'}
+                    alt={data.type}
                     width={583}
                     height={474}
                     priority
@@ -120,52 +123,52 @@ export default function GameMode({ setDisplay, close }: GameProps) {
               ))}
             </CarouselMainContainer>
             <CarouselThumbsContainer>
-              {Array.from({ length: 5 }).map((_, index) => (
+              {data.images.map((image, index) => (
                 <SliderThumbItem
                   key={index}
                   index={index}
                   className="size-[130px] bg-transparent"
                 >
                   <Image
-                    src={'/images/Xleafgreen_property_NFT5_apartment.webp'}
-                    alt=""
+                    src={image}
+                    alt={data.type}
                     width={130}
                     height={130}
                     className="size-full"
                     priority
                   />
                 </SliderThumbItem>
               ))}
-              <Image
+              {/* {Array.from({ length: 5 }).map((_, index) => ( */}
+
+              {/* ))} */}
+              {/* <Image
                 src={'/images/Xleafgreen_property_NFT5_apartment.webp'}
                 alt=""
                 width={130}
                 height={130}
                 priority
-              />
+              /> */}
             </CarouselThumbsContainer>
           </Carousel>
         </div>
         {/* data */}
         <div className="flex w-full max-w-[439px] flex-col gap-6 px-4">
           <div className="space-y-[18px]">
             <h1 className="text-[0.875rem] font-medium">Property 1</h1>
-            <DescriptionList title="Type" description="Apartment" />
+            <DescriptionList title="Type" description={data.type} />
             <p>One bed luxury apartment,</p>
             <div className="flex w-full items-center">
-              <DescriptionList title="Bedrooms" description="1" />
-              <DescriptionList title="Bathrooms" description="1" />
+              <DescriptionList title="Bedrooms" description={data.bedrooms} />
+              <DescriptionList title="Bathrooms" description={data.bathrooms} />
             </div>
-            <DescriptionList title="Size" description="552 sqft / 51 sqm" />
-            <DescriptionList title="Town/city" description="Hertford" />
-            <DescriptionList title="Post code" description="SG235TH" />
+            <DescriptionList title="Size" description={data.size} />
+            {/* <DescriptionList title="Town/city" description="Hertford" />
+            <DescriptionList title="Post code" description="SG235TH" /> */}
           </div>
           <div className="space-y-[18px]">
-            <h1 className="text-[0.875rem] font-medium">Key features</h1>
-            <p>
-              Private balcony. Communal roof terrace. Residents concierge service. Close
-              proximity to green spaces. 999 year lease with peppercorn ground rent
-            </p>
+            <h1 className="text-[0.875rem] font-medium">Summary</h1>
+            <p>{data.summary}</p>
           </div>
           <div className="space-y-5">
             <form onSubmit={onSubmit} className="flex w-full flex-col items-start gap-6">
@@ -196,7 +199,7 @@ export default function GameMode({ setDisplay, close }: GameProps) {
 
 interface DescriptionProps extends React.HTMLAttributes<HTMLDivElement> {
   title: string;
-  description?: string;
+  description?: any;
 }
 
 const DescriptionList = ({ className, title, description }: DescriptionProps) => {

src/app/(dashboard)/home/_components/live-game-container.tsx

@@ -28,7 +28,7 @@ type GameType = 0 | 1;
 export default function LiveGamePlay({ type }: { type: GameType }) {
   const [openGameSheet, setOpenGameSheet] = useState<boolean>(false);
 
-  const [propertyDisplay, setPropertyDisplay] = useState(null);
+  const [propertyDisplay, setPropertyDisplay] = useState<any>();
   const [display, setDisplay] = useState<'start' | 'play' | 'success' | 'fail'>('start');
 
   function closeGameSheet() {
@@ -44,7 +44,7 @@ export default function LiveGamePlay({ type }: { type: GameType }) {
         setPropertyDisplay={setPropertyDisplay}
       />
     ),
-    play: <GameMode setDisplay={setDisplay} close={closeGameSheet} />,
+    play: <GameMode data={propertyDisplay} setDisplay={setDisplay} close={closeGameSheet} />,
     success: <GuessPass close={closeGameSheet} />,
     fail: <GuessFail close={closeGameSheet} />
   };
@@ -91,10 +91,11 @@ function StartGame({ type, close, setDisplay, setPropertyDisplay }: GameProps) {
   async function onPlay() {
     try {
       setIsLoading(true);
-      await playGame(type, address, data => {
-        setPropertyDisplay(data);
+      await playGame(type, address, async data => {
+        setPropertyDisplay(await data);
         setDisplay('play');
       });
+
       setIsLoading(false);
     } catch (error) {
       console.log(error);

src/app/(dashboard)/home/_components/success-failure.tsx

@@ -13,7 +13,7 @@ export function GuessPass({ close }: GameProps) {
         <span className="text-primary-400">1500</span>
       </div>
 
-      <div className="inline-flex w-[512px] flex-col items-center justify-center gap-6 rounded-lg bg-[#172234] px-6 pb-10 pt-6 backdrop-blur-[8px]">
+      <div className="inline-flex w-[512px] flex-col items-center justify-center gap-6 rounded-lg bg-[#172234] px-6 pb-10 pt-6 backdrop-blur">
         <div className="h-[320px] w-[239px] rounded-[10px] bg-white/[0.20]">
           <Image
             src={'/images/Xpurple_property_NFT12_apartment.webp'}
@@ -44,7 +44,7 @@ export function GuessFail({ close }: GameProps) {
         <span className="text-primary-400">1500</span>
       </div>
 
-      <div className="inline-flex w-[512px] flex-col items-center justify-center gap-6 rounded-lg bg-[#172234] px-6 pb-10 pt-6 backdrop-blur-[8px]">
+      <div className="inline-flex w-[512px] flex-col items-center justify-center gap-6 rounded-lg bg-[#172234] px-6 pb-10 pt-6 backdrop-blur">
         <div className="h-[320px] w-[239px] rounded-[10px] bg-white/[0.20]"></div>
 
         <div className="flex w-full max-w-[307px] flex-col items-center justify-center gap-2 text-center">

src/app/(dashboard)/home/page.tsx

@@ -14,6 +14,7 @@ import { getLeadBoards, getUserData } from '@/lib/queries';
 import ProfileHeader from './_components/profile-header';
 import { useSubstrateContext } from '@/context/polkadot-contex';
 import { useCallback, useEffect, useState } from 'react';
+import { fetchPropertyData } from '@/app/actions';
 
 // type Player = {
 //   Player: 1;
@@ -32,6 +33,8 @@ export default function App() {
 
   async function fetchData(address: string) {
     const boardList = await getLeadBoards();
+    // const property = await fetchPropertyData(139361966)
+    // console.log(property)
     const userData = await getUserData(address);
 
     if (userData !== null && boardList !== null) {

src/app/(dashboard)/leaderboard/page.tsx

@@ -11,7 +11,7 @@ type LeaderProps = {
   winner?: boolean;
 };
 
-export function LeaderBoardCard({ points, winner }: LeaderProps) {
+function LeaderBoardCard({ points, winner }: LeaderProps) {
   return (
     <div className={cn('flex w-full items-center justify-between rounded-lg p-2')}>
       <div className="flex items-center gap-6">
@@ -21,7 +21,7 @@ export function LeaderBoardCard({ points, winner }: LeaderProps) {
           <span className="text-[0.875rem] text-primary-foreground">01</span>
         )}
         <div className="flex items-center gap-2">
-          <img className="h-6 w-6 rounded-full" src="/images/user.png" alt="Rounded avatar" />
+          <img className="size-6 rounded-full" src="/images/user.png" alt="Rounded avatar" />
           <span className="text-[0.875rem] text-primary-foreground">Victor X</span>
         </div>
       </div>
@@ -30,7 +30,8 @@ export function LeaderBoardCard({ points, winner }: LeaderProps) {
     </div>
   );
 }
-async function ChampionCard() {
+
+function ChampionCard() {
   return (
     <>
       <div className="flex justify-between">
@@ -51,14 +52,18 @@ async function ChampionCard() {
     </>
   );
 }
-export default async function Page() {
+
+export default function Page() {
   return (
     <Shell>
       <div className="flex justify-between">
         <div className="flex items-center gap-2">
-          <img
-            className="h-10 w-10 rounded-full"
+          <Image
+            className="size-10 rounded-full"
             src="/images/user.png"
+            width={40}
+            height={40}
+            priority
             alt="Rounded avatar"
           />
           <p className=" ml-3">Deal Real Dev</p>

src/app/(dashboard)/marketplace/page.tsx

@@ -4,6 +4,7 @@ import { Shell } from '@/components/shell';
 import { Button } from '@/components/ui/button';
 import { siteConfig } from '@/config/site';
 import Image from 'next/image';
+import Link from 'next/link';
 
 const collections = ['All', 'Blue', 'Red', 'Pink', 'Orange', 'Purple', 'Teal', 'Coral'];
 
@@ -20,7 +21,7 @@ export default function Page({
   return (
     <Shell>
       <Card title="Trending">
-        <div className="grid h-full w-full grid-cols-4 gap-[13px]">
+        <div className="grid size-full grid-cols-4 gap-[13px]">
           {data.map((nft: any) => (
             <NFTCard
               key={nft.nftId}
@@ -46,12 +47,12 @@ export default function Page({
                 key={collection}
                 variant={'outline'}
                 size={'sm'}
-                href={`/marketplace?collection=${collection}`}
                 className={
                   active ? 'border-primary-300 bg-primary-300/15 text-primary-300' : ''
                 }
+                asChild
               >
-                {collection}
+                <Link href={`/marketplace?collection=${collection}`}>{collection}</Link>
               </Button>
             );
           })}
@@ -61,7 +62,7 @@ export default function Page({
       <section className="flex w-full flex-col gap-8">
         <h2 className="text-[1rem] font-medium">Listings</h2>
 
-        <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) => (
             <NFTCard
               key={nft.nftId}

src/app/(dashboard)/tasks/page.tsx

@@ -13,7 +13,7 @@ export default function Tasks() {
   return (
     <Shell>
       <section className="flex justify-between">
-        <CardWithoutHeading className="w-[40%]">
+        <CardWithoutHeading className="w-2/5">
           <PlayerStats title="Guesses" value={10} />
           <PlayerStats title="Correct " value={6} />
           <PlayerStats title="Failed " value={0} />
@@ -85,7 +85,7 @@ export default function Tasks() {
 
 export const TaskCard = ({ type, title, description }: TaskCardProps) => {
   return (
-    <div className="flex flex-col items-start justify-start gap-4 rounded-lg bg-[#3E4F6D] px-6 py-10 backdrop-blur-[8px] backdrop-filter">
+    <div className="flex flex-col items-start justify-start gap-4 rounded-lg bg-[#3E4F6D] px-6 py-10 backdrop-blur">
       <dt className="flex items-start gap-2 ">
         <Icons.xLogo className="size-6" />{' '}
         <span className="font-heading text-[0.875rem]/[1.543m] font-medium">{title}</span>

src/app/(dashboard)/test/page.tsx

@@ -29,7 +29,7 @@ export default function HomePage() {
   const handlePlayGame = async () => {
     console.log('Button clicked');
     try {
-      await playGame(0, '5FEda1GYvjMYcBiuRE7rb85QbD5bQNHuZajhRvHYTxm4PPz5', data => {
+      await playGame(0, '5FEda1GYvjMYcBiuRE7rb85QbD5bQNHuZajhRvHYTxm4PPz5', async data => {
         setPropertyDisplay(data);
       });
     } catch (error) {

src/app/(page)/page.tsx

@@ -36,31 +36,31 @@ export default function Home() {
         </div>
         <div className="flex items-start gap-5">
           <div className="flex flex-col items-center gap-6">
-            <div className=" rounded-lg bg-primary-300/35 p-1 backdrop-blur backdrop-filter">
+            <div className=" rounded-lg bg-primary-300/35 p-1 backdrop-blur">
               <div className="bg-primary p-6">
                 <Image src={'/images/feature-img-1.png'} alt="" width={246} height={255} />
               </div>
             </div>
             <p className="text-[1rem]">win valuable NFTs</p>
           </div>
           <div className="flex flex-col items-center gap-6">
-            <div className=" rounded-lg bg-primary-300/35 p-1 backdrop-blur backdrop-filter">
+            <div className=" rounded-lg bg-primary-300/35 p-1 backdrop-blur">
               <div className="bg-primary p-6">
                 <Image src={'/images/feature-img-1.png'} alt="" width={246} height={255} />
               </div>
             </div>
             <p className="text-[1rem]">win valuable NFTs</p>
           </div>
           <div className="flex flex-col items-center gap-6">
-            <div className=" rounded-lg bg-primary-300/35 p-1 backdrop-blur backdrop-filter">
+            <div className=" rounded-lg bg-primary-300/35 p-1 backdrop-blur">
               <div className="bg-primary p-6">
                 <Image src={'/images/feature-img-1.png'} alt="" width={246} height={255} />
               </div>
             </div>
             <p className="text-[1rem]">win valuable NFTs</p>
           </div>
           <div className="flex flex-col items-center gap-6">
-            <div className=" rounded-lg bg-primary-300/35 p-1 backdrop-blur backdrop-filter">
+            <div className=" rounded-lg bg-primary-300/35 p-1 backdrop-blur">
               <div className="bg-primary p-6">
                 <Image src={'/images/feature-img-1.png'} alt="" width={246} height={255} />
               </div>

src/app/gameplay/_components/success.tsx

@@ -9,7 +9,7 @@ export function SuccessRedirect() {
       <h1 className="text-center">
         Points : <span className="text-[#ECB278]">{points}</span>
       </h1>
-      <div className="guess-card-bg mx-auto flex h-[80vh] w-[40%] flex-col items-center justify-center">
+      <div className="guess-card-bg mx-auto flex h-[80vh] w-2/5 flex-col items-center justify-center">
         <div className="border-3 h-[50%] w-1/2 overflow-hidden rounded-lg shadow-xl shadow-[#172234]">
           <Image src="/images/sucess-guess.png" alt="" width={603} height={603} />
         </div>
@@ -33,7 +33,7 @@ export function FailRedirect() {
         Points : <span className="text-[#ECB278]">{points}x</span>
       </h1>
 
-      <div className="guess-card-bg mx-auto flex h-[80vh] w-[40%] flex-col items-center justify-center">
+      <div className="guess-card-bg mx-auto flex h-[80vh] w-2/5 flex-col items-center justify-center">
         <div className="border-3 h-[50%] w-1/2 overflow-hidden rounded-lg border border-red-400 shadow-2xl shadow-red-500 drop-shadow-xl"></div>
         <h1 className="mt-12 text-xl font-bold">Sorry wrong guess</h1>
         <p className="mt-2 text-center">You have lost -10 points</p>

src/components/cards/card.tsx

@@ -9,7 +9,7 @@ export function Card({ className, title, description, children, ...props }: Card
   return (
     <section
       className={cn(
-        'flex w-full flex-col items-start gap-8 rounded-lg border border-[#3B4F74] bg-black/[0.20] px-4 py-6 shadow-header backdrop-blur-[8px] backdrop-filter',
+        'flex w-full flex-col items-start gap-8 rounded-lg border border-border bg-black/[0.20] px-4 py-6 shadow-header backdrop-blur',
         className
       )}
       {...props}
@@ -33,7 +33,7 @@ export function CardWithoutHeading({
   return (
     <section
       className={cn(
-        'flex w-full items-start gap-8 rounded-lg border border-[#3B4F74] bg-black/[0.20] px-4 py-6 shadow-header backdrop-blur-[8px] backdrop-filter',
+        'flex w-full items-start gap-8 rounded-lg border border-border bg-black/[0.20] px-4 py-6 shadow-header backdrop-blur',
         className
       )}
       {...props}

src/components/layouts/connect-wallet.tsx

@@ -200,7 +200,7 @@ export default function ConnectWallet({ open = false }: { open?: boolean }) {
   return (
     <AlertDialog open={isDialogOpen} onOpenChange={setIsDialogOpen}>
       <AlertDialogTrigger asChild>
-        <button className="flex max-w-[250px] items-center gap-2 overflow-hidden text-ellipsis whitespace-nowrap rounded-lg border border-primary-300 px-[45px] py-4 font-heading text-[1rem] font-medium text-primary-300 hover:border-white hover:text-white">
+        <button className="flex max-w-[250px] items-center gap-2 truncate rounded-lg border border-primary-300 px-[45px] py-4 font-heading text-[1rem] font-medium text-primary-300 hover:border-white hover:text-white">
           {selectedAccount ? (
             <span className="">{formatAddress(address)}</span>
           ) : (

src/components/layouts/site-header.tsx

@@ -6,7 +6,7 @@ import ConnectWallet from './connect-wallet';
 
 export function SiteHeader() {
   return (
-    <header className="w-full backdrop-blur-[8px]">
+    <header className="w-full backdrop-blur">
       <div className="container mx-auto flex w-full  max-w-screen-2xl items-center justify-between py-4 md:px-[100px]">
         <Link href={'/'}>
           <Image src={'/images/logo.svg'} alt="logo" width={183} height={72} priority />

src/components/shell.tsx

@@ -6,7 +6,7 @@ import { cn } from '@/lib/utils';
 const shellVariants = cva('grid items-center gap-10', {
   variants: {
     variant: {
-      default: 'container max-w-screen-[1440px] mx-auto p-[47px] grid gap-8'
+      default: 'max-w-screen-[1440px] container mx-auto grid gap-8 p-[47px]'
     }
   },
   defaultVariants: {

src/components/ui/alert-dialog.tsx

@@ -18,7 +18,7 @@ const AlertDialogOverlay = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <AlertDialogPrimitive.Overlay
     className={cn(
-      'fixed inset-0 z-50 bg-primary/50  backdrop-blur-[4px] backdrop-filter data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',
+      'fixed inset-0 z-50 bg-primary/50  backdrop-blur-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',
       className
     )}
     {...props}