quake2ts 0.0.299 → 0.0.302

package/packages/client/dist/cjs/index.cjs

@@ -2442,10 +2442,14 @@ var _NetChan = class _NetChan2 {
     this.incomingReliableSequence = 0;
     this.outgoingReliableSequence = 0;
     this.reliableLength = 0;
+    this.fragmentSendOffset = 0;
+    this.fragmentBuffer = null;
+    this.fragmentLength = 0;
+    this.fragmentReceived = 0;
     this.lastReceived = 0;
     this.lastSent = 0;
     this.remoteAddress = null;
-    this.reliableMessage = new BinaryWriter(_NetChan2.MAX_MSGLEN);
+    this.reliableMessage = new BinaryWriter(_NetChan2.MAX_RELIABLE_BUFFER);
     const now = Date.now();
     this.lastReceived = now;
     this.lastSent = now;
@@ -2471,6 +2475,10 @@ var _NetChan = class _NetChan2 {
     this.outgoingReliableSequence = 0;
     this.reliableLength = 0;
     this.reliableMessage.reset();
+    this.fragmentSendOffset = 0;
+    this.fragmentBuffer = null;
+    this.fragmentLength = 0;
+    this.fragmentReceived = 0;
     this.lastReceived = Date.now();
     this.lastSent = Date.now();
   }
@@ -2480,18 +2488,38 @@ var _NetChan = class _NetChan2 {
   transmit(unreliableData) {
     this.outgoingSequence++;
     this.lastSent = Date.now();
+    let sendReliableLength = 0;
+    let isFragment = false;
+    let fragmentStart = 0;
+    if (this.reliableLength > 0) {
+      if (this.reliableLength > _NetChan2.FRAGMENT_SIZE) {
+        isFragment = true;
+        if (this.fragmentSendOffset >= this.reliableLength) {
+          this.fragmentSendOffset = 0;
+        }
+        const remaining = this.reliableLength - this.fragmentSendOffset;
+        sendReliableLength = remaining;
+        if (sendReliableLength > _NetChan2.FRAGMENT_SIZE) {
+          sendReliableLength = _NetChan2.FRAGMENT_SIZE;
+        }
+        fragmentStart = this.fragmentSendOffset;
+        this.fragmentSendOffset += sendReliableLength;
+      } else {
+        sendReliableLength = this.reliableLength;
+      }
+    }
     const headerSize = _NetChan2.PACKET_HEADER;
-    const reliableSize = this.reliableLength > 0 ? this.reliableLength + 2 : 0;
+    const reliableHeaderSize = sendReliableLength > 0 ? 2 + (isFragment ? 8 : 0) : 0;
     let unreliableSize = unreliableData ? unreliableData.length : 0;
-    if (headerSize + reliableSize + unreliableSize > _NetChan2.MAX_MSGLEN) {
-      unreliableSize = _NetChan2.MAX_MSGLEN - headerSize - reliableSize;
+    if (headerSize + reliableHeaderSize + sendReliableLength + unreliableSize > _NetChan2.MAX_MSGLEN) {
+      unreliableSize = _NetChan2.MAX_MSGLEN - headerSize - reliableHeaderSize - sendReliableLength;
       if (unreliableSize < 0) unreliableSize = 0;
     }
-    const buffer = new ArrayBuffer(headerSize + reliableSize + unreliableSize);
+    const buffer = new ArrayBuffer(headerSize + reliableHeaderSize + sendReliableLength + unreliableSize);
     const view = new DataView(buffer);
     const result = new Uint8Array(buffer);
     let sequence = this.outgoingSequence;
-    if (this.reliableLength > 0) {
+    if (sendReliableLength > 0) {
       sequence |= 2147483648;
       if ((this.outgoingReliableSequence & 1) !== 0) {
         sequence |= 1073741824;
@@ -2505,13 +2533,23 @@ var _NetChan = class _NetChan2 {
     view.setUint32(4, ack, true);
     view.setUint16(8, this.qport, true);
     let offset = headerSize;
-    if (this.reliableLength > 0) {
-      view.setUint16(offset, this.reliableLength, true);
+    if (sendReliableLength > 0) {
+      let lengthField = sendReliableLength;
+      if (isFragment) {
+        lengthField |= 32768;
+      }
+      view.setUint16(offset, lengthField, true);
       offset += 2;
+      if (isFragment) {
+        view.setUint32(offset, fragmentStart, true);
+        offset += 4;
+        view.setUint32(offset, this.reliableLength, true);
+        offset += 4;
+      }
       const reliableBuffer = this.reliableMessage.getBuffer();
-      const reliableBytes = reliableBuffer.subarray(0, this.reliableLength);
+      const reliableBytes = reliableBuffer.subarray(fragmentStart, fragmentStart + sendReliableLength);
       result.set(reliableBytes, offset);
-      offset += this.reliableLength;
+      offset += sendReliableLength;
     }
     if (unreliableData && unreliableSize > 0) {
       const chunk = unreliableData.slice(0, unreliableSize);
@@ -2552,6 +2590,7 @@ var _NetChan = class _NetChan2 {
         this.reliableLength = 0;
         this.reliableMessage.reset();
         this.outgoingReliableSequence ^= 1;
+        this.fragmentSendOffset = 0;
       }
     }
     const hasReliableData = (sequence & 2147483648) !== 0;
@@ -2560,13 +2599,45 @@ var _NetChan = class _NetChan2 {
     let reliableData = null;
     if (hasReliableData) {
       if (payloadOffset + 2 > packet.byteLength) return null;
-      const reliableLen = view.getUint16(payloadOffset, true);
+      let reliableLen = view.getUint16(payloadOffset, true);
       payloadOffset += 2;
+      const isFragment = (reliableLen & 32768) !== 0;
+      reliableLen &= 32767;
       const expectedBit = this.incomingReliableSequence & 1;
       if (reliableSeqBit === expectedBit) {
-        this.incomingReliableSequence++;
-        if (payloadOffset + reliableLen > packet.byteLength) return null;
-        reliableData = packet.slice(payloadOffset, payloadOffset + reliableLen);
+        if (isFragment) {
+          if (payloadOffset + 8 > packet.byteLength) return null;
+          const fragStart = view.getUint32(payloadOffset, true);
+          payloadOffset += 4;
+          const fragTotal = view.getUint32(payloadOffset, true);
+          payloadOffset += 4;
+          if (fragTotal > _NetChan2.MAX_RELIABLE_BUFFER) {
+            console.warn(`NetChan: received invalid fragment total ${fragTotal} > ${_NetChan2.MAX_RELIABLE_BUFFER}`);
+            return null;
+          }
+          if (!this.fragmentBuffer || this.fragmentBuffer.length !== fragTotal) {
+            this.fragmentBuffer = new Uint8Array(fragTotal);
+            this.fragmentLength = fragTotal;
+            this.fragmentReceived = 0;
+          }
+          if (payloadOffset + reliableLen > packet.byteLength) return null;
+          const data = packet.subarray(payloadOffset, payloadOffset + reliableLen);
+          if (fragStart === this.fragmentReceived && fragStart + reliableLen <= fragTotal) {
+            this.fragmentBuffer.set(data, fragStart);
+            this.fragmentReceived += reliableLen;
+            if (this.fragmentReceived >= fragTotal) {
+              reliableData = this.fragmentBuffer;
+              this.incomingReliableSequence++;
+              this.fragmentBuffer = null;
+              this.fragmentLength = 0;
+              this.fragmentReceived = 0;
+            }
+          }
+        } else {
+          this.incomingReliableSequence++;
+          if (payloadOffset + reliableLen > packet.byteLength) return null;
+          reliableData = packet.slice(payloadOffset, payloadOffset + reliableLen);
+        }
       }
       payloadOffset += reliableLen;
     }
@@ -2593,7 +2664,7 @@ var _NetChan = class _NetChan2 {
    * Writes a byte to the reliable message buffer
    */
   writeReliableByte(value) {
-    if (this.reliableLength + 1 > _NetChan2.MAX_MSGLEN - _NetChan2.HEADER_OVERHEAD) {
+    if (this.reliableLength + 1 > _NetChan2.MAX_RELIABLE_BUFFER) {
       throw new Error("NetChan reliable buffer overflow");
     }
     this.reliableMessage.writeByte(value);
@@ -2603,7 +2674,7 @@ var _NetChan = class _NetChan2 {
    * Writes a short to the reliable message buffer
    */
   writeReliableShort(value) {
-    if (this.reliableLength + 2 > _NetChan2.MAX_MSGLEN - _NetChan2.HEADER_OVERHEAD) {
+    if (this.reliableLength + 2 > _NetChan2.MAX_RELIABLE_BUFFER) {
       throw new Error("NetChan reliable buffer overflow");
     }
     this.reliableMessage.writeShort(value);
@@ -2613,7 +2684,7 @@ var _NetChan = class _NetChan2 {
    * Writes a long to the reliable message buffer
    */
   writeReliableLong(value) {
-    if (this.reliableLength + 4 > _NetChan2.MAX_MSGLEN - _NetChan2.HEADER_OVERHEAD) {
+    if (this.reliableLength + 4 > _NetChan2.MAX_RELIABLE_BUFFER) {
       throw new Error("NetChan reliable buffer overflow");
     }
     this.reliableMessage.writeLong(value);
@@ -2624,7 +2695,7 @@ var _NetChan = class _NetChan2 {
    */
   writeReliableString(value) {
     const len2 = value.length + 1;
-    if (this.reliableLength + len2 > _NetChan2.MAX_MSGLEN - _NetChan2.HEADER_OVERHEAD) {
+    if (this.reliableLength + len2 > _NetChan2.MAX_RELIABLE_BUFFER) {
       throw new Error("NetChan reliable buffer overflow");
     }
     this.reliableMessage.writeString(value);
@@ -2657,6 +2728,7 @@ _NetChan.MAX_MSGLEN = 1400;
 _NetChan.FRAGMENT_SIZE = 1024;
 _NetChan.PACKET_HEADER = 10;
 _NetChan.HEADER_OVERHEAD = _NetChan.PACKET_HEADER + 2;
+_NetChan.MAX_RELIABLE_BUFFER = 262144;
 var AmmoType = /* @__PURE__ */ ((AmmoType22) => {
   AmmoType22[AmmoType22["Bullets"] = 0] = "Bullets";
   AmmoType22[AmmoType22["Shells"] = 1] = "Shells";
@@ -8341,6 +8413,13 @@ var NetworkMessageParser = class _NetworkMessageParser {
     if (bitsHigh & U_OLD_FRAME_HIGH) to.oldFrame = this.stream.readShort();
   }
 };
+var PlaybackState = /* @__PURE__ */ ((PlaybackState22) => {
+  PlaybackState22[PlaybackState22["Stopped"] = 0] = "Stopped";
+  PlaybackState22[PlaybackState22["Playing"] = 1] = "Playing";
+  PlaybackState22[PlaybackState22["Paused"] = 2] = "Paused";
+  PlaybackState22[PlaybackState22["Finished"] = 3] = "Finished";
+  return PlaybackState22;
+})(PlaybackState || {});
 var DemoPlaybackController = class {
   // ms (10Hz default)
   constructor() {
@@ -9419,10 +9498,14 @@ var _NetChan3 = class _NetChan4 {
     this.incomingReliableSequence = 0;
     this.outgoingReliableSequence = 0;
     this.reliableLength = 0;
+    this.fragmentSendOffset = 0;
+    this.fragmentBuffer = null;
+    this.fragmentLength = 0;
+    this.fragmentReceived = 0;
     this.lastReceived = 0;
     this.lastSent = 0;
     this.remoteAddress = null;
-    this.reliableMessage = new BinaryWriter2(_NetChan4.MAX_MSGLEN);
+    this.reliableMessage = new BinaryWriter2(_NetChan4.MAX_RELIABLE_BUFFER);
     const now = Date.now();
     this.lastReceived = now;
     this.lastSent = now;
@@ -9448,6 +9531,10 @@ var _NetChan3 = class _NetChan4 {
     this.outgoingReliableSequence = 0;
     this.reliableLength = 0;
     this.reliableMessage.reset();
+    this.fragmentSendOffset = 0;
+    this.fragmentBuffer = null;
+    this.fragmentLength = 0;
+    this.fragmentReceived = 0;
     this.lastReceived = Date.now();
     this.lastSent = Date.now();
   }
@@ -9457,18 +9544,38 @@ var _NetChan3 = class _NetChan4 {
   transmit(unreliableData) {
     this.outgoingSequence++;
     this.lastSent = Date.now();
+    let sendReliableLength = 0;
+    let isFragment = false;
+    let fragmentStart = 0;
+    if (this.reliableLength > 0) {
+      if (this.reliableLength > _NetChan4.FRAGMENT_SIZE) {
+        isFragment = true;
+        if (this.fragmentSendOffset >= this.reliableLength) {
+          this.fragmentSendOffset = 0;
+        }
+        const remaining = this.reliableLength - this.fragmentSendOffset;
+        sendReliableLength = remaining;
+        if (sendReliableLength > _NetChan4.FRAGMENT_SIZE) {
+          sendReliableLength = _NetChan4.FRAGMENT_SIZE;
+        }
+        fragmentStart = this.fragmentSendOffset;
+        this.fragmentSendOffset += sendReliableLength;
+      } else {
+        sendReliableLength = this.reliableLength;
+      }
+    }
     const headerSize = _NetChan4.PACKET_HEADER;
-    const reliableSize = this.reliableLength > 0 ? this.reliableLength + 2 : 0;
+    const reliableHeaderSize = sendReliableLength > 0 ? 2 + (isFragment ? 8 : 0) : 0;
     let unreliableSize = unreliableData ? unreliableData.length : 0;
-    if (headerSize + reliableSize + unreliableSize > _NetChan4.MAX_MSGLEN) {
-      unreliableSize = _NetChan4.MAX_MSGLEN - headerSize - reliableSize;
+    if (headerSize + reliableHeaderSize + sendReliableLength + unreliableSize > _NetChan4.MAX_MSGLEN) {
+      unreliableSize = _NetChan4.MAX_MSGLEN - headerSize - reliableHeaderSize - sendReliableLength;
       if (unreliableSize < 0) unreliableSize = 0;
     }
-    const buffer = new ArrayBuffer(headerSize + reliableSize + unreliableSize);
+    const buffer = new ArrayBuffer(headerSize + reliableHeaderSize + sendReliableLength + unreliableSize);
     const view = new DataView(buffer);
     const result = new Uint8Array(buffer);
     let sequence = this.outgoingSequence;
-    if (this.reliableLength > 0) {
+    if (sendReliableLength > 0) {
       sequence |= 2147483648;
       if ((this.outgoingReliableSequence & 1) !== 0) {
         sequence |= 1073741824;
@@ -9482,13 +9589,23 @@ var _NetChan3 = class _NetChan4 {
     view.setUint32(4, ack, true);
     view.setUint16(8, this.qport, true);
     let offset = headerSize;
-    if (this.reliableLength > 0) {
-      view.setUint16(offset, this.reliableLength, true);
+    if (sendReliableLength > 0) {
+      let lengthField = sendReliableLength;
+      if (isFragment) {
+        lengthField |= 32768;
+      }
+      view.setUint16(offset, lengthField, true);
       offset += 2;
+      if (isFragment) {
+        view.setUint32(offset, fragmentStart, true);
+        offset += 4;
+        view.setUint32(offset, this.reliableLength, true);
+        offset += 4;
+      }
       const reliableBuffer = this.reliableMessage.getBuffer();
-      const reliableBytes = reliableBuffer.subarray(0, this.reliableLength);
+      const reliableBytes = reliableBuffer.subarray(fragmentStart, fragmentStart + sendReliableLength);
       result.set(reliableBytes, offset);
-      offset += this.reliableLength;
+      offset += sendReliableLength;
     }
     if (unreliableData && unreliableSize > 0) {
       const chunk = unreliableData.slice(0, unreliableSize);
@@ -9529,6 +9646,7 @@ var _NetChan3 = class _NetChan4 {
         this.reliableLength = 0;
         this.reliableMessage.reset();
         this.outgoingReliableSequence ^= 1;
+        this.fragmentSendOffset = 0;
       }
     }
     const hasReliableData = (sequence & 2147483648) !== 0;
@@ -9537,13 +9655,45 @@ var _NetChan3 = class _NetChan4 {
     let reliableData = null;
     if (hasReliableData) {
       if (payloadOffset + 2 > packet.byteLength) return null;
-      const reliableLen = view.getUint16(payloadOffset, true);
+      let reliableLen = view.getUint16(payloadOffset, true);
       payloadOffset += 2;
+      const isFragment = (reliableLen & 32768) !== 0;
+      reliableLen &= 32767;
       const expectedBit = this.incomingReliableSequence & 1;
       if (reliableSeqBit === expectedBit) {
-        this.incomingReliableSequence++;
-        if (payloadOffset + reliableLen > packet.byteLength) return null;
-        reliableData = packet.slice(payloadOffset, payloadOffset + reliableLen);
+        if (isFragment) {
+          if (payloadOffset + 8 > packet.byteLength) return null;
+          const fragStart = view.getUint32(payloadOffset, true);
+          payloadOffset += 4;
+          const fragTotal = view.getUint32(payloadOffset, true);
+          payloadOffset += 4;
+          if (fragTotal > _NetChan4.MAX_RELIABLE_BUFFER) {
+            console.warn(`NetChan: received invalid fragment total ${fragTotal} > ${_NetChan4.MAX_RELIABLE_BUFFER}`);
+            return null;
+          }
+          if (!this.fragmentBuffer || this.fragmentBuffer.length !== fragTotal) {
+            this.fragmentBuffer = new Uint8Array(fragTotal);
+            this.fragmentLength = fragTotal;
+            this.fragmentReceived = 0;
+          }
+          if (payloadOffset + reliableLen > packet.byteLength) return null;
+          const data = packet.subarray(payloadOffset, payloadOffset + reliableLen);
+          if (fragStart === this.fragmentReceived && fragStart + reliableLen <= fragTotal) {
+            this.fragmentBuffer.set(data, fragStart);
+            this.fragmentReceived += reliableLen;
+            if (this.fragmentReceived >= fragTotal) {
+              reliableData = this.fragmentBuffer;
+              this.incomingReliableSequence++;
+              this.fragmentBuffer = null;
+              this.fragmentLength = 0;
+              this.fragmentReceived = 0;
+            }
+          }
+        } else {
+          this.incomingReliableSequence++;
+          if (payloadOffset + reliableLen > packet.byteLength) return null;
+          reliableData = packet.slice(payloadOffset, payloadOffset + reliableLen);
+        }
       }
       payloadOffset += reliableLen;
     }
@@ -9570,7 +9720,7 @@ var _NetChan3 = class _NetChan4 {
    * Writes a byte to the reliable message buffer
    */
   writeReliableByte(value) {
-    if (this.reliableLength + 1 > _NetChan4.MAX_MSGLEN - _NetChan4.HEADER_OVERHEAD) {
+    if (this.reliableLength + 1 > _NetChan4.MAX_RELIABLE_BUFFER) {
       throw new Error("NetChan reliable buffer overflow");
     }
     this.reliableMessage.writeByte(value);
@@ -9580,7 +9730,7 @@ var _NetChan3 = class _NetChan4 {
    * Writes a short to the reliable message buffer
    */
   writeReliableShort(value) {
-    if (this.reliableLength + 2 > _NetChan4.MAX_MSGLEN - _NetChan4.HEADER_OVERHEAD) {
+    if (this.reliableLength + 2 > _NetChan4.MAX_RELIABLE_BUFFER) {
       throw new Error("NetChan reliable buffer overflow");
     }
     this.reliableMessage.writeShort(value);
@@ -9590,7 +9740,7 @@ var _NetChan3 = class _NetChan4 {
    * Writes a long to the reliable message buffer
    */
   writeReliableLong(value) {
-    if (this.reliableLength + 4 > _NetChan4.MAX_MSGLEN - _NetChan4.HEADER_OVERHEAD) {
+    if (this.reliableLength + 4 > _NetChan4.MAX_RELIABLE_BUFFER) {
       throw new Error("NetChan reliable buffer overflow");
     }
     this.reliableMessage.writeLong(value);
@@ -9601,7 +9751,7 @@ var _NetChan3 = class _NetChan4 {
    */
   writeReliableString(value) {
     const len2 = value.length + 1;
-    if (this.reliableLength + len2 > _NetChan4.MAX_MSGLEN - _NetChan4.HEADER_OVERHEAD) {
+    if (this.reliableLength + len2 > _NetChan4.MAX_RELIABLE_BUFFER) {
       throw new Error("NetChan reliable buffer overflow");
     }
     this.reliableMessage.writeString(value);
@@ -9634,6 +9784,7 @@ _NetChan3.MAX_MSGLEN = 1400;
 _NetChan3.FRAGMENT_SIZE = 1024;
 _NetChan3.PACKET_HEADER = 10;
 _NetChan3.HEADER_OVERHEAD = _NetChan3.PACKET_HEADER + 2;
+_NetChan3.MAX_RELIABLE_BUFFER = 262144;
 var NetChan = _NetChan3;
 var AmmoType2 = /* @__PURE__ */ ((AmmoType22) => {
   AmmoType22[AmmoType22["Bullets"] = 0] = "Bullets";
@@ -11880,6 +12031,89 @@ var MultiplayerConnection = class {
   }
 };
 
+// src/ui/demo-controls.ts
+var DemoControls = class {
+  constructor(playback) {
+    this.isVisible = true;
+    this.playback = playback;
+  }
+  render(renderer, width, height) {
+    if (!this.isVisible) return;
+    const state = this.playback.getState();
+    const isPlaying = state === PlaybackState.Playing;
+    const overlayHeight = 60;
+    const y = height - overlayHeight;
+    renderer.drawfillRect(0, y, width, overlayHeight, [0, 0, 0, 0.5]);
+    const iconSize = 24;
+    const iconY = y + (overlayHeight - iconSize) / 2;
+    const iconX = 20;
+    const statusText = isPlaying ? "PAUSE" : "PLAY";
+    renderer.drawString(iconX, iconY, statusText);
+    const speed = this.playback.getSpeed();
+    const speedText = `Speed: ${speed}x`;
+    renderer.drawCenterString(iconY, speedText);
+    const currentTime = this.playback.getCurrentTime();
+    const currentFormatted = this.formatTime(currentTime);
+    const totalFormatted = "--:--";
+    const timeText = `${currentFormatted} / ${totalFormatted}`;
+    const timeX = width - 150;
+    renderer.drawString(timeX, iconY, timeText);
+    const timelineY = y + 5;
+    const timelineHeight = 4;
+    const timelineWidth = width - 40;
+    const timelineX = 20;
+    renderer.drawfillRect(timelineX, timelineY, timelineWidth, timelineHeight, [0.3, 0.3, 0.3, 1]);
+    const progress = 0;
+    const progressWidth = timelineWidth * progress;
+    renderer.drawfillRect(timelineX, timelineY, progressWidth, timelineHeight, [1, 1, 1, 1]);
+    const markerX = timelineX + progressWidth;
+    renderer.drawfillRect(markerX - 2, timelineY - 2, 4, timelineHeight + 4, [1, 0, 0, 1]);
+    const helpText = "[Space] Toggle  [< >] Step  [ [ ] ] Speed  [Esc] Stop";
+    renderer.drawCenterString(y + 35, helpText);
+  }
+  handleInput(key, down) {
+    if (!down) return false;
+    switch (key.toLowerCase()) {
+      case " ":
+        if (this.playback.getState() === PlaybackState.Playing) {
+          this.playback.pause();
+        } else if (this.playback.getState() === PlaybackState.Paused) {
+          this.playback.play();
+        }
+        return true;
+      case "arrowright":
+        this.playback.stepForward();
+        return true;
+      case "arrowleft":
+        this.playback.stepBackward();
+        return true;
+      case "]":
+        this.changeSpeed(2);
+        return true;
+      case "[":
+        this.changeSpeed(0.5);
+        return true;
+      case "escape":
+        this.playback.stop();
+        return true;
+    }
+    return false;
+  }
+  changeSpeed(factor) {
+    const current = this.playback.getSpeed();
+    let newSpeed = current * factor;
+    if (newSpeed < 0.1) newSpeed = 0.1;
+    if (newSpeed > 16) newSpeed = 16;
+    this.playback.setSpeed(newSpeed);
+  }
+  formatTime(ms) {
+    const totalSeconds = Math.floor(ms / 1e3);
+    const minutes = Math.floor(totalSeconds / 60);
+    const seconds = totalSeconds % 60;
+    return `${minutes.toString().padStart(2, "0")}:${seconds.toString().padStart(2, "0")}`;
+  }
+};
+
 // src/input/bindings.ts
 var DEFAULT_BINDINGS = [
   { code: "KeyW", command: "+forward" },
@@ -12392,6 +12626,7 @@ function createClient(imports) {
   const prediction = new import_cgame3.ClientPrediction(imports.engine.trace, pointContents);
   const view = new import_cgame4.ViewEffects();
   const demoPlayback = new DemoPlaybackController();
+  const demoControls = new DemoControls(demoPlayback);
   const demoHandler = new ClientNetworkHandler(imports);
   demoHandler.setView(view);
   let isDemoPlaying = false;
@@ -12586,6 +12821,11 @@ function createClient(imports) {
       return prediction.enqueueCommand(command);
     },
     handleInput(key, down) {
+      if (isDemoPlaying) {
+        if (demoControls.handleInput(key, down)) {
+          return true;
+        }
+      }
       if (!menuSystem.isActive()) return false;
       if (!down) return true;
       const lowerKey = key.toLowerCase();
@@ -12805,6 +13045,9 @@ function createClient(imports) {
       if (menuSystem.isActive()) {
         Draw_Menu(imports.engine.renderer, menuSystem.getState(), imports.engine.renderer.width, imports.engine.renderer.height);
       }
+      if (isDemoPlaying) {
+        demoControls.render(imports.engine.renderer, imports.engine.renderer.width, imports.engine.renderer.height);
+      }
       if (lastRendered && lastRendered.client) {
         wheelMenuSystem.render(imports.engine.renderer, imports.engine.renderer.width, imports.engine.renderer.height, lastRendered.client);
       }