@bloopjs/web 0.0.48 → 0.0.50

package/src/debugui/styles.ts

@@ -0,0 +1,200 @@
+export const styles = /*css*/ `
+/* Reset for shadow DOM */
+* {
+  box-sizing: border-box;
+}
+
+/* Layout */
+.fullscreen {
+  width: 100%;
+  height: 100%;
+  margin: 0;
+  padding: 0;
+  overflow: hidden;
+}
+
+.layout {
+  display: grid;
+  grid-template-areas:
+    "game stats"
+    "logs logs";
+  grid-template-columns: calc(50% - 0.5rem) calc(50% - 0.5rem);
+  grid-template-rows: calc(50% - 0.5rem) calc(50% - 0.5rem);
+  gap: 1rem;
+  width: 100%;
+  height: 100%;
+  padding: 1rem;
+}
+
+.game {
+  grid-area: game;
+  border-radius: 8px;
+  overflow: hidden;
+}
+
+.stats {
+  grid-area: stats;
+  background-color: #f0f0f0;
+  padding: 1rem;
+  border-radius: 8px;
+  overflow: hidden;
+}
+
+.logs {
+  grid-area: logs;
+  background-color: #f0f0f0;
+  padding: 1rem;
+  border-radius: 8px;
+  overflow: hidden;
+}
+
+/* Canvas container */
+.canvas-container {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.canvas-container canvas {
+  max-width: 100%;
+  max-height: 100%;
+}
+
+/* Debug toggle button */
+.debug-toggle {
+  position: fixed;
+  bottom: 16px;
+  right: 16px;
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+  border: none;
+  background-color: rgba(0, 0, 0, 0.5);
+  color: white;
+  font-size: 18px;
+  cursor: pointer;
+  z-index: 1000;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: background-color 0.2s;
+}
+
+.debug-toggle:hover {
+  background-color: rgba(0, 0, 0, 0.7);
+}
+
+/* Stats panel */
+.stats-panel {
+  background: rgba(0, 0, 0, 0.7);
+  color: white;
+  padding: 12px;
+  border-radius: 8px;
+  font-family: monospace;
+  font-size: 14px;
+  max-width: 100%;
+  overflow: hidden;
+}
+
+.stats-panel h3 {
+  margin: 0 0 8px 0;
+  font-size: 14px;
+  font-weight: 600;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.stats-panel table {
+  width: 100%;
+  border-collapse: collapse;
+  table-layout: fixed;
+}
+
+.stats-panel tr {
+  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
+}
+
+.stats-panel tr:last-child {
+  border-bottom: none;
+}
+
+.stats-panel td {
+  padding: 4px 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.stats-panel td:first-child {
+  opacity: 0.7;
+  width: 60%;
+}
+
+.stats-panel td:last-child {
+  text-align: right;
+  font-weight: 600;
+  width: 40%;
+}
+
+.stats-panel p {
+  margin: 0;
+  opacity: 0.7;
+}
+
+/* Logs panel */
+.logs-list {
+  width: 100%;
+  height: 100%;
+  overflow: auto;
+  margin: 0;
+  padding: 0;
+}
+
+.logs-list li {
+  margin: 0 0 24px 0;
+  list-style: none;
+}
+
+.logs-list h3 {
+  font-size: 16px;
+  font-weight: 500;
+  margin: 0;
+}
+
+.logs-list .ws {
+  color: darkolivegreen;
+}
+
+.logs-list .webrtc {
+  color: darkmagenta;
+}
+
+.logs-list .rollback {
+  color: darkblue;
+}
+
+.logs-list .local {
+  color: #333;
+}
+
+.logs-list .content {
+  font-size: 16px;
+}
+
+.logs-list p {
+  margin: 4px 0;
+}
+
+.logs-list pre {
+  margin: 0;
+  white-space: pre-wrap;
+  word-break: break-word;
+  background-color: oldlace;
+  padding: 8px;
+  border-radius: 4px;
+  border: 1px inset lavender;
+}
+`;

package/src/mod.ts

@@ -1,2 +1,3 @@
-export { App, start } from "./App.ts";
+export { App, type StartOptions, start } from "./App.ts";
+export * as Debug from "./debugui/mod.ts";
 export * from "./netcode/mod.ts";

package/src/netcode/mod.ts

@@ -9,6 +9,8 @@ export type {
 } from "./logs.ts";
 export type { WebRtcPipe } from "./transport.ts";
 export type { RoomEvents } from "./broker.ts";
+export type { JoinRollbackRoomOptions } from "./scaffold.ts";
 
 export { PacketType } from "./protocol.ts";
 export { logger } from "./logs.ts";
+export { joinRollbackRoom } from "./scaffold.ts";

package/src/netcode/scaffold.ts

