Initial app creation

2019-09-23 20:14:06 +02:00
commit e7e63e399c
26 changed files with 7558 additions and 0 deletions
--- a/screens/home.js
+++ b/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;