123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449 |
- // @flow
-
- import * as React from 'react';
- import {View} from 'react-native';
- import {Caption, IconButton, Text, withTheme} from 'react-native-paper';
- import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
- import i18n from 'i18n-js';
- import {StackNavigationProp} from '@react-navigation/stack';
- import GameLogic from '../logic/GameLogic';
- import type {GridType} from '../components/GridComponent';
- import GridComponent from '../components/GridComponent';
- import Preview from '../components/Preview';
- import MaterialHeaderButtons, {
- Item,
- } from '../../../components/Overrides/CustomHeaderButton';
- import type {CustomThemeType} from '../../../managers/ThemeManager';
- import type {OptionsDialogButtonType} from '../../../components/Dialogs/OptionsDialog';
- import OptionsDialog from '../../../components/Dialogs/OptionsDialog';
-
- type PropsType = {
- navigation: StackNavigationProp,
- route: {params: {highScore: number}},
- theme: CustomThemeType,
- };
-
- type StateType = {
- grid: GridType,
- gameTime: number,
- gameScore: number,
- gameLevel: number,
-
- dialogVisible: boolean,
- dialogTitle: string,
- dialogMessage: string,
- dialogButtons: Array<OptionsDialogButtonType>,
- onDialogDismiss: () => void,
- };
-
- class GameMainScreen extends React.Component<PropsType, StateType> {
- static getFormattedTime(seconds: number): string {
- const 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().toString();
- return format;
- }
-
- logic: GameLogic;
-
- highScore: number | null;
-
- constructor(props: PropsType) {
- super(props);
- this.logic = new GameLogic(20, 10, props.theme);
- this.state = {
- grid: this.logic.getCurrentGrid(),
- gameTime: 0,
- gameScore: 0,
- gameLevel: 0,
- dialogVisible: false,
- dialogTitle: '',
- dialogMessage: '',
- dialogButtons: [],
- onDialogDismiss: () => {},
- };
- if (props.route.params != null)
- this.highScore = props.route.params.highScore;
- }
-
- componentDidMount() {
- const {navigation} = this.props;
- navigation.setOptions({
- headerRight: this.getRightButton,
- });
- this.startGame();
- }
-
- componentWillUnmount() {
- this.logic.endGame(false);
- }
-
- getRightButton = (): React.Node => {
- return (
- <MaterialHeaderButtons>
- <Item title="pause" iconName="pause" onPress={this.togglePause} />
- </MaterialHeaderButtons>
- );
- };
-
- onTick = (score: number, level: number, newGrid: GridType) => {
- this.setState({
- gameScore: score,
- gameLevel: level,
- grid: newGrid,
- });
- };
-
- onClock = (time: number) => {
- this.setState({
- gameTime: time,
- });
- };
-
- onDialogDismiss = () => {
- this.setState({dialogVisible: false});
- };
-
- onGameEnd = (time: number, score: number, isRestart: boolean) => {
- const {props, state} = this;
- this.setState({
- gameTime: time,
- gameScore: score,
- });
- if (!isRestart)
- props.navigation.replace('game-start', {
- score: state.gameScore,
- level: state.gameLevel,
- time: state.gameTime,
- });
- };
-
- getStatusIcons(): React.Node {
- const {props, state} = this;
- return (
- <View
- style={{
- flex: 1,
- marginTop: 'auto',
- marginBottom: 'auto',
- }}>
- <View
- style={{
- marginLeft: 'auto',
- marginRight: 'auto',
- }}>
- <Caption
- style={{
- marginLeft: 'auto',
- marginRight: 'auto',
- marginBottom: 5,
- }}>
- {i18n.t('screens.game.time')}
- </Caption>
- <View
- style={{
- flexDirection: 'row',
- }}>
- <MaterialCommunityIcons
- name="timer"
- color={props.theme.colors.subtitle}
- size={20}
- />
- <Text
- style={{
- marginLeft: 5,
- color: props.theme.colors.subtitle,
- }}>
- {GameMainScreen.getFormattedTime(state.gameTime)}
- </Text>
- </View>
- </View>
- <View
- style={{
- marginLeft: 'auto',
- marginRight: 'auto',
- marginTop: 20,
- }}>
- <Caption
- style={{
- marginLeft: 'auto',
- marginRight: 'auto',
- marginBottom: 5,
- }}>
- {i18n.t('screens.game.level')}
- </Caption>
- <View
- style={{
- flexDirection: 'row',
- }}>
- <MaterialCommunityIcons
- name="gamepad-square"
- color={props.theme.colors.text}
- size={20}
- />
- <Text
- style={{
- marginLeft: 5,
- }}>
- {state.gameLevel}
- </Text>
- </View>
- </View>
- </View>
- );
- }
-
- getScoreIcon(): React.Node {
- const {props, state} = this;
- const highScore =
- this.highScore == null || state.gameScore > this.highScore
- ? state.gameScore
- : this.highScore;
- return (
- <View
- style={{
- marginTop: 10,
- marginBottom: 10,
- }}>
- <View
- style={{
- flexDirection: 'row',
- marginLeft: 'auto',
- marginRight: 'auto',
- }}>
- <Text
- style={{
- marginLeft: 5,
- fontSize: 20,
- }}>
- {i18n.t('screens.game.score', {score: state.gameScore})}
- </Text>
- <MaterialCommunityIcons
- name="star"
- color={props.theme.colors.tetrisScore}
- size={20}
- style={{
- marginTop: 'auto',
- marginBottom: 'auto',
- marginLeft: 5,
- }}
- />
- </View>
- <View
- style={{
- flexDirection: 'row',
- marginLeft: 'auto',
- marginRight: 'auto',
- marginTop: 5,
- }}>
- <Text
- style={{
- marginLeft: 5,
- fontSize: 10,
- color: props.theme.colors.textDisabled,
- }}>
- {i18n.t('screens.game.highScore', {score: highScore})}
- </Text>
- <MaterialCommunityIcons
- name="star"
- color={props.theme.colors.tetrisScore}
- size={10}
- style={{
- marginTop: 'auto',
- marginBottom: 'auto',
- marginLeft: 5,
- }}
- />
- </View>
- </View>
- );
- }
-
- getControlButtons(): React.Node {
- const {props} = this;
- return (
- <View
- style={{
- height: 80,
- flexDirection: 'row',
- }}>
- <IconButton
- icon="rotate-right-variant"
- size={40}
- onPress={() => {
- this.logic.rotatePressed(this.updateGrid);
- }}
- style={{flex: 1}}
- />
- <View
- style={{
- flexDirection: 'row',
- flex: 4,
- }}>
- <IconButton
- icon="chevron-left"
- size={40}
- style={{flex: 1}}
- onPress={() => {
- this.logic.pressedOut();
- }}
- onPressIn={() => {
- this.logic.leftPressedIn(this.updateGrid);
- }}
- />
- <IconButton
- icon="chevron-right"
- size={40}
- style={{flex: 1}}
- onPress={() => {
- this.logic.pressedOut();
- }}
- onPressIn={() => {
- this.logic.rightPressed(this.updateGrid);
- }}
- />
- </View>
- <IconButton
- icon="arrow-down-bold"
- size={40}
- onPressIn={() => {
- this.logic.downPressedIn(this.updateGridScore);
- }}
- onPress={() => {
- this.logic.pressedOut();
- }}
- style={{flex: 1}}
- color={props.theme.colors.tetrisScore}
- />
- </View>
- );
- }
-
- updateGrid = (newGrid: GridType) => {
- this.setState({
- grid: newGrid,
- });
- };
-
- updateGridScore = (newGrid: GridType, score?: number) => {
- this.setState((prevState: StateType): {
- grid: GridType,
- gameScore: number,
- } => ({
- grid: newGrid,
- gameScore: score != null ? score : prevState.gameScore,
- }));
- };
-
- togglePause = () => {
- this.logic.togglePause();
- if (this.logic.isGamePaused()) this.showPausePopup();
- };
-
- showPausePopup = () => {
- const onDismiss = () => {
- this.togglePause();
- this.onDialogDismiss();
- };
- this.setState({
- dialogVisible: true,
- dialogTitle: i18n.t('screens.game.pause'),
- dialogMessage: i18n.t('screens.game.pauseMessage'),
- dialogButtons: [
- {
- title: i18n.t('screens.game.restart.text'),
- onPress: this.showRestartConfirm,
- },
- {
- title: i18n.t('screens.game.resume'),
- onPress: onDismiss,
- },
- ],
- onDialogDismiss: onDismiss,
- });
- };
-
- showRestartConfirm = () => {
- this.setState({
- dialogVisible: true,
- dialogTitle: i18n.t('screens.game.restart.confirm'),
- dialogMessage: i18n.t('screens.game.restart.confirmMessage'),
- dialogButtons: [
- {
- title: i18n.t('screens.game.restart.confirmYes'),
- onPress: () => {
- this.onDialogDismiss();
- this.startGame();
- },
- },
- {
- title: i18n.t('screens.game.restart.confirmNo'),
- onPress: this.showPausePopup,
- },
- ],
- onDialogDismiss: this.showPausePopup,
- });
- };
-
- startGame = () => {
- this.logic.startGame(this.onTick, this.onClock, this.onGameEnd);
- };
-
- render(): React.Node {
- const {props, state} = this;
- return (
- <View style={{flex: 1}}>
- <View
- style={{
- flex: 1,
- flexDirection: 'row',
- }}>
- {this.getStatusIcons()}
- <View style={{flex: 4}}>
- {this.getScoreIcon()}
- <GridComponent
- width={this.logic.getWidth()}
- height={this.logic.getHeight()}
- grid={state.grid}
- style={{
- backgroundColor: props.theme.colors.tetrisBackground,
- flex: 1,
- marginLeft: 'auto',
- marginRight: 'auto',
- }}
- />
- </View>
-
- <View style={{flex: 1}}>
- <Preview
- items={this.logic.getNextPiecesPreviews()}
- style={{
- marginLeft: 'auto',
- marginRight: 'auto',
- marginTop: 10,
- }}
- />
- </View>
- </View>
- {this.getControlButtons()}
-
- <OptionsDialog
- visible={state.dialogVisible}
- title={state.dialogTitle}
- message={state.dialogMessage}
- buttons={state.dialogButtons}
- onDismiss={state.onDialogDismiss}
- />
- </View>
- );
- }
- }
-
- export default withTheme(GameMainScreen);
|