Add complete game loop: training, revenue, market, offline catch-up

- Model training system: training jobs produce TrainedModels with calculated capabilities based on compute, data, and research - Market system: organic API demand and consumer subscriptions now generate real revenue from deployed models - Talent system: salary costs calculated from department headcount - Toast notification system for game events (training complete, etc.) - Offline catch-up: progress bar + summary screen when returning - Market page: pricing controls for API and subscription products - Finance page: income statement, cash charts, funding history - Tick processor now runs all 7 systems in correct dependency order Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2026-04-24 17:02:58 -04:00
parent fdc8e544ae
commit 9a48c188ad
12 changed files with 757 additions and 21 deletions
@@ -0,0 +1,83 @@
+import { useEffect, useState } from 'react';
+import { X, CheckCircle, AlertTriangle, Info, AlertCircle } from 'lucide-react';
+import { useGameStore, type GameNotification } from '@/store';
+
+interface Toast extends GameNotification {
+  exiting: boolean;
+}
+
+export function ToastContainer() {
+  const notifications = useGameStore((s) => s.notifications);
+  const dismissNotification = useGameStore((s) => s.dismissNotification);
+  const [toasts, setToasts] = useState<Toast[]>([]);
+  const [seen, setSeen] = useState(new Set<string>());
+
+  useEffect(() => {
+    const newNotifs = notifications.filter(n => !n.read && !seen.has(n.id));
+    if (newNotifs.length === 0) return;
+
+    setSeen(prev => {
+      const next = new Set(prev);
+      for (const n of newNotifs) next.add(n.id);
+      return next;
+    });
+
+    setToasts(prev => [
+      ...newNotifs.map(n => ({ ...n, exiting: false })),
+      ...prev,
+    ].slice(0, 5));
+  }, [notifications, seen]);
+
+  useEffect(() => {
+    if (toasts.length === 0) return;
+    const timer = setTimeout(() => {
+      setToasts(prev => {
+        if (prev.length === 0) return prev;
+        const last = prev[prev.length - 1];
+        dismissNotification(last.id);
+        return prev.slice(0, -1);
+      });
+    }, 4000);
+    return () => clearTimeout(timer);
+  }, [toasts, dismissNotification]);
+
+  if (toasts.length === 0) return null;
+
+  return (
+    <div className="fixed top-16 right-4 z-50 flex flex-col gap-2 w-80">
+      {toasts.map((toast) => (
+        <div
+          key={toast.id}
+          className={`bg-surface-800 border rounded-lg p-3 shadow-lg transition-all duration-300 ${
+            toast.type === 'success' ? 'border-success/50' :
+            toast.type === 'warning' ? 'border-warning/50' :
+            toast.type === 'danger' ? 'border-danger/50' :
+            'border-surface-600'
+          }`}
+        >
+          <div className="flex items-start gap-2">
+            <div className="mt-0.5">
+              {toast.type === 'success' && <CheckCircle size={16} className="text-success" />}
+              {toast.type === 'warning' && <AlertTriangle size={16} className="text-warning" />}
+              {toast.type === 'danger' && <AlertCircle size={16} className="text-danger" />}
+              {toast.type === 'info' && <Info size={16} className="text-accent-light" />}
+            </div>
+            <div className="flex-1 min-w-0">
+              <div className="text-sm font-medium">{toast.title}</div>
+              <div className="text-xs text-surface-400">{toast.message}</div>
+            </div>
+            <button
+              onClick={() => {
+                dismissNotification(toast.id);
+                setToasts(prev => prev.filter(t => t.id !== toast.id));
+              }}
+              className="text-surface-500 hover:text-surface-300"
+            >
+              <X size={14} />
+            </button>
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+}