forked from vergnet/application-amicale
Added previews
This commit is contained in:
parent
7a00452cc0
commit
7da30e0af6
6 changed files with 123 additions and 24 deletions
|
@ -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;
|
||||
}
|
||||
|
||||
}
|
||||
|
|
|
@ -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%',
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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,
|
||||
|
|
|
@ -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>
|
||||
|
|
51
screens/Tetris/components/Preview.js
Normal file
51
screens/Tetris/components/Preview.js
Normal 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);
|
Loading…
Reference in a new issue