Game stats

ShawnStewart · ShawnStewart · commit 413fb7842737 · 2020-10-13T23:09:21.000-05:00
diff --git a/src/app.scss b/src/app.scss
@@ -5,10 +5,4 @@
     display: grid;
     place-items: center;
     background-color: #282c34;
-
-    p {
-        color: white;
-        text-align: center;
-        font-size: calc(18px + 2vmin);
-    }
 }
diff --git a/src/components/MatrixCanvas.tsx b/src/components/MatrixCanvas.tsx
@@ -3,8 +3,6 @@ import React, { FC, memo, MutableRefObject, ReactElement, useEffect, useRef } fr
 import { TetrisMatrix } from '@types';
 import { clearCanvas, drawToCanvas } from '@utils/canvas';
 
-import './matrixCanvas.scss';
-
 interface MatrixCanvasProps {
     id: string;
     ctxForwardRef?: MutableRefObject<CanvasRenderingContext2D | null>;
diff --git a/src/components/Queue.tsx b/src/components/Queue.tsx
@@ -4,8 +4,6 @@ import MatrixCanvas from '@components/MatrixCanvas';
 import { BLOCK_SIZE } from '@constants';
 import { PlayerState } from '@types';
 
-import './queue.scss';
-
 interface QueueProps {
     matrices: PlayerState[];
 }
diff --git a/src/components/Stats.tsx b/src/components/Stats.tsx
@@ -0,0 +1,24 @@
+import React, { FC } from 'react';
+
+import { GameStats } from '@types';
+
+const Stats: FC<GameStats> = ({ level, lines, score }) => {
+    return (
+        <div id="tetris-game-stats">
+            <div className="game-stat-section">
+                <p className="game-stat-section-header">score</p>
+                <p className="game-stat-section-value">{score}</p>
+            </div>
+            <div className="game-stat-section">
+                <p className="game-stat-section-header">level</p>
+                <p className="game-stat-section-value">{level}</p>
+            </div>
+            <div className="game-stat-section">
+                <p className="game-stat-section-header">lines</p>
+                <p className="game-stat-section-value">{lines}</p>
+            </div>
+        </div>
+    );
+};
+
+export default Stats;
diff --git a/src/components/Tetris.scss b/src/components/Tetris.scss
@@ -5,6 +5,43 @@
     height: 100%;
 
     &-container {
+        display: grid;
+        grid-template-columns: auto auto;
+        grid-template-rows: auto auto auto;
+        padding: 8px;
+        border-radius: 8px;
+        background-color: #42464e;
+    }
+
+    &-queue {
         display: flex;
+        flex-direction: column;
+        align-items: center;
+        min-width: 175px;
     }
+
+    &-game-stats {
+        grid-column: 1 / 3;
+        display: grid;
+        grid-template-columns: 1fr 1fr 1fr;
+        padding: 8px;
+        text-align: center;
+        color: #ffffffeb;
+
+        .game-stat-section {
+            display: grid;
+
+            &-header {
+                font-size: 24px;
+            }
+
+            &-value {
+                font-size: 32px;
+            }
+        }
+    }
+}
+
+.tetris-canvas {
+    padding: 8px;
 }
