From 2586a416e74c7194b512f81beef8eac1e664ae74 Mon Sep 17 00:00:00 2001 From: lochungtin Date: Mon, 31 May 2021 23:38:00 +0100 Subject: [PATCH] gameover screen --- package-lock.json | 17 ++++++ package.json | 1 + src/components/Board/index.tsx | 74 ++++++++++++++++++-------- src/components/Board/styles.ts | 31 +++++++++++ src/components/GameoverModal/index.tsx | 71 ++++++++++++++++++++++++ src/components/GameoverModal/styles.ts | 37 +++++++++++++ 6 files changed, 210 insertions(+), 21 deletions(-) create mode 100644 src/components/GameoverModal/index.tsx create mode 100644 src/components/GameoverModal/styles.ts diff --git a/package-lock.json b/package-lock.json index 92aadd7..da7ffc9 100644 --- a/package-lock.json +++ b/package-lock.json @@ -7210,6 +7210,14 @@ } } }, + "react-native-animatable": { + "version": "1.3.3", + "resolved": "https://registry.npmjs.org/react-native-animatable/-/react-native-animatable-1.3.3.tgz", + "integrity": "sha512-2ckIxZQAsvWn25Ho+DK3d1mXIgj7tITkrS4pYDvx96WyOttSvzzFeQnM2od0+FUMzILbdHDsDEqZvnz1DYNQ1w==", + "requires": { + "prop-types": "^15.7.2" + } + }, "react-native-gesture-handler": { "version": "1.10.3", "resolved": "https://registry.npmjs.org/react-native-gesture-handler/-/react-native-gesture-handler-1.10.3.tgz", @@ -7243,6 +7251,15 @@ "resolved": "https://registry.npmjs.org/react-native-iphone-x-helper/-/react-native-iphone-x-helper-1.3.1.tgz", "integrity": "sha512-HOf0jzRnq2/aFUcdCJ9w9JGzN3gdEg0zFE4FyYlp4jtidqU03D5X7ZegGKfT1EWteR0gPBGp9ye5T5FvSWi9Yg==" }, + "react-native-modal": { + "version": "11.10.0", + "resolved": "https://registry.npmjs.org/react-native-modal/-/react-native-modal-11.10.0.tgz", + "integrity": "sha512-syRYDJYSh16bR37R5EKU9T/wC+5bEOfF17IUqf5URdhbEDd+hxyMInC++l45E8oI+MtdOaEp9yAws5xDqk8dnA==", + "requires": { + "prop-types": "^15.6.2", + "react-native-animatable": "1.3.3" + } + }, "react-native-reanimated": { "version": "2.1.0", "resolved": "https://registry.npmjs.org/react-native-reanimated/-/react-native-reanimated-2.1.0.tgz", diff --git a/package.json b/package.json index a0e5789..f1278d2 100644 --- a/package.json +++ b/package.json @@ -19,6 +19,7 @@ "react-dom": "16.13.1", "react-native": "~0.63.4", "react-native-gesture-handler": "^1.10.3", + "react-native-modal": "^11.10.0", "react-native-reanimated": "^2.1.0", "react-native-safe-area-context": "^3.2.0", "react-native-screens": "^3.0.0", diff --git a/src/components/Board/index.tsx b/src/components/Board/index.tsx index 45eb0cd..14d6da1 100644 --- a/src/components/Board/index.tsx +++ b/src/components/Board/index.tsx @@ -3,6 +3,7 @@ import { View } from 'react-native'; import { Directions, FlingGestureHandler } from 'react-native-gesture-handler'; import { connect } from 'react-redux'; +import GameoverModal from '../GameoverModal'; import Tile from './Tile'; import { darktheme } from '../../data/color'; @@ -21,47 +22,78 @@ interface ReduxProps { class BoardView extends React.Component { + state = { + open: true, + } + + getHighestTile = (): number => { + let highest = 0; + this.props.game.board.forEach(row => row.forEach(num => { + if (num > highest) + highest = num; + })); + + return highest; + } + + onNewGame = () => { + store.dispatch(updateGame({ ...new Board(4) })); + this.setState({ open: false }); + } + + onSaveGame = () => { + this.setState({ open: false }); + } + swipe = (direction: Direction): void => { let temp = { ...this.props.game }; + // update history store.dispatch(updateHistory({ ...temp })); - console.log(temp); // perform swipe Board.swipe(temp, direction); // validate board if (!Board.validate(temp)) - console.log('e'); + this.setState({ open: true }); // save game config store.dispatch(updateGame(temp)); - console.log(temp); } render() { return ( - this.swipe(Direction.up)}> - this.swipe(Direction.down)} > - this.swipe(Direction.left)}> - this.swipe(Direction.right)}> - - {this.props.game.board.map(row => { - return ( - - {row.map(cell => { - return ( - - ); - })} - - ); - })} - + <> + this.swipe(Direction.up)}> + this.swipe(Direction.down)} > + this.swipe(Direction.left)}> + this.swipe(Direction.right)}> + + {this.props.game.board.map(row => { + return ( + + {row.map(cell => { + return ( + + ); + })} + + ); + })} + + - + + ); } } diff --git a/src/components/Board/styles.ts b/src/components/Board/styles.ts index aff9837..420c4dc 100644 --- a/src/components/Board/styles.ts +++ b/src/components/Board/styles.ts @@ -16,5 +16,36 @@ export const BoardStyles = StyleSheet.create({ display: 'flex', flexDirection: 'row', justifyContent: 'center', + }, + gameoverModalRoot: { + alignItems: 'center', + display: 'flex', + flexDirection: 'column', + justifyContent: 'space-between', + height: 300, + }, + gameoverText: { + fontSize: 20, + }, + gameoverStatsContainer: { + alignItems: 'center', + display: 'flex', + flexDirection: 'column', + justifyContent: 'space-between', + height: 70, + }, + gameoverStatsRow: { + alignItems: 'center', + display: 'flex', + flexDirection: 'row', + justifyContent: 'space-between', + width: screenWidth * 0.7 + }, + gameoverOptionBar: { + alignItems: 'center', + display: 'flex', + flexDirection: 'row', + justifyContent: 'space-between', + width: screenWidth * 0.7 } }); diff --git a/src/components/GameoverModal/index.tsx b/src/components/GameoverModal/index.tsx new file mode 100644 index 0000000..e92714d --- /dev/null +++ b/src/components/GameoverModal/index.tsx @@ -0,0 +1,71 @@ +import React from 'react'; +import { TouchableOpacity, Text, View, } from 'react-native'; +import Modal from 'react-native-modal'; +import { connect } from 'react-redux'; + +import { darktheme } from '../../data/color'; +import { ModalStyles } from './styles'; + +import { GameConfig } from '../../utils/types'; + +interface ModalProps { + onSaveGame: () => void, + onNewGame: () => void, + score: number, + highestTile: number, + open: boolean, +} + +class BoardView extends React.Component { + + render() { + return ( + + + + G A M E O V E R + + + + + Score : + + + {this.props.score} + + + + + Highest Tile : + + + {this.props.highestTile} + + + + + + + SAVE RECORD + + + + + NEW GAME + + + + + + ); + } +} + +const mapStateToProps = state => ({ + +}); + +export default connect(mapStateToProps)(BoardView); diff --git a/src/components/GameoverModal/styles.ts b/src/components/GameoverModal/styles.ts new file mode 100644 index 0000000..4d4a1a2 --- /dev/null +++ b/src/components/GameoverModal/styles.ts @@ -0,0 +1,37 @@ +import { Dimensions, StyleSheet } from 'react-native'; + +const screenWidth = Dimensions.get('screen').width; + +export const ModalStyles = StyleSheet.create({ + modalRoot: { + alignItems: 'center', + display: 'flex', + flexDirection: 'column', + justifyContent: 'space-between', + height: 300, + }, + text: { + fontSize: 20, + }, + statsContainer: { + alignItems: 'center', + display: 'flex', + flexDirection: 'column', + justifyContent: 'space-between', + height: 70, + }, + statsRow: { + alignItems: 'center', + display: 'flex', + flexDirection: 'row', + justifyContent: 'space-between', + width: screenWidth * 0.7 + }, + optionBar: { + alignItems: 'center', + display: 'flex', + flexDirection: 'row', + justifyContent: 'space-between', + width: screenWidth * 0.7 + } +});