application-amicale/screens/Tetris/TetrisScreen.js

131 lines
3.4 KiB
JavaScript
Raw Normal View History

2020-03-15 18:44:32 +01:00
// @flow
import * as React from 'react';
import {View} from 'react-native';
import {IconButton, Text, withTheme} from 'react-native-paper';
import GameLogic from "./GameLogic";
import Grid from "./components/Grid";
type Props = {
navigation: Object,
}
type State = {
grid: Array<Array<Object>>,
gameTime: number,
gameScore: number
}
class TetrisScreen extends React.Component<Props, State> {
colors: Object;
logic: GameLogic;
onTick: Function;
2020-03-15 19:28:41 +01:00
onGameEnd: Function;
2020-03-15 18:44:32 +01:00
updateGrid: Function;
constructor(props) {
super(props);
this.colors = props.theme.colors;
2020-03-15 20:34:20 +01:00
this.logic = new GameLogic(20, 10, this.colors);
2020-03-15 18:44:32 +01:00
this.state = {
grid: this.logic.getEmptyGrid(),
gameTime: 0,
gameScore: 0,
};
this.onTick = this.onTick.bind(this);
2020-03-15 19:28:41 +01:00
this.onGameEnd = this.onGameEnd.bind(this);
2020-03-15 18:44:32 +01:00
this.updateGrid = this.updateGrid.bind(this);
const onScreenBlur = this.onScreenBlur.bind(this);
this.props.navigation.addListener('blur', onScreenBlur);
}
/**
* Remove any interval on un-focus
*/
onScreenBlur() {
this.logic.endGame();
}
onTick(time: number, score: number, newGrid: Array<Array<Object>>) {
this.setState({
gameTime: time,
gameScore: score,
grid: newGrid,
});
}
updateGrid(newGrid: Array<Array<Object>>) {
this.setState({
grid: newGrid,
});
}
startGame() {
if (!this.logic.isGameRunning()) {
2020-03-15 19:28:41 +01:00
this.logic.startGame(this.onTick, this.onGameEnd);
2020-03-15 18:44:32 +01:00
}
}
2020-03-15 19:28:41 +01:00
onGameEnd(time: number, score: number) {
this.setState({
gameTime: time,
gameScore: score,
})
}
2020-03-15 18:44:32 +01:00
render() {
return (
<View style={{
width: '100%',
height: '100%',
}}>
<Text style={{
textAlign: 'center',
}}>
Score: {this.state.gameScore}
</Text>
<Text style={{
textAlign: 'center',
}}>
time: {this.state.gameTime}
</Text>
<Grid
width={this.logic.getWidth()}
height={this.logic.getHeight()}
grid={this.state.grid}
/>
<View style={{
flexDirection: 'row-reverse',
}}>
<IconButton
icon="arrow-right"
size={40}
onPress={() => this.logic.rightPressed(this.updateGrid)}
/>
<IconButton
icon="arrow-left"
size={40}
onPress={() => this.logic.leftPressed(this.updateGrid)}
/>
<IconButton
icon="format-rotate-90"
size={40}
2020-03-15 19:28:41 +01:00
onPress={() => this.logic.rotatePressed(this.updateGrid)}
2020-03-15 18:44:32 +01:00
/>
2020-03-15 19:28:41 +01:00
<IconButton
icon="power"
size={40}
onPress={() => this.startGame()}
/>
2020-03-15 18:44:32 +01:00
</View>
</View>
);
}
}
export default withTheme(TetrisScreen);