diff --git a/src/components/Tetris.tsx b/src/components/Tetris.tsx
@@ -2,6 +2,7 @@ import React, { EventHandler, FC, KeyboardEvent, useCallback, useEffect, useRedu
 
 import * as actionTypes from '@actions/actionTypes';
 import MatrixCanvas from '@components/MatrixCanvas';
+import Stats from '@components/Stats';
 import Queue from '@components/Queue';
 import { BLOCK_SIZE, BOARD_HEIGHT, BOARD_WIDTH } from '@constants';
 import { initialState, reducer } from '@reducers';
@@ -17,11 +18,11 @@ const Tetris: FC = () => {
     const requestRef = useRef(0);
     const lastTick = useRef(0);
     const [frameCount, setFrameCount] = useState(0);
-    const [gameStart, setGameStart] = useState(false);
+    const [gameStart, setGameStart] = useState(true);
     const [isPaused, setIsPaused] = useState(false);
     const [gameOver, setGameOver] = useState(false);
 
-    const { gameBoard, player, queue } = state;
+    const { gameBoard, player, queue, stats } = state;
 
     const _movePlayerDown = useCallback(() => {
         if (player.y === player.placeholder.y) {
@@ -47,8 +48,9 @@ const Tetris: FC = () => {
         if (gameStart && !isPaused && !gameOver) {
             requestRef.current = requestAnimationFrame(() => {
                 const now = performance.now();
+                const tickTime = 250 - 25 * stats.level;
 
-                if (now - 500 >= lastTick.current) {
+                if (now - tickTime >= lastTick.current) {
                     _movePlayerDown();
 
                     lastTick.current = now;
@@ -62,7 +64,7 @@ const Tetris: FC = () => {
         } else {
             return;
         }
-    }, [_movePlayerDown, frameCount, gameOver, gameStart, isPaused]);
+    }, [_movePlayerDown, frameCount, gameOver, gameStart, isPaused, stats.level]);
 
     useEffect(() => {
         // Re-draw the game board and player position
@@ -72,7 +74,7 @@ const Tetris: FC = () => {
                 drawInitialScreen(gameBoardCtxRef.current);
             } else if (gameOver) {
                 console.log('game over');
-                drawGameOverScreen(gameBoardCtxRef.current);
+                drawGameOverScreen(gameBoardCtxRef.current, stats.score);
             } else if (isPaused) {
                 console.log('paused');
                 drawPauseScreen(gameBoardCtxRef.current);
@@ -194,6 +196,7 @@ const Tetris: FC = () => {
                     width={BOARD_WIDTH * BLOCK_SIZE}
                 />
                 <Queue matrices={queue} />
+                <Stats {...stats} />
             </div>
         </div>
     );
diff --git a/src/components/matrixCanvas.scss b/src/components/matrixCanvas.scss
diff --git a/src/components/queue.scss b/src/components/queue.scss
diff --git a/src/constants/index.ts b/src/constants/index.ts
@@ -7,7 +7,7 @@ export const QUEUE_LENGTH = 4;
 
 export enum ColorCodes {
     transparent = 0,
-    white = 1,
+    background = 1,
     lightBlue = 2,
     blue = 3,
     orange = 4,
@@ -19,7 +19,7 @@ export enum ColorCodes {
 
 export const COLOR_MAP = {
     [ColorCodes.transparent]: '#ffffff00',
-    [ColorCodes.white]: '#f0f0f0',
+    [ColorCodes.background]: '#000000',
     [ColorCodes.lightBlue]: '#60d9f4',
     [ColorCodes.blue]: '#4051d3',
     [ColorCodes.orange]: '#e8b23f',
diff --git a/src/reducers/index.ts b/src/reducers/index.ts
@@ -15,6 +15,7 @@ import {
     getNewPlayer,
     initializeBoard,
     initializeQueue,
+    initializeStats,
     updateGameBoardWithPlayer,
     updatePlaceholder,
 } from '@utils';
@@ -36,11 +37,12 @@ export const initialState: TetrisState = {
     gameBoard: initializeBoard(),
     player: getNewPlayer(1),
     queue: initializeQueue(),
+    stats: initializeStats(),
     tetrominoCount: QUEUE_LENGTH + 1,
 };
 
 export const reducer = (state: TetrisState, action: TetrisActions): TetrisState => {
-    const { gameBoard, player, queue, tetrominoCount } = state;
+    const { gameBoard, player, queue, stats, tetrominoCount } = state;
 
     switch (action.type) {
         case RESET_PLAYER: {
@@ -61,6 +63,10 @@ export const reducer = (state: TetrisState, action: TetrisActions): TetrisState
                     ...player,
                     y: player.y + 1,
                 },
+                stats: {
+                    ...stats,
+                    score: stats.score + 1,
+                },
             };
         }
         case MOVE_PLAYER_LEFT: {
@@ -91,6 +97,7 @@ export const reducer = (state: TetrisState, action: TetrisActions): TetrisState
             const newGameBoard = updateGameBoardWithPlayer({ gameBoard, ...player });
 
             return {
+                ...state,
                 gameBoard: newGameBoard,
                 player: {
                     ...queue[0],
@@ -102,14 +109,21 @@ export const reducer = (state: TetrisState, action: TetrisActions): TetrisState
         }
         case JUMP_TO_PLACEHOLDER: {
             const newGameBoard = updateGameBoardWithPlayer({ gameBoard, ...player, y: player.placeholder.y });
+            const jumpDistance = player.placeholder.y - player.y;
+            const pointsEarned = jumpDistance + jumpDistance * stats.level;
 
             return {
+                ...state,
                 gameBoard: newGameBoard,
                 player: {
                     ...queue[0],
                     placeholder: updatePlaceholder({ gameBoard: newGameBoard, ...queue[0] }),
                 },
                 queue: [...queue.slice(1), getNewPlayer(tetrominoCount + 1)],
+                stats: {
+                    ...stats,
+                    score: stats.score + pointsEarned,
+                },
                 tetrominoCount: tetrominoCount + 1,
             };
         }
@@ -126,6 +140,17 @@ export const reducer = (state: TetrisState, action: TetrisActions): TetrisState
         }
         case UPDATE_GAME_BOARD: {
             const newGameBoard = clearMatrixRows(gameBoard, action.payload);
+            const numRowsCompleted = action.payload.length;
+            const newLinesCount = stats.lines + numRowsCompleted;
+
+            const standardPoints = numRowsCompleted * 100;
+            const levelBonus = stats.level * 500;
+
+            let pointsEarned = standardPoints + levelBonus;
+
+            if (numRowsCompleted === 4) {
+                pointsEarned *= 2;
+            }
 
             return {
                 ...state,
@@ -134,6 +159,12 @@ export const reducer = (state: TetrisState, action: TetrisActions): TetrisState
                     ...player,
                     placeholder: updatePlaceholder({ gameBoard: newGameBoard, ...player }),
                 },
+                stats: {
+                    ...stats,
+                    level: Math.floor(newLinesCount / 10),
+                    lines: newLinesCount,
+                    score: stats.score + pointsEarned,
+                },
             };
         }
         default: {
diff --git a/src/types/index.ts b/src/types/index.ts
@@ -22,9 +22,16 @@ export interface PlayerState extends PlayerShapeAndPosition {
     tetrominoNumber: number;
 }
 
+export interface GameStats {
+    level: number;
+    lines: number;
+    score: number;
+}
+
 export interface TetrisState {
     gameBoard: TetrisMatrix;
     player: PlayerState;
     queue: PlayerState[];
+    stats: GameStats;
     tetrominoCount: number;
 }
diff --git a/src/utils/canvas.ts b/src/utils/canvas.ts
@@ -79,7 +79,7 @@ export const drawToCanvas = ({ ctx, fill = true, matrix: m, x = 0, y = 0 }: Draw
     }
 };
 
-export const drawGameOverScreen = (ctx: CanvasRenderingContext2D): void => {
+export const drawGameOverScreen = (ctx: CanvasRenderingContext2D, finalScore: number): void => {
     ctx.fillStyle = '#000000f0';
     ctx.fillRect(0, 0, BOARD_WIDTH * BLOCK_SIZE, BOARD_HEIGHT * BLOCK_SIZE);
 
@@ -89,7 +89,7 @@ export const drawGameOverScreen = (ctx: CanvasRenderingContext2D): void => {
     ctx.fillText('Game Over', ctx.canvas.width / 2, ctx.canvas.height / 2);
 
     ctx.font = '16px sans-serif';
-    ctx.fillText('dummy', ctx.canvas.width / 2, ctx.canvas.height / 2 + 35);
+    ctx.fillText(`Final score: ${finalScore}`, ctx.canvas.width / 2, ctx.canvas.height / 2 + 35);
 };
 
 export const drawInitialScreen = (ctx: CanvasRenderingContext2D): void => {
diff --git a/src/utils/index.ts b/src/utils/index.ts
@@ -1,6 +1,6 @@
 import { BOARD_HEIGHT, BOARD_WIDTH, ColorCodes, QUEUE_LENGTH } from '@constants';
 import { TETROMINO_IDS, TETROMINO_SHAPE_MAP } from '@constants/tetrominos';
-import { GameBoardAndPlayer, PlayerPosition, PlayerState, TetrisMatrix } from '@types';
+import { GameBoardAndPlayer, GameStats, PlayerPosition, PlayerState, TetrisMatrix } from '@types';
 
 export const isOutOfBoundsX = (x: number): boolean => x < 0 || x >= BOARD_WIDTH;
 
@@ -50,7 +50,7 @@ export const clearMatrixRows = (matrix: TetrisMatrix, rows: number[]): TetrisMat
 
     for (const row of rows) {
         result.splice(row, 1);
-        result.unshift(new Array(BOARD_WIDTH).fill(ColorCodes.white));
+        result.unshift(new Array(BOARD_WIDTH).fill(ColorCodes.background));
     }
 
     return result;
@@ -99,6 +99,14 @@ export const initializeQueue = (): PlayerState[] => {
     return queue;
 };
 
+export const initializeStats = (): GameStats => {
+    return {
+        level: 0,
+        lines: 0,
+        score: 0,
+    };
+};
+
 export const rotateMatrix = (matrix: TetrisMatrix, counterclockwise = false): TetrisMatrix => {
     const result = cloneMatrix(matrix);
 

Original file line number	Diff line number	Diff line change
`@@ -4,8 +4,6 @@ import MatrixCanvas from '@components/MatrixCanvas';`
`4`	`4`	`import { BLOCK_SIZE } from '@constants';`
`5`	`5`	`import { PlayerState } from '@types';`
`6`	`6`
`7`		`-import './queue.scss';`
`8`		`-`
`9`	`7`	`interface QueueProps {`
`10`	`8`	`matrices: PlayerState[];`
`11`	`9`	`}`