Initial commit

js/components/sidebar.js

@@ -0,0 +1,79 @@
+window.GDD = window.GDD || {};
+
+const GDD = window.GDD;
+const { useState, useEffect } = React;
+
+const NAV_SECTIONS = [
+  {
+    title: 'Documentation',
+    items: [
+      { id: 'overview', icon: '◈', label: 'Overview' },
+      { id: 'architecture', icon: '⬡', label: 'Architecture' },
+      { id: 'techstack', icon: '⟐', label: 'Tech Stack' },
+      { id: 'backend', icon: '⊞', label: 'Backend Model' },
+      { id: 'agents',   icon: '⏣', label: 'Agent Lifecycle' },
+      { id: 'gameplay', icon: '◉', label: 'Gameplay Loop' },
+      { id: 'ships', icon: '◇', label: 'Ships & Fitting' },
+      { id: 'economy', icon: '⇄', label: 'Economy & Industry' },
+      { id: 'social', icon: '✧', label: 'Progression & Social' },
+      { id: 'ship-ai', icon: '◈', label: 'Ship AI — Zora' },
+      { id: 'roadmap', icon: '⊞', label: 'Roadmap' },
+      { id: 'risks', icon: '◬', label: 'Risks & Questions' },
+      { id: 'demo-gallery', icon: '◈', label: 'Demo Gallery' },
+    ]
+  },
+  {
+    title: 'Interactive Demos',
+    items: [
+      { id: 'demo-starmap', icon: '✦', label: 'Star Map' },
+      { id: 'demo-movement', icon: '→', label: 'Ship Movement' },
+      { id: 'demo-combat', icon: '✸', label: 'Combat System' },
+      { id: 'demo-market', icon: '⇄', label: 'Market' },
+      { id: 'demo-fitting', icon: '⊞', label: 'Ship Fitting' },
+      { id: 'demo-refining', icon: '⚗', label: 'Refining & MFG' },
+      { id: 'demo-progression', icon: '▲', label: 'Skill Progression' },
+      { id: 'demo-bounty', icon: '✸', label: 'Bounty & Kill Feed' },
+      { id: 'demo-gamehud', icon: '◉', label: 'Game HUD' },
+      { id: 'demo-chat', icon: '💬', label: 'Chat & Comms' },
+      { id: 'demo-zora', icon: '🤖', label: 'Zora Tier 0' },
+      { id: 'demo-galaxy', icon: '🌌', label: 'Galaxy Gen' },
+    ]
+  }
+];
+
+function Sidebar({ collapsed, currentPage, onNavigate, onToggle }) {
+  const [hoveredItem, setHoveredItem] = useState(null);
+
+  return (
+    <aside className={`sidebar${collapsed ? ' collapsed' : ''}`}>
+      <div className="sidebar-header">
+        <div className="sidebar-logo">
+          GDD<span className="logo-dot">::</span>DOCS
+        </div>
+      </div>
+      <nav className="sidebar-nav">
+        {NAV_SECTIONS.map((section, si) => (
+          <div key={si}>
+            <div className="nav-section-title">{section.title}</div>
+            {section.items.map((item) => (
+              <a
+                key={item.id}
+                className={`nav-item${currentPage === item.id ? ' active' : ''}`}
+                href={`#${item.id}`}
+                onClick={(e) => { e.preventDefault(); onNavigate(item.id); }}
+                onMouseEnter={() => setHoveredItem(item.id)}
+                onMouseLeave={() => setHoveredItem(null)}
+              >
+                <span className="nav-icon">{item.icon}</span>
+                <span className="nav-label">{item.label}</span>
+
+              </a>
+            ))}
+          </div>
+        ))}
+      </nav>
+    </aside>
+  );
+}
+
+GDD.Sidebar = Sidebar;

js/components/topbar.js

@@ -0,0 +1,46 @@
+window.GDD = window.GDD || {};
+
+const GDD = window.GDD;
+
+const PAGE_TITLES = {
+  'overview': 'Overview',
+  'architecture': 'Architecture',
+  'techstack': 'Tech Stack',
+  'backend': 'Backend Model',
+  'agents': 'Agent Lifecycle & Scheduling',
+  'gameplay': 'Gameplay Loop',
+  'roadmap': 'Roadmap',
+  'risks': 'Risks & Questions',
+  'demo-starmap': 'Star Map',
+  'demo-movement': 'Ship Movement',
+  'demo-combat': 'Combat System',
+  'demo-market': 'Market Interface',
+};
+
+function TopBar({ collapsed, currentPage, onToggle }) {
+  const isDemo = currentPage.startsWith('demo-');
+  const section = isDemo ? 'Demos' : 'Docs';
+  const title = PAGE_TITLES[currentPage] || currentPage;
+
+  return (
+    <div className="topbar">
+      <button className="topbar-toggle" onClick={onToggle}>
+        {collapsed ? '→' : '←'}
+      </button>
+      <div className="topbar-breadcrumb">
+        <span className="bc-root">GDD</span>
+        <span className="bc-sep">/</span>
+        <span>{section}</span>
+        <span className="bc-sep">/</span>
+        <span className="bc-current">{title}</span>
+      </div>
+      <div className="topbar-status">
+        <span><span className="status-dot online"></span> Connected</span>
+        <span style={{ color: 'var(--accent)' }}>●</span>
+        <span>Prototype v0.1.0</span>
+      </div>
+    </div>
+  );
+}
+
+GDD.TopBar = TopBar;