@three333/termbuddy 0.1.1 → 0.1.2

package/src/page/Session.tsx

@@ -60,6 +60,12 @@ export function Session(
       direction: ProjectileDirection;
     }>
   >([]);
+  const [localBubble, setLocalBubble] = useState<string | null>(null);
+  const [buddyBubble, setBuddyBubble] = useState<string | null>(null);
+  const bubbleTimersRef = useRef<{
+    local: NodeJS.Timeout | null;
+    buddy: NodeJS.Timeout | null;
+  }>({ local: null, buddy: null });
 
   const tcpOptions = useMemo(() => {
     return props.role === "host"
@@ -96,7 +102,20 @@ export function Session(
 
   const localActivity = useActivityMonitor();
 
-  const remoteActivity: ActivityState = tcp.remoteState ?? "OFFLINE";
+  // Fix: Derive peers from single peerName until multi-peer is supported
+  const peers = useMemo(() => {
+    return tcp.peerName
+      ? [
+          {
+            id: "remote",
+            name: tcp.peerName,
+            state: tcp.remoteState ?? ("OFFLINE" as const),
+          },
+        ]
+      : [];
+  }, [tcp.peerName, tcp.remoteState]);
+
+  const firstPeerName = tcp.peerName;
 
   const onToggleAi = useCallback(() => setShowAi((v) => !v), []);
   const onCloseAi = useCallback(() => setShowAi(false), []);
@@ -170,10 +189,10 @@ export function Session(
       connectedDurationMs,
       startedAt: sessionStartAtRef.current,
       endedAt,
-      peerName: tcp.peerName,
+      peerName: firstPeerName,
     };
     props.onLeave(stats);
-  }, [props, tcp.peerName]);
+  }, [props, firstPeerName]);
 
   const startCountdown = useCallback((minutes: number) => {
     const totalSeconds = Math.max(1, Math.floor(minutes * 60));
@@ -189,10 +208,57 @@ export function Session(
     });
   }, []);
 
+  const nextShotIdRef = useRef<number>(1);
+  const shotQueueRef = useRef<
+    Array<{ kind: ProjectileKind; direction: ProjectileDirection }>
+  >([]);
+
+  const pumpShotQueue = useCallback(() => {
+    setShots((prev) => {
+      if (prev.length >= 1) return prev;
+      const next = shotQueueRef.current.shift();
+      if (!next) return prev;
+      const id = nextShotIdRef.current++;
+      return [...prev, { id, kind: next.kind, direction: next.direction }];
+    });
+  }, []);
+
+  useEffect(() => {
+    if (shots.length === 0) pumpShotQueue();
+  }, [shots.length, pumpShotQueue]);
+
   const throwProjectile = useCallback(
     (kind: ProjectileKind, direction: ProjectileDirection) => {
-      const id = Date.now() + Math.floor(Math.random() * 1000);
-      setShots((prev) => [...prev, { id, kind, direction }]);
+      shotQueueRef.current.push({ kind, direction });
+      pumpShotQueue();
+      if (tcp.status === "connected") tcp.sendProjectile(kind, direction);
+    },
+    [pumpShotQueue, tcp]
+  );
+
+  const showBubble = useCallback(
+    (args: { text: string; target: "local" | "buddy"; durationMs: number }) => {
+      const text = args.text.trim();
+      if (!text) return;
+      const durationMs = Math.max(300, Math.min(15_000, Math.floor(args.durationMs)));
+
+      const setBubble = args.target === "buddy" ? setBuddyBubble : setLocalBubble;
+      setBubble(text);
+
+      const prevTimer =
+        args.target === "buddy"
+          ? bubbleTimersRef.current.buddy
+          : bubbleTimersRef.current.local;
+      if (prevTimer) clearTimeout(prevTimer);
+
+      const handle = setTimeout(() => {
+        setBubble(null);
+        if (args.target === "buddy") bubbleTimersRef.current.buddy = null;
+        else bubbleTimersRef.current.local = null;
+      }, durationMs);
+
+      if (args.target === "buddy") bubbleTimersRef.current.buddy = handle;
+      else bubbleTimersRef.current.local = handle;
     },
     []
   );
@@ -212,11 +278,6 @@ export function Session(
     { isActive: !showAi && countdown !== null }
   );
 
-  const buddyName =
-    props.role === "host"
-      ? tcp.peerName ?? "Waiting..."
-      : props.hostName ?? "Host";
-
   const localState = localActivity.state;
   const localLabel =
     props.role === "host"
@@ -229,6 +290,18 @@ export function Session(
     tcp.sendStatus(localState);
   }, [localState, tcp.status, tcp.sendStatus]);
 
