use callbag-pipe

package.json

@@ -23,6 +23,7 @@
     "callbag": "^1.2.0",
     "callbag-animation-frames": "^2.1.0",
     "callbag-map": "^1.1.0",
+    "callbag-pipe": "^1.2.0",
     "callbag-subscribe": "^1.5.1"
   }
 }

src/Game/Main.ts

@@ -1,3 +1,4 @@
+import pipe from "callbag-pipe";
 import subscribe from "callbag-subscribe";
 
 import { KeyControl, KeyName } from "../Applet/Keyboard";
@@ -20,15 +21,18 @@ export class Main extends LockstepClient<KeyName[], Data> {
 
         this.connect(Loopback);
 
-        subscribe((frame: Data) => {
-            const drawSet = new DrawSet();
-            cx.fillStyle = "#000";
-            cx.fillRect(0, 0, canvas.width, canvas.height);
+        pipe(
+            this.renderFrames,
+            subscribe((frame: Data) => {
+                const drawSet = new DrawSet();
+                cx.fillStyle = "#000";
+                cx.fillRect(0, 0, canvas.width, canvas.height);
 
-            RunRenderBounds(frame, drawSet);
+                RunRenderBounds(frame, drawSet);
 
-            drawSet.draw(cx, 0);
-        })(this.renderFrames);
+                drawSet.draw(cx, 0);
+            })
+        );
     }
 
     gatherInput() {

src/Net/LockstepClient.ts

@@ -2,6 +2,7 @@
 import { Callbag } from "callbag";
 import animationFrames from "callbag-animation-frames";
 import map from "callbag-map";
+import pipe from "callbag-pipe";
 
 import { INPUT_FREQUENCY, LockstepProcessor, LockstepState } from "../Ecs/Lockstep";
 
@@ -88,5 +89,8 @@ export abstract class LockstepClient<Input, State> {
         };
     }
 
-    public renderFrames = map((ms: number) => this.state.getStateToRender())(animationFrames);
+    public renderFrames = pipe(
+        animationFrames,
+        map(_ms => this.state.getStateToRender())
+    );
 }