@@ -0,0 +1,169 @@
+import type { App } from "../App.ts";
+import * as Debug from "../debugui/mod.ts";
+import { logger } from "./logs.ts";
+
+export type JoinRollbackRoomOptions = {
+  /** Called when session becomes active */
+  onSessionStart?: () => void;
+  /** Called when session ends */
+  onSessionEnd?: () => void;
+};
+
+/**
+ * Join a rollback netcode room and wire up packet processing.
+ * This is a scaffold/stopgap - not the final architecture.
+ */
+export function joinRollbackRoom(
+  roomId: string,
+  app: App,
+  opts?: JoinRollbackRoomOptions,
+): void {
+  // State
+  let udp: RTCDataChannel | null = null;
+  let sessionActive = false;
+  let localPeerId: number | null = null;
+  let remotePeerId: number | null = null;
+  let localStringPeerId: string | null = null;
+  let remoteStringPeerId: string | null = null;
+  const incomingPackets: Uint8Array[] = [];
+
+  function assignPeerIds(
+    localId: string,
+    remoteId: string,
+  ): { local: number; remote: number } {
+    if (localId < remoteId) {
+      return { local: 0, remote: 1 };
+    } else {
+      return { local: 1, remote: 0 };
+    }
+  }
+
+  function receivePackets() {
+    for (const packetData of incomingPackets) {
+      app.sim.net.receivePacket(packetData);
+
+      if (remotePeerId == null) {
+        return;
+      }
+
+      const peerState = app.sim.net.getPeerState(remotePeerId);
+      Debug.updatePeer(remoteStringPeerId!, {
+        ack: peerState.ack,
+        seq: peerState.seq,
+        lastPacketTime: performance.now(),
+      });
+    }
+    incomingPackets.length = 0;
+  }
+
+  function sendPacket() {
+    if (!udp || remotePeerId === null) {
+      console.warn("[netcode] Cannot send packet, udp or remotePeerId is null");
+      return;
+    }
+
+    if (udp.readyState !== "open") {
+      console.warn(
+        "[netcode] Data channel not open, cannot send packet. readyState=",
+        udp.readyState,
+      );
+      return;
+    }
+
+    const packet = app.sim.net.getOutboundPacket(remotePeerId);
+
+    if (!packet) {
+      console.warn("[netcode] No packet to send");
+      return;
+    }
+
+    udp.send(packet);
+  }
+
+  // Wire up logger to debug state
+  logger.onLog = (log) => {
+    Debug.addLog(log);
+  };
+
+  app.joinRoom(roomId, {
+    onPeerIdAssign: (peerId) => {
+      console.log(`Assigned peer ID: ${peerId}`);
+      localStringPeerId = peerId;
+    },
+    onBrokerMessage: (_message) => {},
+    onMessage(_peerId, data, _reliable) {
+      incomingPackets.push(new Uint8Array(data));
+    },
+    onDataChannelClose(peerId, reliable) {
+      console.log(`Data channel closed: ${peerId} (reliable: ${reliable})`);
+      if (!reliable && remotePeerId !== null) {
+        app.sim.net.disconnectPeer(remotePeerId);
+        sessionActive = false;
+        opts?.onSessionEnd?.();
+      }
+    },
+    onDataChannelOpen(peerId, reliable, channel) {
+      console.log(`Data channel opened: ${peerId} (reliable: ${reliable})`);
+      if (!reliable) {
+        udp = channel;
+
+        if (localStringPeerId === null) {
+          console.error("[netcode] Local peer ID not assigned yet!");
+          return;
+        }
+
+        const ids = assignPeerIds(localStringPeerId, peerId);
+        localPeerId = ids.local;
+        Debug.setLocalId(localPeerId);
+        remotePeerId = ids.remote;
+        remoteStringPeerId = peerId;
+        Debug.setRemoteId(remotePeerId);
+
+        // Initialize the session in the engine (2 players)
+        app.sim.sessionInit(2);
+
+        // Set up local and remote peers in net state
+        app.sim.net.setLocalPeer(localPeerId);
+        app.sim.net.connectPeer(remotePeerId);
+
+        sessionActive = true;
+        console.log(`[netcode] Session started at frame ${app.sim.time.frame}`);
+        opts?.onSessionStart?.();
+      }
+    },
+    onPeerConnected(peerId) {
+      Debug.addPeer({
+        id: peerId,
+        nickname: peerId.substring(0, 6),
+        ack: -1,
+        seq: -1,
+        lastPacketTime: performance.now(),
+      });
+      console.log(
+        `[netcode] Peer connected: ${peerId}. Total peers: ${Debug.debugState.netStatus.value.peers.length}`,
+      );
+    },
+    onPeerDisconnected(peerId) {
+      Debug.removePeer(peerId);
+      if (remotePeerId !== null && peerId === remoteStringPeerId) {
+        app.sim.net.disconnectPeer(remotePeerId);
+        sessionActive = false;
+        opts?.onSessionEnd?.();
+      }
+    },
+  });
+
+  // Process packets and send our state each frame
+  app.beforeFrame.subscribe((_frame) => {
+    if (!sessionActive || !udp || remotePeerId === null) {
+      return;
+    }
+
+    try {
+      receivePackets();
+      sendPacket();
+    } catch (e) {
+      console.error("Error in beforeFrame:", e);
+    }
+  });
+}