Browse Source
FEATURE| Async storage and game layouts | Games module See merge request jetup/truthordare!5merge-requests/6/merge
Coder
2 years ago
23 changed files with 739 additions and 13 deletions
|
After Width: | Height: | Size: 436 B |
|
After Width: | Height: | Size: 476 B |
|
After Width: | Height: | Size: 449 B |
|
After Width: | Height: | Size: 363 B |
@ -0,0 +1,59 @@
@@ -0,0 +1,59 @@
|
||||
import {StyleSheet, Text, TouchableOpacity, View} from 'react-native'; |
||||
import { |
||||
colors, |
||||
Header, |
||||
RouteKey, |
||||
ScreenLayout, |
||||
IRouteParams, |
||||
} from '../../shared'; |
||||
import React from 'react'; |
||||
import {NameTitle} from '../../shared/components/nameTitle/name-title'; |
||||
import {RedButton} from '../../shared/components/buttons/red-button'; |
||||
interface IProps extends IRouteParams {} |
||||
|
||||
export const Game: React.FC<IProps> = ({navigation}) => { |
||||
const goBack = () => { |
||||
navigation.navigate(RouteKey.Game); |
||||
}; |
||||
|
||||
return ( |
||||
<ScreenLayout |
||||
backgroundColor={colors.primaryColor} |
||||
backgroundStatusBar={colors.primaryColor} |
||||
paddingHorizontal={20}> |
||||
<> |
||||
<Header |
||||
leftIcon="arrow" |
||||
gamer={true} |
||||
onPressLeft={() => goBack()} |
||||
title="Crazy" |
||||
/> |
||||
<NameTitle name="Player" /> |
||||
<View style={styles.buttons}> |
||||
<RedButton name="-TRUTH-" /> |
||||
<TouchableOpacity> |
||||
<Text style={styles.random}> |
||||
RANDOM CHANCE |
||||
</Text> |
||||
</TouchableOpacity> |
||||
<RedButton name="-DARE-" /> |
||||
</View> |
||||
</> |
||||
</ScreenLayout> |
||||
); |
||||
}; |
||||
|
||||
const styles = StyleSheet.create({ |
||||
buttons: { |
||||
alignItems: 'center', |
||||
height: 240, |
||||
justifyContent: 'space-between', |
||||
marginTop: 122 |
||||
}, |
||||
|
||||
random: { |
||||
color: '#ffffff', |
||||
fontWeight: '400', |
||||
fontSize: 18, |
||||
} |
||||
}); |
||||
@ -0,0 +1,61 @@
@@ -0,0 +1,61 @@
|
||||
import { |
||||
ActivityIndicator, |
||||
Animated, |
||||
StyleSheet, |
||||
Text, |
||||
View, |
||||
} from 'react-native'; |
||||
import React, {FC, useEffect, useState} from 'react'; |
||||
import {ScreenLayout, colors, RouteKey} from '../../shared'; |
||||
import AsyncStorage from '@react-native-async-storage/async-storage'; |
||||
import {useNavigation} from '@react-navigation/native'; |
||||
import {StorageKey, storageService} from '../../services/async-storage.service'; |
||||
|
||||
export const LoadingScreen = () => { |
||||
const getLanguage = async () => { |
||||
const response = await AsyncStorage.getItem(StorageKey.Language); |
||||
return response; |
||||
}; |
||||
|
||||
const getOnboardEnd = async () => { |
||||
const response = await AsyncStorage.getItem(StorageKey.OnBoarding); |
||||
return response; |
||||
}; |
||||
|
||||
const init = async () => { |
||||
let language = await getLanguage(); |
||||
const isOnBoard = await getOnboardEnd(); |
||||
|
||||
if (isOnBoard && language) { |
||||
navigate.navigate(RouteKey.Game as any); |
||||
} else if (language && !isOnBoard) { |
||||
navigate.navigate(RouteKey.Onboarding as any); |
||||
} else if (!language) { |
||||
navigate.navigate(RouteKey.LanguageSelect as any); |
||||
} |
||||
}; |
||||
|
||||
const navigate = useNavigation(); |
||||
|
||||
useEffect(() => { |
||||
init(); |
||||
}, []); |
||||
|
||||
return ( |
||||
<ScreenLayout |
||||
backgroundColor={colors.primaryColor} |
||||
backgroundStatusBar={colors.primaryColor} |
||||
paddingHorizontal={20}> |
||||
<View style={styles.container}> |
||||
<ActivityIndicator size="large" /> |
||||
</View> |
||||
</ScreenLayout> |
||||
); |
||||
}; |
||||
|
||||
const styles = StyleSheet.create({ |
||||
container: { |
||||
flex: 1, |
||||
justifyContent: 'center', |
||||
}, |
||||
}); |
||||
@ -0,0 +1,100 @@
@@ -0,0 +1,100 @@
|
||||
import { |
||||
StyleSheet, |
||||
Text, |
||||
TouchableOpacity, |
||||
View, |
||||
Image, |
||||
Modal, |
||||
} from 'react-native'; |
||||
import { |
||||
colors, |
||||
Header, |
||||
RouteKey, |
||||
ScreenLayout, |
||||
IRouteParams, |
||||
PrimaryBtn, |
||||
} from '../../shared'; |
||||
import React, { useState } from 'react'; |
||||
import {NameTitle} from '../../shared/components/nameTitle/name-title'; |
||||
import {RedButton} from '../../shared/components/buttons/red-button'; |
||||
import circleArrows from '../../../assets/image/circleArrows.svg'; |
||||
import {QuestionBlock} from '../../shared/components/questionBlock/question-block'; |
||||
import { MainModal } from '../../shared/components/modals/main-modal'; |
||||
interface IProps extends IRouteParams {} |
||||
|
||||
export const Questions: React.FC<IProps> = ({navigation}) => { |
||||
const [isVisible, setIsVisible] = useState(false); |
||||
|
||||
const goBack = () => { |
||||
navigation.navigate(RouteKey.Game); |
||||
}; |
||||
|
||||
return ( |
||||
<ScreenLayout |
||||
backgroundColor={colors.primaryColor} |
||||
backgroundStatusBar={colors.primaryColor} |
||||
paddingHorizontal={24}> |
||||
<View |
||||
style={{ |
||||
display: 'flex', |
||||
flexDirection: 'column', |
||||
flex: 1, |
||||
justifyContent: 'space-between', |
||||
}}> |
||||
<View> |
||||
<Header |
||||
leftIcon="arrow" |
||||
gamer={true} |
||||
onPressLeft={() => goBack()} |
||||
title="Crazy" |
||||
/> |
||||
<NameTitle name="Player" /> |
||||
<QuestionBlock /> |
||||
<MainModal isVisible={isVisible} rate={true}/> |
||||
</View> |
||||
|
||||
<View style={styles.buttons}> |
||||
<PrimaryBtn |
||||
onPress={async () => {}} |
||||
children={ |
||||
<Image |
||||
source={require('../../../assets/image/circleArrows.png')} |
||||
style={{width: 20, height: 20}} |
||||
/> |
||||
} |
||||
width={101} |
||||
/> |
||||
<PrimaryBtn |
||||
onPress={() => {setIsVisible(true)}} |
||||
children={ |
||||
<Image |
||||
source={require('../../../assets/image/play.png')} |
||||
style={{width: 20, height: 20}} |
||||
/> |
||||
} |
||||
width={101} |
||||
/> |
||||
<PrimaryBtn |
||||
onPress={async () => {}} |
||||
children={ |
||||
<Image |
||||
source={require('../../../assets/image/addPlus.png')} |
||||
style={{width: 20, height: 20}} |
||||
/> |
||||
} |
||||
width={101} |
||||
/> |
||||
</View> |
||||
</View> |
||||
</ScreenLayout> |
||||
); |
||||
}; |
||||
|
||||
const styles = StyleSheet.create({ |
||||
buttons: { |
||||
alignItems: 'center', |
||||
flexDirection: 'row', |
||||
justifyContent: 'space-between', |
||||
marginBottom: 66, |
||||
}, |
||||
}); |
||||
@ -0,0 +1,46 @@
@@ -0,0 +1,46 @@
|
||||
import AsyncStorage from "@react-native-async-storage/async-storage"; |
||||
|
||||
export enum StorageKey {OnBoarding = 'ONBOARDING_END', Language = 'LANG_SELECTED'}; |
||||
|
||||
export class StorageService { |
||||
private _local: Partial<Record<StorageKey, any>> = {}; |
||||
|
||||
constructor() { |
||||
this.init(); |
||||
} |
||||
|
||||
private init() { |
||||
// this.get("TOKEN");
|
||||
} |
||||
|
||||
private async getFromAsync(key: any) { |
||||
const encode = await AsyncStorage.getItem(key); |
||||
if (encode) return JSON.parse(encode); |
||||
else return null; |
||||
} |
||||
|
||||
private async setToAsync(key: any, data: any) { |
||||
const encode = JSON.stringify(data); |
||||
await AsyncStorage.setItem(key, encode); |
||||
} |
||||
|
||||
public async get(key: StorageKey) { |
||||
if (this._local[key]) return this._local[key]; |
||||
return await this.getFromAsync(key); |
||||
} |
||||
|
||||
public getLocal(key: StorageKey) { |
||||
return this._local[key]; |
||||
} |
||||
|
||||
public setLocal(key: StorageKey, data: any) { |
||||
this._local[key] = data; |
||||
} |
||||
|
||||
public async set(key: StorageKey, data: any) { |
||||
await this.setToAsync(key, data); |
||||
this._local[key] = data; |
||||
} |
||||
} |
||||
|
||||
export const storageService = new StorageService(); |
||||
@ -0,0 +1,32 @@
@@ -0,0 +1,32 @@
|
||||
import React from 'react'; |
||||
import {StyleSheet, TouchableOpacity, Text} from 'react-native'; |
||||
import { colors } from '../../colors'; |
||||
|
||||
interface IProps { |
||||
name: string; |
||||
} |
||||
|
||||
export const RedButton: React.FC<IProps> = ({name}) => { |
||||
return ( |
||||
<TouchableOpacity style={styles.container}> |
||||
<Text style={styles.title}>{name}</Text> |
||||
</TouchableOpacity> |
||||
); |
||||
}; |
||||
|
||||
const styles = StyleSheet.create({ |
||||
container: { |
||||
borderRadius: 40, |
||||
borderWidth: 1, |
||||
borderColor: colors.darkPurple, |
||||
height: 66, |
||||
width: 188, |
||||
justifyContent: 'center', |
||||
alignItems: 'center', |
||||
}, |
||||
title: { |
||||
fontSize: 36, |
||||
color: '#E36588', |
||||
fontWeight: '800' |
||||
} |
||||
}); |
||||
@ -0,0 +1,124 @@
@@ -0,0 +1,124 @@
|
||||
import {Modal, View, Text, StyleSheet} from 'react-native'; |
||||
import React from 'react'; |
||||
import {colors} from '../../colors'; |
||||
import {PrimaryBtn} from '../buttons'; |
||||
|
||||
interface IProps { |
||||
isVisible: boolean; |
||||
limit?: boolean; |
||||
custom?: boolean; |
||||
rate?: boolean; |
||||
} |
||||
|
||||
export const MainModal: React.FC<IProps> = ({ |
||||
isVisible, |
||||
limit, |
||||
custom, |
||||
rate, |
||||
}) => { |
||||
return ( |
||||
<Modal visible={isVisible} transparent={true} animationType={'fade'}> |
||||
<View style={styles.container}> |
||||
<View style={styles.content}> |
||||
<Text style={styles.title}> |
||||
{limit && 'Limit exhausted'} {custom && 'Custom pack'}{' '} |
||||
{rate && 'Did you know, that...'} |
||||
</Text> |
||||
<Text style={styles.description}> |
||||
{limit && |
||||
'You have reached the limit of questions for this set. You need the full version to continue, but you can always use “Under18”, “Light”, “Spark” packages. They are always open for you.'} |
||||
{custom && 'Add this question to Custom pack?'} |
||||
{rate && |
||||
'For an app developer, there is nothing better than 5 🌟 and a positive review'} |
||||
</Text> |
||||
{!rate ? ( |
||||
<View style={styles.buttons}> |
||||
<PrimaryBtn |
||||
onPress={async () => {}} |
||||
children={ |
||||
<Text style={styles.buttonText}> |
||||
{limit && 'Cancel'} {custom && 'Yes'} |
||||
</Text> |
||||
} |
||||
width={134} |
||||
color={colors.darkPurple} |
||||
/> |
||||
<PrimaryBtn |
||||
onPress={async () => {}} |
||||
children={ |
||||
<Text style={styles.buttonText}> |
||||
{limit && 'Buy'} {custom && 'No'} |
||||
</Text> |
||||
} |
||||
width={134} |
||||
color={custom ? colors.darkPurple : ''} |
||||
/> |
||||
</View> |
||||
) : ( |
||||
<View style={styles.buttonsVertical}> |
||||
<PrimaryBtn |
||||
onPress={async () => {}} |
||||
children={<Text style={styles.buttonText}>Rate the app</Text>} |
||||
width={'100%'} |
||||
/> |
||||
<PrimaryBtn |
||||
onPress={async () => {}} |
||||
children={ |
||||
<Text style={[styles.buttonText, {fontWeight: '400'}]}> |
||||
Let the developer be sad further :( |
||||
</Text> |
||||
} |
||||
width={'100%'} |
||||
color={'rgba(0,0,0,0)'} |
||||
/> |
||||
</View> |
||||
)} |
||||
</View> |
||||
</View> |
||||
</Modal> |
||||
); |
||||
}; |
||||
|
||||
const styles = StyleSheet.create({ |
||||
container: { |
||||
flex: 1, |
||||
justifyContent: 'center', |
||||
alignItems: 'center', |
||||
backgroundColor: 'rgba(44, 32, 92, 0.5)', |
||||
}, |
||||
content: { |
||||
width: '93%', |
||||
backgroundColor: colors.darkPurple2, |
||||
paddingHorizontal: 24, |
||||
paddingVertical: 32, |
||||
borderRadius: 16, |
||||
}, |
||||
title: { |
||||
fontSize: 24, |
||||
fontWeight: '700', |
||||
color: colors.secondaryColor, |
||||
textAlign: 'center', |
||||
}, |
||||
description: { |
||||
marginTop: 8, |
||||
textAlign: 'center', |
||||
fontWeight: '400', |
||||
color: colors.white, |
||||
fontSize: 18, |
||||
lineHeight: 28, |
||||
}, |
||||
buttons: { |
||||
marginTop: 34, |
||||
justifyContent: 'space-between', |
||||
flexDirection: 'row', |
||||
}, |
||||
buttonText: { |
||||
fontWeight: '700', |
||||
fontSize: 16, |
||||
color: colors.white, |
||||
}, |
||||
buttonsVertical: { |
||||
marginTop: 34, |
||||
justifyContent: 'space-between', |
||||
}, |
||||
}); |
||||
@ -0,0 +1,25 @@
@@ -0,0 +1,25 @@
|
||||
import {StyleSheet, Text, View} from 'react-native'; |
||||
import React from 'react'; |
||||
|
||||
interface IProps { |
||||
name: string; |
||||
} |
||||
|
||||
export const NameTitle: React.FC<IProps> = ({name}) => { |
||||
return ( |
||||
<View style={styles.container}> |
||||
<Text style={styles.title}>{name}</Text> |
||||
</View> |
||||
); |
||||
}; |
||||
|
||||
const styles = StyleSheet.create({ |
||||
container: { |
||||
alignItems: 'center', |
||||
}, |
||||
title: { |
||||
color: 'white', |
||||
fontSize: 24, |
||||
fontWeight: '700', |
||||
} |
||||
}) |
||||
@ -0,0 +1,37 @@
@@ -0,0 +1,37 @@
|
||||
import { StyleSheet, View, Text, Image } from "react-native"; |
||||
import { colors } from "../../colors"; |
||||
import React from "react"; |
||||
|
||||
export const QuestionBlock = () => { |
||||
return ( |
||||
<View style={styles.container}> |
||||
<View style={styles.starContainer}> |
||||
<Image source={require('../../../../assets/image/magic-star.png')}/> |
||||
</View> |
||||
<Text style={styles.text}> |
||||
Eligendi atque nesciunt natus dolores quis ullam vel temporibus, odit maxime aliquam neque voluptate numquam itaque quam ipsa fugit earum accusamus praesentium! |
||||
</Text> |
||||
</View> |
||||
) |
||||
}; |
||||
|
||||
const styles = StyleSheet.create({ |
||||
container: { |
||||
marginTop: 88, |
||||
width: '100%', |
||||
paddingHorizontal: 16, |
||||
paddingVertical: 40, |
||||
backgroundColor: colors.darkPurple, |
||||
borderRadius: 20, |
||||
}, |
||||
starContainer: { |
||||
alignItems: 'center', |
||||
marginBottom: 14, |
||||
}, |
||||
text: { |
||||
color: colors.purple, |
||||
fontSize: 22, |
||||
fontWeight: '400', |
||||
textAlign: 'center', |
||||
} |
||||
}) |
||||
Loading…
Reference in new issue