Event mode: it's tournament mode v2

package.json

@@ -4,7 +4,7 @@
   "version": "1.0.0",
   "description": "Tools for music game tournaments and training",
   "engines": {
-    "node": "^18.16.0"
+    "node": "^18.15.0"
   },
   "scripts": {
     "start": "webpack serve --env dev=true",
@@ -45,10 +45,10 @@
     "@pmmmwh/react-refresh-webpack-plugin": "^0.5.8",
     "@types/better-sqlite3": "^7.6.0",
     "@types/fuzzy-search": "^2.1.0",
-    "@types/react": "^17.0.34",
-    "@types/react-dom": "^17.0.11",
-    "autoprefixer": "^10.4.14",
-    "babel-loader": "^9.1.2",
+    "@types/react": "^18.0.0",
+    "@types/react-dom": "^18.0.0",
+    "autoprefixer": "^10.4.0",
+    "babel-loader": "^9.0.0",
     "better-sqlite3": "^8.0.0",
     "cacheable-lookup": "^7.0.0",
     "classnames": "^2.3.1",
@@ -72,17 +72,19 @@
     "json-schema-to-typescript": "^12.0.0",
     "jsonschema": "^1.4.1",
     "mini-css-extract-plugin": "^2.7.6",
+    "nanoid": "^4.0.0",
     "node-fetch": "^2.6.7",
     "normalize.css": "^8.0.1",
     "p-queue": "^6.0.0",
+    "peerjs": "^2.0.0-beta.3",
     "postcss": "^8.4.4",
     "postcss-loader": "^6.2.1",
     "prettier": "^2.8.0",
     "query-string": "^6.13.1",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0",
     "react-feather": "^2.0.9",
-    "react-intl": "^6.3.0",
+    "react-intl": "^6.0.0",
     "react-refresh": "^0.14.0",
     "sanitize-filename": "^1.6.3",
     "simfile-parser": "^0.4.0",
@@ -95,14 +97,16 @@
     "webpack-sources": "^3.2.1",
     "xml2js": "^0.5.0",
     "zip-webpack-plugin": "^4.0.0",
-    "zustand": "^3.6.4"
+    "zustand": "^4.1.0"
   },
   "resolutions": {
     "loader-utils": "^2.0.0",
     "xml2js": "^0.5.0"
   },
   "dependencies": {
+    "@reduxjs/toolkit": "^1.9.5",
     "@vercel/analytics": "^1.0.1",
+    "react-redux": "^8.0.5",
     "web-vitals": "^3.3.1"
   }
 }

src/app.css

@@ -14,6 +14,10 @@ body:global(.bp4-dark) {
   background-color: #222;
 }
 
+:global(.bp4-dark) :global(.bp4-navbar) {
+  box-shadow: none;
+}
+
 .container {
   display: flex;
   flex-direction: column;
@@ -38,7 +42,7 @@ input[type="number"],
 input[type="password"],
 input[type="search"],
 input[type="tel"],
-input[type="text"],
+input[type="text"]:not(:global(.bp4-editable-text-input)),
 input[type="time"],
 input[type="url"],
 input[type="week"],

src/assets/i18n.json

@@ -86,7 +86,8 @@
       "ban": "Veto",
       "pocketPick": "Pocket Pick",
       "reset": "Reset",
-      "cancel": "Cancel"
+      "cancel": "Cancel",
+      "winner": "Pick Winner"
     },
     "noValidCharts": "No valid charts",
     "showSongPool": "Show eligible charts",
@@ -179,7 +180,8 @@
       "ban": "Veto",
       "pocketPick": "Pocket Pick",
       "reset": "Reset",
-      "cancel": "Cancel"
+      "cancel": "Cancel",
+      "winner": "Pick Winner"
     },
     "noValidCharts": "No valid charts",
     "showSongPool": "Show eligible charts",

src/card-draw.ts

@@ -1,28 +1,32 @@
+import { nanoid } from "nanoid";
 import { GameData, Song, Chart } from "./models/SongData";
 import { times } from "./utils";
-import { DrawnChart, Drawing } from "./models/Drawing";
+import { DrawnChart, EligibleChart, Drawing } from "./models/Drawing";
 import { ConfigState } from "./config-state";
