Issues

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

@@ -15,7 +15,7 @@
     top: 45.5px;
     right: 10px;
     color: black;
-    z-index: 2;
+    z-index: 9;
     display: inline-flex;
     padding: 8px;
     justify-content: center;
@@ -37,7 +37,6 @@
     max-height: 36px;
     z-index: 2;
     white-space: nowrap;
-
 }
 .positiveOutcome {
     color: #328449;
@@ -46,7 +45,6 @@
     font-style: normal;
     font-weight: 400;
     line-height: normal;
-
 }
 
 .negativeOutcome {
@@ -58,56 +56,58 @@
     line-height: normal;
 }
 
-.negativeOutcome2 {
+
+.positiveOutcome2, .negativeOutcome2 {
     display: flex;
     align-items: center;
-    padding-top: 5px;
+    padding-top: 7px;
     justify-content: center;
     position: absolute;
     right: 50%;
-    top: calc(12% + 25px); /*35.5 + 13.5 + x*/
     transform: translateX(50%);
-    height: 49px;
-    width: 81px;
-    background-image: url(https://static.simiotics.com/fullcount/outcome-bubble-loss.svg);
     z-index: 3;
-    color: #CD7676;
     text-align: center;
     font-family: Bangers, cursive;
-    font-size: 16px;
     font-style: normal;
     font-weight: 400;
     line-height: normal;
     fill: rgba(255, 255, 255, 0.70);
     stroke-width: 1px;
+
+    top: 35.5px;
+    font-size: 32px;
+    width: 162px;
+    height: 98px;
+}
+
+.negativeOutcome2 {
     stroke: #CD7676;
+    color: #CD7676;
+    background-image: url(https://static.fullcount.xyz/web/elements/outcome-bubble-loss-medium.svg);
 }
 
 .positiveOutcome2 {
-    display: flex;
-    align-items: center;
-    padding-top: 5px;
-    justify-content: center;
-    position: absolute;
-    right: 50%;
-    top: calc(12% + 25px); /*35.5 + 13.5 + x*/
-    transform: translateX(50%);
-    height: 49px;
-    width: 81px;
-    background-image: url(https://static.simiotics.com/fullcount/outcome-bubble-victory.svg);
-    z-index: 3;
     color: #669568;
-    text-align: center;
-    font-family: Bangers, cursive;
-    font-size: 16px;
-    font-style: normal;
-    font-weight: 400;
-    line-height: normal;
-    fill: rgba(255, 255, 255, 0.70);
-    stroke-width: 1px;
+    background-image: url(https://static.fullcount.xyz/web/elements/outcome-bubble-victory-medium.svg);
     stroke: #CD7676;
 }
 
+@media (min-width: 1024px) {
+    .positiveOutcome2, .negativeOutcome2 {
+        font-size: 64px;
+        height: 196px;
+        width: 324px;
+        top: 0;
+        padding-top: 0;
+    }
+    .positiveOutcome2 {
+        background-image: url(https://static.fullcount.xyz/web/elements/outcome-bubble-victory-big.svg);
+    }
+    .negativeOutcome2 {
+        background-image: url(https://static.fullcount.xyz/web/elements/outcome-bubble-loss-big.svg);
+    }
+}
+
 
 .homeButton {
     position: absolute;

web/src/components/atbat/AtBatView.tsx

@@ -1,5 +1,5 @@
 import { useRouter } from "next/router";
-import { useState, useEffect } from "react";
+import { useEffect, useState } from "react";
 import styles from "./AtBatView.module.css";
 import { useQuery, useQueryClient, UseQueryResult } from "react-query";
 import { getAtBat } from "../../services/fullcounts";
@@ -11,15 +11,18 @@ import { AtBatStatus, OwnedToken, Token } from "../../types";
 import BatterViewMobile from "../playing/BatterViewMobile";
 import { getContracts } from "../../utils/getWeb3Contracts";
 import { FULLCOUNT_ASSETS_PATH } from "../../constants";
-import { Image, useMediaQuery } from "@chakra-ui/react";
+import { Image, useDisclosure, useMediaQuery } from "@chakra-ui/react";
 import Outcome2, { sessionOutcomeType } from "./Outcome2";
 import ExitIcon from "../icons/ExitIcon";
 import TokenCard from "./TokenCard";
 import ScoreForDesktop from "./ScoreForDesktop";
 import { sendReport } from "../../utils/humbug";
 import { playSound } from "../../utils/notifications";
+import ExitDialog from "./ExitDialog";
+import useUser from "../../contexts/UserContext";
+import { fetchFullcountPlayerTokens } from "../../tokenInterfaces/FullcountPlayerAPI";
 
-const outcomes = [
+export const outcomes = [
   "In Progress",
   "Strikeout",
   "Walk",
@@ -56,13 +59,15 @@ export const outcomeType = (
 
 const AtBatView: React.FC = () => {
   const router = useRouter();
+  const { tokensCache, updateContext, selectedToken, joinedNotification } = useGameContext();
   const [atBatId, setAtBatId] = useState<string | null>(null);
   const [sessionId, setSessionId] = useState<string | null>(null);
-  const { tokensCache, updateContext, selectedToken, joinedNotification } = useGameContext();
   const [showPitchOutcome, setShowPitchOutcome] = useState(false);
   const [currentSessionId, setCurrentSessionId] = useState(0);
   const [currentSessionIdx, setCurrentSessionIdx] = useState(0);
   const [isBigView] = useMediaQuery("(min-width: 1024px)");
+  const { isOpen, onOpen, onClose } = useDisclosure();
+  const { user } = useUser();
 
   useEffect(() => {
     window.scrollTo(0, 0);
@@ -86,7 +91,7 @@ const AtBatView: React.FC = () => {
     if (router.query.session_id && typeof router.query.session_id === "string") {
       setSessionId(router.query.session_id);
     }
-  }, [router.query.id]);
+  }, [router.query.id, router.query.session_id]);
 
   const queryClient = useQueryClient();
   const atBatState: UseQueryResult<{ atBat: AtBatStatus; tokens: Token[] }> = useQuery(
@@ -108,6 +113,14 @@ const AtBatView: React.FC = () => {
     {
       onSuccess: (data) => {
         console.log(data);
+        if (data && !selectedToken && ownedTokens.data) {
+          const token = ownedTokens.data.find(
+            (t) => isSameToken(t, data.atBat.batter) || isSameToken(t, data.atBat.pitcher),
+          );
+          if (token) {
+            updateContext({ selectedToken: { ...token } });
+          }
+        }
         if (data && currentSessionId === 0) {
           setCurrentSessionId(data.atBat.pitches[data.atBat.numberOfSessions - 1].sessionID);
         }
@@ -160,17 +173,37 @@ const AtBatView: React.FC = () => {
   };
 
   const handleExitClick = () => {
-    sendReport("PlayView exit", "", ["type:click", "click:atBatExit"]);
-    router.push("/");
+    if (
+      atBatState.data?.atBat.pitches.length === 1 &&
+      atBatState.data.atBat.pitches[0].progress == 2
+    ) {
+      onOpen();
+    } else {
+      sendReport("PlayView exit", "", ["type:click", "click:atBatExit"]);
+      router.push("/");
+    }
   };
 
+  const ownedTokens = useQuery(
+    ["ownedTokensAfterRefresh", user],
+    async () => {
+      return user ? await fetchFullcountPlayerTokens() : [];
+    },
+    {
+      enabled: !selectedToken,
+    },
+  );
+
   return (
     <div
       className={styles.container}
       style={{ maxHeight: windowHeight ? `${windowHeight}px` : "100vh" }}
     >
       <div className={styles.exitButton} onClick={handleExitClick}>
         <ExitIcon />
+        {isOpen && selectedToken && (
+          <ExitDialog token={selectedToken} sessionId={currentSessionId} onClose={onClose} />
+        )}
       </div>
       <Image
         minW={"441px"}
@@ -205,19 +238,6 @@ const AtBatView: React.FC = () => {
             pitch={atBatState.data.atBat.pitches[currentSessionIdx]}
           />
         )}
-      {atBatState.data && atBatState.data.atBat.outcome !== 0 && selectedToken && (
-        <div
-          className={
-            !outcomeType([selectedToken], atBatState.data.atBat)
-              ? styles.othersOutcome
-              : outcomeType([selectedToken], atBatState.data.atBat) === "positive"
-              ? styles.positiveOutcome
-              : styles.negativeOutcome
-          }
-        >
-          {outcomes[atBatState.data.atBat.outcome]}!
-        </div>
-      )}
       {atBatState.data?.atBat &&
         showPitchOutcome &&
         atBatState.data.atBat.pitches.length > 0 &&
@@ -293,6 +313,7 @@ const AtBatView: React.FC = () => {
           {atBatState.data?.atBat && (
             <Outcome2
               atBat={atBatState.data?.atBat}
+              forToken={selectedToken}
               sessionStatus={
                 atBatState.data.atBat.outcome === 0
                   ? atBatState.data.atBat.pitches[atBatState.data.atBat.numberOfSessions - 2]

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

@@ -0,0 +1,88 @@
+.container {
+    display: flex;
+    width: 400px;
+    padding: 20px;
+    flex-direction: column;
+    align-items: center;
+    gap: 20px;
+    border: 1px solid #262019;
+    background: #FCECD9;
+    position: absolute;
+    z-index: 10;
+    left: 100%;
+    top: 0;
+    transform: translateX(-100%);
+}
+
+.prompt {
+    align-self: stretch;
+
+    color: #262019;
+    text-align: center;
+    font-family: Bangers, cursive;
+    font-size: 24px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: normal;
+}
+
+.explanation {
+    align-self: stretch;
+
+    color: #262019;
+    text-align: center;
+    font-family: Pangolin, cursive;
+    font-size: 14px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: normal;
+}
+
+.buttons {
+    display: flex;
+    justify-content: center;
+    /*align-items: flex-start;*/
+    gap: 10px;
+    /*align-self: stretch;*/
+}
+
+.leftButton, .rightButton {
+    width: 120px;
+}
+
+.leftButton {
+    display: flex;
+    padding: 10px 40px;
+    justify-content: center;
+    align-items: center;
+    gap: 10px;
+    flex: 1 0 0;
+    border: 1px solid #262019;
+    color: #262019;
+    font-family: Bangers, cursive;
+    font-size: 18px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: normal;
+    white-space: nowrap;
+}
+
+.rightButton {
+    display: flex;
+    padding: 10px 20px;
+    justify-content: center;
+    align-items: center;
+    gap: 10px;
+    flex: 1 0 0;
+    border: 1px solid #262019;
+    background: #7E8E7F;
+    color: #FFF;
+    text-align: center;
+    font-family: Bangers, cursive;
+    font-size: 18px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: normal;
+    white-space: nowrap;
+}
+