solanapolis 1.0.0

package/src/components/FlightMiniMap.tsx

@@ -0,0 +1,133 @@
+"use client";
+
+import { useEffect, useRef } from "react";
+import type { Map as MapboxMap, Marker } from "mapbox-gl";
+
+interface MiniMapProps {
+  lon: number;
+  lat: number;
+  heading: number;
+}
+
+const MAPBOX_TOKEN = process.env.NEXT_PUBLIC_MAPBOX_TOKEN ?? "";
+
+export default function MiniMap({ lon, lat, heading }: MiniMapProps) {
+  const containerRef  = useRef<HTMLDivElement>(null);
+  const mapRef        = useRef<MapboxMap | null>(null);
+  const markerRef     = useRef<Marker | null>(null);
+  // Inner arrow element we rotate — the marker wrapper is owned by Mapbox for positioning
+  const arrowRef      = useRef<HTMLDivElement | null>(null);
+
+  // Initialize map once
+  useEffect(() => {
+    if (!containerRef.current || !MAPBOX_TOKEN) return;
+    let mounted = true;
+
+    async function init() {
+      const mapboxgl = (await import("mapbox-gl")).default;
+
+      if (!document.querySelector("#mapbox-css")) {
+        const link = document.createElement("link");
+        link.id = "mapbox-css";
+        link.rel = "stylesheet";
+        link.href = "https://api.mapbox.com/mapbox-gl-js/v3.19.1/mapbox-gl.css";
+        document.head.appendChild(link);
+      }
+
+      if (!mounted || !containerRef.current) return;
+      mapboxgl.accessToken = MAPBOX_TOKEN;
+
+      const map = new mapboxgl.Map({
+        container:        containerRef.current,
+        style:            "mapbox://styles/mapbox/satellite-streets-v12",
+        center:           [lon, lat],
+        zoom:             12,
+        bearing:          0,
+        pitch:            0,
+        interactive:      false,
+        attributionControl: false,
+      });
+
+      mapRef.current = map;
+
+      // Outer wrapper (just a transparent hit-area — Mapbox positions this)
+      const wrapper = document.createElement("div");
+      wrapper.style.cssText = "width:24px;height:24px;position:relative;";
+
+      // Inner arrow — this is what we rotate, so Mapbox's translate() stays intact
+      const arrow = document.createElement("div");
+      arrow.style.cssText = `
+        width: 24px;
+        height: 24px;
+        background: #E35930;
+        clip-path: polygon(50% 0%, 18% 100%, 50% 78%, 82% 100%);
+        transform-origin: 50% 50%;
+        filter: drop-shadow(0 0 5px rgba(227,89,48,0.9));
+        transition: transform 0.15s linear;
+      `;
+      wrapper.appendChild(arrow);
+      arrowRef.current = arrow;
+
+      map.on("load", () => {
+        if (!mounted) return;
+        const marker = new mapboxgl.Marker({ element: wrapper, anchor: "center" })
+          .setLngLat([lon, lat])
+          .addTo(map);
+        markerRef.current = marker;
+      });
+    }
+
+    init().catch(console.error);
+
+    return () => {
+      mounted = false;
+      try { mapRef.current?.remove(); } catch { /* ignore */ }
+      mapRef.current   = null;
+      markerRef.current = null;
+      arrowRef.current  = null;
+    };
+  }, []); // eslint-disable-line react-hooks/exhaustive-deps
+
+  // Update position and heading each render
+  useEffect(() => {
+    const map    = mapRef.current;
+    const marker = markerRef.current;
+    const arrow  = arrowRef.current;
+    if (!map || !marker || !arrow) return;
+
+    marker.setLngLat([lon, lat]);
+
+    // Rotate only the arrow child — leaves Mapbox's position transform on the wrapper untouched
+    arrow.style.transform = `rotate(${heading}deg)`;
+
+    // Smoothly pan the map to follow aircraft
+    map.easeTo({ center: [lon, lat], duration: 200, easing: (t) => t });
+  }, [lon, lat, heading]);
+
+  if (!MAPBOX_TOKEN) return null;
+
+  return (
+    <div
+      className="relative rounded-2xl overflow-hidden shadow-2xl"
+      style={{
+        width: 180,
+        height: 180,
+        border: "1px solid rgba(255,255,255,0.12)",
+        boxShadow: "0 4px 32px rgba(0,0,0,0.7), 0 0 0 1px rgba(227,89,48,0.15)",
+      }}
+    >
+      <div ref={containerRef} className="w-full h-full" />
+
+      {/* Compass rose */}
+      <div className="absolute top-1.5 left-1/2 -translate-x-1/2 text-[8px] text-white/70 font-bold tracking-widest pointer-events-none select-none drop-shadow-[0_1px_2px_rgba(0,0,0,0.9)]">N</div>
+      <div className="absolute bottom-7 left-1/2 -translate-x-1/2 text-[8px] text-white/50 font-bold tracking-widest pointer-events-none select-none drop-shadow-[0_1px_2px_rgba(0,0,0,0.9)]">S</div>
+      <div className="absolute left-1.5 top-1/2 -translate-y-1/2 text-[8px] text-white/50 font-bold tracking-widest pointer-events-none select-none drop-shadow-[0_1px_2px_rgba(0,0,0,0.9)]">W</div>
+      <div className="absolute right-1.5 top-1/2 -translate-y-1/2 text-[8px] text-white/50 font-bold tracking-widest pointer-events-none select-none drop-shadow-[0_1px_2px_rgba(0,0,0,0.9)]">E</div>
+
+      {/* Label */}
+      <div className="absolute bottom-1.5 left-1/2 -translate-x-1/2 text-[8px] text-white/60 font-mono tracking-widest bg-black/70 px-2 py-0.5 rounded-full pointer-events-none whitespace-nowrap">
+        SOLANApolis
+      </div>
+    </div>
+  );
+}

