Merge pull request #197 from Chroma-Case/front/fix-game-end-flow

.expo/README.md

@@ -1,15 +0,0 @@
-> Why do I have a folder named ".expo" in my project?
-
-The ".expo" folder is created when an Expo project is started using "expo start" command.
-
-> What do the files contain?
-
-- "devices.json": contains information about devices that have recently opened this project. This is used to populate the "Development sessions" list in your development builds.
-- "packager-info.json": contains port numbers and process PIDs that are used to serve the application to the mobile device/simulator.
-- "settings.json": contains the server configuration that is used to serve the application manifest.
-
-> Should I commit the ".expo" folder?
-
-No, you should not share the ".expo" folder. It does not contain any information that is relevant for other developers working on the project, it is specific to your machine.
-
-Upon project creation, the ".expo" folder is already added to your ".gitignore" file.

.expo/settings.json

@@ -1,8 +0,0 @@
-{
-  "hostType": "lan",
-  "lanType": "ip",
-  "dev": true,
-  "minify": false,
-  "urlRandomness": null,
-  "https": false
-}

front/Navigation.tsx

@@ -21,11 +21,11 @@ import { Button, Center, VStack } from 'native-base';
 
 
 const protectedRoutes = () => ({
-	Home: { component: HomeView, options: { title: translate('welcome') } },
+	Home: { component: HomeView, options: { title: translate('welcome'), headerLeft: null } },
 	Settings: { component: SetttingsNavigator, options: { title: 'Settings' } },
 	Song: { component: SongLobbyView, options: { title: translate('play') } },
 	Play: { component: PlayView, options: { title: translate('play') } },
-	Score: { component: ScoreView, options: { title: translate('score') } },
+	Score: { component: ScoreView, options: { title: translate('score'), headerLeft: null } },
 	Search: { component: SearchView, options: { title: translate('search') } },
 	User: { component: ProfileView, options: { title: translate('user') } },
 }) as const;

front/views/PlayView.tsx

@@ -50,6 +50,7 @@ const PlayView = ({ songId, type, route }: RouteProps<PlayViewProps>) => {
 	const [isVirtualPianoVisible, setVirtualPianoVisible] = useState<boolean>(false);
 	const [time, setTime] = useState(0);
 	const [score, setScore] = useState(0); // Between 0 and 100
+	const [midiKeyboardFound, setMidiKeyboardFound] = useState<boolean>();
 	const partitionRessources = useQuery(["partition", songId], () =>
 		API.getPartitionRessources(songId)
 	);
@@ -94,7 +95,7 @@ const PlayView = ({ songId, type, route }: RouteProps<PlayViewProps>) => {
 			toast.show({ description: 'No MIDI Keyboard found' });
 			return;
 		}
-		toast.show({ description: `MIDI ready!`, placement: 'top' });
+		setMidiKeyboardFound(true);
 		let inputIndex = 0;
 		webSocket.current = new WebSocket(scoroBaseApiUrl);
 		webSocket.current.onopen = () => {
@@ -254,9 +255,7 @@ const PlayView = ({ songId, type, route }: RouteProps<PlayViewProps>) => {
 						<Text style={{ fontWeight: '700' }}>Rolling in the Deep</Text>
 					</Center>
 					<Row style={{ flex: 1, height: '100%', justifyContent: 'space-evenly', alignItems: 'center'  }}>
-						<IconButton size='sm' colorScheme='secondary' variant='solid' icon={
-							<Icon as={Ionicons} name={"play-back"}/>
-						}/>
+					{midiKeyboardFound && <>
 						<IconButton size='sm' variant='solid' icon={
 							<Icon as={Ionicons} name={paused ? "play" : "pause"}/>
 						} onPress={() => { 
@@ -273,12 +272,13 @@ const PlayView = ({ songId, type, route }: RouteProps<PlayViewProps>) => {
 							setVirtualPianoVisible(!isVirtualPianoVisible);
 						}}/>
 						<Text>{Math.floor(time / 60000)}:{Math.floor((time % 60000) / 1000).toFixed(0).toString().padStart(2, '0')}</Text>
-						<IconButton size='sm' colorScheme='coolGray' variant='solid' icon={
+						<IconButton size='sm' colorScheme='coolGray' variant='solid' opacity={time ?? 1} disabled={time == 0} icon={
 							<Icon as={Ionicons} name="stop"/>
 						} onPress={() => {
 							onEnd();
 							navigation.navigate('Score', { songId: song.data.id });
 						}}/>
+					</>}
 					</Row>
 				</Row>
 			</Box>

front/views/ScoreView.tsx

@@ -18,14 +18,17 @@ const ScoreView = ({ songId, route }: RouteProps<ScoreViewProps>) => {
 		() => API.getArtist(songQuery.data!.artistId!),
 		{ enabled: songQuery.data != undefined }
 	);
-	const songScoreQuery = useQuery(["score", songId], () => API.getUserPlayHistory()
-		.then((history) => history.find((h) => h.songID == songId )!));
+	const songHistoryQuery = useQuery(["song", "history"], () => API.getUserPlayHistory());
 	// const perfoamnceRecommandationsQuery = useQuery(['song', props.songId, 'score', 'latest', 'recommendations'], () => API.getLastSongPerformanceScore(props.songId));
 	const recommendations = useQuery(['song', 'recommendations'], () => API.getUserRecommendations());
 
-	if (!recommendations.data || !songScoreQuery.data || !songQuery.data || (songQuery.data.artistId && !artistQuery.data)) {
+	if (!recommendations.data || !songHistoryQuery.data || !songQuery.data || (songQuery.data.artistId && !artistQuery.data)) {
 		return <LoadingView/>;
 	}
+	const songScore = songHistoryQuery.data.find((history) => history.songID == songId);
+	if (!songScore) {
+		return <Center><Translate translationKey="unknownError"/></Center>;
+	}
 	return <ScrollView p={8} contentContainerStyle={{ alignItems: 'center' }}>
 		<VStack width={{ base: '100%', lg: '50%' }} textAlign='center'>
 			<Text bold fontSize='lg'>{songQuery.data.name}</Text>
@@ -54,7 +57,7 @@ const ScoreView = ({ songId, route }: RouteProps<ScoreViewProps>) => {
 						<Row style={{ alignItems: 'center' }}>
 							<Translate translationKey='score' format={(t) => t + ' : '}/>
 							<Text bold fontSize='xl'>
-								{songScoreQuery.data.score + "pts"}
+								{songScore.score + "pts"}
 							</Text>
 						</Row>
 					</Column>