Application Android et IOS pour l'amicale des élèves https://play.google.com/store/apps/details?id=fr.amicaleinsat.application
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

GameStatus.tsx 2.4KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596
  1. import React from 'react';
  2. import { StyleSheet, View } from 'react-native';
  3. import { Caption, Text, useTheme } from 'react-native-paper';
  4. import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
  5. import GENERAL_STYLES from '../../../constants/Styles';
  6. import i18n from 'i18n-js';
  7. type Props = {
  8. time: number;
  9. level: number;
  10. };
  11. const styles = StyleSheet.create({
  12. centerSmallMargin: {
  13. ...GENERAL_STYLES.centerHorizontal,
  14. marginBottom: 5,
  15. },
  16. centerBigMargin: {
  17. marginLeft: 'auto',
  18. marginRight: 'auto',
  19. marginBottom: 20,
  20. },
  21. statusContainer: {
  22. flexDirection: 'row',
  23. },
  24. statusIcon: {
  25. marginLeft: 5,
  26. },
  27. });
  28. function getFormattedTime(seconds: number): string {
  29. const date = new Date();
  30. date.setHours(0);
  31. date.setMinutes(0);
  32. date.setSeconds(seconds);
  33. let format;
  34. if (date.getHours()) {
  35. format = `${date.getHours()}:${date.getMinutes()}:${date.getSeconds()}`;
  36. } else if (date.getMinutes()) {
  37. format = `${date.getMinutes()}:${date.getSeconds()}`;
  38. } else {
  39. format = date.getSeconds().toString();
  40. }
  41. return format;
  42. }
  43. function GameStatus(props: Props) {
  44. const theme = useTheme();
  45. return (
  46. <View
  47. style={{
  48. ...GENERAL_STYLES.flex,
  49. ...GENERAL_STYLES.centerVertical,
  50. }}
  51. >
  52. <View style={GENERAL_STYLES.centerHorizontal}>
  53. <Caption style={styles.centerSmallMargin}>
  54. {i18n.t('screens.game.time')}
  55. </Caption>
  56. <View style={styles.statusContainer}>
  57. <MaterialCommunityIcons
  58. name={'timer'}
  59. color={theme.colors.subtitle}
  60. size={20}
  61. />
  62. <Text
  63. style={{
  64. ...styles.statusIcon,
  65. color: theme.colors.subtitle,
  66. }}
  67. >
  68. {getFormattedTime(props.time)}
  69. </Text>
  70. </View>
  71. </View>
  72. <View style={styles.centerBigMargin}>
  73. <Caption style={styles.centerSmallMargin}>
  74. {i18n.t('screens.game.level')}
  75. </Caption>
  76. <View style={styles.statusContainer}>
  77. <MaterialCommunityIcons
  78. name={'gamepad-square'}
  79. color={theme.colors.text}
  80. size={20}
  81. />
  82. <Text style={styles.statusIcon}>{props.level}</Text>
  83. </View>
  84. </View>
  85. </View>
  86. );
  87. }
  88. export default React.memo(
  89. GameStatus,
  90. (pp, np) => pp.level === np.level && pp.time === np.time
  91. );