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

feat(leaderboard): i might be dumb

Browse Source
This commit is contained in:
danis
2023-11-30 13:34:20 +01:00
parent 46d5614e4c
commit df682327d6
3 changed files with 114 additions and 108 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -13,7 +13,7 @@ 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: 'main', title: 'menuLeaderBoard', icon: Cup, link: 'Leaderboard' },
{ type: 'sub', title: 'menuSettings', icon: Setting2, link: 'Settings' },
] as const;

2
front/views/HomeView.tsx
View File

@@ -122,7 +122,7 @@ const HomeView = (props: RouteProps<{}>) => {
translate={{ translationKey: 'leaderboardTitle' }}
colorScheme="primary"
size="sm"
onPress={() => navigation.navigate('Leaderboard')}
onPress={() => navigation.navigate('Leaderboard', {})}
/>
<TextButton
label={'V2'}

218
front/views/LeaderboardView.tsx
View File

@@ -1,11 +1,11 @@
import { Box, Heading, useBreakpointValue, ScrollView, Text } from 'native-base';
import { useBreakpointValue, ScrollView, Text } from 'native-base';
import { View, Image } from 'react-native';
import { useQuery } from '../Queries';
import API from '../API';
import { Ionicons } from '@expo/vector-icons';
import { LoadingView } from '../components/Loading';
import { useNavigation } from '../Navigation';
import { useNavigation, RouteProps } from '../Navigation';
import { MedalStar } from 'iconsax-react-native';
import ScaffoldCC from '../components/UI/ScaffoldCC';
type PodiumCardProps = {
offset: number;
@@ -175,7 +175,7 @@ const BoardRowComponent = ({ userAvatarUrl, userPseudo, userLvl, index }: BoardR
);
};
const Leaderboardiew = () => {
const Leaderboardiew = (props: RouteProps<{}>) => {
const navigation = useNavigation();
const scoresQuery = useQuery(API.getTopTwentyPlayers());
const screenSize = useBreakpointValue({ base: 'small', md: 'big' });
@@ -186,107 +186,43 @@ const Leaderboardiew = () => {
return <></>;
}
if (scoresQuery.data === undefined) {
return <LoadingView />;
return (
<ScaffoldCC routeName={props.route.name}>
<LoadingView />
</ScaffoldCC>
);
}
return (
<ScrollView style={{ marginBottom: 5 }}>
<View
style={{
display: 'flex',
flexDirection: 'column',
alignItems: 'flex-start',
flex: 1,
flexGrow: 1,
flexShrink: 0,
flexBasis: 0,
alignSelf: 'stretch',
}}
>
{!isPhone ? (
<View /** podium view */
style={{
display: 'flex',
flexDirection: 'row',
justifyContent: 'center',
alignItems: 'center',
alignSelf: 'stretch',
paddingBottom: 10,
marginBottom: 20,
}}
>
<PodiumCardComponent
medalColor="#AE84FB"
offset={80}
userAvatarUrl={
scoresQuery.data?.at(2)?.data.avatar ??
'https://picsum.photos/140/140'
}
userPseudo={scoresQuery.data?.at(2)?.name ?? '---'}
userLvl={scoresQuery.data?.at(2)?.data.totalScore ?? 42}
/>
<PodiumCardComponent
medalColor="#EAD93C"
offset={0}
userAvatarUrl={
scoresQuery.data?.at(0)?.data.avatar ??
'https://picsum.photos/140/140'
}
userPseudo={scoresQuery.data?.at(0)?.name ?? '---'}
userLvl={scoresQuery.data?.at(0)?.data.totalScore ?? 42}
/>
<PodiumCardComponent
medalColor="#5F74F7"
offset={60}
userAvatarUrl={
scoresQuery.data?.at(1)?.data.avatar ??
'https://picsum.photos/140/140'
}
userPseudo={scoresQuery.data?.at(1)?.name ?? '---'}
userLvl={scoresQuery.data?.at(1)?.data.totalScore ?? 42}
/>
</View>
) : (
<View
style={{
display: 'flex',
flexDirection: 'column',
justifyContent: 'center',
alignItems: 'center',
alignSelf: 'stretch',
}}
>
<PodiumCardComponent
medalColor="#AE84FB"
offset={80}
userAvatarUrl={
scoresQuery.data?.at(0)?.data.avatar ??
'https://picsum.photos/140/140'
}
userPseudo={scoresQuery.data?.at(0)?.name ?? '---'}
userLvl={scoresQuery.data?.at(0)?.data.totalScore ?? 42}
/>
<View
<ScaffoldCC routeName={props.route.name}>
<ScrollView style={{ marginBottom: 5 }}>
<View
style={{
display: 'flex',
flexDirection: 'column',
alignItems: 'flex-start',
flex: 1,
flexGrow: 1,
flexShrink: 0,
flexBasis: 0,
alignSelf: 'stretch',
}}
>
{!isPhone ? (
<View /** podium view */
style={{
display: 'flex',
flexDirection: 'row',
justifyContent: 'center',
alignItems: 'center',
alignSelf: 'stretch',
paddingBottom: 10,
marginBottom: 20,
}}
>
<PodiumCardComponent
medalColor="#EAD93C"
offset={0}
userAvatarUrl={
scoresQuery.data?.at(1)?.data.avatar ??
'https://picsum.photos/140/140'
}
userPseudo={scoresQuery.data?.at(1)?.name ?? '---'}
userLvl={scoresQuery.data?.at(1)?.data.totalScore ?? 42}
/>
<PodiumCardComponent
medalColor="#5F74F7"
offset={60}
medalColor="#AE84FB"
offset={80}
userAvatarUrl={
scoresQuery.data?.at(2)?.data.avatar ??
'https://picsum.photos/140/140'
@@ -294,19 +230,89 @@ const Leaderboardiew = () => {
userPseudo={scoresQuery.data?.at(2)?.name ?? '---'}
userLvl={scoresQuery.data?.at(2)?.data.totalScore ?? 42}
/>
<PodiumCardComponent
medalColor="#EAD93C"
offset={0}
userAvatarUrl={
scoresQuery.data?.at(0)?.data.avatar ??
'https://picsum.photos/140/140'
}
userPseudo={scoresQuery.data?.at(0)?.name ?? '---'}
userLvl={scoresQuery.data?.at(0)?.data.totalScore ?? 42}
/>
<PodiumCardComponent
medalColor="#5F74F7"
offset={60}
userAvatarUrl={
scoresQuery.data?.at(1)?.data.avatar ??
'https://picsum.photos/140/140'
}
userPseudo={scoresQuery.data?.at(1)?.name ?? '---'}
userLvl={scoresQuery.data?.at(1)?.data.totalScore ?? 42}
/>
</View>
</View>
)}
{scoresQuery.data.slice(3).map((comp: any, index: number) => (
<BoardRowComponent
index={index}
userAvatarUrl={comp?.avatar ?? 'https://picsum.photos/50/50'}
userLvl={comp?.data.totalScore ?? 42}
userPseudo={comp?.name ?? '---'}
/>
))}
</View>
</ScrollView>
) : (
<View
style={{
display: 'flex',
flexDirection: 'column',
justifyContent: 'center',
alignItems: 'center',
alignSelf: 'stretch',
}}
>
<PodiumCardComponent
medalColor="#AE84FB"
offset={80}
userAvatarUrl={
scoresQuery.data?.at(0)?.data.avatar ??
'https://picsum.photos/140/140'
}
userPseudo={scoresQuery.data?.at(0)?.name ?? '---'}
userLvl={scoresQuery.data?.at(0)?.data.totalScore ?? 42}
/>
<View
style={{
display: 'flex',
flexDirection: 'row',
justifyContent: 'center',
alignItems: 'center',
}}
>
<PodiumCardComponent
medalColor="#EAD93C"
offset={0}
userAvatarUrl={
scoresQuery.data?.at(1)?.data.avatar ??
'https://picsum.photos/140/140'
}
userPseudo={scoresQuery.data?.at(1)?.name ?? '---'}
userLvl={scoresQuery.data?.at(1)?.data.totalScore ?? 42}
/>
<PodiumCardComponent
medalColor="#5F74F7"
offset={60}
userAvatarUrl={
scoresQuery.data?.at(2)?.data.avatar ??
'https://picsum.photos/140/140'
}
userPseudo={scoresQuery.data?.at(2)?.name ?? '---'}
userLvl={scoresQuery.data?.at(2)?.data.totalScore ?? 42}
/>
</View>
</View>
)}
{scoresQuery.data.slice(3).map((comp: any, index: number) => (
<BoardRowComponent
index={index}
userAvatarUrl={comp?.avatar ?? 'https://picsum.photos/50/50'}
userLvl={comp?.data.totalScore ?? 42}
userPseudo={comp?.name ?? '---'}
/>
))}
</View>
</ScrollView>
</ScaffoldCC>
);
};