feat: Minecraft theme overhaul, fix points bug, add history

frontend/src/components/xp-bar.tsx

@@ -0,0 +1,49 @@
+"use client";
+
+import { useUiPreferences } from "@/components/ui-preference-provider";
+
+type Props = {
+  level: number;
+  currentXp: number;
+  nextLevelXp: number;
+  className?: string;
+};
+
+export function XpBar({ level, currentXp, nextLevelXp, className = "" }: Props) {
+  const { theme } = useUiPreferences();
+  const isMc = theme === "minecraft";
+  const progress = Math.min(100, Math.max(0, (currentXp / nextLevelXp) * 100));
+
+  if (!isMc) {
+    return null; 
+  }
+
+  return (
+    <div className={`flex flex-col items-center select-none ${className}`}>
+      <div className="relative w-full max-w-[400px]">
+        {/* Level Indicator */}
+        <div className="absolute -top-3 left-1/2 -translate-x-1/2 text-[#80ff20] drop-shadow-[2px_2px_0_#000] font-[PressStart2P] text-xs z-10">
+          {level}
+        </div>
+
+        {/* XP Bar Background */}
+        <div className="h-3 w-full bg-[#3a3a3a] border-2 border-black flex relative">
+           {/* XP Bar Progress */}
+          <div 
+            className="h-full bg-[#80ff20] transition-all duration-500 ease-out"
+            style={{ width: `${progress}%`, boxShadow: "inset 0 2px 0 rgba(255,255,255,0.3), inset 0 -2px 0 rgba(0,0,0,0.2)" }}
+          />
+          {/* Segmentation lines (every 10%) */}
+          {Array.from({ length: 9 }).map((_, i) => (
+             <div key={i} className="absolute top-0 bottom-0 w-[2px] bg-black/20" style={{ left: `${(i + 1) * 10}%` }} />
+          ))}
+        </div>
+      </div>
+      
+      {/* XP Text */}
+      <div className="mt-1 text-[10px] text-[#80ff20] font-[VT323] drop-shadow-[1px_1px_0_#000]">
+        {currentXp} / {nextLevelXp}
+      </div>
+    </div>
+  );
+}