From 4bff6e15a8b71b79ecf70d30ffc2526e5a14734d Mon Sep 17 00:00:00 2001 From: Arnaud Vergnet Date: Sat, 18 Jul 2020 22:38:17 +0200 Subject: [PATCH] Improved game UI --- locales/en.json | 3 + locales/fr.json | 11 +- src/managers/ThemeManager.js | 6 +- src/screens/Game/components/CellComponent.js | 5 +- src/screens/Game/components/GridComponent.js | 16 +- src/screens/Game/components/Preview.js | 11 +- src/screens/Game/screens/GameMainScreen.js | 250 ++++++++++++------- 7 files changed, 179 insertions(+), 123 deletions(-) diff --git a/locales/en.json b/locales/en.json index 6ffb965..83ecee6 100644 --- a/locales/en.json +++ b/locales/en.json @@ -363,6 +363,9 @@ }, "game": { "title": "Game", + "score": "Score : %{score}", + "time": "Time :", + "level": "Level :", "pause": "Game Paused", "pauseMessage": "The game is paused", "resume": "Resume", diff --git a/locales/fr.json b/locales/fr.json index 121fbf5..bdf848c 100644 --- a/locales/fr.json +++ b/locales/fr.json @@ -361,16 +361,19 @@ "homeButtonSubtitle": "Contacte le développeur de l'appli" }, "game": { - "title": "Le jeu trop ouf", + "title": "Le Jeu trop ouf", + "score": "Score : %{score}", + "time": "Temps :", + "level": "Niveau :", "pause": "Pause", - "pauseMessage": "Le jeu est en pause", + "pauseMessage": "T'as fait pause, t'es nul", "resume": "Continuer", "restart": { "text": "Redémarrer", - "confirm": "Est-tu sûr de vouloir redémarrer ?", + "confirm": "T'es sûr de vouloir redémarrer ?", "confirmMessage": "Tout ton progrès sera perdu, continuer ?", "confirmYes": "Oui", - "confirmNo": "Non" + "confirmNo": "Oula non" }, "gameOver": { "text": "Game Over", diff --git a/src/managers/ThemeManager.js b/src/managers/ThemeManager.js index be51ba5..7404aeb 100644 --- a/src/managers/ThemeManager.js +++ b/src/managers/ThemeManager.js @@ -119,8 +119,7 @@ export default class ThemeManager { tutorinsaColor: '#f93943', // Tetris - tetrisBackground: '#e6e6e6', - tetrisBorder: '#2f2f2f', + tetrisBackground: '#f0f0f0', tetrisScore: '#e2bd33', tetrisI: '#3cd9e6', tetrisO: '#ffdd00', @@ -182,8 +181,7 @@ export default class ThemeManager { tutorinsaColor: '#f93943', // Tetris - tetrisBackground: '#2c2c2c', - tetrisBorder: '#1b1b1b', + tetrisBackground: '#181818', tetrisScore: '#e2d707', tetrisI: '#30b3be', tetrisO: '#c1a700', diff --git a/src/screens/Game/components/CellComponent.js b/src/screens/Game/components/CellComponent.js index 7b952b0..27a9557 100644 --- a/src/screens/Game/components/CellComponent.js +++ b/src/screens/Game/components/CellComponent.js @@ -21,9 +21,8 @@ class CellComponent extends React.PureComponent { style={{ flex: 1, backgroundColor: item.isEmpty ? 'transparent' : item.color, - borderColor: item.isEmpty ? 'transparent' : this.props.theme.colors.tetrisBorder, - borderStyle: 'solid', - borderRadius: 2, + borderColor: 'transparent', + borderRadius: 4, borderWidth: 1, aspectRatio: 1, }} diff --git a/src/screens/Game/components/GridComponent.js b/src/screens/Game/components/GridComponent.js index 0e6092a..2610562 100644 --- a/src/screens/Game/components/GridComponent.js +++ b/src/screens/Game/components/GridComponent.js @@ -5,16 +5,15 @@ import {View} from 'react-native'; import {withTheme} from 'react-native-paper'; import type {Cell} from "./CellComponent"; import CellComponent from "./CellComponent"; +import type {ViewStyle} from "react-native/Libraries/StyleSheet/StyleSheet"; export type Grid = Array>; type Props = { grid: Array>, - backgroundColor: string, height: number, width: number, - containerMaxHeight: number | string, - containerMaxWidth: number | string, + style: ViewStyle, } class GridComponent extends React.Component { @@ -23,10 +22,7 @@ class GridComponent extends React.Component { let cells = this.props.grid[rowNumber].map(this.getCellRender); return ( {cells} @@ -49,12 +45,8 @@ class GridComponent extends React.Component { render() { return ( {this.getGrid()} diff --git a/src/screens/Game/components/Preview.js b/src/screens/Game/components/Preview.js index 8313a69..942349c 100644 --- a/src/screens/Game/components/Preview.js +++ b/src/screens/Game/components/Preview.js @@ -5,9 +5,11 @@ import {View} from 'react-native'; import {withTheme} from 'react-native-paper'; import type {Grid} from "./GridComponent"; import GridComponent from "./GridComponent"; +import type {ViewStyle} from "react-native/Libraries/StyleSheet/StyleSheet"; type Props = { items: Array, + style: ViewStyle } class Preview extends React.PureComponent { @@ -25,9 +27,10 @@ class Preview extends React.PureComponent { width={item[0].length} height={item.length} grid={item} - containerMaxHeight={50} - containerMaxWidth={50} - backgroundColor={'transparent'} + style={{ + marginRight: 5, + marginLeft: 5, + }} key={index.toString()} />; }; @@ -35,7 +38,7 @@ class Preview extends React.PureComponent { render() { if (this.props.items.length > 0) { return ( - + {this.getGrids()} ); diff --git a/src/screens/Game/screens/GameMainScreen.js b/src/screens/Game/screens/GameMainScreen.js index 1e56ad6..2d0bd3a 100644 --- a/src/screens/Game/screens/GameMainScreen.js +++ b/src/screens/Game/screens/GameMainScreen.js @@ -2,7 +2,7 @@ import * as React from 'react'; import {View} from 'react-native'; -import {IconButton, Text, withTheme} from 'react-native-paper'; +import {Caption, IconButton, Text, withTheme} from 'react-native-paper'; import MaterialCommunityIcons from "react-native-vector-icons/MaterialCommunityIcons"; import GameLogic from "../logic/GameLogic"; import type {Grid} from "../components/GridComponent"; @@ -51,7 +51,8 @@ class GameMainScreen extends React.Component { dialogTitle: "", dialogMessage: "", dialogButtons: [], - onDialogDismiss: () => {}, + onDialogDismiss: () => { + }, }; this.props.navigation.addListener('blur', this.onScreenBlur); this.props.navigation.addListener('focus', this.onScreenFocus); @@ -146,11 +147,11 @@ class GameMainScreen extends React.Component { dialogMessage: i18n.t("screens.game.pauseMessage"), dialogButtons: [ { - title: i18n.t("screens.game.restart.text"), + title: i18n.t("screens.game.restart.text"), onPress: this.showRestartConfirm }, { - title: i18n.t("screens.game.resume"), + title: i18n.t("screens.game.resume"), onPress: onDismiss } ], @@ -165,14 +166,14 @@ class GameMainScreen extends React.Component { dialogMessage: i18n.t("screens.game.restart.confirmMessage"), dialogButtons: [ { - title: i18n.t("screens.game.restart.confirmYes"), + title: i18n.t("screens.game.restart.confirmYes"), onPress: () => { this.onDialogDismiss(); this.startGame(); } }, { - title: i18n.t("screens.game.restart.confirmNo"), + title: i18n.t("screens.game.restart.confirmNo"), onPress: this.showPausePopup } ], @@ -194,11 +195,11 @@ class GameMainScreen extends React.Component { dialogMessage: message, dialogButtons: [ { - title: i18n.t("screens.game.gameOver.exit"), + title: i18n.t("screens.game.gameOver.exit"), onPress: () => this.props.navigation.goBack() }, { - title: i18n.t("screens.game.resume"), + title: i18n.t("screens.game.resume"), onPress: onDismiss } ], @@ -223,111 +224,168 @@ class GameMainScreen extends React.Component { this.showGameOverConfirm(); } - render() { - const colors = this.props.theme.colors; + getStatusIcons() { return ( - - {this.getFormattedTime(this.state.gameTime)} - - - - {this.state.gameLevel} - - - - {this.state.gameScore} + {i18n.t("screens.game.time")} + + + {this.getFormattedTime(this.state.gameTime)} + + - + {i18n.t("screens.game.level")} + + + {this.state.gameLevel} + + + + ); + } + + getScoreIcon() { + return ( + + {i18n.t("screens.game.score", {score: this.state.gameScore})} + + + ); + } + + getControlButtons() { + return ( + + this.logic.rotatePressed(this.updateGrid)} + style={{flex: 1}} /> - - - this.logic.rotatePressed(this.updateGrid)} - style={{marginRight: 'auto'}} - /> - - this.logic.pressedOut()} - onPressIn={() => this.logic.leftPressedIn(this.updateGrid)} + style={{flex: 1}} + onPress={() => this.logic.pressedOut()} + onPressIn={() => this.logic.leftPressedIn(this.updateGrid)} - /> - this.logic.pressedOut()} - onPressIn={() => this.logic.rightPressed(this.updateGrid)} + /> + this.logic.pressedOut()} + onPressIn={() => this.logic.rightPressed(this.updateGrid)} + /> + + this.logic.downPressedIn(this.updateGridScore)} + onPress={() => this.logic.pressedOut()} + style={{flex: 1}} + color={this.props.theme.colors.tetrisScore} + /> + + ); + } + + render() { + return ( + + + {this.getStatusIcons()} + + {this.getScoreIcon()} + + + + + - this.logic.downPressedIn(this.updateGridScore)} - onPress={() => this.logic.pressedOut()} - style={{marginLeft: 'auto'}} - color={colors.tetrisScore} - /> + {this.getControlButtons()} +