Initial commit

2026-04-03 17:23:15 +00:00
commit 4f474dbcf3
192 changed files with 47527 additions and 0 deletions
@@ -0,0 +1,115 @@
+'use client';
+
+import { SKILLS_DEF } from '@/lib/game/constants';
+import type { SkillUpgradeChoice } from '@/lib/game/types';
+import { Button } from '@/components/ui/button';
+import { Badge } from '@/components/ui/badge';
+import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription } from '@/components/ui/dialog';
+
+export interface UpgradeDialogProps {
+  open: boolean;
+  skillId: string | null;
+  milestone: 5 | 10;
+  pendingSelections: string[];
+  available: SkillUpgradeChoice[];
+  alreadySelected: string[];
+  onToggle: (upgradeId: string) => void;
+  onConfirm: () => void;
+  onCancel: () => void;
+  onOpenChange: (open: boolean) => void;
+}
+
+export function UpgradeDialog({
+  open,
+  skillId,
+  milestone,
+  pendingSelections,
+  available,
+  alreadySelected,
+  onToggle,
+  onConfirm,
+  onCancel,
+  onOpenChange,
+}: UpgradeDialogProps) {
+  if (!skillId) return null;
+  
+  const skillDef = SKILLS_DEF[skillId];
+  const currentSelections = pendingSelections.length > 0 ? pendingSelections : alreadySelected;
+  
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="bg-gray-900 border-gray-700 max-w-lg">
+        <DialogHeader>
+          <DialogTitle className="text-amber-400">
+            Choose Upgrade - {skillDef?.name || skillId}
+          </DialogTitle>
+          <DialogDescription className="text-gray-400">
+            Level {milestone} Milestone - Select 2 upgrades ({currentSelections.length}/2 chosen)
+          </DialogDescription>
+        </DialogHeader>
+        
+        <div className="space-y-2 mt-4">
+          {available.map((upgrade) => {
+            const isSelected = currentSelections.includes(upgrade.id);
+            const canToggle = currentSelections.length < 2 || isSelected;
+            
+            return (
+              <div
+                key={upgrade.id}
+                className={`p-3 rounded border cursor-pointer transition-all ${
+                  isSelected 
+                    ? 'border-amber-500 bg-amber-900/30' 
+                    : canToggle 
+                      ? 'border-gray-600 bg-gray-800/50 hover:border-amber-500/50 hover:bg-gray-800' 
+                      : 'border-gray-700 bg-gray-800/30 opacity-50 cursor-not-allowed'
+                }`}
+                onClick={() => {
+                  if (canToggle) {
+                    onToggle(upgrade.id);
+                  }
+                }}
+              >
+                <div className="flex items-center justify-between">
+                  <div className="font-semibold text-sm text-amber-300">{upgrade.name}</div>
+                  {isSelected && <Badge className="bg-amber-600 text-amber-100">Selected</Badge>}
+                </div>
+                <div className="text-xs text-gray-400 mt-1">{upgrade.desc}</div>
+                {upgrade.effect.type === 'multiplier' && (
+                  <div className="text-xs text-green-400 mt-1">
+                    +{Math.round((upgrade.effect.value! - 1) * 100)}% {upgrade.effect.stat}
+                  </div>
+                )}
+                {upgrade.effect.type === 'bonus' && (
+                  <div className="text-xs text-blue-400 mt-1">
+                    +{upgrade.effect.value} {upgrade.effect.stat}
+                  </div>
+                )}
+                {upgrade.effect.type === 'special' && (
+                  <div className="text-xs text-cyan-400 mt-1">
+                    ⚡ {upgrade.effect.specialDesc || 'Special effect'}
+                  </div>
+                )}
+              </div>
+            );
+          })}
+        </div>
+        
+        <div className="flex justify-end gap-2 mt-4">
+          <Button 
+            variant="outline" 
+            onClick={onCancel}
+          >
+            Cancel
+          </Button>
+          <Button 
+            variant="default"
+            onClick={onConfirm}
+            disabled={currentSelections.length !== 2}
+          >
+            {currentSelections.length < 2 ? `Select ${2 - currentSelections.length} more` : 'Confirm'}
+          </Button>
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+}