Polish Week 1: tooltips, save import, game balance tuning

Add reusable Tooltip component and rich tooltips on all TopBar KPIs (cash breakdown, compute utilization, reputation context). Add save import button to Settings page. Fix game balance: reduce GPU maintenance 100x, increase organic API demand 200x, accelerate subscription revenue timescale, boost early subscriber seeding, use sqrt scaling for model compute factor, simplify deploy to activate all product lines at once. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2026-04-24 17:17:58 -04:00
parent 9a48c188ad
commit d1d3eb4bf2
8 changed files with 156 additions and 35 deletions
@@ -0,0 +1,42 @@
+import { useState, useRef, type ReactNode } from 'react';
+
+interface TooltipProps {
+  content: ReactNode;
+  children: ReactNode;
+  position?: 'top' | 'bottom' | 'left' | 'right';
+}
+
+export function Tooltip({ content, children, position = 'bottom' }: TooltipProps) {
+  const [visible, setVisible] = useState(false);
+  const timeoutRef = useRef<ReturnType<typeof setTimeout>>(undefined);
+
+  const show = () => {
+    clearTimeout(timeoutRef.current);
+    timeoutRef.current = setTimeout(() => setVisible(true), 300);
+  };
+
+  const hide = () => {
+    clearTimeout(timeoutRef.current);
+    setVisible(false);
+  };
+
+  const positionClasses = {
+    top: 'bottom-full left-1/2 -translate-x-1/2 mb-2',
+    bottom: 'top-full left-1/2 -translate-x-1/2 mt-2',
+    left: 'right-full top-1/2 -translate-y-1/2 mr-2',
+    right: 'left-full top-1/2 -translate-y-1/2 ml-2',
+  };
+
+  return (
+    <div className="relative inline-flex" onMouseEnter={show} onMouseLeave={hide}>
+      {children}
+      {visible && (
+        <div className={`absolute z-50 ${positionClasses[position]} pointer-events-none`}>
+          <div className="bg-surface-800 border border-surface-600 rounded-lg px-3 py-2 text-xs text-surface-200 shadow-xl whitespace-nowrap max-w-xs">
+            {content}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}