Added previews

This commit is contained in:
Arnaud Vergnet 2020-03-17 14:22:49 +01:00
parent 7a00452cc0
commit 7da30e0af6
6 changed files with 123 additions and 24 deletions

View file

@ -39,6 +39,8 @@ export default class GameLogic {
autoRepeatActivationDelay: number;
autoRepeatDelay: number;
nextPieces: Array<Tetromino>;
nextPiecesCount: number;
onTick: Function;
onClock: Function;
@ -56,6 +58,19 @@ export default class GameLogic {
this.colors = colors;
this.autoRepeatActivationDelay = 300;
this.autoRepeatDelay = 50;
this.nextPieces = [];
this.nextPiecesCount = 3;
}
getNextPieces() {
let finalArray = [];
for (let i = 0; i < this.nextPieces.length; i++) {
finalArray.push(this.getEmptyGrid(4, 4));
let coord = this.nextPieces[i].getCellsCoordinates(false);
this.tetrominoToGrid(this.nextPieces[i], coord, finalArray[i]);
}
return finalArray;
}
getHeight(): number {
@ -74,9 +89,9 @@ export default class GameLogic {
return this.gamePaused;
}
getEmptyLine() {
getEmptyLine(width: number) {
let line = [];
for (let col = 0; col < this.getWidth(); col++) {
for (let col = 0; col < width; col++) {
line.push({
color: this.colors.tetrisBackground,
isEmpty: true,
@ -85,10 +100,10 @@ export default class GameLogic {
return line;
}
getEmptyGrid() {
getEmptyGrid(height: number, width: number) {
let grid = [];
for (let row = 0; row < this.getHeight(); row++) {
grid.push(this.getEmptyLine());
for (let row = 0; row < height; row++) {
grid.push(this.getEmptyLine(width));
}
return grid;
}
@ -98,7 +113,7 @@ export default class GameLogic {
}
getFinalGrid() {
let coord = this.currentObject.getCellsCoordinates();
let coord = this.currentObject.getCellsCoordinates(true);
let finalGrid = this.getGridCopy();
for (let i = 0; i < coord.length; i++) {
finalGrid[coord[i].y][coord[i].x] = {
@ -122,14 +137,18 @@ export default class GameLogic {
return canLevel;
}
freezeTetromino() {
let coord = this.currentObject.getCellsCoordinates();
tetrominoToGrid(object: Object, coord : Array<Object>, grid: Array<Array<Object>>) {
for (let i = 0; i < coord.length; i++) {
this.currentGrid[coord[i].y][coord[i].x] = {
color: this.currentObject.getColor(),
grid[coord[i].y][coord[i].x] = {
color: object.getColor(),
isEmpty: false,
};
}
}
freezeTetromino() {
let coord = this.currentObject.getCellsCoordinates(true);
this.tetrominoToGrid(this.currentObject, coord, this.currentGrid);
this.clearLines(this.getLinesToClear(coord));
}
@ -137,7 +156,7 @@ export default class GameLogic {
lines.sort();
for (let i = 0; i < lines.length; i++) {
this.currentGrid.splice(lines[i], 1);
this.currentGrid.unshift(this.getEmptyLine());
this.currentGrid.unshift(this.getEmptyLine(this.getWidth()));
}
switch (lines.length) {
case 1:
@ -174,7 +193,7 @@ export default class GameLogic {
isTetrominoPositionValid() {
let isValid = true;
let coord = this.currentObject.getCellsCoordinates();
let coord = this.currentObject.getCellsCoordinates(true);
for (let i = 0; i < coord.length; i++) {
if (coord[i].x >= this.getWidth()
|| coord[i].x < 0
@ -286,10 +305,21 @@ export default class GameLogic {
callback(this.getFinalGrid());
}
recoverNextPiece() {
this.currentObject = this.nextPieces.shift();
this.generateNextPieces();
}
generateNextPieces() {
while (this.nextPieces.length < this.nextPiecesCount) {
let shape = Math.floor(Math.random() * 7);
this.nextPieces.push(new Tetromino(shape, this.colors));
}
}
createTetromino() {
this.pressedOut();
let shape = Math.floor(Math.random() * 7);
this.currentObject = new Tetromino(shape, this.colors);
this.recoverNextPiece();
if (!this.isTetrominoPositionValid())
this.endGame(false);
}
@ -325,7 +355,9 @@ export default class GameLogic {
this.level = 0;
this.levelProgression = 0;
this.gameTick = GameLogic.levelTicks[this.level];
this.currentGrid = this.getEmptyGrid();
this.currentGrid = this.getEmptyGrid(this.getHeight(), this.getWidth());
this.nextPieces = [];
this.generateNextPieces();
this.createTetromino();
tickCallback(this.score, this.level, this.getFinalGrid());
clockCallback(this.gameTime);
@ -335,5 +367,4 @@ export default class GameLogic {
this.gameTimeInterval = setInterval(this.onClock, 1000);
this.endCallback = endCallback;
}
}

View file

@ -7,6 +7,7 @@ import {MaterialCommunityIcons} from "@expo/vector-icons";
import GameLogic from "./GameLogic";
import Grid from "./components/Grid";
import HeaderButton from "../../components/HeaderButton";
import Preview from "./components/Preview";
type Props = {
navigation: Object,
@ -36,7 +37,7 @@ class TetrisScreen extends React.Component<Props, State> {
this.colors = props.theme.colors;
this.logic = new GameLogic(20, 10, this.colors);
this.state = {
grid: this.logic.getEmptyGrid(),
grid: this.logic.getEmptyGrid(this.logic.getHeight(), this.logic.getWidth()),
gameRunning: false,
gameTime: 0,
gameScore: 0,
@ -241,8 +242,19 @@ class TetrisScreen extends React.Component<Props, State> {
<Grid
width={this.logic.getWidth()}
height={this.logic.getHeight()}
containerHeight={'80%'}
grid={this.state.grid}
backgroundColor={this.colors.tetrisBackground}
/>
<View style={{
position: 'absolute',
top: 50,
right: 5,
}}>
<Preview
next={this.logic.getNextPieces()}
/>
</View>
<View style={{
flexDirection: 'row',
width: '100%',

View file

@ -194,12 +194,15 @@ export default class Tetromino {
return Tetromino.colors[this.currentType];
}
getCellsCoordinates() {
getCellsCoordinates(isAbsolute: boolean) {
let coordinates = [];
for (let row = 0; row < this.currentShape.length; row++) {
for (let col = 0; col < this.currentShape[row].length; col++) {
if (this.currentShape[row][col] === 1)
if (isAbsolute)
coordinates.push({x: this.position.x + col, y: this.position.y + row});
else
coordinates.push({x: col, y: row});
}
}
return coordinates;

View file

@ -24,8 +24,8 @@ class Cell extends React.PureComponent<Props> {
<View
style={{
flex: 1,
backgroundColor: this.props.color,
borderColor: this.props.isEmpty ? this.props.color : this.colors.tetrisBorder,
backgroundColor: this.props.isEmpty ? 'transparent' : this.props.color,
borderColor: this.props.isEmpty ? 'transparent' : this.colors.tetrisBorder,
borderStyle: 'solid',
borderWidth: 1,
aspectRatio: 1,

View file

@ -8,8 +8,10 @@ import Cell from "./Cell";
type Props = {
navigation: Object,
grid: Array<Array<Object>>,
backgroundColor: string,
height: number,
width: number,
containerHeight: number|string,
}
class Grid extends React.Component<Props>{
@ -31,7 +33,6 @@ class Grid extends React.Component<Props>{
return(
<View style={{
flexDirection: 'row',
backgroundColor: this.colors.tetrisBackground
}}>
{cells}
</View>
@ -50,10 +51,11 @@ class Grid extends React.Component<Props>{
return (
<View style={{
flexDirection: 'column',
height: '80%',
height: this.props.containerHeight,
aspectRatio: this.props.width/this.props.height,
marginLeft: 'auto',
marginRight: 'auto',
backgroundColor: this.props.backgroundColor,
}}>
{this.getGrid()}
</View>

View file

@ -0,0 +1,51 @@
// @flow
import * as React from 'react';
import {View} from 'react-native';
import {withTheme} from 'react-native-paper';
import Grid from "./Grid";
type Props = {
next: Object,
}
class Preview extends React.PureComponent<Props> {
colors: Object;
constructor(props) {
super(props);
this.colors = props.theme.colors;
}
getGrids() {
let grids = [];
for (let i = 0; i < this.props.next.length; i++) {
grids.push(
<Grid
width={this.props.next[i][0].length}
height={this.props.next[i].length}
grid={this.props.next[i]}
containerHeight={50}
backgroundColor={'transparent'}
/>
);
}
return grids;
}
render() {
if (this.props.next.length > 0) {
return (
<View>
{this.getGrids()}
</View>
);
} else
return null;
}
}
export default withTheme(Preview);