From 72f17c018e891acf293a9839d206c801ed53b252 Mon Sep 17 00:00:00 2001 From: Arthur Jamet Date: Thu, 30 Nov 2023 14:24:48 +0100 Subject: [PATCH] Front: Score Modal --- front/Navigation.tsx | 6 - front/components/ScoreModal.tsx | 102 +++++++++++++++++ front/components/UI/PopupCC.tsx | 6 +- front/components/UI/ScaffoldCC.tsx | 3 +- front/views/PlayView.tsx | 14 ++- front/views/ScoreView.tsx | 175 ----------------------------- 6 files changed, 116 insertions(+), 190 deletions(-) create mode 100644 front/components/ScoreModal.tsx delete mode 100644 front/views/ScoreView.tsx diff --git a/front/Navigation.tsx b/front/Navigation.tsx index 8c4650e..52a25b2 100644 --- a/front/Navigation.tsx +++ b/front/Navigation.tsx @@ -15,7 +15,6 @@ import SettingsTab from './views/settings/SettingsView'; import { useQuery } from './Queries'; import API, { APIError } from './API'; import PlayView from './views/PlayView'; -import ScoreView from './views/ScoreView'; import { LoadingView } from './components/Loading'; import ProfileView from './views/ProfileView'; import useColorScheme from './hooks/colorScheme'; @@ -77,11 +76,6 @@ const protectedRoutes = () => options: { title: translate('genreFilter') }, link: '/genre/:genreId', }, - Score: { - component: ScoreView, - options: { title: translate('score'), headerLeft: null }, - link: undefined, - }, Search: { component: SearchView, options: { headerShown: false }, diff --git a/front/components/ScoreModal.tsx b/front/components/ScoreModal.tsx new file mode 100644 index 0000000..2e99813 --- /dev/null +++ b/front/components/ScoreModal.tsx @@ -0,0 +1,102 @@ +import { Column, Row, Text, useTheme } from 'native-base'; +import ButtonBase from './UI/ButtonBase'; +import { Translate, TranslationKey, translate } from '../i18n/i18n'; +import { Play, Star1 } from 'iconsax-react-native'; +import { useNavigation } from '../Navigation'; + +type ScoreModalProps = { + songId: number; + overallScore: number; + precision: number; + score: { + missed: number; + good: number; + great: number; + perfect: number; + wrong: number; + max_score: number; + current_streak: number; + max_streak: number; + }; +}; + +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 column1 = { + perfect: [props.score.perfect, 'primary'], + great: [props.score.great, 'secondary'], + 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 + + return + + {[1, 2, 3].map((index) => ( + = (index * 100/ 4) ? 'Bold' : 'Outline' } + /> + ))} + + {score}% + + + {props.precision}% + + + {([column1, column2] as const).map((column, columnIndex) => ( + + {Object.keys(column).map((key) => { + const translationKey = key; + const [value, color] = column[translationKey as keyof typeof column] as [number, string]; + + return + + x{value} + + })} + + ))} + + + navigation.navigate('Play', { songId: props.songId })} + /> + navigation.goBack()} + /> + + +}; + +export default ScoreModal; diff --git a/front/components/UI/PopupCC.tsx b/front/components/UI/PopupCC.tsx index 09c0266..3e665fb 100644 --- a/front/components/UI/PopupCC.tsx +++ b/front/components/UI/PopupCC.tsx @@ -7,7 +7,7 @@ import React from 'react'; import GlassmorphismCC from './Glassmorphism'; type PopupCCProps = { - title: string; + title?: string; description?: string; children?: ReactNode; isVisible: boolean; @@ -34,7 +34,7 @@ const PopupCC = ({ title, description, children, isVisible, setIsVisible }: Popu }} space={4} > - + {(setIsVisible || title) && {title} {setIsVisible !== undefined && ( @@ -45,7 +45,7 @@ const PopupCC = ({ title, description, children, isVisible, setIsVisible }: Popu /> )} - + } {description !== undefined && {description}} {children !== undefined && children} diff --git a/front/components/UI/ScaffoldCC.tsx b/front/components/UI/ScaffoldCC.tsx index c761200..7791733 100644 --- a/front/components/UI/ScaffoldCC.tsx +++ b/front/components/UI/ScaffoldCC.tsx @@ -3,7 +3,7 @@ import useColorScheme from '../../hooks/colorScheme'; import { useQuery } from '../../Queries'; import API from '../../API'; import { LinearGradient } from 'expo-linear-gradient'; -import { Cup, Discover, Music, SearchNormal1, Setting2, User } from 'iconsax-react-native'; +import { Discover, Music, SearchNormal1, Setting2, User } from 'iconsax-react-native'; import { LoadingView } from '../Loading'; import ScaffoldDesktopCC from './ScaffoldDesktopCC'; import ScaffoldMobileCC from './ScaffoldMobileCC'; @@ -13,7 +13,6 @@ const menu = [ { type: 'main', title: 'menuProfile', icon: User, link: 'User' }, { type: 'main', title: 'menuMusic', icon: Music, link: 'Music' }, { type: 'main', title: 'menuSearch', icon: SearchNormal1, link: 'Search' }, - { type: 'main', title: 'menuLeaderBoard', icon: Cup, link: 'Score' }, { type: 'sub', title: 'menuSettings', icon: Setting2, link: 'Settings' }, ] as const; diff --git a/front/views/PlayView.tsx b/front/views/PlayView.tsx index 7c967f9..0c364e3 100644 --- a/front/views/PlayView.tsx +++ b/front/views/PlayView.tsx @@ -33,6 +33,7 @@ import PopupCC from '../components/UI/PopupCC'; import ButtonBase from '../components/UI/ButtonBase'; import { Clock, Cup } from 'iconsax-react-native'; import PlayViewControlBar from '../components/Play/PlayViewControlBar'; +import ScoreModal from '../components/ScoreModal'; type PlayViewProps = { songId: number; @@ -88,6 +89,7 @@ const PlayView = ({ songId, route }: RouteProps) => { const [paused, setPause] = useState(true); const stopwatch = useStopwatch(); const [time, setTime] = useState(0); + const [endResult, setEndResult] = useState(); const songHistory = useQuery(API.getSongHistory(songId)); const [partitionRendered, setPartitionRendered] = useState(false); // Used to know when partitionview can render const [score, setScore] = useState(0); // Between 0 and 100 @@ -186,11 +188,10 @@ const PlayView = ({ songId, route }: RouteProps) => { if (data.type == 'end') { endMsgReceived = true; webSocket.current?.close(); - navigation.dispatch( - StackActions.replace('Score', { songId: song.data!.id, ...data }) - ); + setEndResult({ songId: song.data!.id, ...data }); return; } + console.log(data); const points = data.info.score; const maxPoints = data.info.max_score || 1; @@ -332,10 +333,15 @@ const PlayView = ({ songId, route }: RouteProps) => { zIndex: 100, }} > + { + (() => endResult ? : <>)() + } { diff --git a/front/views/ScoreView.tsx b/front/views/ScoreView.tsx deleted file mode 100644 index cd27420..0000000 --- a/front/views/ScoreView.tsx +++ /dev/null @@ -1,175 +0,0 @@ -import { Card, Column, Image, Row, Text, ScrollView, VStack } from 'native-base'; -import Translate from '../components/Translate'; -import { RouteProps, useNavigation } from '../Navigation'; -import { CardBorderRadius } from '../components/Card'; -import TextButton from '../components/TextButton'; -import API from '../API'; -import CardGridCustom from '../components/CardGridCustom'; -import SongCard from '../components/SongCard'; -import { useQueries, useQuery } from '../Queries'; -import { LoadingView } from '../components/Loading'; -import ScoreGraph from '../components/ScoreGraph'; - -type ScoreViewProps = { - songId: number; - overallScore: number; - precision: number; - score: { - missed: number; - good: number; - great: number; - perfect: number; - wrong: number; - max_score: number; - current_streak: number; - max_streak: number; - }; -}; - -const ScoreView = (props: RouteProps) => { - const { songId, overallScore, precision, score } = props; - const navigation = useNavigation(); - const songQuery = useQuery(API.getSong(songId)); - const artistQuery = useQuery(() => API.getArtist(songQuery.data!.artistId!), { - enabled: songQuery.data !== undefined, - }); - const recommendations = useQuery(API.getSongSuggestions); - const artistRecommendations = useQueries( - recommendations.data - ?.filter(({ artistId }) => artistId !== null) - .map((song) => API.getArtist(song.artistId)) ?? [] - ); - - if ( - !recommendations.data || - artistRecommendations.find(({ data }) => !data) || - !songQuery.data || - (songQuery.data.artistId && !artistQuery.data) - ) { - return ; - } - if (songQuery.isError) { - navigation.navigate('Error'); - return <>; - } - - return ( - - - - {songQuery.data.name} - - {artistQuery.data?.name} - - - - - - - {/* - - - - ' ' + t}/> - - - - 80 - - ' ' + t}/> - */} - - t + ' : '} /> - - {overallScore + 'pts'} - - - - t + ' : '} /> - - {score.perfect} - - - - t + ' : '} /> - - {score.great} - - - - t + ' : '} /> - - {score.good} - - - - t + ' : '} /> - - {score.wrong} - - - - - t + ' : '} /> - - {score.missed} - - - - t + ' : '} /> - - {score.max_streak} - - - - t + ' : '} /> - - {precision + '%'} - - - - - - - ({ - cover: i.cover, - name: i.name, - artistName: - artistRecommendations.find(({ data }) => data?.id == i.artistId)?.data - ?.name ?? '', - songId: i.id, - }))} - cardComponent={SongCard} - heading={ - - - - } - /> - - navigation.navigate('Home', {})} - /> - navigation.navigate('Play', { songId })} - translate={{ translationKey: 'playAgain' }} - /> - - - - ); -}; - -export default ScoreView;