forked from vergnet/application-amicale
81 lines
2 KiB
TypeScript
81 lines
2 KiB
TypeScript
import React from 'react';
|
|
import { View } from 'react-native';
|
|
import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
|
|
import i18n from 'i18n-js';
|
|
import { Text, useTheme } from 'react-native-paper';
|
|
import { StyleSheet } from 'react-native';
|
|
import GENERAL_STYLES from '../../../constants/Styles';
|
|
|
|
type Props = {
|
|
score: number;
|
|
highScore?: number;
|
|
};
|
|
|
|
const styles = StyleSheet.create({
|
|
scoreMainContainer: {
|
|
marginTop: 10,
|
|
marginBottom: 10,
|
|
},
|
|
scoreCurrentContainer: {
|
|
flexDirection: 'row',
|
|
marginLeft: 'auto',
|
|
marginRight: 'auto',
|
|
},
|
|
scoreText: {
|
|
marginLeft: 5,
|
|
fontSize: 20,
|
|
},
|
|
scoreBestContainer: {
|
|
flexDirection: 'row',
|
|
marginLeft: 'auto',
|
|
marginRight: 'auto',
|
|
marginTop: 5,
|
|
},
|
|
centerVerticalSmallMargin: {
|
|
...GENERAL_STYLES.centerVertical,
|
|
marginLeft: 5,
|
|
},
|
|
});
|
|
|
|
function GameScore(props: Props) {
|
|
const { score, highScore } = props;
|
|
const theme = useTheme();
|
|
const displayHighScore =
|
|
highScore == null || score > highScore ? score : highScore;
|
|
return (
|
|
<View style={styles.scoreMainContainer}>
|
|
<View style={styles.scoreCurrentContainer}>
|
|
<Text style={styles.scoreText}>
|
|
{i18n.t('screens.game.score', { score: score })}
|
|
</Text>
|
|
<MaterialCommunityIcons
|
|
name="star"
|
|
color={theme.colors.tetrisScore}
|
|
size={20}
|
|
style={styles.centerVerticalSmallMargin}
|
|
/>
|
|
</View>
|
|
<View style={styles.scoreBestContainer}>
|
|
<Text
|
|
style={{
|
|
...styles.scoreText,
|
|
color: theme.colors.textDisabled,
|
|
}}
|
|
>
|
|
{i18n.t('screens.game.highScore', { score: displayHighScore })}
|
|
</Text>
|
|
<MaterialCommunityIcons
|
|
name="star"
|
|
color={theme.colors.tetrisScore}
|
|
size={10}
|
|
style={styles.centerVerticalSmallMargin}
|
|
/>
|
|
</View>
|
|
</View>
|
|
);
|
|
}
|
|
|
|
export default React.memo(
|
|
GameScore,
|
|
(pp, np) => pp.highScore === np.highScore && pp.score === np.score
|
|
);
|