Invites

web/src/components/Playing.tsx

@@ -22,6 +22,7 @@ import { getMulticallResults } from "../utils/multicall";
 import { AbiItem } from "web3-utils";
 import FullcountABIImported from "../web3/abi/FullcountABI.json";
 import { useSound } from "../hooks/useSound";
+import { useRouter } from "next/router";
 const FullcountABI = FullcountABIImported as unknown as AbiItem[];
 
 const Playing = () => {
@@ -38,6 +39,28 @@ const Playing = () => {
   } = useGameContext();
   const { user } = useUser();
   const playSound = useSound();
+  const [inviteFrom, setInviteFrom] = useState("");
+  const [inviteSession, setInviteSession] = useState("");
+  const [inviteCode, setInviteCode] = useState("");
+  const router = useRouter();
+
+  useEffect(() => {
+    if (router.query.invite_from && typeof router.query.invite_from === "string") {
+      setInviteFrom(router.query.invite_from);
+    } else {
+      setInviteFrom("");
+    }
+    if (router.query.id && typeof router.query.id === "string") {
+      setInviteSession(router.query.id);
+    } else {
+      setInviteSession("");
+    }
+    if (router.query.invite_code && typeof router.query.invite_code === "string") {
+      setInviteCode(router.query.invite_code);
+    } else {
+      setInviteCode("");
+    }
+  }, [router.query.invite_from, router.query.id, router.query.invite_code]);
 
   const ownedTokens = useQuery<OwnedToken[]>(
     ["owned_tokens", user],
@@ -47,6 +70,15 @@ const Playing = () => {
       if (ownedTokens.length > 0 && !selectedToken && ownedTokens[selectedTokenIdx]) {
         updateContext({ selectedToken: { ...ownedTokens[selectedTokenIdx] } });
       }
+      //first response  from the FCPLayer API after token creation has empty name and p0 image
+      if (
+        selectedToken &&
+        !selectedToken.name &&
+        ownedTokens[selectedTokenIdx] &&
+        selectedToken.id === ownedTokens[selectedTokenIdx].id
+      ) {
+        updateContext({ selectedToken: { ...ownedTokens[selectedTokenIdx] } });
+      }
       return ownedTokens;
     },
     {
@@ -192,26 +224,26 @@ const Playing = () => {
         ownedTokens.data &&
         ownedTokens.data.length >= 1 &&
         !invitedTo &&
+        !inviteFrom &&
         !isCreateCharacter && (
           <PlayingLayout>
             <HomePage tokens={ownedTokens.data} atBats={atBats.data?.atBats} />
           </PlayingLayout>
         )}
-
-      {invitedTo && ownedTokens.data && !isCreateCharacter && (
+      {inviteFrom && inviteSession && ownedTokens.data && ownedTokens.data.length > 0 && (
         <ChooseToken
-          tokens={ownedTokens.data}
-          onChoose={(token) => {
-            updateContext({ selectedToken: token, invitedTo: undefined });
+          tokens={ownedTokens.data.filter((t) => !t.isStaked)}
+          sessionID={Number(inviteSession)}
+          inviteCode={inviteCode}
+          inviteFrom={inviteFrom}
+          onClose={() => {
+            router.push("/");
+            setInviteCode("");
+            setInviteFrom("");
+            setInviteSession("");
           }}
-          onClose={() => updateContext({ invitedTo: undefined })}
         />
       )}
-
-      {selectedSession && watchingToken && <PlayView selectedToken={watchingToken} />}
-      {selectedSession && !watchingToken && selectedToken && (
-        <PlayView selectedToken={selectedToken} />
-      )}
     </>
   );
 };

web/src/components/TitleScreen.tsx

@@ -7,19 +7,34 @@ import Playing from "./Playing";
 import SignUpForm from "./account/SignUpForm";
 import LoginForm from "./account/LoginForm";
 
-import { FULLCOUNT_ASSETS, FULLCOUNT_ASSETS_PATH } from "../constants";
+import { FULLCOUNT_ASSETS } from "../constants";
 import LoadingView from "./HomePage/LoadingView";
 import LaunchForm from "./LaunchForm";
 import MoonstreamLogo2 from "./icons/MoonstreamLogo2";
 import { useGameContext } from "../contexts/GameContext";
+import { useRouter } from "next/router";
 
 const TitleScreen = () => {
   const { user, isLoading } = useUser();
+  const router = useRouter();
   const [isLogging, setIsLogging] = useState(false); // login or signUp
   const [isSuccess, setIsSuccess] = useState(false);
   const [isFirstSeconds, setIsFirstSeconds] = useState(true);
   const { isLaunching, updateContext } = useGameContext();
 
+  const [inviteFrom, setInviteFrom] = useState("");
+
+  useEffect(() => {
+    if (
+      router.isReady &&
+      router.query.invite_from &&
+      typeof router.query.invite_from === "string"
+    ) {
+      setInviteFrom(router.query.invite_from);
+      setIsLogging(true);
+    }
+  }, [router.isReady, router.query]);
+
   useEffect(() => {
     setTimeout(() => setIsFirstSeconds(false), 2000);
   }, []);
@@ -40,14 +55,20 @@ const TitleScreen = () => {
                   src={`${FULLCOUNT_ASSETS}/banners/Bl-banner-updated-logo.jpeg`}
                   alt={""}
                 />
-                {isLaunching ? (
+                {isLaunching && !inviteFrom ? (
                   <LaunchForm onClose={() => updateContext({ isLaunching: false })} />
                 ) : (
                   <>
                     {!isLogging ? (
-                      <SignUpForm setIsSuccess={(value) => setIsSuccess(value)} />
+                      <SignUpForm
+                        inviteFrom={inviteFrom}
+                        setIsSuccess={(value) => setIsSuccess(value)}
+                      />
                     ) : (
-                      <LoginForm setIsSuccess={(value) => setIsSuccess(value)} />
+                      <LoginForm
+                        inviteFrom={inviteFrom}
+                        setIsSuccess={(value) => setIsSuccess(value)}
+                      />
                     )}
                     {!isSuccess && (
                       <div className={styles.footer}>

web/src/components/account/Account.module.css

@@ -58,3 +58,14 @@
     opacity: 0;
     transition: opacity 1s ease-out;
 }
+
+.invitePrompt {
+    color: #262019;
+    text-align: center;
+    font-family: Pangolin, cursive;
+    font-size: 14px;
+    font-style: normal;
+    font-weight: 700;
+    line-height: normal;
+    margin-bottom: 20px;
+}

web/src/components/account/LoginForm.tsx

@@ -5,7 +5,13 @@ import { Spinner } from "@chakra-ui/react";
 import styles from "./Account.module.css";
 import useLogin from "../../hooks/useLogin";
 
-const LoginForm = ({ setIsSuccess }: { setIsSuccess: (isSuccess: boolean) => void }) => {
+const LoginForm = ({
+  setIsSuccess,
+  inviteFrom,
+}: {
+  setIsSuccess: (isSuccess: boolean) => void;
+  inviteFrom?: string;
+}) => {
   const [username, setUsername] = useState("");
   const [password, setPassword] = useState("");
   const { login, isLoading, isSuccess } = useLogin();
@@ -30,7 +36,13 @@ const LoginForm = ({ setIsSuccess }: { setIsSuccess: (isSuccess: boolean) => voi
   return (
     <form onSubmit={handleSubmit} className={styles.container}>
       {/*<div className={`${styles.container} ${isSuccess ? styles.fadeOut : ""}`}>*/}
-      <div className={`${styles.header} ${isSuccess ? styles.fadeOut : ""}`}>Welcome back!</div>
+      {inviteFrom ? (
+        <div className={styles.invitePrompt}>
+          {`${inviteFrom} is inviting you to play Fullcount.xyz.`}
+        </div>
+      ) : (
+        <div className={`${styles.header} ${isSuccess ? styles.fadeOut : ""}`}>Welcome back!</div>
+      )}
       <label className={styles.label}>Username</label>
       <input
         type="text"

web/src/components/account/SignUpForm.tsx

@@ -5,7 +5,13 @@ import { Spinner } from "@chakra-ui/react";
 import useSignUp from "../../hooks/useSignUp";
 import styles from "./Account.module.css";
 
-const SignUpForm = ({ setIsSuccess }: { setIsSuccess: (isSuccess: boolean) => void }) => {
+const SignUpForm = ({
+  setIsSuccess,
+  inviteFrom,
+}: {
+  setIsSuccess: (isSuccess: boolean) => void;
+  inviteFrom?: string;
+}) => {
   const [username, setUsername] = useState("");
   const [password, setPassword] = useState("");
   const [email, setEmail] = useState("");
@@ -32,7 +38,13 @@ const SignUpForm = ({ setIsSuccess }: { setIsSuccess: (isSuccess: boolean) => vo
   return (
     <form onSubmit={handleSubmit} className={styles.container}>
       {/*<div className={`${styles.container} ${isSuccess ? styles.fadeOut : ""}`}>*/}
-      <div className={styles.header}>Welcome!</div>
+      {inviteFrom ? (
+        <div className={styles.invitePrompt}>
+          {`${inviteFrom} is inviting you to play Fullcount.xyz.`}
+        </div>
+      ) : (
+        <div className={`${styles.header} ${isSuccess ? styles.fadeOut : ""}`}>Welcome!</div>
+      )}
       <label className={styles.label}>Username</label>
       <input
         type="text"

web/src/components/atbat/AtBatView.module.css

@@ -80,6 +80,22 @@
     height: 98px;
 }
 
+.invitePrompt {
+    color: #262019;
+    position: absolute;
+    right: 50%;
+    transform: translateX(50%);
+    z-index: 3;
+    text-align: center;
+    font-family: Bangers, cursive;
+    font-style: normal;
+    font-weight: 400;
+    line-height: normal;
+    top: 88.5px;
+    font-size: 24px;
+    width: 320px;
+}
+
 .negativeOutcome2 {
     stroke: #CD7676;
     color: #CD7676;

web/src/components/atbat/AtBatView.tsx

@@ -21,6 +21,7 @@ import ExitDialog from "./ExitDialog";
 import useUser from "../../contexts/UserContext";
 import { fetchFullcountPlayerTokens } from "../../tokenInterfaces/FullcountPlayerAPI";
 import { useSound } from "../../hooks/useSound";
+import InviteLinkView from "./InviteLinkView";
 
 export const outcomes = [
   "In Progress",
@@ -238,7 +239,7 @@ const AtBatView: React.FC = () => {
           </div>
         )}
 
-      {atBatState.data && !isBigView && (
+      {atBatState.data && !isBigView && atBatState.data.atBat.pitches[0].progress !== 2 && (
         <Score
           atBat={atBatState.data.atBat}
           pitch={atBatState.data.atBat.pitches[currentSessionIdx]}
@@ -247,7 +248,8 @@ const AtBatView: React.FC = () => {
       {atBatState.data &&
         isBigView &&
         atBatState.data?.atBat.outcome === 0 &&
-        !showPitchOutcome && (
+        !showPitchOutcome &&
+        atBatState.data.atBat.pitches[0].progress !== 2 && (
           <ScoreForDesktop
             atBat={atBatState.data.atBat}
             pitch={atBatState.data.atBat.pitches[currentSessionIdx]}
@@ -294,6 +296,16 @@ const AtBatView: React.FC = () => {
             : "you lose!"}
         </div>
       )}
+      {atBatState.data && atBatState.data.atBat.pitches[0].progress === 2 && (
+        <>
+          <div className={styles.invitePrompt}>
+            Waiting for Opponent.
+            <br />
+            Invite Friend?
+          </div>
+          <InviteLinkView atBat={atBatState.data.atBat} />
+        </>
+      )}
       {atBatState.data?.atBat.outcome === 0 &&
         !showPitchOutcome &&
         atBatState.data.atBat.pitches[atBatState.data.atBat.numberOfSessions - 1].progress !== 2 &&
@@ -338,9 +350,12 @@ const AtBatView: React.FC = () => {
           )}
         </>
       )}
-      {atBatState.data && !showPitchOutcome && !isBigView && (
-        <AtBatFooter atBat={atBatState.data.atBat} />
-      )}
+      {atBatState.data &&
+        !showPitchOutcome &&
+        !isBigView &&
+        atBatState.data.atBat.pitches[0].progress !== 2 && (
+          <AtBatFooter atBat={atBatState.data.atBat} />
+        )}
     </div>
   );
 };