FIX | Fix bugs

src/i18n/interfaces/common.interface.ts

@@ -14,4 +14,5 @@ export interface Common {
 	limitDesc: string
 	buyAfterBtn: string
 	no: string
+	placeholderPlayer: string
 }

src/i18n/locales/en/common.translation.ts

@@ -20,4 +20,5 @@ export const common: Common = {
 		'You have reached the limit of questions for this set. You need the full version to continue, but you can use “Under18” and “Light” packages. They are always open for you.',
 	buyAfterBtn: 'Buy',
 	no: 'Back',
+	placeholderPlayer: 'Name'
 }

src/i18n/locales/ua/common.translation.ts

@@ -9,12 +9,15 @@ export const common: Common = {
 	validate: Validation,
 	shareMessage: 'Поділись цим додатком зі своїми друзями',
 	notFillPlayerTitle: 'Ой',
-	notFillPlayerMessage: 'Якесь поле не заповнене. Перевір будь ласка!',
+	notFillPlayerMessage:
+		'Здається не всі імена заповнені. Перевір будь ласка!',
 	helpAlertTitle: 'Добре!',
 	helpAlertDesc: 'Ми розглянемо питання і якнайшвидше дамо відповідь.',
 	writeUsBtn: 'Відправити',
 	limitTitle: 'Ліміт вичерпано',
-	limitDesc: 'Ліміт питань для пакету "Crazy" вичерпано. Щоб продовжити, потрібна повна версія. Але ти можеш використовувати пакети «До 18» та  «Легкий». Вони завжди відкриті для тебе.',
+	limitDesc:
+		'Ліміт питань для пакету "Crazy" вичерпано. Щоб продовжити, потрібна повна версія. Але ти можеш використовувати пакети «До 18» та  «Легкий». Вони завжди відкриті для тебе.',
 	buyAfterBtn: 'До покупок',
-	no: 'Назад'
+	no: 'Назад',
+	placeholderPlayer: "Ім'я",
 }

src/module/common/questions-dares-list/questions-dares-list.ts

