Replay DB and Global Stats

package.json

@@ -64,6 +64,7 @@
     "@teamsupercell/typings-for-css-modules-loader": "^2.5.1",
     "@testing-library/jest-dom": "^5.16.1",
     "@testing-library/react": "^12.1.2",
+    "@types/better-sqlite3": "^7.5.0",
     "@types/compare-func": "^1.3.0",
     "@types/jest": "^27.4.1",
     "@types/lodash": "^4.14.178",
@@ -152,6 +153,7 @@
     "@mui/icons-material": "^5.5.1",
     "@mui/material": "^5.5.1",
     "@slippi/slippi-js": "^6.3.0",
+    "@types/recharts": "^1.8.24",
     "compare-func": "^2.0.0",
     "cross-fetch": "^3.1.5",
     "dmg": "^0.1.0",
@@ -185,6 +187,7 @@
     "react-twitter-embed": "^4.0.4",
     "react-virtualized-auto-sizer": "^1.0.3",
     "react-window": "^1.8.6",
+    "recharts": "^2.2.0",
     "wget-improved": "^3.3.1",
     "zustand": "^3.2.0"
   }

release/app/package.json

@@ -15,6 +15,7 @@
     "postinstall": "yarn run electron-rebuild && yarn run link-modules"
   },
   "dependencies": {
+    "better-sqlite3": "^7.5.3",
     "obs-websocket-js": "^5.0.1",
     "threads": "^1.6.5",
     "websocket": "^1.0.34"

src/renderer/containers/GlobalStats/GlobalStats.tsx

@@ -0,0 +1,174 @@
+import { css } from "@emotion/react";
+import styled from "@emotion/styled";
+import ArrowBackIosIcon from "@mui/icons-material/ArrowBackIos";
+import ErrorIcon from "@mui/icons-material/Error";
+import { Button, IconButton } from "@mui/material";
+import type { FileResult } from "@replays/types";
+import _ from "lodash";
+import React from "react";
+
+import { BasicFooter } from "@/components/Footer";
+import { IconMessage } from "@/components/Message";
+import { useGlobalStats } from "@/lib/hooks/useGlobalStats";
+
+import { LoadingBox } from "../ReplayBrowser/ReplayBrowser";
+import { StatSection } from "../ReplayFileStats/GameProfile";
+import { AnalysisStats } from "./analysis/AnalysisStats";
+import { GeneralStats } from "./general/GeneralStats";
+import { ProgressionStats } from "./progression/ProgressionStats";
+import { RandomStats } from "./random/RandomStats";
+
+const Outer = styled.div<{
+  backgroundImage?: any;
+}>`
+  position: relative;
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  &::before {
+    z-index: -1;
+    position: absolute;
+    height: 100%;
+    width: 100%;
+    content: "";
+    background-size: cover;
+    background-position: center center;
+    background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.6) 0 100%),
+      ${(p) => (p.backgroundImage ? `url("${p.backgroundImage}")` : "")};
+    box-shadow: inset 0 0 2000px rgba(255, 255, 255, 0.2);
+    filter: blur(10px);
+  }
+`;
+
+const Content = styled.div`
+  display: flex;
+  flex: 1;
+  overflow: auto;
+`;
+
+export interface GlobalStatsProps {
+  files: FileResult[];
+  onClose: () => void;
+}
+
+export const GlobalStats: React.FC<GlobalStatsProps> = ({ onClose }) => {
+  const setActive = useGlobalStats((store) => store.setActiveView);
+  const activeView = useGlobalStats((store) => store.active);
+  const isLoading = useGlobalStats((store) => store.loading);
+  const stats = useGlobalStats((store) => store.stats);
+  const progressionStats = useGlobalStats((store) => store.progression);
+  // const filters = {
+  //   characters: [],
+  //   opponentCharacters: [],
+  //   opponents: [],
+  //   stages: [],
+  // };
+  const error = undefined;
+
+  const getButtonVariant = (view: string) => (view == activeView ? "contained" : "outlined");
+
+  return (
+    <Outer>
+      <BasicFooter>
+        <div
+          css={css`
+            display: flex;
+            flex-direction: column;
+            margin-left: 10px;
+            padding-right: 20px;
+          `}
+        >
+          <div
+            css={css`
+              font-weight: bold;
+              text-transform: uppercase;
+              color: white;
+            `}
+          >
+            <IconButton onClick={onClose} disabled={false} css={css``} size="large">
+              <ArrowBackIosIcon fontSize="small" />
+            </IconButton>
+            Back
+          </div>
+        </div>
+        <div
+          css={css`
+            margin-left: auto;
+            margin-right: 50px;
+          `}
+        >
+          <Button css={css``}>Filter</Button>
+        </div>
+      </BasicFooter>
+      <Content>
+        {error ? (
+          <IconMessage Icon={ErrorIcon} label={`Error: ${error ?? JSON.stringify(error, null, 2)}`} />
+        ) : isLoading || !stats ? (
+          <LoadingBox />
+        ) : (
+          <>
+            <div style={{ flex: "1", margin: "auto", maxWidth: 1500 }}>
+              <StatSection>
+                <div
+                  css={css`
+                    display: flex;
+                    flex-direction: row;
+                    flex: 1;
+                    align-items: center;
+                  `}
+                >
+                  <Button
+                    onClick={() => setActive("general")}
+                    variant={getButtonVariant("general")}
+                    css={css`
+                      margin: auto;
+                    `}
+                  >
+                    General
+                  </Button>
+                  <Button
+                    onClick={() => setActive("progression")}
+                    variant={getButtonVariant("progression")}
+                    css={css`
+                      margin: auto;
+                    `}
+                  >
+                    Progression
+                  </Button>
+                  <Button
+                    onClick={() => setActive("analysis")}
+                    variant={getButtonVariant("analysis")}
+                    css={css`
+                      margin: auto;
+                    `}
+                  >
+                    Analysis
+                  </Button>
+                  <Button
+                    onClick={() => setActive("random")}
+                    variant={getButtonVariant("random")}
+                    css={css`
+                      margin: auto;
+                    `}
+                  >
+                    Random
+                  </Button>
+                </div>
+              </StatSection>
+              {activeView == "general" ? (
+                <GeneralStats player={"EAST#312"!} stats={stats}></GeneralStats>
+              ) : activeView == "progression" ? (
+                <ProgressionStats player={"EAST#312"!} stats={progressionStats}></ProgressionStats>
+              ) : activeView == "analysis" ? (
+                <AnalysisStats player={"EAST#312"!} stats={stats}></AnalysisStats>
+              ) : activeView == "random" ? (
+                <RandomStats player={"EAST#312"!} stats={progressionStats}></RandomStats>
+              ) : null}
+            </div>
+          </>
+        )}
+      </Content>
+    </Outer>
+  );
+};

src/renderer/containers/GlobalStats/analysis/AnalysisStats.tsx

@@ -0,0 +1,90 @@
+import { colors } from "@common/colors";
+import { css } from "@mui/material";
+import React from "react";
+import { PolarAngleAxis, PolarGrid, Radar, RadarChart, ResponsiveContainer } from "recharts";
+import type { GlobalStats } from "stats/stats";
+
+import { StatSection } from "@/containers/ReplayFileStats/GameProfile";
+
+import { ThrowsTable } from "./ThrowsTable";
+
+interface AnalysisStatsProps {
+  player: string;
+  stats: GlobalStats;
+}
+
+export const AnalysisStats: React.FC<AnalysisStatsProps> = (props) => {
+  const stats = props.stats;
+  const techs = stats.actions.groundTechCount;
+  const throws = stats.actions.throwCount;
+
+  const techData = [
+    { subject: "neutral", value: techs.neutral },
+    { subject: "in", value: techs.in },
+    { subject: "fail", value: techs.fail },
+    { subject: "away", value: techs.away },
+  ];
+
+  const throwData = [
+    { subject: "up", value: throws.up },
+    { subject: "forward", value: throws.forward },
+    { subject: "down", value: throws.down },
+    { subject: "back", value: throws.back },
+  ];
+
+  // TODO
+  // stack area chart for techs / aerials / throws
+
+  return (
+    <>
+      <StatSection title="Progression" align="center">
+        <ResponsiveContainer>
+          <div
+            css={css`
+              display: flex;
+              flex-wrap: wrap;
+              flex-direction: row;
+              align-items: top;
+              height: 400px;
+              margin: auto;
+            `}
+          >
+            <RadarChart outerRadius={90} width={400} height={400} data={throwData} style={{ margin: "auto" }}>
+              <PolarGrid />
+              <PolarAngleAxis dy={5} dataKey="subject" />
+              <Radar name="" dataKey="value" stroke={colors.greenDark} fill={colors.greenDark} fillOpacity={0.6} />
+            </RadarChart>
+            <ThrowsTable stats={stats} />
+            <ThrowsTable stats={stats} />
+          </div>
+        </ResponsiveContainer>
+      </StatSection>
+      <StatSection title="Progression" align="center">
+        <ResponsiveContainer>
+          <div
+            css={css`
+              display: flex;
+              flex-wrap: wrap;
+              flex-direction: row;
+              align-items: center;
+              height: 400px;
+              margin: auto;
+            `}
+          >
+            <RadarChart outerRadius={90} width={400} height={400} data={techData} style={{ margin: "auto" }}>
+              <PolarGrid />
+              <PolarAngleAxis dy={5} dataKey="subject" />
+              <Radar name="" dataKey="value" stroke={colors.greenDark} fill={colors.greenDark} fillOpacity={0.6} />
+            </RadarChart>
+          </div>
+        </ResponsiveContainer>
+      </StatSection>
+
+      <div
+        css={css`
+          min-height: 50px;
+        `}
+      />
+    </>
+  );
+};

src/renderer/containers/GlobalStats/analysis/ThrowsTable.tsx

@@ -0,0 +1,40 @@
+import { css } from "@mui/material";
+import React from "react";
+import type { GlobalStats } from "stats/general";
+
+import * as T from "@/containers/ReplayFileStats/TableStyles";
+
+interface ThrowsTableProps {
+  stats: GlobalStats;
+}
+
+const generatePunishRow = () => {
+  return (
+    <T.TableRow style={{ textAlign: "center" }} key={`${1}-${1}-punish-${1}`}>
+      <T.TableCell>Hello</T.TableCell>
+      <T.TableCell>Hello</T.TableCell>
+      <T.TableCell>Hello</T.TableCell>
+      <T.TableCell>Hello</T.TableCell>
+    </T.TableRow>
+  );
+};
+
+export const ThrowsTable: React.FC<ThrowsTableProps> = () => {
+  return (
+    <div
+      css={css`
+        margin-left: auto;
+        margin-right: auto;
+        margin-top: 50px;
+      `}
+    >
+      <T.Table>
+        <thead></thead>
+        <tbody>
+          {generatePunishRow()}
+          {generatePunishRow()}
+        </tbody>
+      </T.Table>
+    </div>
+  );
+};