linera-io · ma2bd · Sep 16, 2025 · Sep 15, 2025 · Sep 15, 2025 · Sep 15, 2025
diff --git a/frontend/index.html b/frontend/index.html
@@ -2,7 +2,7 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" type="image/x-icon" href="favicon.ico" />
+    <link rel="icon" type="image/x-icon" href="/favicon.png" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Linera Game of Life</title>
 

diff --git a/frontend/public/favicon.png b/frontend/public/favicon.png
diff --git a/frontend/public/next.svg b/frontend/public/next.svg
diff --git a/frontend/public/vercel.svg b/frontend/public/vercel.svg
diff --git a/frontend/src/components/common/DifficultyBadge.tsx b/frontend/src/components/common/DifficultyBadge.tsx
@@ -0,0 +1,42 @@
+import { DifficultyLevel, formatDifficulty } from "@/lib/types/puzzle.types";
+import { difficultyConfig } from "@/lib/game-of-life/config/difficulty-config";
+
+interface DifficultyBadgeProps {
+  difficulty: DifficultyLevel;
+  size?: "sm" | "md" | "lg";
+  showText?: boolean;
+}
+
+export function DifficultyBadge({
+  difficulty,
+  size = "md",
+  showText = true
+}: DifficultyBadgeProps) {
+  const config = difficultyConfig[difficulty];
+
+  const sizeClasses = {
+    sm: "px-1.5 py-0.5 text-xs gap-1",
+    md: "px-2 py-1 text-sm gap-1.5",
+    lg: "px-3 py-1.5 text-base gap-2",
+  };
+
+  const iconSizeClasses = {
+    sm: "text-xs",
+    md: "text-sm",
+    lg: "text-base",
+  };
+
+  return (
+    <span
+      className={`
+        inline-flex items-center rounded-full font-medium
+        ${config.bgColor} ${config.textColor} ${config.borderColor}
+        ${sizeClasses[size]}
+        border
+      `}
+    >
+      <span className={iconSizeClasses[size]}>{config.icon}</span>
+      {showText && <span>{formatDifficulty(difficulty)}</span>}
+    </span>
+  );
+}
diff --git a/frontend/src/components/puzzles/GameControls.tsx b/frontend/src/components/puzzles/GameControls.tsx
@@ -1,5 +1,14 @@
 import { Button } from "@heroui/button";
