- {drawings.map((d) => (
-
- ))}
+
+ {drawingIds
+ .map((did) => )
+ .reverse()}
);
});
export function DrawingList() {
const hasDrawings = useDeferredValue(
- useDrawState((s) => !!s.drawings.length),
+ useAppState(drawingsSlice.selectors.haveDrawings),
);
- const showEligible = useDeferredValue(
- useConfigState((cfg) => cfg.showEligibleCharts),
- );
- if (showEligible) {
- return (
-
}>
-
}>
-
-
-
- );
- }
if (!hasDrawings) {
return (
@@ -68,19 +47,3 @@ export function DrawingList() {
);
}
-
-function DelayedSpinner(props: { timeout?: number }) {
- const [show, updateShow] = useState(false);
- useEffect(() => {
- if (show) return;
-
- const timeout = setTimeout(() => {
- updateShow(true);
- }, props.timeout || 250);
- return () => clearTimeout(timeout);
- }, [props.timeout, show]);
- if (show) {
- return
;
- }
- return null;
-}
diff --git a/src/drawn-set.css b/src/drawn-set.css
index 49b259ea2..510e083e8 100644
--- a/src/drawn-set.css
+++ b/src/drawn-set.css
@@ -19,6 +19,11 @@ body:global(.bp5-dark) {
position: relative;
}
+.drawing[data-focused] {
+ outline: 2px inset red;
+ outline-offset: -2px;
+}
+
body:global(.obs-layer) .drawing {
background-image: none !important;
}
diff --git a/src/drawn-set.tsx b/src/drawn-set.tsx
index 36b553056..5f31158cd 100644
--- a/src/drawn-set.tsx
+++ b/src/drawn-set.tsx
@@ -2,13 +2,15 @@ import { memo, useState } from "react";
import { ErrorBoundary } from "react-error-boundary";
import { SongCard } from "./song-card";
import styles from "./drawn-set.css";
-import { Drawing } from "./models/Drawing";
import { SetLabels } from "./tournament-mode/drawing-labels";
import { DrawingProvider, useDrawing } from "./drawing-context";
import { DrawingActions } from "./tournament-mode/drawing-actions";
-import { SyncWithPeers } from "./tournament-mode/sync-with-peers";
-import { useConfigState } from "./config-state";
import { ErrorFallback } from "./utils/error-fallback";
+import { useAtomValue } from "jotai";
+import { showPlayerAndRoundLabels } from "./config-state";
+import { EligibleChart } from "./models/Drawing";
+import { ConfigContextProvider } from "./state/hooks";
+import { useAppState } from "./state/store";
const HUE_STEP = (255 / 8) * 3;
let hue = Math.floor(Math.random() * 255);
@@ -19,7 +21,21 @@ function getRandomGradiant() {
}
interface Props {
- drawing: Drawing;
+ drawingId: string;
+}
+
+export function ChartsOnly({ drawingId }: Props) {
+ const configId = useAppState((s) => s.drawings.entities[drawingId]?.configId);
+ if (!configId) {
+ return null;
+ }
+ return (
+
+
+
+
+
+ );
}
function ChartList() {
@@ -33,18 +49,22 @@ function ChartList() {
);
}
+export function RawChartList(props: { charts: Array
}) {
+ return (
+
+ {props.charts.map((c, idx) => (
+
+ ))}
+
+ );
+}
+
function ChartFromContext({ chartId }: { chartId: string }) {
const chart = useDrawing((d) => d.charts.find((c) => c.id === chartId));
- const veto = useDrawing((d) => d.bans.find((b) => b.chartId === chartId));
- const protect = useDrawing((d) =>
- d.protects.find((b) => b.chartId === chartId),
- );
- const pocketPick = useDrawing((d) =>
- d.pocketPicks.find((b) => b.chartId === chartId),
- );
- const winner = useDrawing((d) =>
- d.winners.find((b) => b.chartId === chartId),
- );
+ const veto = useDrawing((d) => d.bans[chartId]);
+ const protect = useDrawing((d) => d.protects[chartId]);
+ const pocketPick = useDrawing((d) => d.pocketPicks[chartId]);
+ const winner = useDrawing((d) => d.winners[chartId]);
if (!chart) {
return null;
}
@@ -54,7 +74,7 @@ function ChartFromContext({ chartId }: { chartId: string }) {
protectedBy={protect?.player}
replacedBy={pocketPick?.player}
replacedWith={pocketPick?.pick}
- winner={winner?.player}
+ winner={winner}
chart={chart}
actionsEnabled
/>
@@ -62,48 +82,54 @@ function ChartFromContext({ chartId }: { chartId: string }) {
}
function TournamentModeSpacer() {
- const showLabels = useConfigState((s) => s.showPlayerAndRoundLabels);
+ const showLabels = useAtomValue(showPlayerAndRoundLabels);
if (showLabels) {
return null;
}
return ;
}
-const DrawnSet = memo(function DrawnSet({ drawing }) {
+const DrawnSet = memo(function DrawnSet({ drawingId }) {
const [backgroundImage] = useState(getRandomGradiant());
+ const configId = useAppState((s) => s.drawings.entities[drawingId]?.configId);
+ if (!configId) {
+ return null;
+ }
return (
-
-
+
+
+
+
+ }
+ >
-
-
- }
- >
-
-
-
+
+
);
});
diff --git a/src/drop-handler.tsx b/src/drop-handler.tsx
index 4a0696c0c..8327c6a9f 100644
--- a/src/drop-handler.tsx
+++ b/src/drop-handler.tsx
@@ -8,11 +8,12 @@ import {
} from "@blueprintjs/core";
import { useCallback, useEffect, useMemo, useState } from "react";
import type { PackWithSongs } from "simfile-parser/browser";
-import { useDrawState } from "./draw-state";
import { getDataFileFromPack } from "./utils/itg-import";
import { pause } from "./utils/pause";
import { convertErrorToString } from "./utils/error-to-string";
import { Import } from "@blueprintjs/icons";
+import { useSetAtom } from "jotai";
+import { customDataCache } from "./state/game-data.atoms";
function loadParserModule() {
return import("simfile-parser/browser");
@@ -116,7 +117,7 @@ function useDataParsing(
function ConfirmPackDialog({ droppedFolder, onClose, onSave }: DialogProps) {
const [tiered, setTiered] = useState(false);
const [saving, setSaving] = useState(false);
- const loadGameData = useDrawState((s) => s.addImportedData);
+ const setCustomData = useSetAtom(customDataCache);
const { parsedPack, parseError } = useDataParsing(droppedFolder, setTiered);
const derivedData = useMemo(() => {
@@ -131,12 +132,17 @@ function ConfirmPackDialog({ droppedFolder, onClose, onSave }: DialogProps) {
return;
}
setSaving(true);
- loadGameData(parsedPack.name, derivedData);
+ setCustomData((prev) => {
+ return {
+ ...prev,
+ [parsedPack.name]: derivedData,
+ };
+ });
pause(500).then(() => {
setSaving(false);
onSave();
});
- }, [parsedPack, derivedData, loadGameData, onSave]);
+ }, [parsedPack, derivedData, setCustomData, onSave]);
const maybeSkeleton = derivedData ? "" : Classes.SKELETON;
diff --git a/src/eligible-charts/filter.tsx b/src/eligible-charts/filter.tsx
index ca1a2ad5e..e34e666cd 100644
--- a/src/eligible-charts/filter.tsx
+++ b/src/eligible-charts/filter.tsx
@@ -1,6 +1,6 @@
import { HTMLSelect } from "@blueprintjs/core";
import { atom, useAtom } from "jotai";
-import { useConfigState } from "../config-state";
+import { useConfigState } from "../state/hooks";
import { useIntl } from "../hooks/useIntl";
export const currentTabAtom = atom("all");
diff --git a/src/eligible-charts/histogram.tsx b/src/eligible-charts/histogram.tsx
index df5dcc0be..360942930 100644
--- a/src/eligible-charts/histogram.tsx
+++ b/src/eligible-charts/histogram.tsx
@@ -9,30 +9,29 @@ import {
} from "victory";
import { useMemo } from "react";
import { CountingSet } from "../utils/counting-set";
-import { useDrawState } from "../draw-state";
-import { useIntl } from "../hooks/useIntl";
import {
chartLevelOrTier,
getAvailableLevels,
- getDiffClass,
- getMetaString,
+ useGetDiffClass,
+ useGetMetaString,
} from "../game-data-utils";
import { Theme, useTheme } from "../theme-toggle";
import { useIsNarrow } from "../hooks/useMediaQuery";
-import { useConfigState } from "../config-state";
+import { useConfigState, useGameData } from "../state/hooks";
interface Props {
charts: EligibleChart[];
}
export function DiffHistogram({ charts }: Props) {
- const { t } = useIntl();
const fgColor = useTheme() === Theme.Dark ? "white" : undefined;
const isNarrow = useIsNarrow();
- const allDiffs = useDrawState((s) => s.gameData?.meta.difficulties);
- const gameData = useDrawState((s) => s.gameData);
+ const gameData = useGameData();
+ const allDiffs = gameData?.meta.difficulties;
const useGranularLevels = useConfigState((s) => s.useGranularLevels);
const availableLevels = getAvailableLevels(gameData, useGranularLevels);
+ const getDiffClass = useGetDiffClass();
+ const getMetaString = useGetMetaString();
function formatLabel(idx: number) {
const n = availableLevels[idx];
if (!n) return "";
@@ -56,16 +55,16 @@ export function DiffHistogram({ charts }: Props) {
}
const orderedLevels = Array.from(allLevels.values()).sort((a, b) => a - b);
const difficulties = (allDiffs || [])
- .filter((d) => !!countByClassAndLvl[getDiffClass(t, d.key)])
+ .filter((d) => !!countByClassAndLvl[getDiffClass(d.key)])
.reverse();
const dataPerDiff = difficulties.map((diff) => ({
color: diff.color,
key: diff.key,
- label: getMetaString(t, diff.key),
+ label: getMetaString(diff.key),
data: orderedLevels.map((lvl) => ({
xPlacement: availableLevels.indexOf(lvl),
level: lvl,
- count: countByClassAndLvl[getDiffClass(t, diff.key)].get(lvl) || 0,
+ count: countByClassAndLvl[getDiffClass(diff.key)].get(lvl) || 0,
})),
}));
return [
@@ -76,7 +75,14 @@ export function DiffHistogram({ charts }: Props) {
.sort((a, b) => a[0] - b[0])
.map(([, count]) => count),
];
- }, [allDiffs, charts, useGranularLevels, t, availableLevels]);
+ }, [
+ allDiffs,
+ charts,
+ useGranularLevels,
+ getDiffClass,
+ getMetaString,
+ availableLevels,
+ ]);
return (
s.gameData);
+export default function EligibleChartsView() {
+ const [configId, setConfigId] = useState(null);
+ const selector = (
+
+ );
+
+ if (!configId) {
+ return selector;
+ }
+
+ return (
+ <>
+ {selector}
+
+
+
+
+ );
+}
+
+export function EligibleChartsList() {
+ const gameData = useGameData();
const [currentTab] = useDeferredValue(useAtom(currentTabAtom));
const configState = useDeferredValue(useConfigState());
const isNarrow = useIsNarrow();
@@ -67,7 +91,7 @@ export default function EligibleChartsList() {
{charts.length} eligible charts from {songs.size} songs (of{" "}
{gameData.songs.length} total)
- {configState.flags.size > 0 && !isNarrow && (
+ {configState.flags.length > 0 && !isNarrow && (
diff --git a/src/game-data-utils.tsx b/src/game-data-utils.tsx
index bed72b1eb..2c1fdded4 100644
--- a/src/game-data-utils.tsx
+++ b/src/game-data-utils.tsx
@@ -1,18 +1,30 @@
+import { useCallback } from "react";
import { useIntl } from "./hooks/useIntl";
import { EligibleChart } from "./models/Drawing";
import { Chart, GameData, I18NDict } from "./models/SongData";
+import { useConfigState } from "./state/hooks";
-export function getMetaString(t: (key: string) => string, key: string) {
- return t("meta." + key);
+export function useGetMetaString() {
+ const { t } = useIntl();
+ const gameKey = useConfigState((c) => c.gameKey);
+ return useCallback(
+ (key: string) => t(`game.${gameKey}.${key}`),
+ [gameKey, t],
+ );
}
export function MetaString({ key }: { key: string }) {
- const { t } = useIntl();
- return <>{getMetaString(t, key)};
+ const getMetaString = useGetMetaString();
+ return <>{getMetaString(key)};
}
-export function getDiffClass(t: (key: string) => string, diffClassKey: string) {
- return t("meta.$abbr." + diffClassKey);
+export function useGetDiffClass() {
+ const { t } = useIntl();
+ const gameKey = useConfigState((c) => c.gameKey);
+ return useCallback(
+ (diffClassKey: string) => t(`game.${gameKey}.$abbr.${diffClassKey}`),
+ [gameKey, t],
+ );
}
interface AbbrProps {
@@ -20,8 +32,8 @@ interface AbbrProps {
}
export function AbbrDifficulty({ diffClass }: AbbrProps) {
- const { t } = useIntl();
- return <>{getDiffClass(t, diffClass)};
+ const getDiffClass = useGetDiffClass();
+ return <>{getDiffClass(diffClass)};
}
/**
diff --git a/src/header.tsx b/src/header.tsx
index 290758428..e496147f2 100644
--- a/src/header.tsx
+++ b/src/header.tsx
@@ -8,19 +8,23 @@ import {
Popover,
} from "@blueprintjs/core";
import { Trash, InfoSign, Menu as MenuIcon, Help } from "@blueprintjs/icons";
-import { useState } from "react";
+import { useCallback, useState } from "react";
import { About } from "./about";
import { HeaderControls } from "./controls";
import { useIntl } from "./hooks/useIntl";
import { LastUpdate } from "./last-update";
import { ThemeToggle } from "./theme-toggle";
-import { DataLoadingSpinner, VersionSelect } from "./version-select";
-import { useDrawState } from "./draw-state";
+import { useAppDispatch, useAppState } from "./state/store";
+import { drawingsSlice } from "./state/drawings.slice";
export function Header() {
const [aboutOpen, setAboutOpen] = useState(false);
- const clearDrawings = useDrawState((d) => d.clearDrawings);
- const haveDrawings = useDrawState((d) => !!d.drawings.length);
+ const dispatch = useAppDispatch();
+ const clearDrawings = useCallback(
+ () => dispatch(drawingsSlice.actions.clearDrawings()),
+ [dispatch],
+ );
+ const haveDrawings = useAppState(drawingsSlice.selectors.haveDrawings);
const { t } = useIntl();
const menu = (
@@ -63,8 +67,12 @@ export function Header() {
} data-umami-event="hamburger-menu-open" />
-
-
+
+ Event Mode{" "}
+
+ Alpha Preview
+
+
diff --git a/src/hooks/useDataSets.ts b/src/hooks/useDataSets.ts
index ba87d4d2d..621ddb7d2 100644
--- a/src/hooks/useDataSets.ts
+++ b/src/hooks/useDataSets.ts
@@ -1,17 +1,15 @@
import { useMemo } from "react";
-import { useDrawState } from "../draw-state";
import { availableGameData } from "../utils";
+import { customDataCache } from "../state/game-data.atoms";
+import { useAtomValue } from "jotai";
export function useDataSets() {
- const dataSetName = useDrawState((s) => s.dataSetName);
- const loadGameData = useDrawState((s) => s.loadGameData);
- const dataIsLoaded = useDrawState((s) => !!s.gameData);
- const importedData = useDrawState((s) => s.importedData);
+ const importedData = useAtomValue(customDataCache);
const available = useMemo(() => {
return [
...availableGameData,
- ...Array.from(importedData.values()).map((d) => ({
+ ...Object.values(importedData).map((d) => ({
name: d.i18n.en.name as string,
display: d.i18n.en.name as string,
parent: d.meta.menuParent || "imported",
@@ -19,12 +17,7 @@ export function useDataSets() {
];
}, [importedData]);
- const current = available.find((s) => s.name === dataSetName) || available[0];
-
return {
available,
- current,
- loadData: loadGameData,
- dataIsLoaded,
};
}
diff --git a/src/hooks/useFuzzySearch.ts b/src/hooks/useFuzzySearch.ts
new file mode 100644
index 000000000..4d79d6dd0
--- /dev/null
+++ b/src/hooks/useFuzzySearch.ts
@@ -0,0 +1,14 @@
+import FuzzySearch from "fuzzy-search";
+import { useGameData } from "../state/hooks";
+
+export function useFuzzySearch() {
+ const gameData = useGameData();
+ if (!gameData) return null;
+ return new FuzzySearch(
+ gameData.songs,
+ ["name", "name_translation", "search_hint", "artist", "artist_translation"],
+ {
+ sort: true,
+ },
+ );
+}
diff --git a/src/intl-provider.tsx b/src/intl-provider.tsx
index 58b1623ad..656d52565 100644
--- a/src/intl-provider.tsx
+++ b/src/intl-provider.tsx
@@ -1,43 +1,47 @@
+import { useAtomValue } from "jotai";
+import { ReactNode, useMemo } from "react";
import { IntlProvider as UpstreamProvider } from "react-intl";
-import { PropsWithChildren, useMemo } from "react";
-import { flattenedKeys } from "./utils";
+import translations from "./assets/i18n.json";
import { I18NDict } from "./models/SongData";
+import { detectedLanguage, flattenedKeys } from "./utils";
+import { stockDataCache } from "./state/game-data.atoms";
const FALLBACK_LOCALE = "en";
-interface Props {
- locale: string;
- translations: Record;
- mergeTranslations?: Record;
-}
+const typedTranslations = translations as Record;
+
+export function IntlProvider({ children }: { children: ReactNode }) {
+ const allLoadedData = useAtomValue(stockDataCache);
-export function IntlProvider({
- locale,
- translations,
- mergeTranslations,
- children,
-}: PropsWithChildren) {
const messages = useMemo(() => {
const ret: Record = {};
- for (const [k, v] of flattenedKeys(translations[FALLBACK_LOCALE])) {
+ for (const [k, v] of flattenedKeys(typedTranslations[FALLBACK_LOCALE])) {
ret[k] = v;
}
- for (const [k, v] of flattenedKeys(translations[locale])) {
+ for (const [k, v] of flattenedKeys(typedTranslations[detectedLanguage])) {
ret[k] = v;
}
- if (mergeTranslations) {
- for (const [k, v] of flattenedKeys(mergeTranslations[FALLBACK_LOCALE])) {
- ret[`meta.${k}`] = v;
- }
- for (const [k, v] of flattenedKeys(mergeTranslations[locale])) {
- ret[`meta.${k}`] = v;
+ for (const [gameKey, data] of Object.entries(allLoadedData)) {
+ const gameSpecificTranslations = data.i18n;
+ if (gameSpecificTranslations) {
+ const keyPrefix = `game.${gameKey}.`;
+ for (const [k, v] of flattenedKeys(
+ gameSpecificTranslations[FALLBACK_LOCALE],
+ )) {
+ ret[keyPrefix + k] = v;
+ }
+ for (const [k, v] of flattenedKeys(
+ gameSpecificTranslations[detectedLanguage],
+ )) {
+ ret[keyPrefix + k] = v;
+ }
}
}
return ret;
- }, [translations, mergeTranslations, locale]);
+ }, [allLoadedData]);
return (
-
+
{children}
);
diff --git a/src/last-update.tsx b/src/last-update.tsx
index ddd9e4a86..d17a0c0c2 100644
--- a/src/last-update.tsx
+++ b/src/last-update.tsx
@@ -1,31 +1,37 @@
-import { Classes, Text } from "@blueprintjs/core";
-import cn from "classnames";
-import { FormattedMessage } from "react-intl";
-import { shallow } from "zustand/shallow";
-import { useDrawState } from "./draw-state";
-import { detectedLanguage } from "./utils";
+// import { Classes, Text } from "@blueprintjs/core";
+// import cn from "classnames";
+// import { FormattedMessage } from "react-intl";
+// import { detectedLanguage } from "./utils";
+// import { useAppState } from "./state/store";
+// import { useStockGameData } from "./state/game-data.atoms";
export function LastUpdate() {
- const [dataSetName, gameData] = useDrawState(
- (s) => [s.dataSetName, s.gameData],
- shallow,
- );
- if (!gameData) {
- return null;
- }
- const lastUpdate = new Date(gameData.meta.lastUpdated);
- return (
-
-
-
- );
+ return null; // for now it doesn't make sense because a config can't be selected globally
+ // const dataSetName = useAppState((s) => s.config.current);
+ // if (!dataSetName) {
+ // return null;
+ // }
+ // return ;
}
+
+// function LastUpdateForGame(props: { game: string }) {
+// const gameData = useStockGameData(props.game);
+// if (!gameData) {
+// return null;
+// }
+// const lastUpdate = new Date(gameData.meta.lastUpdated);
+// return (
+//
+//
+//
+// );
+// }
diff --git a/src/main-view.css b/src/main-view.css
new file mode 100644
index 000000000..e5399647f
--- /dev/null
+++ b/src/main-view.css
@@ -0,0 +1,18 @@
+.mainView {
+ flex: 1 1 0px;
+ display: flex;
+ flex-direction: column;
+ height: 100%;
+ overflow: hidden;
+}
+
+/* the tabs themselves */
+.mainView > div:first-child {
+ flex: 0 0 auto;
+}
+
+/* all the full page tab contents */
+.mainView > div:not(:first-child) {
+ flex: 1 1 auto;
+ overflow-y: auto;
+}
diff --git a/src/main-view.tsx b/src/main-view.tsx
new file mode 100644
index 000000000..5620f0533
--- /dev/null
+++ b/src/main-view.tsx
@@ -0,0 +1,46 @@
+import { Tabs, Tab } from "@blueprintjs/core";
+import { PlayerNamesControls } from "./controls/player-names";
+import { DrawingList } from "./drawing-list";
+import { atom, useAtom } from "jotai";
+import styles from "./main-view.css";
+import { lazy, Suspense } from "react";
+import { ErrorBoundary } from "react-error-boundary";
+import { ErrorFallback } from "./utils/error-fallback";
+import { DelayedSpinner } from "./common-components/delayed-spinner";
+
+export type MainTabId = "drawings" | "players" | "sets";
+export const mainTabAtom = atom("drawings");
+
+const EligibleChartsList = lazy(() => import("./eligible-charts"));
+
+export function MainView() {
+ const [currentTab, setCurrentTab] = useAtom(mainTabAtom);
+ return (
+ setCurrentTab(newTabId)}
+ >
+ }>
+ Drawings
+
+ }>
+ }>
+
+
+
+ }
+ >
+ Eligible Charts
+
+ }>
+ Start.gg Sync
+
+
+ );
+}
diff --git a/src/matches.tsx b/src/matches.tsx
new file mode 100644
index 000000000..16af2c099
--- /dev/null
+++ b/src/matches.tsx
@@ -0,0 +1,206 @@
+import { Button, Card, Classes, Spinner, Text } from "@blueprintjs/core";
+import { useStartggMatches, useStartggPhases } from "./startgg-gql";
+import { createAppSelector, useAppState } from "./state/store";
+import { inferShortname } from "./controls/player-names";
+import { Refresh } from "@blueprintjs/icons";
+
+export interface PickedMatch {
+ title: string;
+ players: Array<{ id: string; name: string }>;
+ id: string;
+ subtype: "versus" | "gauntlet";
+}
+
+const associatedMatchIds = createAppSelector(
+ [(s) => s.drawings.entities],
+ (entities) => {
+ return Object.values(entities).flatMap((drawing) => {
+ if (drawing.meta.type === "startgg") return drawing.meta.id;
+ return [];
+ });
+ },
+);
+
+export function MatchPicker(props: { onPickMatch?(match: PickedMatch): void }) {
+ const [resp, refetch] = useStartggMatches();
+ const existingMatches = useAppState(associatedMatchIds);
+ const event = resp.data?.event;
+ const matches = event?.sets?.nodes;
+ const reloadButton = (
+ : }
+ onClick={() => refetch({ requestPolicy: "network-only" })}
+ />
+ );
+ if (!event) {
+ return (
+
+ {reloadButton} startgg didn't have an event for the current slug
+
+ );
+ }
+ if (!matches) {
+ if (resp.fetching) {
+ return (
+
+ {reloadButton}
+
+ loading content for a match
+
+
+ loading content for a match
+
+
+ loading content for a match
+
+
{reloadButton} startgg didn't respond matches
;
+ }
+ }
+ if (!matches.length)
+ return {reloadButton} no un-settled matches found
;
+
+ return (
+
+ {reloadButton}
+ {matches
+ .filter((m) => !!m)
+ .map((match) => {
+ const title = match.fullRoundText || "???";
+ const p1 = inferShortname(match.slots![0]?.entrant?.name);
+ const p2 = inferShortname(match.slots![1]?.entrant?.name);
+ const matchUsed = existingMatches.includes(match.id!);
+ return (
+
+ props.onPickMatch?.({
+ title,
+ players: match.slots!.map((slot) => ({
+ id: slot!.entrant!.id!,
+ name: inferShortname(slot!.entrant!.name)!,
+ })),
+ id: match.id!,
+ subtype: "versus",
+ })
+ }
+ >
+
+ {title} - {p1 || TBD} vs{" "}
+ {p2 || TBD}
+
+
+ );
+ })}
+
+ );
+}
+
+export function GauntletPicker(props: {
+ onPickMatch?(match: PickedMatch): void;
+}) {
+ const [resp, refetch] = useStartggPhases();
+ const existingMatches = useAppState(associatedMatchIds);
+ const event = resp.data?.event;
+ const phases = event?.phases?.filter(
+ (p) => p?.bracketType === "CUSTOM_SCHEDULE",
+ );
+ const reloadButton = (
+ : }
+ onClick={() => refetch({ requestPolicy: "network-only" })}
+ />
+ );
+ if (!event) {
+ return (
+
+ {reloadButton} startgg didn't have an event for the current slug
+
+ );
+ }
+ if (!phases) {
+ if (resp.fetching) {
+ return (
+
+ {reloadButton}
+
+ loading content for a gauntlet
+
+
+ loading content for a gauntlet
+
+
+ loading content for a gauntlet
+
+
{reloadButton} startgg didn't respond with phases
;
+ }
+ }
+ if (!phases.length)
+ return {reloadButton} no phases with custom schedule found
;
+
+ return (
+
+ {reloadButton}
+ {phases
+ .filter((p) => !!p)
+ .map((phase) => {
+ const title = phase.name || "???";
+ const entrants =
+ phase.seeds?.nodes?.flatMap((seed) => {
+ if (
+ !seed ||
+ !seed.entrant ||
+ !seed.entrant.name ||
+ !seed.entrant.id
+ ) {
+ return [];
+ }
+ return {
+ name: inferShortname(seed.entrant.name),
+ id: seed.entrant.id,
+ };
+ }) || [];
+ const matchUsed = existingMatches.includes(phase.id!);
+ return (
+
+ props.onPickMatch?.({
+ title,
+ players: entrants,
+ id: phase.id!,
+ subtype: "gauntlet",
+ })
+ }
+ >
+
+ {title} (
+ {entrants.map((e) => e.name).join(", ")})
+
+
+ );
+ })}
+
+ );
+}
diff --git a/src/models/Drawing.ts b/src/models/Drawing.ts
index 728219326..71966e644 100644
--- a/src/models/Drawing.ts
+++ b/src/models/Drawing.ts
@@ -1,4 +1,3 @@
-import { DataConnection } from "peerjs";
import { Song } from "./SongData";
export interface EligibleChart {
@@ -38,19 +37,84 @@ export interface PlayerActionOnChart {
export interface PocketPick extends PlayerActionOnChart {
pick: EligibleChart;
- targetType: typeof CHART_PLACEHOLDER | typeof CHART_DRAWN;
}
-export interface Drawing {
+interface StartggMeta {
+ type: "startgg";
+ title: string;
+ entrants: Array<{ id: string; name: string }>;
+ /** first index is entrant ID, second index is the drawn chart ID */
+ scoresByEntrant?: Record>;
+}
+
+export interface StartggVersusMeta extends StartggMeta {
+ subtype: "versus";
+ /** id of the set */
+ id: string;
+}
+
+export interface StartggGauntletMeta extends StartggMeta {
+ subtype: "gauntlet";
+ /** id of the phase */
id: string;
- title?: string;
+}
+
+export interface SimpleMeta {
+ type: "simple";
+ title: string;
+ /** plain player names */
players: string[];
+}
+
+export function playerCount(meta: Drawing["meta"]) {
+ switch (meta.type) {
+ case "simple":
+ return meta.players.length;
+ case "startgg":
+ return meta.entrants.length;
+ }
+}
+
+export function getAllPlayers(d: Pick) {
+ const ret = [] as string[];
+ for (let i = 1; i <= playerCount(d.meta); i++) {
+ ret.push(playerNameByDisplayPos(d, i));
+ }
+ return ret;
+}
+
+export function playerNameByDisplayPos(
+ d: Pick,
+ pos: number,
+) {
+ const playerIndex = d.playerDisplayOrder[pos - 1];
+ return playerNameByIndex(d.meta, playerIndex);
+}
+
+export function playerNameByIndex(
+ meta: Drawing["meta"],
+ idx: number,
+ fallback = `P${idx + 1}`,
+) {
+ switch (meta.type) {
+ case "simple":
+ return meta.players[idx] || fallback;
+ case "startgg":
+ return meta.entrants[idx].name || fallback;
+ }
+}
+
+export interface Drawing {
+ id: string;
+ configId: string;
+ meta: SimpleMeta | StartggVersusMeta | StartggGauntletMeta;
+ /** index of items of the players array, in the order they should be displayed */
+ playerDisplayOrder: number[];
+ /** map of song ID to player index */
+ winners: Record;
charts: Array;
- bans: Array;
- protects: Array;
- winners: Array;
- pocketPicks: Array;
+ bans: Record;
+ protects: Record;
+ pocketPicks: Record;
priorityPlayer?: number;
- /** __ prefix avoids serializing this field during sync */
- __syncPeer?: DataConnection;
}
diff --git a/src/obs-sources/cards.tsx b/src/obs-sources/cards.tsx
new file mode 100644
index 000000000..9a930e0ce
--- /dev/null
+++ b/src/obs-sources/cards.tsx
@@ -0,0 +1,12 @@
+import { useParams } from "react-router-dom";
+import { ChartsOnly } from "../drawn-set";
+import { useAppState } from "../state/store";
+
+export function CabCards() {
+ const params = useParams<"roomName" | "cabId">();
+ const drawingId = useAppState((s) => s.event.cabs[params.cabId!].activeMatch);
+ if (!drawingId) {
+ return null;
+ }
+ return ;
+}
diff --git a/src/obs-sources/text.tsx b/src/obs-sources/text.tsx
new file mode 100644
index 000000000..96824c9bd
--- /dev/null
+++ b/src/obs-sources/text.tsx
@@ -0,0 +1,54 @@
+import { useParams } from "react-router-dom";
+import { drawingSelectors } from "../state/drawings.slice";
+import { useAppState } from "../state/store";
+import { getAllPlayers, playerNameByIndex } from "../models/Drawing";
+
+export function CabTitle() {
+ const params = useParams<"roomName" | "cabId">();
+ const text = useAppState((s) => {
+ const drawingId = s.event.cabs[params.cabId!].activeMatch;
+ if (!drawingId) return null;
+ const drawing = drawingSelectors.selectById(s, drawingId);
+ if (!drawing) return null;
+ return drawing.meta.title;
+ });
+ return {text}
;
+}
+
+export function CabPlayers() {
+ const params = useParams<"roomName" | "cabId">();
+ const text = useAppState((s) => {
+ const drawingId = s.event.cabs[params.cabId!].activeMatch;
+ if (!drawingId) return null;
+ const drawing = drawingSelectors.selectById(s, drawingId);
+ if (!drawing) return null;
+ return getAllPlayers(drawing).join(", ");
+ });
+ return {text}
;
+}
+
+export function CabPlayer(props: { p: number }) {
+ const params = useParams<"roomName" | "cabId">();
+ const text = useAppState((s) => {
+ const drawingId = s.event.cabs[params.cabId!].activeMatch;
+ if (!drawingId) return null;
+ const drawing = drawingSelectors.selectById(s, drawingId);
+ if (!drawing) return null;
+ const playerIndex = drawing.playerDisplayOrder[props.p - 1];
+ const name = playerNameByIndex(drawing.meta, playerIndex, "");
+ const hideWins =
+ drawing.meta.type === "startgg" && drawing.meta.subtype === "gauntlet";
+ if (hideWins) {
+ return name;
+ }
+ const score = Object.values(drawing.winners).reduce(
+ (prev, curr) => {
+ if (curr === playerIndex) return prev + 1;
+ return prev;
+ },
+ 0,
+ );
+ return `${name} (${score})`;
+ });
+ return {text}
;
+}
diff --git a/src/party/README.md b/src/party/README.md
new file mode 100644
index 000000000..113b8b895
--- /dev/null
+++ b/src/party/README.md
@@ -0,0 +1 @@
+This is where the partykit server is implemented. See: https://docs.partykit.io/reference/partyserver-api/
diff --git a/src/party/client.tsx b/src/party/client.tsx
new file mode 100644
index 000000000..ebef75964
--- /dev/null
+++ b/src/party/client.tsx
@@ -0,0 +1,83 @@
+import usePartySocket from "partysocket/react";
+import type { Broadcast, ReduxAction } from "./types";
+import { useAppDispatch } from "../state/store";
+import { receivePartyState } from "../state/central";
+import { startAppListening } from "../state/listener-middleware";
+import React, { useEffect, useState } from "react";
+import { Card, NonIdealState, Spinner } from "@blueprintjs/core";
+import { DelayRender } from "../utils/delay-render";
+
+export function PartySocketManager(props: {
+ roomName?: string;
+ children: React.ReactNode;
+}) {
+ const dispatch = useAppDispatch();
+ // TODO move this state to redux???
+ const [ready, setReady] = useState(false);
+ const socket = usePartySocket({
+ room: props.roomName,
+ host:
+ process.env.NODE_ENV === "development"
+ ? "localhost:1999"
+ : "ddr-card-draw-party.noahm.partykit.dev",
+ onMessage(evt) {
+ try {
+ const data: Broadcast = JSON.parse(evt.data);
+ switch (data.type) {
+ case "roomstate":
+ dispatch(receivePartyState(data.state));
+ setReady(true);
+ break;
+ case "action":
+ const foreignAction = {
+ ...data.action,
+ meta: { source: "partykit" },
+ };
+ dispatch(foreignAction);
+ break;
+ }
+ } catch (e) {
+ console.warn("failed to handle party socket message", e);
+ }
+ },
+ });
+
+ useEffect(() => {
+ return startAppListening({
+ predicate(action) {
+ // @ts-expect-error i don't know how to type action meta properties yet
+ if (action.meta?.source === "partykit") {
+ return false;
+ }
+
+ if (receivePartyState.match(action)) {
+ return false;
+ }
+
+ return true;
+ },
+ effect(action) {
+ const message: ReduxAction = {
+ type: "action",
+ action,
+ };
+ socket.send(JSON.stringify(message));
+ },
+ });
+ }, [socket]);
+
+ if (!ready) {
+ return (
+
+
+
+ } title="Connecting..." />
+
+
+
+ );
+ }
+ return props.children;
+}
diff --git a/src/party/database.types.ts b/src/party/database.types.ts
new file mode 100644
index 000000000..2ebf7fb62
--- /dev/null
+++ b/src/party/database.types.ts
@@ -0,0 +1,131 @@
+/* generated with `npx supabase gen types typescript --project-id tawrleybdkxqrcnycmaa > src/party/database.types.ts` */
+
+export type Json =
+ | string
+ | number
+ | boolean
+ | null
+ | { [key: string]: Json | undefined }
+ | Json[];
+
+export type Database = {
+ public: {
+ Tables: {
+ event_state: {
+ Row: {
+ created_at: string;
+ id: string;
+ state: Json | null;
+ updated_at: string;
+ };
+ Insert: {
+ created_at?: string;
+ id: string;
+ state?: Json | null;
+ updated_at?: string;
+ };
+ Update: {
+ created_at?: string;
+ id?: string;
+ state?: Json | null;
+ updated_at?: string;
+ };
+ Relationships: [];
+ };
+ };
+ Views: {
+ [_ in never]: never;
+ };
+ Functions: {
+ [_ in never]: never;
+ };
+ Enums: {
+ [_ in never]: never;
+ };
+ CompositeTypes: {
+ [_ in never]: never;
+ };
+ };
+};
+
+type PublicSchema = Database[Extract];
+
+export type Tables<
+ PublicTableNameOrOptions extends
+ | keyof (PublicSchema["Tables"] & PublicSchema["Views"])
+ | { schema: keyof Database },
+ TableName extends PublicTableNameOrOptions extends { schema: keyof Database }
+ ? keyof (Database[PublicTableNameOrOptions["schema"]]["Tables"] &
+ Database[PublicTableNameOrOptions["schema"]]["Views"])
+ : never = never,
+> = PublicTableNameOrOptions extends { schema: keyof Database }
+ ? (Database[PublicTableNameOrOptions["schema"]]["Tables"] &
+ Database[PublicTableNameOrOptions["schema"]]["Views"])[TableName] extends {
+ Row: infer R;
+ }
+ ? R
+ : never
+ : PublicTableNameOrOptions extends keyof (PublicSchema["Tables"] &
+ PublicSchema["Views"])
+ ? (PublicSchema["Tables"] &
+ PublicSchema["Views"])[PublicTableNameOrOptions] extends {
+ Row: infer R;
+ }
+ ? R
+ : never
+ : never;
+
+export type TablesInsert<
+ PublicTableNameOrOptions extends
+ | keyof PublicSchema["Tables"]
+ | { schema: keyof Database },
+ TableName extends PublicTableNameOrOptions extends { schema: keyof Database }
+ ? keyof Database[PublicTableNameOrOptions["schema"]]["Tables"]
+ : never = never,
+> = PublicTableNameOrOptions extends { schema: keyof Database }
+ ? Database[PublicTableNameOrOptions["schema"]]["Tables"][TableName] extends {
+ Insert: infer I;
+ }
+ ? I
+ : never
+ : PublicTableNameOrOptions extends keyof PublicSchema["Tables"]
+ ? PublicSchema["Tables"][PublicTableNameOrOptions] extends {
+ Insert: infer I;
+ }
+ ? I
+ : never
+ : never;
+
+export type TablesUpdate<
+ PublicTableNameOrOptions extends
+ | keyof PublicSchema["Tables"]
+ | { schema: keyof Database },
+ TableName extends PublicTableNameOrOptions extends { schema: keyof Database }
+ ? keyof Database[PublicTableNameOrOptions["schema"]]["Tables"]
+ : never = never,
+> = PublicTableNameOrOptions extends { schema: keyof Database }
+ ? Database[PublicTableNameOrOptions["schema"]]["Tables"][TableName] extends {
+ Update: infer U;
+ }
+ ? U
+ : never
+ : PublicTableNameOrOptions extends keyof PublicSchema["Tables"]
+ ? PublicSchema["Tables"][PublicTableNameOrOptions] extends {
+ Update: infer U;
+ }
+ ? U
+ : never
+ : never;
+
+export type Enums<
+ PublicEnumNameOrOptions extends
+ | keyof PublicSchema["Enums"]
+ | { schema: keyof Database },
+ EnumName extends PublicEnumNameOrOptions extends { schema: keyof Database }
+ ? keyof Database[PublicEnumNameOrOptions["schema"]]["Enums"]
+ : never = never,
+> = PublicEnumNameOrOptions extends { schema: keyof Database }
+ ? Database[PublicEnumNameOrOptions["schema"]]["Enums"][EnumName]
+ : PublicEnumNameOrOptions extends keyof PublicSchema["Enums"]
+ ? PublicSchema["Enums"][PublicEnumNameOrOptions]
+ : never;
diff --git a/src/party/server.ts b/src/party/server.ts
new file mode 100644
index 000000000..3936f256f
--- /dev/null
+++ b/src/party/server.ts
@@ -0,0 +1,115 @@
+import type * as Party from "partykit/server";
+import type { ReduxAction, Roomstate } from "./types";
+import { configureStore } from "@reduxjs/toolkit";
+import { reducer } from "../state/root-reducer";
+import { AppState, type store as appReduxStore } from "../state/store";
+
+import { createClient } from "@supabase/supabase-js";
+import type { Database, Json } from "./database.types";
+
+const supabase = createClient(
+ process.env.SUPABASE_URL as string,
+ process.env.SUPABASE_KEY as string,
+ { auth: { persistSession: false } },
+);
+
+function isAppState(state: unknown): state is AppState {
+ if (state && !Array.isArray(state) && typeof state === "object") {
+ return "config" in state && "drawings" in state;
+ }
+ return false;
+}
+
+export default class Server implements Party.Server {
+ // @ts-expect-error I assign this for sure
+ private store: typeof appReduxStore;
+
+ constructor(readonly room: Party.Room) {
+ console.log("constructor start");
+ }
+
+ async onStart() {
+ let preloadedState: AppState | undefined;
+ try {
+ preloadedState =
+ (await this.getFromStorage()) || (await this.getFromSupabase());
+ } catch {}
+ if (preloadedState) {
+ this.store = configureStore({ reducer, preloadedState });
+ } else {
+ this.store = configureStore({ reducer });
+ }
+ }
+
+ private async getFromSupabase() {
+ const { data, error } = await supabase
+ .from("event_state")
+ .select("state")
+ .eq("id", this.room.id)
+ .maybeSingle();
+ if (error) {
+ throw new Error(error.message);
+ }
+ if (data && isAppState(data.state)) return data.state;
+ }
+
+ private getFromStorage() {
+ return this.room.storage.get("currentState");
+ }
+
+ onRequest(req: Party.Request): Response | Promise {
+ if (req.method === "GET") {
+ return new Response(this.getRoomState());
+ }
+
+ return new Response("Method not allowed", { status: 405 });
+ }
+
+ onConnect(conn: Party.Connection, ctx: Party.ConnectionContext) {
+ // A websocket just connected!
+ console.log(
+ `Connected:
+ id: ${conn.id}
+ room: ${this.room.id}
+ url: ${new URL(ctx.request.url).pathname}`,
+ );
+
+ // send the initial state to this client
+ conn.send(this.getRoomState());
+ }
+
+ async onMessage(message: string, sender: Party.Connection) {
+ // broadcast it to all the other connections in the room...
+ this.room.broadcast(
+ message,
+ // ...except for the connection it came from
+ [sender.id],
+ );
+
+ const parsed = JSON.parse(message) as ReduxAction;
+ // resolve the new state
+ this.store.dispatch(parsed.action);
+ const nextState = this.store.getState();
+ // persist to partykit storage
+ this.room.storage.put("currentState", nextState);
+ // persist the state to supabase
+ try {
+ await supabase.from("event_state").upsert({
+ id: this.room.id,
+ state: nextState as unknown as Json,
+ updated_at: new Date().toISOString(),
+ });
+ } catch (e) {
+ console.warn("error with upsert", e);
+ }
+ }
+
+ private getRoomState() {
+ return JSON.stringify({
+ type: "roomstate",
+ state: this.store.getState(),
+ });
+ }
+}
+
+Server satisfies Party.Worker;
diff --git a/src/party/types.ts b/src/party/types.ts
new file mode 100644
index 000000000..7aec1910e
--- /dev/null
+++ b/src/party/types.ts
@@ -0,0 +1,15 @@
+import { Action } from "@reduxjs/toolkit";
+import { AppState } from "../state/store";
+
+export interface Roomstate {
+ type: "roomstate";
+ state: AppState;
+}
+
+export interface ReduxAction {
+ type: "action";
+ action: Action;
+}
+
+/** All messages possibly sent by the server to clients */
+export type Broadcast = Roomstate | ReduxAction;
diff --git a/src/song-card/card-label.tsx b/src/song-card/card-label.tsx
index a1c3c05bb..6806646f1 100644
--- a/src/song-card/card-label.tsx
+++ b/src/song-card/card-label.tsx
@@ -3,7 +3,7 @@ import React from "react";
import { Intent, Tag } from "@blueprintjs/core";
import styles from "./card-label.css";
import { Inheritance, BanCircle, Lock, Crown, Draw } from "@blueprintjs/icons";
-import { usePlayerLabel } from "./use-player-label";
+import { usePlayerLabelForIndex } from "./use-player-label";
export enum LabelType {
Protect = 1,
@@ -14,7 +14,7 @@ export enum LabelType {
}
interface Props {
- player: number;
+ playerIdx: number;
type: LabelType;
onRemove?: () => void;
}
@@ -49,8 +49,8 @@ function getIcon(type: LabelType) {
}
}
-export function CardLabel({ player, type, onRemove }: Props) {
- const label = usePlayerLabel(player);
+export function CardLabel({ playerIdx, type, onRemove }: Props) {
+ const label = usePlayerLabelForIndex(playerIdx);
const rootClassname = classNames(styles.cardLabel, {
[styles.winner]: type === LabelType.Winner,
diff --git a/src/song-card/chart-level.tsx b/src/song-card/chart-level.tsx
index 89b556857..ea52f3ada 100644
--- a/src/song-card/chart-level.tsx
+++ b/src/song-card/chart-level.tsx
@@ -1,4 +1,4 @@
-import { useConfigState } from "../config-state";
+import { useConfigState } from "../state/hooks";
import { formatLevel } from "../game-data-utils";
import {
CHART_PLACEHOLDER,
diff --git a/src/song-card/icon-menu.tsx b/src/song-card/icon-menu.tsx
index f673ea922..705d0f386 100644
--- a/src/song-card/icon-menu.tsx
+++ b/src/song-card/icon-menu.tsx
@@ -9,6 +9,7 @@ import {
} from "@blueprintjs/icons";
import { Menu, MenuItem, MenuDivider } from "@blueprintjs/core";
import { useDrawing } from "../drawing-context";
+import { playerNameByIndex } from "../models/Drawing";
interface Props {
onStartPocketPick?: (p: number) => void;
@@ -74,14 +75,17 @@ interface IconRowProps {
}
function PlayerList({ icon, text, onClick }: IconRowProps) {
- const players = useDrawing((d) => d.players);
+ const drawingMeta = useDrawing((d) => d.meta);
+ const players = useDrawing((d) => d.playerDisplayOrder).map(
+ (pIdx) => [playerNameByIndex(drawingMeta, pIdx), pIdx] as const,
+ );
return (