update readme

App.tsx

@@ -1,18 +1,18 @@
-import React from 'react';
-import { Provider } from 'react-redux';
-import { PersistGate } from 'redux-persist/integration/react';
-
-import AppNav from './src/navigation';
-import { store, persistor } from './src/redux/store';
-
-export default class App extends React.Component {
-	render() {
-		return (
-			<Provider store={store}>
-				<PersistGate loading={null} persistor={persistor}>
-					<AppNav />
-				</PersistGate>
-			</Provider>
-		);
-	}
-}
+import React from 'react';
+import { Provider } from 'react-redux';
+import { PersistGate } from 'redux-persist/integration/react';
+
+import AppNav from './src/navigation';
+import { store, persistor } from './src/redux/store';
+
+export default class App extends React.Component {
+	render() {
+		return (
+			<Provider store={store}>
+				<PersistGate loading={null} persistor={persistor}>
+					<AppNav />
+				</PersistGate>
+			</Provider>
+		);
+	}
+}

README.md

@@ -1,49 +1,48 @@
-<img src='./img/logo.png' width='150'>
-
-# RN2048
-
-## Background
-
-In the evening of the 25th May, 2021, I decided to task myself with a 4-day weekend build. I wanted to learn how to use the react-native-gesture-handler package and I decided to code the game 2048 with typescript React Native.
-
-This project took all 4 days, or effectively, 20 or so hours to complete. Days 1 and 2 were spent developing the game's main algorithm, day 3 was spent debugging and refining the code, and the final day was used to style, refactor, document, and release everything.
-
-## Technical Details
-
-This app consists of 2 pages, the main game page and a record page which displays all the game records the user decides to save.
-
-Due to time concerns, animated movement for the tile on the grid have not been implemented. But this could be done with react-native-reanimated or other similar packages.
-
-A back system has been implemented but it is coded to only be able to reverse one move. A undo stack is not desirable in this use case for the sake of the difficulty of the game.
-
-The app is originally set to dark mode, but a light mode option is also available.
-
-### Libraries Used
-
-Below is a list of all the node packages used for the project (React Native base packages **EXCLUDED**)
-- react-native-gesture-handler
-- react-native-modal
-- react-native-vector-icons
-- react-navigation (and all of its subsequent packages)
-    - the stack navigation package
-- redux (and all of its subsequent packages)
-    - react-redux
-    - redux-persist
-        - react-native-async-storage
-
-## Gallery
-
-Below are some screenshots of the app (Android)
-
-|       Game Screen (Dark)        |       Game Screen (Light)        |         Gameover Popup Screen         |            Record Screen            |
-| :-----------------------------: | :------------------------------: | :-----------------------------------: | :---------------------------------: |
-| <img src='./img/game_dark.jpg'> | <img src='./img/game_light.jpg'> | <img src='./img/gameover_screen.jpg'> | <img src='./img/record_screen.jpg'> |
-
-
-## Maintenance and Future Updates
-
-As of now, there are no plans to maintain nor further develop this project, as this is only a weekend sprint build.
-
-Although there is no incentive to do so, the way the app is coded is prepared for further expansion, such as different sized boards. The algorithms were developed to be able to handle boards of all sizes. Adding new screens to accomodate for board size selection would also be easy as screen components are extracted and abstracted from the navigator itself.
-
-But for those curious people out there who wishes to give it a test, a release .apk is <a href='https://github.com/lochungtin/RN2048/releases/tag/v1.0.0'>attached</a> in the release page of this repo.
+<img src='./img/logo.png' width='150'>
+
+# RN2048
+
+## Background
+
+In the evening of the 25th May, 2021, I decided to task myself with a 4-day weekend build. I wanted to learn how to use the react-native-gesture-handler package and I decided to code the game 2048 with typescript React Native.
+
+This project took all 4 days, or effectively, 20 or so hours to complete. Days 1 and 2 were spent developing the game's main algorithm, day 3 was spent debugging and refining the code, and the final day was used to style, refactor, document, and release everything.
+
+## Gallery
+
+Below are some screenshots of the app (Android)
+
+|       Game Screen (Dark)        |       Game Screen (Light)        |         Gameover Popup Screen         |            Record Screen            |
+| :-----------------------------: | :------------------------------: | :-----------------------------------: | :---------------------------------: |
+| <img src='./img/game_dark.jpg'> | <img src='./img/game_light.jpg'> | <img src='./img/gameover_screen.jpg'> | <img src='./img/record_screen.jpg'> |
+
+## Technical Details
+
+This app consists of 2 pages, the main game page and a record page which displays all the game records the user decides to save.
+
+Due to time concerns, animated movement for the tile on the grid have not been implemented. But this could be done with react-native-reanimated or other similar packages.
+
+A back system has been implemented but it is coded to only be able to reverse one move. A undo stack is not desirable in this use case for the sake of the difficulty of the game.
+
+The app is originally set to dark mode, but a light mode option is also available.
+
+### Libraries Used
+
+Below is a list of all the node packages used for the project (React Native base packages **EXCLUDED**)
+- react-native-gesture-handler
+- react-native-modal
+- react-native-vector-icons
+- react-navigation (and all of its subsequent packages)
+    - the stack navigation package
+- redux (and all of its subsequent packages)
+    - react-redux
+    - redux-persist
+        - react-native-async-storage
+
+## Maintenance and Future Updates
+
+As of now, there are no plans to maintain nor further develop this project, as this is only a weekend sprint build.
+
+Although there is no incentive to do so, the way the app is coded is prepared for further expansion, such as different sized boards. The algorithms were developed to be able to handle boards of all sizes. Adding new screens to accomodate for board size selection would also be easy as screen components are extracted and abstracted from the navigator itself.
+
+But for those curious people out there who wishes to give it a test, a release .apk is <a href='https://github.com/lochungtin/RN2048/releases/tag/v1.0.0'>attached</a> in the release page of this repo.

