Initial scaffold: AI Tycoon monorepo with core game loop

Turborepo monorepo with three packages: - packages/shared: TypeScript types for all 14 game systems + balance constants + formatting utils - packages/game-engine: Pure TS simulation engine with tick processor, economy, infrastructure, compute, research, market, and reputation systems - apps/web: React + Vite + Tailwind + Zustand frontend with sidebar dashboard layout, new game screen, dashboard with charts, infrastructure management, and model training pages Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2026-04-24 16:53:46 -04:00
commit fdc8e544ae
57 changed files with 4753 additions and 0 deletions
@@ -0,0 +1,81 @@
+import { useState } from 'react';
+import { Sparkles } from 'lucide-react';
+import { useGameStore } from '@/store';
+
+const SUGGESTED_NAMES = [
+  'Nexus AI', 'Cortex Labs', 'Synapse Technologies',
+  'Prometheus AI', 'Athena Research', 'Cognitron',
+  'Neural Forge', 'DeepMind+', 'Cerebral Systems',
+];
+
+export function NewGameScreen() {
+  const [name, setName] = useState('');
+  const startNewGame = useGameStore((s) => s.startNewGame);
+
+  const handleStart = () => {
+    const companyName = name.trim() || SUGGESTED_NAMES[Math.floor(Math.random() * SUGGESTED_NAMES.length)];
+    startNewGame(companyName);
+  };
+
+  return (
+    <div className="min-h-screen flex items-center justify-center bg-gradient-to-b from-surface-950 to-surface-900">
+      <div className="max-w-md w-full mx-4">
+        <div className="text-center mb-8">
+          <div className="inline-flex items-center gap-2 mb-4">
+            <Sparkles className="text-accent-light" size={32} />
+            <h1 className="text-4xl font-bold bg-gradient-to-r from-accent-light to-accent bg-clip-text text-transparent">
+              AI Tycoon
+            </h1>
+          </div>
+          <p className="text-surface-400 text-sm">
+            Build the world's most powerful AI company. From startup to AGI.
+          </p>
+        </div>
+
+        <div className="bg-surface-900 border border-surface-700 rounded-xl p-6 space-y-6">
+          <div>
+            <label className="block text-sm font-medium text-surface-300 mb-2">
+              Name your AI company
+            </label>
+            <input
+              type="text"
+              value={name}
+              onChange={(e) => setName(e.target.value)}
+              onKeyDown={(e) => e.key === 'Enter' && handleStart()}
+              placeholder={SUGGESTED_NAMES[0]}
+              className="w-full bg-surface-800 border border-surface-600 rounded-lg px-4 py-3 text-surface-100 placeholder:text-surface-500 focus:outline-none focus:ring-2 focus:ring-accent/50 focus:border-accent"
+              autoFocus
+              maxLength={30}
+            />
+          </div>
+
+          <div>
+            <p className="text-xs text-surface-500 mb-2">Or pick one:</p>
+            <div className="flex flex-wrap gap-2">
+              {SUGGESTED_NAMES.slice(0, 6).map((suggestion) => (
+                <button
+                  key={suggestion}
+                  onClick={() => setName(suggestion)}
+                  className="text-xs px-3 py-1.5 rounded-full bg-surface-800 text-surface-300 hover:bg-surface-700 hover:text-surface-100 transition-colors border border-surface-700"
+                >
+                  {suggestion}
+                </button>
+              ))}
+            </div>
+          </div>
+
+          <button
+            onClick={handleStart}
+            className="w-full bg-accent hover:bg-accent-dark text-white font-semibold py-3 rounded-lg transition-colors"
+          >
+            Found Your Company
+          </button>
+        </div>
+
+        <p className="text-center text-xs text-surface-600 mt-6">
+          Manage data centers, train models, serve millions of users, and achieve AGI.
+        </p>
+      </div>
+    </div>
+  );
+}
@@ -0,0 +1,44 @@
+import { Sidebar } from './Sidebar';
+import { TopBar } from './TopBar';
+import { useGameStore } from '@/store';
+import { DashboardPage } from '@/pages/DashboardPage';
+import { InfrastructurePage } from '@/pages/InfrastructurePage';
+import { ModelsPage } from '@/pages/ModelsPage';
+import { SettingsPage } from '@/pages/SettingsPage';
+
+export function MainLayout() {
+  const activePage = useGameStore((s) => s.activePage);
+
+  return (
+    <div className="flex h-screen overflow-hidden">
+      <Sidebar />
+      <div className="flex-1 flex flex-col overflow-hidden">
+        <TopBar />
+        <main className="flex-1 overflow-y-auto p-6">
+          <PageRouter page={activePage} />
+        </main>
+      </div>
+    </div>
+  );
+}
+
+function PageRouter({ page }: { page: string }) {
+  switch (page) {
+    case 'dashboard': return <DashboardPage />;
+    case 'infrastructure': return <InfrastructurePage />;
+    case 'models': return <ModelsPage />;
+    case 'settings': return <SettingsPage />;
+    default: return <PlaceholderPage name={page} />;
+  }
+}
+
+function PlaceholderPage({ name }: { name: string }) {
+  return (
+    <div className="flex items-center justify-center h-full text-surface-500">
+      <div className="text-center">
+        <h2 className="text-2xl font-bold capitalize mb-2">{name}</h2>
+        <p className="text-sm">Coming soon...</p>
+      </div>
+    </div>
+  );
+}
@@ -0,0 +1,65 @@
+import {
+  LayoutDashboard, Server, FlaskConical, Brain,
+  TrendingUp, Users, Database, Swords, DollarSign, Settings,
+} from 'lucide-react';
+import { useGameStore, type ActivePage } from '@/store';
+
+const NAV_ITEMS: { page: ActivePage; label: string; icon: typeof LayoutDashboard; era?: string }[] = [
+  { page: 'dashboard', label: 'Dashboard', icon: LayoutDashboard },
+  { page: 'infrastructure', label: 'Infrastructure', icon: Server },
+  { page: 'research', label: 'Research', icon: FlaskConical },
+  { page: 'models', label: 'Models', icon: Brain },
+  { page: 'market', label: 'Market', icon: TrendingUp },
+  { page: 'finance', label: 'Finance', icon: DollarSign },
+  { page: 'talent', label: 'Talent', icon: Users, era: 'scaleup' },
+  { page: 'data', label: 'Data', icon: Database, era: 'scaleup' },
+  { page: 'competitors', label: 'Competitors', icon: Swords, era: 'scaleup' },
+  { page: 'settings', label: 'Settings', icon: Settings },
+];
+
+export function Sidebar() {
+  const activePage = useGameStore((s) => s.activePage);
+  const setActivePage = useGameStore((s) => s.setActivePage);
+  const companyName = useGameStore((s) => s.meta.companyName);
+  const era = useGameStore((s) => s.meta.currentEra);
+
+  const eraOrder = ['startup', 'scaleup', 'bigtech', 'agi'];
+  const currentEraIdx = eraOrder.indexOf(era);
+
+  return (
+    <aside className="w-56 bg-surface-900 border-r border-surface-700 flex flex-col h-screen">
+      <div className="p-4 border-b border-surface-700">
+        <h1 className="text-lg font-bold text-accent-light truncate">{companyName}</h1>
+        <span className="text-xs text-surface-400 uppercase tracking-wider">
+          {era === 'startup' ? 'Startup' : era === 'scaleup' ? 'Scale-up' : era === 'bigtech' ? 'Big Tech' : 'AGI Era'}
+        </span>
+      </div>
+
+      <nav className="flex-1 py-2 overflow-y-auto">
+        {NAV_ITEMS.map(({ page, label, icon: Icon, era: requiredEra }) => {
+          if (requiredEra && eraOrder.indexOf(requiredEra) > currentEraIdx) return null;
+
+          const isActive = activePage === page;
+          return (
+            <button
+              key={page}
+              onClick={() => setActivePage(page)}
+              className={`w-full flex items-center gap-3 px-4 py-2.5 text-sm transition-colors ${
+                isActive
+                  ? 'bg-accent/10 text-accent-light border-r-2 border-accent'
+                  : 'text-surface-300 hover:bg-surface-800 hover:text-surface-100'
+              }`}
+            >
+              <Icon size={18} />
+              {label}
+            </button>
+          );
+        })}
+      </nav>
+
+      <div className="p-4 border-t border-surface-700 text-xs text-surface-500">
+        AI Tycoon v0.1
+      </div>
+    </aside>
+  );
+}
@@ -0,0 +1,79 @@
+import { Pause, Play, Bell, Zap } from 'lucide-react';
+import { useGameStore } from '@/store';
+import { formatMoney, formatNumber, formatDuration } from '@ai-tycoon/shared';
+import type { GameSpeed } from '@ai-tycoon/shared';
+
+const SPEEDS: GameSpeed[] = [1, 2, 5];
+
+export function TopBar() {
+  const money = useGameStore((s) => s.economy.money);
+  const revenuePerTick = useGameStore((s) => s.economy.revenuePerTick);
+  const reputation = useGameStore((s) => s.reputation.score);
+  const totalFlops = useGameStore((s) => s.infrastructure.totalFlops);
+  const isPaused = useGameStore((s) => s.meta.isPaused);
+  const gameSpeed = useGameStore((s) => s.meta.gameSpeed);
+  const tickCount = useGameStore((s) => s.meta.tickCount);
+  const togglePause = useGameStore((s) => s.togglePause);
+  const setGameSpeed = useGameStore((s) => s.setGameSpeed);
+  const notifications = useGameStore((s) => s.notifications);
+  const unreadCount = notifications.filter(n => !n.read).length;
+
+  return (
+    <header className="h-14 bg-surface-900 border-b border-surface-700 flex items-center justify-between px-4">
+      <div className="flex items-center gap-6">
+        <KPI label="Cash" value={formatMoney(money)} trend={revenuePerTick > 0 ? 'up' : 'neutral'} />
+        <KPI label="Revenue/s" value={formatMoney(revenuePerTick)} />
+        <KPI label="Compute" value={`${formatNumber(totalFlops)} FLOPS`} />
+        <KPI label="Reputation" value={`${reputation}/100`} />
+        <KPI label="Time" value={formatDuration(tickCount)} />
+      </div>
+
+      <div className="flex items-center gap-3">
+        <div className="flex items-center gap-1 bg-surface-800 rounded-lg p-1">
+          <button
+            onClick={togglePause}
+            className="p-1.5 rounded hover:bg-surface-700 transition-colors"
+            title={isPaused ? 'Resume' : 'Pause'}
+          >
+            {isPaused ? <Play size={16} /> : <Pause size={16} />}
+          </button>
+          {SPEEDS.map((speed) => (
+            <button
+              key={speed}
+              onClick={() => setGameSpeed(speed)}
+              className={`px-2 py-1 rounded text-xs font-mono transition-colors ${
+                gameSpeed === speed && !isPaused
+                  ? 'bg-accent text-white'
+                  : 'hover:bg-surface-700 text-surface-400'
+              }`}
+            >
+              {speed}x
+            </button>
+          ))}
+        </div>
+
+        <button className="relative p-2 rounded hover:bg-surface-800 transition-colors">
+          <Bell size={18} />
+          {unreadCount > 0 && (
+            <span className="absolute -top-1 -right-1 bg-danger text-white text-xs rounded-full w-4 h-4 flex items-center justify-center">
+              {unreadCount}
+            </span>
+          )}
+        </button>
+      </div>
+    </header>
+  );
+}
+
+function KPI({ label, value, trend }: { label: string; value: string; trend?: 'up' | 'down' | 'neutral' }) {
+  return (
+    <div className="flex flex-col">
+      <span className="text-xs text-surface-400">{label}</span>
+      <span className={`text-sm font-mono font-semibold ${
+        trend === 'up' ? 'text-success' : trend === 'down' ? 'text-danger' : 'text-surface-100'
+      }`}>
+        {value}
+      </span>
+    </div>
+  );
+}