forked from vergnet/application-amicale
117 lines
3 KiB
JavaScript
117 lines
3 KiB
JavaScript
|
// @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;
|
||
|
updateGrid: Function;
|
||
|
|
||
|
constructor(props) {
|
||
|
super(props);
|
||
|
this.colors = props.theme.colors;
|
||
|
this.logic = new GameLogic(20, 10);
|
||
|
this.state = {
|
||
|
grid: this.logic.getEmptyGrid(),
|
||
|
gameTime: 0,
|
||
|
gameScore: 0,
|
||
|
};
|
||
|
this.onTick = this.onTick.bind(this);
|
||
|
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()) {
|
||
|
this.logic.startGame(this.onTick);
|
||
|
}
|
||
|
}
|
||
|
|
||
|
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}
|
||
|
onPress={() => this.startGame()}
|
||
|
/>
|
||
|
</View>
|
||
|
</View>
|
||
|
);
|
||
|
}
|
||
|
|
||
|
}
|
||
|
|
||
|
export default withTheme(TetrisScreen);
|