102 lines
2.7 KiB
TypeScript
102 lines
2.7 KiB
TypeScript
import { Column, Row, Text, useTheme } from 'native-base';
|
|
import ButtonBase from './UI/ButtonBase';
|
|
import { Translate, TranslationKey, translate } from '../i18n/i18n';
|
|
import { Play, Star1 } from 'iconsax-react-native';
|
|
import { useNavigation } from '../Navigation';
|
|
|
|
type ScoreModalProps = {
|
|
songId: number;
|
|
overallScore: number;
|
|
precision: number;
|
|
score: {
|
|
missed: number;
|
|
good: number;
|
|
great: number;
|
|
perfect: number;
|
|
wrong: number;
|
|
max_score: number;
|
|
current_streak: number;
|
|
max_streak: number;
|
|
};
|
|
};
|
|
|
|
const ScoreModal = (props: ScoreModalProps) => {
|
|
const navigation = useNavigation();
|
|
const theme = useTheme();
|
|
const score = (props.overallScore * 100) / props.score.max_score;
|
|
const column1 = {
|
|
perfect: [props.score.perfect, 'primary'],
|
|
great: [props.score.great, 'secondary'],
|
|
good: [props.score.good, 'success'],
|
|
} as const;
|
|
const column2 = {
|
|
bestStreak: [props.score.max_streak, 'notification'],
|
|
missed: [props.score.missed, 'alert'],
|
|
wrong: [props.score.wrong, 'error'],
|
|
} as const;
|
|
|
|
return (
|
|
<Column w="xl" space={4} style={{ alignItems: 'center' }}>
|
|
<Row space={2} style={{ justifyContent: 'center' }}>
|
|
{[1, 2, 3].map((index) => (
|
|
<Star1
|
|
color={theme.colors.primary[500]}
|
|
key={index}
|
|
variant={score >= (index * 100) / 4 ? 'Bold' : 'Outline'}
|
|
/>
|
|
))}
|
|
</Row>
|
|
<Text fontSize="3xl">{Math.max(score, 0).toFixed(2)}%</Text>
|
|
<Row w="100%" style={{ justifyContent: 'space-between' }}>
|
|
<Translate translationKey="precision" />
|
|
<Text>{props.precision}%</Text>
|
|
</Row>
|
|
<Row w="100%" space={2}>
|
|
{([column1, column2] as const).map((column, columnIndex) => (
|
|
<Column w="50%" space={2} key={columnIndex}>
|
|
{Object.entries(column).map(([key, [value, color]]) => {
|
|
const translationKey = key as TranslationKey;
|
|
|
|
return (
|
|
<Row
|
|
key={translationKey}
|
|
style={{ justifyContent: 'space-between' }}
|
|
>
|
|
<Translate
|
|
translationKey={translationKey}
|
|
fontWeight={'bold'}
|
|
color={`${color}.500`}
|
|
/>
|
|
<Text>x{value}</Text>
|
|
</Row>
|
|
);
|
|
})}
|
|
</Column>
|
|
))}
|
|
</Row>
|
|
<Row w="100%" style={{ justifyContent: 'space-between' }}>
|
|
<ButtonBase
|
|
style={{}}
|
|
icon={Play}
|
|
type="outlined"
|
|
title={translate('playAgain')}
|
|
onPress={() => navigation.replace('Play', { songId: props.songId })}
|
|
/>
|
|
<ButtonBase
|
|
style={{}}
|
|
icon={Play}
|
|
type="filled"
|
|
title={translate('menuMusic')}
|
|
onPress={() => {
|
|
navigation.canGoBack()
|
|
? navigation.goBack()
|
|
: navigation.replace('Tabs', { screen: 'Home' });
|
|
}}
|
|
/>
|
|
</Row>
|
|
</Column>
|
|
);
|
|
};
|
|
|
|
export default ScoreModal;
|