Initial app creation

.expo-shared/assets.json

@@ -0,0 +1,4 @@
+{
+  "f9155ac790fd02fadcdeca367b02581c04a353aa6d5aa84409a59f6804c87acd": true,
+  "89ed26367cdb9b771858e026f2eb95bfdb90e5ae943e716575327ec325f39c44": true
+}

.gitignore

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

.watchmanconfig

@@ -0,0 +1 @@
+{}

App.js

@@ -0,0 +1,24 @@
+import React from "react";
+
+import Home from "./screens/home";
+// import { AppLoading } from 'expo';
+// import loadFonts from './helpers/loadFonts';
+
+const App = () => {
+  // Example of implementation of custom font with class components:
+  // https://github.com/GeekyAnts/NativeBase-KitchenSink/blob/CRNA/src/boot/setup.js
+  // if (!isReady) {
+  //   return (
+  //     <AppLoading
+  //       startAsync={loadFonts()}
+  //       onFinish={() => setIsReady({ isReady: true })}
+  //       onError={console.warn}
+  //     />
+  //   ); }
+
+  return (
+    <Home/>
+  );
+};
+
+export default App;

app.json

@@ -0,0 +1,33 @@
+{
+  "expo": {
+    "name": "5E Points Quizz",
+    "slug": "5e-points-quizz",
+    "privacy": "public",
+    "sdkVersion": "35.0.0",
+    "platforms": [
+      "ios",
+      "android",
+      "web"
+    ],
+    "version": "1.1.0",
+    "orientation": "portrait",
+    "icon": "./assets/images/5E-icon-rounded.png",
+    "splash": {
+      "image": "./assets/images/splash.png",
+      "resizeMode": "contain",
+      "backgroundColor": "#ffefd5"
+    },
+    "updates": {
+      "fallbackToCacheTimeout": 0
+    },
+    "assetBundlePatterns": [
+      "**/*"
+    ],
+    "ios": {
+      "supportsTablet": true
+    },
+    "android": {
+      "package": "com.fiveideas.five_e_points_quizz"
+    }
+  }
+}

assets/data/points.json

@@ -0,0 +1,72 @@
+[
+  {
+    "meridian": "I",
+    "interval": [1, 9],
+    "color": "red"
+  },
+  {
+    "meridian": "II",
+    "interval": [1, 9],
+    "color": "red"
+  },
+  {
+    "meridian": "III",
+    "interval": [1, 67],
+    "color": "blue"
+  },
+  {
+    "meridian": "IV",
+    "interval": [1, 27],
+    "color": "blue"
+  },
+  {
+    "meridian": "V",
+    "interval": [1, 9],
+    "color": "red"
+  },
+  {
+    "meridian": "VI",
+    "interval": [1, 23],
+    "color": "red"
+  },
+  {
+    "meridian": "VII",
+    "interval": [1, 44],
+    "color": "green"
+  },
+  {
+    "meridian": "VIII",
+    "interval": [1, 14],
+    "color": "green"
+  },
+  {
+    "meridian": "IX",
+    "interval": [1, 11],
+    "color": "white"
+  },
+  {
+    "meridian": "X",
+    "interval": [1, 20],
+    "color": "white"
+  },
+  {
+    "meridian": "XI",
+    "interval": [1, 45],
+    "color": "yellow"
+  },
+  {
+    "meridian": "XII",
+    "interval": [1, 21],
+    "color": "yellow"
+  },
+  {
+    "meridian": "XIII",
+    "interval": [1, 24],
+    "color": ""
+  },
+  {
+    "meridian": "XIV",
+    "interval": [1, 28],
+    "color": ""
+  }
+]

babel.config.js

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

helpers/config.js

@@ -0,0 +1,17 @@
+const red = "rgba(196,0,13,1.0)";
+const blue = "rgba(7,180,194,1.0)";
+const green = "rgba(103,188,37,1.0)";
+const yellow = "rgba(239,208,0,1.0)";
+const white = "rgba(255,255,255,1.0)";
+const noColor = "transparent";
+const black = "rgba(0,0,0,0.8)";
+
+export {
+    red,
+    blue,
+    green,
+    yellow,
+    white,
+    black,
+    noColor
+}

helpers/getHex.js

@@ -0,0 +1,31 @@
+import { red, blue, green, yellow, white, noColor } from "./config";
+
+const getHex = (color) => {
+  let pointColor;
+
+  switch (color) {
+    case "red":
+      pointColor = red;
+      break;
+    case "blue":
+      pointColor = blue;
+      break;
+    case "green":
+      pointColor = green;
+      break;
+    case "yellow":
+      pointColor = yellow;
+      break;
+    case "white":
+      pointColor = white;
+      break;
+    case "blue":
+    default:
+      pointColor = noColor;
+      break;
+  }
+
+  return pointColor;
+}
+
+export default getHex;

helpers/getRandomPoint.js