src/components/Board/Tile/index.tsx

@@ -1,37 +1,37 @@
-import React from 'react';
-import { Text, View, } from 'react-native';
-import { connect } from 'react-redux';
-
-import { screenWidth, TileStyles, } from './styles';
-
-import { ColorSchemeType } from '../../../utils/types';
-
-interface ReduxProps {
-    colortheme: ColorSchemeType,
-}
-
-interface TileProps {
-    dim: number
-    number: number
-}
-
-class Tile extends React.Component<ReduxProps & TileProps> {
-    render() {
-        let backgroundColor = this.props.colortheme.tileColors[this.props.number.toString()] || this.props.colortheme.tileColors.large;
-        let sides = (screenWidth * 0.8) / this.props.dim; 
-
-        return (
-            <View style={{ ...TileStyles.root, backgroundColor, height: sides, width: sides }}>
-                <Text style={{ ...TileStyles.text, color: this.props.colortheme.textColor }}>
-                    {this.props.number === -1 ? '' : this.props.number}
-                </Text>
-            </View>
-        );
-    }
-}
-
-const mapStateToProps = state => ({
-    colortheme: state.colortheme,
-});
-
-export default connect(mapStateToProps)(Tile);
+import React from 'react';
+import { Text, View, } from 'react-native';
+import { connect } from 'react-redux';
+
+import { screenWidth, TileStyles, } from './styles';
+
+import { ColorSchemeType } from '../../../utils/types';
+
+interface ReduxProps {
+    colortheme: ColorSchemeType,
+}
+
+interface TileProps {
+    dim: number
+    number: number
+}
+
+class Tile extends React.Component<ReduxProps & TileProps> {
+    render() {
+        let backgroundColor = this.props.colortheme.tileColors[this.props.number.toString()] || this.props.colortheme.tileColors.large;
+        let sides = (screenWidth * 0.8) / this.props.dim; 
+
+        return (
+            <View style={{ ...TileStyles.root, backgroundColor, height: sides, width: sides }}>
+                <Text style={{ ...TileStyles.text, color: this.props.colortheme.textColor }}>
+                    {this.props.number === -1 ? '' : this.props.number}
+                </Text>
+            </View>
+        );
+    }
+}
+
+const mapStateToProps = state => ({
+    colortheme: state.colortheme,
+});
+
+export default connect(mapStateToProps)(Tile);

src/components/Board/Tile/styles.ts

@@ -1,17 +1,17 @@
-import { Dimensions, StyleSheet, } from 'react-native';
-
-export const screenWidth = Dimensions.get('screen').width;
-
-export const TileStyles = StyleSheet.create({
-    root: {
-        alignItems: 'center',
-        borderRadius: 10,
-        display: 'flex',
-        justifyContent: 'center',
-        marginHorizontal: 5,
-        marginVertical: 5,
-    },
-    text: {
-        fontSize: 20,
-    },
-});
+import { Dimensions, StyleSheet, } from 'react-native';
+
+export const screenWidth = Dimensions.get('screen').width;
+
+export const TileStyles = StyleSheet.create({
+    root: {
+        alignItems: 'center',
+        borderRadius: 10,
+        display: 'flex',
+        justifyContent: 'center',
+        marginHorizontal: 5,
+        marginVertical: 5,
+    },
+    text: {
+        fontSize: 20,
+    },
+});