Add range selection for target sum
Add slider-based range selection for target sum in ternary and balanced ternary interactives.
This commit is contained in:
gpt-engineer-app[bot]
parent
6b9cf87fae
commit
c3e18446b6
2 changed files with 73 additions and 23 deletions
|
|
@ -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();
|
||||
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<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) => (
|
||||
|
|
|
|||
|
|
@ -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) => (
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue