zoriya/Chromacase
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

minor fixes

Browse Source
This commit is contained in:
Clément Le Bihan
2024-01-09 17:13:36 +01:00
parent b5b94adc83
commit dd09827d08
6 changed files with 130 additions and 132 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
front/Navigation.tsx
View File

@@ -1,5 +1,5 @@
/* eslint-disable @typescript-eslint/ban-types */
import { NativeStackScreenProps, createNativeStackNavigator } from '@react-navigation/native-stack';
import { NativeStackNavigationProp, NativeStackScreenProps, createNativeStackNavigator } from '@react-navigation/native-stack';
import {
NavigationProp,
ParamListBase,
@@ -174,7 +174,7 @@ type RouteParams<Routes extends Record<string, Route>> = {
type PrivateRoutesParams = RouteParams<typeof protectedRoutes>;
type PublicRoutesParams = RouteParams<typeof publicRoutes>;
type TabsRoutesParams = RouteParams<typeof tabRoutes>;
type AppRouteParams = PrivateRoutesParams &
type AppRouteParams = Omit<PrivateRoutesParams, "Tabs"> & { Tabs: { screen: keyof TabsRoutesParams } } &
PublicRoutesParams &
TabsRoutesParams & { Oops: undefined };
@@ -324,4 +324,4 @@ export const Router = () => {
);
};
export const useNavigation = () => navigationHook<NavigationProp<AppRouteParams>>();
export const useNavigation = () => navigationHook<NativeStackNavigationProp<AppRouteParams>>();

10
front/components/ScoreModal.tsx
View File

@@ -97,7 +97,7 @@ const ScoreModal = (props: ScoreModalProps) => {
type="outlined"
title={translate('playAgain')}
onPress={() =>
navigation.dispatch(StackActions.replace('Play', { songId: props.songId }))
navigation.replace('Play', { songId: props.songId })
}
/>
<ButtonBase
@@ -105,9 +105,11 @@ const ScoreModal = (props: ScoreModalProps) => {
icon={Play}
type="filled"
title={translate('menuMusic')}
onPress={() =>
navigation.canGoBack() ? navigation.goBack() : navigation.navigate('Home')
}
onPress={() => {
navigation.canGoBack()
? navigation.goBack()
: navigation.replace('Tabs', { screen: 'Home' });
}}
/>
</Row>
</Column>

2
front/components/UI/MusicList.tsx
View File

@@ -194,7 +194,6 @@ function MusicListComponent({
// FlatList: Renders list efficiently, only rendering visible items.
return (
<FlatList
nestedScrollEnabled
style={styles.container}
ListHeaderComponent={headerComponent}
data={musicListState.displayedMusics}
@@ -225,7 +224,6 @@ const styles = StyleSheet.create({
flex: 1,
gap: 2,
borderRadius: 10,
overflow: 'hidden',
},
footerContainer: {
height: 60,

240
front/views/LeaderboardView.tsx
View File

@@ -29,138 +29,136 @@ const Leaderboardiew = () => {
] as const;
return (
<SafeAreaView>
<ScrollView>
<Text
style={{
fontSize: 20,
fontWeight: '500',
marginBottom: 16,
}}
>
{translate('leaderBoardHeading')}
</Text>
<Text
style={{
fontSize: 14,
fontWeight: '500',
}}
>
{translate('leaderBoardHeadingFull')}
</Text>
<View
style={{
display: 'flex',
flexDirection: 'column',
alignItems: 'flex-start',
paddingTop: 20,
flex: 1,
alignSelf: 'stretch',
}}
>
{!isPhone ? (
<View /** podium view */
style={{
display: 'flex',
flexDirection: 'row',
justifyContent: 'center',
alignItems: 'center',
alignSelf: 'stretch',
gap: 32,
paddingBottom: 10,
marginBottom: 20,
}}
>
<PodiumCard
medalColor="#AE84FB"
offset={120}
userAvatarUrl={podiumUserData[2]?.data.avatar}
userPseudo={podiumUserData[2]?.name}
userLvl={podiumUserData[2]?.data.totalScore}
/>
<PodiumCard
medalColor="#EAD93C"
offset={0}
userAvatarUrl={podiumUserData[0]?.data.avatar}
userPseudo={podiumUserData[0]?.name}
userLvl={podiumUserData[0]?.data.totalScore}
/>
<PodiumCard
medalColor="#5F74F7"
offset={60}
userAvatarUrl={podiumUserData[1]?.data.avatar}
userPseudo={podiumUserData[1]?.name}
userLvl={podiumUserData[1]?.data.totalScore}
/>
</View>
) : (
<View
style={{
display: 'flex',
flexDirection: 'column',
justifyContent: 'center',
alignItems: 'center',
alignSelf: 'stretch',
marginBottom: 20,
marginHorizontal: 10,
}}
>
<PodiumCard
medalColor="#EAD93C"
offset={0}
userAvatarUrl={podiumUserData[0]?.data.avatar}
userPseudo={podiumUserData[0]?.name}
userLvl={podiumUserData[0]?.data.totalScore}
/>
<View
style={{
display: 'flex',
flexDirection: 'row-reverse',
justifyContent: 'center',
alignItems: 'center',
gap: 64,
}}
>
<PodiumCard
medalColor="#5F74F7"
offset={0}
userAvatarUrl={podiumUserData[1]?.data.avatar}
userPseudo={podiumUserData[1]?.name}
userLvl={podiumUserData[1]?.data.totalScore}
/>
<PodiumCard
medalColor="#AE84FB"
offset={60}
userAvatarUrl={podiumUserData[2]?.data.avatar}
userPseudo={podiumUserData[2]?.name}
userLvl={podiumUserData[2]?.data.totalScore}
/>
</View>
</View>
)}
<ScrollView>
<Text
style={{
fontSize: 20,
fontWeight: '500',
marginBottom: 16,
}}
>
{translate('leaderBoardHeading')}
</Text>
<Text
style={{
fontSize: 14,
fontWeight: '500',
}}
>
{translate('leaderBoardHeadingFull')}
</Text>
<View
style={{
display: 'flex',
flexDirection: 'column',
alignItems: 'flex-start',
paddingTop: 20,
flex: 1,
alignSelf: 'stretch',
}}
>
{!isPhone ? (
<View /** podium view */
style={{
display: 'flex',
flexDirection: 'row',
justifyContent: 'center',
alignItems: 'center',
alignSelf: 'stretch',
gap: 32,
paddingBottom: 10,
marginBottom: 20,
}}
>
<PodiumCard
medalColor="#AE84FB"
offset={120}
userAvatarUrl={podiumUserData[2]?.data.avatar}
userPseudo={podiumUserData[2]?.name}
userLvl={podiumUserData[2]?.data.totalScore}
/>
<PodiumCard
medalColor="#EAD93C"
offset={0}
userAvatarUrl={podiumUserData[0]?.data.avatar}
userPseudo={podiumUserData[0]?.name}
userLvl={podiumUserData[0]?.data.totalScore}
/>
<PodiumCard
medalColor="#5F74F7"
offset={60}
userAvatarUrl={podiumUserData[1]?.data.avatar}
userPseudo={podiumUserData[1]?.name}
userLvl={podiumUserData[1]?.data.totalScore}
/>
</View>
) : (
<View
style={{
display: 'flex',
flexDirection: 'column',
justifyContent: 'center',
alignItems: 'center',
alignSelf: 'stretch',
gap: 10,
paddingRight: 10,
marginBottom: 20,
marginHorizontal: 10,
}}
>
{scoresQuery.data.slice(3, 20).map((comp, index) => (
<BoardRow
key={comp.name + index}
index={index + 4}
userAvatarUrl={comp.data.avatar}
userLvl={comp.data.totalScore}
userPseudo={comp.name}
<PodiumCard
medalColor="#EAD93C"
offset={0}
userAvatarUrl={podiumUserData[0]?.data.avatar}
userPseudo={podiumUserData[0]?.name}
userLvl={podiumUserData[0]?.data.totalScore}
/>
<View
style={{
display: 'flex',
flexDirection: 'row-reverse',
justifyContent: 'center',
alignItems: 'center',
gap: 64,
}}
>
<PodiumCard
medalColor="#5F74F7"
offset={0}
userAvatarUrl={podiumUserData[1]?.data.avatar}
userPseudo={podiumUserData[1]?.name}
userLvl={podiumUserData[1]?.data.totalScore}
/>
))}
<PodiumCard
medalColor="#AE84FB"
offset={60}
userAvatarUrl={podiumUserData[2]?.data.avatar}
userPseudo={podiumUserData[2]?.name}
userLvl={podiumUserData[2]?.data.totalScore}
/>
</View>
</View>
)}
<View
style={{
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
alignSelf: 'stretch',
gap: 10,
paddingRight: 10,
}}
>
{scoresQuery.data.slice(3, 20).map((comp, index) => (
<BoardRow
key={comp.name + index}
index={index + 4}
userAvatarUrl={comp.data.avatar}
userLvl={comp.data.totalScore}
userPseudo={comp.name}
/>
))}
</View>
</ScrollView>
</SafeAreaView>
</View>
</ScrollView>
);
};

2
front/views/MusicView.tsx
View File

@@ -1,6 +1,6 @@
import React from 'react';
import { useBreakpointValue, useTheme } from 'native-base';
import { useWindowDimensions } from 'react-native';
import { ScrollView, useWindowDimensions } from 'react-native';
import {
TabView,
SceneMap,

2
front/views/PlayView.tsx
View File

@@ -134,7 +134,7 @@ const PlayView = ({ songId }: PlayViewProps) => {
stopwatch.stop();
if (webSocket.current?.readyState != WebSocket.OPEN) {
console.warn('onEnd: Websocket not open');
navigation.dispatch(StackActions.replace('Home', {}));
navigation.replace('Tabs', { screen: 'Home' });
return;
}
webSocket.current?.send(