home screen layout

src/data/color.ts

@@ -19,7 +19,7 @@ export const darktheme: ColorSchemeType = {
         large: '#3d3934',
     },
     textColor: '#E0E0E0',
-    textboxColor: '#3E3E3E',
+    textboxColor: '#272727',
     btnColor: '#A0A0A0',
     accentColor: '#EB864D'
 }

src/navigation/index.tsx

@@ -14,7 +14,7 @@ class AppNav extends React.Component {
         return (
             <NavigationContainer>
                 <StatusBar backgroundColor={'#0E0E0E'} />
-                <Root.Navigator>
+                <Root.Navigator screenOptions={{ headerShown: false }}>
                     <Root.Screen component={Main} name='Main' />
                     <Root.Screen component={Records} name='Records' />
                 </Root.Navigator>

src/screens/main.tsx

@@ -1,30 +1,66 @@
+import { StackNavigationProp } from '@react-navigation/stack'
 import React from 'react';
 import { TouchableOpacity, Text, View, } from 'react-native';
+import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
 import { connect } from 'react-redux';
 
 import BoardView from '../components/Board';
 
 import { darktheme } from '../data/color';
-import { ScreenStyles } from './styles';
+import { MainStyles, ScreenStyles } from './styles';
 
 import Board from '../game/board';
 import { saveGameState } from '../redux/action';
 import { store } from '../redux/store';
 
-class Screen extends React.Component {
+interface NavProps {
+    navigation: StackNavigationProp<any, any>
+}
+
+class Screen extends React.Component<NavProps> {
 
     newGame = () => store.dispatch(saveGameState({ ...new Board(4) }));
 
     render() {
         return (
             <View style={{ ...ScreenStyles.screen, backgroundColor: darktheme.bgColor }}>
-                <View style={{ height: 200 }} />
-                <TouchableOpacity onPress={this.newGame} style={{ backgroundColor: darktheme.btnColor }}>
-                    <Text style={{ color: darktheme.textColor }}>
-                        New Game
-                    </Text>
-                </TouchableOpacity>
-                <View style={{ height: 100 }} />
+                <Text style={{ ...MainStyles.titleText, color: darktheme.textColor }}>
+                    2  0  4  8
+                </Text>
+                <View style={MainStyles.scoreBar}>
+                    <View style={{ ...MainStyles.scoreContainer, backgroundColor: darktheme.textboxColor }}>
+                        <Text style={{ ...MainStyles.scoreLabelText, color: darktheme.textColor }}>
+                            Score
+                        </Text>
+                        <Text style={{ ...MainStyles.scoreText, color: darktheme.textColor }}>
+                            {10000}
+                        </Text>
+                    </View>
+                    <View style={{ ...MainStyles.scoreContainer, backgroundColor: darktheme.textboxColor }}>
+                        <Text style={{ ...MainStyles.scoreLabelText, color: darktheme.textColor }}>
+                            High Score
+                        </Text>
+                        <Text style={{ ...MainStyles.scoreText, color: darktheme.textColor }}>
+                            {10000}
+                        </Text>
+                    </View>
+                </View>
+                <View style={MainStyles.functionBarOuter}>
+                    <View style={MainStyles.functionBar}>
+                        <TouchableOpacity onPress={() => { }}>
+                            <Icon color={darktheme.btnColor} name='backup-restore' size={40} />
+                        </TouchableOpacity>
+                        <TouchableOpacity onPress={this.newGame}>
+                            <Icon color={darktheme.btnColor} name='sync' size={40} />
+                        </TouchableOpacity>
+                        <TouchableOpacity onPress={() => { }}>
+                            <Icon color={darktheme.btnColor} name='lightbulb-outline' size={40} />
+                        </TouchableOpacity>
+                        <TouchableOpacity onPress={() => this.props.navigation.navigate('Records')}>
+                            <Icon color={darktheme.btnColor} name='text-box-outline' size={40} />
+                        </TouchableOpacity>
+                    </View>
+                </View>
                 <BoardView />
             </View >
         );

src/screens/styles.ts

@@ -1,15 +1,58 @@
-import { StyleSheet } from 'react-native';
+import { Dimensions, StyleSheet } from 'react-native';
+
+export const screenWidth = Dimensions.get('screen').width;
 
 export const ScreenStyles = StyleSheet.create({
     screen: {
         alignItems: 'center',
         display: 'flex',
         flex: 1,
         flexDirection: 'column',
-        justifyContent: 'flex-start',
+        justifyContent: 'center',
     },
 });
 
 export const MainStyles = StyleSheet.create({
-
+    titleText: {
+        fontSize: 45,
+        marginBottom: 30,
+    },
+    scoreBar: {
+        alignItems: 'center',
+        display: 'flex',
+        flexDirection: 'row',
+        justifyContent: 'space-between',
+        marginBottom: 20,
+        width: screenWidth * 0.9,
+    },
+    scoreContainer: {
+        alignItems: 'center',
+        borderRadius: 10,
+        display: 'flex',
+        flexDirection: 'column',
+        height: 80,
+        justifyContent: 'space-evenly',
+        width: screenWidth * 0.42,
+    },
+    scoreLabelText: {
+        fontSize: 12,
+    },
+    scoreText: {
+        fontSize: 17,
+    },
+    functionBarOuter: {
+        alignItems: 'center',
+        display: 'flex',
+        flexDirection: 'row',
+        justifyContent: 'flex-end',
+        marginBottom: 20,
+        width: screenWidth * 0.85,
+    },
+    functionBar: {
+        alignItems: 'center',
+        display: 'flex',
+        flexDirection: 'row',
+        justifyContent: 'space-between',
+        width: screenWidth * 0.6,
+    },
 });