272 lines
No EOL
10 KiB
TypeScript
272 lines
No EOL
10 KiB
TypeScript
import { useState, useCallback } from "react";
|
|
import { Button } from "@/components/ui/button";
|
|
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
|
|
import { Badge } from "@/components/ui/badge";
|
|
import { RefreshCw, RotateCcw, ExternalLink, ArrowLeft } from "lucide-react";
|
|
import { toast } from "sonner";
|
|
import SocialShare from "@/components/SocialShare";
|
|
import { useSearchParams, useNavigate } from "react-router-dom";
|
|
type Piece = 'white' | 'black' | null;
|
|
type Position = {
|
|
row: number;
|
|
col: number;
|
|
};
|
|
interface KnightsPuzzleProps {
|
|
showSocialShare?: boolean;
|
|
}
|
|
const KnightsPuzzle = ({
|
|
showSocialShare = false
|
|
}: KnightsPuzzleProps) => {
|
|
const [searchParams] = useSearchParams();
|
|
const navigate = useNavigate();
|
|
const isFromPuzzles = searchParams.get('from') === 'puzzles';
|
|
// Initial state: white knights at top corners, black knights at bottom corners
|
|
const initialBoard: Piece[][] = [['white', null, 'white'], [null, null, null], ['black', null, 'black']];
|
|
|
|
// Target state: black knights at top corners, white knights at bottom corners
|
|
const targetBoard: Piece[][] = [['black', null, 'black'], [null, null, null], ['white', null, 'white']];
|
|
const [board, setBoard] = useState<Piece[][]>(initialBoard);
|
|
const [selectedSquare, setSelectedSquare] = useState<Position | null>(null);
|
|
const [moveCount, setMoveCount] = useState(0);
|
|
const [isComplete, setIsComplete] = useState(false);
|
|
const [moveHistory, setMoveHistory] = useState<Position[][]>([]);
|
|
|
|
// Knight move offsets
|
|
const knightMoves = [[-2, -1], [-2, 1], [-1, -2], [-1, 2], [1, -2], [1, 2], [2, -1], [2, 1]];
|
|
const isValidPosition = (row: number, col: number): boolean => {
|
|
return row >= 0 && row < 3 && col >= 0 && col < 3;
|
|
};
|
|
const getValidMoves = (fromRow: number, fromCol: number): Position[] => {
|
|
const validMoves: Position[] = [];
|
|
knightMoves.forEach(([dRow, dCol]) => {
|
|
const newRow = fromRow + dRow;
|
|
const newCol = fromCol + dCol;
|
|
if (isValidPosition(newRow, newCol) && board[newRow][newCol] === null) {
|
|
validMoves.push({
|
|
row: newRow,
|
|
col: newCol
|
|
});
|
|
}
|
|
});
|
|
return validMoves;
|
|
};
|
|
const isValidMove = (from: Position, to: Position): boolean => {
|
|
const rowDiff = Math.abs(from.row - to.row);
|
|
const colDiff = Math.abs(from.col - to.col);
|
|
return rowDiff === 2 && colDiff === 1 || rowDiff === 1 && colDiff === 2;
|
|
};
|
|
const checkWinCondition = (currentBoard: Piece[][]): boolean => {
|
|
for (let row = 0; row < 3; row++) {
|
|
for (let col = 0; col < 3; col++) {
|
|
if (currentBoard[row][col] !== targetBoard[row][col]) {
|
|
return false;
|
|
}
|
|
}
|
|
}
|
|
return true;
|
|
};
|
|
const handleSquareClick = (row: number, col: number) => {
|
|
const piece = board[row][col];
|
|
if (selectedSquare) {
|
|
const from = selectedSquare;
|
|
const to = {
|
|
row,
|
|
col
|
|
};
|
|
|
|
// If clicking on the same square, deselect
|
|
if (from.row === to.row && from.col === to.col) {
|
|
setSelectedSquare(null);
|
|
return;
|
|
}
|
|
|
|
// If clicking on an empty square and it's a valid knight move
|
|
if (piece === null && isValidMove(from, to)) {
|
|
const newBoard = board.map(r => [...r]);
|
|
const movingPiece = newBoard[from.row][from.col];
|
|
newBoard[from.row][from.col] = null;
|
|
newBoard[to.row][to.col] = movingPiece;
|
|
setBoard(newBoard);
|
|
setMoveCount(moveCount + 1);
|
|
setMoveHistory([...moveHistory, [from, to]]);
|
|
setSelectedSquare(null);
|
|
|
|
// Check win condition
|
|
if (checkWinCondition(newBoard)) {
|
|
setIsComplete(true);
|
|
toast.success(`Puzzle solved in ${moveCount + 1} moves!`);
|
|
}
|
|
} else if (piece !== null) {
|
|
// Select a different piece
|
|
setSelectedSquare({
|
|
row,
|
|
col
|
|
});
|
|
} else {
|
|
setSelectedSquare(null);
|
|
}
|
|
} else if (piece !== null) {
|
|
// Select a piece
|
|
setSelectedSquare({
|
|
row,
|
|
col
|
|
});
|
|
}
|
|
};
|
|
const resetPuzzle = () => {
|
|
setBoard(initialBoard);
|
|
setSelectedSquare(null);
|
|
setMoveCount(0);
|
|
setIsComplete(false);
|
|
setMoveHistory([]);
|
|
};
|
|
const undoLastMove = () => {
|
|
if (moveHistory.length === 0) return;
|
|
const lastMove = moveHistory[moveHistory.length - 1];
|
|
const [from, to] = lastMove;
|
|
const newBoard = board.map(r => [...r]);
|
|
const movingPiece = newBoard[to.row][to.col];
|
|
newBoard[to.row][to.col] = null;
|
|
newBoard[from.row][from.col] = movingPiece;
|
|
setBoard(newBoard);
|
|
setMoveCount(moveCount - 1);
|
|
setMoveHistory(moveHistory.slice(0, -1));
|
|
setSelectedSquare(null);
|
|
setIsComplete(false);
|
|
};
|
|
const getSquareClass = (row: number, col: number): string => {
|
|
const baseClass = "w-16 h-16 border-2 border-outline flex items-center justify-center cursor-pointer transition-all duration-200";
|
|
const isSelected = selectedSquare?.row === row && selectedSquare?.col === col;
|
|
const validMoves = selectedSquare ? getValidMoves(selectedSquare.row, selectedSquare.col) : [];
|
|
const isValidMoveTarget = validMoves.some(move => move.row === row && move.col === col);
|
|
let bgClass = (row + col) % 2 === 0 ? "bg-surface" : "bg-surface-variant";
|
|
if (isSelected) {
|
|
bgClass = "bg-accent";
|
|
} else if (isValidMoveTarget) {
|
|
bgClass = "bg-accent/30 ring-2 ring-accent";
|
|
}
|
|
return `${baseClass} ${bgClass}`;
|
|
};
|
|
const renderPiece = (piece: Piece) => {
|
|
if (piece === 'white') {
|
|
return <span className="text-4xl">♘</span>;
|
|
} else if (piece === 'black') {
|
|
return <span className="text-4xl">♞</span>;
|
|
}
|
|
return null;
|
|
};
|
|
return <div className="max-w-4xl mx-auto p-6 space-y-6">
|
|
{/* Back to Puzzles button - only show when coming from puzzles */}
|
|
{isFromPuzzles && <div className="flex items-center gap-4">
|
|
<button onClick={() => navigate('/themes/puzzles')} className="text-primary hover:text-primary/80 font-medium flex items-center gap-2">
|
|
<ArrowLeft className="w-4 h-4" />
|
|
Go back to Puzzles
|
|
</button>
|
|
</div>}
|
|
|
|
{/* Green: Title and Description - Centered */}
|
|
<div className="space-y-2 text-center">
|
|
<h1 className="text-2xl font-bold">Knights Exchange Puzzle</h1>
|
|
<p className="text-muted-foreground">
|
|
Can the black and white knights swap places using legal chess moves? Move knights by clicking on them, then clicking on a valid destination.
|
|
</p>
|
|
</div>
|
|
|
|
{/* Blue and Orange: Moves (left) and Status (right) on same line */}
|
|
<div className="flex justify-between items-center text-lg">
|
|
<div>
|
|
<span className="font-semibold">Moves: </span>
|
|
<span className="font-mono text-primary">{moveCount}</span>
|
|
</div>
|
|
<div className="font-semibold">
|
|
{isComplete ? "🎉 Puzzle Solved!" : "🎯 In Progress"}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Interactive and Goal State side by side */}
|
|
<div className="grid grid-cols-2 gap-6">
|
|
{/* Left: Interactive game */}
|
|
<Card className="bg-primary/5 border-primary/20">
|
|
<CardContent className="pt-6">
|
|
<div className="flex flex-col items-center gap-4">
|
|
<div className="grid grid-cols-3 gap-1 border-2 border-outline rounded-lg p-4 bg-background">
|
|
{board.map((row, rowIndex) => row.map((piece, colIndex) => <div key={`${rowIndex}-${colIndex}`} className={getSquareClass(rowIndex, colIndex)} onClick={() => handleSquareClick(rowIndex, colIndex)}>
|
|
{renderPiece(piece)}
|
|
</div>))}
|
|
</div>
|
|
|
|
{/* Controls */}
|
|
<div className="flex gap-2">
|
|
<Button onClick={resetPuzzle} variant="outline" size="sm">
|
|
<RefreshCw className="w-4 h-4 mr-2" />
|
|
Reset
|
|
</Button>
|
|
<Button onClick={undoLastMove} variant="outline" size="sm" disabled={moveHistory.length === 0}>
|
|
<RotateCcw className="w-4 h-4 mr-2" />
|
|
Undo
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
{/* Right: Goal state */}
|
|
<Card className="bg-green-500/5 border-green-500/20">
|
|
<CardContent className="pt-6">
|
|
<div className="flex flex-col items-center gap-4">
|
|
<div className="grid grid-cols-3 gap-1 border-2 border-outline rounded-lg p-4 bg-background">
|
|
{targetBoard.map((row, rowIndex) => row.map((piece, colIndex) => <div key={`goal-${rowIndex}-${colIndex}`} className="w-16 h-16 border-2 border-outline flex items-center justify-center bg-surface">
|
|
{renderPiece(piece)}
|
|
</div>))}
|
|
</div>
|
|
|
|
{/* Goal label */}
|
|
<div className="text-center">
|
|
<p className="text-sm font-medium text-green-700 dark:text-green-300">Goal State</p>
|
|
</div>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
|
|
{/* Purple: Initial and Target positions side by side */}
|
|
<div className="grid grid-cols-2 gap-6">
|
|
|
|
|
|
|
|
</div>
|
|
|
|
{/* Red: Game rules */}
|
|
<Card className="bg-destructive/5 border-destructive/20">
|
|
<CardHeader className="pb-3">
|
|
|
|
</CardHeader>
|
|
<CardContent>
|
|
<ul className="space-y-1 text-sm text-muted-foreground">
|
|
<li>Click on a knight to select it, valid moves will be highlighted. Click on a highlighted square to move the knight to said square (knights move in an L-shape, like in chess).
|
|
|
|
</li>
|
|
|
|
|
|
<li>Goal: Swap white and black knights</li>
|
|
|
|
</ul>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
{/* Attribution */}
|
|
<div className="pt-4 border-t border-outline">
|
|
<p className="text-xs text-muted-foreground">
|
|
Puzzle source:{" "}
|
|
<a href="https://bsky.app/profile/neuwirthe.bsky.social/post/3luhmc7gilc2x" target="_blank" rel="noopener noreferrer" className="text-accent hover:underline inline-flex items-center gap-1">
|
|
@neuwirthe.bsky.social
|
|
<ExternalLink className="w-3 h-3" />
|
|
</a>
|
|
</p>
|
|
</div>
|
|
|
|
{/* Social Share Section */}
|
|
{showSocialShare && <SocialShare title="Knights Exchange Puzzle" description="Can the black and white knights swap places using legal chess moves? Try this classic puzzle!" />}
|
|
</div>;
|
|
};
|
|
export default KnightsPuzzle; |