Add support for tournament winner (#274)

- add art assets
- add extra pay button
- hide dead adventurers by default

ui/.env

@@ -1 +1,2 @@
-NEXT_PUBLIC_NETWORK="mainnet"
+NEXT_PUBLIC_NETWORK="mainnet"
+NEXT_PUBLIC_TOURNAMENT_ENDED="false"

ui/src/app/components/notifications/SpecialBeast.tsx

@@ -1,13 +1,13 @@
-import { useState, useEffect } from "react";
 import { fetchBeastImage } from "@/app/api/fetchMetadata";
-import Image from "next/image";
-import useUIStore from "@/app/hooks/useUIStore";
-import { Contract } from "starknet";
-import { processBeastName } from "@/app/lib/utils";
+import { Button } from "@/app/components/buttons/Button";
 import TwitterShareButton from "@/app/components/buttons/TwitterShareButtons";
 import useAdventurerStore from "@/app/hooks/useAdventurerStore";
-import { Button } from "@/app/components/buttons/Button";
+import useUIStore from "@/app/hooks/useUIStore";
 import { networkConfig } from "@/app/lib/networkConfig";
+import { processBeastName } from "@/app/lib/utils";
+import Image from "next/image";
+import { useEffect, useState } from "react";
+import { Contract } from "starknet";
 
 interface SpecialBeastProps {
   beastsContract: Contract;
@@ -52,7 +52,8 @@ export const SpecialBeast = ({ beastsContract }: SpecialBeastProps) => {
   const beastUrl =
     (networkConfig[network!].beastsViewer ?? "") +
     "/" +
-    specialBeast?.tokenId?.toString();
+    specialBeast?.tokenId?.toString() +
+    "?beast_origin=client";
 
   return (
     <div className="top-0 left-0 fixed text-center h-full w-full z-40">

ui/src/app/components/start/AdventurersList.tsx

@@ -1,32 +1,32 @@
-import { useState, useEffect, useRef, useCallback, useMemo } from "react";
-import {
-  Contract,
-  AccountInterface,
-  validateAndParseAddress,
-  constants,
-} from "starknet";
-import { StarknetIdNavigator } from "starknetid.js";
-import { useProvider } from "@starknet-react/core";
 import { Button } from "@/app/components/buttons/Button";
-import useAdventurerStore from "@/app/hooks/useAdventurerStore";
 import {
+  CartridgeIcon,
+  ClockIcon,
   CoinIcon,
   HeartIcon,
   SkullIcon,
-  ClockIcon,
-  CartridgeIcon,
   StarknetIdIcon,
 } from "@/app/components/icons/Icons";
-import useUIStore from "@/app/hooks/useUIStore";
-import { useQueriesStore } from "@/app/hooks/useQueryStore";
 import LootIconLoader from "@/app/components/icons/Loader";
-import useCustomQuery from "@/app/hooks/useCustomQuery";
+import { AdventurerListCard } from "@/app/components/start/AdventurerListCard";
 import { getAdventurersByOwner } from "@/app/hooks/graphql/queries";
+import useAdventurerStore from "@/app/hooks/useAdventurerStore";
+import useCustomQuery from "@/app/hooks/useCustomQuery";
 import useNetworkAccount from "@/app/hooks/useNetworkAccount";
-import { indexAddress, padAddress, calculateLevel } from "@/app/lib/utils";
-import { Adventurer } from "@/app/types";
-import { AdventurerListCard } from "@/app/components/start/AdventurerListCard";
+import { useQueriesStore } from "@/app/hooks/useQueryStore";
 import useTransactionCartStore from "@/app/hooks/useTransactionCartStore";
+import useUIStore from "@/app/hooks/useUIStore";
+import { calculateLevel, indexAddress, padAddress } from "@/app/lib/utils";
+import { Adventurer } from "@/app/types";
+import { useProvider } from "@starknet-react/core";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import {
+  AccountInterface,
+  constants,
+  Contract,
+  validateAndParseAddress,
+} from "starknet";
+import { StarknetIdNavigator } from "starknetid.js";
 
 export interface AdventurerListProps {
   isActive: boolean;
@@ -58,7 +58,7 @@ export const AdventurersList = ({
     constants.StarknetChainId.SN_MAIN
   );
   const [selectedIndex, setSelectedIndex] = useState(-1);
-  const [showZeroHealth, setShowZeroHealth] = useState(true);
+  const [showZeroHealth, setShowZeroHealth] = useState(false);
   const [isTransferOpen, setIsTransferOpen] = useState(false);
   const [adventurerForTransfer, setAdventurerForTransfer] =
     useState<Adventurer | null>(null);

ui/src/app/components/start/CreateAdventurer.tsx

@@ -1,16 +1,17 @@
-import React, { useState, useEffect, useCallback } from "react";
-import { Contract } from "starknet";
-import { FormData } from "@/app/types";
 import { AdventurerName } from "@/app/components/start/AdventurerName";
-import { WeaponSelect } from "@/app/components/start/WeaponSelect";
 import { Spawn } from "@/app/components/start/Spawn";
+import { WeaponSelect } from "@/app/components/start/WeaponSelect";
+import { FormData } from "@/app/types";
+import React, { useCallback, useEffect, useState } from "react";
+import { Contract } from "starknet";
 
 export interface CreateAdventurerProps {
   isActive: boolean;
   onEscape: () => void;
   spawn: (...args: any[]) => any;
   lordsBalance?: bigint;
   goldenTokenData: any;
+  blobertsData: any;
   gameContract: Contract;
   getBalances: () => Promise<void>;
   mintLords: (lordsAmount: number) => Promise<void>;
@@ -23,6 +24,7 @@ export const CreateAdventurer = ({
   spawn,
   lordsBalance,
   goldenTokenData,
+  blobertsData,
   gameContract,
   getBalances,
   mintLords,
@@ -119,6 +121,7 @@ export const CreateAdventurer = ({
               handleBack={handleBack}
               lordsBalance={lordsBalance}
               goldenTokenData={goldenTokenData}
+              blobertsData={blobertsData}
               gameContract={gameContract}
               getBalances={getBalances}
               mintLords={mintLords}
@@ -144,6 +147,7 @@ export const CreateAdventurer = ({
             handleBack={handleBack}
             lordsBalance={lordsBalance}
             goldenTokenData={goldenTokenData}
+            blobertsData={blobertsData}
             gameContract={gameContract}
             getBalances={getBalances}
             mintLords={mintLords}

ui/src/app/components/start/Spawn.tsx

@@ -25,12 +25,14 @@ export interface SpawnProps {
   spawn: (
     formData: FormData,
     goldenTokenId: string,
+    blobertTokenId: string,
     revenueAddresses: string[],
     costToPlay?: number
   ) => Promise<void>;
   handleBack: () => void;
   lordsBalance?: bigint;
   goldenTokenData: any;
+  blobertsData: any;
   gameContract: Contract;
   getBalances: () => Promise<void>;
   mintLords: (lordsAmount: number) => Promise<void>;
@@ -43,14 +45,16 @@ export const Spawn = ({
   handleBack,
   lordsBalance,
   goldenTokenData,
+  blobertsData,
   gameContract,
   getBalances,
   mintLords,
   costToPlay,
 }: SpawnProps) => {
   const [paymentInitiated, setPaymentInitiated] = useState(false);
   const [formFilled, setFormFilled] = useState(false);
-  const [usableToken, setUsableToken] = useState<string>("0");
+  const [usableGoldenToken, setUsableGoldenToken] = useState<string>("0");
+  const [usableBlobertToken, setUsableBlobertToken] = useState<string>("0");
   const [isHoveringLords, setIsHoveringLords] = useState(false);
   const [showPaymentDetails, setShowPaymentDetails] = useState(false);
   const isWrongNetwork = useUIStore((state) => state.isWrongNetwork);
@@ -76,6 +80,7 @@ export const Spawn = ({
     await spawn(
       formData,
       "0",
+      "0",
       networkConfig[network!].revenueAddresses,
       lordsGameCost
     );
@@ -84,8 +89,8 @@ export const Spawn = ({
     }
   };
 
-  const tokens = goldenTokenData?.getERC721Tokens;
-  const goldenTokens: number[] = tokens?.map(
+  const goldenTokens = goldenTokenData?.getERC721Tokens;
+  const goldenTokenIds: number[] = goldenTokens?.map(
     (token: GameToken) => token.token_id
   );
 
@@ -97,7 +102,26 @@ export const Spawn = ({
         CallData.compile(["0", tokenId.toString()])
       );
       if (canPlay) {
-        setUsableToken(tokenId.toString());
+        setUsableGoldenToken(tokenId.toString());
+        break;
+      }
+    }
+  };
+
+  const blobertTokens = blobertsData?.tokens;
+  const blobertTokenIds: number[] = blobertTokens?.map(
+    (token: any) => token.tokenId
+  );
+
+  const getUsableBlobertToken = async (tokenIds: number[]) => {
+    // Loop through contract calls to see if the token is usable, if none then return 0
+    for (let tokenId of tokenIds) {
+      const canPlay = await gameContract.call(
+        "free_game_available",
+        CallData.compile(["1", tokenId.toString()])
+      );
+      if (canPlay) {
+        setUsableBlobertToken(tokenId.toString());
         break;
       }
     }
@@ -106,19 +130,25 @@ export const Spawn = ({
   const { play: spawnPlay } = useUiSounds(soundSelector.spawn);
   const { play: coinPlay } = useUiSounds(soundSelector.coin);
 
+  const tournamentEnded = process.env.NEXT_PUBLIC_TOURNAMENT_ENDED === "true";
+
   useEffect(() => {
-    getUsableGoldenToken(goldenTokens ?? []);
+    getUsableGoldenToken(goldenTokenIds ?? []);
+    if (tournamentEnded) {
+      getUsableBlobertToken(blobertTokenIds ?? []);
+    }
   }, []);
 
-  const handlePayment = async (goldenToken: boolean) => {
+  const handlePayment = async (goldenToken: boolean, blobertToken: boolean) => {
     spawnPlay();
     coinPlay();
     resetNotification();
     setPaymentInitiated(true);
     try {
       await spawn(
         formData,
-        goldenToken ? usableToken : "0",
+        goldenToken ? usableGoldenToken : "0",
+        blobertToken && tournamentEnded ? usableBlobertToken : "0",
         networkConfig[network!].revenueAddresses,
         lordsGameCost
       );
@@ -190,11 +220,10 @@ export const Spawn = ({
                           onMouseEnter={() => setIsHoveringLords(true)}
                           onMouseLeave={() => setIsHoveringLords(false)}
                           onClick={() => {
-                            if (usableToken !== "0") {
-                              handlePayment(true);
-                            } else {
-                              handlePayment(false);
-                            }
+                            handlePayment(
+                              usableGoldenToken !== "0",
+                              usableBlobertToken !== "0"
+                            );
                           }}
                         >
                           <div className="flex flex-row h-full">
@@ -206,11 +235,19 @@ export const Spawn = ({
                                   : "bg-terminal-green/20"
                               }`}
                             >
-                              {usableToken !== "0" ? (
+                              {usableGoldenToken !== "0" ? (
                                 <span className="relative h-40 w-full">
                                   <Image
                                     src="/golden-token.png"
-                                    alt="insert-lords"
+                                    alt="golden-token"
+                                    fill
+                                  />
+                                </span>
+                              ) : usableBlobertToken !== "0" ? (
+                                <span className="relative h-48 w-full">
+                                  <Image
+                                    src="/blobert.png"
+                                    alt="blobert"
                                     fill
                                   />
                                 </span>
@@ -225,10 +262,14 @@ export const Spawn = ({
                               <span className="relative h-40 w-full">
                                 <Image
                                   src={
-                                    usableToken !== "0"
+                                    usableGoldenToken !== "0"
                                       ? isHoveringLords
                                         ? "/insert-golden-token-hover.png"
                                         : "/insert-golden-token.png"
+                                      : usableBlobertToken !== "0"
+                                      ? isHoveringLords
+                                        ? "/insert-blobert-hover.png"
+                                        : "/insert-blobert.png"
                                       : isHoveringLords
                                       ? "/insert-lords-hover.png"
                                       : "/insert-lords.png"
@@ -347,10 +388,20 @@ export const Spawn = ({
           </div>
         )}
         {!paymentInitiated && (
-          <div className="absolute bottom-5 sm:bottom-10 left-0 right-0 flex flex-col items-center gap-4 z-10 pb-8">
-            <Button size={"sm"} variant={"default"} onClick={handleBack}>
+          <div className="absolute bottom-5 sm:bottom-10 left-0 right-0 flex flex-row items-center justify-center gap-4 z-10 pb-8">
+            <Button size={"sm"} variant={"outline"} onClick={handleBack}>
               Back
             </Button>
+            <Button
+              className="hidden sm:block"
+              size={"sm"}
+              variant={"default"}
+              onClick={() => {
+                handlePayment(true, true);
+              }}
+            >
+              Pay to Play
+            </Button>
           </div>
         )}
       </div>

ui/src/app/containers/AdventurerScreen.tsx

@@ -19,13 +19,15 @@ interface AdventurerScreenProps {
   spawn: (
     formData: FormData,
     goldenTokenId: string,
+    blobertTokenId: string,
     revenueAddresses: string[],
     costToPlay?: number
   ) => Promise<void>;
   handleSwitchAdventurer: (adventurerId: number) => Promise<void>;
   lordsBalance?: bigint;
   gameContract: Contract;
   goldenTokenData: any;
+  blobertsData: any;
   getBalances: () => Promise<void>;
   mintLords: (lordsAmount: number) => Promise<void>;
   costToPlay: bigint;
@@ -47,6 +49,7 @@ export default function AdventurerScreen({
   lordsBalance,
   gameContract,
   goldenTokenData,
+  blobertsData,
   getBalances,
   mintLords,
   costToPlay,
@@ -136,6 +139,7 @@ export default function AdventurerScreen({
             spawn={spawn}
             lordsBalance={lordsBalance}
             goldenTokenData={goldenTokenData}
+            blobertsData={blobertsData}
             gameContract={gameContract}
             getBalances={getBalances}
             mintLords={mintLords}