+  // Handle incoming projectiles from peer (flip direction)
+  useEffect(() => {
+    const handleRemoteProjectile = (kind: ProjectileKind, direction: ProjectileDirection, _senderName?: string) => {
+      const flippedDirection: ProjectileDirection =
+        direction === "LEFT_TO_RIGHT" ? "RIGHT_TO_LEFT" : "LEFT_TO_RIGHT";
+      shotQueueRef.current.push({ kind, direction: flippedDirection });
+      pumpShotQueue();
+    };
+
+    tcp.setOnRemoteProjectile(handleRemoteProjectile);
+  }, [tcp, pumpShotQueue]);
+
   useEffect(() => {
     if (!countdown) return;
     const endsAt = countdown.endsAt;
@@ -245,6 +318,13 @@ export function Session(
     return () => clearInterval(handle);
   }, [countdown?.endsAt]);
 
+  useEffect(() => {
+    return () => {
+      if (bubbleTimersRef.current.local) clearTimeout(bubbleTimersRef.current.local);
+      if (bubbleTimersRef.current.buddy) clearTimeout(bubbleTimersRef.current.buddy);
+    };
+  }, []);
+
   return (
     <Box flexDirection="column" padding={1}>
       <StatusHeader
@@ -252,6 +332,7 @@ export function Session(
         status={tcp.status}
         hostIp={props.role === "client" ? props.hostIp : undefined}
         tcpPort={props.role === "client" ? props.tcpPort : tcp.listenPort}
+        peerCount={peers.length}
       />
 
       {/* Main Stage: 3 Columns */}
@@ -279,7 +360,7 @@ export function Session(
           ) : (
             <Box height={4} />
           )}
-          <BuddyAvatar state={localState} marginTop={0} />
+          <BuddyAvatar state={localState} marginTop={0} bubbleText={localBubble} />
           <Text color="cyan">{localLabel}</Text>
         </Box>
 
@@ -309,12 +390,27 @@ export function Session(
           </Box>
         </Box>
 
-        {/* Right: Remote User */}
+        {/* Right: Remote Users */}
         <Box flexDirection="column" alignItems="center" minWidth={20}>
-          {/* Placeholder for remote clock to keep alignment with local user */}
-          <Box height={4} />
-          <BuddyAvatar state={remoteActivity} marginTop={0} />
-          <Text color="magenta">{buddyName}</Text>
+          {peers.length === 0 ? (
+            <>
+              <Box height={4} />
+              <BuddyAvatar state="OFFLINE" marginTop={0} bubbleText={buddyBubble} />
+              <Text color="gray">Waiting...</Text>
+            </>
+          ) : (
+            <Box flexDirection="row" gap={2} flexWrap="wrap" justifyContent="center">
+              {peers.slice(0, 4).map((peer) => (
+                <Box key={peer.id} flexDirection="column" alignItems="center">
+                  <BuddyAvatar state={peer.state} marginTop={0} bubbleText={buddyBubble} />
+                  <Text color="magenta">{peer.name}</Text>
+                </Box>
+              ))}
+              {peers.length > 4 && (
+                <Text color="gray">+{peers.length - 4} more</Text>
+              )}
+            </Box>
+          )}
         </Box>
       </Box>
 
@@ -348,10 +444,11 @@ export function Session(
             <AiConsole
               onClose={onCloseAi}
               onStartCountdown={startCountdown}
+              onShowBubble={showBubble}
               onThrowProjectile={throwProjectile}
               localName={props.localName}
               peerName={
-                tcp.peerName ??
+                firstPeerName ??
                 (props.role === "client" ? props.hostName : undefined) ??
                 "Buddy"
               }

package/src/protocol.ts

@@ -9,10 +9,22 @@ export type DiscoveryPacket = {
 	sentAt: number;
 };
 
+export type ProjectileKind = "ROSE" | "POOP" | "HAMMER";
+export type ProjectileDirection = "LEFT_TO_RIGHT" | "RIGHT_TO_LEFT";
+
 export type TcpPacket =
 	| {type: 'hello'; hostName: string; clientName: string; sentAt: number}
-	| {type: 'status'; state: ActivityState; sentAt: number}
+	| {type: 'status'; state: ActivityState; senderName?: string; sentAt: number}
 	| {type: 'ping'; sentAt: number}
-	| {type: 'pong'; sentAt: number};
+	| {type: 'pong'; sentAt: number}
+	| {type: 'projectile'; kind: ProjectileKind; direction: ProjectileDirection; senderName?: string; sentAt: number}
+	| {type: 'peer_joined'; peerName: string; sentAt: number}
+	| {type: 'peer_left'; peerName: string; sentAt: number};
+
+export type Peer = {
+	id: string;
+	name: string;
+	state: ActivityState;
+};
 
 export type ConnectionStatus = 'waiting' | 'connecting' | 'connected' | 'disconnected';

package/src/storage/apiKey.ts

@@ -28,9 +28,13 @@ export async function loadStoredApiKey(): Promise<string | null> {
 }
 
 export async function saveStoredApiKey(apiKey: string): Promise<void> {
+	const trimmed = apiKey.trim();
+	if (trimmed.length === 0) {
+		throw new Error('API key cannot be empty');
+	}
 	const absolute = path.resolve(process.cwd(), KEY_RELATIVE_PATH);
 	await ensureDirForFile(absolute);
-	const payload: KeyFile = {apiKey};
+	const payload: KeyFile = {apiKey: trimmed};
 	await fs.writeFile(absolute, `${JSON.stringify(payload, null, 2)}\n`, 'utf8');
 }