Front: Add popup on playview to select mode

front/i18n/Translations.ts

@@ -297,6 +297,8 @@ export const en = {
 	avatar: 'Avatar',
 	changeIt: 'Change It',
 	verified: 'Verified',
+	selectPlayMode: 'Select a play mode',
+	selectPlayModeExplaination: "'Practice' only considers the notes you play, while 'Play' mode also takes rhythm into account."
 };
 
 export const fr: typeof en = {
@@ -599,6 +601,8 @@ export const fr: typeof en = {
 	avatar: 'Avatar',
 	changeIt: 'Modifier',
 	verified: 'Verifié',
+	selectPlayMode: 'Sélectionnez un mode de jeu',
+	selectPlayModeExplaination: "Le mode 'S'entrainer' ne compte que les notes, tandis que le mode 'Jouer' prend en compte à la fois les notes et le rythme."
 };
 
 export const sp: typeof en = {
@@ -907,4 +911,6 @@ export const sp: typeof en = {
 	avatar: 'Avatar',
 	changeIt: 'Cambialo',
 	verified: 'Verified',
+	selectPlayMode: 'Selecciona un modo de juego',
+	selectPlayModeExplaination: "El modo 'práctica' solo cuenta notas, mientras que el modo 'reproducir' tiene en cuenta tanto las notas como el ritmo."
 };

front/i18n/i18n.ts

@@ -33,7 +33,7 @@ export default i18n;
  * @param textKey the key of th text to translate
  * @returns the translated text
  */
-export const translate = (key: keyof typeof en, language?: AvailableLanguages) => {
+export const translate = (key: TranslationKey, language?: AvailableLanguages) => {
 	return i18n.t(key, {
 		lng: language,
 	});

front/views/PlayView.tsx

@@ -33,6 +33,8 @@ import StarProgress from '../components/StarProgress';
 import useColorScheme from '../hooks/colorScheme';
 import { LinearGradient } from 'expo-linear-gradient';
 import { useTheme } from 'native-base';
+import PopupCC from '../components/UI/PopupCC';
+import ButtonBase from '../components/UI/ButtonBase';
 
 type PlayViewProps = {
 	songId: number;
@@ -97,7 +99,7 @@ const infoCardInfos = [
 ] as const;
 
 const PlayView = ({ songId, route }: RouteProps<PlayViewProps>) => {
-	const [type, setType] = useState<'practice' | 'normal'>('normal');
+	const [type, setType] = useState<'practice' | 'normal'>();
 	const accessToken = useSelector((state: RootState) => state.user.accessToken);
 	const navigation = useNavigation();
 	const song = useQuery(API.getSong(songId), { staleTime: Infinity });
@@ -347,6 +349,32 @@ const PlayView = ({ songId, route }: RouteProps<PlayViewProps>) => {
 						zIndex: 100,
 					}}
 				>
+					<PopupCC
+						title={translate('selectPlayMode')}
+						description={translate('selectPlayModeExplaination')}
+						isVisible={type === undefined}
+						setIsVisible={navigation.canGoBack() ? (isVisible) => {
+							if (!isVisible) {
+								// If we dismiss the popup, Go to previous page
+								navigation.goBack();
+							}
+						} : undefined}
+					>
+						<Row style={{ justifyContent: 'space-between' }}>
+							<ButtonBase
+								style={{}}
+								type="outlined"
+								title={translate('practiceBtn')}
+								onPress={async () => setType('practice')}
+							/>
+							<ButtonBase
+								style={{}}
+								type='filled'
+								title={translate('playBtn')}
+								onPress={async () => setType('normal')}
+							/>
+						</Row>
+					</PopupCC>
 					{infoCardInfos.map((info) => (
 						<View
 							key={info.id}