add "fix player count" option to editor

script/edit/EditPage.tsx

@@ -1,106 +1,163 @@
-import {Duration, formatDuration} from '../components/Duration';
+import { Duration, formatDuration } from "../components/Duration";
 
 import Element = JSX.Element;
-import {Section} from "../components/Section";
+import { Section } from "../components/Section";
 import MultiRangeSlider from "../components/MultiSlider";
-import {DemoHead} from "../header";
-import {createSignal} from "solid-js";
-import {downloadBuffer, edit} from "./tools";
+import { DemoHead } from "../header";
+import { createSignal } from "solid-js";
+import { downloadBuffer, edit } from "./tools";
 
 export interface EditPageProps {
-    header: DemoHead;
-    demoData: ArrayBuffer;
-    setDropText: (string) => void,
-    name: string,
+  header: DemoHead;
+  demoData: ArrayBuffer;
+  setDropText: (string) => void;
+  name: string;
 }
 
 export const Editor = (props: EditPageProps) => {
-    let demoInfo: any[] | Element = [];
-    demoInfo = (
-        <div className="demo-info">
-            {props.header.map}
-            <Duration className="time"
-                      duration={Math.floor(props.header.duration)}/>
-        </div>
-    );
+  let demoInfo: any[] | Element = [];
+  demoInfo = (
+    <div className="demo-info">
+      {props.header.map}
+      <Duration className="time" duration={Math.floor(props.header.duration)} />
+    </div>
+  );
 
-    const [loading, setLoading] = createSignal(false);
-    const [cutFrom, setCutFrom] = createSignal(0);
-    const [cutTo, setCutTo] = createSignal(props.header.ticks);
-    const intervalPerTick = props.header.duration / props.header.ticks;
-    const [unlockPov, setUnlockPov] = createSignal(false);
+  const [loading, setLoading] = createSignal(false);
+  const [cutFrom, setCutFrom] = createSignal(0);
+  const [cutTo, setCutTo] = createSignal(props.header.ticks);
+  const intervalPerTick = props.header.duration / props.header.ticks;
+  const [unlockPov, setUnlockPov] = createSignal(false);
+  const [fixPlayerCount, setFixPlayerCount] = createSignal(true);
 
-    const editCb = async () => {
-        try {
-            setLoading(true);
-            (props.setDropText)("Editing...");
-            await doEdit(props.name, props.demoData, props.header, unlockPov(), cutFrom(), cutTo());
-            (props.setDropText)(props.name);
-            setLoading(false);
-        } catch (e) {
-            (props.setDropText)("Error: " + e.toString());
-            setLoading(false);
-        }
+  const editCb = async () => {
+    try {
+      setLoading(true);
+      props.setDropText("Editing...");
+      await doEdit(
+        props.name,
+        props.demoData,
+        props.header,
+        unlockPov(),
+        fixPlayerCount(),
+        cutFrom(),
+        cutTo(),
+      );
+      props.setDropText(props.name);
+      setLoading(false);
+    } catch (e) {
+      props.setDropText("Error: " + e.toString());
+      setLoading(false);
     }
+  };
 
-    return (
-        <div>
-            {demoInfo}
-            <Section title="Unlock camera">
-                <ul key={1}>
-                    <li key={1}>Unlocks the camera in pov demos, allowing free movement as if it were an stv demo.</li>
-                    <li key={2}>When the player respawns the camera will be moved.</li>
-                    <li key={3}>As pov demos only contain data near the player, far away players might freeze, teleport or otherwise behave weirdly.</li>
-                </ul>
-                <p key={2}>
-                    <input type="checkbox" id="pov-unlock"
-                           checked={unlockPov() ? "checked" : null}
-                           onChange={() => {
-                               setUnlockPov(!unlockPov())
-                           }}/>
-                    <label htmlFor="pov-unlock">Unlock camara for pov demo</label>
-                </p>
-            </Section>
-            <Section title="Cut demo">
-                <ul key={1}>
-                    <li key={1}>Cuts the demo file to the selected tick range.</li>
-                    <li key={2}>Cutting demos is experimental, resulting demo files might crash, have broken animations or have other issues.</li>
-                    <li key={3}>Changing the specific cut range can sometimes work around issues with broken demos.</li>
-                </ul>
-                <p key={2}>
-                    <MultiRangeSlider
-                        min={0}
-                        max={props.header.ticks}
-                        onChange={(min, max) => {
-                            if (min !== cutFrom() || max !== cutTo()) {
-                                setCutFrom(min);
-                                setCutTo(max);
-                            }
-                        }}
-                        labelFn={(ticks) => formatDuration(ticks * intervalPerTick)}
-                    />
-                </p>
-            </Section>
-            <Section title="Process">
-                <p key={1}>
-                    <button onClick={editCb}
-                            className="pure-button pure-button-primary"
-                            disabled={loading() ? "disabled" : null}>
-                        {() => loading() ? 'Processing...' : 'Edit'}
-                    </button>
-                </p>
-            </Section>
-        </div>
-    );
+  return (
+    <div>
+      {demoInfo}
+      <Section title="Unlock camera">
+        <ul key={1}>
+          <li key={1}>
+            Unlocks the camera in pov demos, allowing free movement as if it
+            were an stv demo.
+          </li>
+          <li key={2}>When the player respawns the camera will be moved.</li>
+          <li key={3}>
+            As pov demos only contain data near the player, far away players
+            might freeze, teleport or otherwise behave weirdly.
+          </li>
+        </ul>
+        <p key={2}>
+          <input
+            type="checkbox"
+            id="pov-unlock"
+            checked={unlockPov() ? "checked" : null}
+            onChange={() => {
+              setUnlockPov(!unlockPov());
+            }}
+          />
+          <label htmlFor="pov-unlock">Unlock camara for pov demo</label>
+        </p>
+      </Section>
+      <Section title="Cut demo">
+        <ul key={1}>
+          <li key={1}>Cuts the demo file to the selected tick range.</li>
+          <li key={2}>
+            Cutting demos is experimental, resulting demo files might crash,
+            have broken animations or have other issues.
+          </li>
+          <li key={3}>
+            Changing the specific cut range can sometimes work around issues
+            with broken demos.
+          </li>
+        </ul>
+        <p key={2}>
+          <MultiRangeSlider
+            min={0}
+            max={props.header.ticks}
+            onChange={(min, max) => {
+              if (min !== cutFrom() || max !== cutTo()) {
+                setCutFrom(min);
+                setCutTo(max);
+              }
+            }}
+            labelFn={(ticks) => formatDuration(ticks * intervalPerTick)}
+          />
+        </p>
+      </Section>
+      <Section title="Fix player count">
+        <ul key={1}>
+          <li key={1}>
+            The 2023-07-25 update increased the max player count from 32 to 100,
+            this broke playing some demos from before the update.
+          </li>
+          <li key={2}>
+            This option attempts to make demos from before the update
+            compatible.
+          </li>
+          <li key={3}>Using it on newer demos should have no effect.</li>
+        </ul>
+        <p key={2}>
+          <input
+            type="checkbox"
+            id="fix-player-count"
+            checked={fixPlayerCount() ? "checked" : null}
+            onChange={() => {
+              setFixPlayerCount(!fixPlayerCount());
+            }}
+          />
+          <label htmlFor="fix-player-count">Fix player count</label>
+        </p>
+      </Section>
+      <Section title="Process">
+        <p key={1}>
+          <button
+            onClick={editCb}
+            className="pure-button pure-button-primary"
+            disabled={loading() ? "disabled" : null}
+          >
+            {() => (loading() ? "Processing..." : "Edit")}
+          </button>
+        </p>
+      </Section>
+    </div>
+  );
+};
+
+async function doEdit(
+  name: string,
+  data: ArrayBuffer,
+  header: DemoHead,
+  unlockPov: boolean,
+  fixPlayerCount: boolean,
+  from: number,
+  to: number,
+) {
+  let options = {
+    unlock_pov: unlockPov,
+    fix_player_count: fixPlayerCount,
+    cut: from > 0 || to < header.ticks ? { from, to } : undefined,
+  };
+  console.log(options);
+  const edited = await edit(data, options);
+  downloadBuffer(edited, name.replace(".dem", "_edited.dem"));
 }
-
-
-async function doEdit(name: string, data: ArrayBuffer, header: DemoHead, unlockPov: boolean, from: number, to: number) {
-    let options = {
-        unlock_pov: unlockPov,
-        cut: (from > 0 || to < header.ticks) ? {from, to} : undefined,
-    }
-    console.log(options);
-    const edited = await edit(data, options);
-    downloadBuffer(edited, name.replace('.dem', '_edited.dem'));
-}

script/edit/tools.ts

@@ -1,5 +1,6 @@
 export interface EditOptions {
     unlock_pov: boolean,
+    fix_player_count: boolean,
     cut?: TickRange,
 }