123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304 |
- // @flow
-
- import * as React from 'react';
- import {Alert, View} from 'react-native';
- import {IconButton, Text, withTheme} from 'react-native-paper';
- import {MaterialCommunityIcons} from "@expo/vector-icons";
- import GameLogic from "./GameLogic";
- import Grid from "./components/Grid";
- import HeaderButton from "../../components/Custom/HeaderButton";
- import Preview from "./components/Preview";
- import i18n from "i18n-js";
-
- type Props = {
- navigation: Object,
- }
-
- type State = {
- grid: Array<Array<Object>>,
- gameRunning: boolean,
- gameTime: number,
- gameScore: number,
- gameLevel: number,
- }
-
- class TetrisScreen extends React.Component<Props, State> {
-
- colors: Object;
-
- logic: GameLogic;
- onTick: Function;
- onClock: Function;
- onGameEnd: Function;
- updateGrid: Function;
- updateGridScore: Function;
-
- constructor(props) {
- super(props);
- this.colors = props.theme.colors;
- this.logic = new GameLogic(20, 10, this.colors);
- this.state = {
- grid: this.logic.getCurrentGrid(),
- gameRunning: false,
- gameTime: 0,
- gameScore: 0,
- gameLevel: 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));
- }
-
- componentDidMount() {
- const rightButton = this.getRightButton.bind(this);
- this.props.navigation.setOptions({
- headerRight: rightButton,
- });
- this.startGame();
- }
-
- getRightButton() {
- return (
- <View
- style={{
- flexDirection: 'row',
- }}>
- <HeaderButton icon={'pause'} onPress={() => this.togglePause()}/>
- </View>
- );
- }
-
- /**
- * Remove any interval on un-focus
- */
- onScreenBlur() {
- if (!this.logic.isGamePaused())
- this.logic.togglePause();
- }
-
- onScreenFocus() {
- if (!this.logic.isGameRunning())
- this.startGame();
- else if (this.logic.isGamePaused())
- this.showPausePopup();
- }
-
- getFormattedTime(seconds: number) {
- let date = new Date();
- date.setHours(0);
- date.setMinutes(0);
- date.setSeconds(seconds);
- let format;
- if (date.getHours())
- format = date.getHours() + ':' + date.getMinutes() + ':' + date.getSeconds();
- else if (date.getMinutes())
- format = date.getMinutes() + ':' + date.getSeconds();
- else
- format = date.getSeconds();
- return format;
- }
-
- onTick(score: number, level: number, newGrid: Array<Array<Object>>) {
- this.setState({
- gameScore: score,
- gameLevel: level,
- 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())
- this.showPausePopup();
- }
-
- showPausePopup() {
- Alert.alert(
- i18n.t("game.pause"),
- i18n.t("game.pauseMessage"),
- [
- {text: i18n.t("game.restart.text"), onPress: () => this.showRestartConfirm()},
- {text: i18n.t("game.resume"), onPress: () => this.togglePause()},
- ],
- {cancelable: false},
- );
- }
-
- showRestartConfirm() {
- Alert.alert(
- i18n.t("game.restart.confirm"),
- i18n.t("game.restart.confirmMessage"),
- [
- {text: i18n.t("game.restart.confirmNo"), onPress: () => this.showPausePopup()},
- {text: i18n.t("game.restart.confirmYes"), onPress: () => this.startGame()},
- ],
- {cancelable: false},
- );
- }
-
- showGameOverConfirm() {
- let message = i18n.t("game.gameOver.score") + this.state.gameScore + '\n';
- message += i18n.t("game.gameOver.level") + this.state.gameLevel + '\n';
- message += i18n.t("game.gameOver.time") + this.getFormattedTime(this.state.gameTime) + '\n';
- Alert.alert(
- i18n.t("game.gameOver.text"),
- message,
- [
- {text: i18n.t("game.gameOver.exit"), onPress: () => this.props.navigation.goBack()},
- {text: i18n.t("game.restart.text"), onPress: () => this.startGame()},
- ],
- {cancelable: false},
- );
- }
-
- startGame() {
- this.logic.startGame(this.onTick, this.onClock, this.onGameEnd);
- this.setState({
- gameRunning: true,
- });
- }
-
- onGameEnd(time: number, score: number, isRestart: boolean) {
- this.setState({
- gameTime: time,
- gameScore: score,
- gameRunning: false,
- });
- if (!isRestart)
- this.showGameOverConfirm();
- }
-
- render() {
- return (
- <View style={{
- width: '100%',
- height: '100%',
- }}>
- <View style={{
- flexDirection: 'row',
- position: 'absolute',
- top: 5,
- left: 10,
- }}>
- <MaterialCommunityIcons
- name={'timer'}
- color={this.colors.subtitle}
- size={20}/>
- <Text style={{
- marginLeft: 5,
- color: this.colors.subtitle
- }}>{this.getFormattedTime(this.state.gameTime)}</Text>
- </View>
- <View style={{
- flexDirection: 'row',
- position: 'absolute',
- top: 50,
- left: 10,
- }}>
- <MaterialCommunityIcons
- name={'gamepad'}
- color={this.colors.text}
- size={20}/>
- <Text style={{
- marginLeft: 5
- }}>{this.state.gameLevel}</Text>
- </View>
- <View style={{
- flexDirection: 'row',
- marginRight: 'auto',
- marginLeft: 'auto',
- }}>
- <MaterialCommunityIcons
- name={'star'}
- color={this.colors.tetrisScore}
- size={30}/>
- <Text style={{
- marginLeft: 5,
- fontSize: 22,
- }}>{this.state.gameScore}</Text>
- </View>
- <Grid
- width={this.logic.getWidth()}
- height={this.logic.getHeight()}
- containerMaxHeight={'80%'}
- containerMaxWidth={'60%'}
- grid={this.state.grid}
- backgroundColor={this.colors.tetrisBackground}
- />
- <View style={{
- position: 'absolute',
- top: 50,
- right: 5,
- }}>
- <Preview
- next={this.logic.getNextPiecesPreviews()}
- />
- </View>
- <View style={{
- position: 'absolute',
- bottom: 0,
- flexDirection: 'row',
- width: '100%',
- }}>
- <IconButton
- icon="rotate-right-variant"
- size={40}
- onPress={() => this.logic.rotatePressed(this.updateGrid)}
- style={{marginRight: 'auto'}}
- />
- <View style={{
- flexDirection: 'row',
- }}>
- <IconButton
- icon="arrow-left"
- size={40}
- onPress={() => this.logic.pressedOut()}
- onPressIn={() => this.logic.leftPressedIn(this.updateGrid)}
-
- />
- <IconButton
- icon="arrow-right"
- size={40}
- onPress={() => this.logic.pressedOut()}
- onPressIn={() => this.logic.rightPressed(this.updateGrid)}
- />
- </View>
- <IconButton
- icon="arrow-down"
- size={40}
- onPressIn={() => this.logic.downPressedIn(this.updateGridScore)}
- onPress={() => this.logic.pressedOut()}
- style={{marginLeft: 'auto'}}
- color={this.colors.tetrisScore}
- />
- </View>
- </View>
- );
- }
-
- }
-
- export default withTheme(TetrisScreen);
|