120 lines
2.6 KiB
JavaScript
120 lines
2.6 KiB
JavaScript
import React, { useEffect, useState } from "react";
|
|
import {
|
|
Text,
|
|
View,
|
|
Button,
|
|
TouchableOpacity,
|
|
Image,
|
|
ImageBackground
|
|
} from "react-native";
|
|
import styled from "styled-components/native";
|
|
|
|
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() {
|
|
let 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;
|