Moved score animation into its own component

front/components/Metronome.tsx

@@ -63,7 +63,7 @@ export const MetronomeControls = ({ paused = false, bpm }: { paused?: boolean; b
 					}
 					onPress={() => setEnabled(!enabled)}
 				/>
-				<Slider
+				{/* <Slider
 					maxWidth={'500px'}
 					flex={1}
 					defaultValue={volume.current}
@@ -73,7 +73,7 @@ export const MetronomeControls = ({ paused = false, bpm }: { paused?: boolean; b
 						<Slider.FilledTrack />
 					</Slider.Track>
 					<Slider.Thumb />
-				</Slider>
+				</Slider> */}
 			</View>
 		</View>
 	);

front/components/Play/PartitionMagic.tsx

@@ -119,6 +119,8 @@ const PartitionMagic = ({
 
 	React.useEffect(() => {
 		if (endPartitionReached) {
+			// if the audio is unsync
+			melodySound.current?.pauseAsync();
 			onEndReached();
 		}
 	}, [endPartitionReached]);

front/components/Play/PlayScore.tsx

@@ -0,0 +1,105 @@
+import React, { useEffect } from 'react';
+import { View } from 'react-native';
+import { Text, useTheme } from 'native-base';
+import Animated, {
+	useAnimatedStyle,
+	useSharedValue,
+	withSequence,
+	withTiming,
+	withDelay,
+	Easing,
+} from 'react-native-reanimated';
+import { ColorSchemeType } from 'native-base/lib/typescript/components/types';
+
+export type ScoreMessage = {
+	content: string;
+	color?: ColorSchemeType;
+    id: number;
+};
+
+type PlayScoreProps = {
+	score: number;
+	streak: number;
+	message?: ScoreMessage;
+};
+
+export const PlayScore = ({ score, streak, message }: PlayScoreProps) => {
+	const scoreMessageScale = useSharedValue(0);
+	// this style should bounce in on enter and fade away
+	const scoreMsgStyle = useAnimatedStyle(() => {
+		return {
+			transform: [{ scale: scoreMessageScale.value }],
+		};
+	});
+	const { colors } = useTheme();
+	const textColor = colors.text;
+
+	useEffect(() => {
+		if (message) {
+			scoreMessageScale.value = withSequence(
+				withTiming(1, {
+					duration: 400,
+					easing: Easing.elastic(3),
+				}),
+				withDelay(
+					700,
+					withTiming(0, {
+						duration: 300,
+						easing: Easing.out(Easing.cubic),
+					})
+				)
+			);
+		}
+	}, [message]);
+
+	return (
+		<View
+			style={{
+				display: 'flex',
+				flexDirection: 'column',
+				justifyContent: 'center',
+				alignItems: 'center',
+				gap: 3,
+			}}
+		>
+			<View
+				style={{
+					backgroundColor: 'rgba(16, 16, 20, 0.8)',
+					paddingHorizontal: 20,
+					paddingVertical: 5,
+					borderRadius: 12,
+				}}
+			>
+				<Text color={textColor[900]} fontSize={24}>
+					{score}
+				</Text>
+			</View>
+			{message && (
+				<Animated.View style={[scoreMsgStyle]}>
+					<View
+						style={{
+							display: 'flex',
+							flexDirection: 'row',
+							gap: 7,
+							justifyContent: 'center',
+							alignItems: 'center',
+							backgroundColor: 'rgba(16, 16, 20, 0.8)',
+							paddingHorizontal: 20,
+							paddingVertical: 5,
+							borderRadius: 12,
+						}}
+					>
+						<Text color={textColor[900]} fontSize={20}>
+							{message}
+						</Text>
+						{streak > 0 && (
+							<Text color={textColor[900]} fontSize={15} bold>
+								{`x${streak}`}
+							</Text>
+						)}
+					</View>
+				</Animated.View>
+			)}
+		</View>
+	);
+};

front/components/Play/PlayViewControlBar.tsx

@@ -1,7 +1,7 @@
 import { View } from 'react-native';
 import * as React from 'react';
-import { Row, Image, Text, Icon, useBreakpointValue } from 'native-base';
+import { Row, Image, Text, Icon, useBreakpointValue, IconButton } from 'native-base';
-import IconButton from '../IconButton';
+// import IconButton from '../IconButton';
 import { Ionicons } from '@expo/vector-icons';
 import { MetronomeControls } from '../Metronome';
 import StarProgress from '../StarProgress';
@@ -112,30 +112,22 @@ const PlayViewControlBar = ({
 					size="sm"
 					variant="solid"
 					disabled={disabled}
-					icon={
+					_icon={{
-						<Icon
+						as: Ionicons,
-							as={Ionicons}
+						color: colors.coolGray[900],
-							color={colors.coolGray[900]}
+						name: paused ? 'play' : 'pause',
-							name={paused ? 'play' : 'pause'}
-						/>
-					}
-					onPress={() => {
-						if (paused) {
-							onResume();
-						} else {
-							onPause();
-						}
 					}}
+					onPress={paused ? onResume : onPause}
 				/>
 				<IconButton
 					size="sm"
 					colorScheme="coolGray"
 					variant="solid"
-					disabled={disabled}
+					_icon={{
-					icon={<Icon as={Ionicons} name="stop" />}
+						as: Ionicons,
-					onPress={() => {
+						name: 'stop',
-						onEnd();
 					}}
+					onPress={onEnd}
 				/>
 				<Text color={textColor[900]}>
 					{time < 0

front/views/PlayView.tsx

@@ -1,14 +1,6 @@
 /* eslint-disable no-mixed-spaces-and-tabs */
 import React, { useEffect, useRef, useState } from 'react';
 import { SafeAreaView, Platform } from 'react-native';
-import Animated, {
-	useSharedValue,
-	withTiming,
-	Easing,
-	useAnimatedStyle,
-	withSequence,
-	withDelay,
-} from 'react-native-reanimated';
 import * as ScreenOrientation from 'expo-screen-orientation';
 import { Text, Row, View, useToast } from 'native-base';
 import { useNavigation } from '../Navigation';
@@ -32,16 +24,12 @@ import ButtonBase from '../components/UI/ButtonBase';
 import { Clock, Cup } from 'iconsax-react-native';
 import PlayViewControlBar from '../components/Play/PlayViewControlBar';
 import ScoreModal from '../components/ScoreModal';
+import { PlayScore, ScoreMessage } from '../components/Play/PlayScore';
 
 type PlayViewProps = {
 	songId: number;
 };
 
-type ScoreMessage = {
-	content: string;
-	color?: ColorSchemeType;
-};
-
 // this a hot fix this should be reverted soon
 let scoroBaseApiUrl = process.env.EXPO_PUBLIC_SCORO_URL!;
 
@@ -90,16 +78,8 @@ const PlayView = ({ songId }: PlayViewProps) => {
 	// first number is the note, the other is the time when pressed on release the key is removed
 	// eslint-disable-next-line @typescript-eslint/no-unused-vars
 	const [streak, setStreak] = useState(0);
-	const scoreMessageScale = useSharedValue(0);
-	// this style should bounce in on enter and fade away
-	const scoreMsgStyle = useAnimatedStyle(() => {
-		return {
-			transform: [{ scale: scoreMessageScale.value }],
-		};
-	});
 	const colorScheme = useColorScheme();
 	const { colors } = useTheme();
-	const textColor = colors.text;
 	const statColor = colors.lightText;
 
 	const onPause = () => {
@@ -226,7 +206,11 @@ const PlayView = ({ songId }: PlayViewProps) => {
 							break;
 					}
 				}
-				setLastScoreMessage({ content: formattedMessage, color: messageColor });
+				setLastScoreMessage({
+					content: formattedMessage,
+					color: messageColor,
+					id: (lastScoreMessage?.id ?? 0) + 1,
+				});
 			} catch (e) {
 				console.error(e);
 			}
@@ -263,23 +247,7 @@ const PlayView = ({ songId }: PlayViewProps) => {
 			clearInterval(interval);
 		};
 	}, []);
-	useEffect(() => {
+
-		if (lastScoreMessage) {
-			scoreMessageScale.value = withSequence(
-				withTiming(1, {
-					duration: 400,
-					easing: Easing.elastic(3),
-				}),
-				withDelay(
-					700,
-					withTiming(0, {
-						duration: 300,
-						easing: Easing.out(Easing.cubic),
-					})
-				)
-			);
-		}
-	}, [lastScoreMessage]);
 	useEffect(() => {
 		// Song.data is updated on navigation.navigate (do not know why)
 		// Hotfix to prevent midi setup process from reruning on game end
@@ -402,48 +370,10 @@ const PlayView = ({ songId }: PlayViewProps) => {
 						left: 0,
 						zIndex: 100,
 						width: '100%',
-						display: 'flex',
-						flexDirection: 'column',
-						justifyContent: 'center',
-						alignItems: 'center',
-						gap: 3,
 						position: 'absolute',
 					}}
 				>
-					<View
+					<PlayScore score={score} streak={streak} message={lastScoreMessage} />
-						style={{
-							backgroundColor: 'rgba(16, 16, 20, 0.8)',
-							paddingHorizontal: 20,
-							paddingVertical: 5,
-							borderRadius: 12,
-						}}
-					>
-						<Text color={textColor[900]} fontSize={24}>
-							{score}
-						</Text>
-					</View>
-					<Animated.View style={[scoreMsgStyle]}>
-						<View
-							style={{
-								display: 'flex',
-								flexDirection: 'row',
-								gap: 7,
-								justifyContent: 'center',
-								alignItems: 'center',
-								backgroundColor: 'rgba(16, 16, 20, 0.8)',
-								paddingHorizontal: 20,
-								paddingVertical: 5,
-								borderRadius: 12,
-							}}
-						>
-							<Text color={textColor[900]} fontSize={20}>
-								{lastScoreMessage?.content}
-							</Text>
-							<Text color={textColor[900]} fontSize={15} bold>
-								{streak > 0 && `x${streak}`}
-							</Text>
-						</View>
-					</Animated.View>
 				</View>
 				<View
 					style={{
@@ -461,7 +391,7 @@ const PlayView = ({ songId }: PlayViewProps) => {
 						onEndReached={() => {
 							setTimeout(() => {
 								onEnd();
-							}, 500);
+							}, 200);
 						}}
 						onError={() => {
 							console.log('error from partition magic');