-
-export function getDrawnChart(currentSong: Song, chart: Chart): DrawnChart {
+import { getDifficultyColor } from "./hooks/useDifficultyColor";
+import { getDiffAbbr } from "./game-data-utils";
+
+export function getDrawnChart(
+  gameData: GameData,
+  currentSong: Song,
+  chart: Chart
+): EligibleChart {
   return {
     name: currentSong.name,
     jacket: chart.jacket || currentSong.jacket,
     nameTranslation: currentSong.name_translation,
     artist: currentSong.artist,
     artistTranslation: currentSong.artist_translation,
     bpm: currentSong.bpm,
-    difficultyClass: chart.diffClass,
     level: chart.lvl,
     flags: (chart.flags || []).concat(currentSong.flags || []),
     song: currentSong,
+    // Fill in variant data per game
+    diffAbbr: getDiffAbbr(gameData, chart.diffClass),
+    diffColor: getDifficultyColor(gameData, chart.diffClass),
   };
 }
 
-/**
- * Used to give each drawing an auto-incrementing id
- */
-let drawingID = 0;
-
 /** returns true if song matches configured flags */
 export function songIsValid(
   config: ConfigState,
@@ -53,8 +57,8 @@ export function chartIsValid(
   );
 }
 
-export function* eligibleCharts(config: ConfigState, songs: Song[]) {
-  for (const currentSong of songs) {
+export function* eligibleCharts(config: ConfigState, gameData: GameData) {
+  for (const currentSong of gameData.songs) {
     if (!songIsValid(config, currentSong)) {
       continue;
     }
@@ -66,7 +70,7 @@ export function* eligibleCharts(config: ConfigState, songs: Song[]) {
       }
 
       // add chart to deck
-      yield getDrawnChart(currentSong, chart);
+      yield getDrawnChart(gameData, currentSong, chart);
     }
   }
 }
@@ -88,12 +92,12 @@ export function draw(gameData: GameData, configData: ConfigState): Drawing {
     weights,
   } = configData;
 
-  const validCharts: Record<string, Array<DrawnChart>> = {};
+  const validCharts: Record<string, Array<EligibleChart>> = {};
   times(gameData.meta.lvlMax, (n) => {
     validCharts[n.toString()] = [];
   });
 
-  for (const chart of eligibleCharts(configData, gameData.songs)) {
+  for (const chart of eligibleCharts(configData, gameData)) {
     validCharts[chart.level].push(chart);
   }
 
@@ -159,10 +163,12 @@ export function draw(gameData: GameData, configData: ConfigState): Drawing {
     const randomChart = selectableCharts[randomIndex];
 
     if (randomChart) {
-      // Give this random chart a unique id within this drawing
-      randomChart.id = drawnCharts.length;
       // Save it in our list of drawn charts
-      drawnCharts.push(randomChart);
+      drawnCharts.push({
+        ...randomChart,
+        // Give this random chart a unique id within this drawing
+        id: drawnCharts.length,
+      });
       // remove drawn chart from deck so it cannot be re-drawn
       selectableCharts.splice(randomIndex, 1);
       if (!difficultyCounts[chosenDifficulty]) {
@@ -184,12 +190,12 @@ export function draw(gameData: GameData, configData: ConfigState): Drawing {
     }
   }
 
-  drawingID += 1;
   return {
-    id: drawingID,
+    id: nanoid(10),
     charts: drawnCharts,
     bans: [],
     protects: [],
     pocketPicks: [],
+    winners: [],
   };
 }

src/config-state.tsx

@@ -1,26 +1,28 @@
-import createStore, { SetState } from "zustand";
+import createStore, { StoreApi } from "zustand";
 
 export interface ConfigState {
   chartCount: number;
   upperBound: number;
   lowerBound: number;
   useWeights: boolean;
   orderByAction: boolean;
+  showVeto: boolean;
   weights: number[];
   forceDistribution: boolean;
   constrainPocketPicks: boolean;
   style: string;
   difficulties: ReadonlySet<string>;
   flags: ReadonlySet<string>;
   showPool: boolean;
-  update: SetState<ConfigState>;
+  update: StoreApi<ConfigState>["setState"];
 }
 
 export const useConfigState = createStore<ConfigState>((set, get) => ({
   chartCount: 5,
   upperBound: 0,
   lowerBound: 0,
   useWeights: false,
+  showVeto: true,
   orderByAction: true,
   weights: [],
   forceDistribution: true,

src/controls/controls.css

@@ -1,15 +1,9 @@
-.form {
+.drawer {
   padding: 1em 1.5em;
   overflow-y: auto;
 }
 
-.form hr {
-  border-color: rgba(17, 20, 24, 0.8);
-  border-style: solid;
-  border-bottom-width: 0;
-}
-
-.form label {
+.drawer label {
   user-select: none;
 }
 

src/controls/index.tsx

@@ -19,12 +19,19 @@ import {
   Switch,
   NavbarDivider,
   DrawerSize,
+  Divider,
+  Tabs,
+  Tab,
+  Icon,
 } from "@blueprintjs/core";
 import { Tooltip2 } from "@blueprintjs/popover2";
 import { IconNames } from "@blueprintjs/icons";
 import { useIsNarrow } from "../hooks/useMediaQuery";
-import { EligibleChartsListFilter } from "../eligible-charts-list";
+import { EligibleChartsListFilter } from "../eligible-charts/filter";
 import shallow from "zustand/shallow";
+import { TournamentModeToggle } from "../tournament-mode/tournament-mode-toggle";
+import { RemotePeerControls } from "../tournament-mode/remote-peer-menu";
+import { useRemotePeers } from "../tournament-mode/remote-peers";
 
 function getAvailableDifficulties(gameData: GameData, selectedStyle: string) {
   let s = new Set<string>();
@@ -100,10 +107,7 @@ export function HeaderControls() {
 
   function handleDraw() {
     useConfigState.setState({ showPool: false });
-    const couldDraw = drawSongs(useConfigState.getState());
-    if (couldDraw !== !lastDrawFailed) {
-      setLastDrawFailed(!couldDraw);
-    }
+    drawSongs(useConfigState.getState());
   }
 
   function openSettings() {
@@ -119,13 +123,10 @@ export function HeaderControls() {
         size={isNarrow ? DrawerSize.LARGE : "500px"}
         onClose={() => setSettingsOpen(false)}
         title={
-          <FormattedMessage
-            id="settings.title"
-            defaultMessage="Card Draw Options"
-          />
+          <FormattedMessage id="settings.title" defaultMessage="Settings" />
         }
       >
-        <Controls />
+        <ControlsDrawer />
       </Drawer>
       {!isNarrow && (
         <>
@@ -158,7 +159,28 @@ export function HeaderControls() {
   );
 }
 
-function Controls() {
+function ControlsDrawer() {
+  const isConnected = useRemotePeers((r) => !!r.thisPeer);
+  const hasPeers = useRemotePeers((r) => !!r.remotePeers.size);
+  return (
+    <div className={styles.drawer}>
+      <Tabs id="settings" large>
+        <Tab id="general" panel={<GeneralSettings />}>
+          <Icon icon={IconNames.Settings} /> General
+        </Tab>
+        <Tab id="network" panel={<RemotePeerControls />}>
+          <Icon
+            icon={hasPeers ? IconNames.ThirdParty : IconNames.GlobeNetwork}
+            intent={isConnected ? "success" : "none"}
+          />{" "}
+          Networking
+        </Tab>
+      </Tabs>
+    </div>
+  );
+}
+
+function GeneralSettings() {
   const { t } = useIntl();
   const [dataSetName, gameData] = useDrawState(
     (s) => [s.dataSetName, s.gameData],
@@ -169,6 +191,7 @@ function Controls() {
     useWeights,
     constrainPocketPicks,
     orderByAction,
+    showVeto,
     lowerBound,
     upperBound,
     update: updateState,
@@ -209,7 +232,7 @@ function Controls() {
   };
 
   return (
-    <form className={styles.form} onSubmit={(e) => e.preventDefault()}>
+    <>
       {isNarrow && (
         <>
           <FormGroup>
@@ -220,7 +243,7 @@ function Controls() {
               <EligibleChartsListFilter />
             </FormGroup>
           )}
-          <hr />
+          <Divider />
         </>
       )}
       <div className={isNarrow ? undefined : styles.inlineControls}>
@@ -358,6 +381,15 @@ function Controls() {
           }}
           label={t("orderByAction")}
         />
+        <Checkbox
+          id="showVeto"
+          checked={showVeto}
+          onChange={(e) => {
+            const next = !!e.currentTarget.checked;
+            updateState({ showVeto: next });
+          }}
+          label={t("showVeto", undefined, "Show vetoed charts")}
+        />
         <Checkbox
           id="constrainPocketPicks"
           checked={constrainPocketPicks}
@@ -367,6 +399,7 @@ function Controls() {
           }}
           label={t("constrainPocketPicks")}
         />
+        <TournamentModeToggle />
         <Checkbox
           id="weighted"
           checked={useWeights}
@@ -378,6 +411,6 @@ function Controls() {
         />
         {useWeights && <WeightsControls high={upperBound} low={lowerBound} />}
       </FormGroup>
-    </form>
+    </>
   );
 }