move to public

app/.expo-shared/assets.json

@@ -0,0 +1,4 @@
+{
+  "12bb71342c6255bbf50437ec8f4441c083f47cdb74bd89160c15e4f43e52a1cb": true,
+  "40b842e832070c58deac6aa9e08fa459302ee3f9da492c7e77d93d2fbf4a56fd": true
+}

app/.gitignore

@@ -0,0 +1,14 @@
+node_modules/**/*
+.expo/*
+npm-debug.*
+*.jks
+*.p8
+*.p12
+*.key
+*.mobileprovision
+*.orig.*
+web-build/
+web-report/
+
+# macOS
+.DS_Store

app/App.js

@@ -0,0 +1,61 @@
+import React, { useState } from "react";
+import { StyleSheet, Text, View, Button, TextInput, Dimensions } from "react-native";
+import Constants from "expo-constants";
+import { Provider } from "react-redux";
+import { NavigationContainer } from "@react-navigation/native";
+import { createStackNavigator } from "@react-navigation/stack";
+
+
+import store from "./store";
+
+// COMPONENT
+import HeaderComponent from "./components/MaterialHeader1";
+// import InputComponent from "./components/MaterialUnderlineTextbox1";
+// SCREEN
+import HomeScreen from './screens/HomeScreen'
+import DificultyScreen from "./screens/DificultyScreen";
+import BoardScreen from "./screens/BoardScreen";
+import LeaderBoardScreen from "./screens/LeaderBoardScreen";
+
+const screenWidth = Math.round(Dimensions.get("window").width);
+const screenHeight = Math.round(Dimensions.get("window").height);
+const Stack = createStackNavigator();
+
+export default function App() {
+  return (
+    <Provider store={store}>
+      <NavigationContainer>
+        <Stack.Navigator>
+          <Stack.Screen name="Home" component={HomeScreen} />
+          <Stack.Screen
+            name="Difficulty Selection"
+            component={DificultyScreen}
+          />
+          <Stack.Screen name="Board" component={BoardScreen} />
+          <Stack.Screen name="Leader Board" component={LeaderBoardScreen} />
+        </Stack.Navigator>
+      </NavigationContainer>
+      {/* <View style={{ paddingTop: Constants.statusBarHeight }}>
+        <HeaderComponent />
+        <BoardComponent />
+      </View> */}
+    </Provider>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 9,
+    flexDirection: "row",
+    backgroundColor: "#fff",
+    alignItems: "center",
+    justifyContent: "center",
+  },
+  square: {
+    width: 50,
+    height: 50,
+    backgroundColor: "powderblue",
+    borderWidth: 1,
+    borderColor: "black"
+  },
+});

app/app.json

@@ -0,0 +1,28 @@
+{
+  "expo": {
+    "name": "app",
+    "slug": "app",
+    "platforms": [
+      "ios",
+      "android",
+      "web"
+    ],
+    "version": "1.0.0",
+    "orientation": "portrait",
+    "icon": "./assets/icon.png",
+    "splash": {
+      "image": "./assets/xenon54.png",
+      "resizeMode": "contain",
+      "backgroundColor": "#363636"
+    },
+    "updates": {
+      "fallbackToCacheTimeout": 0
+    },
+    "assetBundlePatterns": [
+      "**/*"
+    ],
+    "ios": {
+      "supportsTablet": true
+    }
+  }
+}

app/babel.config.js

@@ -0,0 +1,6 @@
+module.exports = function(api) {
+  api.cache(true);
+  return {
+    presets: ['babel-preset-expo'],
+  };
+};

app/components/MaterialHeader1.js

@@ -0,0 +1,115 @@
+import React, { Component, useEffect, useState } from "react";
+import { StyleSheet, View, TouchableOpacity, TextInput } from "react-native";
+import MaterialCommunityIconsIcon from "react-native-vector-icons/MaterialCommunityIcons";
+import * as Font from "expo-font";
+import { AppLoading } from "expo";
+
+const fetchFonts = () => {
+  return Font.loadAsync({
+    "roboto-regular": require("../assets/fonts/roboto-regular.ttf"),
+  });
+};
+
+function MaterialHeader1(props) {
+  const [dataLoaded, setDataLoaded] = useState(false)
+
+  if (!dataLoaded) {
+    return (
+      <AppLoading
+        startAsync={fetchFonts}
+        onFinish={() =>  setDataLoaded(true)}
+      />
+    )
+  }
+  return (
+    <View style={[styles.container, props.style]}>
+      <View style={styles.leftIconButtonRow}>
+        <TouchableOpacity style={styles.leftIconButton}>
+          <MaterialCommunityIconsIcon
+            name="menu"
+            style={styles.leftIcon2}
+          ></MaterialCommunityIconsIcon>
+        </TouchableOpacity>
+        <View style={styles.textWrapper}>
+          <TextInput
+            placeholder="Title"
+            numberOfLines={1}
+            style={styles.textInput}
+          ></TextInput>
+        </View>
+      </View>
+      <View style={styles.leftIconButtonRowFiller}></View>
+      <TouchableOpacity style={styles.rightIconButton}>
+        <MaterialCommunityIconsIcon
+          name="dots-vertical"
+          style={styles.rightIcon2}
+        ></MaterialCommunityIconsIcon>
+      </TouchableOpacity>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    backgroundColor: "#3F51B5",
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "space-between",
+    padding: 4,
+    elevation: 3,
+    shadowOffset: {
+      height: 2,
+      width: 0
+    },
+    shadowColor: "#111",
+    shadowOpacity: 0.2,
+    shadowRadius: 1.2
+  },
+  leftIconButton: {
+    padding: 11
+  },
+  leftIcon2: {
+    backgroundColor: "transparent",
+    color: "#FFFFFF",
+    fontFamily: "Roboto",
+    fontSize: 24
+  },
+  textWrapper: {
+    alignSelf: "flex-end",
+    marginLeft: 21,
+    marginBottom: 14
+  },
+  textInput: {
+    width: 37,
+    height: 18,
+    backgroundColor: "transparent",
+    color: "#FFFFFF",
+    fontSize: 18,
+    fontFamily: "roboto-regular",
+    lineHeight: 18
+  },
+  leftIconButtonRow: {
+    flexDirection: "row",
+    marginLeft: 5,
+    marginTop: 5,
+    marginBottom: 5
+  },
+  leftIconButtonRowFiller: {
+    flex: 1,
+    flexDirection: "row"
+  },
+  rightIconButton: {
+    alignItems: "center",
+    padding: 11,
+    marginRight: 5,
+    marginTop: 5
+  },
+  rightIcon2: {
+    backgroundColor: "transparent",
+    color: "#FFFFFF",
+    fontFamily: "Roboto",
+    fontSize: 24
+  }
+});
+
+export default MaterialHeader1;

