Update SiteTransitionOverlay.tsx
This commit is contained in:
@@ -16,16 +16,15 @@ const DIALOGUE_FALLBACK_TIMEOUT_MS = 12000;
|
|||||||
const NO_DIALOGUE_FALLBACK_MS = 3000;
|
const NO_DIALOGUE_FALLBACK_MS = 3000;
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Transition overlay: black screen, logo fade-in, transition dialogue
|
* Transition overlay: black screen with transition dialogue and subtitles,
|
||||||
* with subtitles, then redirect to /. A safety timeout guarantees the
|
* then redirect to /. A safety timeout guarantees the redirect happens even if
|
||||||
* redirect happens even if the dialogue audio fails to fire `ended`.
|
* the dialogue audio fails to fire `ended`.
|
||||||
*/
|
*/
|
||||||
export function SiteTransitionOverlay(): React.JSX.Element {
|
export function SiteTransitionOverlay(): React.JSX.Element {
|
||||||
const navigate = useNavigate();
|
const navigate = useNavigate();
|
||||||
const reset = useSiteStore((state) => state.reset);
|
const reset = useSiteStore((state) => state.reset);
|
||||||
const prefersReducedMotion = usePrefersReducedMotion();
|
const prefersReducedMotion = usePrefersReducedMotion();
|
||||||
const [screenOpacity, setScreenOpacity] = useState(0);
|
const [screenOpacity, setScreenOpacity] = useState(0);
|
||||||
const [logoOpacity, setLogoOpacity] = useState(0);
|
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
setSiteVisited();
|
setSiteVisited();
|
||||||
@@ -37,13 +36,11 @@ export function SiteTransitionOverlay(): React.JSX.Element {
|
|||||||
// initial frame at opacity 0 before flipping to 1.
|
// initial frame at opacity 0 before flipping to 1.
|
||||||
const fadeInId = window.setTimeout(() => {
|
const fadeInId = window.setTimeout(() => {
|
||||||
setScreenOpacity(1);
|
setScreenOpacity(1);
|
||||||
setLogoOpacity(1);
|
|
||||||
}, 0);
|
}, 0);
|
||||||
timeoutIds.push(fadeInId);
|
timeoutIds.push(fadeInId);
|
||||||
|
|
||||||
const redirectToGame = (): void => {
|
const redirectToGame = (): void => {
|
||||||
if (isCancelled) return;
|
if (isCancelled) return;
|
||||||
setLogoOpacity(0);
|
|
||||||
const id = window.setTimeout(() => {
|
const id = window.setTimeout(() => {
|
||||||
if (isCancelled) return;
|
if (isCancelled) return;
|
||||||
reset();
|
reset();
|
||||||
@@ -119,23 +116,6 @@ export function SiteTransitionOverlay(): React.JSX.Element {
|
|||||||
transition: fadeTransition,
|
transition: fadeTransition,
|
||||||
}}
|
}}
|
||||||
/>
|
/>
|
||||||
<img
|
|
||||||
src="/assets/logo/logo.jpg"
|
|
||||||
alt="Logo Altera"
|
|
||||||
style={{
|
|
||||||
position: "relative",
|
|
||||||
zIndex: 1,
|
|
||||||
width: "min(300px, 45vw)",
|
|
||||||
height: "auto",
|
|
||||||
objectFit: "contain",
|
|
||||||
opacity: logoOpacity,
|
|
||||||
transition: fadeTransition,
|
|
||||||
transitionDelay:
|
|
||||||
!prefersReducedMotion && logoOpacity === 1
|
|
||||||
? `${FADE_DURATION_MS}ms`
|
|
||||||
: "0ms",
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
{/* Subtitles must live inside this overlay's stacking context
|
{/* Subtitles must live inside this overlay's stacking context
|
||||||
(z-index 1000) so they render above the black screen. The
|
(z-index 1000) so they render above the black screen. The
|
||||||
<Subtitles /> in SiteLayout sits behind this overlay. */}
|
<Subtitles /> in SiteLayout sits behind this overlay. */}
|
||||||
|
|||||||
Reference in New Issue
Block a user