Initial commit

src/components/game/tabs/StudyProgress.tsx

@@ -0,0 +1,73 @@
+'use client';
+
+import { SKILLS_DEF } from '@/lib/game/constants';
+import { formatStudyTime } from '@/lib/game/formatting';
+import { Button } from '@/components/ui/button';
+import { Progress } from '@/components/ui/progress';
+import type { StudyTarget } from '@/lib/game/types';
+
+export interface StudyProgressProps {
+  currentStudyTarget: StudyTarget;
+  skills: Record<string, number>;
+  studySpeedMult: number;
+  cancelStudy: () => void;
+}
+
+export function StudyProgress({
+  currentStudyTarget,
+  skills,
+  studySpeedMult,
+  cancelStudy
+}: StudyProgressProps) {
+  const { id, progress, required } = currentStudyTarget;
+  
+  // Get skill name
+  const baseId = id.includes('_t') ? id.split('_t')[0] : id;
+  const skillDef = SKILLS_DEF[baseId];
+  const skillName = skillDef?.name || id;
+  
+  // Get current level
+  const currentLevel = skills[id] || skills[baseId] || 0;
+  
+  // Calculate progress percentage
+  const progressPercent = Math.min((progress / required) * 100, 100);
+  
+  // Estimated completion
+  const remainingHours = required - progress;
+  const effectiveSpeed = studySpeedMult;
+  const realTimeRemaining = remainingHours / effectiveSpeed;
+  
+  return (
+    <div className="space-y-2">
+      <div className="flex items-center justify-between">
+        <div>
+          <span className="text-purple-300 font-semibold">{skillName}</span>
+          <span className="text-gray-400 ml-2">
+            Level {currentLevel} → {currentLevel + 1}
+          </span>
+        </div>
+        <Button
+          size="sm"
+          variant="destructive"
+          onClick={cancelStudy}
+          className="text-xs"
+        >
+          Cancel
+        </Button>
+      </div>
+      
+      <div className="space-y-1">
+        <div className="flex justify-between text-xs text-gray-400">
+          <span>{formatStudyTime(progress)} / {formatStudyTime(required)}</span>
+          <span>{progressPercent.toFixed(1)}%</span>
+        </div>
+        <Progress value={progressPercent} className="h-2" />
+        {studySpeedMult > 1 && (
+          <div className="text-xs text-green-400">
+            Speed: {(studySpeedMult * 100).toFixed(0)}% • ETA: {formatStudyTime(realTimeRemaining)}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}