ynerant/traintrape-moi
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

La bannière de pénalité tient compte des vraies données et est animée

Browse Source
This commit is contained in:
Emmy D'Anello 2024-12-12 19:10:21 +01:00
parent 9543177db6
commit 291e7ff8a7
Signed by: ynerant
GPG Key ID: 3A75C55819C8CF85
1 changed files with 37 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

45
client/components/PenalyBanner.tsx
View File

@ -1,20 +1,49 @@
import { FontAwesome6 } from "@expo/vector-icons";
import { View } from "react-native";
import { Banner, MD3Colors, ProgressBar, Text } from "react-native-paper";
import { useGame } from "@/hooks/useGame"
import { FontAwesome6 } from "@expo/vector-icons"
import { useEffect, useMemo, useState } from "react"
import { View } from "react-native"
import { Banner, MD3Colors, ProgressBar, Text } from "react-native-paper"
export default function PenaltyBanner() {
const game = useGame()
const penaltyEnd = game.penaltyEnd
const hasPenalty = penaltyEnd !== null
const penaltyEndDate = useMemo(() => new Date(penaltyEnd || 0), [penaltyEnd])
const penaltyEndPretty = penaltyEndDate.toLocaleTimeString(undefined, { hour: '2-digit', minute: '2-digit' })
const [remainingTime, setRemainingTime] = useState(0)
const prettyRemainingTime = useMemo(() => `${Math.floor(remainingTime / 60).toString().padStart(2, '0')}:${Math.floor(remainingTime % 60).toString().padStart(2, '0')}`, [remainingTime])
const iconName = useMemo(() => {
switch (Math.abs(remainingTime % 4)) {
case 0: return 'hourglass-empty'
case 1: return 'hourglass-end'
case 2: return 'hourglass-half'
case 3: return 'hourglass-start'
}
}, [remainingTime])
useEffect(() => {
if (!hasPenalty)
return
const interval = setInterval(() => setRemainingTime(Math.floor((penaltyEndDate.getTime() - new Date().getTime()) / 1000)), 1000)
return () => clearInterval(interval)
}, [hasPenalty, penaltyEndDate])
return (
<View>
<Banner
visible={true}
icon={({ size }) => <FontAwesome6 name='hourglass-half' size={size} color={MD3Colors.tertiary80} />}
visible={hasPenalty}
icon={({ size }) => <FontAwesome6 name={iconName} size={size} color={MD3Colors.tertiary80} />}
style={{ backgroundColor: MD3Colors.primary30 }}>
<View>
<Text variant='titleMedium'>Vous avez actuellement une pénalité jusqu'à 18h45.</Text>
<Text variant='titleSmall'>Temps restant : 14:43</Text>
<Text variant='titleMedium'>Vous avez actuellement une pénalité jusqu'à {penaltyEndPretty}.</Text>
<Text variant='titleSmall'>Temps restant : {prettyRemainingTime}</Text>
</View>
</Banner>
<ProgressBar animatedValue={0.67} color={MD3Colors.error40} style={{ height: 6 }} />
<ProgressBar
visible={hasPenalty}
animatedValue={1 - remainingTime / (3 * 60)}
color={MD3Colors.error40}
style={{ height: 6 }} />
</View>
)
}