package/src/components/GameChat.tsx

@@ -0,0 +1,383 @@
+"use client";
+
+import { useState, useEffect, useRef, useCallback, Component, type ReactNode } from "react";
+import { useQuery, useMutation } from "convex/react";
+import { useStream } from "@convex-dev/persistent-text-streaming/react";
+import { api } from "../../convex/_generated/api";
+import type { StreamId } from "@convex-dev/persistent-text-streaming";
+import type { Doc } from "../../convex/_generated/dataModel";
+
+/** Catches Convex "no provider" errors so the whole page doesn't crash */
+class ConvexErrorBoundary extends Component<{ children: ReactNode }, { hasError: boolean }> {
+  state = { hasError: false };
+  static getDerivedStateFromError() { return { hasError: true }; }
+  render() {
+    if (this.state.hasError) return null;
+    return this.props.children;
+  }
+}
+
+interface GameChatProps {
+  walletAddress: string | null;
+  displayName?: string | null;
+  hasBuilding: boolean;
+}
+
+const CONVEX_SITE_URL = process.env.NEXT_PUBLIC_CONVEX_SITE_URL || "https://original-ibex-124.convex.site";
+
+function truncAddr(addr: string | null | undefined): string {
+  if (!addr) return "unknown";
+  return addr.length <= 10 ? addr : addr.slice(0, 4) + "\u2026" + addr.slice(-4);
+}
+
+function nameHue(addr: string | null | undefined): number {
+  const safe = addr || "unknown";
+  let h = 0;
+  for (let i = 0; i < safe.length; i++) h = ((h << 5) - h + safe.charCodeAt(i)) | 0;
+  return Math.abs(h) % 360;
+}
+
+function ago(ts: number): string {
+  const s = Math.floor((Date.now() - ts) / 1000);
+  if (s < 10) return "now";
+  if (s < 60) return `${s}s`;
+  if (s < 3600) return `${Math.floor(s / 60)}m`;
+  return `${Math.floor(s / 3600)}h`;
+}
+
+/** Renders a single AI message with streaming support */
+function AiMessage({
+  msg,
+  isDriven,
+}: {
+  msg: Doc<"chat_messages">;
+  isDriven: boolean;
+}) {
+  const streamId = msg.responseStreamId as StreamId | undefined;
+  const { text, status } = useStream(
+    api.streaming.getStreamBody,
+    new URL(`${CONVEX_SITE_URL}/ai-chat-stream`),
+    isDriven,
+    streamId,
+  );
+  const displayText = text || (status === "pending" ? "Thinking..." : msg.message || "...");
+
+  return (
+    <div className="flex flex-col items-start">
+      <div className="flex items-center gap-1 mb-0.5">
+        <div className="w-1.5 h-1.5 rounded-full shrink-0 bg-gradient-to-r from-amber-400 to-orange-500" />
+        <span className="text-[9px] font-semibold text-amber-400/90">
+          {msg.display_name || "Helios AI"}
+        </span>
+        <span className="text-[7px] text-amber-400/30">AI</span>
+        <span className="text-[7px] text-white/10">{ago(msg._creationTime)}</span>
+      </div>
+      <div className="max-w-[85%] px-2.5 py-1.5 rounded-lg text-[11px] leading-relaxed break-words bg-amber-500/[0.08] text-amber-100/70 rounded-bl-sm border border-amber-500/[0.08]">
+        {displayText}
+        {status === "streaming" && (
+          <span className="inline-block w-1 h-3 ml-0.5 bg-amber-400/50 animate-pulse" />
+        )}
+        {status === "error" && (
+          <span className="text-red-400/50 text-[9px] ml-1">(error)</span>
+        )}
+      </div>
+    </div>
+  );
+}
+
+/** Renders an NPC agent message (no streaming) */
+function NPCMessage({ msg }: { msg: Doc<"chat_messages"> }) {
+  const wallet = msg.wallet_address || "npc";
+  const c = `hsl(${nameHue(wallet)},55%,65%)`;
+
+  return (
+    <div className="flex flex-col items-start">
+      <div className="flex items-center gap-1 mb-0.5">
+        <div className="w-1.5 h-1.5 rounded-full shrink-0 bg-gradient-to-r from-violet-400 to-fuchsia-500" />
+        <span className="text-[9px] font-semibold" style={{ color: c }}>
+          {msg.display_name || "NPC"}
+        </span>
+        <span className="text-[7px] text-violet-400/40">NPC</span>
+        <span className="text-[7px] text-white/10">{ago(msg._creationTime)}</span>
+      </div>
+      <div className="max-w-[85%] px-2.5 py-1.5 rounded-lg text-[11px] leading-relaxed break-words bg-violet-500/[0.08] text-violet-100/70 rounded-bl-sm border border-violet-500/[0.08]">
+        {msg.message}
+      </div>
+    </div>
+  );
+}
+
+/** Renders a player message */
+function PlayerMessage({
+  msg,
+  walletAddress,
+}: {
+  msg: Doc<"chat_messages">;
+  walletAddress: string | null;
+}) {
+  const wallet = msg.wallet_address || "unknown";
+  const me = walletAddress ? wallet === walletAddress : false;
+  const c = `hsl(${nameHue(wallet)},65%,60%)`;
+
+  return (
+    <div className={`flex flex-col ${me ? "items-end" : "items-start"}`}>
+      <div className="flex items-center gap-1 mb-0.5">
+        <div className="w-1.5 h-1.5 rounded-full shrink-0" style={{ background: c }} />
+        <span className="text-[9px] font-semibold" style={{ color: c }}>
+          {msg.display_name || truncAddr(wallet)}
+        </span>
+        <span className="text-[7px] text-white/10">{ago(msg._creationTime)}</span>
+      </div>
+      <div
+        className={`max-w-[80%] px-2.5 py-1 rounded-lg text-[11px] leading-relaxed break-words ${me
+          ? "bg-[#E35930]/12 text-white/80 rounded-br-sm"
+          : "bg-white/[0.04] text-white/60 rounded-bl-sm"
+          }`}
+      >
+        {msg.message}
+      </div>
+    </div>
+  );
+}
+
+export default function GameChat(props: GameChatProps) {
+  return (
+    <ConvexErrorBoundary>
+      <GameChatInner {...props} />
+    </ConvexErrorBoundary>
+  );
+}
+
+function GameChatInner({ walletAddress, displayName, hasBuilding }: GameChatProps) {
+  const messages = useQuery(api.chat.listMessages);
+  const sendMessageMutation = useMutation(api.chat.sendMessage);
+
+  const [drivenStreamIds, setDrivenStreamIds] = useState<Set<string>>(new Set());
+  const [txt, setTxt] = useState("");
+  const [open, setOpen] = useState(false);
+  const [busy, setBusy] = useState(false);
+  const [unread, setUnread] = useState(0);
+  const scrollEl = useRef<HTMLDivElement>(null);
+  const openRef = useRef(false);
+  const prevCountRef = useRef(0);
+  openRef.current = open;
+
+  // Track unread messages
+  useEffect(() => {
+    if (!messages) return;
+    const count = messages.length;
+    if (count > prevCountRef.current && !openRef.current) {
+      setUnread((c) => c + (count - prevCountRef.current));
+    }
+    prevCountRef.current = count;
+  }, [messages]);
+
+  // Auto-scroll to bottom
+  useEffect(() => {
+    if (open && scrollEl.current) {
+      scrollEl.current.scrollTop = scrollEl.current.scrollHeight;
+    }
+  }, [messages, open]);
+
+  // Clear unread when opened
+  useEffect(() => {
+    if (open) setUnread(0);
+  }, [open]);
+
+  // Re-render timestamps periodically
+  const [, setTick] = useState(0);
+  useEffect(() => {
+    const interval = setInterval(() => setTick((t) => t + 1), 30_000);
+    return () => clearInterval(interval);
+  }, []);
+
+  const send = useCallback(async () => {
+    if (!walletAddress || !hasBuilding || !txt.trim() || busy) return;
+    const text = txt.trim().slice(0, 280);
+    setTxt("");
+    setBusy(true);
+    try {
+      const result = await sendMessageMutation({
+        wallet_address: walletAddress,
+        display_name: displayName || truncAddr(walletAddress),
+        message: text,
+      });
+      // Mark this stream as driven by us so we initiate the HTTP stream
+      if (result?.streamId) {
+        setDrivenStreamIds((prev) => new Set(prev).add(result.streamId));
+      }
+    } catch (e: unknown) {
+      console.warn("[Chat] send error:", e instanceof Error ? e.message : e);
+      setTxt(text);
+    } finally {
+      setBusy(false);
+    }
+  }, [walletAddress, hasBuilding, displayName, txt, busy, sendMessageMutation]);
+
+  const onKey = useCallback(
+    (e: React.KeyboardEvent) => {
+      e.stopPropagation();
+      if (e.key === "Enter" && !e.shiftKey) {
+        e.preventDefault();
+        send();
+      }
+    },
+    [send],
+  );
+
+  const onKeyUp = useCallback((e: React.KeyboardEvent) => {
+    e.stopPropagation();
+  }, []);
+
+  const connected = messages !== undefined;
+  const rtState = connected ? "connected" : "connecting";
+
+  return (
+    <>
+      {/* Toggle */}
+      <div className="fixed bottom-4 left-4 sm:left-5 z-30">
+        <button
+          onClick={() => setOpen((o) => !o)}
+          className="flex items-center gap-2 bg-black/50 backdrop-blur-xl border border-white/[0.08] rounded-xl px-3 py-2 transition-all group hover:bg-black/70 cursor-pointer"
+          title={
+            !walletAddress
+              ? "Read city chat \u2014 connect wallet + claim building to send"
+              : hasBuilding
+                ? "Toggle chat"
+                : "Read-only chat \u2014 claim a building to send messages"
+          }
+        >
+          <span className="text-sm group-hover:scale-110 transition-transform">
+            {"\uD83D\uDCAC"}
+          </span>
+          <span className="text-[11px] text-white/40 font-medium group-hover:text-white/60">
+            City Chat
+          </span>
+          {rtState === "connected" ? (
+            <span className="w-1.5 h-1.5 rounded-full bg-emerald-400/80" title="Live" />
+          ) : (
+            <span
+              className="w-1.5 h-1.5 rounded-full bg-amber-400/80 animate-pulse"
+              title="Connecting"
+            />
+          )}
+          {unread > 0 && (
+            <span className="min-w-[16px] h-4 bg-[#E35930] rounded-full flex items-center justify-center px-1">
+              <span className="text-[8px] font-bold text-white leading-none">
+                {unread > 99 ? "99+" : unread}
+              </span>
+            </span>
+          )}
+        </button>
+      </div>
+
+      {/* Chat panel */}
+      {open && (
+        <div
+          className="fixed z-40 w-[calc(100vw-1.5rem)] sm:w-80 bg-black/80 backdrop-blur-2xl border border-white/[0.08] rounded-2xl overflow-hidden flex flex-col shadow-2xl"
+          style={{
+            bottom: 54,
+            left: 12,
+            maxHeight: "min(430px, calc(100vh - 140px))",
+          }}
+        >
+          {/* Header */}
+          <div className="px-3 py-2 border-b border-white/[0.06] flex items-center justify-between shrink-0">
+            <div className="flex items-center gap-2">
+              <span className="text-xs">{"\uD83D\uDCAC"}</span>
+              <span className="text-xs font-bold text-white/80">City Chat</span>
+              <span
+                className={`text-[8px] px-1.5 py-0.5 rounded ${connected
+                  ? "bg-emerald-500/15 text-emerald-300/80"
+                  : "bg-amber-500/15 text-amber-300/80"
+                  }`}
+              >
+                {connected ? "LIVE" : "CONNECTING"}
+              </span>
+            </div>
+            <div className="flex items-center gap-1.5">
+              {walletAddress && (
+                <span className="text-[8px] text-white/25 font-mono bg-white/[0.04] rounded px-1.5 py-0.5">
+                  {truncAddr(walletAddress)}
+                </span>
+              )}
+              <button
+                onClick={() => setOpen(false)}
+                className="w-5 h-5 flex items-center justify-center rounded hover:bg-white/10 text-white/25 hover:text-white/50 text-xs cursor-pointer"
+              >
+                {"\u2715"}
+              </button>
+            </div>
+          </div>
+
+          {/* Messages */}
+          <div
+            ref={scrollEl}
+            className="flex-1 overflow-y-auto px-3 py-2 space-y-1.5"
+            style={{ minHeight: 100 }}
+          >
+            {!connected ? (
+              <div className="text-center text-white/15 text-[10px] py-6">
+                <div className="w-4 h-4 border-2 border-white/10 border-t-[#E35930]/40 rounded-full animate-spin mx-auto mb-2" />
+                Connecting to Convex...
+              </div>
+            ) : messages.length === 0 ? (
+              <div className="text-center text-white/15 text-[10px] py-6">
+                <div className="mb-1">{"\uD83D\uDC4B"}</div>
+                No messages yet — be the first to say hello!
+              </div>
+            ) : (
+              messages.map((m) =>
+                m.is_ai && m.responseStreamId ? (
+                  <AiMessage
+                    key={m._id}
+                    msg={m}
+                    isDriven={drivenStreamIds.has(m.responseStreamId || "")}
+                  />
+                ) : m.is_ai ? (
+                  <NPCMessage key={m._id} msg={m} />
+                ) : (
+                  <PlayerMessage key={m._id} msg={m} walletAddress={walletAddress} />
+                ),
+              )
+            )}
+          </div>
+
+          {/* Input */}
+          {walletAddress && hasBuilding ? (
+            <div className="px-3 py-2 border-t border-white/[0.04] shrink-0">
+              <div className="flex gap-1.5">
+                <input
+                  type="text"
+                  value={txt}
+                  onChange={(e) => setTxt(e.target.value)}
+                  onKeyDown={onKey}
+                  onKeyUp={onKeyUp}
+                  placeholder="Say something..."
+                  maxLength={280}
+                  className="flex-1 bg-white/[0.05] border border-white/[0.06] rounded-lg px-2.5 py-1.5 text-[11px] text-white/70 placeholder:text-white/15 outline-none focus:border-[#E35930]/20 transition-colors"
+                  disabled={busy}
+                />
+                <button
+                  onClick={send}
+                  disabled={!txt.trim() || busy}
+                  className="w-8 h-8 flex items-center justify-center bg-[#E35930]/15 hover:bg-[#E35930]/25 border border-[#E35930]/15 rounded-lg text-xs text-[#E35930] disabled:opacity-20 cursor-pointer transition-colors"
+                >
+                  {"\u2191"}
+                </button>
+              </div>
+            </div>
+          ) : (
+            <div className="px-3 py-2.5 border-t border-white/[0.04] text-center shrink-0">
+              <p className="text-[9px] text-white/20">
+                {!walletAddress
+                  ? "Read-only \u2014 connect wallet + claim building to chat"
+                  : "Read-only \u2014 claim a building to start chatting"}
+              </p>
+            </div>
+          )}
+        </div>
+      )}
+    </>
+  );
+}