Spaces:
Sleeping
Sleeping
File size: 6,292 Bytes
100a6dd |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 |
/// <reference path="../react-app-env.d.ts" />
import * as React from 'react';
const { useState, useEffect } = React;
import { startNewGame, undoMove, resignGame, NewGameOptions } from '../services/api';
import { setSoundEnabled, playSound } from '../services/soundService';
interface GameControlsProps {
// Theme props removed but kept in comments for future reference
// onThemeChange: (theme: 'brown' | 'grey') => void;
// currentTheme: 'brown' | 'grey';
}
const GameControls: React.FC<GameControlsProps> = () => {
const [showNewGameOptions, setShowNewGameOptions] = useState(false);
const [soundOn, setSoundOn] = useState(true);
const [gameOptions, setGameOptions] = useState<NewGameOptions>({
player_color: 'white',
difficulty: 'medium',
time_limit: 1.0,
use_opening_book: true,
enable_analysis: true,
});
// Initialize sound settings
useEffect(() => {
setSoundEnabled(soundOn);
}, [soundOn]);
const handleNewGame = async () => {
try {
await startNewGame(gameOptions);
setShowNewGameOptions(false);
window.location.reload(); // Refresh to reset the board state
} catch (error) {
console.error('Error starting new game:', error);
}
};
const handleUndo = async () => {
try {
await undoMove();
window.location.reload(); // Refresh to update the board state
} catch (error) {
console.error('Error undoing move:', error);
}
};
const handleResign = async () => {
if (window.confirm('Are you sure you want to resign?')) {
try {
await resignGame();
window.location.reload(); // Refresh to update the game state
} catch (error) {
console.error('Error resigning game:', error);
}
}
};
return (
<div className="w-full max-w-[800px] mb-6">
<div className="flex flex-wrap gap-3 justify-center mb-4">
<button
className="px-5 py-3 bg-gradio-orange text-white rounded-lg hover:bg-orange-500 transition-colors text-lg font-medium"
onClick={() => setShowNewGameOptions(!showNewGameOptions)}
>
New Game
</button>
<button
className="px-5 py-3 bg-gradio-blue text-white rounded-lg hover:bg-blue-500 transition-colors text-lg font-medium"
onClick={handleUndo}
>
Undo Move
</button>
<button
className="px-5 py-3 bg-gradio-red text-white rounded-lg hover:bg-red-500 transition-colors text-lg font-medium"
onClick={handleResign}
>
Resign
</button>
</div>
{showNewGameOptions && (
<div className="mt-4 p-6 bg-gradio-card border border-gradio-border rounded-lg shadow-lg text-gradio-text">
<h3 className="text-2xl font-medium mb-4 text-gradio-yellow">New Game Options</h3>
<div className="space-y-4">
<div>
<label className="block text-lg font-medium mb-2">Play as</label>
<select
className="w-full px-4 py-3 bg-gradio-bg border border-gradio-border rounded-lg text-lg"
value={gameOptions.player_color}
onChange={(e) => setGameOptions({ ...gameOptions, player_color: e.target.value as 'white' | 'black' })}
>
<option value="white">White</option>
<option value="black">Black</option>
</select>
</div>
<div>
<label className="block text-lg font-medium mb-2">Difficulty</label>
<select
className="w-full px-4 py-3 bg-gradio-bg border border-gradio-border rounded-lg text-lg"
value={gameOptions.difficulty}
onChange={(e) => setGameOptions({ ...gameOptions, difficulty: e.target.value as any })}
>
<option value="beginner">Beginner</option>
<option value="easy">Easy</option>
<option value="medium">Medium</option>
<option value="hard">Hard</option>
<option value="expert">Expert</option>
<option value="master">Master</option>
</select>
</div>
<div>
<label className="block text-lg font-medium mb-2">
Time Limit (seconds): <span className="text-gradio-orange">{gameOptions.time_limit}</span>
</label>
<input
type="range"
min="0.1"
max="10"
step="0.1"
className="w-full h-3 bg-gradio-bg rounded-lg appearance-none cursor-pointer"
value={gameOptions.time_limit}
onChange={(e) => setGameOptions({ ...gameOptions, time_limit: parseFloat(e.target.value) })}
/>
</div>
<div className="flex items-center">
<input
type="checkbox"
id="use-opening-book"
checked={gameOptions.use_opening_book}
onChange={(e) => setGameOptions({ ...gameOptions, use_opening_book: e.target.checked })}
className="w-5 h-5 mr-3"
/>
<label htmlFor="use-opening-book" className="text-lg">Use opening book</label>
</div>
<div className="flex items-center">
<input
type="checkbox"
id="enable-analysis"
checked={gameOptions.enable_analysis}
onChange={(e) => setGameOptions({ ...gameOptions, enable_analysis: e.target.checked })}
className="w-5 h-5 mr-3"
/>
<label htmlFor="enable-analysis" className="text-lg">Enable position analysis</label>
</div>
<button
className="w-full px-4 py-3 bg-gradio-orange text-white rounded-lg hover:bg-orange-500 transition-colors text-xl font-medium mt-2"
onClick={handleNewGame}
>
Start Game
</button>
</div>
</div>
)}
</div>
);
};
export default GameControls; |