diff --git a/src/components/BalancedTernaryGame.tsx b/src/components/BalancedTernaryGame.tsx index d366ea4..e105065 100644 --- a/src/components/BalancedTernaryGame.tsx +++ b/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 = ({ showSocialSha const [isGameWon, setIsGameWon] = useState(false); const [hasGameStarted, setHasGameStarted] = useState(false); const [highScore, setHighScore] = useState(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 = ({ 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(); - setTargetNumber(newTarget); + // Generate a random number within the selected range + 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 = ({ showSocialSha )} + {/* Range Selection */} + {!hasGameStarted && ( + +
+ +
+
+ Min: {targetRange[0]} + Max: {targetRange[1]} +
+ setTargetRange(value as [number, number])} + min={-3280} + max={3280} + step={1} + className="w-full" + /> +
+

+ 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)} +

+
+
+ )} + {/* Cards representing powers of three */}
{POWERS_OF_THREE.map((power, index) => ( diff --git a/src/components/TernaryNumberGame.tsx b/src/components/TernaryNumberGame.tsx index ef0d158..cc339a4 100644 --- a/src/components/TernaryNumberGame.tsx +++ b/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 = ({ showSocialShare = const [isGameWon, setIsGameWon] = useState(false); const [hasGameStarted, setHasGameStarted] = useState(false); const [highScore, setHighScore] = useState(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 = ({ 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 = ({ showSocialShare = setIsGameActive(true); setIsGameWon(false); setHasGameStarted(true); - }, []); + }, [targetRange]); // Start game for the first time const startGame = () => { @@ -121,6 +119,32 @@ const TernaryNumberGame: React.FC = ({ showSocialShare = )}
+ {/* Range Selection */} + {!hasGameStarted && ( + +
+ +
+
+ Min: {targetRange[0]} + Max: {targetRange[1]} +
+ setTargetRange(value as [number, number])} + min={1} + max={3280} + step={1} + className="w-full" + /> +
+

+ Choose the range for target numbers. Maximum possible: {POWERS_OF_THREE.reduce((sum, power) => sum + 2 * power, 0)} +

+
+
+ )} + {/* Cards representing powers of three */}
{POWERS_OF_THREE.map((power, index) => (