mirror of
https://github.com/andwati/copilot-dev-days.git
synced 2026-10-18 10:12:53 +00:00
Initial commit
This commit is contained in:
+38
@@ -0,0 +1,38 @@
|
||||
import { useBingoGame } from './hooks/useBingoGame';
|
||||
import { StartScreen } from './components/StartScreen';
|
||||
import { GameScreen } from './components/GameScreen';
|
||||
import { BingoModal } from './components/BingoModal';
|
||||
|
||||
function App() {
|
||||
const {
|
||||
gameState,
|
||||
board,
|
||||
winningSquareIds,
|
||||
showBingoModal,
|
||||
startGame,
|
||||
handleSquareClick,
|
||||
resetGame,
|
||||
dismissModal,
|
||||
} = useBingoGame();
|
||||
|
||||
if (gameState === 'start') {
|
||||
return <StartScreen onStart={startGame} />;
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<GameScreen
|
||||
board={board}
|
||||
winningSquareIds={winningSquareIds}
|
||||
hasBingo={gameState === 'bingo'}
|
||||
onSquareClick={handleSquareClick}
|
||||
onReset={resetGame}
|
||||
/>
|
||||
{showBingoModal && (
|
||||
<BingoModal onDismiss={dismissModal} />
|
||||
)}
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
export default App;
|
||||
@@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="35.93" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 228"><path fill="#00D8FF" d="M210.483 73.824a171.49 171.49 0 0 0-8.24-2.597c.465-1.9.893-3.777 1.273-5.621c6.238-30.281 2.16-54.676-11.769-62.708c-13.355-7.7-35.196.329-57.254 19.526a171.23 171.23 0 0 0-6.375 5.848a155.866 155.866 0 0 0-4.241-3.917C100.759 3.829 77.587-4.822 63.673 3.233C50.33 10.957 46.379 33.89 51.995 62.588a170.974 170.974 0 0 0 1.892 8.48c-3.28.932-6.445 1.924-9.474 2.98C17.309 83.498 0 98.307 0 113.668c0 15.865 18.582 31.778 46.812 41.427a145.52 145.52 0 0 0 6.921 2.165a167.467 167.467 0 0 0-2.01 9.138c-5.354 28.2-1.173 50.591 12.134 58.266c13.744 7.926 36.812-.22 59.273-19.855a145.567 145.567 0 0 0 5.342-4.923a168.064 168.064 0 0 0 6.92 6.314c21.758 18.722 43.246 26.282 56.54 18.586c13.731-7.949 18.194-32.003 12.4-61.268a145.016 145.016 0 0 0-1.535-6.842c1.62-.48 3.21-.974 4.76-1.488c29.348-9.723 48.443-25.443 48.443-41.52c0-15.417-17.868-30.326-45.517-39.844Zm-6.365 70.984c-1.4.463-2.836.91-4.3 1.345c-3.24-10.257-7.612-21.163-12.963-32.432c5.106-11 9.31-21.767 12.459-31.957c2.619.758 5.16 1.557 7.61 2.4c23.69 8.156 38.14 20.213 38.14 29.504c0 9.896-15.606 22.743-40.946 31.14Zm-10.514 20.834c2.562 12.94 2.927 24.64 1.23 33.787c-1.524 8.219-4.59 13.698-8.382 15.893c-8.067 4.67-25.32-1.4-43.927-17.412a156.726 156.726 0 0 1-6.437-5.87c7.214-7.889 14.423-17.06 21.459-27.246c12.376-1.098 24.068-2.894 34.671-5.345a134.17 134.17 0 0 1 1.386 6.193ZM87.276 214.515c-7.882 2.783-14.16 2.863-17.955.675c-8.075-4.657-11.432-22.636-6.853-46.752a156.923 156.923 0 0 1 1.869-8.499c10.486 2.32 22.093 3.988 34.498 4.994c7.084 9.967 14.501 19.128 21.976 27.15a134.668 134.668 0 0 1-4.877 4.492c-9.933 8.682-19.886 14.842-28.658 17.94ZM50.35 144.747c-12.483-4.267-22.792-9.812-29.858-15.863c-6.35-5.437-9.555-10.836-9.555-15.216c0-9.322 13.897-21.212 37.076-29.293c2.813-.98 5.757-1.905 8.812-2.773c3.204 10.42 7.406 21.315 12.477 32.332c-5.137 11.18-9.399 22.249-12.634 32.792a134.718 134.718 0 0 1-6.318-1.979Zm12.378-84.26c-4.811-24.587-1.616-43.134 6.425-47.789c8.564-4.958 27.502 2.111 47.463 19.835a144.318 144.318 0 0 1 3.841 3.545c-7.438 7.987-14.787 17.08-21.808 26.988c-12.04 1.116-23.565 2.908-34.161 5.309a160.342 160.342 0 0 1-1.76-7.887Zm110.427 27.268a347.8 347.8 0 0 0-7.785-12.803c8.168 1.033 15.994 2.404 23.343 4.08c-2.206 7.072-4.956 14.465-8.193 22.045a381.151 381.151 0 0 0-7.365-13.322Zm-45.032-43.861c5.044 5.465 10.096 11.566 15.065 18.186a322.04 322.04 0 0 0-30.257-.006c4.974-6.559 10.069-12.652 15.192-18.18ZM82.802 87.83a323.167 323.167 0 0 0-7.227 13.238c-3.184-7.553-5.909-14.98-8.134-22.152c7.304-1.634 15.093-2.97 23.209-3.984a321.524 321.524 0 0 0-7.848 12.897Zm8.081 65.352c-8.385-.936-16.291-2.203-23.593-3.793c2.26-7.3 5.045-14.885 8.298-22.6a321.187 321.187 0 0 0 7.257 13.246c2.594 4.48 5.28 8.868 8.038 13.147Zm37.542 31.03c-5.184-5.592-10.354-11.779-15.403-18.433c4.902.192 9.899.29 14.978.29c5.218 0 10.376-.117 15.453-.343c-4.985 6.774-10.018 12.97-15.028 18.486Zm52.198-57.817c3.422 7.8 6.306 15.345 8.596 22.52c-7.422 1.694-15.436 3.058-23.88 4.071a382.417 382.417 0 0 0 7.859-13.026a347.403 347.403 0 0 0 7.425-13.565Zm-16.898 8.101a358.557 358.557 0 0 1-12.281 19.815a329.4 329.4 0 0 1-23.444.823c-7.967 0-15.716-.248-23.178-.732a310.202 310.202 0 0 1-12.513-19.846h.001a307.41 307.41 0 0 1-10.923-20.627a310.278 310.278 0 0 1 10.89-20.637l-.001.001a307.318 307.318 0 0 1 12.413-19.761c7.613-.576 15.42-.876 23.31-.876H128c7.926 0 15.743.303 23.354.883a329.357 329.357 0 0 1 12.335 19.695a358.489 358.489 0 0 1 11.036 20.54a329.472 329.472 0 0 1-11 20.722Zm22.56-122.124c8.572 4.944 11.906 24.881 6.52 51.026c-.344 1.668-.73 3.367-1.15 5.09c-10.622-2.452-22.155-4.275-34.23-5.408c-7.034-10.017-14.323-19.124-21.64-27.008a160.789 160.789 0 0 1 5.888-5.4c18.9-16.447 36.564-22.941 44.612-18.3ZM128 90.808c12.625 0 22.86 10.235 22.86 22.86s-10.235 22.86-22.86 22.86s-22.86-10.235-22.86-22.86s10.235-22.86 22.86-22.86Z"></path></svg>
|
||||
|
After Width: | Height: | Size: 4.0 KiB |
@@ -0,0 +1,23 @@
|
||||
import type { BingoSquareData } from '../types';
|
||||
import { BingoSquare } from './BingoSquare';
|
||||
|
||||
interface BingoBoardProps {
|
||||
board: BingoSquareData[];
|
||||
winningSquareIds: Set<number>;
|
||||
onSquareClick: (squareId: number) => void;
|
||||
}
|
||||
|
||||
export function BingoBoard({ board, winningSquareIds, onSquareClick }: BingoBoardProps) {
|
||||
return (
|
||||
<div className="grid grid-cols-5 gap-1 w-full max-w-md mx-auto aspect-square">
|
||||
{board.map((square) => (
|
||||
<BingoSquare
|
||||
key={square.id}
|
||||
square={square}
|
||||
isWinning={winningSquareIds.has(square.id)}
|
||||
onClick={() => onSquareClick(square.id)}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,22 @@
|
||||
interface BingoModalProps {
|
||||
onDismiss: () => void;
|
||||
}
|
||||
|
||||
export function BingoModal({ onDismiss }: BingoModalProps) {
|
||||
return (
|
||||
<div className="fixed inset-0 bg-black/50 flex items-center justify-center p-4 z-50">
|
||||
<div className="bg-white rounded-xl p-6 max-w-xs w-full text-center shadow-xl animate-[bounce_0.5s_ease-out]">
|
||||
<div className="text-5xl mb-4">🎉</div>
|
||||
<h2 className="text-3xl font-bold text-amber-500 mb-2">BINGO!</h2>
|
||||
<p className="text-gray-600 mb-6">You completed a line!</p>
|
||||
|
||||
<button
|
||||
onClick={onDismiss}
|
||||
className="w-full bg-accent text-white font-semibold py-3 px-6 rounded-lg active:bg-accent-light transition-colors"
|
||||
>
|
||||
Keep Playing
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,35 @@
|
||||
import type { BingoSquareData } from '../types';
|
||||
|
||||
interface BingoSquareProps {
|
||||
square: BingoSquareData;
|
||||
isWinning: boolean;
|
||||
onClick: () => void;
|
||||
}
|
||||
|
||||
export function BingoSquare({ square, isWinning, onClick }: BingoSquareProps) {
|
||||
const baseClasses =
|
||||
'relative flex items-center justify-center p-1 text-center border border-gray-300 rounded transition-all duration-150 select-none min-h-[60px] text-xs leading-tight';
|
||||
|
||||
const stateClasses = square.isMarked
|
||||
? isWinning
|
||||
? 'bg-amber-200 border-amber-400 text-amber-900'
|
||||
: 'bg-marked border-marked-border text-green-800'
|
||||
: 'bg-white text-gray-700 active:bg-gray-100';
|
||||
|
||||
const freeSpaceClasses = square.isFreeSpace ? 'font-bold text-sm' : '';
|
||||
|
||||
return (
|
||||
<button
|
||||
onClick={onClick}
|
||||
disabled={square.isFreeSpace}
|
||||
className={`${baseClasses} ${stateClasses} ${freeSpaceClasses}`}
|
||||
aria-pressed={square.isMarked}
|
||||
aria-label={square.isFreeSpace ? 'Free space' : square.text}
|
||||
>
|
||||
<span className="wrap-break-word hyphens-auto">{square.text}</span>
|
||||
{square.isMarked && !square.isFreeSpace && (
|
||||
<span className="absolute top-0.5 right-0.5 text-green-600 text-xs">✓</span>
|
||||
)}
|
||||
</button>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,55 @@
|
||||
import type { BingoSquareData } from '../types';
|
||||
import { BingoBoard } from './BingoBoard';
|
||||
|
||||
interface GameScreenProps {
|
||||
board: BingoSquareData[];
|
||||
winningSquareIds: Set<number>;
|
||||
hasBingo: boolean;
|
||||
onSquareClick: (squareId: number) => void;
|
||||
onReset: () => void;
|
||||
}
|
||||
|
||||
export function GameScreen({
|
||||
board,
|
||||
winningSquareIds,
|
||||
hasBingo,
|
||||
onSquareClick,
|
||||
onReset,
|
||||
}: GameScreenProps) {
|
||||
return (
|
||||
<div className="flex flex-col min-h-full bg-gray-50">
|
||||
{/* Header */}
|
||||
<header className="flex items-center justify-between p-3 bg-white border-b border-gray-200">
|
||||
<button
|
||||
onClick={onReset}
|
||||
className="text-gray-500 text-sm px-3 py-1.5 rounded active:bg-gray-100"
|
||||
>
|
||||
← Back
|
||||
</button>
|
||||
<h1 className="font-bold text-gray-900">Bingo Mixer</h1>
|
||||
<div className="w-16"></div>
|
||||
</header>
|
||||
|
||||
{/* Instructions */}
|
||||
<p className="text-center text-gray-500 text-sm py-2 px-4">
|
||||
Tap a square when you find someone who matches it.
|
||||
</p>
|
||||
|
||||
{/* Bingo indicator */}
|
||||
{hasBingo && (
|
||||
<div className="bg-amber-100 text-amber-800 text-center py-2 font-semibold text-sm">
|
||||
🎉 BINGO! You got a line!
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Board */}
|
||||
<div className="flex-1 flex items-center justify-center p-3">
|
||||
<BingoBoard
|
||||
board={board}
|
||||
winningSquareIds={winningSquareIds}
|
||||
onSquareClick={onSquareClick}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,30 @@
|
||||
interface StartScreenProps {
|
||||
onStart: () => void;
|
||||
}
|
||||
|
||||
export function StartScreen({ onStart }: StartScreenProps) {
|
||||
return (
|
||||
<div className="flex flex-col items-center justify-center min-h-full p-6 bg-gray-50">
|
||||
<div className="text-center max-w-sm">
|
||||
<h1 className="text-4xl font-bold text-gray-900 mb-2">Bingo Mixer</h1>
|
||||
<p className="text-lg text-gray-600 mb-8">Find your people!</p>
|
||||
|
||||
<div className="bg-white rounded-lg p-6 shadow-sm border border-gray-200 mb-8">
|
||||
<h2 className="font-semibold text-gray-800 mb-3">How to play</h2>
|
||||
<ul className="text-left text-gray-600 text-sm space-y-2">
|
||||
<li>• Find people who match the questions</li>
|
||||
<li>• Tap a square when you find a match</li>
|
||||
<li>• Get 5 in a row to win!</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<button
|
||||
onClick={onStart}
|
||||
className="w-full bg-accent text-white font-semibold py-4 px-8 rounded-lg text-lg active:bg-accent-light transition-colors"
|
||||
>
|
||||
Start Game
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,28 @@
|
||||
export const questions: string[] = [
|
||||
"bikes to work",
|
||||
"has lived in another country",
|
||||
"has a pet",
|
||||
"prefers tea over coffee",
|
||||
"plays an instrument",
|
||||
"speaks more than 2 languages",
|
||||
"has run a marathon",
|
||||
"was born in a different state",
|
||||
"has met a celebrity",
|
||||
"can juggle",
|
||||
"has been skydiving",
|
||||
"loves cooking",
|
||||
"has a garden",
|
||||
"has traveled to Asia",
|
||||
"is left-handed",
|
||||
"has a twin",
|
||||
"plays video games",
|
||||
"does yoga",
|
||||
"has a hidden talent",
|
||||
"loves spicy food",
|
||||
"has been on TV",
|
||||
"collects something unique",
|
||||
"has read a book this month",
|
||||
"knows sign language",
|
||||
];
|
||||
|
||||
export const FREE_SPACE = "FREE SPACE";
|
||||
@@ -0,0 +1,211 @@
|
||||
import { useState, useCallback, useMemo, useEffect } from 'react';
|
||||
import type { BingoSquareData, BingoLine, GameState } from '../types';
|
||||
import {
|
||||
generateBoard,
|
||||
toggleSquare,
|
||||
checkBingo,
|
||||
getWinningSquareIds,
|
||||
} from '../utils/bingoLogic';
|
||||
|
||||
export interface BingoGameState {
|
||||
gameState: GameState;
|
||||
board: BingoSquareData[];
|
||||
winningLine: BingoLine | null;
|
||||
winningSquareIds: Set<number>;
|
||||
showBingoModal: boolean;
|
||||
}
|
||||
|
||||
export interface BingoGameActions {
|
||||
startGame: () => void;
|
||||
handleSquareClick: (squareId: number) => void;
|
||||
resetGame: () => void;
|
||||
dismissModal: () => void;
|
||||
}
|
||||
|
||||
const STORAGE_KEY = 'bingo-game-state';
|
||||
const STORAGE_VERSION = 1;
|
||||
|
||||
interface StoredGameData {
|
||||
version: number;
|
||||
gameState: GameState;
|
||||
board: BingoSquareData[];
|
||||
winningLine: BingoLine | null;
|
||||
}
|
||||
|
||||
function validateStoredData(data: unknown): data is StoredGameData {
|
||||
if (!data || typeof data !== 'object') {
|
||||
return false;
|
||||
}
|
||||
|
||||
const obj = data as Record<string, unknown>;
|
||||
|
||||
if (obj.version !== STORAGE_VERSION) {
|
||||
return false;
|
||||
}
|
||||
|
||||
if (typeof obj.gameState !== 'string' || !['start', 'playing', 'bingo'].includes(obj.gameState)) {
|
||||
return false;
|
||||
}
|
||||
|
||||
if (!Array.isArray(obj.board) || (obj.board.length !== 0 && obj.board.length !== 25)) {
|
||||
return false;
|
||||
}
|
||||
|
||||
const validSquares = obj.board.every((sq: unknown) => {
|
||||
if (!sq || typeof sq !== 'object') return false;
|
||||
const square = sq as Record<string, unknown>;
|
||||
return (
|
||||
typeof square.id === 'number' &&
|
||||
typeof square.text === 'string' &&
|
||||
typeof square.isMarked === 'boolean' &&
|
||||
typeof square.isFreeSpace === 'boolean'
|
||||
);
|
||||
});
|
||||
|
||||
if (!validSquares) {
|
||||
return false;
|
||||
}
|
||||
|
||||
if (obj.winningLine !== null) {
|
||||
if (typeof obj.winningLine !== 'object') {
|
||||
return false;
|
||||
}
|
||||
const line = obj.winningLine as Record<string, unknown>;
|
||||
if (
|
||||
typeof line.type !== 'string' ||
|
||||
!['row', 'column', 'diagonal'].includes(line.type) ||
|
||||
typeof line.index !== 'number' ||
|
||||
!Array.isArray(line.squares)
|
||||
) {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
return true;
|
||||
}
|
||||
|
||||
function loadGameState(): Pick<BingoGameState, 'gameState' | 'board' | 'winningLine'> | null {
|
||||
// SSR guard
|
||||
if (typeof window === 'undefined') {
|
||||
return null;
|
||||
}
|
||||
|
||||
try {
|
||||
const saved = localStorage.getItem(STORAGE_KEY);
|
||||
if (!saved) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const parsed = JSON.parse(saved);
|
||||
|
||||
if (validateStoredData(parsed)) {
|
||||
return {
|
||||
gameState: parsed.gameState,
|
||||
board: parsed.board,
|
||||
winningLine: parsed.winningLine,
|
||||
};
|
||||
} else {
|
||||
console.warn('Invalid game state data in localStorage, clearing...');
|
||||
localStorage.removeItem(STORAGE_KEY);
|
||||
}
|
||||
} catch (error) {
|
||||
console.warn('Failed to load game state:', error);
|
||||
if (typeof window !== 'undefined') {
|
||||
localStorage.removeItem(STORAGE_KEY);
|
||||
}
|
||||
}
|
||||
|
||||
return null;
|
||||
}
|
||||
|
||||
function saveGameState(gameState: GameState, board: BingoSquareData[], winningLine: BingoLine | null): void {
|
||||
// SSR guard
|
||||
if (typeof window === 'undefined') {
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
const data: StoredGameData = {
|
||||
version: STORAGE_VERSION,
|
||||
gameState,
|
||||
board,
|
||||
winningLine,
|
||||
};
|
||||
localStorage.setItem(STORAGE_KEY, JSON.stringify(data));
|
||||
} catch (error) {
|
||||
console.warn('Failed to save game state:', error);
|
||||
}
|
||||
}
|
||||
|
||||
export function useBingoGame(): BingoGameState & BingoGameActions {
|
||||
const loadedState = useMemo(() => loadGameState(), []);
|
||||
|
||||
const [gameState, setGameState] = useState<GameState>(
|
||||
() => loadedState?.gameState || 'start'
|
||||
);
|
||||
const [board, setBoard] = useState<BingoSquareData[]>(
|
||||
() => loadedState?.board || []
|
||||
);
|
||||
const [winningLine, setWinningLine] = useState<BingoLine | null>(
|
||||
() => loadedState?.winningLine || null
|
||||
);
|
||||
const [showBingoModal, setShowBingoModal] = useState(false);
|
||||
|
||||
const winningSquareIds = useMemo(
|
||||
() => getWinningSquareIds(winningLine),
|
||||
[winningLine]
|
||||
);
|
||||
|
||||
// Save game state to localStorage whenever it changes
|
||||
useEffect(() => {
|
||||
saveGameState(gameState, board, winningLine);
|
||||
}, [gameState, board, winningLine]);
|
||||
|
||||
const startGame = useCallback(() => {
|
||||
setBoard(generateBoard());
|
||||
setWinningLine(null);
|
||||
setGameState('playing');
|
||||
}, []);
|
||||
|
||||
const handleSquareClick = useCallback((squareId: number) => {
|
||||
setBoard((currentBoard) => {
|
||||
const newBoard = toggleSquare(currentBoard, squareId);
|
||||
|
||||
// Check for bingo after toggling
|
||||
const bingo = checkBingo(newBoard);
|
||||
if (bingo && !winningLine) {
|
||||
// Schedule state updates to avoid synchronous setState in effect
|
||||
queueMicrotask(() => {
|
||||
setWinningLine(bingo);
|
||||
setGameState('bingo');
|
||||
setShowBingoModal(true);
|
||||
});
|
||||
}
|
||||
|
||||
return newBoard;
|
||||
});
|
||||
}, [winningLine]);
|
||||
|
||||
const resetGame = useCallback(() => {
|
||||
setGameState('start');
|
||||
setBoard([]);
|
||||
setWinningLine(null);
|
||||
setShowBingoModal(false);
|
||||
}, []);
|
||||
|
||||
const dismissModal = useCallback(() => {
|
||||
setShowBingoModal(false);
|
||||
}, []);
|
||||
|
||||
return {
|
||||
gameState,
|
||||
board,
|
||||
winningLine,
|
||||
winningSquareIds,
|
||||
showBingoModal,
|
||||
startGame,
|
||||
handleSquareClick,
|
||||
resetGame,
|
||||
dismissModal,
|
||||
};
|
||||
}
|
||||
@@ -0,0 +1,21 @@
|
||||
@import 'tailwindcss';
|
||||
|
||||
@theme {
|
||||
--color-accent: #2563eb;
|
||||
--color-accent-light: #3b82f6;
|
||||
--color-marked: #dcfce7;
|
||||
--color-marked-border: #22c55e;
|
||||
--color-bingo: #fbbf24;
|
||||
}
|
||||
|
||||
html,
|
||||
body,
|
||||
#root {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
font-family: system-ui, -apple-system, sans-serif;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
}
|
||||
@@ -0,0 +1,10 @@
|
||||
import { StrictMode } from 'react'
|
||||
import { createRoot } from 'react-dom/client'
|
||||
import './index.css'
|
||||
import App from './App.tsx'
|
||||
|
||||
createRoot(document.getElementById('root')!).render(
|
||||
<StrictMode>
|
||||
<App />
|
||||
</StrictMode>,
|
||||
)
|
||||
@@ -0,0 +1,9 @@
|
||||
import * as matchers from '@testing-library/jest-dom/matchers';
|
||||
import { expect, afterEach } from 'vitest';
|
||||
import { cleanup } from '@testing-library/react';
|
||||
|
||||
expect.extend(matchers);
|
||||
|
||||
afterEach(() => {
|
||||
cleanup();
|
||||
});
|
||||
@@ -0,0 +1,16 @@
|
||||
/** Domain types for the Bingo game */
|
||||
|
||||
export interface BingoSquareData {
|
||||
id: number;
|
||||
text: string;
|
||||
isMarked: boolean;
|
||||
isFreeSpace: boolean;
|
||||
}
|
||||
|
||||
export interface BingoLine {
|
||||
type: 'row' | 'column' | 'diagonal' | 'corners';
|
||||
index: number;
|
||||
squares: number[];
|
||||
}
|
||||
|
||||
export type GameState = 'start' | 'playing' | 'bingo';
|
||||
@@ -0,0 +1,401 @@
|
||||
import { describe, it, expect, beforeEach, vi } from 'vitest';
|
||||
import {
|
||||
generateBoard,
|
||||
toggleSquare,
|
||||
checkBingo,
|
||||
getWinningSquareIds,
|
||||
type BingoSquareData,
|
||||
} from './bingoLogic';
|
||||
import { questions, FREE_SPACE } from '../data/questions';
|
||||
|
||||
describe('bingoLogic', () => {
|
||||
describe('generateBoard', () => {
|
||||
it('should generate a board with 25 squares', () => {
|
||||
const board = generateBoard();
|
||||
expect(board).toHaveLength(25);
|
||||
});
|
||||
|
||||
it('should have a free space in the center (index 12)', () => {
|
||||
const board = generateBoard();
|
||||
expect(board[12].isFreeSpace).toBe(true);
|
||||
expect(board[12].isMarked).toBe(true);
|
||||
});
|
||||
|
||||
it('should have unique IDs from 0 to 24', () => {
|
||||
const board = generateBoard();
|
||||
const ids = board.map((square) => square.id);
|
||||
expect(ids).toEqual(Array.from({ length: 25 }, (_, i) => i));
|
||||
});
|
||||
|
||||
it('should have 24 non-free spaces', () => {
|
||||
const board = generateBoard();
|
||||
const nonFreeSpaces = board.filter((square) => !square.isFreeSpace);
|
||||
expect(nonFreeSpaces).toHaveLength(24);
|
||||
});
|
||||
|
||||
it('should have all non-free spaces unmarked initially', () => {
|
||||
const board = generateBoard();
|
||||
const nonFreeSpaces = board.filter((square) => !square.isFreeSpace);
|
||||
nonFreeSpaces.forEach((square) => {
|
||||
expect(square.isMarked).toBe(false);
|
||||
});
|
||||
});
|
||||
|
||||
it('should have the FREE_SPACE text in the center', () => {
|
||||
const board = generateBoard();
|
||||
expect(board[12].text).toBe(FREE_SPACE);
|
||||
});
|
||||
|
||||
it('should have unique question texts across non-free squares', () => {
|
||||
const board = generateBoard();
|
||||
const texts = board.filter((s) => !s.isFreeSpace).map((s) => s.text);
|
||||
expect(new Set(texts).size).toBe(texts.length);
|
||||
});
|
||||
|
||||
it('should only have text from the questions pool', () => {
|
||||
const board = generateBoard();
|
||||
const texts = board.filter((s) => !s.isFreeSpace).map((s) => s.text);
|
||||
texts.forEach((text) => {
|
||||
expect(questions).toContain(text);
|
||||
});
|
||||
});
|
||||
|
||||
it('should randomize question order between boards', () => {
|
||||
// Mock Math.random to make it deterministic for first call
|
||||
const originalRandom = Math.random;
|
||||
let callCount = 0;
|
||||
vi.spyOn(Math, 'random').mockImplementation(() => {
|
||||
callCount++;
|
||||
return callCount / 100;
|
||||
});
|
||||
|
||||
const board1 = generateBoard();
|
||||
|
||||
// Reset counter for second board
|
||||
callCount = 0;
|
||||
const board2 = generateBoard();
|
||||
|
||||
Math.random = originalRandom;
|
||||
|
||||
// Boards should have different order (very unlikely to be the same with randomization)
|
||||
const texts1 = board1.filter((s) => !s.isFreeSpace).map((s) => s.text);
|
||||
const texts2 = board2.filter((s) => !s.isFreeSpace).map((s) => s.text);
|
||||
|
||||
// At least verify structure is correct
|
||||
expect(texts1).toHaveLength(24);
|
||||
expect(texts2).toHaveLength(24);
|
||||
});
|
||||
});
|
||||
|
||||
describe('toggleSquare', () => {
|
||||
let mockBoard: BingoSquareData[];
|
||||
|
||||
beforeEach(() => {
|
||||
mockBoard = [
|
||||
{ id: 0, text: 'Q1', isMarked: false, isFreeSpace: false },
|
||||
{ id: 1, text: 'Q2', isMarked: true, isFreeSpace: false },
|
||||
{ id: 2, text: 'Free', isMarked: true, isFreeSpace: true },
|
||||
];
|
||||
});
|
||||
|
||||
it('should toggle unmarked square to marked', () => {
|
||||
const newBoard = toggleSquare(mockBoard, 0);
|
||||
expect(newBoard[0].isMarked).toBe(true);
|
||||
});
|
||||
|
||||
it('should toggle marked square to unmarked', () => {
|
||||
const newBoard = toggleSquare(mockBoard, 1);
|
||||
expect(newBoard[1].isMarked).toBe(false);
|
||||
});
|
||||
|
||||
it('should not modify free space', () => {
|
||||
const newBoard = toggleSquare(mockBoard, 2);
|
||||
expect(newBoard[2].isMarked).toBe(true);
|
||||
});
|
||||
|
||||
it('should return a new array', () => {
|
||||
const newBoard = toggleSquare(mockBoard, 0);
|
||||
expect(newBoard).not.toBe(mockBoard);
|
||||
});
|
||||
|
||||
it('should not modify other squares', () => {
|
||||
const newBoard = toggleSquare(mockBoard, 0);
|
||||
expect(newBoard[1].isMarked).toBe(mockBoard[1].isMarked);
|
||||
expect(newBoard[2].isMarked).toBe(mockBoard[2].isMarked);
|
||||
});
|
||||
|
||||
it('should create a new object for the toggled square (immutability)', () => {
|
||||
const newBoard = toggleSquare(mockBoard, 0);
|
||||
expect(newBoard[0]).not.toBe(mockBoard[0]);
|
||||
});
|
||||
|
||||
it('should not create new objects for untouched squares', () => {
|
||||
const newBoard = toggleSquare(mockBoard, 0);
|
||||
expect(newBoard[1]).toBe(mockBoard[1]);
|
||||
expect(newBoard[2]).toBe(mockBoard[2]);
|
||||
});
|
||||
|
||||
it('should not change anything for a non-existent square ID', () => {
|
||||
const newBoard = toggleSquare(mockBoard, 999);
|
||||
expect(newBoard.map((s) => s.isMarked)).toEqual(mockBoard.map((s) => s.isMarked));
|
||||
});
|
||||
|
||||
it('should support toggling the same square back and forth', () => {
|
||||
const toggled = toggleSquare(mockBoard, 0);
|
||||
expect(toggled[0].isMarked).toBe(true);
|
||||
const toggledBack = toggleSquare(toggled, 0);
|
||||
expect(toggledBack[0].isMarked).toBe(false);
|
||||
});
|
||||
});
|
||||
|
||||
describe('checkBingo', () => {
|
||||
it('should return null for board without enough squares', () => {
|
||||
const board = generateBoard();
|
||||
// Clear some squares to test edge case
|
||||
expect(checkBingo(board)).toBeNull();
|
||||
});
|
||||
|
||||
it('should return null when no lines are complete', () => {
|
||||
const board = generateBoard();
|
||||
expect(checkBingo(board)).toBeNull();
|
||||
});
|
||||
|
||||
it('should detect a complete row', () => {
|
||||
const board = generateBoard();
|
||||
// Mark first row (indices 0-4)
|
||||
for (let i = 0; i < 5; i++) {
|
||||
board[i].isMarked = true;
|
||||
}
|
||||
const result = checkBingo(board);
|
||||
expect(result).not.toBeNull();
|
||||
expect(result?.type).toBe('row');
|
||||
expect(result?.index).toBe(0);
|
||||
});
|
||||
|
||||
it('should detect a complete column', () => {
|
||||
const board = generateBoard();
|
||||
// Mark first column (indices 0, 5, 10, 15, 20)
|
||||
for (let i = 0; i < 5; i++) {
|
||||
board[i * 5].isMarked = true;
|
||||
}
|
||||
const result = checkBingo(board);
|
||||
expect(result).not.toBeNull();
|
||||
expect(result?.type).toBe('column');
|
||||
expect(result?.index).toBe(0);
|
||||
});
|
||||
|
||||
it('should detect a complete diagonal (top-left to bottom-right)', () => {
|
||||
const board = generateBoard();
|
||||
// Mark diagonal (indices 0, 6, 12, 18, 24)
|
||||
// Note: 12 is already marked as free space
|
||||
[0, 6, 12, 18, 24].forEach((i) => {
|
||||
board[i].isMarked = true;
|
||||
});
|
||||
const result = checkBingo(board);
|
||||
expect(result).not.toBeNull();
|
||||
expect(result?.type).toBe('diagonal');
|
||||
});
|
||||
|
||||
it('should detect a complete diagonal (top-right to bottom-left)', () => {
|
||||
const board = generateBoard();
|
||||
// Mark diagonal (indices 4, 8, 12, 16, 20)
|
||||
[4, 8, 12, 16, 20].forEach((i) => {
|
||||
board[i].isMarked = true;
|
||||
});
|
||||
const result = checkBingo(board);
|
||||
expect(result).not.toBeNull();
|
||||
expect(result?.type).toBe('diagonal');
|
||||
});
|
||||
|
||||
it('should work with free space in center', () => {
|
||||
const board = generateBoard();
|
||||
[10, 11, 12, 13, 14].forEach((i) => {
|
||||
board[i].isMarked = true;
|
||||
});
|
||||
const result = checkBingo(board);
|
||||
expect(result).not.toBeNull();
|
||||
expect(result?.type).toBe('row');
|
||||
expect(result?.index).toBe(2);
|
||||
});
|
||||
|
||||
it('should detect all 5 rows', () => {
|
||||
for (let row = 0; row < 5; row++) {
|
||||
const board = generateBoard();
|
||||
for (let col = 0; col < 5; col++) {
|
||||
board[row * 5 + col].isMarked = true;
|
||||
}
|
||||
const result = checkBingo(board);
|
||||
expect(result).not.toBeNull();
|
||||
expect(result?.type).toBe('row');
|
||||
expect(result?.index).toBe(row);
|
||||
}
|
||||
});
|
||||
|
||||
it('should detect all 5 columns', () => {
|
||||
for (let col = 0; col < 5; col++) {
|
||||
const board = generateBoard();
|
||||
for (let row = 0; row < 5; row++) {
|
||||
board[row * 5 + col].isMarked = true;
|
||||
}
|
||||
const result = checkBingo(board);
|
||||
expect(result).not.toBeNull();
|
||||
expect(result?.type).toBe('column');
|
||||
expect(result?.index).toBe(col);
|
||||
}
|
||||
});
|
||||
|
||||
it('should return null when only 4 of 5 in a row are marked', () => {
|
||||
const board = generateBoard();
|
||||
[0, 1, 2, 3].forEach((i) => {
|
||||
board[i].isMarked = true;
|
||||
});
|
||||
expect(checkBingo(board)).toBeNull();
|
||||
});
|
||||
|
||||
it('should return null when only 4 of 5 in a column are marked', () => {
|
||||
const board = generateBoard();
|
||||
[0, 5, 10, 15].forEach((i) => {
|
||||
board[i].isMarked = true;
|
||||
});
|
||||
expect(checkBingo(board)).toBeNull();
|
||||
});
|
||||
|
||||
it('should return null when only 4 of 5 in a diagonal are marked', () => {
|
||||
const board = generateBoard();
|
||||
[0, 6, 12, 18].forEach((i) => {
|
||||
board[i].isMarked = true;
|
||||
});
|
||||
expect(checkBingo(board)).toBeNull();
|
||||
});
|
||||
|
||||
it('should return the first winning line when multiple exist', () => {
|
||||
const board = generateBoard();
|
||||
[0, 1, 2, 3, 4, 5, 10, 15, 20].forEach((i) => {
|
||||
board[i].isMarked = true;
|
||||
});
|
||||
const result = checkBingo(board);
|
||||
expect(result).not.toBeNull();
|
||||
expect(result?.type).toBe('row');
|
||||
expect(result?.index).toBe(0);
|
||||
});
|
||||
|
||||
it('should detect bingo on a fully marked board', () => {
|
||||
const board = generateBoard();
|
||||
board.forEach((square) => {
|
||||
square.isMarked = true;
|
||||
});
|
||||
const result = checkBingo(board);
|
||||
expect(result).not.toBeNull();
|
||||
});
|
||||
|
||||
it('should return the correct squares array for a winning line', () => {
|
||||
const board = generateBoard();
|
||||
[0, 1, 2, 3, 4].forEach((i) => {
|
||||
board[i].isMarked = true;
|
||||
});
|
||||
const result = checkBingo(board);
|
||||
expect(result?.squares).toEqual([0, 1, 2, 3, 4]);
|
||||
});
|
||||
|
||||
it('should not count scattered marks as a bingo', () => {
|
||||
const board = generateBoard();
|
||||
[0, 6, 2, 8, 20].forEach((i) => {
|
||||
board[i].isMarked = true;
|
||||
});
|
||||
expect(checkBingo(board)).toBeNull();
|
||||
});
|
||||
});
|
||||
|
||||
describe('getWinningSquareIds', () => {
|
||||
it('should return empty set when no winning line', () => {
|
||||
const result = getWinningSquareIds(null);
|
||||
expect(result).toBeInstanceOf(Set);
|
||||
expect(result.size).toBe(0);
|
||||
});
|
||||
|
||||
it('should return square IDs from winning line', () => {
|
||||
const winningLine = {
|
||||
type: 'row' as const,
|
||||
index: 0,
|
||||
squares: [0, 1, 2, 3, 4],
|
||||
};
|
||||
const result = getWinningSquareIds(winningLine);
|
||||
expect(result).toBeInstanceOf(Set);
|
||||
expect(result.size).toBe(5);
|
||||
expect(result.has(0)).toBe(true);
|
||||
expect(result.has(1)).toBe(true);
|
||||
expect(result.has(2)).toBe(true);
|
||||
expect(result.has(3)).toBe(true);
|
||||
expect(result.has(4)).toBe(true);
|
||||
});
|
||||
|
||||
it('should handle diagonal winning line', () => {
|
||||
const winningLine = {
|
||||
type: 'diagonal' as const,
|
||||
index: 0,
|
||||
squares: [0, 6, 12, 18, 24],
|
||||
};
|
||||
const result = getWinningSquareIds(winningLine);
|
||||
expect(result.size).toBe(5);
|
||||
expect(result.has(0)).toBe(true);
|
||||
expect(result.has(6)).toBe(true);
|
||||
expect(result.has(12)).toBe(true);
|
||||
expect(result.has(18)).toBe(true);
|
||||
expect(result.has(24)).toBe(true);
|
||||
});
|
||||
|
||||
it('should handle column winning line', () => {
|
||||
const winningLine = {
|
||||
type: 'column' as const,
|
||||
index: 2,
|
||||
squares: [2, 7, 12, 17, 22],
|
||||
};
|
||||
const result = getWinningSquareIds(winningLine);
|
||||
expect(result.size).toBe(5);
|
||||
[2, 7, 12, 17, 22].forEach((id) => {
|
||||
expect(result.has(id)).toBe(true);
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
describe('integration: generateBoard + toggleSquare + checkBingo', () => {
|
||||
it('should detect bingo after toggling an entire row', () => {
|
||||
const board = generateBoard();
|
||||
let current = board;
|
||||
[0, 1, 2, 3, 4].forEach((i) => {
|
||||
if (!current[i].isMarked) {
|
||||
current = toggleSquare(current, i);
|
||||
}
|
||||
});
|
||||
expect(checkBingo(current)).not.toBeNull();
|
||||
});
|
||||
|
||||
it('should lose bingo after untoggling a square from a winning line', () => {
|
||||
const board = generateBoard();
|
||||
let current = board;
|
||||
[0, 1, 2, 3, 4].forEach((i) => {
|
||||
if (!current[i].isMarked) {
|
||||
current = toggleSquare(current, i);
|
||||
}
|
||||
});
|
||||
expect(checkBingo(current)).not.toBeNull();
|
||||
current = toggleSquare(current, 0);
|
||||
expect(checkBingo(current)).toBeNull();
|
||||
});
|
||||
|
||||
it('should report correct winning square IDs from a detected bingo', () => {
|
||||
const board = generateBoard();
|
||||
let current = board;
|
||||
const lastRowIds = [20, 21, 22, 23, 24];
|
||||
lastRowIds.forEach((i) => {
|
||||
if (!current[i].isMarked) {
|
||||
current = toggleSquare(current, i);
|
||||
}
|
||||
});
|
||||
const line = checkBingo(current);
|
||||
expect(line).not.toBeNull();
|
||||
const ids = getWinningSquareIds(line);
|
||||
expect(ids).toEqual(new Set(lastRowIds));
|
||||
});
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,126 @@
|
||||
import { questions, FREE_SPACE } from '../data/questions';
|
||||
import type { BingoSquareData, BingoLine } from '../types';
|
||||
|
||||
// Re-export types for convenience
|
||||
export type { BingoSquareData, BingoLine } from '../types';
|
||||
|
||||
const BOARD_SIZE = 5;
|
||||
const CENTER_INDEX = 12; // 5x5 grid, center is index 12 (row 2, col 2)
|
||||
|
||||
/**
|
||||
* Shuffle an array using Fisher-Yates algorithm
|
||||
*/
|
||||
function shuffleArray<T>(array: T[]): T[] {
|
||||
const shuffled = [...array];
|
||||
for (let i = shuffled.length - 1; i > 0; i--) {
|
||||
const j = Math.floor(Math.random() * (i + 1));
|
||||
[shuffled[i], shuffled[j]] = [shuffled[j], shuffled[i]];
|
||||
}
|
||||
return shuffled;
|
||||
}
|
||||
|
||||
/**
|
||||
* Generate a new 5x5 bingo board
|
||||
*/
|
||||
export function generateBoard(): BingoSquareData[] {
|
||||
const shuffledQuestions = shuffleArray(questions).slice(0, 24);
|
||||
const board: BingoSquareData[] = [];
|
||||
|
||||
let questionIndex = 0;
|
||||
for (let i = 0; i < 25; i++) {
|
||||
if (i === CENTER_INDEX) {
|
||||
board.push({
|
||||
id: i,
|
||||
text: FREE_SPACE,
|
||||
isMarked: true,
|
||||
isFreeSpace: true,
|
||||
});
|
||||
} else {
|
||||
board.push({
|
||||
id: i,
|
||||
text: shuffledQuestions[questionIndex],
|
||||
isMarked: false,
|
||||
isFreeSpace: false,
|
||||
});
|
||||
questionIndex++;
|
||||
}
|
||||
}
|
||||
|
||||
return board;
|
||||
}
|
||||
|
||||
/**
|
||||
* Toggle a square's marked state
|
||||
*/
|
||||
export function toggleSquare(board: BingoSquareData[], squareId: number): BingoSquareData[] {
|
||||
return board.map((square) =>
|
||||
square.id === squareId && !square.isFreeSpace
|
||||
? { ...square, isMarked: !square.isMarked }
|
||||
: square
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* Get all possible winning lines
|
||||
*/
|
||||
function getWinningLines(): BingoLine[] {
|
||||
const lines: BingoLine[] = [];
|
||||
|
||||
// Rows
|
||||
for (let row = 0; row < BOARD_SIZE; row++) {
|
||||
const squares = [];
|
||||
for (let col = 0; col < BOARD_SIZE; col++) {
|
||||
squares.push(row * BOARD_SIZE + col);
|
||||
}
|
||||
lines.push({ type: 'row', index: row, squares });
|
||||
}
|
||||
|
||||
// Columns
|
||||
for (let col = 0; col < BOARD_SIZE; col++) {
|
||||
const squares = [];
|
||||
for (let row = 0; row < BOARD_SIZE; row++) {
|
||||
squares.push(row * BOARD_SIZE + col);
|
||||
}
|
||||
lines.push({ type: 'column', index: col, squares });
|
||||
}
|
||||
|
||||
// Diagonal (top-left to bottom-right)
|
||||
lines.push({
|
||||
type: 'diagonal',
|
||||
index: 0,
|
||||
squares: [0, 6, 12, 18, 24],
|
||||
});
|
||||
|
||||
// Diagonal (top-right to bottom-left)
|
||||
lines.push({
|
||||
type: 'diagonal',
|
||||
index: 1,
|
||||
squares: [4, 8, 12, 16, 20],
|
||||
});
|
||||
|
||||
return lines;
|
||||
}
|
||||
|
||||
/**
|
||||
* Check if there's a bingo and return the winning line(s)
|
||||
*/
|
||||
export function checkBingo(board: BingoSquareData[]): BingoLine | null {
|
||||
const lines = getWinningLines();
|
||||
|
||||
for (const line of lines) {
|
||||
const isComplete = line.squares.every((idx) => board[idx].isMarked);
|
||||
if (isComplete) {
|
||||
return line;
|
||||
}
|
||||
}
|
||||
|
||||
return null;
|
||||
}
|
||||
|
||||
/**
|
||||
* Get the square IDs that are part of a winning line
|
||||
*/
|
||||
export function getWinningSquareIds(line: BingoLine | null): Set<number> {
|
||||
if (!line) return new Set();
|
||||
return new Set(line.squares);
|
||||
}
|
||||
Reference in New Issue
Block a user