Leaderboard View (#332)

* LeaderboardView init * back scores handling * blah * add score controller * commit score on end of play * front and back fix * podium component * push the button * ill be baaack * flex css thing * pretty * migration leaderboard * feat(leaderboard): wip * feat(leaderboard): pretty * feat(leaderboard): i might be dumb * fix(leaderboard): misuse of nullable() for totalScore User validator
2023-12-04 23:37:06 +01:00
parent dc0c7fa4e7
commit 4ac6369deb
25 changed files with 516 additions and 373 deletions
@@ -0,0 +1,102 @@
+import { View } from 'react-native';
+import { Avatar, Text, useTheme } from 'native-base';
+import { getInitials } from '../UserAvatar';
+
+type BoardRowProps = {
+	userAvatarUrl: string;
+	userPseudo: string;
+	userLvl: number;
+	index: number;
+};
+
+export const BoardRow = ({ userAvatarUrl, userPseudo, userLvl, index }: BoardRowProps) => {
+	const { colors } = useTheme();
+	return (
+		<View
+			style={{
+				display: 'flex',
+				flexDirection: 'row',
+				alignItems: 'center',
+				alignSelf: 'stretch',
+				borderRadius: 8,
+				overflow: 'hidden',
+				backgroundColor: colors.coolGray[500],
+				shadowColor: 'rgba(0, 0, 0, 0.25)',
+				shadowOffset: { width: 0, height: 4 },
+				shadowOpacity: 1,
+				shadowRadius: 4,
+				height: 50,
+			}}
+		>
+			<View
+				style={{
+					height: '100%',
+					aspectRatio: 1,
+				}}
+			>
+				<Avatar
+					bg={colors.coolGray[900]}
+					source={{
+						uri: userAvatarUrl,
+					}}
+					style={{
+						flex: 1,
+						borderRadius: 0,
+					}}
+					_image={{
+						borderRadius: 0,
+					}}
+				>
+					{getInitials(userPseudo)}
+				</Avatar>
+			</View>
+
+			<Text
+				style={{
+					fontSize: 16,
+					fontStyle: 'normal',
+					flex: 1,
+					marginHorizontal: 10,
+					fontWeight: '500',
+					maxWidth: '100%',
+				}}
+				isTruncated
+				numberOfLines={2}
+			>
+				{userPseudo}
+			</Text>
+			<Text
+				style={{
+					flexShrink: 0,
+					flexGrow: 0,
+					fontSize: 16,
+					fontStyle: 'normal',
+					fontWeight: '500',
+					marginHorizontal: 10,
+				}}
+			>
+				{userLvl}
+			</Text>
+			<View
+				style={{
+					backgroundColor: 'rgba(255, 255, 255, 0.50)',
+					aspectRatio: 1,
+					height: '100%',
+					flexDirection: 'column',
+					justifyContent: 'center',
+				}}
+			>
+				<Text
+					style={{
+						fontSize: 16,
+						fontStyle: 'normal',
+						fontWeight: '500',
+						textAlign: 'center',
+					}}
+				>
+					{index}
+				</Text>
+			</View>
+		</View>
+	);
+};