support next tetromino preview

huoyijie · Nov 7, 2023 · 834e9a4 · 834e9a4
1 parent 5f0e860
commit 834e9a4
Show file tree

Hide file tree

Showing 3 changed files with 45 additions and 12 deletions.
diff --git a/src/components/Info.jsx b/src/components/Info.jsx
@@ -0,0 +1,28 @@
+import Tetromino from './Tetromino';
+import { useContext } from 'react';
+import Context from './Context';
+
+export default function () {
+  const { gameOver, nextTetromino } = useContext(Context)
+
+  if (gameOver) return <></>
+
+  return (
+    <div className='flex flex-col gap-8'>
+      <div className='flex gap-6 justify-between items-center'>
+        <span>得分</span>
+        <span className='text-2xl font-bold text-red-600'>100</span>
+      </div>
+      <div className='flex gap-6 justify-between items-center'>
+        <span>消除行</span>
+        <span className='text-2xl font-bold text-red-600'>20</span>
+      </div>
+      {nextTetromino && (
+        <div className='flex gap-6 justify-between items-center'>
+          <div>下一个</div>
+          <div className='relative'><Tetromino {...nextTetromino} x={-1} y={-1} /></div>
+        </div>
+      )}
+    </div>
+  )
+}
diff --git a/src/lib/tetris.js b/src/lib/tetris.js
@@ -176,7 +176,7 @@ export const BOARD_HEIGHT = 600
 export const BOARD_X_CUBES = BOARD_WIDTH / CUBE_SIZE
 export const BOARD_Y_CUBES = BOARD_HEIGHT / CUBE_SIZE
 
-export function nextTetromino() {
+export function randomTetromino() {
   const type = TETROMINOES[randomInt(TETROMINOES.length)]
   return {
     type,

diff --git a/src/pages/index.js b/src/pages/index.js
@@ -2,13 +2,15 @@ import { useEffect, useRef, useState } from 'react'
 import Operation from '@/components/Operation'
 import Context from '@/components/Context'
 import Board from '@/components/Board'
-import { fallDownTetromino, moveDownTetromino, moveLeftTetromino, moveRightTetromino, nextTetromino, rotateTetromino } from '@/lib/tetris'
+import { fallDownTetromino, moveDownTetromino, moveLeftTetromino, moveRightTetromino, randomTetromino, rotateTetromino } from '@/lib/tetris'
+import Info from '@/components/Info'
 
 var audio
 
 export default function () {
   const [tetrominoes, setTetrominoes] = useState([])
   const [currentTetromino, setCurrentTetromino] = useState()
+  const [nextTetromino, setNextTetromino] = useState()
   const [gameOver, setGameOver] = useState(true)
   const mainRef = useRef()
 
@@ -27,6 +29,15 @@ export default function () {
     return () => audio.pause()
   }, [gameOver])
 
+  const newGame = () => {
+    if (gameOver) {
+      setTetrominoes([])
+      setCurrentTetromino(null)
+      setNextTetromino(randomTetromino())
+      setGameOver(false)
+    }
+  }
+
   const frozen = () => {
     if (currentTetromino) {
       tetrominoes.push(currentTetromino)
@@ -36,7 +47,8 @@ export default function () {
 
   const next = () => {
     frozen()
-    setCurrentTetromino(nextTetromino())
+    setCurrentTetromino(nextTetromino)
+    setNextTetromino(randomTetromino())
   }
 
   const rotate = () => {
@@ -62,14 +74,6 @@ export default function () {
     setCurrentTetromino(moveRightTetromino(currentTetromino, tetrominoes))
   }
 
-  const newGame = () => {
-    if (gameOver) {
-      setTetrominoes([])
-      setCurrentTetromino(null)
-      setGameOver(false)
-    }
-  }
-
   const fallDown = () => {
     if (!gameOver && currentTetromino) {
       fallDownTetromino(
@@ -113,10 +117,11 @@ export default function () {
   }
 
   return (
-    <Context.Provider value={{ currentTetromino, tetrominoes, newGame, fallDown, rotate, down, left, right, next, gameOver, setGameOver }}>
+    <Context.Provider value={{ currentTetromino, nextTetromino, tetrominoes, newGame, fallDown, rotate, down, left, right, next, gameOver, setGameOver }}>
       <main ref={mainRef} className='w-full h-screen focus:outline-none flex gap-8 items-center justify-center' tabIndex={1} onKeyDown={onKeyDown}>
         <Operation />
         <Board />
+        <Info />
       </main>
     </Context.Provider>
   )