forked from vergnet/application-amicale
Improve Game files to match linter
This commit is contained in:
parent
569e659779
commit
cbe3777957
16 changed files with 1750 additions and 1610 deletions
|
|
@ -1,13 +1,13 @@
|
|||
// @flow
|
||||
|
||||
import type {CustomTheme} from "../../../managers/ThemeManager";
|
||||
import type {CustomThemeType} from '../../../managers/ThemeManager';
|
||||
|
||||
export type Coordinates = {
|
||||
x: number,
|
||||
y: number,
|
||||
}
|
||||
export type CoordinatesType = {
|
||||
x: number,
|
||||
y: number,
|
||||
};
|
||||
|
||||
type Shape = Array<Array<number>>;
|
||||
export type ShapeType = Array<Array<number>>;
|
||||
|
||||
/**
|
||||
* Abstract class used to represent a BaseShape.
|
||||
|
|
@ -15,96 +15,98 @@ type Shape = Array<Array<number>>;
|
|||
* and in methods to implement
|
||||
*/
|
||||
export default class BaseShape {
|
||||
#currentShape: ShapeType;
|
||||
|
||||
#currentShape: Shape;
|
||||
#rotation: number;
|
||||
position: Coordinates;
|
||||
theme: CustomTheme;
|
||||
#rotation: number;
|
||||
|
||||
/**
|
||||
* Prevent instantiation if classname is BaseShape to force class to be abstract
|
||||
*/
|
||||
constructor(theme: CustomTheme) {
|
||||
if (this.constructor === BaseShape)
|
||||
throw new Error("Abstract class can't be instantiated");
|
||||
this.theme = theme;
|
||||
this.#rotation = 0;
|
||||
this.position = {x: 0, y: 0};
|
||||
this.#currentShape = this.getShapes()[this.#rotation];
|
||||
}
|
||||
position: CoordinatesType;
|
||||
|
||||
/**
|
||||
* Gets this shape's color.
|
||||
* Must be implemented by child class
|
||||
*/
|
||||
getColor(): string {
|
||||
throw new Error("Method 'getColor()' must be implemented");
|
||||
}
|
||||
theme: CustomThemeType;
|
||||
|
||||
/**
|
||||
* Gets this object's all possible shapes as an array.
|
||||
* Must be implemented by child class.
|
||||
*
|
||||
* Used by tests to read private fields
|
||||
*/
|
||||
getShapes(): Array<Shape> {
|
||||
throw new Error("Method 'getShapes()' must be implemented");
|
||||
}
|
||||
/**
|
||||
* Prevent instantiation if classname is BaseShape to force class to be abstract
|
||||
*/
|
||||
constructor(theme: CustomThemeType) {
|
||||
if (this.constructor === BaseShape)
|
||||
throw new Error("Abstract class can't be instantiated");
|
||||
this.theme = theme;
|
||||
this.#rotation = 0;
|
||||
this.position = {x: 0, y: 0};
|
||||
this.#currentShape = this.getShapes()[this.#rotation];
|
||||
}
|
||||
|
||||
/**
|
||||
* Gets this object's current shape.
|
||||
*/
|
||||
getCurrentShape(): Shape {
|
||||
return this.#currentShape;
|
||||
}
|
||||
/**
|
||||
* Gets this shape's color.
|
||||
* Must be implemented by child class
|
||||
*/
|
||||
// eslint-disable-next-line class-methods-use-this
|
||||
getColor(): string {
|
||||
throw new Error("Method 'getColor()' must be implemented");
|
||||
}
|
||||
|
||||
/**
|
||||
* Gets this object's coordinates.
|
||||
* This will return an array of coordinates representing the positions of the cells used by this object.
|
||||
*
|
||||
* @param isAbsolute Should we take into account the current position of the object?
|
||||
* @return {Array<Coordinates>} This object cells coordinates
|
||||
*/
|
||||
getCellsCoordinates(isAbsolute: boolean): Array<Coordinates> {
|
||||
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});
|
||||
}
|
||||
/**
|
||||
* Gets this object's all possible shapes as an array.
|
||||
* Must be implemented by child class.
|
||||
*
|
||||
* Used by tests to read private fields
|
||||
*/
|
||||
// eslint-disable-next-line class-methods-use-this
|
||||
getShapes(): Array<ShapeType> {
|
||||
throw new Error("Method 'getShapes()' must be implemented");
|
||||
}
|
||||
|
||||
/**
|
||||
* Gets this object's current shape.
|
||||
*/
|
||||
getCurrentShape(): ShapeType {
|
||||
return this.#currentShape;
|
||||
}
|
||||
|
||||
/**
|
||||
* Gets this object's coordinates.
|
||||
* This will return an array of coordinates representing the positions of the cells used by this object.
|
||||
*
|
||||
* @param isAbsolute Should we take into account the current position of the object?
|
||||
* @return {Array<CoordinatesType>} This object cells coordinates
|
||||
*/
|
||||
getCellsCoordinates(isAbsolute: boolean): Array<CoordinatesType> {
|
||||
const coordinates = [];
|
||||
for (let row = 0; row < this.#currentShape.length; row += 1) {
|
||||
for (let col = 0; col < this.#currentShape[row].length; col += 1) {
|
||||
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;
|
||||
}
|
||||
}
|
||||
return coordinates;
|
||||
}
|
||||
|
||||
/**
|
||||
* Rotate this object
|
||||
*
|
||||
* @param isForward Should we rotate clockwise?
|
||||
*/
|
||||
rotate(isForward: boolean) {
|
||||
if (isForward)
|
||||
this.#rotation++;
|
||||
else
|
||||
this.#rotation--;
|
||||
if (this.#rotation > 3)
|
||||
this.#rotation = 0;
|
||||
else if (this.#rotation < 0)
|
||||
this.#rotation = 3;
|
||||
this.#currentShape = this.getShapes()[this.#rotation];
|
||||
}
|
||||
|
||||
/**
|
||||
* Move this object
|
||||
*
|
||||
* @param x Position X offset to add
|
||||
* @param y Position Y offset to add
|
||||
*/
|
||||
move(x: number, y: number) {
|
||||
this.position.x += x;
|
||||
this.position.y += y;
|
||||
}
|
||||
/**
|
||||
* Rotate this object
|
||||
*
|
||||
* @param isForward Should we rotate clockwise?
|
||||
*/
|
||||
rotate(isForward: boolean) {
|
||||
if (isForward) this.#rotation += 1;
|
||||
else this.#rotation -= 1;
|
||||
if (this.#rotation > 3) this.#rotation = 0;
|
||||
else if (this.#rotation < 0) this.#rotation = 3;
|
||||
this.#currentShape = this.getShapes()[this.#rotation];
|
||||
}
|
||||
|
||||
/**
|
||||
* Move this object
|
||||
*
|
||||
* @param x Position X offset to add
|
||||
* @param y Position Y offset to add
|
||||
*/
|
||||
move(x: number, y: number) {
|
||||
this.position.x += x;
|
||||
this.position.y += y;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,45 +1,46 @@
|
|||
// @flow
|
||||
|
||||
import BaseShape from "./BaseShape";
|
||||
import type {CustomTheme} from "../../../managers/ThemeManager";
|
||||
import BaseShape from './BaseShape';
|
||||
import type {CustomThemeType} from '../../../managers/ThemeManager';
|
||||
import type {ShapeType} from './BaseShape';
|
||||
|
||||
export default class ShapeI extends BaseShape {
|
||||
constructor(theme: CustomThemeType) {
|
||||
super(theme);
|
||||
this.position.x = 3;
|
||||
}
|
||||
|
||||
constructor(theme: CustomTheme) {
|
||||
super(theme);
|
||||
this.position.x = 3;
|
||||
}
|
||||
getColor(): string {
|
||||
return this.theme.colors.tetrisI;
|
||||
}
|
||||
|
||||
getColor(): string {
|
||||
return this.theme.colors.tetrisI;
|
||||
}
|
||||
|
||||
getShapes() {
|
||||
return [
|
||||
[
|
||||
[0, 0, 0, 0],
|
||||
[1, 1, 1, 1],
|
||||
[0, 0, 0, 0],
|
||||
[0, 0, 0, 0],
|
||||
],
|
||||
[
|
||||
[0, 0, 1, 0],
|
||||
[0, 0, 1, 0],
|
||||
[0, 0, 1, 0],
|
||||
[0, 0, 1, 0],
|
||||
],
|
||||
[
|
||||
[0, 0, 0, 0],
|
||||
[0, 0, 0, 0],
|
||||
[1, 1, 1, 1],
|
||||
[0, 0, 0, 0],
|
||||
],
|
||||
[
|
||||
[0, 1, 0, 0],
|
||||
[0, 1, 0, 0],
|
||||
[0, 1, 0, 0],
|
||||
[0, 1, 0, 0],
|
||||
],
|
||||
];
|
||||
}
|
||||
// eslint-disable-next-line class-methods-use-this
|
||||
getShapes(): Array<ShapeType> {
|
||||
return [
|
||||
[
|
||||
[0, 0, 0, 0],
|
||||
[1, 1, 1, 1],
|
||||
[0, 0, 0, 0],
|
||||
[0, 0, 0, 0],
|
||||
],
|
||||
[
|
||||
[0, 0, 1, 0],
|
||||
[0, 0, 1, 0],
|
||||
[0, 0, 1, 0],
|
||||
[0, 0, 1, 0],
|
||||
],
|
||||
[
|
||||
[0, 0, 0, 0],
|
||||
[0, 0, 0, 0],
|
||||
[1, 1, 1, 1],
|
||||
[0, 0, 0, 0],
|
||||
],
|
||||
[
|
||||
[0, 1, 0, 0],
|
||||
[0, 1, 0, 0],
|
||||
[0, 1, 0, 0],
|
||||
[0, 1, 0, 0],
|
||||
],
|
||||
];
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,41 +1,42 @@
|
|||
// @flow
|
||||
|
||||
import BaseShape from "./BaseShape";
|
||||
import type {CustomTheme} from "../../../managers/ThemeManager";
|
||||
import BaseShape from './BaseShape';
|
||||
import type {CustomThemeType} from '../../../managers/ThemeManager';
|
||||
import type {ShapeType} from './BaseShape';
|
||||
|
||||
export default class ShapeJ extends BaseShape {
|
||||
constructor(theme: CustomThemeType) {
|
||||
super(theme);
|
||||
this.position.x = 3;
|
||||
}
|
||||
|
||||
constructor(theme: CustomTheme) {
|
||||
super(theme);
|
||||
this.position.x = 3;
|
||||
}
|
||||
getColor(): string {
|
||||
return this.theme.colors.tetrisJ;
|
||||
}
|
||||
|
||||
getColor(): string {
|
||||
return this.theme.colors.tetrisJ;
|
||||
}
|
||||
|
||||
getShapes() {
|
||||
return [
|
||||
[
|
||||
[1, 0, 0],
|
||||
[1, 1, 1],
|
||||
[0, 0, 0],
|
||||
],
|
||||
[
|
||||
[0, 1, 1],
|
||||
[0, 1, 0],
|
||||
[0, 1, 0],
|
||||
],
|
||||
[
|
||||
[0, 0, 0],
|
||||
[1, 1, 1],
|
||||
[0, 0, 1],
|
||||
],
|
||||
[
|
||||
[0, 1, 0],
|
||||
[0, 1, 0],
|
||||
[1, 1, 0],
|
||||
],
|
||||
];
|
||||
}
|
||||
// eslint-disable-next-line class-methods-use-this
|
||||
getShapes(): Array<ShapeType> {
|
||||
return [
|
||||
[
|
||||
[1, 0, 0],
|
||||
[1, 1, 1],
|
||||
[0, 0, 0],
|
||||
],
|
||||
[
|
||||
[0, 1, 1],
|
||||
[0, 1, 0],
|
||||
[0, 1, 0],
|
||||
],
|
||||
[
|
||||
[0, 0, 0],
|
||||
[1, 1, 1],
|
||||
[0, 0, 1],
|
||||
],
|
||||
[
|
||||
[0, 1, 0],
|
||||
[0, 1, 0],
|
||||
[1, 1, 0],
|
||||
],
|
||||
];
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,41 +1,42 @@
|
|||
// @flow
|
||||
|
||||
import BaseShape from "./BaseShape";
|
||||
import type {CustomTheme} from "../../../managers/ThemeManager";
|
||||
import BaseShape from './BaseShape';
|
||||
import type {CustomThemeType} from '../../../managers/ThemeManager';
|
||||
import type {ShapeType} from './BaseShape';
|
||||
|
||||
export default class ShapeL extends BaseShape {
|
||||
constructor(theme: CustomThemeType) {
|
||||
super(theme);
|
||||
this.position.x = 3;
|
||||
}
|
||||
|
||||
constructor(theme: CustomTheme) {
|
||||
super(theme);
|
||||
this.position.x = 3;
|
||||
}
|
||||
getColor(): string {
|
||||
return this.theme.colors.tetrisL;
|
||||
}
|
||||
|
||||
getColor(): string {
|
||||
return this.theme.colors.tetrisL;
|
||||
}
|
||||
|
||||
getShapes() {
|
||||
return [
|
||||
[
|
||||
[0, 0, 1],
|
||||
[1, 1, 1],
|
||||
[0, 0, 0],
|
||||
],
|
||||
[
|
||||
[0, 1, 0],
|
||||
[0, 1, 0],
|
||||
[0, 1, 1],
|
||||
],
|
||||
[
|
||||
[0, 0, 0],
|
||||
[1, 1, 1],
|
||||
[1, 0, 0],
|
||||
],
|
||||
[
|
||||
[1, 1, 0],
|
||||
[0, 1, 0],
|
||||
[0, 1, 0],
|
||||
],
|
||||
];
|
||||
}
|
||||
// eslint-disable-next-line class-methods-use-this
|
||||
getShapes(): Array<ShapeType> {
|
||||
return [
|
||||
[
|
||||
[0, 0, 1],
|
||||
[1, 1, 1],
|
||||
[0, 0, 0],
|
||||
],
|
||||
[
|
||||
[0, 1, 0],
|
||||
[0, 1, 0],
|
||||
[0, 1, 1],
|
||||
],
|
||||
[
|
||||
[0, 0, 0],
|
||||
[1, 1, 1],
|
||||
[1, 0, 0],
|
||||
],
|
||||
[
|
||||
[1, 1, 0],
|
||||
[0, 1, 0],
|
||||
[0, 1, 0],
|
||||
],
|
||||
];
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,37 +1,38 @@
|
|||
// @flow
|
||||
|
||||
import BaseShape from "./BaseShape";
|
||||
import type {CustomTheme} from "../../../managers/ThemeManager";
|
||||
import BaseShape from './BaseShape';
|
||||
import type {CustomThemeType} from '../../../managers/ThemeManager';
|
||||
import type {ShapeType} from './BaseShape';
|
||||
|
||||
export default class ShapeO extends BaseShape {
|
||||
constructor(theme: CustomThemeType) {
|
||||
super(theme);
|
||||
this.position.x = 4;
|
||||
}
|
||||
|
||||
constructor(theme: CustomTheme) {
|
||||
super(theme);
|
||||
this.position.x = 4;
|
||||
}
|
||||
getColor(): string {
|
||||
return this.theme.colors.tetrisO;
|
||||
}
|
||||
|
||||
getColor(): string {
|
||||
return this.theme.colors.tetrisO;
|
||||
}
|
||||
|
||||
getShapes() {
|
||||
return [
|
||||
[
|
||||
[1, 1],
|
||||
[1, 1],
|
||||
],
|
||||
[
|
||||
[1, 1],
|
||||
[1, 1],
|
||||
],
|
||||
[
|
||||
[1, 1],
|
||||
[1, 1],
|
||||
],
|
||||
[
|
||||
[1, 1],
|
||||
[1, 1],
|
||||
],
|
||||
];
|
||||
}
|
||||
// eslint-disable-next-line class-methods-use-this
|
||||
getShapes(): Array<ShapeType> {
|
||||
return [
|
||||
[
|
||||
[1, 1],
|
||||
[1, 1],
|
||||
],
|
||||
[
|
||||
[1, 1],
|
||||
[1, 1],
|
||||
],
|
||||
[
|
||||
[1, 1],
|
||||
[1, 1],
|
||||
],
|
||||
[
|
||||
[1, 1],
|
||||
[1, 1],
|
||||
],
|
||||
];
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,41 +1,42 @@
|
|||
// @flow
|
||||
|
||||
import BaseShape from "./BaseShape";
|
||||
import type {CustomTheme} from "../../../managers/ThemeManager";
|
||||
import BaseShape from './BaseShape';
|
||||
import type {CustomThemeType} from '../../../managers/ThemeManager';
|
||||
import type {ShapeType} from './BaseShape';
|
||||
|
||||
export default class ShapeS extends BaseShape {
|
||||
constructor(theme: CustomThemeType) {
|
||||
super(theme);
|
||||
this.position.x = 3;
|
||||
}
|
||||
|
||||
constructor(theme: CustomTheme) {
|
||||
super(theme);
|
||||
this.position.x = 3;
|
||||
}
|
||||
getColor(): string {
|
||||
return this.theme.colors.tetrisS;
|
||||
}
|
||||
|
||||
getColor(): string {
|
||||
return this.theme.colors.tetrisS;
|
||||
}
|
||||
|
||||
getShapes() {
|
||||
return [
|
||||
[
|
||||
[0, 1, 1],
|
||||
[1, 1, 0],
|
||||
[0, 0, 0],
|
||||
],
|
||||
[
|
||||
[0, 1, 0],
|
||||
[0, 1, 1],
|
||||
[0, 0, 1],
|
||||
],
|
||||
[
|
||||
[0, 0, 0],
|
||||
[0, 1, 1],
|
||||
[1, 1, 0],
|
||||
],
|
||||
[
|
||||
[1, 0, 0],
|
||||
[1, 1, 0],
|
||||
[0, 1, 0],
|
||||
],
|
||||
];
|
||||
}
|
||||
// eslint-disable-next-line class-methods-use-this
|
||||
getShapes(): Array<ShapeType> {
|
||||
return [
|
||||
[
|
||||
[0, 1, 1],
|
||||
[1, 1, 0],
|
||||
[0, 0, 0],
|
||||
],
|
||||
[
|
||||
[0, 1, 0],
|
||||
[0, 1, 1],
|
||||
[0, 0, 1],
|
||||
],
|
||||
[
|
||||
[0, 0, 0],
|
||||
[0, 1, 1],
|
||||
[1, 1, 0],
|
||||
],
|
||||
[
|
||||
[1, 0, 0],
|
||||
[1, 1, 0],
|
||||
[0, 1, 0],
|
||||
],
|
||||
];
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,41 +1,42 @@
|
|||
// @flow
|
||||
|
||||
import BaseShape from "./BaseShape";
|
||||
import type {CustomTheme} from "../../../managers/ThemeManager";
|
||||
import BaseShape from './BaseShape';
|
||||
import type {CustomThemeType} from '../../../managers/ThemeManager';
|
||||
import type {ShapeType} from './BaseShape';
|
||||
|
||||
export default class ShapeT extends BaseShape {
|
||||
constructor(theme: CustomThemeType) {
|
||||
super(theme);
|
||||
this.position.x = 3;
|
||||
}
|
||||
|
||||
constructor(theme: CustomTheme) {
|
||||
super(theme);
|
||||
this.position.x = 3;
|
||||
}
|
||||
getColor(): string {
|
||||
return this.theme.colors.tetrisT;
|
||||
}
|
||||
|
||||
getColor(): string {
|
||||
return this.theme.colors.tetrisT;
|
||||
}
|
||||
|
||||
getShapes() {
|
||||
return [
|
||||
[
|
||||
[0, 1, 0],
|
||||
[1, 1, 1],
|
||||
[0, 0, 0],
|
||||
],
|
||||
[
|
||||
[0, 1, 0],
|
||||
[0, 1, 1],
|
||||
[0, 1, 0],
|
||||
],
|
||||
[
|
||||
[0, 0, 0],
|
||||
[1, 1, 1],
|
||||
[0, 1, 0],
|
||||
],
|
||||
[
|
||||
[0, 1, 0],
|
||||
[1, 1, 0],
|
||||
[0, 1, 0],
|
||||
],
|
||||
];
|
||||
}
|
||||
// eslint-disable-next-line class-methods-use-this
|
||||
getShapes(): Array<ShapeType> {
|
||||
return [
|
||||
[
|
||||
[0, 1, 0],
|
||||
[1, 1, 1],
|
||||
[0, 0, 0],
|
||||
],
|
||||
[
|
||||
[0, 1, 0],
|
||||
[0, 1, 1],
|
||||
[0, 1, 0],
|
||||
],
|
||||
[
|
||||
[0, 0, 0],
|
||||
[1, 1, 1],
|
||||
[0, 1, 0],
|
||||
],
|
||||
[
|
||||
[0, 1, 0],
|
||||
[1, 1, 0],
|
||||
[0, 1, 0],
|
||||
],
|
||||
];
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,41 +1,42 @@
|
|||
// @flow
|
||||
|
||||
import BaseShape from "./BaseShape";
|
||||
import type {CustomTheme} from "../../../managers/ThemeManager";
|
||||
import BaseShape from './BaseShape';
|
||||
import type {CustomThemeType} from '../../../managers/ThemeManager';
|
||||
import type {ShapeType} from './BaseShape';
|
||||
|
||||
export default class ShapeZ extends BaseShape {
|
||||
constructor(theme: CustomThemeType) {
|
||||
super(theme);
|
||||
this.position.x = 3;
|
||||
}
|
||||
|
||||
constructor(theme: CustomTheme) {
|
||||
super(theme);
|
||||
this.position.x = 3;
|
||||
}
|
||||
getColor(): string {
|
||||
return this.theme.colors.tetrisZ;
|
||||
}
|
||||
|
||||
getColor(): string {
|
||||
return this.theme.colors.tetrisZ;
|
||||
}
|
||||
|
||||
getShapes() {
|
||||
return [
|
||||
[
|
||||
[1, 1, 0],
|
||||
[0, 1, 1],
|
||||
[0, 0, 0],
|
||||
],
|
||||
[
|
||||
[0, 0, 1],
|
||||
[0, 1, 1],
|
||||
[0, 1, 0],
|
||||
],
|
||||
[
|
||||
[0, 0, 0],
|
||||
[1, 1, 0],
|
||||
[0, 1, 1],
|
||||
],
|
||||
[
|
||||
[0, 1, 0],
|
||||
[1, 1, 0],
|
||||
[1, 0, 0],
|
||||
],
|
||||
];
|
||||
}
|
||||
// eslint-disable-next-line class-methods-use-this
|
||||
getShapes(): Array<ShapeType> {
|
||||
return [
|
||||
[
|
||||
[1, 1, 0],
|
||||
[0, 1, 1],
|
||||
[0, 0, 0],
|
||||
],
|
||||
[
|
||||
[0, 0, 1],
|
||||
[0, 1, 1],
|
||||
[0, 1, 0],
|
||||
],
|
||||
[
|
||||
[0, 0, 0],
|
||||
[1, 1, 0],
|
||||
[0, 1, 1],
|
||||
],
|
||||
[
|
||||
[0, 1, 0],
|
||||
[1, 1, 0],
|
||||
[1, 0, 0],
|
||||
],
|
||||
];
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -3,34 +3,30 @@
|
|||
import * as React from 'react';
|
||||
import {View} from 'react-native';
|
||||
import {withTheme} from 'react-native-paper';
|
||||
import type {CustomTheme} from "../../../managers/ThemeManager";
|
||||
|
||||
export type Cell = {color: string, isEmpty: boolean, key: string};
|
||||
|
||||
type Props = {
|
||||
cell: Cell,
|
||||
theme: CustomTheme,
|
||||
}
|
||||
|
||||
class CellComponent extends React.PureComponent<Props> {
|
||||
|
||||
render() {
|
||||
const item = this.props.cell;
|
||||
return (
|
||||
<View
|
||||
style={{
|
||||
flex: 1,
|
||||
backgroundColor: item.isEmpty ? 'transparent' : item.color,
|
||||
borderColor: 'transparent',
|
||||
borderRadius: 4,
|
||||
borderWidth: 1,
|
||||
aspectRatio: 1,
|
||||
}}
|
||||
/>
|
||||
);
|
||||
}
|
||||
export type CellType = {color: string, isEmpty: boolean, key: string};
|
||||
|
||||
type PropsType = {
|
||||
cell: CellType,
|
||||
};
|
||||
|
||||
class CellComponent extends React.PureComponent<PropsType> {
|
||||
render(): React.Node {
|
||||
const {props} = this;
|
||||
const item = props.cell;
|
||||
return (
|
||||
<View
|
||||
style={{
|
||||
flex: 1,
|
||||
backgroundColor: item.isEmpty ? 'transparent' : item.color,
|
||||
borderColor: 'transparent',
|
||||
borderRadius: 4,
|
||||
borderWidth: 1,
|
||||
aspectRatio: 1,
|
||||
}}
|
||||
/>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default withTheme(CellComponent);
|
||||
|
|
|
|||
|
|
@ -3,56 +3,55 @@
|
|||
import * as React from 'react';
|
||||
import {View} from 'react-native';
|
||||
import {withTheme} from 'react-native-paper';
|
||||
import type {Cell} from "./CellComponent";
|
||||
import CellComponent from "./CellComponent";
|
||||
import type {ViewStyle} from "react-native/Libraries/StyleSheet/StyleSheet";
|
||||
import type {ViewStyle} from 'react-native/Libraries/StyleSheet/StyleSheet';
|
||||
import type {CellType} from './CellComponent';
|
||||
import CellComponent from './CellComponent';
|
||||
|
||||
export type Grid = Array<Array<CellComponent>>;
|
||||
export type GridType = Array<Array<CellComponent>>;
|
||||
|
||||
type Props = {
|
||||
grid: Array<Array<Object>>,
|
||||
height: number,
|
||||
width: number,
|
||||
style: ViewStyle,
|
||||
}
|
||||
type PropsType = {
|
||||
grid: Array<Array<CellType>>,
|
||||
height: number,
|
||||
width: number,
|
||||
style: ViewStyle,
|
||||
};
|
||||
|
||||
class GridComponent extends React.Component<Props> {
|
||||
class GridComponent extends React.Component<PropsType> {
|
||||
getRow(rowNumber: number): React.Node {
|
||||
const {grid} = this.props;
|
||||
return (
|
||||
<View style={{flexDirection: 'row'}} key={rowNumber.toString()}>
|
||||
{grid[rowNumber].map(this.getCellRender)}
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
getRow(rowNumber: number) {
|
||||
let cells = this.props.grid[rowNumber].map(this.getCellRender);
|
||||
return (
|
||||
<View
|
||||
style={{flexDirection: 'row',}}
|
||||
key={rowNumber.toString()}
|
||||
>
|
||||
{cells}
|
||||
</View>
|
||||
);
|
||||
getCellRender = (item: CellType): React.Node => {
|
||||
return <CellComponent cell={item} key={item.key} />;
|
||||
};
|
||||
|
||||
getGrid(): React.Node {
|
||||
const {height} = this.props;
|
||||
const rows = [];
|
||||
for (let i = 0; i < height; i += 1) {
|
||||
rows.push(this.getRow(i));
|
||||
}
|
||||
return rows;
|
||||
}
|
||||
|
||||
getCellRender = (item: Cell) => {
|
||||
return <CellComponent cell={item} key={item.key}/>;
|
||||
};
|
||||
|
||||
getGrid() {
|
||||
let rows = [];
|
||||
for (let i = 0; i < this.props.height; i++) {
|
||||
rows.push(this.getRow(i));
|
||||
}
|
||||
return rows;
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<View style={{
|
||||
aspectRatio: this.props.width / this.props.height,
|
||||
borderRadius: 4,
|
||||
...this.props.style
|
||||
}}>
|
||||
{this.getGrid()}
|
||||
</View>
|
||||
);
|
||||
}
|
||||
render(): React.Node {
|
||||
const {style, width, height} = this.props;
|
||||
return (
|
||||
<View
|
||||
style={{
|
||||
aspectRatio: width / height,
|
||||
borderRadius: 4,
|
||||
...style,
|
||||
}}>
|
||||
{this.getGrid()}
|
||||
</View>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default withTheme(GridComponent);
|
||||
|
|
|
|||
|
|
@ -3,51 +3,48 @@
|
|||
import * as React from 'react';
|
||||
import {View} from 'react-native';
|
||||
import {withTheme} from 'react-native-paper';
|
||||
import type {Grid} from "./GridComponent";
|
||||
import GridComponent from "./GridComponent";
|
||||
import type {ViewStyle} from "react-native/Libraries/StyleSheet/StyleSheet";
|
||||
import type {ViewStyle} from 'react-native/Libraries/StyleSheet/StyleSheet';
|
||||
import type {GridType} from './GridComponent';
|
||||
import GridComponent from './GridComponent';
|
||||
|
||||
type Props = {
|
||||
items: Array<Grid>,
|
||||
style: ViewStyle
|
||||
}
|
||||
type PropsType = {
|
||||
items: Array<GridType>,
|
||||
style: ViewStyle,
|
||||
};
|
||||
|
||||
class Preview extends React.PureComponent<Props> {
|
||||
class Preview extends React.PureComponent<PropsType> {
|
||||
getGrids(): React.Node {
|
||||
const {items} = this.props;
|
||||
const grids = [];
|
||||
items.forEach((item: GridType, index: number) => {
|
||||
grids.push(Preview.getGridRender(item, index));
|
||||
});
|
||||
return grids;
|
||||
}
|
||||
|
||||
getGrids() {
|
||||
let grids = [];
|
||||
for (let i = 0; i < this.props.items.length; i++) {
|
||||
grids.push(this.getGridRender(this.props.items[i], i));
|
||||
}
|
||||
return grids;
|
||||
static getGridRender(item: GridType, index: number): React.Node {
|
||||
return (
|
||||
<GridComponent
|
||||
width={item[0].length}
|
||||
height={item.length}
|
||||
grid={item}
|
||||
style={{
|
||||
marginRight: 5,
|
||||
marginLeft: 5,
|
||||
marginBottom: 5,
|
||||
}}
|
||||
key={index.toString()}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
render(): React.Node {
|
||||
const {style, items} = this.props;
|
||||
if (items.length > 0) {
|
||||
return <View style={style}>{this.getGrids()}</View>;
|
||||
}
|
||||
|
||||
getGridRender(item: Grid, index: number) {
|
||||
return <GridComponent
|
||||
width={item[0].length}
|
||||
height={item.length}
|
||||
grid={item}
|
||||
style={{
|
||||
marginRight: 5,
|
||||
marginLeft: 5,
|
||||
marginBottom: 5,
|
||||
}}
|
||||
key={index.toString()}
|
||||
/>;
|
||||
};
|
||||
|
||||
render() {
|
||||
if (this.props.items.length > 0) {
|
||||
return (
|
||||
<View style={this.props.style}>
|
||||
{this.getGrids()}
|
||||
</View>
|
||||
);
|
||||
} else
|
||||
return null;
|
||||
}
|
||||
|
||||
|
||||
return null;
|
||||
}
|
||||
}
|
||||
|
||||
export default withTheme(Preview);
|
||||
|
|
|
|||
|
|
@ -1,243 +1,318 @@
|
|||
// @flow
|
||||
|
||||
import Piece from "./Piece";
|
||||
import ScoreManager from "./ScoreManager";
|
||||
import GridManager from "./GridManager";
|
||||
import type {CustomTheme} from "../../../managers/ThemeManager";
|
||||
import Piece from './Piece';
|
||||
import ScoreManager from './ScoreManager';
|
||||
import GridManager from './GridManager';
|
||||
import type {CustomThemeType} from '../../../managers/ThemeManager';
|
||||
import type {GridType} from '../components/GridComponent';
|
||||
|
||||
export type TickCallbackType = (
|
||||
score: number,
|
||||
level: number,
|
||||
grid: GridType,
|
||||
) => void;
|
||||
|
||||
export type ClockCallbackType = (time: number) => void;
|
||||
|
||||
export type EndCallbackType = (
|
||||
time: number,
|
||||
score: number,
|
||||
isRestart: boolean,
|
||||
) => void;
|
||||
|
||||
export type MovementCallbackType = (grid: GridType, score?: number) => void;
|
||||
|
||||
export default class GameLogic {
|
||||
static levelTicks = [1000, 800, 600, 400, 300, 200, 150, 100];
|
||||
|
||||
static levelTicks = [
|
||||
1000,
|
||||
800,
|
||||
600,
|
||||
400,
|
||||
300,
|
||||
200,
|
||||
150,
|
||||
100,
|
||||
];
|
||||
scoreManager: ScoreManager;
|
||||
|
||||
#scoreManager: ScoreManager;
|
||||
#gridManager: GridManager;
|
||||
gridManager: GridManager;
|
||||
|
||||
#height: number;
|
||||
#width: number;
|
||||
height: number;
|
||||
|
||||
#gameRunning: boolean;
|
||||
#gamePaused: boolean;
|
||||
#gameTime: number;
|
||||
width: number;
|
||||
|
||||
#currentObject: Piece;
|
||||
gameRunning: boolean;
|
||||
|
||||
#gameTick: number;
|
||||
#gameTickInterval: IntervalID;
|
||||
#gameTimeInterval: IntervalID;
|
||||
gamePaused: boolean;
|
||||
|
||||
#pressInInterval: TimeoutID;
|
||||
#isPressedIn: boolean;
|
||||
#autoRepeatActivationDelay: number;
|
||||
#autoRepeatDelay: number;
|
||||
gameTime: number;
|
||||
|
||||
#nextPieces: Array<Piece>;
|
||||
#nextPiecesCount: number;
|
||||
currentObject: Piece;
|
||||
|
||||
#onTick: Function;
|
||||
#onClock: Function;
|
||||
endCallback: Function;
|
||||
gameTick: number;
|
||||
|
||||
#theme: CustomTheme;
|
||||
gameTickInterval: IntervalID;
|
||||
|
||||
constructor(height: number, width: number, theme: CustomTheme) {
|
||||
this.#height = height;
|
||||
this.#width = width;
|
||||
this.#gameRunning = false;
|
||||
this.#gamePaused = false;
|
||||
this.#theme = theme;
|
||||
this.#autoRepeatActivationDelay = 300;
|
||||
this.#autoRepeatDelay = 50;
|
||||
this.#nextPieces = [];
|
||||
this.#nextPiecesCount = 3;
|
||||
this.#scoreManager = new ScoreManager();
|
||||
this.#gridManager = new GridManager(this.getWidth(), this.getHeight(), this.#theme);
|
||||
}
|
||||
gameTimeInterval: IntervalID;
|
||||
|
||||
getHeight(): number {
|
||||
return this.#height;
|
||||
}
|
||||
pressInInterval: TimeoutID;
|
||||
|
||||
getWidth(): number {
|
||||
return this.#width;
|
||||
}
|
||||
isPressedIn: boolean;
|
||||
|
||||
getCurrentGrid() {
|
||||
return this.#gridManager.getCurrentGrid();
|
||||
}
|
||||
autoRepeatActivationDelay: number;
|
||||
|
||||
isGameRunning(): boolean {
|
||||
return this.#gameRunning;
|
||||
}
|
||||
autoRepeatDelay: number;
|
||||
|
||||
isGamePaused(): boolean {
|
||||
return this.#gamePaused;
|
||||
}
|
||||
nextPieces: Array<Piece>;
|
||||
|
||||
onFreeze() {
|
||||
this.#gridManager.freezeTetromino(this.#currentObject, this.#scoreManager);
|
||||
this.createTetromino();
|
||||
}
|
||||
nextPiecesCount: number;
|
||||
|
||||
setNewGameTick(level: number) {
|
||||
if (level >= GameLogic.levelTicks.length)
|
||||
return;
|
||||
this.#gameTick = GameLogic.levelTicks[level];
|
||||
clearInterval(this.#gameTickInterval);
|
||||
this.#gameTickInterval = setInterval(this.#onTick, this.#gameTick);
|
||||
}
|
||||
tickCallback: TickCallbackType;
|
||||
|
||||
onTick(callback: Function) {
|
||||
this.#currentObject.tryMove(0, 1,
|
||||
this.#gridManager.getCurrentGrid(), this.getWidth(), this.getHeight(),
|
||||
() => this.onFreeze());
|
||||
clockCallback: ClockCallbackType;
|
||||
|
||||
endCallback: EndCallbackType;
|
||||
|
||||
theme: CustomThemeType;
|
||||
|
||||
constructor(height: number, width: number, theme: CustomThemeType) {
|
||||
this.height = height;
|
||||
this.width = width;
|
||||
this.gameRunning = false;
|
||||
this.gamePaused = false;
|
||||
this.theme = theme;
|
||||
this.autoRepeatActivationDelay = 300;
|
||||
this.autoRepeatDelay = 50;
|
||||
this.nextPieces = [];
|
||||
this.nextPiecesCount = 3;
|
||||
this.scoreManager = new ScoreManager();
|
||||
this.gridManager = new GridManager(
|
||||
this.getWidth(),
|
||||
this.getHeight(),
|
||||
this.theme,
|
||||
);
|
||||
}
|
||||
|
||||
getHeight(): number {
|
||||
return this.height;
|
||||
}
|
||||
|
||||
getWidth(): number {
|
||||
return this.width;
|
||||
}
|
||||
|
||||
getCurrentGrid(): GridType {
|
||||
return this.gridManager.getCurrentGrid();
|
||||
}
|
||||
|
||||
isGamePaused(): boolean {
|
||||
return this.gamePaused;
|
||||
}
|
||||
|
||||
onFreeze = () => {
|
||||
this.gridManager.freezeTetromino(this.currentObject, this.scoreManager);
|
||||
this.createTetromino();
|
||||
};
|
||||
|
||||
setNewGameTick(level: number) {
|
||||
if (level >= GameLogic.levelTicks.length) return;
|
||||
this.gameTick = GameLogic.levelTicks[level];
|
||||
this.stopTick();
|
||||
this.startTick();
|
||||
}
|
||||
|
||||
startClock() {
|
||||
this.gameTimeInterval = setInterval(() => {
|
||||
this.onClock(this.clockCallback);
|
||||
}, 1000);
|
||||
}
|
||||
|
||||
startTick() {
|
||||
this.gameTickInterval = setInterval(() => {
|
||||
this.onTick(this.tickCallback);
|
||||
}, this.gameTick);
|
||||
}
|
||||
|
||||
stopClock() {
|
||||
clearInterval(this.gameTimeInterval);
|
||||
}
|
||||
|
||||
stopTick() {
|
||||
clearInterval(this.gameTickInterval);
|
||||
}
|
||||
|
||||
stopGameTime() {
|
||||
this.stopClock();
|
||||
this.stopTick();
|
||||
}
|
||||
|
||||
startGameTime() {
|
||||
this.startClock();
|
||||
this.startTick();
|
||||
}
|
||||
|
||||
onTick(callback: TickCallbackType) {
|
||||
this.currentObject.tryMove(
|
||||
0,
|
||||
1,
|
||||
this.gridManager.getCurrentGrid(),
|
||||
this.getWidth(),
|
||||
this.getHeight(),
|
||||
this.onFreeze,
|
||||
);
|
||||
callback(
|
||||
this.scoreManager.getScore(),
|
||||
this.scoreManager.getLevel(),
|
||||
this.gridManager.getCurrentGrid(),
|
||||
);
|
||||
if (this.scoreManager.canLevelUp())
|
||||
this.setNewGameTick(this.scoreManager.getLevel());
|
||||
}
|
||||
|
||||
onClock(callback: ClockCallbackType) {
|
||||
this.gameTime += 1;
|
||||
callback(this.gameTime);
|
||||
}
|
||||
|
||||
canUseInput(): boolean {
|
||||
return this.gameRunning && !this.gamePaused;
|
||||
}
|
||||
|
||||
rightPressed(callback: MovementCallbackType) {
|
||||
this.isPressedIn = true;
|
||||
this.movePressedRepeat(true, callback, 1, 0);
|
||||
}
|
||||
|
||||
leftPressedIn(callback: MovementCallbackType) {
|
||||
this.isPressedIn = true;
|
||||
this.movePressedRepeat(true, callback, -1, 0);
|
||||
}
|
||||
|
||||
downPressedIn(callback: MovementCallbackType) {
|
||||
this.isPressedIn = true;
|
||||
this.movePressedRepeat(true, callback, 0, 1);
|
||||
}
|
||||
|
||||
movePressedRepeat(
|
||||
isInitial: boolean,
|
||||
callback: MovementCallbackType,
|
||||
x: number,
|
||||
y: number,
|
||||
) {
|
||||
if (!this.canUseInput() || !this.isPressedIn) return;
|
||||
const moved = this.currentObject.tryMove(
|
||||
x,
|
||||
y,
|
||||
this.gridManager.getCurrentGrid(),
|
||||
this.getWidth(),
|
||||
this.getHeight(),
|
||||
this.onFreeze,
|
||||
);
|
||||
if (moved) {
|
||||
if (y === 1) {
|
||||
this.scoreManager.incrementScore();
|
||||
callback(
|
||||
this.#scoreManager.getScore(),
|
||||
this.#scoreManager.getLevel(),
|
||||
this.#gridManager.getCurrentGrid());
|
||||
if (this.#scoreManager.canLevelUp())
|
||||
this.setNewGameTick(this.#scoreManager.getLevel());
|
||||
}
|
||||
|
||||
onClock(callback: Function) {
|
||||
this.#gameTime++;
|
||||
callback(this.#gameTime);
|
||||
}
|
||||
|
||||
canUseInput() {
|
||||
return this.#gameRunning && !this.#gamePaused
|
||||
}
|
||||
|
||||
rightPressed(callback: Function) {
|
||||
this.#isPressedIn = true;
|
||||
this.movePressedRepeat(true, callback, 1, 0);
|
||||
}
|
||||
|
||||
leftPressedIn(callback: Function) {
|
||||
this.#isPressedIn = true;
|
||||
this.movePressedRepeat(true, callback, -1, 0);
|
||||
}
|
||||
|
||||
downPressedIn(callback: Function) {
|
||||
this.#isPressedIn = true;
|
||||
this.movePressedRepeat(true, callback, 0, 1);
|
||||
}
|
||||
|
||||
movePressedRepeat(isInitial: boolean, callback: Function, x: number, y: number) {
|
||||
if (!this.canUseInput() || !this.#isPressedIn)
|
||||
return;
|
||||
const moved = this.#currentObject.tryMove(x, y,
|
||||
this.#gridManager.getCurrentGrid(), this.getWidth(), this.getHeight(),
|
||||
() => this.onFreeze());
|
||||
if (moved) {
|
||||
if (y === 1) {
|
||||
this.#scoreManager.incrementScore();
|
||||
callback(this.#gridManager.getCurrentGrid(), this.#scoreManager.getScore());
|
||||
} else
|
||||
callback(this.#gridManager.getCurrentGrid());
|
||||
}
|
||||
this.#pressInInterval = setTimeout(() =>
|
||||
this.movePressedRepeat(false, callback, x, y),
|
||||
isInitial ? this.#autoRepeatActivationDelay : this.#autoRepeatDelay
|
||||
this.gridManager.getCurrentGrid(),
|
||||
this.scoreManager.getScore(),
|
||||
);
|
||||
} else callback(this.gridManager.getCurrentGrid());
|
||||
}
|
||||
this.pressInInterval = setTimeout(
|
||||
() => {
|
||||
this.movePressedRepeat(false, callback, x, y);
|
||||
},
|
||||
isInitial ? this.autoRepeatActivationDelay : this.autoRepeatDelay,
|
||||
);
|
||||
}
|
||||
|
||||
pressedOut() {
|
||||
this.#isPressedIn = false;
|
||||
clearTimeout(this.#pressInInterval);
|
||||
pressedOut() {
|
||||
this.isPressedIn = false;
|
||||
clearTimeout(this.pressInInterval);
|
||||
}
|
||||
|
||||
rotatePressed(callback: MovementCallbackType) {
|
||||
if (!this.canUseInput()) return;
|
||||
|
||||
if (
|
||||
this.currentObject.tryRotate(
|
||||
this.gridManager.getCurrentGrid(),
|
||||
this.getWidth(),
|
||||
this.getHeight(),
|
||||
)
|
||||
)
|
||||
callback(this.gridManager.getCurrentGrid());
|
||||
}
|
||||
|
||||
getNextPiecesPreviews(): Array<GridType> {
|
||||
const finalArray = [];
|
||||
for (let i = 0; i < this.nextPieces.length; i += 1) {
|
||||
const gridSize = this.nextPieces[i].getCurrentShape().getCurrentShape()[0]
|
||||
.length;
|
||||
finalArray.push(this.gridManager.getEmptyGrid(gridSize, gridSize));
|
||||
this.nextPieces[i].toGrid(finalArray[i], true);
|
||||
}
|
||||
return finalArray;
|
||||
}
|
||||
|
||||
rotatePressed(callback: Function) {
|
||||
if (!this.canUseInput())
|
||||
return;
|
||||
recoverNextPiece() {
|
||||
this.currentObject = this.nextPieces.shift();
|
||||
this.generateNextPieces();
|
||||
}
|
||||
|
||||
if (this.#currentObject.tryRotate(this.#gridManager.getCurrentGrid(), this.getWidth(), this.getHeight()))
|
||||
callback(this.#gridManager.getCurrentGrid());
|
||||
generateNextPieces() {
|
||||
while (this.nextPieces.length < this.nextPiecesCount) {
|
||||
this.nextPieces.push(new Piece(this.theme));
|
||||
}
|
||||
}
|
||||
|
||||
getNextPiecesPreviews() {
|
||||
let finalArray = [];
|
||||
for (let i = 0; i < this.#nextPieces.length; i++) {
|
||||
const gridSize = this.#nextPieces[i].getCurrentShape().getCurrentShape()[0].length;
|
||||
finalArray.push(this.#gridManager.getEmptyGrid(gridSize, gridSize));
|
||||
this.#nextPieces[i].toGrid(finalArray[i], true);
|
||||
}
|
||||
createTetromino() {
|
||||
this.pressedOut();
|
||||
this.recoverNextPiece();
|
||||
if (
|
||||
!this.currentObject.isPositionValid(
|
||||
this.gridManager.getCurrentGrid(),
|
||||
this.getWidth(),
|
||||
this.getHeight(),
|
||||
)
|
||||
)
|
||||
this.endGame(false);
|
||||
}
|
||||
|
||||
return finalArray;
|
||||
}
|
||||
togglePause() {
|
||||
if (!this.gameRunning) return;
|
||||
this.gamePaused = !this.gamePaused;
|
||||
if (this.gamePaused) this.stopGameTime();
|
||||
else this.startGameTime();
|
||||
}
|
||||
|
||||
recoverNextPiece() {
|
||||
this.#currentObject = this.#nextPieces.shift();
|
||||
this.generateNextPieces();
|
||||
}
|
||||
endGame(isRestart: boolean) {
|
||||
this.gameRunning = false;
|
||||
this.gamePaused = false;
|
||||
this.stopGameTime();
|
||||
this.endCallback(this.gameTime, this.scoreManager.getScore(), isRestart);
|
||||
}
|
||||
|
||||
generateNextPieces() {
|
||||
while (this.#nextPieces.length < this.#nextPiecesCount) {
|
||||
this.#nextPieces.push(new Piece(this.#theme));
|
||||
}
|
||||
}
|
||||
|
||||
createTetromino() {
|
||||
this.pressedOut();
|
||||
this.recoverNextPiece();
|
||||
if (!this.#currentObject.isPositionValid(this.#gridManager.getCurrentGrid(), this.getWidth(), this.getHeight()))
|
||||
this.endGame(false);
|
||||
}
|
||||
|
||||
togglePause() {
|
||||
if (!this.#gameRunning)
|
||||
return;
|
||||
this.#gamePaused = !this.#gamePaused;
|
||||
if (this.#gamePaused) {
|
||||
clearInterval(this.#gameTickInterval);
|
||||
clearInterval(this.#gameTimeInterval);
|
||||
} else {
|
||||
this.#gameTickInterval = setInterval(this.#onTick, this.#gameTick);
|
||||
this.#gameTimeInterval = setInterval(this.#onClock, 1000);
|
||||
}
|
||||
}
|
||||
|
||||
stopGame() {
|
||||
this.#gameRunning = false;
|
||||
this.#gamePaused = false;
|
||||
clearInterval(this.#gameTickInterval);
|
||||
clearInterval(this.#gameTimeInterval);
|
||||
}
|
||||
|
||||
endGame(isRestart: boolean) {
|
||||
this.stopGame();
|
||||
this.endCallback(this.#gameTime, this.#scoreManager.getScore(), isRestart);
|
||||
}
|
||||
|
||||
startGame(tickCallback: Function, clockCallback: Function, endCallback: Function) {
|
||||
if (this.#gameRunning)
|
||||
this.endGame(true);
|
||||
this.#gameRunning = true;
|
||||
this.#gamePaused = false;
|
||||
this.#gameTime = 0;
|
||||
this.#scoreManager = new ScoreManager();
|
||||
this.#gameTick = GameLogic.levelTicks[this.#scoreManager.getLevel()];
|
||||
this.#gridManager = new GridManager(this.getWidth(), this.getHeight(), this.#theme);
|
||||
this.#nextPieces = [];
|
||||
this.generateNextPieces();
|
||||
this.createTetromino();
|
||||
tickCallback(
|
||||
this.#scoreManager.getScore(),
|
||||
this.#scoreManager.getLevel(),
|
||||
this.#gridManager.getCurrentGrid());
|
||||
clockCallback(this.#gameTime);
|
||||
this.#onTick = this.onTick.bind(this, tickCallback);
|
||||
this.#onClock = this.onClock.bind(this, clockCallback);
|
||||
this.#gameTickInterval = setInterval(this.#onTick, this.#gameTick);
|
||||
this.#gameTimeInterval = setInterval(this.#onClock, 1000);
|
||||
this.endCallback = endCallback;
|
||||
}
|
||||
startGame(
|
||||
tickCallback: TickCallbackType,
|
||||
clockCallback: ClockCallbackType,
|
||||
endCallback: EndCallbackType,
|
||||
) {
|
||||
if (this.gameRunning) this.endGame(true);
|
||||
this.gameRunning = true;
|
||||
this.gamePaused = false;
|
||||
this.gameTime = 0;
|
||||
this.scoreManager = new ScoreManager();
|
||||
this.gameTick = GameLogic.levelTicks[this.scoreManager.getLevel()];
|
||||
this.gridManager = new GridManager(
|
||||
this.getWidth(),
|
||||
this.getHeight(),
|
||||
this.theme,
|
||||
);
|
||||
this.nextPieces = [];
|
||||
this.generateNextPieces();
|
||||
this.createTetromino();
|
||||
tickCallback(
|
||||
this.scoreManager.getScore(),
|
||||
this.scoreManager.getLevel(),
|
||||
this.gridManager.getCurrentGrid(),
|
||||
);
|
||||
clockCallback(this.gameTime);
|
||||
this.startTick();
|
||||
this.startClock();
|
||||
this.tickCallback = tickCallback;
|
||||
this.clockCallback = clockCallback;
|
||||
this.endCallback = endCallback;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,120 +1,122 @@
|
|||
// @flow
|
||||
|
||||
import Piece from "./Piece";
|
||||
import ScoreManager from "./ScoreManager";
|
||||
import type {Coordinates} from '../Shapes/BaseShape';
|
||||
import type {Grid} from "../components/GridComponent";
|
||||
import type {Cell} from "../components/CellComponent";
|
||||
import type {CustomTheme} from "../../../managers/ThemeManager";
|
||||
import Piece from './Piece';
|
||||
import ScoreManager from './ScoreManager';
|
||||
import type {CoordinatesType} from '../Shapes/BaseShape';
|
||||
import type {GridType} from '../components/GridComponent';
|
||||
import type {CellType} from '../components/CellComponent';
|
||||
import type {CustomThemeType} from '../../../managers/ThemeManager';
|
||||
|
||||
/**
|
||||
* Class used to manage the game grid
|
||||
*/
|
||||
export default class GridManager {
|
||||
#currentGrid: GridType;
|
||||
|
||||
#currentGrid: Grid;
|
||||
#theme: CustomTheme;
|
||||
#theme: CustomThemeType;
|
||||
|
||||
/**
|
||||
* Initializes a grid of the given size
|
||||
*
|
||||
* @param width The grid width
|
||||
* @param height The grid height
|
||||
* @param theme Object containing current theme
|
||||
*/
|
||||
constructor(width: number, height: number, theme: CustomTheme) {
|
||||
this.#theme = theme;
|
||||
this.#currentGrid = this.getEmptyGrid(height, width);
|
||||
/**
|
||||
* Initializes a grid of the given size
|
||||
*
|
||||
* @param width The grid width
|
||||
* @param height The grid height
|
||||
* @param theme Object containing current theme
|
||||
*/
|
||||
constructor(width: number, height: number, theme: CustomThemeType) {
|
||||
this.#theme = theme;
|
||||
this.#currentGrid = this.getEmptyGrid(height, width);
|
||||
}
|
||||
|
||||
/**
|
||||
* Get the current grid
|
||||
*
|
||||
* @return {GridType} The current grid
|
||||
*/
|
||||
getCurrentGrid(): GridType {
|
||||
return this.#currentGrid;
|
||||
}
|
||||
|
||||
/**
|
||||
* Get a new empty grid line of the given size
|
||||
*
|
||||
* @param width The line size
|
||||
* @return {Array<CellType>}
|
||||
*/
|
||||
getEmptyLine(width: number): Array<CellType> {
|
||||
const line = [];
|
||||
for (let col = 0; col < width; col += 1) {
|
||||
line.push({
|
||||
color: this.#theme.colors.tetrisBackground,
|
||||
isEmpty: true,
|
||||
key: col.toString(),
|
||||
});
|
||||
}
|
||||
return line;
|
||||
}
|
||||
|
||||
/**
|
||||
* Get the current grid
|
||||
*
|
||||
* @return {Grid} The current grid
|
||||
*/
|
||||
getCurrentGrid(): Grid {
|
||||
return this.#currentGrid;
|
||||
/**
|
||||
* Gets a new empty grid
|
||||
*
|
||||
* @param width The grid width
|
||||
* @param height The grid height
|
||||
* @return {GridType} A new empty grid
|
||||
*/
|
||||
getEmptyGrid(height: number, width: number): GridType {
|
||||
const grid = [];
|
||||
for (let row = 0; row < height; row += 1) {
|
||||
grid.push(this.getEmptyLine(width));
|
||||
}
|
||||
return grid;
|
||||
}
|
||||
|
||||
/**
|
||||
* Get a new empty grid line of the given size
|
||||
*
|
||||
* @param width The line size
|
||||
* @return {Array<Cell>}
|
||||
*/
|
||||
getEmptyLine(width: number): Array<Cell> {
|
||||
let line = [];
|
||||
for (let col = 0; col < width; col++) {
|
||||
line.push({
|
||||
color: this.#theme.colors.tetrisBackground,
|
||||
isEmpty: true,
|
||||
key: col.toString(),
|
||||
});
|
||||
/**
|
||||
* Removes the given lines from the grid,
|
||||
* shifts down every line on top and adds new empty lines on top.
|
||||
*
|
||||
* @param lines An array of line numbers to remove
|
||||
* @param scoreManager A reference to the score manager
|
||||
*/
|
||||
clearLines(lines: Array<number>, scoreManager: ScoreManager) {
|
||||
lines.sort();
|
||||
for (let i = 0; i < lines.length; i += 1) {
|
||||
this.#currentGrid.splice(lines[i], 1);
|
||||
this.#currentGrid.unshift(this.getEmptyLine(this.#currentGrid[0].length));
|
||||
}
|
||||
scoreManager.addLinesRemovedPoints(lines.length);
|
||||
}
|
||||
|
||||
/**
|
||||
* Gets the lines to clear around the given piece's coordinates.
|
||||
* The piece's coordinates are used for optimization and to prevent checking the whole grid.
|
||||
*
|
||||
* @param pos The piece's coordinates to check lines at
|
||||
* @return {Array<number>} An array containing the line numbers to clear
|
||||
*/
|
||||
getLinesToClear(pos: Array<CoordinatesType>): Array<number> {
|
||||
const rows = [];
|
||||
for (let i = 0; i < pos.length; i += 1) {
|
||||
let isLineFull = true;
|
||||
for (let col = 0; col < this.#currentGrid[pos[i].y].length; col += 1) {
|
||||
if (this.#currentGrid[pos[i].y][col].isEmpty) {
|
||||
isLineFull = false;
|
||||
break;
|
||||
}
|
||||
return line;
|
||||
}
|
||||
if (isLineFull && rows.indexOf(pos[i].y) === -1) rows.push(pos[i].y);
|
||||
}
|
||||
return rows;
|
||||
}
|
||||
|
||||
/**
|
||||
* Gets a new empty grid
|
||||
*
|
||||
* @param width The grid width
|
||||
* @param height The grid height
|
||||
* @return {Grid} A new empty grid
|
||||
*/
|
||||
getEmptyGrid(height: number, width: number): Grid {
|
||||
let grid = [];
|
||||
for (let row = 0; row < height; row++) {
|
||||
grid.push(this.getEmptyLine(width));
|
||||
}
|
||||
return grid;
|
||||
}
|
||||
|
||||
/**
|
||||
* Removes the given lines from the grid,
|
||||
* shifts down every line on top and adds new empty lines on top.
|
||||
*
|
||||
* @param lines An array of line numbers to remove
|
||||
* @param scoreManager A reference to the score manager
|
||||
*/
|
||||
clearLines(lines: Array<number>, scoreManager: ScoreManager) {
|
||||
lines.sort();
|
||||
for (let i = 0; i < lines.length; i++) {
|
||||
this.#currentGrid.splice(lines[i], 1);
|
||||
this.#currentGrid.unshift(this.getEmptyLine(this.#currentGrid[0].length));
|
||||
}
|
||||
scoreManager.addLinesRemovedPoints(lines.length);
|
||||
}
|
||||
|
||||
/**
|
||||
* Gets the lines to clear around the given piece's coordinates.
|
||||
* The piece's coordinates are used for optimization and to prevent checking the whole grid.
|
||||
*
|
||||
* @param pos The piece's coordinates to check lines at
|
||||
* @return {Array<number>} An array containing the line numbers to clear
|
||||
*/
|
||||
getLinesToClear(pos: Array<Coordinates>): Array<number> {
|
||||
let rows = [];
|
||||
for (let i = 0; i < pos.length; i++) {
|
||||
let isLineFull = true;
|
||||
for (let col = 0; col < this.#currentGrid[pos[i].y].length; col++) {
|
||||
if (this.#currentGrid[pos[i].y][col].isEmpty) {
|
||||
isLineFull = false;
|
||||
break;
|
||||
}
|
||||
}
|
||||
if (isLineFull && rows.indexOf(pos[i].y) === -1)
|
||||
rows.push(pos[i].y);
|
||||
}
|
||||
return rows;
|
||||
}
|
||||
|
||||
/**
|
||||
* Freezes the given piece to the grid
|
||||
*
|
||||
* @param currentObject The piece to freeze
|
||||
* @param scoreManager A reference to the score manager
|
||||
*/
|
||||
freezeTetromino(currentObject: Piece, scoreManager: ScoreManager) {
|
||||
this.clearLines(this.getLinesToClear(currentObject.getCoordinates()), scoreManager);
|
||||
}
|
||||
/**
|
||||
* Freezes the given piece to the grid
|
||||
*
|
||||
* @param currentObject The piece to freeze
|
||||
* @param scoreManager A reference to the score manager
|
||||
*/
|
||||
freezeTetromino(currentObject: Piece, scoreManager: ScoreManager) {
|
||||
this.clearLines(
|
||||
this.getLinesToClear(currentObject.getCoordinates()),
|
||||
scoreManager,
|
||||
);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -4,98 +4,100 @@
|
|||
* Class used to manage game score
|
||||
*/
|
||||
export default class ScoreManager {
|
||||
#scoreLinesModifier = [40, 100, 300, 1200];
|
||||
|
||||
#scoreLinesModifier = [40, 100, 300, 1200];
|
||||
#score: number;
|
||||
|
||||
#score: number;
|
||||
#level: number;
|
||||
#levelProgression: number;
|
||||
#level: number;
|
||||
|
||||
/**
|
||||
* Initializes score to 0
|
||||
*/
|
||||
constructor() {
|
||||
this.#score = 0;
|
||||
this.#level = 0;
|
||||
this.#levelProgression = 0;
|
||||
#levelProgression: number;
|
||||
|
||||
/**
|
||||
* Initializes score to 0
|
||||
*/
|
||||
constructor() {
|
||||
this.#score = 0;
|
||||
this.#level = 0;
|
||||
this.#levelProgression = 0;
|
||||
}
|
||||
|
||||
/**
|
||||
* Gets the current score
|
||||
*
|
||||
* @return {number} The current score
|
||||
*/
|
||||
getScore(): number {
|
||||
return this.#score;
|
||||
}
|
||||
|
||||
/**
|
||||
* Gets the current level
|
||||
*
|
||||
* @return {number} The current level
|
||||
*/
|
||||
getLevel(): number {
|
||||
return this.#level;
|
||||
}
|
||||
|
||||
/**
|
||||
* Gets the current level progression
|
||||
*
|
||||
* @return {number} The current level progression
|
||||
*/
|
||||
getLevelProgression(): number {
|
||||
return this.#levelProgression;
|
||||
}
|
||||
|
||||
/**
|
||||
* Increments the score by one
|
||||
*/
|
||||
incrementScore() {
|
||||
this.#score += 1;
|
||||
}
|
||||
|
||||
/**
|
||||
* Add score corresponding to the number of lines removed at the same time.
|
||||
* Also updates the level progression.
|
||||
*
|
||||
* The more lines cleared at the same time, the more points and level progression the player gets.
|
||||
*
|
||||
* @param numberRemoved The number of lines removed at the same time
|
||||
*/
|
||||
addLinesRemovedPoints(numberRemoved: number) {
|
||||
if (numberRemoved < 1 || numberRemoved > 4) return;
|
||||
this.#score +=
|
||||
this.#scoreLinesModifier[numberRemoved - 1] * (this.#level + 1);
|
||||
switch (numberRemoved) {
|
||||
case 1:
|
||||
this.#levelProgression += 1;
|
||||
break;
|
||||
case 2:
|
||||
this.#levelProgression += 3;
|
||||
break;
|
||||
case 3:
|
||||
this.#levelProgression += 5;
|
||||
break;
|
||||
case 4: // Did a tetris !
|
||||
this.#levelProgression += 8;
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Gets the current score
|
||||
*
|
||||
* @return {number} The current score
|
||||
*/
|
||||
getScore(): number {
|
||||
return this.#score;
|
||||
/**
|
||||
* Checks if the player can go to the next level.
|
||||
*
|
||||
* If he can, change the level.
|
||||
*
|
||||
* @return {boolean} True if the current level has changed
|
||||
*/
|
||||
canLevelUp(): boolean {
|
||||
const canLevel = this.#levelProgression > this.#level * 5;
|
||||
if (canLevel) {
|
||||
this.#levelProgression -= this.#level * 5;
|
||||
this.#level += 1;
|
||||
}
|
||||
|
||||
/**
|
||||
* Gets the current level
|
||||
*
|
||||
* @return {number} The current level
|
||||
*/
|
||||
getLevel(): number {
|
||||
return this.#level;
|
||||
}
|
||||
|
||||
/**
|
||||
* Gets the current level progression
|
||||
*
|
||||
* @return {number} The current level progression
|
||||
*/
|
||||
getLevelProgression(): number {
|
||||
return this.#levelProgression;
|
||||
}
|
||||
|
||||
/**
|
||||
* Increments the score by one
|
||||
*/
|
||||
incrementScore() {
|
||||
this.#score++;
|
||||
}
|
||||
|
||||
/**
|
||||
* Add score corresponding to the number of lines removed at the same time.
|
||||
* Also updates the level progression.
|
||||
*
|
||||
* The more lines cleared at the same time, the more points and level progression the player gets.
|
||||
*
|
||||
* @param numberRemoved The number of lines removed at the same time
|
||||
*/
|
||||
addLinesRemovedPoints(numberRemoved: number) {
|
||||
if (numberRemoved < 1 || numberRemoved > 4)
|
||||
return;
|
||||
this.#score += this.#scoreLinesModifier[numberRemoved-1] * (this.#level + 1);
|
||||
switch (numberRemoved) {
|
||||
case 1:
|
||||
this.#levelProgression += 1;
|
||||
break;
|
||||
case 2:
|
||||
this.#levelProgression += 3;
|
||||
break;
|
||||
case 3:
|
||||
this.#levelProgression += 5;
|
||||
break;
|
||||
case 4: // Did a tetris !
|
||||
this.#levelProgression += 8;
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Checks if the player can go to the next level.
|
||||
*
|
||||
* If he can, change the level.
|
||||
*
|
||||
* @return {boolean} True if the current level has changed
|
||||
*/
|
||||
canLevelUp() {
|
||||
let canLevel = this.#levelProgression > this.#level * 5;
|
||||
if (canLevel){
|
||||
this.#levelProgression -= this.#level * 5;
|
||||
this.#level++;
|
||||
}
|
||||
return canLevel;
|
||||
}
|
||||
|
||||
return canLevel;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -3,400 +3,447 @@
|
|||
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 GameLogic from "../logic/GameLogic";
|
||||
import type {Grid} from "../components/GridComponent";
|
||||
import GridComponent from "../components/GridComponent";
|
||||
import Preview from "../components/Preview";
|
||||
import i18n from "i18n-js";
|
||||
import MaterialHeaderButtons, {Item} from "../../../components/Overrides/CustomHeaderButton";
|
||||
import {StackNavigationProp} from "@react-navigation/stack";
|
||||
import type {CustomTheme} from "../../../managers/ThemeManager";
|
||||
import type {OptionsDialogButton} from "../../../components/Dialogs/OptionsDialog";
|
||||
import OptionsDialog from "../../../components/Dialogs/OptionsDialog";
|
||||
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 Props = {
|
||||
navigation: StackNavigationProp,
|
||||
route: { params: { highScore: number }, ... },
|
||||
theme: CustomTheme,
|
||||
}
|
||||
type PropsType = {
|
||||
navigation: StackNavigationProp,
|
||||
route: {params: {highScore: number}},
|
||||
theme: CustomThemeType,
|
||||
};
|
||||
|
||||
type State = {
|
||||
grid: Grid,
|
||||
gameRunning: boolean,
|
||||
gameTime: number,
|
||||
gameScore: number,
|
||||
gameLevel: number,
|
||||
type StateType = {
|
||||
grid: GridType,
|
||||
gameTime: number,
|
||||
gameScore: number,
|
||||
gameLevel: number,
|
||||
|
||||
dialogVisible: boolean,
|
||||
dialogTitle: string,
|
||||
dialogMessage: string,
|
||||
dialogButtons: Array<OptionsDialogButton>,
|
||||
onDialogDismiss: () => void,
|
||||
}
|
||||
dialogVisible: boolean,
|
||||
dialogTitle: string,
|
||||
dialogMessage: string,
|
||||
dialogButtons: Array<OptionsDialogButtonType>,
|
||||
onDialogDismiss: () => void,
|
||||
};
|
||||
|
||||
class GameMainScreen extends React.Component<Props, State> {
|
||||
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;
|
||||
logic: GameLogic;
|
||||
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.logic = new GameLogic(20, 10, this.props.theme);
|
||||
this.state = {
|
||||
grid: this.logic.getCurrentGrid(),
|
||||
gameRunning: false,
|
||||
gameTime: 0,
|
||||
gameScore: 0,
|
||||
gameLevel: 0,
|
||||
dialogVisible: false,
|
||||
dialogTitle: "",
|
||||
dialogMessage: "",
|
||||
dialogButtons: [],
|
||||
onDialogDismiss: () => {
|
||||
},
|
||||
};
|
||||
if (this.props.route.params != null)
|
||||
this.highScore = this.props.route.params.highScore;
|
||||
}
|
||||
highScore: number | null;
|
||||
|
||||
componentDidMount() {
|
||||
this.props.navigation.setOptions({
|
||||
headerRight: this.getRightButton,
|
||||
});
|
||||
this.startGame();
|
||||
}
|
||||
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;
|
||||
}
|
||||
|
||||
componentWillUnmount() {
|
||||
this.logic.stopGame();
|
||||
}
|
||||
componentDidMount() {
|
||||
const {navigation} = this.props;
|
||||
navigation.setOptions({
|
||||
headerRight: this.getRightButton,
|
||||
});
|
||||
this.startGame();
|
||||
}
|
||||
|
||||
getRightButton = () => {
|
||||
return <MaterialHeaderButtons>
|
||||
<Item title="pause" iconName="pause" onPress={this.togglePause}/>
|
||||
</MaterialHeaderButtons>;
|
||||
}
|
||||
componentWillUnmount() {
|
||||
this.logic.endGame(false);
|
||||
}
|
||||
|
||||
getFormattedTime(seconds: number) {
|
||||
let 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();
|
||||
return format;
|
||||
}
|
||||
getRightButton = (): React.Node => {
|
||||
return (
|
||||
<MaterialHeaderButtons>
|
||||
<Item title="pause" iconName="pause" onPress={this.togglePause} />
|
||||
</MaterialHeaderButtons>
|
||||
);
|
||||
};
|
||||
|
||||
onTick = (score: number, level: number, newGrid: Grid) => {
|
||||
this.setState({
|
||||
gameScore: score,
|
||||
gameLevel: level,
|
||||
grid: newGrid,
|
||||
});
|
||||
}
|
||||
onTick = (score: number, level: number, newGrid: GridType) => {
|
||||
this.setState({
|
||||
gameScore: score,
|
||||
gameLevel: level,
|
||||
grid: newGrid,
|
||||
});
|
||||
};
|
||||
|
||||
onClock = (time: number) => {
|
||||
this.setState({
|
||||
gameTime: time,
|
||||
});
|
||||
}
|
||||
onClock = (time: number) => {
|
||||
this.setState({
|
||||
gameTime: time,
|
||||
});
|
||||
};
|
||||
|
||||
updateGrid = (newGrid: Grid) => {
|
||||
this.setState({
|
||||
grid: newGrid,
|
||||
});
|
||||
}
|
||||
onDialogDismiss = () => {
|
||||
this.setState({dialogVisible: false});
|
||||
};
|
||||
|
||||
updateGridScore = (newGrid: Grid, score: number) => {
|
||||
this.setState({
|
||||
grid: newGrid,
|
||||
gameScore: score,
|
||||
});
|
||||
}
|
||||
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,
|
||||
});
|
||||
};
|
||||
|
||||
togglePause = () => {
|
||||
this.logic.togglePause();
|
||||
if (this.logic.isGamePaused())
|
||||
this.showPausePopup();
|
||||
}
|
||||
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>
|
||||
);
|
||||
}
|
||||
|
||||
onDialogDismiss = () => this.setState({dialogVisible: false});
|
||||
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>
|
||||
);
|
||||
}
|
||||
|
||||
showPausePopup = () => {
|
||||
const onDismiss = () => {
|
||||
this.togglePause();
|
||||
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.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,
|
||||
});
|
||||
}
|
||||
this.startGame();
|
||||
},
|
||||
},
|
||||
{
|
||||
title: i18n.t('screens.game.restart.confirmNo'),
|
||||
onPress: this.showPausePopup,
|
||||
},
|
||||
],
|
||||
onDialogDismiss: this.showPausePopup,
|
||||
});
|
||||
};
|
||||
|
||||
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);
|
||||
};
|
||||
|
||||
startGame = () => {
|
||||
this.logic.startGame(this.onTick, this.onClock, this.onGameEnd);
|
||||
this.setState({
|
||||
gameRunning: true,
|
||||
});
|
||||
}
|
||||
|
||||
onGameEnd = (time: number, score: number, isRestart: boolean) => {
|
||||
this.setState({
|
||||
gameTime: time,
|
||||
gameScore: score,
|
||||
gameRunning: false,
|
||||
});
|
||||
if (!isRestart)
|
||||
this.props.navigation.replace(
|
||||
"game-start",
|
||||
{
|
||||
score: this.state.gameScore,
|
||||
level: this.state.gameLevel,
|
||||
time: this.state.gameTime,
|
||||
}
|
||||
);
|
||||
}
|
||||
|
||||
getStatusIcons() {
|
||||
return (
|
||||
<View style={{
|
||||
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,
|
||||
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={this.props.theme.colors.subtitle}
|
||||
size={20}/>
|
||||
<Text style={{
|
||||
marginLeft: 5,
|
||||
color: this.props.theme.colors.subtitle
|
||||
}}>{this.getFormattedTime(this.state.gameTime)}</Text>
|
||||
</View>
|
||||
marginLeft: 'auto',
|
||||
marginRight: 'auto',
|
||||
}}
|
||||
/>
|
||||
</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={this.props.theme.colors.text}
|
||||
size={20}/>
|
||||
<Text style={{
|
||||
marginLeft: 5
|
||||
}}>{this.state.gameLevel}</Text>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
getScoreIcon() {
|
||||
let highScore = this.highScore == null || this.state.gameScore > this.highScore
|
||||
? this.state.gameScore
|
||||
: this.highScore;
|
||||
return (
|
||||
<View style={{
|
||||
<View style={{flex: 1}}>
|
||||
<Preview
|
||||
items={this.logic.getNextPiecesPreviews()}
|
||||
style={{
|
||||
marginLeft: 'auto',
|
||||
marginRight: 'auto',
|
||||
marginTop: 10,
|
||||
marginBottom: 10,
|
||||
}}>
|
||||
<View style={{
|
||||
flexDirection: "row",
|
||||
marginLeft: "auto",
|
||||
marginRight: "auto",
|
||||
}}>
|
||||
<Text style={{
|
||||
marginLeft: 5,
|
||||
fontSize: 20,
|
||||
}}>{i18n.t("screens.game.score", {score: this.state.gameScore})}</Text>
|
||||
<MaterialCommunityIcons
|
||||
name={'star'}
|
||||
color={this.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: this.props.theme.colors.textDisabled
|
||||
}}>{i18n.t("screens.game.highScore", {score: highScore})}</Text>
|
||||
<MaterialCommunityIcons
|
||||
name={'star'}
|
||||
color={this.props.theme.colors.tetrisScore}
|
||||
size={10}
|
||||
style={{
|
||||
marginTop: "auto",
|
||||
marginBottom: "auto",
|
||||
marginLeft: 5
|
||||
}}/>
|
||||
</View>
|
||||
</View>
|
||||
|
||||
);
|
||||
}
|
||||
|
||||
getControlButtons() {
|
||||
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={this.props.theme.colors.tetrisScore}
|
||||
/>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
render() {
|
||||
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={this.state.grid}
|
||||
style={{
|
||||
backgroundColor: this.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={this.state.dialogVisible}
|
||||
title={this.state.dialogTitle}
|
||||
message={this.state.dialogMessage}
|
||||
buttons={this.state.dialogButtons}
|
||||
onDismiss={this.state.onDialogDismiss}
|
||||
/>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
}}
|
||||
/>
|
||||
</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);
|
||||
|
|
|
|||
|
|
@ -1,427 +1,440 @@
|
|||
// @flow
|
||||
|
||||
import * as React from "react";
|
||||
import {StackNavigationProp} from "@react-navigation/stack";
|
||||
import type {CustomTheme} from "../../../managers/ThemeManager";
|
||||
import {Button, Card, Divider, Headline, Paragraph, Text, withTheme} from "react-native-paper";
|
||||
import {View} from "react-native";
|
||||
import i18n from "i18n-js";
|
||||
import Mascot, {MASCOT_STYLE} from "../../../components/Mascot/Mascot";
|
||||
import MascotPopup from "../../../components/Mascot/MascotPopup";
|
||||
import AsyncStorageManager from "../../../managers/AsyncStorageManager";
|
||||
import type {Grid} from "../components/GridComponent";
|
||||
import GridComponent from "../components/GridComponent";
|
||||
import GridManager from "../logic/GridManager";
|
||||
import Piece from "../logic/Piece";
|
||||
import * as Animatable from "react-native-animatable";
|
||||
import MaterialCommunityIcons from "react-native-vector-icons/MaterialCommunityIcons";
|
||||
import LinearGradient from "react-native-linear-gradient";
|
||||
import SpeechArrow from "../../../components/Mascot/SpeechArrow";
|
||||
import CollapsibleScrollView from "../../../components/Collapsible/CollapsibleScrollView";
|
||||
import * as React from 'react';
|
||||
import {StackNavigationProp} from '@react-navigation/stack';
|
||||
import {
|
||||
Button,
|
||||
Card,
|
||||
Divider,
|
||||
Headline,
|
||||
Paragraph,
|
||||
Text,
|
||||
withTheme,
|
||||
} from 'react-native-paper';
|
||||
import {View} from 'react-native';
|
||||
import i18n from 'i18n-js';
|
||||
import * as Animatable from 'react-native-animatable';
|
||||
import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
|
||||
import LinearGradient from 'react-native-linear-gradient';
|
||||
import type {CustomThemeType} from '../../../managers/ThemeManager';
|
||||
import Mascot, {MASCOT_STYLE} from '../../../components/Mascot/Mascot';
|
||||
import MascotPopup from '../../../components/Mascot/MascotPopup';
|
||||
import AsyncStorageManager from '../../../managers/AsyncStorageManager';
|
||||
import type {GridType} from '../components/GridComponent';
|
||||
import GridComponent from '../components/GridComponent';
|
||||
import GridManager from '../logic/GridManager';
|
||||
import Piece from '../logic/Piece';
|
||||
import SpeechArrow from '../../../components/Mascot/SpeechArrow';
|
||||
import CollapsibleScrollView from '../../../components/Collapsible/CollapsibleScrollView';
|
||||
|
||||
type GameStats = {
|
||||
score: number,
|
||||
level: number,
|
||||
time: number,
|
||||
}
|
||||
type GameStatsType = {
|
||||
score: number,
|
||||
level: number,
|
||||
time: number,
|
||||
};
|
||||
|
||||
type Props = {
|
||||
navigation: StackNavigationProp,
|
||||
route: {
|
||||
params: GameStats
|
||||
},
|
||||
theme: CustomTheme,
|
||||
}
|
||||
type PropsType = {
|
||||
navigation: StackNavigationProp,
|
||||
route: {
|
||||
params: GameStatsType,
|
||||
},
|
||||
theme: CustomThemeType,
|
||||
};
|
||||
|
||||
class GameStartScreen extends React.Component<Props> {
|
||||
class GameStartScreen extends React.Component<PropsType> {
|
||||
gridManager: GridManager;
|
||||
|
||||
gridManager: GridManager;
|
||||
scores: Array<number>;
|
||||
scores: Array<number>;
|
||||
|
||||
gameStats: GameStats | null;
|
||||
isHighScore: boolean;
|
||||
gameStats: GameStatsType | null;
|
||||
|
||||
constructor(props: Props) {
|
||||
super(props);
|
||||
this.gridManager = new GridManager(4, 4, props.theme);
|
||||
this.scores = AsyncStorageManager.getObject(AsyncStorageManager.PREFERENCES.gameScores.key);
|
||||
this.scores.sort((a, b) => b - a);
|
||||
if (this.props.route.params != null)
|
||||
this.recoverGameScore();
|
||||
isHighScore: boolean;
|
||||
|
||||
constructor(props: PropsType) {
|
||||
super(props);
|
||||
this.gridManager = new GridManager(4, 4, props.theme);
|
||||
this.scores = AsyncStorageManager.getObject(
|
||||
AsyncStorageManager.PREFERENCES.gameScores.key,
|
||||
);
|
||||
this.scores.sort((a: number, b: number): number => b - a);
|
||||
if (props.route.params != null) this.recoverGameScore();
|
||||
}
|
||||
|
||||
getPiecesBackground(): React.Node {
|
||||
const {theme} = this.props;
|
||||
const gridList = [];
|
||||
for (let i = 0; i < 18; i += 1) {
|
||||
gridList.push(this.gridManager.getEmptyGrid(4, 4));
|
||||
const piece = new Piece(theme);
|
||||
piece.toGrid(gridList[i], true);
|
||||
}
|
||||
return (
|
||||
<View
|
||||
style={{
|
||||
position: 'absolute',
|
||||
width: '100%',
|
||||
height: '100%',
|
||||
}}>
|
||||
{gridList.map((item: GridType, index: number): React.Node => {
|
||||
const size = 10 + Math.floor(Math.random() * 30);
|
||||
const top = Math.floor(Math.random() * 100);
|
||||
const rot = Math.floor(Math.random() * 360);
|
||||
const left = (index % 6) * 20;
|
||||
const animDelay = size * 20;
|
||||
const animDuration = 2 * (2000 - size * 30);
|
||||
return (
|
||||
<Animatable.View
|
||||
animation="fadeInDownBig"
|
||||
delay={animDelay}
|
||||
duration={animDuration}
|
||||
key={`piece${index.toString()}`}
|
||||
style={{
|
||||
width: `${size}%`,
|
||||
position: 'absolute',
|
||||
top: `${top}%`,
|
||||
left: `${left}%`,
|
||||
}}>
|
||||
<GridComponent
|
||||
width={4}
|
||||
height={4}
|
||||
grid={item}
|
||||
style={{
|
||||
transform: [{rotateZ: `${rot}deg`}],
|
||||
}}
|
||||
/>
|
||||
</Animatable.View>
|
||||
);
|
||||
})}
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
recoverGameScore() {
|
||||
this.gameStats = this.props.route.params;
|
||||
this.isHighScore = this.scores.length === 0 || this.gameStats.score > this.scores[0];
|
||||
for (let i = 0; i < 3; i++) {
|
||||
if (this.scores.length > i && this.gameStats.score > this.scores[i]) {
|
||||
this.scores.splice(i, 0, this.gameStats.score);
|
||||
break;
|
||||
} else if (this.scores.length <= i) {
|
||||
this.scores.push(this.gameStats.score);
|
||||
break;
|
||||
}
|
||||
}
|
||||
if (this.scores.length > 3)
|
||||
this.scores.splice(3, 1);
|
||||
AsyncStorageManager.set(AsyncStorageManager.PREFERENCES.gameScores.key, this.scores);
|
||||
}
|
||||
|
||||
getPiecesBackground() {
|
||||
let gridList = [];
|
||||
for (let i = 0; i < 18; i++) {
|
||||
gridList.push(this.gridManager.getEmptyGrid(4, 4));
|
||||
const piece = new Piece(this.props.theme);
|
||||
piece.toGrid(gridList[i], true);
|
||||
}
|
||||
return (
|
||||
<View style={{
|
||||
position: "absolute",
|
||||
width: "100%",
|
||||
height: "100%",
|
||||
}}>
|
||||
{gridList.map((item: Grid, index: number) => {
|
||||
const size = 10 + Math.floor(Math.random() * 30);
|
||||
const top = Math.floor(Math.random() * 100);
|
||||
const rot = Math.floor(Math.random() * 360);
|
||||
const left = (index % 6) * 20;
|
||||
const animDelay = size * 20;
|
||||
const animDuration = 2 * (2000 - (size * 30));
|
||||
return (
|
||||
<Animatable.View
|
||||
animation={"fadeInDownBig"}
|
||||
delay={animDelay}
|
||||
duration={animDuration}
|
||||
key={"piece" + index.toString()}
|
||||
style={{
|
||||
width: size + "%",
|
||||
position: "absolute",
|
||||
top: top + "%",
|
||||
left: left + "%",
|
||||
}}
|
||||
>
|
||||
<GridComponent
|
||||
width={4}
|
||||
height={4}
|
||||
grid={item}
|
||||
style={{
|
||||
transform: [{rotateZ: rot + "deg"}],
|
||||
}}
|
||||
/>
|
||||
</Animatable.View>
|
||||
);
|
||||
})}
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
getPostGameContent(stats: GameStats) {
|
||||
return (
|
||||
<View style={{
|
||||
flex: 1
|
||||
}}>
|
||||
<Mascot
|
||||
emotion={this.isHighScore ? MASCOT_STYLE.LOVE : MASCOT_STYLE.NORMAL}
|
||||
animated={this.isHighScore}
|
||||
style={{
|
||||
width: this.isHighScore ? "50%" : "30%",
|
||||
marginLeft: this.isHighScore ? "auto" : null,
|
||||
marginRight: this.isHighScore ? "auto" : null,
|
||||
}}/>
|
||||
<SpeechArrow
|
||||
style={{marginLeft: this.isHighScore ? "60%" : "20%"}}
|
||||
size={20}
|
||||
color={this.props.theme.colors.mascotMessageArrow}
|
||||
/>
|
||||
<Card style={{
|
||||
borderColor: this.props.theme.colors.mascotMessageArrow,
|
||||
borderWidth: 2,
|
||||
marginLeft: 20,
|
||||
marginRight: 20,
|
||||
getPostGameContent(stats: GameStatsType): React.Node {
|
||||
const {props} = this;
|
||||
return (
|
||||
<View
|
||||
style={{
|
||||
flex: 1,
|
||||
}}>
|
||||
<Mascot
|
||||
emotion={this.isHighScore ? MASCOT_STYLE.LOVE : MASCOT_STYLE.NORMAL}
|
||||
animated={this.isHighScore}
|
||||
style={{
|
||||
width: this.isHighScore ? '50%' : '30%',
|
||||
marginLeft: this.isHighScore ? 'auto' : null,
|
||||
marginRight: this.isHighScore ? 'auto' : null,
|
||||
}}
|
||||
/>
|
||||
<SpeechArrow
|
||||
style={{marginLeft: this.isHighScore ? '60%' : '20%'}}
|
||||
size={20}
|
||||
color={props.theme.colors.mascotMessageArrow}
|
||||
/>
|
||||
<Card
|
||||
style={{
|
||||
borderColor: props.theme.colors.mascotMessageArrow,
|
||||
borderWidth: 2,
|
||||
marginLeft: 20,
|
||||
marginRight: 20,
|
||||
}}>
|
||||
<Card.Content>
|
||||
<Headline
|
||||
style={{
|
||||
textAlign: 'center',
|
||||
color: this.isHighScore
|
||||
? props.theme.colors.gameGold
|
||||
: props.theme.colors.primary,
|
||||
}}>
|
||||
{this.isHighScore
|
||||
? i18n.t('screens.game.newHighScore')
|
||||
: i18n.t('screens.game.gameOver')}
|
||||
</Headline>
|
||||
<Divider />
|
||||
<View
|
||||
style={{
|
||||
flexDirection: 'row',
|
||||
marginLeft: 'auto',
|
||||
marginRight: 'auto',
|
||||
marginTop: 10,
|
||||
marginBottom: 10,
|
||||
}}>
|
||||
<Text
|
||||
style={{
|
||||
fontSize: 20,
|
||||
}}>
|
||||
<Card.Content>
|
||||
<Headline
|
||||
style={{
|
||||
textAlign: "center",
|
||||
color: this.isHighScore
|
||||
? this.props.theme.colors.gameGold
|
||||
: this.props.theme.colors.primary
|
||||
}}>
|
||||
{this.isHighScore
|
||||
? i18n.t("screens.game.newHighScore")
|
||||
: i18n.t("screens.game.gameOver")}
|
||||
</Headline>
|
||||
<Divider/>
|
||||
<View style={{
|
||||
flexDirection: "row",
|
||||
marginLeft: "auto",
|
||||
marginRight: "auto",
|
||||
marginTop: 10,
|
||||
marginBottom: 10,
|
||||
}}>
|
||||
<Text style={{
|
||||
fontSize: 20,
|
||||
}}>
|
||||
{i18n.t("screens.game.score", {score: stats.score})}
|
||||
</Text>
|
||||
<MaterialCommunityIcons
|
||||
name={'star'}
|
||||
color={this.props.theme.colors.tetrisScore}
|
||||
size={30}
|
||||
style={{
|
||||
marginLeft: 5
|
||||
}}/>
|
||||
</View>
|
||||
<View style={{
|
||||
flexDirection: "row",
|
||||
marginLeft: "auto",
|
||||
marginRight: "auto",
|
||||
}}>
|
||||
<Text>{i18n.t("screens.game.level")}</Text>
|
||||
<MaterialCommunityIcons
|
||||
style={{
|
||||
marginRight: 5,
|
||||
marginLeft: 5,
|
||||
}}
|
||||
name={"gamepad-square"}
|
||||
size={20}
|
||||
color={this.props.theme.colors.textDisabled}
|
||||
/>
|
||||
<Text>
|
||||
{stats.level}
|
||||
</Text>
|
||||
</View>
|
||||
<View style={{
|
||||
flexDirection: "row",
|
||||
marginLeft: "auto",
|
||||
marginRight: "auto",
|
||||
}}>
|
||||
<Text>{i18n.t("screens.game.time")}</Text>
|
||||
<MaterialCommunityIcons
|
||||
style={{
|
||||
marginRight: 5,
|
||||
marginLeft: 5,
|
||||
}}
|
||||
name={"timer"}
|
||||
size={20}
|
||||
color={this.props.theme.colors.textDisabled}
|
||||
/>
|
||||
<Text>
|
||||
{stats.time}
|
||||
</Text>
|
||||
</View>
|
||||
</Card.Content>
|
||||
</Card>
|
||||
{i18n.t('screens.game.score', {score: stats.score})}
|
||||
</Text>
|
||||
<MaterialCommunityIcons
|
||||
name="star"
|
||||
color={props.theme.colors.tetrisScore}
|
||||
size={30}
|
||||
style={{
|
||||
marginLeft: 5,
|
||||
}}
|
||||
/>
|
||||
</View>
|
||||
)
|
||||
}
|
||||
|
||||
getWelcomeText() {
|
||||
return (
|
||||
<View>
|
||||
<Mascot emotion={MASCOT_STYLE.COOL} style={{
|
||||
width: "40%",
|
||||
marginLeft: "auto",
|
||||
marginRight: "auto",
|
||||
}}/>
|
||||
<SpeechArrow
|
||||
style={{marginLeft: "60%"}}
|
||||
size={20}
|
||||
color={this.props.theme.colors.mascotMessageArrow}
|
||||
/>
|
||||
<Card style={{
|
||||
borderColor: this.props.theme.colors.mascotMessageArrow,
|
||||
borderWidth: 2,
|
||||
marginLeft: 10,
|
||||
marginRight: 10,
|
||||
}}>
|
||||
<Card.Content>
|
||||
<Headline
|
||||
style={{
|
||||
textAlign: "center",
|
||||
color: this.props.theme.colors.primary
|
||||
}}>
|
||||
{i18n.t("screens.game.welcomeTitle")}
|
||||
</Headline>
|
||||
<Divider/>
|
||||
<Paragraph
|
||||
style={{
|
||||
textAlign: "center",
|
||||
marginTop: 10,
|
||||
}}>
|
||||
{i18n.t("screens.game.welcomeMessage")}
|
||||
</Paragraph>
|
||||
</Card.Content>
|
||||
</Card>
|
||||
<View
|
||||
style={{
|
||||
flexDirection: 'row',
|
||||
marginLeft: 'auto',
|
||||
marginRight: 'auto',
|
||||
}}>
|
||||
<Text>{i18n.t('screens.game.level')}</Text>
|
||||
<MaterialCommunityIcons
|
||||
style={{
|
||||
marginRight: 5,
|
||||
marginLeft: 5,
|
||||
}}
|
||||
name="gamepad-square"
|
||||
size={20}
|
||||
color={props.theme.colors.textDisabled}
|
||||
/>
|
||||
<Text>{stats.level}</Text>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
<View
|
||||
style={{
|
||||
flexDirection: 'row',
|
||||
marginLeft: 'auto',
|
||||
marginRight: 'auto',
|
||||
}}>
|
||||
<Text>{i18n.t('screens.game.time')}</Text>
|
||||
<MaterialCommunityIcons
|
||||
style={{
|
||||
marginRight: 5,
|
||||
marginLeft: 5,
|
||||
}}
|
||||
name="timer"
|
||||
size={20}
|
||||
color={props.theme.colors.textDisabled}
|
||||
/>
|
||||
<Text>{stats.time}</Text>
|
||||
</View>
|
||||
</Card.Content>
|
||||
</Card>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
getPodiumRender(place: 1 | 2 | 3, score: string) {
|
||||
let icon = "podium-gold";
|
||||
let color = this.props.theme.colors.gameGold;
|
||||
let fontSize = 20;
|
||||
let size = 70;
|
||||
if (place === 2) {
|
||||
icon = "podium-silver";
|
||||
color = this.props.theme.colors.gameSilver;
|
||||
fontSize = 18;
|
||||
size = 60;
|
||||
} else if (place === 3) {
|
||||
icon = "podium-bronze";
|
||||
color = this.props.theme.colors.gameBronze;
|
||||
fontSize = 15;
|
||||
size = 50;
|
||||
}
|
||||
return (
|
||||
<View style={{
|
||||
marginLeft: place === 2 ? 20 : "auto",
|
||||
marginRight: place === 3 ? 20 : "auto",
|
||||
flexDirection: "column",
|
||||
alignItems: "center",
|
||||
justifyContent: "flex-end",
|
||||
getWelcomeText(): React.Node {
|
||||
const {props} = this;
|
||||
return (
|
||||
<View>
|
||||
<Mascot
|
||||
emotion={MASCOT_STYLE.COOL}
|
||||
style={{
|
||||
width: '40%',
|
||||
marginLeft: 'auto',
|
||||
marginRight: 'auto',
|
||||
}}
|
||||
/>
|
||||
<SpeechArrow
|
||||
style={{marginLeft: '60%'}}
|
||||
size={20}
|
||||
color={props.theme.colors.mascotMessageArrow}
|
||||
/>
|
||||
<Card
|
||||
style={{
|
||||
borderColor: props.theme.colors.mascotMessageArrow,
|
||||
borderWidth: 2,
|
||||
marginLeft: 10,
|
||||
marginRight: 10,
|
||||
}}>
|
||||
<Card.Content>
|
||||
<Headline
|
||||
style={{
|
||||
textAlign: 'center',
|
||||
color: props.theme.colors.primary,
|
||||
}}>
|
||||
{i18n.t('screens.game.welcomeTitle')}
|
||||
</Headline>
|
||||
<Divider />
|
||||
<Paragraph
|
||||
style={{
|
||||
textAlign: 'center',
|
||||
marginTop: 10,
|
||||
}}>
|
||||
{i18n.t('screens.game.welcomeMessage')}
|
||||
</Paragraph>
|
||||
</Card.Content>
|
||||
</Card>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
getPodiumRender(place: 1 | 2 | 3, score: string): React.Node {
|
||||
const {props} = this;
|
||||
let icon = 'podium-gold';
|
||||
let color = props.theme.colors.gameGold;
|
||||
let fontSize = 20;
|
||||
let size = 70;
|
||||
if (place === 2) {
|
||||
icon = 'podium-silver';
|
||||
color = props.theme.colors.gameSilver;
|
||||
fontSize = 18;
|
||||
size = 60;
|
||||
} else if (place === 3) {
|
||||
icon = 'podium-bronze';
|
||||
color = props.theme.colors.gameBronze;
|
||||
fontSize = 15;
|
||||
size = 50;
|
||||
}
|
||||
return (
|
||||
<View
|
||||
style={{
|
||||
marginLeft: place === 2 ? 20 : 'auto',
|
||||
marginRight: place === 3 ? 20 : 'auto',
|
||||
flexDirection: 'column',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'flex-end',
|
||||
}}>
|
||||
{this.isHighScore && place === 1 ? (
|
||||
<Animatable.View
|
||||
animation="swing"
|
||||
iterationCount="infinite"
|
||||
duration={2000}
|
||||
delay={1000}
|
||||
useNativeDriver
|
||||
style={{
|
||||
position: 'absolute',
|
||||
top: -20,
|
||||
}}>
|
||||
{
|
||||
this.isHighScore && place === 1
|
||||
?
|
||||
<Animatable.View
|
||||
animation={"swing"}
|
||||
iterationCount={"infinite"}
|
||||
duration={2000}
|
||||
delay={1000}
|
||||
useNativeDriver={true}
|
||||
style={{
|
||||
position: "absolute",
|
||||
top: -20
|
||||
}}
|
||||
>
|
||||
<Animatable.View
|
||||
animation={"pulse"}
|
||||
iterationCount={"infinite"}
|
||||
useNativeDriver={true}
|
||||
>
|
||||
<MaterialCommunityIcons
|
||||
name={"decagram"}
|
||||
color={this.props.theme.colors.gameGold}
|
||||
size={150}
|
||||
/>
|
||||
</Animatable.View>
|
||||
</Animatable.View>
|
||||
<Animatable.View
|
||||
animation="pulse"
|
||||
iterationCount="infinite"
|
||||
useNativeDriver>
|
||||
<MaterialCommunityIcons
|
||||
name="decagram"
|
||||
color={props.theme.colors.gameGold}
|
||||
size={150}
|
||||
/>
|
||||
</Animatable.View>
|
||||
</Animatable.View>
|
||||
) : null}
|
||||
<MaterialCommunityIcons
|
||||
name={icon}
|
||||
color={this.isHighScore && place === 1 ? '#fff' : color}
|
||||
size={size}
|
||||
/>
|
||||
<Text
|
||||
style={{
|
||||
textAlign: 'center',
|
||||
fontWeight: place === 1 ? 'bold' : null,
|
||||
fontSize,
|
||||
}}>
|
||||
{score}
|
||||
</Text>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
: null
|
||||
}
|
||||
<MaterialCommunityIcons
|
||||
name={icon}
|
||||
color={this.isHighScore && place === 1 ? "#fff" : color}
|
||||
size={size}
|
||||
/>
|
||||
<Text style={{
|
||||
textAlign: "center",
|
||||
fontWeight: place === 1 ? "bold" : null,
|
||||
fontSize: fontSize,
|
||||
}}>{score}</Text>
|
||||
</View>
|
||||
);
|
||||
getTopScoresRender(): React.Node {
|
||||
const gold = this.scores.length > 0 ? this.scores[0] : '-';
|
||||
const silver = this.scores.length > 1 ? this.scores[1] : '-';
|
||||
const bronze = this.scores.length > 2 ? this.scores[2] : '-';
|
||||
return (
|
||||
<View
|
||||
style={{
|
||||
marginBottom: 20,
|
||||
marginTop: 20,
|
||||
}}>
|
||||
{this.getPodiumRender(1, gold.toString())}
|
||||
<View
|
||||
style={{
|
||||
flexDirection: 'row',
|
||||
marginLeft: 'auto',
|
||||
marginRight: 'auto',
|
||||
}}>
|
||||
{this.getPodiumRender(3, bronze.toString())}
|
||||
{this.getPodiumRender(2, silver.toString())}
|
||||
</View>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
getMainContent(): React.Node {
|
||||
const {props} = this;
|
||||
return (
|
||||
<View style={{flex: 1}}>
|
||||
{this.gameStats != null
|
||||
? this.getPostGameContent(this.gameStats)
|
||||
: this.getWelcomeText()}
|
||||
<Button
|
||||
icon="play"
|
||||
mode="contained"
|
||||
onPress={() => {
|
||||
props.navigation.replace('game-main', {
|
||||
highScore: this.scores.length > 0 ? this.scores[0] : null,
|
||||
});
|
||||
}}
|
||||
style={{
|
||||
marginLeft: 'auto',
|
||||
marginRight: 'auto',
|
||||
marginTop: 10,
|
||||
}}>
|
||||
{i18n.t('screens.game.play')}
|
||||
</Button>
|
||||
{this.getTopScoresRender()}
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
keyExtractor = (item: number): string => item.toString();
|
||||
|
||||
recoverGameScore() {
|
||||
const {route} = this.props;
|
||||
this.gameStats = route.params;
|
||||
this.isHighScore =
|
||||
this.scores.length === 0 || this.gameStats.score > this.scores[0];
|
||||
for (let i = 0; i < 3; i += 1) {
|
||||
if (this.scores.length > i && this.gameStats.score > this.scores[i]) {
|
||||
this.scores.splice(i, 0, this.gameStats.score);
|
||||
break;
|
||||
} else if (this.scores.length <= i) {
|
||||
this.scores.push(this.gameStats.score);
|
||||
break;
|
||||
}
|
||||
}
|
||||
if (this.scores.length > 3) this.scores.splice(3, 1);
|
||||
AsyncStorageManager.set(
|
||||
AsyncStorageManager.PREFERENCES.gameScores.key,
|
||||
this.scores,
|
||||
);
|
||||
}
|
||||
|
||||
getTopScoresRender() {
|
||||
const gold = this.scores.length > 0
|
||||
? this.scores[0]
|
||||
: "-";
|
||||
const silver = this.scores.length > 1
|
||||
? this.scores[1]
|
||||
: "-";
|
||||
const bronze = this.scores.length > 2
|
||||
? this.scores[2]
|
||||
: "-";
|
||||
return (
|
||||
<View style={{
|
||||
marginBottom: 20,
|
||||
marginTop: 20
|
||||
}}>
|
||||
{this.getPodiumRender(1, gold.toString())}
|
||||
<View style={{
|
||||
flexDirection: "row",
|
||||
marginLeft: "auto",
|
||||
marginRight: "auto",
|
||||
}}>
|
||||
{this.getPodiumRender(3, bronze.toString())}
|
||||
{this.getPodiumRender(2, silver.toString())}
|
||||
</View>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
getMainContent() {
|
||||
return (
|
||||
<View style={{flex: 1}}>
|
||||
{
|
||||
this.gameStats != null
|
||||
? this.getPostGameContent(this.gameStats)
|
||||
: this.getWelcomeText()
|
||||
}
|
||||
<Button
|
||||
icon={"play"}
|
||||
mode={"contained"}
|
||||
onPress={() => this.props.navigation.replace(
|
||||
"game-main",
|
||||
{
|
||||
highScore: this.scores.length > 0
|
||||
? this.scores[0]
|
||||
: null
|
||||
}
|
||||
)}
|
||||
style={{
|
||||
marginLeft: "auto",
|
||||
marginRight: "auto",
|
||||
marginTop: 10,
|
||||
}}
|
||||
>
|
||||
{i18n.t("screens.game.play")}
|
||||
</Button>
|
||||
{this.getTopScoresRender()}
|
||||
</View>
|
||||
)
|
||||
}
|
||||
|
||||
keyExtractor = (item: number) => item.toString();
|
||||
|
||||
render() {
|
||||
return (
|
||||
<View style={{flex: 1}}>
|
||||
{this.getPiecesBackground()}
|
||||
<LinearGradient
|
||||
style={{flex: 1}}
|
||||
colors={[
|
||||
this.props.theme.colors.background + "00",
|
||||
this.props.theme.colors.background
|
||||
]}
|
||||
start={{x: 0, y: 0}}
|
||||
end={{x: 0, y: 1}}
|
||||
>
|
||||
<CollapsibleScrollView>
|
||||
{this.getMainContent()}
|
||||
<MascotPopup
|
||||
prefKey={AsyncStorageManager.PREFERENCES.gameStartShowBanner.key}
|
||||
title={i18n.t("screens.game.mascotDialog.title")}
|
||||
message={i18n.t("screens.game.mascotDialog.message")}
|
||||
icon={"gamepad-variant"}
|
||||
buttons={{
|
||||
action: null,
|
||||
cancel: {
|
||||
message: i18n.t("screens.game.mascotDialog.button"),
|
||||
icon: "check",
|
||||
}
|
||||
}}
|
||||
emotion={MASCOT_STYLE.COOL}
|
||||
/>
|
||||
</CollapsibleScrollView>
|
||||
</LinearGradient>
|
||||
</View>
|
||||
|
||||
);
|
||||
}
|
||||
render(): React.Node {
|
||||
const {props} = this;
|
||||
return (
|
||||
<View style={{flex: 1}}>
|
||||
{this.getPiecesBackground()}
|
||||
<LinearGradient
|
||||
style={{flex: 1}}
|
||||
colors={[
|
||||
`${props.theme.colors.background}00`,
|
||||
props.theme.colors.background,
|
||||
]}
|
||||
start={{x: 0, y: 0}}
|
||||
end={{x: 0, y: 1}}>
|
||||
<CollapsibleScrollView>
|
||||
{this.getMainContent()}
|
||||
<MascotPopup
|
||||
prefKey={AsyncStorageManager.PREFERENCES.gameStartShowBanner.key}
|
||||
title={i18n.t('screens.game.mascotDialog.title')}
|
||||
message={i18n.t('screens.game.mascotDialog.message')}
|
||||
icon="gamepad-variant"
|
||||
buttons={{
|
||||
action: null,
|
||||
cancel: {
|
||||
message: i18n.t('screens.game.mascotDialog.button'),
|
||||
icon: 'check',
|
||||
},
|
||||
}}
|
||||
emotion={MASCOT_STYLE.COOL}
|
||||
/>
|
||||
</CollapsibleScrollView>
|
||||
</LinearGradient>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default withTheme(GameStartScreen);
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue