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 IconButton from '../IconButton';
+import { Row, Image, Text, Icon, useBreakpointValue, IconButton } from 'native-base';
+// 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
-							as={Ionicons}
-							color={colors.coolGray[900]}
-							name={paused ? 'play' : 'pause'}
-						/>
-					}
-					onPress={() => {
-						if (paused) {
-							onResume();
-						} else {
-							onPause();
-						}
+					_icon={{
+						as: Ionicons,
+						color: colors.coolGray[900],
+						name: paused ? 'play' : 'pause',
 					}}
+					onPress={paused ? onResume : onPause}
 				/>
 				<IconButton
 					size="sm"
 					colorScheme="coolGray"
 					variant="solid"
-					disabled={disabled}
-					icon={<Icon as={Ionicons} name="stop" />}
-					onPress={() => {
-						onEnd();
+					_icon={{
+						as: Ionicons,
+						name: 'stop',
 					}}
+					onPress={onEnd}
 				/>
 				<Text color={textColor[900]}>
 					{time < 0