app/components/MaterialUnderlineTextbox1.js

@@ -0,0 +1,117 @@
+import React, { Component, useState } from "react";
+import { Dimensions, StyleSheet, View, TextInput, Text } from "react-native";
+import * as Font from "expo-font";
+import { AppLoading } from "expo";
+import { useDispatch, useSelector } from "react-redux";
+import { chageOnBoard } from "../store/actions/boardActions";
+
+const fetchFonts = () => {
+  return Font.loadAsync({
+    "roboto-regular": require("../assets/fonts/roboto-regular.ttf"),
+    });
+  };
+  const screenWidth = Math.round(Dimensions.get("window").width - 20) / 9;
+  const screenHeight = Math.round(Dimensions.get("window").height - 20) / 9; 
+
+  function MaterialUnderlineTextbox1(props) {
+    const dispatch = useDispatch()
+
+  const [dataLoaded, setDataLoaded] = useState(false);
+  const board = useSelector((state) => state.boardReducers.board);
+    const originalBoard = useSelector((state) => state.boardReducers.originalBoard);
+  const onchangeHanldle = (text, coordinate) => {
+    const nums = "123456789";
+    // if (text === ' ' || !nums.includes(text)) {
+    //   alert("Please enter a number between 1-9!");
+    // } else {
+    //   console.log(text, coordinate);
+    //   const newBoard = [...board];
+    //   newBoard[coordinate[0]][coordinate[1]] = parseInt(text);
+    //   console.log(newBoard);
+    // }
+
+    switch (text) {
+      case " ":
+        alert("Please enter a number between 1-9!");
+        break;
+
+      case "0":
+        alert(`You can't enter 0 or zero!`);
+        break;
+
+      default:
+        if (text.length > 1) {
+          alert("Please enter a number between 1-9!");
+        } else if (!nums.includes(text)) {
+          alert("Please enter number type only!");
+        } else {
+          console.log(text, coordinate);
+          const newBoard = [...board];
+          const newOriginalBoard = { ...originalBoard }
+          newOriginalBoard.board[coordinate[0]][coordinate[1]] = parseInt(text)
+          newBoard[coordinate[0]][coordinate[1]].val = parseInt(text);
+          // console.log(newBoard, newOriginalBoard, "BOARD INI  =====================");
+          dispatch(chageOnBoard(newBoard, newOriginalBoard));
+        }
+        break;
+    }
+  }; 
+
+  if (!dataLoaded) {
+    return (
+      <AppLoading
+        startAsync={fetchFonts}
+        onFinish={() => setDataLoaded(true)}
+      />
+    );
+  }
+  return (
+    <View style={[styles.container, props.style]}>
+      {props.value.val ? (
+        <TextInput
+          placeholder="..."
+          maxLength={1}
+          style={[styles.inputStyle, { backgroundColor: "#f783dc" }]}
+          value={String(props.value.val)}
+          editable={props.value.canChange}
+          onChangeText={(text) => onchangeHanldle(text, props.coordinate)}
+        />
+      ) : (
+        <TextInput
+          placeholder="-"
+          maxLength={1}
+          style={[styles.inputStyle, { backgroundColor: "#c5dce0" }]}
+          value=""
+          editable={props.value.canChange}
+          onChangeText={(text) => onchangeHanldle(text, props.coordinate)}
+        />
+      )}
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    backgroundColor: "transparent",
+    borderColor: "#000000",
+    borderWidth: 1,
+    height: screenWidth,
+    width: screenWidth,
+  },
+  inputStyle: {
+    width: screenWidth,
+    height: screenWidth,
+    flex: 1,
+    color: "#000",
+    alignSelf: "stretch",
+    fontSize: screenWidth / 2.5,
+    fontFamily: "roboto-regular",
+    lineHeight: 16,
+    alignItems: "center",
+    justifyContent: "center",
+    alignContent: "center",
+    textAlign: "center",
+  },
+});
+
+export default MaterialUnderlineTextbox1;