board generation and display

lochungtin · May 29, 2021 · 694d1e1 · 694d1e1
1 parent 8368d83
commit 694d1e1
Show file tree

Hide file tree

Showing 6 changed files with 48 additions and 34 deletions.
diff --git a/src/components/Board/Tile/index.tsx b/src/components/Board/Tile/index.tsx
@@ -18,7 +18,7 @@ class Tile extends React.Component<TileProps> {
         return (
             <View style={{ ...TileStyles.root, backgroundColor, height: sides, width: sides }}>
                 <Text style={{ ...TileStyles.text, color: darktheme.textColor }}>
-                    {this.props.number}
+                    {this.props.number === -1 ? '' : this.props.number}
                 </Text>
             </View>
         );

diff --git a/src/components/Board/index.tsx b/src/components/Board/index.tsx
@@ -2,37 +2,39 @@ import React from 'react';
 import { View } from 'react-native';
 import { Directions, FlingGestureHandler } from 'react-native-gesture-handler';
 import { connect } from 'react-redux';
+
+import Tile from './Tile';
+
 import { darktheme } from '../../data/color';
+import { BoardStyles } from './styles';
+
+import Board from '../../game/board';
 import { keygen } from '../../utils/keygen';
+import { store } from '../../redux/store';
+import { saveBoard } from '../../redux/action';
 
-import { BoardStyles } from './styles';
-import Tile from './Tile';
+interface ReduxProps {
+    board: Board,
+}
+
+class BoardView extends React.Component<ReduxProps> {
+
+    constructor(props) {
+        super(props);
+
+        if (props.board === null)
+            store.dispatch(saveBoard(new Board(4)));
+    }
 
-class Board extends React.Component {
     render() {
+        console.log(this.props.board);
         return (
-            <FlingGestureHandler
-                direction={Directions.UP}
-                onEnded={() => console.log('up')}
-                numberOfPointers={1}
-            >
-                <FlingGestureHandler
-                    direction={Directions.DOWN}
-                    onEnded={() => console.log('down')}
-                    numberOfPointers={1}
-                >
-                    <FlingGestureHandler
-                        direction={Directions.LEFT}
-                        onEnded={() => console.log('left')}
-                        numberOfPointers={1}
-                    >
-                        <FlingGestureHandler
-                            direction={Directions.RIGHT}
-                            onEnded={() => console.log('right')}
-                            numberOfPointers={1}
-                        >
+            <FlingGestureHandler direction={Directions.UP} onEnded={() => console.log('up')}>
+                <FlingGestureHandler direction={Directions.DOWN} onEnded={() => console.log('down')} >
+                    <FlingGestureHandler direction={Directions.LEFT} onEnded={() => console.log('left')}>
+                        <FlingGestureHandler direction={Directions.RIGHT} onEnded={() => console.log('right')}>
                             <View style={{ ...BoardStyles.root, backgroundColor: darktheme.boardColor }}>
-                                {[[2, 4, 8, 16], [32, 64, 128, 256], [512, 1024, 2048, 4096], [8192, 16384, 32768, 65536]].map(row => {
+                                {this.props.board.board.map(row => {
                                     return (
                                         <View key={keygen()} style={BoardStyles.row}>
                                             {row.map(cell => {
@@ -53,7 +55,7 @@ class Board extends React.Component {
 }
 
 const mapStateToProps = state => ({
-
+    board: state.board,
 });
 
-export default connect(mapStateToProps)(Board);
+export default connect(mapStateToProps)(BoardView);
diff --git a/src/data/color.ts b/src/data/color.ts
@@ -4,6 +4,7 @@ export const darktheme: ColorSchemeType = {
     bgColor: '#1E1E1E',
     boardColor: '#151515',
     tileColors: {
+        '-1': '#1c1b1b',
         '2': '#a3948b',
         '4': '#c2a899',
         '8': '#dbb49e',

diff --git a/src/game/board.ts b/src/game/board.ts
@@ -3,8 +3,8 @@ import { CoordinatePair, MergingPairs } from "../utils/types";
 
 export default class Board {
 
-    dim: number;
-    board: Array<Array<number>>;
+    dim: number = 0;
+    board: Array<Array<number>> = [];
 
     constructor(dim: number) {
         this.dim = dim;
@@ -16,9 +16,9 @@ export default class Board {
 
             this.board.push(row);
         }
-    }
 
-    getBoard = (): Array<Array<number>> => this.board;
+        this.newTile();
+    }
 
     swipe = (direction: Direction) => {
         // merge all

diff --git a/src/screens/main.tsx b/src/screens/main.tsx
@@ -1,18 +1,28 @@
 import React from 'react';
-import { View } from 'react-native';
+import { TouchableOpacity, Text, View, } from 'react-native';
 import { connect } from 'react-redux';
 
-import Board from '../components/Board';
+import BoardView from '../components/Board';
 
 import { darktheme } from '../data/color';
 import { ScreenStyles } from './styles';
 
+import Board from '../game/board';
+import { saveBoard } from '../redux/action';
+import { store } from '../redux/store';
+
 class Screen extends React.Component {
     render() {
         return (
             <View style={{ ...ScreenStyles.screen, backgroundColor: darktheme.bgColor }}>
                 <View style={{ height: 200 }} />
-                <Board />
+                <TouchableOpacity onPress={() => store.dispatch(saveBoard(new Board(4)))} style={{ backgroundColor: darktheme.btnColor }}>
+                    <Text style={{ color: darktheme.textColor }}>
+                        New Game
+                    </Text>
+                </TouchableOpacity>
+                <View style={{ height: 100 }} />
+                <BoardView />
             </View >
         );
     }

diff --git a/src/utils/types.ts b/src/utils/types.ts
@@ -29,6 +29,7 @@ export interface ColorSchemeType {
 }
 
 export interface TileColorSchemeType {
+    '-1': string,
     '2': string,
     '4': string,
     '8': string,