Merge pull request #284 from moonstream-to/updates

Updates

web/pages/atbats/index.tsx

@@ -1,5 +1,4 @@
 import Layout from "../../src/components/layout/layout";
-import PracticeSelect from "../../src/components/practice/PracticeSelect";
 import AtBatView from "../../src/components/atbat/AtBatView";
 
 const Home = () => {

web/src/components/HomePage/PvpView.tsx

@@ -1,5 +1,4 @@
 import router from "next/router";
-import { useState } from "react";
 import { useMutation, useQueryClient } from "react-query";
 
 import styles from "./PvpView.module.css";
@@ -107,24 +106,24 @@ const PvpView = ({ atBats, tokens }: { atBats: AtBat[]; tokens: OwnedToken[] })
     }
   };
 
-  const [selectedView, setSelectedView] = useState(0);
+  const { selectedPVPView, updateContext } = useGameContext();
   return (
     <div className={styles.container}>
       <div className={styles.viewSelector}>
         {views.map((v, idx) => (
           <div
-            className={selectedView === idx ? styles.buttonSelected : styles.button}
+            className={selectedPVPView === idx ? styles.buttonSelected : styles.button}
             onClick={() => {
               playSound("viewSelector");
-              setSelectedView(idx);
+              updateContext({ selectedPVPView: idx });
             }}
             key={idx}
           >
             {v}
           </div>
         ))}
       </div>
-      {selectedView === 2 && atBats && (
+      {selectedPVPView === 2 && atBats && (
         <AtBatsList
           tokens={tokens}
           atBats={atBats.filter(
@@ -139,7 +138,7 @@ const PvpView = ({ atBats, tokens }: { atBats: AtBat[]; tokens: OwnedToken[] })
           )}
         />
       )}
-      {selectedView === 1 && atBats && (
+      {selectedPVPView === 1 && atBats && (
         <AtBatsList
           tokens={tokens}
           atBats={atBats.filter(
@@ -153,7 +152,7 @@ const PvpView = ({ atBats, tokens }: { atBats: AtBat[]; tokens: OwnedToken[] })
           )}
         />
       )}
-      {atBats && selectedView === 0 && (
+      {atBats && selectedPVPView === 0 && (
         <div className={styles.listsContainer}>
           <div className={styles.list}>
             <div className={styles.listHeader}>PITCHERS</div>

web/src/components/Playing.tsx

@@ -1,11 +1,9 @@
 import { Image } from "@chakra-ui/react";
 
 import { useGameContext } from "../contexts/GameContext";
-import SessionsView from "./sessions/SessionsView";
-import PlayView from "./playing/PlayView";
 import styles from "./Playing.module.css";
 import { useQuery } from "react-query";
-import { AtBat, OwnedToken } from "../types";
+import { OwnedToken } from "../types";
 import { fetchFullcountPlayerTokens } from "../tokenInterfaces/FullcountPlayerAPI";
 import queryCacheProps from "../hooks/hookCommon";
 import useUser from "../contexts/UserContext";

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

@@ -124,33 +124,30 @@
     }
 }
 
-
-.homeButton {
+.outcomeButtons {
+    display: flex;
+    flex-direction: column;
+    gap: 5px;
     position: absolute;
     bottom: 0;
     left: 50%;
     transform: translateY(-92px) translateX(-50%);
+    z-index: 4;
+}
 
-    color: #FFF;
-    text-align: center;
-    font-family: Bangers, cursive;
-    font-size: 18px;
+.homeButton {
+    color: #262019;
+    font-family: Pangolin, cursive;
+    font-size: 14px;
     font-style: normal;
     font-weight: 400;
-    line-height: 100%; /* 18px */
-    letter-spacing: 0.9px;
-
-    cursor: pointer;
-    z-index: 4;
+    line-height: normal;
     display: flex;
-    width: 26.96vh;
-    padding: 10px 20px;
+    width: 141px;
+    padding: 5px 15px;
     justify-content: center;
     align-items: center;
     gap: 10px;
-
-    border: 1px solid #262019;
-    background: #328449;
 }
 
 .playerView {

web/src/components/atbat/AtBatView.tsx

@@ -22,6 +22,7 @@ import useUser from "../../contexts/UserContext";
 import { fetchFullcountPlayerTokens } from "../../tokenInterfaces/FullcountPlayerAPI";
 import { useSound } from "../../hooks/useSound";
 import InviteLinkView from "./InviteLinkView";
+import RematchButton from "./RematchButton";
 
 export const outcomes = [
   "In Progress",
@@ -90,7 +91,7 @@ const AtBatView: React.FC = () => {
     if (router.query.id && typeof router.query.id === "string") {
       setAtBatId(router.query.id);
     }
-    if (router.query.session_id && typeof router.query.session_id === "string") {
+    if (router.query.session_id && typeof router.query.session_id === "string" && !sessionId) {
       setSessionId(router.query.session_id);
     }
   }, [router.query.id, router.query.session_id]);
@@ -127,6 +128,9 @@ const AtBatView: React.FC = () => {
     },
     {
       onSuccess: (data) => {
+        if (!data) {
+          return;
+        }
         if (data && !selectedToken && ownedTokens.data) {
           const token = ownedTokens.data.find(
             (t) => isSameToken(t, data.atBat.batter) || isSameToken(t, data.atBat.pitcher),
@@ -209,6 +213,19 @@ const AtBatView: React.FC = () => {
     },
   );
 
+  const handleRematch = (sessionID: number) => {
+    setAtBatId(null);
+    setSessionId(String(sessionID)); //sorry
+    setCurrentSessionIdx(0);
+    setShowPitchOutcome(false);
+    setCurrentSessionId(0);
+    queryClient.removeQueries("atBat");
+    router.push({
+      pathname: router.pathname,
+      query: { session_id: sessionID },
+    });
+  };
+
   return (
     <div
       className={styles.container}
@@ -232,9 +249,31 @@ const AtBatView: React.FC = () => {
       {atBatState.data?.atBat &&
         showPitchOutcome &&
         atBatState.data.atBat.outcome !== 0 &&
-        atBatState.data.atBat.pitches.length > 0 && (
-          <div className={styles.homeButton} onClick={handleExitClick}>
-            Go to home page
+        atBatState.data.atBat.pitches.length > 0 &&
+        selectedToken && (
+          <div className={styles.outcomeButtons}>
+            <RematchButton
+              atBat={atBatState.data.atBat}
+              selectedToken={selectedToken}
+              onSuccess={handleRematch}
+            />
+            <button className={styles.homeButton} onClick={handleExitClick}>
+              Go to home page
+            </button>
+          </div>
+        )}
+      {atBatState.data?.atBat &&
+        atBatState.data.atBat.pitches[currentSessionIdx].progress === 6 &&
+        selectedToken && (
+          <div className={styles.outcomeButtons}>
+            <RematchButton
+              atBat={atBatState.data.atBat}
+              selectedToken={selectedToken}
+              onSuccess={handleRematch}
+            />
+            <button className={styles.homeButton} onClick={handleExitClick}>
+              Go to home page
+            </button>
           </div>
         )}
 

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

@@ -0,0 +1,20 @@
+.container {
+    display: flex;
+    width: 141.518px;
+    min-height: 30px;
+    padding: 5px 20px;
+    justify-content: center;
+    align-items: center;
+    gap: 10px;
+
+    border: 1px solid #262019;
+    background: linear-gradient(0deg, #884F43 0%, #884F43 100%), #328449;
+    color: #FFF;
+    text-align: center;
+    font-family: Bangers, cursive;
+    font-size: 18px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 100%; /* 18px */
+    letter-spacing: 0.9px;
+}

web/src/components/atbat/RematchButton.tsx

@@ -0,0 +1,79 @@
+import { useMutation, useQuery } from "react-query";
+import { Spinner } from "@chakra-ui/react";
+
+import styles from "./RematchButton.module.css";
+import { AtBatStatus, Token } from "../../types";
+import { getCharacterSessions, isCampaignToken } from "../campaign/teams";
+import { JoinSessionParams } from "../../hooks/useJoinSession";
+import { playSound } from "../../utils/notifications";
+import { sendReport } from "../../utils/humbug";
+import { joinSessionFullcountPlayer } from "../../tokenInterfaces/FullcountPlayerAPI";
+import { mutationOptions } from "../../hooks/FCPlayerAPIOptions";
+import useMoonToast from "../../hooks/useMoonToast";
+
+const RematchButton = ({
+  atBat,
+  selectedToken,
+  onSuccess,
+}: {
+  atBat: AtBatStatus;
+  selectedToken: Token;
+  onSuccess: (sessionID: number) => void;
+}) => {
+  const toast = useMoonToast();
+  const joinSession = useMutation(
+    async ({ sessionID, token, inviteCode }: JoinSessionParams): Promise<unknown> => {
+      return joinSessionFullcountPlayer({ token, sessionID, inviteCode });
+    },
+    {
+      ...mutationOptions,
+      onSuccess: (_, variables) => {
+        onSuccess(variables.sessionID);
+      },
+      onError: (e: Error) => {
+        toast("Rematch request failed" + e?.message, "error");
+        sendReport("Error toast", { error: e }, ["type:error_toast"]);
+      },
+    },
+  );
+
+  const availableBots = useQuery(
+    ["availableBots", atBat.pitcher, atBat.batter],
+    () => {
+      if (atBat.batter && isCampaignToken(atBat.batter?.address, atBat.batter.id)) {
+        return getCharacterSessions(atBat.batter);
+      }
+      if (atBat.pitcher && isCampaignToken(atBat.pitcher.address, atBat.pitcher.id)) {
+        return getCharacterSessions(atBat.pitcher);
+      }
+      return undefined;
+    },
+    {
+      refetchInterval: 3000,
+    },
+  );
+
+  const handleClick = () => {
+    playSound("click");
+    sendReport("Rematch", {}, ["type:click", "click:rematch"]);
+    if (availableBots.data && availableBots.data[0]) {
+      joinSession.mutate({
+        token: selectedToken,
+        sessionID: availableBots.data[0],
+        inviteCode: "",
+      });
+    }
+  };
+
+  return (
+    <>
+      {availableBots.data && availableBots.data.length > 0 && (
+        <button className={styles.container} onClick={handleClick} disabled={joinSession.isLoading}>
+          {joinSession.isLoading ? <Spinner h={4} w={4} /> : "REMATCH"}
+        </button>
+      )}
+    </>
+  );
+};
+
+export default RematchButton;

web/src/components/campaign/CampaignView.tsx

@@ -2,7 +2,6 @@ import styles from "./CampaignView.module.css";
 import PlayerStat from "./PlayerStat";
 import { AtBat } from "../../types";
 import { useGameContext } from "../../contexts/GameContext";
-import { useState } from "react";
 import TeamsView from "./TeamsView";
 import { useQuery } from "react-query";
 import { GAME_CONTRACT } from "../../constants";
@@ -18,8 +17,7 @@ import axios from "axios";
 import { useSound } from "../../hooks/useSound";
 
 const CampaignView = ({ atBats }: { atBats: AtBat[] }) => {
-  const { selectedToken } = useGameContext();
-  const [isPitching, setIsPitching] = useState(true);
+  const { selectedToken, isPitchingInCampaign, updateContext } = useGameContext();
   const playSound = useSound();
 
   const stats = useQuery(
@@ -99,34 +97,34 @@ const CampaignView = ({ atBats }: { atBats: AtBat[] }) => {
       )}
       <div className={styles.roleSelector}>
         <div
-          className={isPitching ? styles.selectedRole : styles.role}
+          className={isPitchingInCampaign ? styles.selectedRole : styles.role}
           onClick={() => {
             playSound("modeSelector");
-            setIsPitching(true);
+            updateContext({ isPitchingInCampaign: true });
           }}
         >
           pitchers
         </div>
         <div
-          className={!isPitching ? styles.selectedRole : styles.role}
+          className={!isPitchingInCampaign ? styles.selectedRole : styles.role}
           onClick={() => {
             playSound("modeSelector");
-            setIsPitching(false);
+            updateContext({ isPitchingInCampaign: false });
           }}
         >
           batters
         </div>
       </div>
       <div className={styles.hint}>
-        {isPitching
+        {isPitchingInCampaign
           ? "To defeat a pitcher, you must hit three home runs against them. Defeat them all to finish the campaign!"
           : "To defeat a batter, you must strike them out in only three pitches three times. Defeat them all to finish the campaign!"}
       </div>
       <TeamsView
         isStatsLoading={stats.isLoading}
         stats={stats.data?.stats}
         atBats={atBats}
-        isPitching={isPitching}
+        isPitching={isPitchingInCampaign}
       />
     </div>
   );