diff --git a/src/components/dev/DevTimeStamp/DevTimeStamp.scss b/src/components/dev/DevTimeStamp/DevTimeStamp.scss new file mode 100644 index 00000000..06410498 --- /dev/null +++ b/src/components/dev/DevTimeStamp/DevTimeStamp.scss @@ -0,0 +1,15 @@ +.DevTimeStamp { + color: #888888; + position: fixed; + width: 100%; + top: 0.5em; + font-size: 11px; + pointer-events: none; + z-index: 999; + + span { + display: block; + width: fit-content; + margin: auto; + } +} diff --git a/src/components/dev/DevTimeStamp/index.tsx b/src/components/dev/DevTimeStamp/index.tsx new file mode 100644 index 00000000..4c02c800 --- /dev/null +++ b/src/components/dev/DevTimeStamp/index.tsx @@ -0,0 +1,51 @@ +import { useContext, useEffect, useState } from 'react'; +import './DevTimeStamp.scss' +import SettingsContext from '@/contexts/SettingsContext/context'; + +const getTimeStampFormatted = (rawTimestamp: number) => { + + const timestamp = new Date(rawTimestamp) + + const year = timestamp.getFullYear(); + + // Months are zero-indexed + const month = (timestamp.getMonth() + 1).toString().padStart(2, '0'); + const day = timestamp.getDate().toString().padStart(2, '0'); + const hours = timestamp.getHours().toString().padStart(2, '0'); + const minutes = timestamp.getMinutes().toString().padStart(2, '0'); + const seconds = timestamp.getSeconds().toString().padStart(2, '0'); + + const timeZone = new Intl.DateTimeFormat('en', { timeZoneName: 'short' }).formatToParts(timestamp).find(part => part.type === 'timeZoneName')!.value; + + const formattedDateTime = `${year}-${month}-${day} ${hours}:${minutes}:${seconds} ${timeZone}`; + + return formattedDateTime + +} + +const DevTimeStamp = () => { + const [timestamp, setTimestamp] = useState(Date.now()) + const {isDevModeEnabled} = useContext(SettingsContext) + + useEffect(() => { + if(isDevModeEnabled) { + const intervalId = setInterval(() => { + setTimestamp(Date.now()) + }, 250) + + return () => clearInterval(intervalId) + } + }, [setTimestamp, isDevModeEnabled]) + + if (!isDevModeEnabled) { + return null; + } + + return ( +
+ {getTimeStampFormatted(timestamp)} +
+ ) +} + +export default DevTimeStamp; diff --git a/src/main.tsx b/src/main.tsx index c50b86a3..3ffa6f0f 100644 --- a/src/main.tsx +++ b/src/main.tsx @@ -16,6 +16,7 @@ import { initSentry } from '@/utils/sentry' import { Modals } from './Modals' import './index.css' +import DevTimeStamp from './components/dev/DevTimeStamp' polyfill() initSentry() @@ -50,6 +51,7 @@ ReactDOM.createRoot(document.getElementById('root')!).render( +