Front: Hide Stop Button while game has not started

This commit is contained in:
Arthur Jamet
2023-04-28 13:57:08 +01:00
parent 030cbfc786
commit e0bdd5fd8f
2 changed files with 12 additions and 9 deletions

View File

@@ -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>

View File

@@ -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>