Mobile token card

web/src/components/HomePage/HeatMapSmall.tsx

@@ -2,7 +2,7 @@ import React from "react";
 import { Box, Flex, Grid } from "@chakra-ui/react";
 import { valueToColor } from "../../utils/colors";
 
-const HeatMapSmall = ({ rates, size }: { rates: number[]; size?: string }) => {
+const HeatMapSmall = ({ rates, size }: { rates: number[] | undefined; size?: string }) => {
   const generateCell = (index: number) => (
     <Box key={index}>
       <Box
@@ -12,7 +12,7 @@ const HeatMapSmall = ({ rates, size }: { rates: number[]; size?: string }) => {
         alignItems="center"
         justifyContent="center"
         cursor={"pointer"}
-        bg={valueToColor(rates[index], rates)}
+        bg={rates ? valueToColor(rates[index], rates) : valueToColor(0, [0])}
       />
     </Box>
   );

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

@@ -9,6 +9,7 @@
     background: #FCECD9;
     z-index: 2;
     margin-top: 15px;
+    position: relative;
 }
 
 .vs {

web/src/components/atbat/AtBatFooter.tsx

@@ -1,19 +1,60 @@
 import styles from "./AtBatFooter.module.css";
-import { AtBatStatus } from "../../types";
-import TokenToPlay from "../HomePage/TokenToPlay";
+import { AtBatStatus, Token } from "../../types";
 import TokenCardSmall from "./TokenCardSmall";
+import { useEffect, useRef, useState } from "react";
+import TokenCard from "./TokenCard";
+import { sendReport } from "../../utils/humbug";
 
 const AtBatFooter = ({ atBat }: { atBat: AtBatStatus }) => {
+  const [showDetailsFor, setShowDetailsFor] = useState<Token | undefined>(undefined);
+  const tokenCardRef = useRef<HTMLDivElement>(null);
+  const handleClickOutside = (event: MouseEvent) => {
+    if (tokenCardRef.current && !tokenCardRef.current.contains(event.target as Node)) {
+      setShowDetailsFor((prev) => {
+        const opener = document.getElementById(`token-card-small-${prev?.address}-${prev?.id}`);
+        if (opener?.contains(event.target as Node)) {
+          event.stopPropagation(); //preventing handleClick that reopens details for same token
+        }
+        return undefined;
+      });
+    }
+  };
+  useEffect(() => {
+    document.addEventListener("click", handleClickOutside, true);
+    return () => document.removeEventListener("click", handleClickOutside, true);
+  }, []);
+  const handleClick = (token: Token | undefined) => {
+    sendReport("Details opened", {}, ["type:click", "click:open_details"]);
+    setShowDetailsFor(token);
+  };
+
   return (
     <div className={styles.container}>
+      {showDetailsFor && (
+        <TokenCard
+          token={showDetailsFor}
+          isPitcher={showDetailsFor === atBat.pitcher}
+          ref={tokenCardRef}
+        />
+      )}
       {atBat.pitcher ? (
-        <TokenCardSmall token={atBat.pitcher} isPitcher={true} isForGame={true} />
+        <TokenCardSmall
+          token={atBat.pitcher}
+          isPitcher={true}
+          isForGame={true}
+          onClick={() => handleClick(atBat.pitcher)}
+        />
       ) : (
         <div style={{ width: "112px" }} />
       )}
       <div className={styles.vs}>VS</div>
       {atBat.batter ? (
-        <TokenCardSmall token={atBat.batter} isPitcher={false} isForGame={true} />
+        <TokenCardSmall
+          token={atBat.batter}
+          isPitcher={false}
+          isForGame={true}
+          onClick={() => handleClick(atBat.batter)}
+        />
       ) : (
         <div style={{ width: "112px" }} />
       )}

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

@@ -20,6 +20,12 @@
     transform: translateX(-65%);
 }
 
+.imageAndInfo {
+    display: flex;
+    gap: 10px;
+    flex-direction: column;
+}
+
 .image {
     width: 260px;
     min-width: 260px;
@@ -59,4 +65,41 @@
     align-items: flex-start;
     gap: 10px;
     align-self: stretch;
+}
+
+@media (max-width: 1023px) {
+    .pitcherContainer, .batterContainer {
+        position: absolute;
+        bottom: 80px;
+        left: 50%;
+        transform: translateX(-50%);
+        height: 364px;
+        min-height: 342px;
+
+        padding: 10px;
+        width: 300px;
+        gap: 10px;
+    }
+
+    .imageAndInfo {
+        flex-direction: row;
+        align-items: flex-start;
+    }
+
+    .image {
+        width: 80px;
+        min-width: 80px;
+        height: 80px;
+    }
+
+    .tokenName {
+        font-size: 18px;
+        line-height: 100%;
+    }
+
+    .icon {
+        display: none;
+    }
+
+
 }

web/src/components/atbat/TokenCard.tsx

@@ -1,30 +1,29 @@
+import React from "react";
 import styles from "./TokenCard.module.css";
 import { Image } from "@chakra-ui/react";
-import { PitchLocation, SwingLocation, Token } from "../../types";
+import { Token } from "../../types";
 import BatIconBig from "../icons/BatIconBig";
 import BallIconBig from "../icons/BallIconBig";
 import { useQuery } from "react-query";
-import axios from "axios";
 import MainStat from "../playing/MainStat";
 import HeatMap from "../playing/HeatMap";
 import DetailedStat from "../playing/DetailedStat";
+import {
+  fetchBatterStats,
+  fetchPitchDistribution,
+  fetchPitcherStats,
+  fetchSwingDistribution,
+} from "../../utils/stats";
 
-const TokenCard = ({ token, isPitcher }: { token: Token; isPitcher: boolean }) => {
+interface TokenCardProps extends React.RefAttributes<HTMLDivElement> {
+  token: Token;
+  isPitcher: boolean;
+}
+
+const TokenCard: React.FC<TokenCardProps> = React.forwardRef(({ token, isPitcher }, ref) => {
   const pitcherStats = useQuery(
-    ["pitcher_stat", token.id],
-    async () => {
-      if (!token) {
-        return;
-      }
-      const API_URL = "https://api.fullcount.xyz/stats";
-      try {
-        const stat = await axios.get(`${API_URL}/${token.address}/${token.id}`);
-        return stat.data;
-      } catch (e) {
-        console.log({ token, e });
-        return 0;
-      }
-    },
+    ["pitcher_stat", token?.address, token?.id],
+    () => fetchPitcherStats(token),
     {
       enabled: !!token && isPitcher,
       retryDelay: (attemptIndex) => (attemptIndex < 1 ? 5000 : 10000),
@@ -36,20 +35,8 @@ const TokenCard = ({ token, isPitcher }: { token: Token; isPitcher: boolean }) =
   );
 
   const batterStats = useQuery(
-    ["batter_stat", token.id],
-    async () => {
-      if (!token) {
-        return;
-      }
-      const API_URL = "https://api.fullcount.xyz/stats";
-      try {
-        const stat = await axios.get(`${API_URL}/${token.address}/${token.id}`);
-        return stat.data;
-      } catch (e) {
-        console.log({ token, e });
-        return;
-      }
-    },
+    ["batter_stat", token?.address, token?.id],
+    () => fetchBatterStats(token),
     {
       enabled: !!token && !isPitcher,
       retryDelay: (attemptIndex) => (attemptIndex < 1 ? 5000 : 10000),
@@ -61,32 +48,8 @@ const TokenCard = ({ token, isPitcher }: { token: Token; isPitcher: boolean }) =
   );
 
   const pitchDistributions = useQuery(
-    ["pitch_distribution", token.id],
-    async () => {
-      if (!token) {
-        return;
-      }
-      const API_URL = "https://api.fullcount.xyz/pitch_distribution";
-      const counts = new Array(25).fill(0);
-      try {
-        const res = await axios.get(`${API_URL}/${token.address}/${token.id}`);
-        res.data.pitch_distribution.forEach((l: PitchLocation) => {
-          counts[l.pitch_vertical * 5 + l.pitch_horizontal] =
-            counts[l.pitch_vertical * 5 + l.pitch_horizontal] + l.count;
-        });
-        const total = counts.reduce((acc, value) => acc + value);
-        const fast = res.data.pitch_distribution.reduce(
-          (acc: number, value: { pitch_speed: 0 | 1; count: number }) =>
-            acc + (value.pitch_speed === 0 ? value.count : 0),
-          0,
-        );
-        const rates = counts.map((value) => value / total);
-        return { rates, counts, fast };
-      } catch (e) {
-        console.log({ token, e });
-        return { counts, rates: counts, fast: 0 };
-      }
-    },
+    ["pitch_distribution", token?.address, token?.id],
+    () => fetchPitchDistribution(token),
     {
       enabled: !!token && isPitcher,
       retryDelay: (attemptIndex) => (attemptIndex < 1 ? 5000 : 10000),
@@ -98,29 +61,8 @@ const TokenCard = ({ token, isPitcher }: { token: Token; isPitcher: boolean }) =
   );
 
   const swingDistributions = useQuery(
-    ["swing_distribution", token.id],
-    async () => {
-      if (!token) {
-        return;
-      }
-      const API_URL = "https://api.fullcount.xyz/swing_distribution";
-      const counts = new Array(25).fill(0);
-      try {
-        const res = await axios.get(`${API_URL}/${token.address}/${token.id}`);
-        let takes = 0;
-        res.data.swing_distribution.forEach((l: SwingLocation) =>
-          l.swing_type === 2
-            ? (takes += l.count)
-            : (counts[l.swing_vertical * 5 + l.swing_horizontal] = l.count),
-        );
-        const total = counts.reduce((acc, value) => acc + value);
-        const rates = counts.map((value) => value / total);
-        return { rates, counts, takes };
-      } catch (e) {
-        console.log({ token, e });
-        return { counts, rates: counts, takes: 0 };
-      }
-    },
+    ["swing_distribution", token?.address, token?.id],
+    () => fetchSwingDistribution(token),
     {
       enabled: !!token && !isPitcher,
       retryDelay: (attemptIndex) => (attemptIndex < 1 ? 5000 : 10000),
@@ -130,17 +72,20 @@ const TokenCard = ({ token, isPitcher }: { token: Token; isPitcher: boolean }) =
       refetchInterval: 50000,
     },
   );
+
   return (
-    <div className={isPitcher ? styles.pitcherContainer : styles.batterContainer}>
-      <Image className={styles.image} alt={""} src={token.image} />
-      <div className={styles.tokenInfo}>
-        {!isPitcher ? (
-          <BatIconBig width={"31"} height={"31"} viewBox={"0 0 31 30"} />
-        ) : (
-          <BallIconBig width={"31"} height={"31"} viewBox={"0 0 31 30"} />
-        )}
-        <div className={styles.tokenName}>{token.name}</div>
-        <div className={styles.tokenId}>{token.id}</div>
+    <div className={isPitcher ? styles.pitcherContainer : styles.batterContainer} ref={ref}>
+      <div className={styles.imageAndInfo}>
+        <Image className={styles.image} alt={""} src={token.image} />
+        <div className={styles.tokenInfo}>
+          {!isPitcher ? (
+            <BatIconBig width={"31"} height={"31"} viewBox={"0 0 31 30"} className={styles.icon} />
+          ) : (
+            <BallIconBig width={"31"} height={"31"} viewBox={"0 0 31 30"} className={styles.icon} />
+          )}
+          <div className={styles.tokenName}>{token.name}</div>
+          <div className={styles.tokenId}>{token.id}</div>
+        </div>
       </div>
       <MainStat stats={isPitcher ? pitcherStats.data : batterStats.data} isPitcher={isPitcher} />
       <div className={styles.detailedStat}>
@@ -171,6 +116,8 @@ const TokenCard = ({ token, isPitcher }: { token: Token; isPitcher: boolean }) =
       </div>
     </div>
   );
-};
+});
+
+TokenCard.displayName = "TokenCard";
 
 export default TokenCard;