@@ -0,0 +1,29 @@
+const points = require("../assets/data/points");
+import getHex from "./getHex";
+
+const getRandomPoint = () => {
+  // Generate a point number between 0 and 13
+  let meridianIndex = randomIntFromInterval(0, points.length - 1);
+
+  let meridianObj = points[meridianIndex];
+  let start = meridianObj.interval[0];
+  let end = meridianObj.interval[1];
+
+  // Generate a random point based on the interval
+  const meridian = meridianObj.meridian;
+  const pointNumber = randomIntFromInterval(start, end);
+  const colorName =JSON.parse(`"${meridianObj.color}"`);
+  const colorHex = getHex(colorName);
+
+  const point = { meridian, pointNumber, colorName, colorHex };
+  // console.log(meridian, pointNumber, colorName, colorHex );
+
+  return point;
+};
+
+const randomIntFromInterval = (min, max) => {
+  // min and max included
+  return Math.floor(Math.random() * (max - min + 1) + min);
+}
+
+export default getRandomPoint;

helpers/loadFonts.js

@@ -0,0 +1,9 @@
+import * as Font from "expo-font";
+
+async function loadFonts() {
+  await Font.loadAsync({
+    "futura-std-medium": require("../assets/fonts/FuturaStd-Medium.otf")
+  });
+}
+
+export default loadFonts;

package.json

@@ -0,0 +1,24 @@
+{
+  "main": "node_modules/expo/AppEntry.js",
+  "scripts": {
+    "start": "expo start",
+    "android": "expo start --android",
+    "ios": "expo start --ios",
+    "web": "expo start --web",
+    "eject": "expo eject"
+  },
+  "dependencies": {
+    "expo": "^35.0.0",
+    "expo-font": "^7.0.0",
+    "json-loader": "^0.5.7",
+    "react": "16.8.3",
+    "react-dom": "^16.8.6",
+    "react-native": "https://github.com/expo/react-native/archive/sdk-35.0.0.tar.gz",
+    "react-native-web": "^0.11.4",
+    "styled-components": "^4.3.2"
+  },
+  "devDependencies": {
+    "babel-preset-expo": "^6.0.0"
+  },
+  "private": true
+}

screens/home.js

@@ -0,0 +1,119 @@
+import React, { useEffect, useState } from "react";
+import {
+  Text,
+  View,
+  Button,
+  TouchableOpacity,
+  Image,
+  ImageBackground
+} from "react-native";
+import styled from "styled-components";
+
+import getRandomPoint from "../helpers/getRandomPoint";
+import { noColor } from "../helpers/config";
+
+const Home = () => {
+  const [point, setPoint] = useState({
+    meridian: "Meridian",
+    pointNumber: "Point",
+    colorHex: noColor
+  });
+
+  // const [isReady, setIsReady] = useState(false);
+
+  function handleTouch() {
+    newPoint = getRandomPoint();
+    setPoint(newPoint);
+  }
+
+  // Views style
+  const TitleView = styled.View`
+    flex: 2;
+    flex-direction: row;
+    align-content: center;
+    align-items: center;
+    justify-content: space-around;
+    margin-right: 15;
+    margin-left: 5;
+  `;
+
+  const LogoView = styled.View`
+    flex: 0.8;
+    margin-right: 15;
+  `;
+
+  const TitleTextView = styled.View`
+    flex: 3;
+  `;
+
+  const PointView = styled.View`
+    flex: 2;
+    flex-direction: row;
+    align-content: center;
+    align-items: center;
+    justify-content: space-around;
+    background-color: ${point.colorHex};
+  `;
+
+  const ButtonView = styled.View`
+    flex: 2;
+    flex-direction: column;
+    align-content: center;
+    align-items: center;
+    justify-content: center;
+  `;
+
+  // Texts style
+  const TitleText = styled.Text`
+    color: black;
+    font-size: 20;
+    font-weight: 500;
+    text-transform: uppercase;
+    /* // font-family: "futura-std-medium"; */
+  `;
+
+  const PointText = styled.Text`
+    font-size: 40;
+    font-weight: 600;
+    color: black;
+  `;
+
+  // Button style
+  const TouchButton = styled.TouchableOpacity`
+    align-items: center;
+    justify-content: center;
+  `;
+
+  return (
+    <ImageBackground
+      style={{ width: "100%", height: "100%", resizeMode: "contain" }}
+      source={require("../assets/images/scroll-texture.jpg")}
+    >
+      <TitleView>
+        <LogoView>
+          <Image
+            style={{ width: 70, height: 70 }}
+            source={require("../assets/images/5E-logo-transparent.png")}
+          />
+        </LogoView>
+        <TitleTextView>
+          <TitleText>5 Element Acupuncture Points Generator</TitleText>
+        </TitleTextView>
+      </TitleView>
+      <PointView>
+        <PointText>{point.meridian}</PointText>
+        <PointText>{point.pointNumber}</PointText>
+      </PointView>
+      <ButtonView>
+        <TouchButton onPress={() => handleTouch()}>
+          <Image
+            style={{ width: 100, height: 100 }}
+            source={require("../assets/images/enso.png")}
+          />
+        </TouchButton>
+      </ButtonView>
+    </ImageBackground>
+  );
+};
+
+export default Home;