-import { Play, Pause, ChevronRight, ChevronLeft, Lightbulb, Target } from "lucide-react";
+import {
+  Play,
+  Pause,
+  ChevronRight,
+  ChevronLeft,
+  Lightbulb,
+  Target,
+  RotateCcw,
+  Trash2,
+} from "lucide-react";
 import { Tooltip } from "@heroui/tooltip";
 
 interface GameControlsProps {
@@ -10,13 +19,12 @@ interface GameControlsProps {
   onNext: () => void;
   onPrevious: () => void;
   onClear: () => void;
+  onResetToInitial: () => void;
   showHints?: boolean;
   showGoals?: boolean;
   onToggleHints?: () => void;
   onToggleGoals?: () => void;
   hasConditions?: boolean;
-  minSteps?: number;
-  maxSteps?: number;
 }
 
 export function GameControls({
@@ -27,95 +35,93 @@ export function GameControls({
   onNext,
   onPrevious,
   onClear,
+  onResetToInitial,
   showHints = false,
   showGoals = false,
   onToggleHints,
   onToggleGoals,
   hasConditions = false,
-  minSteps,
-  maxSteps,
 }: GameControlsProps) {
-  const hasStepRequirement = minSteps !== undefined && maxSteps !== undefined;
-
   return (
     <div className="flex flex-col items-center gap-4">
-      <div className="flex gap-6 items-center">
-        <button
-          onClick={onPrevious}
-          disabled={!canUndo}
-          className="w-12 h-12 rounded-full bg-gray-200 hover:bg-gray-300 disabled:opacity-50 disabled:cursor-not-allowed flex items-center justify-center transition-colors"
-        >
-          <ChevronLeft size={24} className="text-gray-600" />
-        </button>
-        <button
-          onClick={isPlaying ? onPause : onPlay}
-          className="w-16 h-16 rounded-full bg-linera-primary hover:bg-linera-primary-dark text-white flex items-center justify-center transition-colors shadow-lg"
-        >
-          {isPlaying ? (
-            <Pause size={28} className="fill-white" />
-          ) : (
-            <Play size={28} className="ml-1 fill-white" />
-          )}
-        </button>
-        <button
-          onClick={onNext}
-          className="w-12 h-12 rounded-full bg-gray-200 hover:bg-gray-300 flex items-center justify-center transition-colors"
-        >
-          <ChevronRight size={24} className="text-gray-600" />
-        </button>
-      </div>
       <div className="flex gap-3 items-center">
+        <Tooltip content="Previous generation">
+          <button
+            onClick={onPrevious}
+            disabled={!canUndo}
+            className="w-10 h-10 rounded-full bg-gray-200 hover:bg-gray-300 disabled:opacity-50 disabled:cursor-not-allowed flex items-center justify-center transition-colors"
+          >
+            <ChevronLeft className="w-5 h-5 text-gray-600" />
+          </button>
+        </Tooltip>
+        <Tooltip content={isPlaying ? "Pause" : "Play"}>
+          <button
+            onClick={isPlaying ? onPause : onPlay}
+            className="p-3 rounded-full bg-linera-primary hover:bg-linera-primary-dark text-white transition-colors shadow-lg"
+          >
+            {isPlaying ? (
+              <Pause className="w-5 h-5 fill-white" />
+            ) : (
+              <Play className="w-5 h-5 ml-0.5 fill-white" />
+            )}
+          </button>
+        </Tooltip>
+        <Tooltip content="Next generation">
+          <button
+            onClick={onNext}
+            className="w-10 h-10 rounded-full bg-gray-200 hover:bg-gray-300 flex items-center justify-center transition-colors"
+          >
+            <ChevronRight className="w-5 h-5 text-gray-600" />
+          </button>
+        </Tooltip>
+        <div className="w-px h-8 bg-gray-300 mx-2" /> {/* Divider */}
+        <Tooltip content="Reset to generation 0">
+          <button
+            onClick={onResetToInitial}
+            className="w-10 h-10 rounded-full bg-gray-200 hover:bg-gray-300 flex items-center justify-center transition-colors"
+          >
+            <RotateCcw className="w-5 h-5 text-gray-600" />
+          </button>
+        </Tooltip>
+        <Tooltip content="Clear all cells">
+          <button
+            onClick={onClear}
+            className="w-10 h-10 rounded-full bg-gray-200 hover:bg-gray-300 flex items-center justify-center transition-colors"
+          >
+            <Trash2 className="w-5 h-5 text-gray-600" />
+          </button>
+        </Tooltip>
+      </div>
+      <div className="flex gap-3 items-center flex-wrap justify-center">
         {hasConditions && (
           <>
-            <Tooltip content="Show starting position hints">
-              <button
-                onClick={onToggleHints}
-                className={`w-12 h-12 rounded-full flex items-center justify-center transition-colors ${
-                  showHints
-                    ? "bg-green-500 text-white"
-                    : "bg-gray-200 hover:bg-gray-300 text-gray-600"
-                }`}
-              >
-                <Lightbulb size={20} />
-              </button>
-            </Tooltip>
-            <Tooltip content="Show goal pattern">
-              <button
-                onClick={onToggleGoals}
-                className={`w-12 h-12 rounded-full flex items-center justify-center transition-colors ${
-                  showGoals
-                    ? "bg-blue-500 text-white"
-                    : "bg-gray-200 hover:bg-gray-300 text-gray-600"
-                }`}
-              >
-                <Target size={20} />
-              </button>
-            </Tooltip>
+            <Button
+              variant="flat"
+              onPress={onToggleHints}
+              className={`font-medium text-xs sm:text-base px-4 py-2 sm:px-6 sm:py-2.5 min-w-[120px] sm:min-w-[140px] rounded-full transition-colors flex items-center gap-2 ${
+                showHints
+                  ? "bg-green-500 text-white hover:bg-green-600"
+                  : "bg-gray-200 hover:bg-gray-300 text-gray-700"
+              }`}
+            >
+              <Lightbulb className="w-4 h-4 sm:w-5 sm:h-5" />
+              Show Hints
+            </Button>
+            <Button
+              variant="flat"
+              onPress={onToggleGoals}
+              className={`font-medium text-xs sm:text-base px-4 py-2 sm:px-6 sm:py-2.5 min-w-[120px] sm:min-w-[140px] rounded-full transition-colors flex items-center gap-2 ${
+                showGoals
+                  ? "bg-blue-500 text-white hover:bg-blue-600"
+                  : "bg-gray-200 hover:bg-gray-300 text-gray-700"
+              }`}
+            >
+              <Target className="w-4 h-4 sm:w-5 sm:h-5" />
+              Show Goal
+            </Button>
           </>
         )}
-        <Button
-          variant="flat"
-          onPress={onClear}
-          className="bg-gray-200 hover:bg-gray-300 text-gray-700 font-medium text-lg px-8 min-w-[120px] rounded-full"
-        >
-          Clear
-        </Button>
       </div>
-      {hasStepRequirement && (
-        <div className="mt-2 text-center">
-          <div className="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-gray-50 border border-gray-200">
-            <span className="text-lg">🎯</span>
-            <span className="text-sm font-medium text-gray-700">
-              {minSteps === maxSteps
-                ? `Reach goal pattern in exactly ${minSteps} step${minSteps !== 1 ? "s" : ""}`
-                : `Reach goal pattern in ${minSteps}-${maxSteps} steps`}
-            </span>
-          </div>
-          <div className="text-xs text-gray-500 mt-1">
-            Each step = 1 generation of the Game of Life
-          </div>
-        </div>
-      )}
     </div>
   );
 }