@@ -2,8 +2,8 @@ export const under18 = [
 	{
 		id: 1,
 		isDare: false,
-		en: 'Tell about your first fight?',
-		ua: 'Розкажи про свою першу бійку?',
+		en: 'Tell about your first fight.',
+		ua: 'Розкажи про свою першу бійку.',
 	},
 	{
 		id: 2,
@@ -68,8 +68,8 @@ export const under18 = [
 	{
 		id: 12,
 		isDare: true,
-		en: 'Call someone on video, be silent for 10 seconds and knock out',
-		ua: 'Подзвони комусь по відео мовчи 10 секунд і вибий',
+		en: 'Call someone on video, be silent for 10 seconds and knock out.',
+		ua: 'Подзвони комусь по відео мовчи 10 секунд і вибий.',
 	},
 	{
 		id: 13,

src/module/game/animations/use-animation-truth-or-dare.hook.ts

@@ -11,7 +11,7 @@ export const useAnimationTruthOrDare = (wordsArr: string[]) => {
 
 	wordsArr.forEach((_, index) => (animValues[index] = new Animated.Value(0)))
 
-	const startAnimTextByVoice = (toValue = 1) => {
+	const startAnimTextByVoice = () => {
 		const animations = wordsArr.map((word, index) => {
 			const wordWithComma = word.includes(',')
 
@@ -25,7 +25,7 @@ export const useAnimationTruthOrDare = (wordsArr: string[]) => {
 			})
 
 			return Animated.timing(animValues[index], {
-				toValue,
+				toValue: 1,
 				duration:
 					word.length *
 					(wordWithComma ? durationWithComma : duration),
@@ -36,7 +36,7 @@ export const useAnimationTruthOrDare = (wordsArr: string[]) => {
 		Animated.sequence(animations).start()
 	}
 
-	const startAnimation = () => {
+	const startAnimationCard = () => {
 		Animated.timing(animContainer, {
 			toValue: 0,
 			duration: 400,
@@ -52,9 +52,8 @@ export const useAnimationTruthOrDare = (wordsArr: string[]) => {
 		],
 	}
 
-
 	return {
-		startAnimation,
+		startAnimationCard,
 		startAnimTextByVoice,
 		animValues,
 		animStyle: animStyleContainer,

src/module/game/components/index.ts

@@ -1,2 +1,2 @@
-export * from './truth-or-dare-view'
+export * from './truth-or-dare'
 export * from './player-field.component';

src/module/game/components/player-field.component.tsx

@@ -24,7 +24,7 @@ export const PlayerField: FC<IProps> = ({ value, onChange, onDelete }) => {
 			onChange={onChange}
 			renderPostfix={renderClear}
 			inputProps={{
-				placeholder: t('customPack.placeholder'),
+				placeholder: t('common.placeholderPlayer'),
 				placeholderTextColor: colors.darkPurple,
 			}}
 			inputStyle={styles.input}

src/module/game/components/truth-or-dare.tsx

@@ -12,12 +12,13 @@ export const TruthOrDare: React.FC<IProps> = ({ item }) => {
 	const wordsArr = item.trim().split(' ')
 	const [voiceover, setVoiceover] = useState(true)
 
-	const { animStyle, animValues, startAnimation, startAnimTextByVoice } =
+	const { animStyle, animValues, startAnimationCard, startAnimTextByVoice } =
 		useAnimationTruthOrDare(wordsArr)
 
 	useEffect(() => {
+		startAnimationCard()
+
 		checkAndStartVoiceover()
-		startAnimation()
 	}, [item])
 
 	const checkAndStartVoiceover = async () => {
@@ -26,12 +27,11 @@ export const TruthOrDare: React.FC<IProps> = ({ item }) => {
 		setVoiceover(isVoicer)
 
 		if (isVoicer) {
-			startAnimTextByVoice()
 			Tts.stop()
 			Tts.speak(item)
+			Tts.addEventListener('tts-start', startAnimTextByVoice)
 		}
 	}
-	console.log('isVoiceover', voiceover)
 
 	return (
 		<Animated.View style={[styles.container, animStyle]}>

src/module/game/hooks/use-voice.hook.tsx

@@ -2,22 +2,23 @@ import { useEffect, useState } from 'react'
 import Tts from 'react-native-tts'
 import { voiceConfig } from '../config'
 import { useTranslation } from 'react-i18next'
-import { StorageKey, storageService } from '~module/common'
 
 export const useVoice = () => {
 	const { i18n } = useTranslation()
 	const [ttsStatus, setTtsStatus] = useState('initiliazing')
 
 	useEffect(() => {
-		Tts.addEventListener('tts-start', _event => setTtsStatus('started'))
 		Tts.addEventListener('tts-finish', _event => setTtsStatus('finished'))
 		Tts.addEventListener('tts-cancel', _event => setTtsStatus('cancelled'))
 		Tts.getInitStatus().then(initTts)
 
 		return () => {
-			Tts.removeEventListener('tts-start', _event =>
-				setTtsStatus('started'),
-			)
+			if (ttsStatus === 'finished') {
+				Tts.removeEventListener('tts-start', _event =>
+					setTtsStatus('started'),
+				)
+			}
+
 			Tts.removeEventListener('tts-finish', _event =>
 				setTtsStatus('finished'),
 			)
@@ -37,6 +38,5 @@ export const useVoice = () => {
 			//"Language is not supported"
 			console.log(`setDefaultLanguage error `, err)
 		}
-		setTtsStatus('initialized')
 	}
 }

src/module/game/screens/players.screen.tsx

@@ -37,7 +37,7 @@ export const PlayersScreen: FC = () => {
 	const onDeletePlayer = (index: number) => {
 		const updatedPlayers = [...players]
 
-		if (updatedPlayers.length === 1) return
+		if (updatedPlayers.length <= 2) return
 
 		updatedPlayers.splice(index, 1)
 		dispatch(setPlayers(updatedPlayers))
@@ -66,16 +66,13 @@ export const PlayersScreen: FC = () => {
 		<ScreenLayout
 			needScroll
 			scrollStyle={{
-				flex: 1,
 				paddingBottom: 40,
+				flexGrow: 1,
 			}}
 			headerComponent={
-				<Header
-					title={t('pageTitles.players')}
-					onPressLeft={onSavePlayers}
-				/>
+				<Header title={t('pageTitles.players')} leftIcon="" />
 			}>
-			<View style={{ rowGap: 16 }}>
+			<View style={{ rowGap: 16, flex: 1 }}>
 				{players.map((player, index) => (
 					<PlayerField
 						key={index}
@@ -84,14 +81,13 @@ export const PlayersScreen: FC = () => {
 						onDelete={() => onDeletePlayer(index)}
 					/>
 				))}
+				<ButtonWithIcon
+					styleBtn={styles.plusBtn}
+					iconName="add-plus"
+					onPress={onAddField}
+				/>
 			</View>
 
-			<ButtonWithIcon
-				styleBtn={styles.plusBtn}
-				iconName="add-plus"
-				onPress={onAddField}
-			/>
-
 			<ButtonPrimary
 				iconName="play"
 				onPress={onSavePlayers}
@@ -109,7 +105,7 @@ const styles = StyleSheet.create({
 		marginBottom: 122,
 	},
 	plusBtn: {
-		marginTop: 24,
+		marginBottom: 24,
 		borderRadius: 50,
 		width: 50,
 		height: 50,

src/module/packages/animation/use-animation-list.hook.ts

@@ -1,10 +1,7 @@
 import React, { useEffect, useRef } from 'react'
 import { Animated } from 'react-native'
-import { useIsFocused } from '@react-navigation/native'
 
 export const useAnimationList = (delay: number) => {
-	const isFocus = useIsFocused()
-
 	const animTransformX = useRef(new Animated.Value(0)).current
 	const animTransformY = useRef(new Animated.Value(0)).current
 
@@ -33,12 +30,8 @@ export const useAnimationList = (delay: number) => {
 			),
 		])
 
-		if (!isFocus) {
-			return animation.reset()
-		}
-
 		animation.start()
-	}, [isFocus])
+	}, [])
 
 	const animationStyleItem = {
 		opacity: animTransformX,

src/module/packages/atoms/packages-page-separator.atom.tsx

@@ -8,20 +8,17 @@ export const PackagesPageSeparator = () => {
 	useEffect(() => {
 		Animated.spring(fadeInAnim, {
 			toValue: 1,
-			useNativeDriver: true,
-			delay: 1100,
+			useNativeDriver: false,
+			stiffness: 50,
+			delay: 1400,
 		}).start()
 	}, [])
 
 	const animStyle = {
-		transform: [
-			{
-				translateY: fadeInAnim.interpolate({
-					inputRange: [0, 1],
-					outputRange: [-900, 0],
-				}),
-			},
-		],
+		width: fadeInAnim.interpolate({
+			inputRange: [0, 1],
+			outputRange: ['0%', '100%'],
+		}),
 	}
 
 	return (

src/module/root/navigations-groups/user.group.tsx

@@ -35,6 +35,7 @@ export const UserNavigationGroup: FC = () => {
 			<UserStack.Screen
 				name={UserRouteKey.TruthOrDare}
 				component={TruthOrDareScreen}
+				options={{ animation: 'fade' }}
 			/>
 
 			<UserStack.Screen

src/store/slices/players.slice.ts

@@ -7,22 +7,18 @@ export interface PlayersState {
 	players: string[]
 	playerIndex: number
 	currentPlayer: string
-	loaded: boolean
-	hasError: boolean
 }
 
 const initialState: PlayersState = {
 	players: [],
 	playerIndex: 0,
 	currentPlayer: '',
-	loaded: false,
-	hasError: false,
 }
 
 export const getPlayersAsync = createAsyncThunk('get-players', async () => {
 	const savedPlayers = await storageService.get(StorageKey.Players)
 
-	return savedPlayers ? savedPlayers : ['']
+	return savedPlayers ? savedPlayers : ['', '']
 })
 
 export const playersSlice = createSlice({
@@ -47,17 +43,10 @@ export const playersSlice = createSlice({
 		},
 	},
 	extraReducers(builder) {
-		builder
-			.addCase(getPlayersAsync.fulfilled, (state, action) => {
-				state.players = action.payload
-				state.currentPlayer = state.players[0]
-			})
-			.addCase(getPlayersAsync.pending, state => {
-				state.loaded = false
-			})
-			.addCase(getPlayersAsync.rejected, state => {
-				state.hasError = true
-			})
+		builder.addCase(getPlayersAsync.fulfilled, (state, action) => {
+			state.players = action.payload
+			state.currentPlayer = state.players[0]
+		})
 	},
 })