Merge pull request #309 from noahm/pick-placeholders

Author: noahm

docs/images/settings-drawer.png

@@ -34,11 +34,14 @@ Some of the less self-explanatory settings are described below.
 ![Screenshot of the settings drawer](images/settings-drawer.png)
 
 <dl>
+<dt>Free picks
+<dd>Adds extra empty placeholder cards to the beginning of each draw which can be replaced with player picks.
+
 <dt>Reorder by pick/ban
 <dd>Moves charts to the beginning or end of the set when charts are protected or vetoed.
 
-<dt>Pocket picks must match draw options
-<dd>Limits charts selected in a pocket pick action to those that match current draw settings.
+<dt>Picks must match draw options
+<dd>Limits charts selected in a free/pocket pick action to those that match current draw settings.
 
 <dt>Sort by chart level
 <dd>Sorts the drawn charts by difficulty level, from lowest on the left, to highest on the right. When not enabled the chart order is randomized.

docs/readme.md

@@ -25,11 +25,12 @@
       "drawerTitle": "Settings",
       "hideShowFilters": "Chart Filters",
       "chartCount": "Number to draw",
+      "playerPicks": "Free picks",
       "upperBoundLvl": "Lvl Max",
       "lowerBoundLvl": "Lvl Min",
       "upperBoundTier": "Tier Max",
       "lowerBoundTier": "Tier Min",
-      "constrainPocketPicks": "Pocket picks must match draw options",
+      "constrainPocketPicks": "Picks must match draw options",
       "useWeightedDistributions": "Use Weighted Distributions",
       "sortByLevel": "Sort by chart level",
       "orderByAction": "Re-order by pick/ban",

src/assets/i18n.json

@@ -4,7 +4,14 @@ import { chunkInPieces, pickRandomItem, rangeI, shuffle, times } from "./utils";
 import { CountingSet } from "./utils/counting-set";
 import { DefaultingMap } from "./utils/defaulting-set";
 import { Fraction } from "./utils/fraction";
-import { DrawnChart, EligibleChart, Drawing } from "./models/Drawing";
+import {
+  DrawnChart,
+  EligibleChart,
+  Drawing,
+  PlayerPickPlaceholder,
+  CHART_PLACEHOLDER,
+  CHART_DRAWN,
+} from "./models/Drawing";
 import { ConfigState } from "./config-state";
 import { getDifficultyColor } from "./hooks/useDifficultyColor";
 import {
@@ -322,6 +329,7 @@ export function draw(gameData: GameData, configData: ConfigState): Drawing {
         ...randomChart,
         // Give this random chart a unique id within this drawing
         id: `drawn_chart-${nanoid(5)}`,
+        type: CHART_DRAWN,
       });
       // remove drawn chart from deck so it cannot be re-drawn
       selectableCharts.splice(randomIndex, 1);
@@ -342,15 +350,29 @@ export function draw(gameData: GameData, configData: ConfigState): Drawing {
     }
   }
 
