add "fix player count" option to editor

package-lock.json

@@ -5,7 +5,7 @@
   "packages": {
     "": {
       "dependencies": {
-        "@demostf/edit": "0.2.0",
+        "@demostf/edit": "0.2.1",
         "@demostf/tf-demos-viewer": "^0.3.3",
         "@lutaok/solid-modal": "^0.1.1",
         "@solid-primitives/autofocus": "^0.0.111",
@@ -18,9 +18,9 @@
       }
     },
     "node_modules/@demostf/edit": {
-      "version": "0.2.0",
+      "version": "0.2.1",
-      "resolved": "https://registry.npmjs.org/@demostf/edit/-/edit-0.2.0.tgz",
+      "resolved": "https://registry.npmjs.org/@demostf/edit/-/edit-0.2.1.tgz",
-      "integrity": "sha512-s9wk3QVm+aTpMhIyfdGIHRm5qHp7FQ1dq/Jn0fms+lXsB1xY3wgjfWH+5gwRjjo/Dd3UMNM0o3atjO2uh+CxOQ=="
+      "integrity": "sha512-0wtwe717/iyO8awK2iZV2gUopZxl/ApBq1w3h9sDfPdI+58CBUMFlIItJMuWtpis8VfiHoQRR3l1qmTe49+5vQ=="
     },
     "node_modules/@demostf/tf-demos-viewer": {
       "version": "0.3.3",

package.json

@@ -1,6 +1,6 @@
 {
   "dependencies": {
-    "@demostf/edit": "0.2.0",
+    "@demostf/edit": "0.2.1",
     "@demostf/tf-demos-viewer": "^0.3.3",
     "@lutaok/solid-modal": "^0.1.1",
     "@solid-primitives/autofocus": "^0.0.111",

script/edit/EditPage.tsx

@@ -1,17 +1,17 @@
-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 { DemoHead } from "../header";
-import {createSignal} from "solid-js";
+import { createSignal } from "solid-js";
-import {downloadBuffer, edit} from "./tools";
+import { downloadBuffer, edit } from "./tools";
 
 export interface EditPageProps {
   header: DemoHead;
   demoData: ArrayBuffer;
-    setDropText: (string) => void,
+  setDropText: (string) => void;
-    name: string,
+  name: string;
 }
 
 export const Editor = (props: EditPageProps) => {
@@ -19,8 +19,7 @@ export const Editor = (props: EditPageProps) => {
   demoInfo = (
     <div className="demo-info">
       {props.header.map}
-            <Duration className="time"
+      <Duration className="time" duration={Math.floor(props.header.duration)} />
-                      duration={Math.floor(props.header.duration)}/>
     </div>
   );
 
@@ -29,43 +28,67 @@ export const Editor = (props: EditPageProps) => {
   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...");
+      props.setDropText("Editing...");
-            await doEdit(props.name, props.demoData, props.header, unlockPov(), cutFrom(), cutTo());
+      await doEdit(
-            (props.setDropText)(props.name);
+        props.name,
+        props.demoData,
+        props.header,
+        unlockPov(),
+        fixPlayerCount(),
+        cutFrom(),
+        cutTo(),
+      );
+      props.setDropText(props.name);
       setLoading(false);
     } catch (e) {
-            (props.setDropText)("Error: " + e.toString());
+      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={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>
+          <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"
+          <input
+            type="checkbox"
+            id="pov-unlock"
             checked={unlockPov() ? "checked" : null}
             onChange={() => {
-                               setUnlockPov(!unlockPov())
+              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={2}>
-                    <li key={3}>Changing the specific cut range can sometimes work around issues with broken demos.</li>
+            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
@@ -81,26 +104,60 @@ export const Editor = (props: EditPageProps) => {
           />
         </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}
+          <button
+            onClick={editCb}
             className="pure-button pure-button-primary"
-                            disabled={loading() ? "disabled" : null}>
+            disabled={loading() ? "disabled" : null}
-                        {() => loading() ? 'Processing...' : 'Edit'}
+          >
+            {() => (loading() ? "Processing..." : "Edit")}
           </button>
         </p>
       </Section>
     </div>
   );
-}
+};
 
-
+async function doEdit(
-async function doEdit(name: string, data: ArrayBuffer, header: DemoHead, unlockPov: boolean, from: number, to: number) {
+  name: string,
+  data: ArrayBuffer,
+  header: DemoHead,
+  unlockPov: boolean,
+  fixPlayerCount: boolean,
+  from: number,
+  to: number,
+) {
   let options = {
     unlock_pov: unlockPov,
-        cut: (from > 0 || to < header.ticks) ? {from, to} : undefined,
+    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'));
+  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,
 }