From bbf3a317ecf5170f7cbeacb7272e9c037e597012 Mon Sep 17 00:00:00 2001
From: Arthur Jamet <arthur.jamet@gmail.com>
Date: Sat, 2 Dec 2023 08:37:49 +0100
Subject: [PATCH] Front: Score: Better iterations

---
 front/components/ScoreModal.tsx | 153 +++++++++++++++++---------------
 1 file changed, 82 insertions(+), 71 deletions(-)

diff --git a/front/components/ScoreModal.tsx b/front/components/ScoreModal.tsx
index 9081fcb..4b30db6 100644
--- a/front/components/ScoreModal.tsx
+++ b/front/components/ScoreModal.tsx
@@ -20,86 +20,97 @@ type ScoreModalProps = {
 	};
 };
 
-const ScoreModal = () => {
-	const props = {
-		songId: 1,
-		overallScore: 74,
-		precision: 0,
-		score: {
-			missed: 9,
-			good: 1,
-			great: 2,
-			perfect: 4,
-			wrong: 0,
-			max_score: 100,
-			current_streak: 1,
-			max_streak: 11,
-		} as const
-	} as const; //TODO DELETE ME
-	const navigation = useNavigation()
+const ScoreModal = (props: ScoreModalProps) => {
+	// const props = {
+	// 	songId: 1,
+	// 	overallScore: 74,
+	// 	precision: 0,
+	// 	score: {
+	// 		missed: 9,
+	// 		good: 1,
+	// 		great: 2,
+	// 		perfect: 4,
+	// 		wrong: 0,
+	// 		max_score: 100,
+	// 		current_streak: 1,
+	// 		max_streak: 11,
+	// 	} as const
+	// } as const; //TODO DELETE ME
+	const navigation = useNavigation();
 	const theme = useTheme();
-	const score = (props.overallScore * 100) / props.score.max_score
+	const score = (props.overallScore * 100) / props.score.max_score;
 	const column1 = {
 		perfect: [props.score.perfect, 'primary'],
 		great: [props.score.great, 'secondary'],
-		good: [props.score.good, 'success']
-	} as const
+		good: [props.score.good, 'success'],
+	} as const;
 	const column2 = {
 		bestStreak: [props.score.max_streak, 'notification'],
 		missed: [props.score.missed, 'alert'],
-		wrong: [props.score.wrong, 'error']
-	} as const
+		wrong: [props.score.wrong, 'error'],
+	} as const;
 
-	return <Column w='xl' space={4} style={{ alignItems: 'center' }}>
-		<Row space={2} style={{ justifyContent: 'center' }}>
-			{[1, 2, 3].map((index) => (
-				<Star1
-					color={theme.colors.primary[500]}
-					key={index}
-					variant={score >= (index * 100/ 4) ? 'Bold' : 'Outline' }
+	return (
+		<Column w="xl" space={4} style={{ alignItems: 'center' }}>
+			<Row space={2} style={{ justifyContent: 'center' }}>
+				{[1, 2, 3].map((index) => (
+					<Star1
+						color={theme.colors.primary[500]}
+						key={index}
+						variant={score >= (index * 100) / 4 ? 'Bold' : 'Outline'}
+					/>
+				))}
+			</Row>
+			<Text fontSize="3xl">{score}%</Text>
+			<Row w="100%" style={{ justifyContent: 'space-between' }}>
+				<Translate translationKey="precision" />
+				<Text>{props.precision}%</Text>
+			</Row>
+			<Row w="100%" space={2}>
+				{([column1, column2] as const).map((column, columnIndex) => (
+					<Column w="50%" space={2} key={columnIndex}>
+						{Object.entries(column).map(([key, [value, color]]) => {
+							const translationKey = key as TranslationKey;
+
+							return (
+								<Row
+									key={translationKey}
+									style={{ justifyContent: 'space-between' }}
+								>
+									<Translate
+										translationKey={translationKey}
+										fontWeight={'bold'}
+										color={`${color}.500`}
+									/>
+									<Text>x{value}</Text>
+								</Row>
+							);
+						})}
+					</Column>
+				))}
+			</Row>
+			<Row w="100%" style={{ justifyContent: 'space-between' }}>
+				<ButtonBase
+					style={{}}
+					icon={Play}
+					type="outlined"
+					title={translate('playAgain')}
+					onPress={() => navigation.navigate('Play', { songId: props.songId })}
 				/>
-			))}
-		</Row>
-		<Text fontSize='3xl' >{score}%</Text>
-		<Row w="100%" style={{ justifyContent: 'space-between' }}>
-			<Translate translationKey='precision'/>
-			<Text>{props.precision}%</Text>
-		</Row>
-		<Row w="100%" space={2}>
-			{([column1, column2] as const).map((column, columnIndex) => (
-				<Column w="50%" space={2} key={columnIndex}>
-					{Object.keys(column).map((key) => {
-						const translationKey = key;
-						const [value, color] = column[translationKey as keyof typeof column] as [number, string];
-
-						return <Row key={translationKey} style={{ justifyContent: 'space-between' }}>
-							<Translate translationKey={translationKey as TranslationKey} fontWeight={'bold'} color={`${color}.500`} />
-							<Text>x{value}</Text>
-						</Row>
-					})}
-				</Column>
-			))}
-		</Row>
-		<Row w="100%" style={{ justifyContent: 'space-between' }}>
-			<ButtonBase
-				style={{}}
-				icon={Play}
-				type="outlined"
-				title={translate('playAgain')}
-				onPress={() => navigation.navigate('Play', { songId: props.songId })}
-			/>
-			<ButtonBase
-				style={{}}
-				icon={Play}
-				type="filled"
-				title={translate('menuMusic')}
-				onPress={() => navigation.canGoBack()
-					? navigation.goBack()
-					: navigation.navigate('HomeNew', {})
-				}
-			/>
-		</Row>
-	</Column>
+				<ButtonBase
+					style={{}}
+					icon={Play}
+					type="filled"
+					title={translate('menuMusic')}
+					onPress={() =>
+						navigation.canGoBack()
+							? navigation.goBack()
+							: navigation.navigate('HomeNew', {})
+					}
+				/>
+			</Row>
+		</Column>
+	);
 };
 
 export default ScoreModal;