Added previews

screens/Tetris/GameLogic.js

@@ -39,6 +39,8 @@ export default class GameLogic {
     autoRepeatActivationDelay: number;
     autoRepeatDelay: number;
 
+    nextPieces: Array<Tetromino>;
+    nextPiecesCount: number;
 
     onTick: Function;
     onClock: Function;
@@ -56,6 +58,19 @@ export default class GameLogic {
         this.colors = colors;
         this.autoRepeatActivationDelay = 300;
         this.autoRepeatDelay = 50;
+        this.nextPieces = [];
+        this.nextPiecesCount = 3;
+    }
+
+    getNextPieces() {
+        let finalArray = [];
+        for (let i = 0; i < this.nextPieces.length; i++) {
+            finalArray.push(this.getEmptyGrid(4, 4));
+            let coord = this.nextPieces[i].getCellsCoordinates(false);
+            this.tetrominoToGrid(this.nextPieces[i], coord, finalArray[i]);
+        }
+
+        return finalArray;
     }
 
     getHeight(): number {
@@ -74,9 +89,9 @@ export default class GameLogic {
         return this.gamePaused;
     }
 
-    getEmptyLine() {
+    getEmptyLine(width: number) {
         let line = [];
-        for (let col = 0; col < this.getWidth(); col++) {
+        for (let col = 0; col < width; col++) {
             line.push({
                 color: this.colors.tetrisBackground,
                 isEmpty: true,
@@ -85,10 +100,10 @@ export default class GameLogic {
         return line;
     }
 
-    getEmptyGrid() {
+    getEmptyGrid(height: number, width: number) {
         let grid = [];
-        for (let row = 0; row < this.getHeight(); row++) {
+        for (let row = 0; row < height; row++) {
-            grid.push(this.getEmptyLine());
+            grid.push(this.getEmptyLine(width));
         }
         return grid;
     }
@@ -98,7 +113,7 @@ export default class GameLogic {
     }
 
     getFinalGrid() {
-        let coord = this.currentObject.getCellsCoordinates();
+        let coord = this.currentObject.getCellsCoordinates(true);
         let finalGrid = this.getGridCopy();
         for (let i = 0; i < coord.length; i++) {
             finalGrid[coord[i].y][coord[i].x] = {
@@ -122,14 +137,18 @@ export default class GameLogic {
         return canLevel;
     }
 
-    freezeTetromino() {
+    tetrominoToGrid(object: Object, coord : Array<Object>, grid: Array<Array<Object>>) {
-        let coord = this.currentObject.getCellsCoordinates();
         for (let i = 0; i < coord.length; i++) {
-            this.currentGrid[coord[i].y][coord[i].x] = {
+            grid[coord[i].y][coord[i].x] = {
-                color: this.currentObject.getColor(),
+                color: object.getColor(),
                 isEmpty: false,
             };
         }
+    }
+
+    freezeTetromino() {
+        let coord = this.currentObject.getCellsCoordinates(true);
+        this.tetrominoToGrid(this.currentObject, coord, this.currentGrid);
         this.clearLines(this.getLinesToClear(coord));
     }
 
@@ -137,7 +156,7 @@ export default class GameLogic {
         lines.sort();
         for (let i = 0; i < lines.length; i++) {
             this.currentGrid.splice(lines[i], 1);
-            this.currentGrid.unshift(this.getEmptyLine());
+            this.currentGrid.unshift(this.getEmptyLine(this.getWidth()));
         }
         switch (lines.length) {
             case 1:
@@ -174,7 +193,7 @@ export default class GameLogic {
 
     isTetrominoPositionValid() {
         let isValid = true;
-        let coord = this.currentObject.getCellsCoordinates();
+        let coord = this.currentObject.getCellsCoordinates(true);
         for (let i = 0; i < coord.length; i++) {
             if (coord[i].x >= this.getWidth()
                 || coord[i].x < 0
@@ -286,10 +305,21 @@ export default class GameLogic {
             callback(this.getFinalGrid());
     }
 
+    recoverNextPiece() {
+        this.currentObject = this.nextPieces.shift();
+        this.generateNextPieces();
+    }
+
+    generateNextPieces() {
+        while (this.nextPieces.length < this.nextPiecesCount) {
+            let shape = Math.floor(Math.random() * 7);
+            this.nextPieces.push(new Tetromino(shape, this.colors));
+        }
+    }
+
     createTetromino() {
         this.pressedOut();
-        let shape = Math.floor(Math.random() * 7);
+        this.recoverNextPiece();
-        this.currentObject = new Tetromino(shape, this.colors);
         if (!this.isTetrominoPositionValid())
             this.endGame(false);
     }
@@ -325,7 +355,9 @@ export default class GameLogic {
         this.level = 0;
         this.levelProgression = 0;
         this.gameTick = GameLogic.levelTicks[this.level];
-        this.currentGrid = this.getEmptyGrid();
+        this.currentGrid = this.getEmptyGrid(this.getHeight(), this.getWidth());
+        this.nextPieces = [];
+        this.generateNextPieces();
         this.createTetromino();
         tickCallback(this.score, this.level, this.getFinalGrid());
         clockCallback(this.gameTime);
@@ -335,5 +367,4 @@ export default class GameLogic {
         this.gameTimeInterval = setInterval(this.onClock, 1000);
         this.endCallback = endCallback;
     }
-
 }

screens/Tetris/TetrisScreen.js

@@ -7,6 +7,7 @@ import {MaterialCommunityIcons} from "@expo/vector-icons";
 import GameLogic from "./GameLogic";
 import Grid from "./components/Grid";
 import HeaderButton from "../../components/HeaderButton";
+import Preview from "./components/Preview";
 
 type Props = {
     navigation: Object,
@@ -36,7 +37,7 @@ class TetrisScreen extends React.Component<Props, State> {
         this.colors = props.theme.colors;
         this.logic = new GameLogic(20, 10, this.colors);
         this.state = {
-            grid: this.logic.getEmptyGrid(),
+            grid: this.logic.getEmptyGrid(this.logic.getHeight(), this.logic.getWidth()),
             gameRunning: false,
             gameTime: 0,
             gameScore: 0,
@@ -241,8 +242,19 @@ class TetrisScreen extends React.Component<Props, State> {
                 <Grid
                     width={this.logic.getWidth()}
                     height={this.logic.getHeight()}
+                    containerHeight={'80%'}
                     grid={this.state.grid}
+                    backgroundColor={this.colors.tetrisBackground}
                 />
+                <View style={{
+                    position: 'absolute',
+                    top: 50,
+                    right: 5,
+                }}>
+                    <Preview
+                        next={this.logic.getNextPieces()}
+                    />
+                </View>
                 <View style={{
                     flexDirection: 'row',
                     width: '100%',

screens/Tetris/Tetromino.js

@@ -194,12 +194,15 @@ export default class Tetromino {
         return Tetromino.colors[this.currentType];
     }
 
-    getCellsCoordinates() {
+    getCellsCoordinates(isAbsolute: boolean) {
         let coordinates = [];
         for (let row = 0; row < this.currentShape.length; row++) {
             for (let col = 0; col < this.currentShape[row].length; col++) {
                 if (this.currentShape[row][col] === 1)
+                    if (isAbsolute)
                         coordinates.push({x: this.position.x + col, y: this.position.y + row});
+                    else
+                        coordinates.push({x: col, y: row});
             }
         }
         return coordinates;

screens/Tetris/components/Cell.js

@@ -24,8 +24,8 @@ class Cell extends React.PureComponent<Props> {
             <View
                 style={{
                     flex: 1,
-                    backgroundColor: this.props.color,
+                    backgroundColor: this.props.isEmpty ? 'transparent' : this.props.color,
-                    borderColor: this.props.isEmpty ? this.props.color : this.colors.tetrisBorder,
+                    borderColor: this.props.isEmpty ? 'transparent' : this.colors.tetrisBorder,
                     borderStyle: 'solid',
                     borderWidth: 1,
                     aspectRatio: 1,

screens/Tetris/components/Grid.js

@@ -8,8 +8,10 @@ import Cell from "./Cell";
 type Props = {
     navigation: Object,
     grid: Array<Array<Object>>,
+    backgroundColor: string,
     height: number,
     width: number,
+    containerHeight: number|string,
 }
 
 class Grid extends React.Component<Props>{
@@ -31,7 +33,6 @@ class Grid extends React.Component<Props>{
         return(
             <View style={{
                 flexDirection: 'row',
-                backgroundColor: this.colors.tetrisBackground
             }}>
                 {cells}
             </View>
@@ -50,10 +51,11 @@ class Grid extends React.Component<Props>{
         return (
             <View style={{
                 flexDirection: 'column',
-                height: '80%',
+                height: this.props.containerHeight,
                 aspectRatio: this.props.width/this.props.height,
                 marginLeft: 'auto',
                 marginRight: 'auto',
+                backgroundColor: this.props.backgroundColor,
             }}>
                 {this.getGrid()}
             </View>

screens/Tetris/components/Preview.js

@@ -0,0 +1,51 @@
+// @flow
+
+import * as React from 'react';
+import {View} from 'react-native';
+import {withTheme} from 'react-native-paper';
+import Grid from "./Grid";
+
+type Props = {
+    next: Object,
+}
+
+class Preview extends React.PureComponent<Props> {
+
+    colors: Object;
+
+    constructor(props) {
+        super(props);
+        this.colors = props.theme.colors;
+    }
+
+    getGrids() {
+        let grids = [];
+        for (let i = 0; i < this.props.next.length; i++) {
+            grids.push(
+                <Grid
+                    width={this.props.next[i][0].length}
+                    height={this.props.next[i].length}
+                    grid={this.props.next[i]}
+                    containerHeight={50}
+                    backgroundColor={'transparent'}
+                />
+            );
+        }
+        return grids;
+    }
+
+    render() {
+        if (this.props.next.length > 0) {
+            return (
+                <View>
+                    {this.getGrids()}
+                </View>
+            );
+        } else
+            return null;
+    }
+
+
+}
+
+export default withTheme(Preview);