Improved light mode colors and game over message

screens/Tetris/GameLogic.js

@@ -18,8 +18,10 @@ export default class GameLogic {
 
     gameTick: number;
     gameTickInterval: IntervalID;
+    gameTimeInterval: IntervalID;
 
     onTick: Function;
+    onClock: Function;
     endCallback: Function;
 
     colors: Object;
@@ -100,6 +102,7 @@ export default class GameLogic {
         for (let i = 0; i < lines.length; i++) {
             this.currentGrid.splice(lines[i], 1);
             this.currentGrid.unshift(this.getEmptyLine());
+            this.score += 100;
         }
     }
 
@@ -151,7 +154,9 @@ export default class GameLogic {
             this.currentObject.move(0, -y);
             this.freezeTetromino();
             this.createTetromino();
-        }
+        } else
+            return true;
+        return false;
     }
 
     tryRotateTetromino() {
@@ -161,10 +166,13 @@ export default class GameLogic {
     }
 
     onTick(callback: Function) {
-        this.gameTime++;
-        this.score++;
         this.tryMoveTetromino(0, 1);
-        callback(this.gameTime, this.score, this.getFinalGrid());
+        callback(this.score, this.getFinalGrid());
+    }
+
+    onClock(callback: Function) {
+        this.gameTime++;
+        callback(this.gameTime);
     }
 
     canUseInput() {
@@ -175,24 +183,34 @@ export default class GameLogic {
         if (!this.canUseInput())
             return;
 
-        this.tryMoveTetromino(1, 0);
+        if (this.tryMoveTetromino(1, 0))
-        callback(this.getFinalGrid());
+            callback(this.getFinalGrid());
     }
 
     leftPressed(callback: Function) {
         if (!this.canUseInput())
             return;
 
-        this.tryMoveTetromino(-1, 0);
+        if (this.tryMoveTetromino(-1, 0))
-        callback(this.getFinalGrid());
+            callback(this.getFinalGrid());
+    }
+
+    downPressed(callback: Function) {
+        if (!this.canUseInput())
+            return;
+
+        if (this.tryMoveTetromino(0, 1)){
+            this.score++;
+            callback(this.getFinalGrid(), this.score);
+        }
     }
 
     rotatePressed(callback: Function) {
         if (!this.canUseInput())
             return;
 
-        this.tryRotateTetromino();
+        if (this.tryRotateTetromino())
-        callback(this.getFinalGrid());
+            callback(this.getFinalGrid());
     }
 
     createTetromino() {
@@ -208,8 +226,10 @@ export default class GameLogic {
         this.gamePaused = !this.gamePaused;
         if (this.gamePaused) {
             clearInterval(this.gameTickInterval);
+            clearInterval(this.gameTimeInterval);
         } else {
             this.gameTickInterval = setInterval(this.onTick, this.gameTick);
+            this.gameTimeInterval = setInterval(this.onClock, 1000);
         }
     }
 
@@ -217,10 +237,11 @@ export default class GameLogic {
         this.gameRunning = false;
         this.gamePaused = false;
         clearInterval(this.gameTickInterval);
+        clearInterval(this.gameTimeInterval);
         this.endCallback(this.gameTime, this.score, isRestart);
     }
 
-    startGame(tickCallback: Function, endCallback: Function) {
+    startGame(tickCallback: Function, clockCallback: Function, endCallback: Function) {
         if (this.gameRunning)
             this.endGame(true);
         this.gameRunning = true;
@@ -229,9 +250,12 @@ export default class GameLogic {
         this.score = 0;
         this.currentGrid = this.getEmptyGrid();
         this.createTetromino();
-        tickCallback(this.gameTime, this.score, this.getFinalGrid());
+        tickCallback(this.score, this.getFinalGrid());
+        clockCallback(this.gameTime);
         this.onTick = this.onTick.bind(this, tickCallback);
+        this.onClock = this.onClock.bind(this, clockCallback);
         this.gameTickInterval = setInterval(this.onTick, this.gameTick);
+        this.gameTimeInterval = setInterval(this.onClock, 1000);
         this.endCallback = endCallback;
     }
 

screens/Tetris/TetrisScreen.js

@@ -25,8 +25,10 @@ class TetrisScreen extends React.Component<Props, State> {
 
     logic: GameLogic;
     onTick: Function;
+    onClock: Function;
     onGameEnd: Function;
     updateGrid: Function;
+    updateGridScore: Function;
 
     constructor(props) {
         super(props);
@@ -39,8 +41,10 @@ class TetrisScreen extends React.Component<Props, State> {
             gameScore: 0,
         };
         this.onTick = this.onTick.bind(this);
+        this.onClock = this.onClock.bind(this);
         this.onGameEnd = this.onGameEnd.bind(this);
         this.updateGrid = this.updateGrid.bind(this);
+        this.updateGridScore = this.updateGridScore.bind(this);
         this.props.navigation.addListener('blur', this.onScreenBlur.bind(this));
         this.props.navigation.addListener('focus', this.onScreenFocus.bind(this));
     }
@@ -79,20 +83,32 @@ class TetrisScreen extends React.Component<Props, State> {
             this.showPausePopup();
     }
 
-    onTick(time: number, score: number, newGrid: Array<Array<Object>>) {
+    onTick(score: number, newGrid: Array<Array<Object>>) {
         this.setState({
-            gameTime: time,
             gameScore: score,
             grid: newGrid,
         });
     }
 
+    onClock(time: number) {
+        this.setState({
+            gameTime: time,
+        });
+    }
+
     updateGrid(newGrid: Array<Array<Object>>) {
         this.setState({
             grid: newGrid,
         });
     }
 
+    updateGridScore(newGrid: Array<Array<Object>>, score: number) {
+        this.setState({
+            grid: newGrid,
+            gameScore: score,
+        });
+    }
+
     togglePause() {
         this.logic.togglePause();
         if (this.logic.isGamePaused())
@@ -124,9 +140,11 @@ class TetrisScreen extends React.Component<Props, State> {
     }
 
     showGameOverConfirm() {
+        let message = 'SCORE: ' + this.state.gameScore + '\n';
+        message += 'TIME: ' + this.state.gameTime + '\n';
         Alert.alert(
             'GAME OVER',
-            'NOOB',
+            message,
             [
                 {text: 'LEAVE', onPress: () => this.props.navigation.goBack()},
                 {text: 'RESTART', onPress: () => this.startGame()},
@@ -136,7 +154,7 @@ class TetrisScreen extends React.Component<Props, State> {
     }
 
     startGame() {
-        this.logic.startGame(this.onTick, this.onGameEnd);
+        this.logic.startGame(this.onTick, this.onClock, this.onGameEnd);
         this.setState({
             gameRunning: true,
         });
@@ -194,28 +212,33 @@ class TetrisScreen extends React.Component<Props, State> {
                 />
                 <View style={{
                     flexDirection: 'row',
-                    marginLeft: 'auto',
+                    width: '100%',
-                    marginRight: 'auto',
                 }}>
                     <IconButton
                         icon="format-rotate-90"
                         size={40}
                         onPress={() => this.logic.rotatePressed(this.updateGrid)}
+                        style={{marginRight: 'auto'}}
                     />
-                    <IconButton
+                    <View style={{
-                        icon="arrow-left"
+                        flexDirection: 'row',
-                        size={40}
+                    }}>
-                        onPress={() => this.logic.leftPressed(this.updateGrid)}
+                        <IconButton
-                    />
+                            icon="arrow-left"
-                    <IconButton
+                            size={40}
-                        icon="arrow-right"
+                            onPress={() => this.logic.leftPressed(this.updateGrid)}
-                        size={40}
+                        />
-                        onPress={() => this.logic.rightPressed(this.updateGrid)}
+                        <IconButton
-                    />
+                            icon="arrow-right"
+                            size={40}
+                            onPress={() => this.logic.rightPressed(this.updateGrid)}
+                        />
+                    </View>
                     <IconButton
                         icon="arrow-down"
                         size={40}
-                        onPress={() => this.logic.rightPressed(this.updateGrid)}
+                        onPress={() => this.logic.downPressed(this.updateGridScore)}
+                        style={{marginLeft: 'auto'}}
                     />
                 </View>
             </View>

utils/ThemeManager.js

@@ -56,16 +56,16 @@ export default class ThemeManager {
                 tutorinsaColor: '#f93943',
 
                 // Tetris
-                tetrisBackground:'#d1d1d1',
+                tetrisBackground:'#e6e6e6',
-                tetrisBorder:'#afafaf',
+                tetrisBorder:'#2f2f2f',
-                tetrisScore:'#fff307',
+                tetrisScore:'#e2bd33',
-                tetrisI : '#42f1ff',
+                tetrisI : '#3cd9e6',
                 tetrisO : '#ffdd00',
-                tetrisT : '#ba19ff',
+                tetrisT : '#a716e5',
-                tetrisS : '#0bff34',
+                tetrisS : '#09c528',
                 tetrisZ : '#ff0009',
-                tetrisJ : '#134cff',
+                tetrisJ : '#2a67e3',
-                tetrisL : '#ff8834',
+                tetrisL : '#da742d',
             },
         };
     }