jory/personal_website
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Changes

Browse Source
This commit is contained in:
gpt-engineer-app[bot]
2026-01-03 00:50:06 +00:00
parent 1a6227bf48
commit 75946c9feb
6 changed files with 795 additions and 557 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/pages/Tetris.tsx
+421 -65
View File
@@ -4,7 +4,7 @@ import { useSettings } from '@/contexts/SettingsContext';
import { useAchievements } from '@/contexts/AchievementsContext';
import { Link } from 'react-router-dom';
import GlitchCrash from '@/components/GlitchCrash';
import { Maximize2, Minimize2 } from 'lucide-react';
import { Maximize2, Minimize2, Users, User } from 'lucide-react';
import { useBrowserFullscreen } from '@/hooks/useGameDimensions';
import GameTouchButton from '@/components/GameTouchButton';
import { MobileControlsDock, MobileControlsSpacer } from '@/components/MobileControlsDock';
@@ -16,6 +16,7 @@ const HIGHSCORE_KEY = 'tetris-highscore';
const MAX_SCORE = 4294967296;
type Board = (string | null)[][];
type GameMode = '1p' | '2p';
const TETROMINOS = {
I: { shape: [[1, 1, 1, 1]], color: 'hsl(var(--primary))' },
@@ -27,6 +28,16 @@ const TETROMINOS = {
L: { shape: [[0, 0, 1], [1, 1, 1]], color: 'hsl(var(--primary))' },
};
const TETROMINOS_P2 = {
I: { shape: [[1, 1, 1, 1]], color: 'hsl(280 70% 50%)' },
O: { shape: [[1, 1], [1, 1]], color: 'hsl(280 70% 50%)' },
T: { shape: [[0, 1, 0], [1, 1, 1]], color: 'hsl(280 70% 50%)' },
S: { shape: [[0, 1, 1], [1, 1, 0]], color: 'hsl(280 70% 50%)' },
Z: { shape: [[1, 1, 0], [0, 1, 1]], color: 'hsl(280 70% 50%)' },
J: { shape: [[1, 0, 0], [1, 1, 1]], color: 'hsl(280 70% 50%)' },
L: { shape: [[0, 0, 1], [1, 1, 1]], color: 'hsl(280 70% 50%)' },
};
type TetrominoKey = keyof typeof TETROMINOS;
interface Piece {
@@ -36,12 +47,21 @@ interface Piece {
y: number;
}
interface PlayerState {
board: Board;
piece: Piece;
nextPiece: Piece;
score: number;
lines: number;
gameOver: boolean;
}
const createBoard = (): Board => Array.from({ length: BOARD_HEIGHT }, () => Array(BOARD_WIDTH).fill(null));
const randomTetromino = (): Piece => {
const randomTetromino = (isP2 = false): Piece => {
const keys = Object.keys(TETROMINOS) as TetrominoKey[];
const key = keys[Math.floor(Math.random() * keys.length)];
const tetromino = TETROMINOS[key];
const tetromino = isP2 ? TETROMINOS_P2[key] : TETROMINOS[key];
return { shape: tetromino.shape, color: tetromino.color, x: Math.floor(BOARD_WIDTH / 2) - Math.floor(tetromino.shape[0].length / 2), y: 0 };
};
@@ -60,12 +80,38 @@ const rotate = (matrix: number[][]): number[][] => {
const Tetris = () => {
const { playSound } = useSettings();
const { checkGameScoreAchievements, unlockMaxScore } = useAchievements();
// Mode selection
const [gameMode, setGameMode] = useState<GameMode | null>(null);
// 1P state
const [board, setBoard] = useState<Board>(createBoard);
const [piece, setPiece] = useState<Piece>(randomTetromino);
const [nextPiece, setNextPiece] = useState<Piece>(randomTetromino);
const [score, setScore] = useState(0);
const [highScore, setHighScore] = useState(0);
const [lines, setLines] = useState(0);
// 2P state
const [player1, setPlayer1] = useState<PlayerState>({
board: createBoard(),
piece: randomTetromino(),
nextPiece: randomTetromino(),
score: 0,
lines: 0,
gameOver: false,
});
const [player2, setPlayer2] = useState<PlayerState>({
board: createBoard(),
piece: randomTetromino(true),
nextPiece: randomTetromino(true),
score: 0,
lines: 0,
gameOver: false,
});
const [winner, setWinner] = useState<string | null>(null);
// Common state
const [gameOver, setGameOver] = useState(false);
const [gameComplete, setGameComplete] = useState(false);
const [isPaused, setIsPaused] = useState(false);
@@ -80,12 +126,14 @@ const Tetris = () => {
const isMobile = window.innerWidth < 768;
if (isMobile) {
const maxWidth = window.innerWidth - 40;
// Reserve space for header + fixed controls dock on mobile
const maxHeight = window.innerHeight - 440;
return Math.min(Math.floor(maxWidth / BOARD_WIDTH), Math.floor(maxHeight / BOARD_HEIGHT), 22);
}
if (gameMode === '2p') {
return isFullscreen ? 22 : 18;
}
return isFullscreen ? 30 : 24;
}, [isFullscreen]);
}, [isFullscreen, gameMode]);
const [cellSize, setCellSize] = useState(getCellSize);
const isMobile = typeof window !== 'undefined' && window.innerWidth < 768;
@@ -98,7 +146,7 @@ const Tetris = () => {
useEffect(() => {
setCellSize(getCellSize());
}, [isFullscreen, getCellSize]);
}, [isFullscreen, getCellSize, gameMode]);
useEffect(() => {
if (gameStarted && isMobile && !isFullscreen) {
@@ -126,13 +174,12 @@ const Tetris = () => {
if (saved) setHighScore(Math.min(parseInt(saved, 10), MAX_SCORE));
}, []);
// Check score achievements
useEffect(() => {
if (score > 0) {
if (score > 0 && gameMode === '1p') {
checkGameScoreAchievements('tetris', score);
if (score >= MAX_SCORE) unlockMaxScore();
}
}, [score, checkGameScoreAchievements, unlockMaxScore]);
}, [score, checkGameScoreAchievements, unlockMaxScore, gameMode]);
const isValidMove = useCallback((newPiece: Piece, currentBoard: Board): boolean => {
for (let y = 0; y < newPiece.shape.length; y++) {
@@ -169,8 +216,9 @@ const Tetris = () => {
return { board: newBoard, cleared };
}, []);
// 1P movement functions
const moveDown = useCallback(() => {
if (gameOver || gameComplete || isPaused || !gameStarted) return;
if (gameOver || gameComplete || isPaused || !gameStarted || gameMode !== '1p') return;
const newPiece = { ...piece, y: piece.y + 1 };
if (isValidMove(newPiece, board)) {
setPiece(newPiece);
@@ -193,41 +241,64 @@ const Tetris = () => {
if (!isValidMove(newTetromino, clearedBoard)) { setGameOver(true); playSound('error'); }
else { setPiece(newTetromino); }
}
}, [piece, board, gameOver, gameComplete, isPaused, gameStarted, isValidMove, mergePiece, clearLines, playSound, highScore, nextPiece]);
}, [piece, board, gameOver, gameComplete, isPaused, gameStarted, isValidMove, mergePiece, clearLines, playSound, highScore, nextPiece, gameMode]);
const moveLeft = useCallback(() => {
if (gameOver || gameComplete || isPaused || !gameStarted) return;
if (gameOver || gameComplete || isPaused || !gameStarted || gameMode !== '1p') return;
const newPiece = { ...piece, x: piece.x - 1 };
if (isValidMove(newPiece, board)) { setPiece(newPiece); playSound('hover'); }
}, [piece, board, gameOver, gameComplete, isPaused, gameStarted, isValidMove, playSound]);
}, [piece, board, gameOver, gameComplete, isPaused, gameStarted, isValidMove, playSound, gameMode]);
const moveRight = useCallback(() => {
if (gameOver || gameComplete || isPaused || !gameStarted) return;
if (gameOver || gameComplete || isPaused || !gameStarted || gameMode !== '1p') return;
const newPiece = { ...piece, x: piece.x + 1 };
if (isValidMove(newPiece, board)) { setPiece(newPiece); playSound('hover'); }
}, [piece, board, gameOver, gameComplete, isPaused, gameStarted, isValidMove, playSound]);
}, [piece, board, gameOver, gameComplete, isPaused, gameStarted, isValidMove, playSound, gameMode]);
const rotatePiece = useCallback(() => {
if (gameOver || gameComplete || isPaused || !gameStarted) return;
if (gameOver || gameComplete || isPaused || !gameStarted || gameMode !== '1p') return;
const rotatedShape = rotate(piece.shape);
const newPiece = { ...piece, shape: rotatedShape };
if (isValidMove(newPiece, board)) { setPiece(newPiece); playSound('hover'); }
}, [piece, board, gameOver, gameComplete, isPaused, gameStarted, isValidMove, playSound]);
}, [piece, board, gameOver, gameComplete, isPaused, gameStarted, isValidMove, playSound, gameMode]);
const hardDrop = useCallback(() => {
if (gameOver || gameComplete || isPaused || !gameStarted) return;
if (gameOver || gameComplete || isPaused || !gameStarted || gameMode !== '1p') return;
let newPiece = { ...piece };
while (isValidMove({ ...newPiece, y: newPiece.y + 1 }, board)) newPiece.y++;
setPiece(newPiece);
playSound('click');
}, [piece, board, gameOver, gameComplete, isPaused, gameStarted, isValidMove, playSound]);
}, [piece, board, gameOver, gameComplete, isPaused, gameStarted, isValidMove, playSound, gameMode]);
const startGame = () => {
setBoard(createBoard());
setPiece(randomTetromino());
setNextPiece(randomTetromino());
setScore(0);
setLines(0);
const startGame = (mode: GameMode) => {
setGameMode(mode);
if (mode === '1p') {
setBoard(createBoard());
setPiece(randomTetromino());
setNextPiece(randomTetromino());
setScore(0);
setLines(0);
} else {
setPlayer1({
board: createBoard(),
piece: randomTetromino(),
nextPiece: randomTetromino(),
score: 0,
lines: 0,
gameOver: false,
});
setPlayer2({
board: createBoard(),
piece: randomTetromino(true),
nextPiece: randomTetromino(true),
score: 0,
lines: 0,
gameOver: false,
});
setWinner(null);
}
setGameOver(false);
setGameComplete(false);
setIsPaused(false);
@@ -242,29 +313,148 @@ const Tetris = () => {
playSound('click');
};
// 2P movement helpers
const movePlayer = useCallback((playerNum: 1 | 2, action: 'left' | 'right' | 'down' | 'rotate' | 'drop') => {
if (gameOver || isPaused || !gameStarted || gameMode !== '2p') return;
const setPlayer = playerNum === 1 ? setPlayer1 : setPlayer2;
const player = playerNum === 1 ? player1 : player2;
const isP2 = playerNum === 2;
if (player.gameOver) return;
setPlayer(prev => {
let newPiece = { ...prev.piece };
switch (action) {
case 'left':
newPiece.x--;
if (!isValidMove(newPiece, prev.board)) return prev;
playSound('hover');
return { ...prev, piece: newPiece };
case 'right':
newPiece.x++;
if (!isValidMove(newPiece, prev.board)) return prev;
playSound('hover');
return { ...prev, piece: newPiece };
case 'rotate':
newPiece.shape = rotate(prev.piece.shape);
if (!isValidMove(newPiece, prev.board)) return prev;
playSound('hover');
return { ...prev, piece: newPiece };
case 'drop':
while (isValidMove({ ...newPiece, y: newPiece.y + 1 }, prev.board)) newPiece.y++;
playSound('click');
return { ...prev, piece: newPiece };
case 'down':
newPiece.y++;
if (isValidMove(newPiece, prev.board)) {
return { ...prev, piece: newPiece };
} else {
const mergedBoard = mergePiece(prev.board, prev.piece);
const { board: clearedBoard, cleared } = clearLines(mergedBoard);
const newScore = prev.score + (cleared > 0 ? cleared * 100 * cleared : 0);
const newLines = prev.lines + cleared;
if (cleared > 0) playSound('success');
else playSound('click');
const newTetromino = prev.nextPiece;
const nextNext = randomTetromino(isP2);
if (!isValidMove(newTetromino, clearedBoard)) {
playSound('error');
return { ...prev, board: clearedBoard, score: newScore, lines: newLines, gameOver: true };
}
return {
...prev,
board: clearedBoard,
piece: newTetromino,
nextPiece: nextNext,
score: newScore,
lines: newLines,
};
}
}
return prev;
});
}, [gameOver, isPaused, gameStarted, gameMode, player1, player2, isValidMove, mergePiece, clearLines, playSound]);
// Check 2P win condition
useEffect(() => {
if (gameMode !== '2p' || !gameStarted) return;
if (player1.gameOver && player2.gameOver) {
setGameOver(true);
setWinner(player1.score > player2.score ? 'P1 Wins!' : player2.score > player1.score ? 'P2 Wins!' : 'Draw!');
} else if (player1.gameOver) {
setGameOver(true);
setWinner('P2 Wins!');
} else if (player2.gameOver) {
setGameOver(true);
setWinner('P1 Wins!');
}
}, [player1.gameOver, player2.gameOver, player1.score, player2.score, gameMode, gameStarted]);
// Keyboard handler
useEffect(() => {
const handleKeyDown = (e: KeyboardEvent) => {
if (!gameStarted) return;
switch (e.key) {
case 'ArrowLeft': case 'a': e.preventDefault(); moveLeft(); break;
case 'ArrowRight': case 'd': e.preventDefault(); moveRight(); break;
case 'ArrowDown': case 's': e.preventDefault(); moveDown(); break;
case 'ArrowUp': case 'w': e.preventDefault(); rotatePiece(); break;
case ' ': e.preventDefault(); hardDrop(); break;
case 'p': e.preventDefault(); togglePause(); break;
if (gameMode === '1p') {
switch (e.key) {
case 'ArrowLeft': case 'a': e.preventDefault(); moveLeft(); break;
case 'ArrowRight': case 'd': e.preventDefault(); moveRight(); break;
case 'ArrowDown': case 's': e.preventDefault(); moveDown(); break;
case 'ArrowUp': case 'w': e.preventDefault(); rotatePiece(); break;
case ' ': e.preventDefault(); hardDrop(); break;
case 'p': e.preventDefault(); togglePause(); break;
}
} else {
// P1: WASD + Q for drop
if (e.key === 'w' || e.key === 'W') { e.preventDefault(); movePlayer(1, 'rotate'); }
if (e.key === 'a' || e.key === 'A') { e.preventDefault(); movePlayer(1, 'left'); }
if (e.key === 's' || e.key === 'S') { e.preventDefault(); movePlayer(1, 'down'); }
if (e.key === 'd' || e.key === 'D') { e.preventDefault(); movePlayer(1, 'right'); }
if (e.key === 'q' || e.key === 'Q') { e.preventDefault(); movePlayer(1, 'drop'); }
// P2: Arrows + / for drop
if (e.key === 'ArrowUp') { e.preventDefault(); movePlayer(2, 'rotate'); }
if (e.key === 'ArrowLeft') { e.preventDefault(); movePlayer(2, 'left'); }
if (e.key === 'ArrowDown') { e.preventDefault(); movePlayer(2, 'down'); }
if (e.key === 'ArrowRight') { e.preventDefault(); movePlayer(2, 'right'); }
if (e.key === '/') { e.preventDefault(); movePlayer(2, 'drop'); }
if (e.key === 'p' || e.key === 'P') { e.preventDefault(); togglePause(); }
}
};
window.addEventListener('keydown', handleKeyDown);
return () => window.removeEventListener('keydown', handleKeyDown);
}, [moveLeft, moveRight, moveDown, rotatePiece, hardDrop, gameStarted]);
}, [moveLeft, moveRight, moveDown, rotatePiece, hardDrop, gameStarted, gameMode, movePlayer]);
// 1P tick
useEffect(() => {
if (!gameStarted || gameOver || gameComplete || isPaused) return;
if (!gameStarted || gameOver || gameComplete || isPaused || gameMode !== '1p') return;
const interval = setInterval(moveDown, TICK_SPEED);
return () => clearInterval(interval);
}, [moveDown, gameStarted, gameOver, gameComplete, isPaused]);
}, [moveDown, gameStarted, gameOver, gameComplete, isPaused, gameMode]);
const renderBoard = () => {
// 2P tick
useEffect(() => {
if (!gameStarted || gameOver || isPaused || gameMode !== '2p') return;
const interval = setInterval(() => {
if (!player1.gameOver) movePlayer(1, 'down');
if (!player2.gameOver) movePlayer(2, 'down');
}, TICK_SPEED);
return () => clearInterval(interval);
}, [gameStarted, gameOver, isPaused, gameMode, movePlayer, player1.gameOver, player2.gameOver]);
const renderBoard1P = () => {
const displayBoard = board.map(row => [...row]);
if (gameStarted && !gameOver && !gameComplete) {
for (let y = 0; y < piece.shape.length; y++) {
@@ -286,48 +476,191 @@ const Tetris = () => {
));
};
const renderBoard2P = (player: PlayerState, borderColor: string) => {
const displayBoard = player.board.map(row => [...row]);
if (gameStarted && !player.gameOver) {
for (let y = 0; y < player.piece.shape.length; y++) {
for (let x = 0; x < player.piece.shape[y].length; x++) {
if (player.piece.shape[y][x]) {
const boardY = player.piece.y + y;
const boardX = player.piece.x + x;
if (boardY >= 0 && boardY < BOARD_HEIGHT && boardX >= 0 && boardX < BOARD_WIDTH) displayBoard[boardY][boardX] = player.piece.color;
}
}
}
}
return displayBoard.map((row, y) => (
<div key={y} className="flex">
{row.map((cell, x) => (
<div
key={`${y}-${x}`}
className={`border transition-colors duration-100 ${borderColor}`}
style={{
width: cellSize,
height: cellSize,
backgroundColor: cell || 'transparent',
boxShadow: cell ? `0 0 5px ${cell}` : 'none',
}}
/>
))}
</div>
));
};
if (showGlitchCrash) return <GlitchCrash onComplete={() => window.location.reload()} />;
// Mode selection screen
if (!gameMode) {
return (
<motion.div
ref={gameRef}
tabIndex={0}
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
transition={{ duration: 0.5 }}
className="flex flex-col h-full"
>
<div className="flex items-center gap-4 mb-4">
<Link to="/games" className="font-pixel text-sm text-foreground/50 hover:text-primary transition-colors">{'<'} Back</Link>
<h1 className="font-minecraft text-2xl md:text-3xl text-primary text-glow-strong">Tetris</h1>
</div>
<div className="flex-1 flex flex-col items-center justify-center gap-6">
<p className="font-pixel text-sm text-foreground/70">Select game mode</p>
<div className="flex gap-4">
<button
onClick={() => startGame('1p')}
className="flex flex-col items-center gap-2 p-6 border-2 border-primary/50 hover:border-primary bg-background/50 hover:bg-primary/10 transition-all"
>
<User size={32} className="text-primary" />
<span className="font-minecraft text-lg text-primary">1 Player</span>
<span className="font-pixel text-xs text-foreground/60">Solo mode</span>
</button>
{!isMobile && (
<button
onClick={() => startGame('2p')}
className="flex flex-col items-center gap-2 p-6 border-2 border-purple-500/50 hover:border-purple-500 bg-background/50 hover:bg-purple-500/10 transition-all"
>
<Users size={32} className="text-purple-400" />
<span className="font-minecraft text-lg text-purple-400">2 Players</span>
<span className="font-pixel text-xs text-foreground/60">Local versus</span>
</button>
)}
</div>
{isMobile && (
<p className="font-pixel text-xs text-foreground/40 text-center max-w-xs">
2 Player mode requires a keyboard and is not available on mobile devices
</p>
)}
<div className="border border-primary/30 p-3 bg-background/30 mt-4">
<p className="font-pixel text-xs text-foreground/60">HIGH SCORE: <span className="text-primary">{highScore.toLocaleString()}</span></p>
</div>
</div>
</motion.div>
);
}
return (
<motion.div ref={gameRef} tabIndex={0} initial={{ opacity: 0 }} animate={{ opacity: 1 }} transition={{ duration: 0.5 }}
className={`flex flex-col outline-none ${isFullscreen ? 'fixed inset-0 z-50 bg-background p-4' : 'h-full'}`}>
<div className="flex items-center justify-between mb-2">
<div className="flex items-center gap-4">
<Link to="/games" className="font-pixel text-sm text-foreground/50 hover:text-primary transition-colors">{'<'} Back</Link>
<h1 className="font-minecraft text-2xl md:text-3xl text-primary text-glow-strong">Tetris</h1>
<button onClick={() => { setGameMode(null); setGameStarted(false); }} className="font-pixel text-sm text-foreground/50 hover:text-primary transition-colors">{'<'} Back</button>
<h1 className="font-minecraft text-2xl md:text-3xl text-primary text-glow-strong">
Tetris {gameMode === '2p' && <span className="text-purple-400">2P</span>}
</h1>
</div>
<button onClick={toggleFullscreen} className="p-2 border border-primary/50 hover:bg-primary/20 transition-colors" title={isFullscreen ? 'Exit fullscreen' : 'Fullscreen'}>
{isFullscreen ? <Minimize2 size={16} className="text-primary" /> : <Maximize2 size={16} className="text-primary" />}
</button>
</div>
<div className={`flex ${isMobile ? 'flex-col items-center' : 'flex-row gap-4'} flex-1 ${isFullscreen ? 'justify-center items-center' : ''}`}>
<div className="border-2 border-primary box-glow p-1 bg-background/80">{renderBoard()}</div>
{!isMobile && (
<div className="flex flex-col gap-2 min-w-[140px]">
<div className="border border-primary/50 p-3 bg-background/50 flex flex-col items-center justify-center min-h-[80px]">
<p className="font-pixel text-[10px] text-foreground/60 w-full mb-2">NEXT</p>
<div className="flex flex-col gap-1">
{nextPiece.shape.map((row, y) => (
<div key={y} className="flex gap-1">
{row.map((val, x) => (
<div key={`${y}-${x}`} className={`w-3 h-3 ${val ? 'bg-primary box-glow' : 'bg-transparent'}`} />
{gameMode === '1p' ? (
<>
<div className="border-2 border-primary box-glow p-1 bg-background/80">{renderBoard1P()}</div>
{!isMobile && (
<div className="flex flex-col gap-2 min-w-[140px]">
<div className="border border-primary/50 p-3 bg-background/50 flex flex-col items-center justify-center min-h-[80px]">
<p className="font-pixel text-[10px] text-foreground/60 w-full mb-2">NEXT</p>
<div className="flex flex-col gap-1">
{nextPiece.shape.map((row, y) => (
<div key={y} className="flex gap-1">
{row.map((val, x) => (
<div key={`${y}-${x}`} className={`w-3 h-3 ${val ? 'bg-primary box-glow' : 'bg-transparent'}`} />
))}
</div>
))}
</div>
))}
</div>
<div className="border border-primary/50 p-3 bg-background/50"><p className="font-pixel text-[10px] text-foreground/60">SCORE</p><p className="font-minecraft text-xl text-primary text-glow">{score.toLocaleString()}</p></div>
<div className="border border-primary/50 p-3 bg-background/50"><p className="font-pixel text-[10px] text-foreground/60">HIGH SCORE</p><p className="font-minecraft text-lg text-primary text-glow">{highScore.toLocaleString()}</p><p className="font-pixel text-[8px] text-foreground/30">max: 4,294,967,296</p></div>
<div className="border border-primary/50 p-3 bg-background/50"><p className="font-pixel text-[10px] text-foreground/60">LINES</p><p className="font-minecraft text-lg text-primary text-glow">{lines}</p></div>
<div className="border border-primary/50 p-3 bg-background/50"><p className="font-pixel text-[10px] text-foreground/60 mb-1">CONTROLS</p><p className="font-pixel text-[10px] text-foreground/80">← → ↑ ↓ / WASD</p><p className="font-pixel text-[10px] text-foreground/80">Space: Drop</p><p className="font-pixel text-[10px] text-foreground/80">P: Pause</p></div>
{!gameStarted || gameOver || gameComplete ? (
<button onClick={() => startGame('1p')} className="font-minecraft text-sm py-2 px-4 border border-primary bg-primary/20 text-primary hover:bg-primary/40 transition-all box-glow">{gameComplete ? 'PERFECT!' : gameOver ? 'RETRY' : 'START'}</button>
) : (
<button onClick={togglePause} className="font-minecraft text-sm py-2 px-4 border border-primary bg-primary/20 text-primary hover:bg-primary/40 transition-all">{isPaused ? 'RESUME' : 'PAUSE'}</button>
)}
</div>
</div>
<div className="border border-primary/50 p-3 bg-background/50"><p className="font-pixel text-[10px] text-foreground/60">SCORE</p><p className="font-minecraft text-xl text-primary text-glow">{score.toLocaleString()}</p></div>
<div className="border border-primary/50 p-3 bg-background/50"><p className="font-pixel text-[10px] text-foreground/60">HIGH SCORE</p><p className="font-minecraft text-lg text-primary text-glow">{highScore.toLocaleString()}</p><p className="font-pixel text-[8px] text-foreground/30">max: 4,294,967,296</p></div>
<div className="border border-primary/50 p-3 bg-background/50"><p className="font-pixel text-[10px] text-foreground/60">LINES</p><p className="font-minecraft text-lg text-primary text-glow">{lines}</p></div>
<div className="border border-primary/50 p-3 bg-background/50"><p className="font-pixel text-[10px] text-foreground/60 mb-1">CONTROLS</p><p className="font-pixel text-[10px] text-foreground/80">← → ↑ ↓ / WASD</p><p className="font-pixel text-[10px] text-foreground/80">Space: Drop</p><p className="font-pixel text-[10px] text-foreground/80">P: Pause</p></div>
{!gameStarted || gameOver || gameComplete ? (
<button onClick={startGame} className="font-minecraft text-sm py-2 px-4 border border-primary bg-primary/20 text-primary hover:bg-primary/40 transition-all box-glow">{gameComplete ? 'PERFECT!' : gameOver ? 'RETRY' : 'START'}</button>
) : (
<button onClick={togglePause} className="font-minecraft text-sm py-2 px-4 border border-primary bg-primary/20 text-primary hover:bg-primary/40 transition-all">{isPaused ? 'RESUME' : 'PAUSE'}</button>
)}
</div>
</>
) : (
<>
{/* P1 Board */}
<div className="flex flex-col items-center gap-2">
<div className="flex items-center gap-2">
<div className="w-3 h-3 rounded-sm bg-primary" />
<span className="font-pixel text-xs text-primary">P1 (WASD/Q)</span>
</div>
<div className="border-2 border-primary box-glow p-1 bg-background/80">{renderBoard2P(player1, 'border-primary/20')}</div>
<div className="flex gap-2 text-center">
<div><p className="font-pixel text-[8px] text-foreground/60">SCORE</p><p className="font-minecraft text-sm text-primary">{player1.score}</p></div>
<div><p className="font-pixel text-[8px] text-foreground/60">LINES</p><p className="font-minecraft text-sm text-primary">{player1.lines}</p></div>
</div>
{player1.gameOver && <span className="font-pixel text-xs text-destructive">GAME OVER</span>}
</div>
{/* Center controls */}
<div className="flex flex-col gap-2 min-w-[100px] items-center">
<div className="border border-primary/50 p-2 bg-background/50 text-center">
<p className="font-pixel text-[8px] text-foreground/60 mb-1">CONTROLS</p>
<p className="font-pixel text-[8px] text-primary">P1: WASD Q</p>
<p className="font-pixel text-[8px] text-purple-400">P2: ↑↓←→ /</p>
<p className="font-pixel text-[8px] text-foreground/60 mt-1">P: Pause</p>
</div>
{!gameStarted || gameOver ? (
<button onClick={() => startGame('2p')} className="font-minecraft text-xs py-2 px-3 border border-primary bg-primary/20 text-primary hover:bg-primary/40 transition-all box-glow">
{gameOver ? 'AGAIN' : 'START'}
</button>
) : (
<button onClick={togglePause} className="font-minecraft text-xs py-2 px-3 border border-primary bg-primary/20 text-primary hover:bg-primary/40 transition-all">
{isPaused ? 'RESUME' : 'PAUSE'}
</button>
)}
</div>
{/* P2 Board */}
<div className="flex flex-col items-center gap-2">
<div className="flex items-center gap-2">
<div className="w-3 h-3 rounded-sm" style={{ backgroundColor: 'hsl(280 70% 50%)' }} />
<span className="font-pixel text-xs text-purple-400">P2 (↑↓←→/)</span>
</div>
<div className="border-2 border-purple-500 p-1 bg-background/80" style={{ boxShadow: '0 0 10px hsl(280 70% 50% / 0.5)' }}>{renderBoard2P(player2, 'border-purple-500/20')}</div>
<div className="flex gap-2 text-center">
<div><p className="font-pixel text-[8px] text-foreground/60">SCORE</p><p className="font-minecraft text-sm text-purple-400">{player2.score}</p></div>
<div><p className="font-pixel text-[8px] text-foreground/60">LINES</p><p className="font-minecraft text-sm text-purple-400">{player2.lines}</p></div>
</div>
{player2.gameOver && <span className="font-pixel text-xs text-destructive">GAME OVER</span>}
</div>
</>
)}
{isMobile && (
{isMobile && gameMode === '1p' && (
<>
<MobileControlsSpacer />
<MobileControlsDock>
@@ -351,19 +684,42 @@ const Tetris = () => {
<div />
</div>
) : (
<button onClick={startGame} className="font-minecraft text-sm py-3 px-8 border border-primary bg-primary/20 text-primary hover:bg-primary/40 transition-all box-glow">{gameComplete ? 'PERFECT!' : gameOver ? 'RETRY' : 'START'}</button>
<button onClick={() => startGame('1p')} className="font-minecraft text-sm py-3 px-8 border border-primary bg-primary/20 text-primary hover:bg-primary/40 transition-all box-glow">{gameComplete ? 'PERFECT!' : gameOver ? 'RETRY' : 'START'}</button>
)}
</div>
</MobileControlsDock>
</>
)}
</div>
{/* Overlays */}
{!isMobile && (gameOver || isPaused || gameComplete) && gameStarted && (
<div className="fixed inset-0 bg-background/80 flex items-center justify-center z-50">
<div className="border-2 border-primary box-glow-strong p-6 bg-background text-center">
<h2 className="font-minecraft text-2xl text-primary text-glow-strong mb-3">{gameComplete ? 'GAME COMPLETE!' : gameOver ? 'GAME OVER' : 'PAUSED'}</h2>
{(gameOver || gameComplete) && (<><p className="font-pixel text-sm text-foreground/80 mb-1">Final Score: {score.toLocaleString()}</p><p className="font-pixel text-xs text-foreground/60 mb-3">Lines: {lines}</p></>)}
<button onClick={(gameOver || gameComplete) ? startGame : () => setIsPaused(false)} className="font-minecraft text-sm py-2 px-6 border border-primary bg-primary/20 text-primary hover:bg-primary/40 transition-all box-glow">{(gameOver || gameComplete) ? 'PLAY AGAIN' : 'RESUME'}</button>
<h2 className="font-minecraft text-2xl text-primary text-glow-strong mb-3">
{gameMode === '2p' && gameOver ? winner : gameComplete ? 'GAME COMPLETE!' : gameOver ? 'GAME OVER' : 'PAUSED'}
</h2>
{gameMode === '1p' && (gameOver || gameComplete) && (
<>
<p className="font-pixel text-sm text-foreground/80 mb-1">Final Score: {score.toLocaleString()}</p>
<p className="font-pixel text-xs text-foreground/60 mb-3">Lines: {lines}</p>
</>
)}
{gameMode === '2p' && gameOver && (
<div className="flex gap-4 justify-center mb-3">
<div>
<p className="font-pixel text-[10px] text-foreground/60">P1 Score</p>
<p className="font-minecraft text-lg text-primary">{player1.score}</p>
</div>
<div>
<p className="font-pixel text-[10px] text-foreground/60">P2 Score</p>
<p className="font-minecraft text-lg text-purple-400">{player2.score}</p>
</div>
</div>
)}
<button onClick={(gameOver || gameComplete) ? () => startGame(gameMode!) : () => setIsPaused(false)} className="font-minecraft text-sm py-2 px-6 border border-primary bg-primary/20 text-primary hover:bg-primary/40 transition-all box-glow">
{(gameOver || gameComplete) ? 'PLAY AGAIN' : 'RESUME'}
</button>
</div>
</div>
)}
@@ -371,4 +727,4 @@ const Tetris = () => {
);
};
export default Tetris;
export default Tetris;