+  const charts: Drawing["charts"] = configData.sortByLevel
+    ? drawnCharts.sort(
+        (a, b) =>
+          chartLevelOrTier(a, useGranularLevels, false) -
+          chartLevelOrTier(b, useGranularLevels, false),
+      )
+    : shuffle(drawnCharts);
+
+  if (configData.playerPicks) {
+    charts.unshift(
+      ...times(
+        configData.playerPicks,
+        (): PlayerPickPlaceholder => ({
+          id: `pick_placeholder-` + nanoid(5),
+          type: CHART_PLACEHOLDER,
+        }),
+      ),
+    );
+  }
+
   return {
     id: `draw-${nanoid(10)}`,
-    charts: configData.sortByLevel
-      ? drawnCharts.sort(
-          (a, b) =>
-            chartLevelOrTier(a, useGranularLevels, false) -
-            chartLevelOrTier(b, useGranularLevels, false),
-        )
-      : shuffle(drawnCharts),
+    charts,
     players: times(defaultPlayersPerDraw, () => ""),
     bans: [],
     protects: [],

src/card-draw.ts

@@ -3,6 +3,7 @@ import { createWithEqualityFn } from "zustand/traditional";
 
 export interface ConfigState {
   chartCount: number;
+  playerPicks: number;
   upperBound: number;
   lowerBound: number;
   useWeights: boolean;
@@ -28,6 +29,7 @@ export interface ConfigState {
 export const useConfigState = createWithEqualityFn<ConfigState>(
   (set) => ({
     chartCount: 5,
+    playerPicks: 0,
     upperBound: 0,
     lowerBound: 0,
     useWeights: false,

src/config-state.ts

@@ -19,6 +19,7 @@ import {
   People,
   CaretDown,
   CaretRight,
+  Plus,
 } from "@blueprintjs/icons";
 import { useMemo, useState } from "react";
 import { shallow } from "zustand/shallow";
@@ -171,6 +172,7 @@ function GeneralSettings() {
     chartCount,
     sortByLevel,
     useGranularLevels,
+    playerPicks,
   } = configState;
   const availableDifficulties = useMemo(() => {
     if (!gameData) {
@@ -241,7 +243,7 @@ function GeneralSettings() {
           <Divider />
         </>
       )}
-      <div className={isNarrow ? undefined : styles.inlineControls}>
+      <div className={styles.inlineControls}>
         <FormGroup
           label={t("controls.chartCount")}
           contentClassName={styles.narrowInput}
@@ -263,46 +265,68 @@ function GeneralSettings() {
             }}
           />
         </FormGroup>
-        <div className={styles.inlineControls}>
-          <FormGroup
-            label={
-              usesDrawGroups
-                ? t("controls.lowerBoundTier")
-                : t("controls.lowerBoundLvl")
-            }
-            contentClassName={styles.narrowInput}
-          >
-            <NumericInput
-              large
-              fill
-              type="number"
-              inputMode="numeric"
-              value={useGranularLevels ? lowerBound.toFixed(2) : lowerBound}
-              min={availableLevels[0]}
-              max={Math.max(upperBound, lowerBound, 1)}
-              onValueChange={handleLowerBoundChange}
-            />
-          </FormGroup>
-          <FormGroup
-            label={
-              usesDrawGroups
-                ? t("controls.upperBoundTier")
-                : t("controls.upperBoundLvl")
-            }
-            contentClassName={styles.narrowInput}
-          >
-            <NumericInput
-              large
-              fill
-              type="number"
-              inputMode="numeric"
-              value={useGranularLevels ? upperBound.toFixed(2) : upperBound}
-              min={lowerBound}
-              max={availableLevels[availableLevels.length - 1]}
-              onValueChange={handleUpperBoundChange}
-            />
-          </FormGroup>
-        </div>
+        <Plus className={styles.plus} size={20} />
+        <FormGroup
+          label={t("controls.playerPicks")}
+          contentClassName={styles.narrowInput}
+        >
+          <NumericInput
+            large
+            fill
+            type="number"
+            inputMode="numeric"
+            value={playerPicks}
+            min={0}
+            clampValueOnBlur
+            onValueChange={(playerPicks) => {
+              if (!isNaN(playerPicks)) {
+                updateState(() => {
+                  return { playerPicks };
+                });
+              }
+            }}
+          />
+        </FormGroup>
+      </div>
+      <div className={styles.inlineControls}>
+        <FormGroup
+          label={
+            usesDrawGroups
+              ? t("controls.lowerBoundTier")
+              : t("controls.lowerBoundLvl")
+          }
+          contentClassName={styles.narrowInput}
+        >
+          <NumericInput
+            large
+            fill
+            type="number"
+            inputMode="numeric"
+            value={useGranularLevels ? lowerBound.toFixed(2) : lowerBound}
+            min={availableLevels[0]}
+            max={Math.max(upperBound, lowerBound, 1)}
+            onValueChange={handleLowerBoundChange}
+          />
+        </FormGroup>
+        <FormGroup
+          label={
+            usesDrawGroups
+              ? t("controls.upperBoundTier")
+              : t("controls.upperBoundLvl")
+          }
+          contentClassName={styles.narrowInput}
+        >
+          <NumericInput
+            large
+            fill
+            type="number"
+            inputMode="numeric"
+            value={useGranularLevels ? upperBound.toFixed(2) : upperBound}
+            min={lowerBound}
+            max={availableLevels[availableLevels.length - 1]}
+            onValueChange={handleUpperBoundChange}
+          />
+        </FormGroup>
       </div>
       <Button
         alignText="left"

src/controls/controls-drawer.tsx

@@ -17,10 +17,16 @@
   margin-bottom: 0;
 }
 
-.inlineControls > * {
+.inlineControls > div {
   margin-right: 25px;
 }
 
+.plus {
+  margin-top: 30px;
+  margin-left: -23px;
+  margin-right: 1px;
+}
+
 .narrowInput {
   width: 110px;
 }

src/controls/controls.css

@@ -20,9 +20,10 @@ import {
 import { SongCard, SongCardProps } from "../song-card/song-card";
 import { useState } from "react";
 import { Rain, Repeat, WarningSign } from "@blueprintjs/icons";
+import { EligibleChart, PlayerPickPlaceholder } from "../models/Drawing";
 
-export function isDegrs(thing: { name: string; artist: string }) {
-  return thing.name.startsWith('DEAD END("GROOVE');
+export function isDegrs(thing: EligibleChart | PlayerPickPlaceholder) {
+  return "name" in thing && thing.name.startsWith('DEAD END("GROOVE');
 }
 
 function* oneMillionDraws() {

src/controls/degrs-tester.tsx

@@ -5,6 +5,7 @@ import { useConfigState } from "./config-state";
 import { createContextualStore } from "./zustand/contextual-zustand";
 import { useDrawState } from "./draw-state";
 import {
+  CHART_PLACEHOLDER,
   Drawing,
   EligibleChart,
   PlayerActionOnChart,
@@ -115,7 +116,9 @@ const {
         ...self.pocketPicks.map((pick) => pick.chartId),
         ...self.protects.map((pick) => pick.chartId),
       ]);
-      const keepCharts = self.charts.filter((c) => keepChartIds.has(c.id));
+      const keepCharts = self.charts.filter(
+        (c) => keepChartIds.has(c.id) || c.type === CHART_PLACEHOLDER,
+      );
       const newCharts = draw(useDrawState.getState().gameData!, {
         ...useConfigState.getState(),
         chartCount: get().charts.length - keepCharts.length,
@@ -130,19 +133,35 @@ const {
       const charts = drawing.charts.slice();
       const key = keyFromAction(action);
       const arr = drawing[key].slice() as PlayerActionOnChart[] | PocketPick[];
+      const targetChartIdx = charts.findIndex((chart) => chart.id === chartId);
+      const targetChart = charts[targetChartIdx];
 
-      if (useConfigState.getState().orderByAction) {
-        const indexToCut = charts.findIndex((chart) => chart.id === chartId);
-        const [shiftedChart] = charts.splice(indexToCut, 1);
+      if (
+        useConfigState.getState().orderByAction &&
+        targetChart?.type !== CHART_PLACEHOLDER
+      ) {
+        charts.splice(targetChartIdx, 1);
         if (action === "ban") {
           // insert at tail of list
           const insertPoint = charts.length;
-          charts.splice(insertPoint, 0, shiftedChart);
+          charts.splice(insertPoint, 0, targetChart);
         } else {
-          // insert at head of list, behind other picks
-          const insertPoint =
-            drawing.protects.length + drawing.pocketPicks.length;
-          charts.splice(insertPoint, 0, shiftedChart);
+          const frontLockedCardCount =
+            // number of placeholder cards total (picked and unpicked)
+            charts.reduce<number>(
+              (total, curr) =>
+                total + (curr.type === CHART_PLACEHOLDER ? 1 : 0),
+              0,
+            ) +
+            // number of protects
+            drawing.protects.length +
+            // number of picks NOT targeting placeholder cards
+            drawing.pocketPicks.filter(
+              (p) => p.targetType !== CHART_PLACEHOLDER,
+            ).length;
+
+          // insert at head of list, behind other picks/placeholders
+          charts.splice(frontLockedCardCount, 0, targetChart);
         }
         set({
           charts,
@@ -154,7 +173,12 @@ const {
         arr.splice(existingIndex, 1);
       } else {
         // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-        arr.push({ player, pick: newChart!, chartId });
+        arr.push({
+          player,
+          pick: newChart!,
+          chartId,
+          targetType: targetChart.type,
+        });
       }
       set({
         [key]: arr,

src/drawing-context.tsx

@@ -17,8 +17,17 @@ export interface EligibleChart {
   song: Song;
 }
 
+export const CHART_PLACEHOLDER = "PLACEHOLDER";
+
+export interface PlayerPickPlaceholder {
+  id: string;
+  type: typeof CHART_PLACEHOLDER;
+}
+
+export const CHART_DRAWN = "DRAWN";
 export interface DrawnChart extends EligibleChart {
   id: string;
+  type: typeof CHART_DRAWN;
 }
 
 export interface PlayerActionOnChart {
@@ -28,13 +37,14 @@ export interface PlayerActionOnChart {
 
 export interface PocketPick extends PlayerActionOnChart {
   pick: EligibleChart;
+  targetType: typeof CHART_PLACEHOLDER | typeof CHART_DRAWN;
 }
 
 export interface Drawing {
   id: string;
   title?: string;
   players: string[];
-  charts: DrawnChart[];
+  charts: Array<DrawnChart | PlayerPickPlaceholder>;
   bans: Array<PlayerActionOnChart>;
   protects: Array<PlayerActionOnChart>;
   winners: Array<PlayerActionOnChart>;