Alpha

web/next.config.js

@@ -2,6 +2,29 @@
 const nextConfig = {
   reactStrictMode: true,
   trailingSlash: true,
+  images: {
+    unoptimized: true,
+    remotePatterns: [
+      {
+        protocol: "https",
+        hostname: "static.simiotics.com",
+        port: "",
+        pathname: "/fullcount/**",
+      },
+      {
+        protocol: "https",
+        hostname: "badges.moonstream.to",
+        port: "",
+        pathname: "/blb/**",
+      },
+      {
+        protocol: "https",
+        hostname: "badges.moonstream.to",
+        port: "",
+        pathname: "/fullcount-coaches/**",
+      },
+    ],
+  },
 };
 
 module.exports = nextConfig;

web/pages/_document.tsx

@@ -1,4 +1,5 @@
 import { Html, Head, Main, NextScript } from "next/document";
+import { FULLCOUNT_ASSETS_PATH } from "../src/constants";
 
 export default function Document() {
   return (
@@ -8,6 +9,15 @@ export default function Document() {
           name="robots"
           content={process.env.NEXT_PUBLIC_BUILD_TARGET == "alpha" ? "noindex" : "all"}
         />
+        <link rel="prefetch" href={`${FULLCOUNT_ASSETS_PATH}/bi-banner.png`} as="image" />
+
+        <link rel="preconnect" href="https://fonts.googleapis.com" />
+        <link rel="preconnect" href="https://fonts.gstatic.com" crossOrigin={"anonymous"} />
+        <link
+          href="https://fonts.googleapis.com/css2?family=Bangers&family=Pangolin&display=swap"
+          rel="stylesheet"
+        />
+
         <link href="https://fonts.googleapis.com/css?family=Space Grotesk" rel="stylesheet" />
         <link
           rel="stylesheet"

web/pages/atbats/index.tsx

@@ -0,0 +1,13 @@
+import Layout from "../../src/components/layout/layout";
+import PracticeSelect from "../../src/components/practice/PracticeSelect";
+import AtBatView from "../../src/components/atbat/AtBatView";
+
+const Home = () => {
+  return (
+    <Layout home={true} title="Fullcount">
+      <AtBatView />
+    </Layout>
+  );
+};
+
+export default Home;

web/pages/practice/index.tsx

@@ -0,0 +1,12 @@
+import Layout from "../../src/components/layout/layout";
+import PracticeSelect from "../../src/components/practice/PracticeSelect";
+
+const Home = () => {
+  return (
+    <Layout home={true} title="Fullcount">
+      <PracticeSelect />
+    </Layout>
+  );
+};
+
+export default Home;

web/src/components/GlobalStyles.module.css

@@ -15,21 +15,39 @@
 
 .commitButton {
     display: flex;
-    padding: 4px 20px;
+    padding: 9px 20px;
     justify-content: center;
     align-items: center;
-    gap: 5px;
-    width: 100%;
-    /*align-self: stretch;*/
-    border: 0.5px solid #f1e3bf;
-    background: #00a341;
-    color: #fff;
-    font-size: 14px;
+    gap: 10px;
+    align-self: stretch;
+    min-height: 38px;
+    border: 1px solid #262019;
+    background: #328449;
+    color: #FFF;
+    text-align: center;
+    font-family: Bangers, cursive;
+    font-size: 18px;
     font-style: normal;
-    font-weight: 500;
-    line-height: normal;
-    height: 31px;
+    font-weight: 400;
+    line-height: 100%; /* 18px */
+    letter-spacing: 0.9px;
+    position: relative;
+    width: 140px;
+    z-index: 2;
+}
+
+.waitingMessage {
+    display: flex;
+    width: 140px;
+    height: 38px;
+    padding: 10px 20px;
+    justify-content: center;
+    align-items: center;
+    gap: 10px;
+    z-index: 5;
+    border: 1px solid #262019;
     position: relative;
+    background: #4D4D4D;
 }
 
 .mobileButton {

web/src/components/HomePage/AtBatItem.tsx

@@ -0,0 +1,65 @@
+import styles from "./AtBatsList.module.css";
+import { AtBat, OwnedToken, Token } from "../../types";
+import TokenToPlay from "./TokenToPlay";
+import DotsCounter from "../sessions/DotsCounter";
+
+export const outcomes = [
+  "In Progress",
+  "Strikeout",
+  "Walk",
+  "Single",
+  "Double",
+  "Triple",
+  "Home Run",
+  "In Play Out",
+];
+
+export const outcomeType = (tokens: Token[], atBat: AtBat): "positive" | "negative" | undefined => {
+  const { pitcher, batter } = atBat;
+  if (tokens.some((t) => t.address === pitcher?.address && t.id === pitcher.id)) {
+    return atBat.outcome === 1 || atBat.outcome === 7 ? "positive" : "negative";
+  }
+  if (tokens.some((t) => t.address === batter?.address && t.id === batter.id)) {
+    return atBat.outcome === 1 || atBat.outcome === 7 ? "negative" : "positive";
+  }
+};
+
+const AtBatItem = ({ atBat, tokens }: { atBat: AtBat; tokens: OwnedToken[] }) => {
+  return (
+    <div className={styles.atBatContainer}>
+      <div className={styles.cards}>
+        {atBat.pitcher ? (
+          <TokenToPlay token={atBat.pitcher} isPitcher={true} />
+        ) : (
+          <div style={{ width: "100px", height: "152px", border: "1px solid #7E8E7F" }} />
+        )}
+        <div className={styles.vs}>VS</div>
+        {atBat.batter ? (
+          <TokenToPlay token={atBat.batter} isPitcher={false} />
+        ) : (
+          <div style={{ width: "100px", height: "152px", border: "1px solid #7E8E7F" }} />
+        )}
+      </div>
+      {atBat.outcome !== 0 ? (
+        <div
+          className={
+            !outcomeType(tokens, atBat)
+              ? styles.othersOutcome
+              : outcomeType(tokens, atBat) === "positive"
+              ? styles.positiveOutcome
+              : styles.negativeOutcome
+          }
+        >
+          {outcomes[atBat.outcome]}!
+        </div>
+      ) : (
+        <div className={styles.activeAtBat}>
+          <DotsCounter label={"BALL"} count={atBat.balls} capacity={4} />
+          <DotsCounter label={"STRIKE"} count={atBat.strikes} capacity={3} />
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default AtBatItem;

web/src/components/HomePage/AtBatsList.module.css

@@ -0,0 +1,126 @@
+.container {
+    display: flex;
+    gap: 10px;
+    flex-direction: column;
+    align-items: center;
+}
+
+.atBatContainer {
+    display: flex;
+    width: 280px;
+    padding: 10px;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 5px;
+
+    border: 1px solid #7E8E7F;
+    background: #FFF;
+}
+
+.cards {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    align-self: stretch;
+}
+
+.vs {
+    color: #669568;
+    text-overflow: ellipsis;
+    font-family: Bangers, cursive;
+    font-size: 24px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 100%; /* 24px */
+}
+
+.activeAtBat {
+    display: flex;
+    padding: 5px;
+    justify-content: center;
+    align-items: center;
+    gap: 10px;
+    align-self: stretch;
+    border: 1px solid #000;
+    background: #328449;
+    color: #FFF;
+    font-family: Bangers, cursive;
+    font-size: 14px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: normal;
+    text-transform: uppercase;
+}
+
+.stat {
+    gap: 5px;
+}
+.dots {
+    gap: 4px;
+}
+.filledDot, .emptyDot {
+    height: 6px;
+    width: 6px;
+    border-radius: 50%;
+}
+.emptyDot {
+    background-color: #34603B;
+}
+.filledDot {
+    background-color: #FFF;
+}
+
+
+.positiveOutcome {
+    display: flex;
+    padding: 5px;
+    justify-content: center;
+    align-items: center;
+    gap: 10px;
+    align-self: stretch;
+    border: 1px solid #262019;
+    color: #328449;
+    font-family: Bangers, cursive;
+    font-size: 18px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: normal;
+    text-transform: uppercase;
+}
+
+.negativeOutcome {
+    display: flex;
+    width: 260px;
+    padding: 5px;
+    justify-content: center;
+    align-items: center;
+    gap: 10px;
+    border: 1px solid #8F8476;
+    background: #262019;
+    color: #7E8E7F;
+    font-family: Bangers;
+    font-size: 18px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: normal;
+    text-transform: uppercase;
+}
+
+.othersOutcome {
+    display: flex;
+    padding: 5px;
+    justify-content: center;
+    align-items: center;
+    gap: 10px;
+    align-self: stretch;
+
+    background: #FCECD9;
+    color: #262019;
+    font-family: Bangers, cursive;
+    font-size: 18px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: normal;
+    text-transform: uppercase;
+}
+

web/src/components/HomePage/AtBatsList.tsx

@@ -0,0 +1,15 @@
+import styles from "./AtBatsList.module.css";
+import { AtBat, OwnedToken } from "../../types";
+import AtBatItem from "./AtBatItem";
+
+const AtBatsList = ({ atBats, tokens }: { atBats: AtBat[]; tokens: OwnedToken[] }) => {
+  return (
+    <div className={styles.container}>
+      {atBats.map((a, idx) => (
+        <AtBatItem atBat={a} key={idx} tokens={tokens} />
+      ))}
+    </div>
+  );
+};
+
+export default AtBatsList;

web/src/components/HomePage/HeatMapSmall.tsx

@@ -0,0 +1,33 @@
+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 generateCell = (index: number) => (
+    <Box key={index}>
+      <Box
+        height={size ?? "4px"}
+        width={size ?? "4px"}
+        display="flex"
+        alignItems="center"
+        justifyContent="center"
+        cursor={"pointer"}
+        bg={valueToColor(rates[index], rates)}
+      />
+    </Box>
+  );
+
+  return (
+    <Flex direction={"column"} alignItems={"center"} gap={"10px"}>
+      <Grid
+        templateColumns="repeat(5, 1fr)"
+        w={"fit-content"}
+        border={size === "10px" ? "1px solid #262019" : "2px solid #262019"}
+      >
+        {Array.from({ length: 25 }).map((_, i) => generateCell(i))}
+      </Grid>
+    </Flex>
+  );
+};
+
+export default HeatMapSmall;

web/src/components/HomePage/HomePage.module.css

@@ -0,0 +1,6 @@
+.container {
+    display: flex;
+    flex-direction: column;
+    gap: 20px;  /*Roster has 10px bottom margin*/
+}
+