jory/personal_website
1
0
Fork 0
mirror of https://github.com/JorySeverijnse/ui-fixer-supreme.git synced 2025-12-06 13:36:57 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Added last block for tetris above score field

Browse Source
This commit is contained in:
someone 2025-12-03 21:53:00 +01:00
parent 06f8887c4e
commit ba145a3da0
1 changed files with 17 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
src/pages/Tetris.tsx
View File

@ -59,6 +59,7 @@ const Tetris = () => {
const { playSound } = useSettings();
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);
@ -69,7 +70,6 @@ const Tetris = () => {
const [showGlitchCrash, setShowGlitchCrash] = useState(false);
const [isFullscreen, setIsFullscreen] = useState(false);
const gameRef = useRef<HTMLDivElement>(null);
const { enterFullscreen, exitFullscreen } = useBrowserFullscreen();
const getCellSize = useCallback(() => {
@ -176,11 +176,12 @@ const Tetris = () => {
});
} else { playSound('click'); }
setBoard(clearedBoard);
const newTetromino = randomTetromino();
const newTetromino = nextPiece;
setNextPiece(randomTetromino());
if (!isValidMove(newTetromino, clearedBoard)) { setGameOver(true); playSound('error'); }
else { setPiece(newTetromino); }
}
}, [piece, board, gameOver, gameComplete, isPaused, gameStarted, isValidMove, mergePiece, clearLines, playSound, highScore]);
}, [piece, board, gameOver, gameComplete, isPaused, gameStarted, isValidMove, mergePiece, clearLines, playSound, highScore, nextPiece]);
const moveLeft = useCallback(() => {
if (gameOver || gameComplete || isPaused || !gameStarted) return;
@ -212,6 +213,7 @@ const Tetris = () => {
const startGame = () => {
setBoard(createBoard());
setPiece(randomTetromino());
setNextPiece(randomTetromino());
setScore(0);
setLines(0);
setGameOver(false);
@ -286,12 +288,22 @@ const Tetris = () => {
{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'}`} />
))}
</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>
@ -303,7 +315,6 @@ const Tetris = () => {
)}
</div>
)}
{isMobile && (
<div className="mt-4 flex flex-col items-center gap-2 w-full">
<div className="flex gap-4 text-center">
@ -330,7 +341,6 @@ const Tetris = () => {
</div>
)}
</div>
{!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">