i18n
This commit is contained in:
Stefan
+352
-267
@@ -8,6 +8,9 @@ import { Tutor } from "./Tutor";
|
||||
import { APIKeyInput } from "./APIKeyInput";
|
||||
import { EvaluationBar } from "./EvaluationBar";
|
||||
import { Personality, PERSONALITIES } from "@/lib/personalities";
|
||||
import Header from "./Header";
|
||||
import { useTranslation } from "@/lib/i18n/useTranslation";
|
||||
import { SupportedLanguage } from "@/lib/i18n/translations";
|
||||
|
||||
import { lookupOpening, OpeningMetadata } from "@/lib/openings";
|
||||
|
||||
@@ -36,12 +39,16 @@ export default function ChessGame() {
|
||||
const [stockfishDepth, setStockfishDepth] = useState(15);
|
||||
|
||||
// New States
|
||||
const [language, setLanguage] = useState<'en' | 'de' | 'fr' | 'it'>('en');
|
||||
const [language, setLanguage] = useState<SupportedLanguage>('en');
|
||||
const [gameStarted, setGameStarted] = useState(false);
|
||||
const [showNewGameOptions, setShowNewGameOptions] = useState(false);
|
||||
const [showAnalysisModal, setShowAnalysisModal] = useState(false);
|
||||
const [customFen, setCustomFen] = useState("");
|
||||
|
||||
// Color Selection State
|
||||
const [colorSelection, setColorSelection] = useState<'white' | 'black' | 'random'>('white');
|
||||
const [playerColor, setPlayerColor] = useState<'white' | 'black'>('white');
|
||||
|
||||
// Game Over & History State
|
||||
const [gameOverState, setGameOverState] = useState<{ result: string, winner: "White" | "Black" | "Draw" } | null>(null);
|
||||
const [moveHistory, setMoveHistory] = useState<MoveHistoryItem[]>([]);
|
||||
@@ -49,6 +56,9 @@ export default function ChessGame() {
|
||||
// Personality State
|
||||
const [selectedPersonality, setSelectedPersonality] = useState<Personality | null>(null);
|
||||
|
||||
// Translation
|
||||
const t = useTranslation(language);
|
||||
|
||||
useEffect(() => {
|
||||
const sf = new Stockfish();
|
||||
setStockfish(sf);
|
||||
@@ -251,6 +261,12 @@ export default function ChessGame() {
|
||||
setFen(startFen);
|
||||
setSelectedPersonality(personality);
|
||||
|
||||
// Determine player color (resolve random)
|
||||
let finalPlayerColor: 'white' | 'black' = colorSelection === 'random'
|
||||
? (Math.random() < 0.5 ? 'white' : 'black')
|
||||
: colorSelection;
|
||||
setPlayerColor(finalPlayerColor);
|
||||
|
||||
// Reset Analysis State
|
||||
setUserMove(null);
|
||||
setComputerMove(null);
|
||||
@@ -262,6 +278,31 @@ export default function ChessGame() {
|
||||
|
||||
setGameStarted(true);
|
||||
setCustomFen(""); // Clear input
|
||||
|
||||
// If player is Black, computer moves first
|
||||
if (finalPlayerColor === 'black' && stockfish) {
|
||||
setTimeout(() => {
|
||||
stockfish.evaluate(startFen, stockfishDepth).then(evalResult => {
|
||||
const computerMoveData = {
|
||||
from: evalResult.bestMove.substring(0, 2),
|
||||
to: evalResult.bestMove.substring(2, 4),
|
||||
promotion: evalResult.bestMove.length > 4 ? evalResult.bestMove.substring(4, 5) : "q"
|
||||
};
|
||||
|
||||
const compResult = makeAMove(computerMoveData);
|
||||
if (compResult) {
|
||||
setComputerMove(compResult.result);
|
||||
const { newFen: fenAfterComp } = compResult;
|
||||
setFen(fenAfterComp);
|
||||
|
||||
// Evaluate position after computer's first move
|
||||
stockfish.evaluate(fenAfterComp, stockfishDepth).then(p0Eval => {
|
||||
setEvalP0(p0Eval);
|
||||
}).catch(err => console.error("Initial eval failed:", err));
|
||||
}
|
||||
}).catch(err => console.error("Computer first move failed:", err));
|
||||
}, 500);
|
||||
}
|
||||
} catch (e) {
|
||||
alert("Invalid FEN string");
|
||||
}
|
||||
@@ -276,293 +317,337 @@ export default function ChessGame() {
|
||||
const hasSavedGame = fen !== "rnbqkbnr/pppppppp/8/8/8/8/PPPPPPPP/RNBQKBNR w KQkq - 0 1";
|
||||
|
||||
return (
|
||||
<div className="flex flex-col items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900 p-4">
|
||||
<h1 className="text-4xl font-bold mb-8 text-gray-800 dark:text-white">Chess Tutor AI</h1>
|
||||
<>
|
||||
<Header language={language} />
|
||||
<div className="flex flex-col items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900 p-4">
|
||||
<h1 className="text-4xl font-bold mb-8 text-gray-800 dark:text-white">{t.start.title}</h1>
|
||||
|
||||
<div className="bg-white dark:bg-gray-800 p-8 rounded-xl shadow-lg max-w-2xl w-full space-y-8">
|
||||
{/* Step 1: Language & API Key */}
|
||||
<div className="space-y-4">
|
||||
<h2 className="text-xl font-semibold text-gray-900 dark:text-white">1. Settings</h2>
|
||||
<div className="bg-white dark:bg-gray-800 p-8 rounded-xl shadow-lg max-w-2xl w-full space-y-8">
|
||||
{/* Step 1: Language & API Key */}
|
||||
<div className="space-y-4">
|
||||
<h2 className="text-xl font-semibold text-gray-900 dark:text-white">{t.start.settings}</h2>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Language</label>
|
||||
<div className="flex gap-2">
|
||||
{['en', 'de', 'fr', 'it'].map((lang) => (
|
||||
<button
|
||||
key={lang}
|
||||
onClick={() => setLanguage(lang as any)}
|
||||
className={`px-3 py-2 rounded-lg border text-sm ${language === lang ? 'bg-blue-600 text-white border-blue-600' : 'bg-gray-50 dark:bg-gray-700 border-gray-200 dark:border-gray-600'}`}
|
||||
>
|
||||
{lang.toUpperCase()}
|
||||
</button>
|
||||
))}
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">{t.start.language}</label>
|
||||
<div className="flex gap-2">
|
||||
{(['en', 'de', 'fr', 'it'] as SupportedLanguage[]).map((lang) => (
|
||||
<button
|
||||
key={lang}
|
||||
onClick={() => setLanguage(lang)}
|
||||
className={`px-3 py-2 rounded-lg border text-sm ${language === lang ? 'bg-blue-600 text-white border-blue-600' : 'bg-gray-50 dark:bg-gray-700 border-gray-200 dark:border-gray-600'}`}
|
||||
>
|
||||
{lang.toUpperCase()}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">{t.start.apiKey}</label>
|
||||
<input
|
||||
type="password"
|
||||
placeholder={t.start.apiKeyPlaceholder}
|
||||
value={apiKey || ""}
|
||||
onChange={(e) => setApiKey(e.target.value)}
|
||||
className="w-full p-2 border rounded dark:bg-gray-700 dark:border-gray-600"
|
||||
/>
|
||||
<p className="text-xs text-gray-500 mt-1">
|
||||
<a href="https://aistudio.google.com/app/apikey" target="_blank" rel="noreferrer" className="text-blue-600 hover:underline">{t.start.getApiKey}</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Google Gemini API Key</label>
|
||||
<input
|
||||
type="password"
|
||||
placeholder="AIzaSy..."
|
||||
value={apiKey || ""}
|
||||
onChange={(e) => setApiKey(e.target.value)}
|
||||
className="w-full p-2 border rounded dark:bg-gray-700 dark:border-gray-600"
|
||||
/>
|
||||
<p className="text-xs text-gray-500 mt-1">
|
||||
<a href="https://aistudio.google.com/app/apikey" target="_blank" rel="noreferrer" className="text-blue-600 hover:underline">Get free key</a>
|
||||
</p>
|
||||
</div>
|
||||
{/* Step 2: Game Actions */}
|
||||
<div className="space-y-4">
|
||||
<h2 className="text-xl font-semibold text-gray-900 dark:text-white">{t.start.startGame}</h2>
|
||||
|
||||
{!apiKey ? (
|
||||
<div className="p-4 bg-yellow-50 text-yellow-800 rounded-lg text-sm">
|
||||
{t.start.apiKeyRequired}
|
||||
</div>
|
||||
) : (
|
||||
<div className="space-y-4">
|
||||
{/* Resume Option */}
|
||||
{hasSavedGame && !showNewGameOptions && (
|
||||
<div className="space-y-3">
|
||||
<button
|
||||
onClick={handleResume}
|
||||
className="w-full py-4 bg-green-600 text-white rounded-xl hover:bg-green-700 font-bold text-lg shadow-md transition-transform transform hover:scale-[1.02]"
|
||||
>
|
||||
{t.start.resumeGame}
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setShowNewGameOptions(true)}
|
||||
className="w-full py-2 text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white text-sm"
|
||||
>
|
||||
{t.start.startNewGame}
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* New Game Options */}
|
||||
{(!hasSavedGame || showNewGameOptions) && (
|
||||
<div className="space-y-6 animate-in fade-in slide-in-from-top-4 duration-300">
|
||||
{/* Color Selection */}
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
|
||||
{t.start.colorSelection}
|
||||
</label>
|
||||
<div className="grid grid-cols-3 gap-3">
|
||||
<button
|
||||
onClick={() => setColorSelection('white')}
|
||||
className={`py-3 px-4 rounded-lg border text-sm font-medium transition-all ${colorSelection === 'white'
|
||||
? 'bg-blue-600 text-white border-blue-600 shadow-md'
|
||||
: 'bg-gray-50 dark:bg-gray-700 border-gray-200 dark:border-gray-600 hover:bg-gray-100 dark:hover:bg-gray-600'
|
||||
}`}
|
||||
>
|
||||
<span className="text-2xl">♔</span> {t.start.playAsWhite}
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setColorSelection('black')}
|
||||
className={`py-3 px-4 rounded-lg border text-sm font-medium transition-all ${colorSelection === 'black'
|
||||
? 'bg-blue-600 text-white border-blue-600 shadow-md'
|
||||
: 'bg-gray-50 dark:bg-gray-700 border-gray-200 dark:border-gray-600 hover:bg-gray-100 dark:hover:bg-gray-600'
|
||||
}`}
|
||||
>
|
||||
<span className="text-2xl">♚</span> {t.start.playAsBlack}
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setColorSelection('random')}
|
||||
className={`py-3 px-4 rounded-lg border text-sm font-medium transition-all ${colorSelection === 'random'
|
||||
? 'bg-blue-600 text-white border-blue-600 shadow-md'
|
||||
: 'bg-gray-50 dark:bg-gray-700 border-gray-200 dark:border-gray-600 hover:bg-gray-100 dark:hover:bg-gray-600'
|
||||
}`}
|
||||
>
|
||||
<span className="text-2xl">🎲</span> {t.start.randomColor}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* FEN Import */}
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
|
||||
{t.start.importPosition}
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
placeholder={t.start.importPositionPlaceholder}
|
||||
value={customFen}
|
||||
onChange={(e) => setCustomFen(e.target.value)}
|
||||
className="w-full p-2 border rounded dark:bg-gray-700 dark:border-gray-600 font-mono text-sm"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Personality Grid */}
|
||||
<div>
|
||||
<p className="text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">{t.start.chooseCoach}</p>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
{PERSONALITIES.map(p => (
|
||||
<button
|
||||
key={p.id}
|
||||
onClick={() => handleNewGame(p)}
|
||||
className="bg-gray-50 dark:bg-gray-700 p-4 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-600 transition-colors border border-gray-200 dark:border-gray-600 flex flex-col items-center text-center"
|
||||
>
|
||||
<div className="text-4xl mb-2">{p.image}</div>
|
||||
<h3 className="font-bold text-gray-900 dark:text-white">{p.name}</h3>
|
||||
<p className="text-xs text-gray-500 dark:text-gray-400">{p.description}</p>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{hasSavedGame && (
|
||||
<button
|
||||
onClick={() => setShowNewGameOptions(false)}
|
||||
className="text-sm text-gray-500 hover:text-gray-700"
|
||||
>
|
||||
{t.common.cancel}
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Step 2: Game Actions */}
|
||||
<div className="space-y-4">
|
||||
<h2 className="text-xl font-semibold text-gray-900 dark:text-white">2. Start Game</h2>
|
||||
|
||||
{!apiKey ? (
|
||||
<div className="p-4 bg-yellow-50 text-yellow-800 rounded-lg text-sm">
|
||||
Please enter a valid API Key to continue.
|
||||
</div>
|
||||
) : (
|
||||
<div className="space-y-4">
|
||||
{/* Resume Option */}
|
||||
{hasSavedGame && !showNewGameOptions && (
|
||||
<div className="space-y-3">
|
||||
<button
|
||||
onClick={handleResume}
|
||||
className="w-full py-4 bg-green-600 text-white rounded-xl hover:bg-green-700 font-bold text-lg shadow-md transition-transform transform hover:scale-[1.02]"
|
||||
>
|
||||
Resume Previous Game
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setShowNewGameOptions(true)}
|
||||
className="w-full py-2 text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white text-sm"
|
||||
>
|
||||
Start New Game instead...
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* New Game Options */}
|
||||
{(!hasSavedGame || showNewGameOptions) && (
|
||||
<div className="space-y-6 animate-in fade-in slide-in-from-top-4 duration-300">
|
||||
{/* FEN Import */}
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
|
||||
Import Position (Optional FEN)
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
placeholder="rnbqkbnr/pppppppp/8/8/8/8/PPPPPPPP/RNBQKBNR w KQkq - 0 1"
|
||||
value={customFen}
|
||||
onChange={(e) => setCustomFen(e.target.value)}
|
||||
className="w-full p-2 border rounded dark:bg-gray-700 dark:border-gray-600 font-mono text-sm"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Personality Grid */}
|
||||
<div>
|
||||
<p className="text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Choose Your Coach:</p>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
{PERSONALITIES.map(p => (
|
||||
<button
|
||||
key={p.id}
|
||||
onClick={() => handleNewGame(p)}
|
||||
className="bg-gray-50 dark:bg-gray-700 p-4 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-600 transition-colors border border-gray-200 dark:border-gray-600 flex flex-col items-center text-center"
|
||||
>
|
||||
<div className="text-4xl mb-2">{p.image}</div>
|
||||
<h3 className="font-bold text-gray-900 dark:text-white">{p.name}</h3>
|
||||
<p className="text-xs text-gray-500 dark:text-gray-400">{p.description}</p>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{hasSavedGame && (
|
||||
<button
|
||||
onClick={() => setShowNewGameOptions(false)}
|
||||
className="text-sm text-gray-500 hover:text-gray-700"
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
return (
|
||||
<div className="flex flex-col md:flex-row gap-8 w-full max-w-6xl mx-auto p-4">
|
||||
{/* API Key Input is now handled in start screen, but we keep the button for updates */}
|
||||
{/* <APIKeyInput onKeySubmit={setApiKey} /> */}
|
||||
<>
|
||||
<Header language={language} />
|
||||
<div className="flex flex-col md:flex-row gap-8 w-full max-w-6xl mx-auto p-4">
|
||||
{/* API Key Input is now handled in start screen, but we keep the button for updates */}
|
||||
{/* <APIKeyInput onKeySubmit={setApiKey} /> */}
|
||||
|
||||
<div className="w-full md:w-2/3 flex flex-col gap-4">
|
||||
{/* Header with Back Button */}
|
||||
<div className="flex justify-between items-center">
|
||||
<button
|
||||
onClick={handleBackToMenu}
|
||||
className="px-4 py-2 bg-gray-200 dark:bg-gray-700 rounded-lg hover:bg-gray-300 dark:hover:bg-gray-600 text-sm font-medium transition-colors"
|
||||
>
|
||||
← Back to Menu
|
||||
</button>
|
||||
<div className="text-sm text-gray-500">
|
||||
Playing as White vs {selectedPersonality?.name}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="bg-white dark:bg-gray-800 p-4 rounded-lg shadow-lg flex gap-4">
|
||||
<div className="h-[560px]"> {/* Match board height roughly */}
|
||||
<EvaluationBar
|
||||
score={isAnalyzing ? null : evalP0?.score} // Show P0 score while waiting, or maybe P2 after move? Let's show current board eval.
|
||||
mate={isAnalyzing ? null : evalP0?.mate}
|
||||
/>
|
||||
</div>
|
||||
<div className="flex-1">
|
||||
<Chessboard
|
||||
options={{
|
||||
position: fen,
|
||||
onPieceDrop: ({ sourceSquare, targetSquare }) => onDrop({ sourceSquare, targetSquare }),
|
||||
darkSquareStyle: { backgroundColor: '#779954' },
|
||||
lightSquareStyle: { backgroundColor: '#e9edcc' },
|
||||
animationDurationInMs: 200
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="bg-white dark:bg-gray-800 p-4 rounded-lg shadow-lg">
|
||||
<div className="flex items-center justify-between mb-2">
|
||||
<label className="block text-sm font-medium text-gray-700 dark:text-gray-300">
|
||||
Stockfish Strength (Depth: {stockfishDepth})
|
||||
</label>
|
||||
<div className="w-full md:w-2/3 flex flex-col gap-4">
|
||||
{/* Header with Back Button */}
|
||||
<div className="flex justify-between items-center">
|
||||
<button
|
||||
onClick={() => {
|
||||
const game = gameRef.current;
|
||||
// Undo twice: once for computer, once for user
|
||||
game.undo();
|
||||
game.undo();
|
||||
setFen(game.fen());
|
||||
// Reset moves to prevent re-analysis of old moves
|
||||
setUserMove(null);
|
||||
setComputerMove(null);
|
||||
setEvalP0(null);
|
||||
setEvalP2(null);
|
||||
setOpeningData(null);
|
||||
}}
|
||||
className="px-3 py-1 text-sm bg-red-100 text-red-700 rounded hover:bg-red-200 dark:bg-red-900 dark:text-red-200 transition-colors"
|
||||
onClick={handleBackToMenu}
|
||||
className="px-4 py-2 bg-gray-200 dark:bg-gray-700 rounded-lg hover:bg-gray-300 dark:hover:bg-gray-600 text-sm font-medium transition-colors"
|
||||
>
|
||||
Undo Last Move
|
||||
{t.game.backToMenu}
|
||||
</button>
|
||||
<div className="text-sm text-gray-500">
|
||||
{t.game.playingAs} {playerColor === 'white' ? t.game.white : t.game.black} {t.game.vs} {selectedPersonality?.name}
|
||||
</div>
|
||||
</div>
|
||||
<input
|
||||
type="range"
|
||||
min="1"
|
||||
max="20"
|
||||
value={stockfishDepth}
|
||||
onChange={(e) => setStockfishDepth(parseInt(e.target.value))}
|
||||
className="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer dark:bg-gray-700"
|
||||
|
||||
<div className="bg-white dark:bg-gray-800 p-4 rounded-lg shadow-lg flex gap-4">
|
||||
<div className="h-[560px]"> {/* Match board height roughly */}
|
||||
<EvaluationBar
|
||||
score={isAnalyzing ? null : evalP0?.score} // Show P0 score while waiting, or maybe P2 after move? Let's show current board eval.
|
||||
mate={isAnalyzing ? null : evalP0?.mate}
|
||||
/>
|
||||
</div>
|
||||
<div className="flex-1">
|
||||
<Chessboard
|
||||
options={{
|
||||
position: fen,
|
||||
onPieceDrop: ({ sourceSquare, targetSquare }) => onDrop({ sourceSquare, targetSquare }),
|
||||
darkSquareStyle: { backgroundColor: '#779954' },
|
||||
lightSquareStyle: { backgroundColor: '#e9edcc' },
|
||||
animationDurationInMs: 200,
|
||||
boardOrientation: playerColor // Set board orientation based on player color
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="bg-white dark:bg-gray-800 p-4 rounded-lg shadow-lg">
|
||||
<div className="flex items-center justify-between mb-2">
|
||||
<label className="block text-sm font-medium text-gray-700 dark:text-gray-300">
|
||||
Stockfish Strength (Depth: {stockfishDepth})
|
||||
</label>
|
||||
<button
|
||||
onClick={() => {
|
||||
const game = gameRef.current;
|
||||
// Undo twice: once for computer, once for user
|
||||
game.undo();
|
||||
game.undo();
|
||||
setFen(game.fen());
|
||||
// Reset moves to prevent re-analysis of old moves
|
||||
setUserMove(null);
|
||||
setComputerMove(null);
|
||||
setEvalP0(null);
|
||||
setEvalP2(null);
|
||||
setOpeningData(null);
|
||||
}}
|
||||
className="px-3 py-1 text-sm bg-red-100 text-red-700 rounded hover:bg-red-200 dark:bg-red-900 dark:text-red-200 transition-colors"
|
||||
>
|
||||
Undo Last Move
|
||||
</button>
|
||||
</div>
|
||||
<input
|
||||
type="range"
|
||||
min="1"
|
||||
max="20"
|
||||
value={stockfishDepth}
|
||||
onChange={(e) => setStockfishDepth(parseInt(e.target.value))}
|
||||
className="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer dark:bg-gray-700"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* PGN Display */}
|
||||
{/* Game History (Scrollable List) */}
|
||||
<div className="bg-white dark:bg-gray-800 p-4 rounded-lg shadow-lg flex-1 min-h-0 flex flex-col">
|
||||
<div className="flex items-center justify-between mb-2">
|
||||
<h3 className="text-sm font-medium text-gray-700 dark:text-gray-300">Game History</h3>
|
||||
<button
|
||||
onClick={() => setShowAnalysisModal(true)}
|
||||
className="text-xs bg-purple-100 text-purple-700 px-2 py-1 rounded hover:bg-purple-200 dark:bg-purple-900 dark:text-purple-200 flex items-center gap-1"
|
||||
>
|
||||
<Brain size={12} /> Analyze
|
||||
</button>
|
||||
</div>
|
||||
<div className="flex-1 overflow-y-auto border border-gray-200 dark:border-gray-700 rounded bg-gray-50 dark:bg-gray-900 p-2">
|
||||
<table className="w-full text-sm text-left">
|
||||
<thead>
|
||||
<tr className="text-gray-500 dark:text-gray-400 border-b border-gray-200 dark:border-gray-700">
|
||||
<th className="py-1 px-2 w-12">#</th>
|
||||
<th className="py-1 px-2">White</th>
|
||||
<th className="py-1 px-2">Black</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{(() => {
|
||||
const history = gameRef.current.history();
|
||||
const rows = [];
|
||||
for (let i = 0; i < history.length; i += 2) {
|
||||
rows.push(
|
||||
<tr key={i} className="border-b border-gray-100 dark:border-gray-800 last:border-0">
|
||||
<td className="py-1 px-2 text-gray-500 dark:text-gray-500">{Math.floor(i / 2) + 1}.</td>
|
||||
<td className="py-1 px-2 font-medium text-gray-900 dark:text-gray-200">{history[i]}</td>
|
||||
<td className="py-1 px-2 font-medium text-gray-900 dark:text-gray-200">{history[i + 1] || ""}</td>
|
||||
</tr>
|
||||
);
|
||||
}
|
||||
if (rows.length === 0) {
|
||||
return (
|
||||
<tr>
|
||||
<td colSpan={3} className="py-4 text-center text-gray-500 italic">
|
||||
No moves yet.
|
||||
</td>
|
||||
</tr>
|
||||
);
|
||||
}
|
||||
return rows;
|
||||
})()}
|
||||
</tbody>
|
||||
</table>
|
||||
{/* Auto-scroll anchor */}
|
||||
<div ref={(el) => el?.scrollIntoView({ behavior: "smooth" })} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="w-full md:w-1/3">
|
||||
<Tutor
|
||||
currentFen={fen}
|
||||
userMove={userMove}
|
||||
computerMove={computerMove}
|
||||
stockfish={stockfish}
|
||||
evalP0={evalP0}
|
||||
evalP2={evalP2}
|
||||
openingData={openingData}
|
||||
onAnalysisComplete={() => { }}
|
||||
apiKey={apiKey}
|
||||
personality={selectedPersonality!}
|
||||
language={language}
|
||||
playerColor={playerColor}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* PGN Display */}
|
||||
{/* Game History (Scrollable List) */}
|
||||
<div className="bg-white dark:bg-gray-800 p-4 rounded-lg shadow-lg flex-1 min-h-0 flex flex-col">
|
||||
<div className="flex items-center justify-between mb-2">
|
||||
<h3 className="text-sm font-medium text-gray-700 dark:text-gray-300">Game History</h3>
|
||||
<button
|
||||
onClick={() => setShowAnalysisModal(true)}
|
||||
className="text-xs bg-purple-100 text-purple-700 px-2 py-1 rounded hover:bg-purple-200 dark:bg-purple-900 dark:text-purple-200 flex items-center gap-1"
|
||||
>
|
||||
<Brain size={12} /> Analyze
|
||||
</button>
|
||||
</div>
|
||||
<div className="flex-1 overflow-y-auto border border-gray-200 dark:border-gray-700 rounded bg-gray-50 dark:bg-gray-900 p-2">
|
||||
<table className="w-full text-sm text-left">
|
||||
<thead>
|
||||
<tr className="text-gray-500 dark:text-gray-400 border-b border-gray-200 dark:border-gray-700">
|
||||
<th className="py-1 px-2 w-12">#</th>
|
||||
<th className="py-1 px-2">White</th>
|
||||
<th className="py-1 px-2">Black</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{(() => {
|
||||
const history = gameRef.current.history();
|
||||
const rows = [];
|
||||
for (let i = 0; i < history.length; i += 2) {
|
||||
rows.push(
|
||||
<tr key={i} className="border-b border-gray-100 dark:border-gray-800 last:border-0">
|
||||
<td className="py-1 px-2 text-gray-500 dark:text-gray-500">{Math.floor(i / 2) + 1}.</td>
|
||||
<td className="py-1 px-2 font-medium text-gray-900 dark:text-gray-200">{history[i]}</td>
|
||||
<td className="py-1 px-2 font-medium text-gray-900 dark:text-gray-200">{history[i + 1] || ""}</td>
|
||||
</tr>
|
||||
);
|
||||
}
|
||||
if (rows.length === 0) {
|
||||
return (
|
||||
<tr>
|
||||
<td colSpan={3} className="py-4 text-center text-gray-500 italic">
|
||||
No moves yet.
|
||||
</td>
|
||||
</tr>
|
||||
);
|
||||
}
|
||||
return rows;
|
||||
})()}
|
||||
</tbody>
|
||||
</table>
|
||||
{/* Auto-scroll anchor */}
|
||||
<div ref={(el) => el?.scrollIntoView({ behavior: "smooth" })} />
|
||||
</div>
|
||||
</div>
|
||||
{/* Analysis Modal */}
|
||||
{showAnalysisModal && (
|
||||
<GameAnalysisModal
|
||||
fen={fen}
|
||||
stockfish={stockfish}
|
||||
apiKey={apiKey}
|
||||
language={language}
|
||||
onClose={() => setShowAnalysisModal(false)}
|
||||
/>
|
||||
)}
|
||||
|
||||
{/* Game Over Modal */}
|
||||
{gameOverState && (
|
||||
<GameOverModal
|
||||
result={gameOverState.result}
|
||||
winner={gameOverState.winner}
|
||||
history={moveHistory}
|
||||
apiKey={apiKey}
|
||||
language={language}
|
||||
onClose={() => setGameOverState(null)}
|
||||
onNewGame={() => handleNewGame(selectedPersonality!)}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="w-full md:w-1/3">
|
||||
<Tutor
|
||||
currentFen={fen}
|
||||
userMove={userMove}
|
||||
computerMove={computerMove}
|
||||
stockfish={stockfish}
|
||||
evalP0={evalP0}
|
||||
evalP2={evalP2}
|
||||
openingData={openingData}
|
||||
onAnalysisComplete={() => { }}
|
||||
apiKey={apiKey}
|
||||
personality={selectedPersonality!}
|
||||
language={language}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Analysis Modal */}
|
||||
{showAnalysisModal && (
|
||||
<GameAnalysisModal
|
||||
fen={fen}
|
||||
stockfish={stockfish}
|
||||
apiKey={apiKey}
|
||||
language={language}
|
||||
onClose={() => setShowAnalysisModal(false)}
|
||||
/>
|
||||
)}
|
||||
|
||||
{/* Game Over Modal */}
|
||||
{gameOverState && (
|
||||
<GameOverModal
|
||||
result={gameOverState.result}
|
||||
winner={gameOverState.winner}
|
||||
history={moveHistory}
|
||||
apiKey={apiKey}
|
||||
language={language}
|
||||
onClose={() => setGameOverState(null)}
|
||||
onNewGame={() => handleNewGame(selectedPersonality!)}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -0,0 +1,67 @@
|
||||
import React from 'react';
|
||||
import { useTranslation } from '@/lib/i18n/useTranslation';
|
||||
import { SupportedLanguage } from '@/lib/i18n/translations';
|
||||
|
||||
interface HeaderProps {
|
||||
language: SupportedLanguage;
|
||||
}
|
||||
|
||||
export default function Header({ language }: HeaderProps) {
|
||||
const t = useTranslation(language);
|
||||
|
||||
return (
|
||||
<header className="w-full border-b border-gray-300 bg-white dark:border-neutral-800 dark:bg-zinc-900">
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div className="flex items-center justify-between h-16">
|
||||
{/* App Title/Branding */}
|
||||
<div className="flex items-center space-x-3">
|
||||
<div className="text-2xl">♞</div>
|
||||
<h1 className="text-xl font-semibold text-gray-900 dark:text-white">
|
||||
Chess Tutor
|
||||
</h1>
|
||||
<span className="hidden sm:inline-block text-sm text-gray-500 dark:text-gray-400">
|
||||
{t.header.tagline}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{/* Action Buttons */}
|
||||
<div className="flex items-center space-x-3">
|
||||
{/* Buy Me a Beer Button */}
|
||||
<a
|
||||
href="https://paypal.me/stefan1"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="inline-flex items-center px-4 py-2 text-sm font-medium text-white bg-gradient-to-r from-yellow-500 to-orange-500 hover:from-yellow-600 hover:to-orange-600 rounded-lg transition-all duration-200 shadow-sm hover:shadow-md"
|
||||
>
|
||||
<span className="mr-2">🍺</span>
|
||||
<span className="hidden sm:inline">{t.header.buyMeABeer}</span>
|
||||
</a>
|
||||
|
||||
{/* GitHub Button */}
|
||||
<a
|
||||
href="https://github.com/stefan-kp/chess_tutor"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="inline-flex items-center px-4 py-2 text-sm font-medium text-gray-700 dark:text-gray-200 bg-gray-100 dark:bg-zinc-800 hover:bg-gray-200 dark:hover:bg-zinc-700 rounded-lg transition-all duration-200 shadow-sm hover:shadow-md"
|
||||
aria-label="View on GitHub"
|
||||
>
|
||||
<svg
|
||||
className="w-5 h-5"
|
||||
fill="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z"
|
||||
clipRule="evenodd"
|
||||
/>
|
||||
</svg>
|
||||
<span className="ml-2 hidden sm:inline">{t.header.github}</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
);
|
||||
}
|
||||
+30
-13
@@ -10,6 +10,9 @@ import clsx from "clsx";
|
||||
import { Personality } from "@/lib/personalities";
|
||||
import { OpeningMetadata } from "@/lib/openings";
|
||||
|
||||
import { useTranslation } from '@/lib/i18n/useTranslation';
|
||||
import { SupportedLanguage } from '@/lib/i18n/translations';
|
||||
|
||||
interface TutorProps {
|
||||
currentFen: string;
|
||||
userMove: Move | null;
|
||||
@@ -21,7 +24,8 @@ interface TutorProps {
|
||||
onAnalysisComplete: () => void;
|
||||
apiKey: string | null;
|
||||
personality: Personality;
|
||||
language: 'en' | 'de' | 'fr' | 'it';
|
||||
language: SupportedLanguage;
|
||||
playerColor: 'white' | 'black';
|
||||
}
|
||||
|
||||
interface Message {
|
||||
@@ -30,15 +34,20 @@ interface Message {
|
||||
timestamp: number;
|
||||
}
|
||||
|
||||
export function Tutor({ currentFen, userMove, computerMove, stockfish, evalP0, evalP2, openingData, onAnalysisComplete, apiKey, personality, language }: TutorProps) {
|
||||
const [messages, setMessages] = useState<Message[]>([
|
||||
{ role: "model", text: "Hello! I am " + personality.name + ". " + personality.description + " Let's play!", timestamp: Date.now() }
|
||||
]);
|
||||
export function Tutor({ currentFen, userMove, computerMove, stockfish, evalP0, evalP2, openingData, onAnalysisComplete, apiKey, personality, language, playerColor }: TutorProps) {
|
||||
const [messages, setMessages] = useState<Message[]>([]);
|
||||
const [input, setInput] = useState("");
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
const [chatSession, setChatSession] = useState<ChatSession | null>(null);
|
||||
const messagesEndRef = useRef<HTMLDivElement>(null);
|
||||
|
||||
const t = useTranslation(language);
|
||||
|
||||
// Determine tutor color (opposite of player)
|
||||
const tutorColor = playerColor === 'white' ? 'black' : 'white';
|
||||
const playerColorName = playerColor === 'white' ? 'White' : 'Black';
|
||||
const tutorColorName = tutorColor === 'white' ? 'White' : 'Black';
|
||||
|
||||
// Initialize chat session with Personality System Prompt
|
||||
useEffect(() => {
|
||||
if (apiKey) {
|
||||
@@ -57,7 +66,7 @@ PERSONALITY:
|
||||
${personality.systemPrompt}
|
||||
|
||||
INSTRUCTIONS:
|
||||
- You are the opponent (Black). You are playing against the User (White).
|
||||
- You are the opponent (${tutorColorName}). You are playing against the User (${playerColorName}).
|
||||
- You are NOT an AI assistant analyzing a game. You ARE the player.
|
||||
- Refer to the moves as YOUR moves ("I played e5", "My response was...").
|
||||
- Refer to the evaluation as YOUR thoughts/assessment ("I think I'm winning", "I missed that").
|
||||
@@ -73,15 +82,23 @@ INSTRUCTIONS:
|
||||
},
|
||||
{
|
||||
role: "model",
|
||||
parts: [{ text: `Understood. I am the player (Black). I will speak in ${language} and never mention the engine.` }]
|
||||
parts: [{ text: `Understood. I am the player (${tutorColorName}). I will speak in ${language} and never mention the engine.` }]
|
||||
}
|
||||
],
|
||||
});
|
||||
setChatSession(session);
|
||||
// Reset messages on language/personality change
|
||||
setMessages([{ role: "model", text: `Hello! I am ${personality.name}. Let's play!`, timestamp: Date.now() }]);
|
||||
|
||||
// Get initial greeting in the selected language
|
||||
session.sendMessage(`Introduce yourself briefly to start our game. Keep it short and in ${language}.`).then(result => {
|
||||
const greetingText = result.response.text();
|
||||
setMessages([{ role: "model", text: greetingText, timestamp: Date.now() }]);
|
||||
}).catch(err => {
|
||||
console.error("Failed to get greeting:", err);
|
||||
// Fallback to English if greeting fails
|
||||
setMessages([{ role: "model", text: `Hello! I am ${personality.name}. Let's play!`, timestamp: Date.now() }]);
|
||||
});
|
||||
}
|
||||
}, [apiKey, personality, language]);
|
||||
}, [apiKey, personality, language, playerColor]);
|
||||
|
||||
// Scroll to bottom
|
||||
useEffect(() => {
|
||||
@@ -276,13 +293,13 @@ React to this exchange as the player.
|
||||
onClick={() => sendMessageToChat("Give me a hint")}
|
||||
className="flex items-center gap-1 px-3 py-1 text-xs bg-yellow-100 text-yellow-800 rounded-full hover:bg-yellow-200 dark:bg-yellow-900 dark:text-yellow-200"
|
||||
>
|
||||
<Lightbulb size={12} /> Hint
|
||||
<Lightbulb size={12} /> {t.tutor.hint}
|
||||
</button>
|
||||
<button
|
||||
onClick={() => sendMessageToChat("What is the best move?")}
|
||||
className="flex items-center gap-1 px-3 py-1 text-xs bg-green-100 text-green-800 rounded-full hover:bg-green-200 dark:bg-green-900 dark:text-green-200"
|
||||
>
|
||||
<Trophy size={12} /> Best Move
|
||||
<Trophy size={12} /> {t.tutor.bestMove}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
@@ -292,7 +309,7 @@ React to this exchange as the player.
|
||||
type="text"
|
||||
value={input}
|
||||
onChange={(e) => setInput(e.target.value)}
|
||||
placeholder="Ask your coach..."
|
||||
placeholder={t.tutor.askCoach}
|
||||
className="flex-1 p-2 border rounded-lg dark:bg-gray-700 dark:border-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-500"
|
||||
disabled={isLoading}
|
||||
/>
|
||||
|
||||
Reference in New Issue
Block a user