From 694d1e1f8d8320e84ccc26767ce2b9f5c0ac4f7a Mon Sep 17 00:00:00 2001
From: lochungtin <lochungtin@gmail.com>
Date: Sat, 29 May 2021 14:22:18 +0100
Subject: [PATCH] board generation and display

---
 src/components/Board/Tile/index.tsx |  2 +-
 src/components/Board/index.tsx      | 54 +++++++++++++++--------------
 src/data/color.ts                   |  1 +
 src/game/board.ts                   |  8 ++---
 src/screens/main.tsx                | 16 +++++++--
 src/utils/types.ts                  |  1 +
 6 files changed, 48 insertions(+), 34 deletions(-)

diff --git a/src/components/Board/Tile/index.tsx b/src/components/Board/Tile/index.tsx
index af52a87..09d2930 100644
--- 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
index edbe7a8..d9c7baa 100644
--- 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
index 8df1e20..3ccdfbe 100644
--- 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
index 53bd77f..3370667 100644
--- 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
index 904cb86..833f263 100644
--- 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
index e5f8555..74fd000 100644
--- 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,