Add range selection for target sum

Add slider-based range selection for target sum in ternary and balanced ternary interactives.

src/components/BalancedTernaryGame.tsx

@@ -2,6 +2,8 @@ import React, { useState, useEffect, useCallback } from 'react';
 import { Button } from '@/components/ui/button';
 import { Card, CardContent } from '@/components/ui/card';
 import { Badge } from '@/components/ui/badge';
+import { Slider } from '@/components/ui/slider';
+import { Label } from '@/components/ui/label';
 import { Plus, Minus } from 'lucide-react';
 import SocialShare from '@/components/SocialShare';
 
@@ -20,6 +22,7 @@ const BalancedTernaryGame: React.FC<BalancedTernaryGameProps> = ({ showSocialSha
   const [isGameWon, setIsGameWon] = useState<boolean>(false);
   const [hasGameStarted, setHasGameStarted] = useState<boolean>(false);
   const [highScore, setHighScore] = useState<number | null>(null);
+  const [targetRange, setTargetRange] = useState<[number, number]>([-1000, 1000]);
 
   // Load high score from localStorage on component mount
   useEffect(() => {
@@ -29,27 +32,24 @@ const BalancedTernaryGame: React.FC<BalancedTernaryGameProps> = ({ showSocialSha
     }
   }, []);
 
-  // Generate a random number that can be represented in balanced ternary
-  const generateRandomTarget = () => {
-    // Generate random balanced ternary digits (-1, 0, or 1) for each position
-    const balancedTernaryDigits = Array.from({ length: 8 }, () => Math.floor(Math.random() * 3) - 1);
-    // Convert to decimal
-    const result = balancedTernaryDigits.reduce((sum, digit, index) => sum + digit * POWERS_OF_THREE[index], 0);
-    // Make sure we don't get 0 as target
-    return result === 0 ? generateRandomTarget() : result;
-  };
-
   // Start new game
   const startNewGame = useCallback(() => {
-    const newTarget = generateRandomTarget();
+    // Generate a random number within the selected range
-    setTargetNumber(newTarget);
+    const [min, max] = targetRange;
+    let result = Math.floor(Math.random() * (max - min + 1)) + min;
+    // Make sure we don't get 0 as target
+    if (result === 0) {
+      result = Math.random() < 0.5 ? min : max;
+    }
+    
+    setTargetNumber(result);
     setCardValues(new Array(8).fill(0));
     setCurrentSum(0);
     setTimer(0);
     setIsGameActive(true);
     setIsGameWon(false);
     setHasGameStarted(true);
-  }, []);
+  }, [targetRange]);
 
   // Start game for the first time
   const startGame = () => {
@@ -168,6 +168,32 @@ const BalancedTernaryGame: React.FC<BalancedTernaryGameProps> = ({ showSocialSha
         )}
       </div>
 
+      {/* Range Selection */}
+      {!hasGameStarted && (
+        <Card className="p-6">
+          <div className="space-y-4">
+            <Label className="text-lg font-semibold">Target Number Range</Label>
+            <div className="space-y-2">
+              <div className="flex justify-between text-sm text-muted-foreground">
+                <span>Min: {targetRange[0]}</span>
+                <span>Max: {targetRange[1]}</span>
+              </div>
+              <Slider
+                value={targetRange}
+                onValueChange={(value) => setTargetRange(value as [number, number])}
+                min={-3280}
+                max={3280}
+                step={1}
+                className="w-full"
+              />
+            </div>
+            <p className="text-sm text-muted-foreground">
+              Choose the range for target numbers. Range: -{POWERS_OF_THREE.reduce((sum, power) => sum + power, 0)} to +{POWERS_OF_THREE.reduce((sum, power) => sum + power, 0)}
+            </p>
+          </div>
+        </Card>
+      )}
+
       {/* Cards representing powers of three */}
       <div className="grid grid-cols-8 gap-3">
         {POWERS_OF_THREE.map((power, index) => (

src/components/TernaryNumberGame.tsx

@@ -2,6 +2,8 @@ import React, { useState, useEffect, useCallback } from 'react';
 import { Button } from '@/components/ui/button';
 import { Card, CardContent } from '@/components/ui/card';
 import { Badge } from '@/components/ui/badge';
+import { Slider } from '@/components/ui/slider';
+import { Label } from '@/components/ui/label';
 import SocialShare from '@/components/SocialShare';
 
 const POWERS_OF_THREE = [2187, 729, 243, 81, 27, 9, 3, 1]; // 3^7 to 3^0
@@ -19,6 +21,7 @@ const TernaryNumberGame: React.FC<TernaryNumberGameProps> = ({ showSocialShare =
   const [isGameWon, setIsGameWon] = useState<boolean>(false);
   const [hasGameStarted, setHasGameStarted] = useState<boolean>(false);
   const [highScore, setHighScore] = useState<number | null>(null);
+  const [targetRange, setTargetRange] = useState<[number, number]>([1, 1000]);
 
   // Load high score from localStorage on component mount
   useEffect(() => {
@@ -28,17 +31,12 @@ const TernaryNumberGame: React.FC<TernaryNumberGameProps> = ({ showSocialShare =
     }
   }, []);
 
-  // Generate a random number expressible with up to 8 ternary digits
-  const generateRandomTarget = () => {
-    // Generate random ternary digits (0, 1, or 2) for each position
-    const ternaryDigits = Array.from({ length: 8 }, () => Math.floor(Math.random() * 3));
-    // Convert to decimal
-    return ternaryDigits.reduce((sum, digit, index) => sum + digit * POWERS_OF_THREE[index], 0);
-  };
-
   // Start new game
   const startNewGame = useCallback(() => {
-    const newTarget = generateRandomTarget();
+    // Generate a random number within the selected range
+    const [min, max] = targetRange;
+    const newTarget = Math.floor(Math.random() * (max - min + 1)) + min;
+    
     setTargetNumber(newTarget);
     setCardValues(new Array(8).fill(0));
     setCurrentSum(0);
@@ -46,7 +44,7 @@ const TernaryNumberGame: React.FC<TernaryNumberGameProps> = ({ showSocialShare =
     setIsGameActive(true);
     setIsGameWon(false);
     setHasGameStarted(true);
-  }, []);
+  }, [targetRange]);
 
   // Start game for the first time
   const startGame = () => {
@@ -121,6 +119,32 @@ const TernaryNumberGame: React.FC<TernaryNumberGameProps> = ({ showSocialShare =
         )}
       </div>
 
+      {/* Range Selection */}
+      {!hasGameStarted && (
+        <Card className="p-6">
+          <div className="space-y-4">
+            <Label className="text-lg font-semibold">Target Number Range</Label>
+            <div className="space-y-2">
+              <div className="flex justify-between text-sm text-muted-foreground">
+                <span>Min: {targetRange[0]}</span>
+                <span>Max: {targetRange[1]}</span>
+              </div>
+              <Slider
+                value={targetRange}
+                onValueChange={(value) => setTargetRange(value as [number, number])}
+                min={1}
+                max={3280}
+                step={1}
+                className="w-full"
+              />
+            </div>
+            <p className="text-sm text-muted-foreground">
+              Choose the range for target numbers. Maximum possible: {POWERS_OF_THREE.reduce((sum, power) => sum + 2 * power, 0)}
+            </p>
+          </div>
+        </Card>
+      )}
+
       {/* Cards representing powers of three */}
       <div className="grid grid-cols-8 gap-3">
         {POWERS_OF_THREE.map((power, index) => (