Added last block for tetris above score field

src/pages/Tetris.tsx

@@ -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">