Initial commit

src/components/game/ComboMeter.tsx

@@ -0,0 +1,143 @@
+'use client';
+
+import { Progress } from '@/components/ui/progress';
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { Badge } from '@/components/ui/badge';
+import { Zap, Flame, Sparkles } from 'lucide-react';
+import type { ComboState } from '@/lib/game/types';
+import { ELEMENTS } from '@/lib/game/constants';
+
+interface ComboMeterProps {
+  combo: ComboState;
+  isClimbing: boolean;
+}
+
+export function ComboMeter({ combo, isClimbing }: ComboMeterProps) {
+  const comboPercent = Math.min(100, combo.count);
+  const multiplierPercent = Math.min(100, ((combo.multiplier - 1) / 2) * 100); // Max 300% = 200% bonus
+  
+  // Combo tier names
+  const getComboTier = (count: number): { name: string; color: string } => {
+    if (count >= 100) return { name: 'LEGENDARY', color: 'text-amber-400' };
+    if (count >= 75) return { name: 'Master', color: 'text-purple-400' };
+    if (count >= 50) return { name: 'Expert', color: 'text-blue-400' };
+    if (count >= 25) return { name: 'Adept', color: 'text-green-400' };
+    if (count >= 10) return { name: 'Novice', color: 'text-cyan-400' };
+    return { name: 'Building...', color: 'text-gray-400' };
+  };
+  
+  const tier = getComboTier(combo.count);
+  const hasElementChain = combo.elementChain.length === 3 && new Set(combo.elementChain).size === 3;
+  
+  if (!isClimbing && combo.count === 0) {
+    return null;
+  }
+  
+  return (
+    <Card className="bg-gray-900/80 border-gray-700">
+      <CardHeader className="pb-2">
+        <CardTitle className="text-amber-400 game-panel-title text-xs flex items-center gap-2">
+          <Zap className="w-4 h-4" />
+          Combo Meter
+          {combo.count >= 10 && (
+            <Badge className={`ml-auto ${tier.color} bg-gray-800`}>
+              {tier.name}
+            </Badge>
+          )}
+        </CardTitle>
+      </CardHeader>
+      <CardContent className="space-y-3">
+        {/* Combo Count */}
+        <div className="space-y-1">
+          <div className="flex justify-between items-center text-sm">
+            <span className="text-gray-400">Hits</span>
+            <span className={`font-bold ${tier.color}`}>
+              {combo.count}
+              {combo.maxCombo > combo.count && (
+                <span className="text-gray-500 text-xs ml-2">max: {combo.maxCombo}</span>
+              )}
+            </span>
+          </div>
+          <Progress 
+            value={comboPercent} 
+            className="h-2 bg-gray-800"
+          />
+        </div>
+        
+        {/* Multiplier */}
+        <div className="space-y-1">
+          <div className="flex justify-between items-center text-sm">
+            <span className="text-gray-400">Multiplier</span>
+            <span className="font-bold text-amber-400">
+              {combo.multiplier.toFixed(2)}x
+            </span>
+          </div>
+          <div className="h-2 bg-gray-800 rounded-full overflow-hidden">
+            <div
+              className="h-full rounded-full transition-all duration-300"
+              style={{
+                width: `${multiplierPercent}%`,
+                background: `linear-gradient(90deg, #F59E0B, #EF4444)`,
+              }}
+            />
+          </div>
+        </div>
+        
+        {/* Element Chain */}
+        {combo.elementChain.length > 0 && (
+          <div className="space-y-1">
+            <div className="flex justify-between items-center text-sm">
+              <span className="text-gray-400">Element Chain</span>
+              {hasElementChain && (
+                <span className="text-green-400 text-xs">+25% bonus!</span>
+              )}
+            </div>
+            <div className="flex gap-1">
+              {combo.elementChain.map((elem, i) => {
+                const elemDef = ELEMENTS[elem];
+                return (
+                  <div
+                    key={i}
+                    className="w-8 h-8 rounded border flex items-center justify-center text-xs"
+                    style={{
+                      borderColor: elemDef?.color || '#60A5FA',
+                      backgroundColor: `${elemDef?.color}20`,
+                      color: elemDef?.color || '#60A5FA',
+                    }}
+                  >
+                    {elemDef?.sym || '?'}
+                  </div>
+                );
+              })}
+              {/* Empty slots */}
+              {Array.from({ length: 3 - combo.elementChain.length }).map((_, i) => (
+                <div
+                  key={`empty-${i}`}
+                  className="w-8 h-8 rounded border border-gray-700 bg-gray-800/50 flex items-center justify-center text-gray-600"
+                >
+                  ?
+                </div>
+              ))}
+            </div>
+          </div>
+        )}
+        
+        {/* Decay Warning */}
+        {isClimbing && combo.count > 0 && combo.decayTimer <= 3 && (
+          <div className="text-xs text-red-400 flex items-center gap-1">
+            <Flame className="w-3 h-3" />
+            Combo decaying soon!
+          </div>
+        )}
+        
+        {/* Not climbing warning */}
+        {!isClimbing && combo.count > 0 && (
+          <div className="text-xs text-amber-400 flex items-center gap-1">
+            <Sparkles className="w-3 h-3" />
+            Resume climbing to maintain combo
+          </div>
+        )}
+      </CardContent>
+    </Card>
+  );
+}