Add play-from-position flow
This commit is contained in:
stefan-kp
+126
-1
@@ -3,7 +3,7 @@
|
||||
import { useCallback, useEffect, useMemo, useRef, useState } from "react";
|
||||
import { Chess } from "chess.js";
|
||||
import { Chessboard } from "react-chessboard";
|
||||
import { Brain, ChevronLeft, ChevronRight, Loader2, ArrowLeft, Download } from "lucide-react";
|
||||
import { Brain, ChevronLeft, ChevronRight, Loader2, ArrowLeft, Download, PlayCircle } from "lucide-react";
|
||||
import { useRouter } from "next/navigation";
|
||||
|
||||
import Header from "@/components/Header";
|
||||
@@ -64,6 +64,10 @@ export default function AnalysisPage() {
|
||||
const [comments, setComments] = useState<Record<number, string>>({});
|
||||
const [chatSession, setChatSession] = useState<ChatSession | null>(null);
|
||||
const [showImportModal, setShowImportModal] = useState(false);
|
||||
const [showPlayModal, setShowPlayModal] = useState(false);
|
||||
const [playPersonality, setPlayPersonality] = useState<Personality>(PERSONALITIES[0]);
|
||||
const [playColor, setPlayColor] = useState<"white" | "black">("white");
|
||||
const [playStrength, setPlayStrength] = useState(15);
|
||||
|
||||
useEffect(() => {
|
||||
const storedKey = localStorage.getItem("gemini_api_key");
|
||||
@@ -72,6 +76,10 @@ export default function AnalysisPage() {
|
||||
if (storedLang) setLanguage(storedLang as SupportedLanguage);
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
setPlayPersonality(selectedPersonality);
|
||||
}, [selectedPersonality]);
|
||||
|
||||
useEffect(() => {
|
||||
const sf = new Stockfish();
|
||||
setStockfish(sf);
|
||||
@@ -218,6 +226,18 @@ IMPORTANT:
|
||||
loadGameFromPgnOrFen(pgn);
|
||||
};
|
||||
|
||||
const handleStartGameFromPosition = () => {
|
||||
const payload = {
|
||||
fen: currentFen,
|
||||
personalityId: playPersonality.id,
|
||||
color: playColor,
|
||||
stockfishDepth: playStrength,
|
||||
};
|
||||
|
||||
localStorage.setItem("chess_tutor_pending_game", JSON.stringify(payload));
|
||||
router.push("/");
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
if (!stockfish || !currentFen) return;
|
||||
ensureEvaluation(currentFen);
|
||||
@@ -497,6 +517,17 @@ INSTRUCTIONS:
|
||||
<ChevronRight size={20} />
|
||||
</button>
|
||||
</div>
|
||||
<div className="w-full">
|
||||
<button
|
||||
onClick={() => {
|
||||
setPlayColor(orientation);
|
||||
setShowPlayModal(true);
|
||||
}}
|
||||
className="mt-3 inline-flex items-center gap-2 px-4 py-2 bg-blue-600 text-white rounded-lg shadow hover:bg-blue-700 transition-colors w-full justify-center"
|
||||
>
|
||||
<PlayCircle size={18} /> {t.analysis.playFromHere}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -597,6 +628,100 @@ INSTRUCTIONS:
|
||||
language={language}
|
||||
/>
|
||||
)}
|
||||
|
||||
{/* Play From Position Modal */}
|
||||
{showPlayModal && (
|
||||
<div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50 px-4 py-8">
|
||||
<div className="bg-white dark:bg-gray-800 rounded-2xl shadow-2xl max-w-2xl w-full p-6 space-y-6 border border-gray-200 dark:border-gray-700">
|
||||
<div className="flex items-start justify-between gap-4">
|
||||
<div>
|
||||
<h3 className="text-2xl font-bold text-gray-900 dark:text-white">{t.analysis.playFromHere}</h3>
|
||||
<p className="text-sm text-gray-600 dark:text-gray-300 mt-1">{t.analysis.playDescription}</p>
|
||||
</div>
|
||||
<button
|
||||
onClick={() => setShowPlayModal(false)}
|
||||
className="text-gray-500 hover:text-gray-700 dark:hover:text-gray-200"
|
||||
aria-label={t.common.close}
|
||||
>
|
||||
✕
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="space-y-4">
|
||||
<div>
|
||||
<p className="text-sm font-semibold text-gray-800 dark:text-gray-100 mb-2">{t.analysis.chooseOpponent}</p>
|
||||
<div className="grid grid-cols-2 gap-2">
|
||||
{PERSONALITIES.map(p => (
|
||||
<button
|
||||
key={p.id}
|
||||
onClick={() => setPlayPersonality(p)}
|
||||
className={`p-3 rounded-lg border flex items-center gap-2 ${playPersonality.id === p.id
|
||||
? "border-blue-500 bg-blue-50 dark:bg-blue-900/30"
|
||||
: "border-gray-200 dark:border-gray-700"}`}
|
||||
>
|
||||
<span className="text-xl">{p.image}</span>
|
||||
<div className="text-left">
|
||||
<div className="text-sm font-semibold text-gray-900 dark:text-white">{p.name}</div>
|
||||
<div className="text-xs text-gray-600 dark:text-gray-300 line-clamp-2">{p.description}</div>
|
||||
</div>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<div className="space-y-2">
|
||||
<p className="text-sm font-semibold text-gray-800 dark:text-gray-100">{t.analysis.chooseSide}</p>
|
||||
<div className="grid grid-cols-2 gap-2">
|
||||
{(["white", "black"] as const).map(color => (
|
||||
<button
|
||||
key={color}
|
||||
onClick={() => setPlayColor(color)}
|
||||
className={`py-2 px-3 rounded-lg border text-sm font-medium ${playColor === color
|
||||
? "border-blue-500 bg-blue-50 dark:bg-blue-900/30"
|
||||
: "border-gray-200 dark:border-gray-700"}`}
|
||||
>
|
||||
{color === "white" ? t.game.white : t.game.black}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<p className="text-sm font-semibold text-gray-800 dark:text-gray-100">{t.analysis.chooseStrength}</p>
|
||||
<div className="bg-gray-50 dark:bg-gray-900 border border-gray-200 dark:border-gray-700 rounded-lg p-3">
|
||||
<div className="text-sm text-gray-700 dark:text-gray-200 mb-1">{t.game.stockfishStrength}: {playStrength}</div>
|
||||
<input
|
||||
type="range"
|
||||
min="1"
|
||||
max="20"
|
||||
value={playStrength}
|
||||
onChange={(e) => setPlayStrength(parseInt(e.target.value))}
|
||||
className="w-full"
|
||||
/>
|
||||
<div className="text-[11px] text-gray-500 dark:text-gray-400 mt-1">{t.game.depth}: {playStrength}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center justify-end gap-3">
|
||||
<button
|
||||
onClick={() => setShowPlayModal(false)}
|
||||
className="px-4 py-2 rounded-lg border border-gray-300 dark:border-gray-700 text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700"
|
||||
>
|
||||
{t.common.cancel}
|
||||
</button>
|
||||
<button
|
||||
onClick={handleStartGameFromPosition}
|
||||
className="px-4 py-2 rounded-lg bg-blue-600 text-white hover:bg-blue-700 shadow"
|
||||
>
|
||||
{t.analysis.startPlay}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user