add transition to from the song list to game screen

z4nr34l · Oct 29, 2023 · 2763a56 · 2763a56
1 parent acb052e
commit 2763a56
Show file tree

Hide file tree

Showing 7 changed files with 60 additions and 38 deletions.
diff --git a/src/Scenes/Game/Game.tsx b/src/Scenes/Game/Game.tsx
@@ -1,7 +1,7 @@
 import CameraManager from 'Camera/CameraManager';
 import SingASong from 'Scenes/SingASong/SingASong';
 import useFullscreen from 'hooks/useFullscreen';
-import { SingSetup } from 'interfaces';
+import { SingSetup, SongPreview } from 'interfaces';
 import { useState } from 'react';
 import { flushSync } from 'react-dom';
 import startViewTransition from 'utils/startViewTransition';
@@ -12,11 +12,11 @@ interface Props {
 }
 
 function Game(props: Props) {
-  const [singSetup, setSingSetup] = useState<(SingSetup & { songId: string; video: string }) | null>(null);
+  const [singSetup, setSingSetup] = useState<(SingSetup & { song: SongPreview }) | null>(null);
   const [preselectedSong, setPreselectedSong] = useState<string | null>(props.songId ?? null);
   const [resetKey, setResetKey] = useState(0);
 
-  const handleSelect = (setup: SingSetup & { songId: string; video: string }) => {
+  const handleSelect = (setup: SingSetup & { song: SongPreview }) => {
     // @ts-expect-error
     document.getElementById('preview-video-container')!.style.viewTransitionName = 'song-preview-video';
     startViewTransition(() => {
@@ -39,11 +39,10 @@ function Game(props: Props) {
             setResetKey((current) => current + 1);
           }}
           key={resetKey}
-          video={singSetup.video}
-          songId={singSetup.songId}
+          songPreview={singSetup.song}
           singSetup={singSetup}
           returnToSongSelection={() => {
-            setPreselectedSong(singSetup.songId);
+            setPreselectedSong(singSetup.song.id);
             setSingSetup(null);
           }}
         />

diff --git a/src/Scenes/Game/Singing/Singing.tsx b/src/Scenes/Game/Singing/Singing.tsx
@@ -5,28 +5,28 @@ import events from 'GameEvents/GameEvents';
 import PlayersManager from 'Players/PlayersManager';
 import GameState from 'Scenes/Game/Singing/GameState/GameState';
 import WaitForReadiness from 'Scenes/Game/Singing/WaitForReadiness';
+import { SongListEntryDetailsArtist, SongListEntryDetailsTitle } from 'Scenes/SingASong/SongSelection/SongCard';
 import useSong from 'Songs/hooks/useSong';
 import useBlockScroll from 'hooks/useBlockScroll';
 import useFullscreen from 'hooks/useFullscreen';
-import { GAME_MODE, SingSetup } from 'interfaces';
+import { GAME_MODE, SingSetup, SongPreview } from 'interfaces';
 import { useEffect, useMemo, useRef, useState } from 'react';
 import useViewportSize from '../../../hooks/useViewportSize';
 import generatePlayerChanges from './Helpers/generatePlayerChanges';
 import Player, { PlayerRef } from './Player';
 import PostGame from './PostGame/PostGame';
 
 interface Props {
-  video: string;
-  songId: string;
   singSetup: SingSetup;
+  songPreview: SongPreview;
   returnToSongSelection: () => void;
   restartSong: () => void;
 }
-function Singing({ video, songId, singSetup, returnToSongSelection, restartSong }: Props) {
+function Singing({ songPreview, singSetup, returnToSongSelection, restartSong }: Props) {
   useFullscreen();
   useBlockScroll();
   const player = useRef<PlayerRef | null>(null);
-  const song = useSong(songId);
+  const song = useSong(songPreview.id);
 
   const { width, height } = useViewportSize();
   const [isEnded, setIsEnded] = useState(false);
@@ -64,7 +64,9 @@ function Singing({ video, songId, singSetup, returnToSongSelection, restartSong
     return (
       <Container>
         <BackgroundContainer visible={isOverlayVisible}>
-          <Overlay video={video} width={width} height={height} />
+          <Overlay video={songPreview.video} width={width} height={height} />
+          <Artist>{songPreview.artist}</Artist>
+          <Title>{songPreview.title}</Title>
           <WaitForReadiness
             onFinish={() => {
               setIsTransitionTimeout(true);
@@ -141,4 +143,20 @@ const Overlay = (props: { video: string; width: number; height: number }) => (
   />
 );
 
+const Artist = styled(SongListEntryDetailsArtist)`
+  view-transition-name: song-preview-artist;
+  position: absolute;
+  top: 10rem;
+  left: 10rem;
+  font-size: 7rem;
+`;
+const Title = styled(SongListEntryDetailsTitle)`
+  view-transition-name: song-preview-title;
+  position: absolute;
+
+  font-size: 8rem;
+  top: 19rem;
+  left: 10rem;
+`;
+
 export default Singing;
diff --git a/src/Scenes/Game/Singing/WaitForReadiness.tsx b/src/Scenes/Game/Singing/WaitForReadiness.tsx
@@ -67,34 +67,38 @@ function WaitForReadiness({ onFinish }: Props) {
 
   return (
     <>
-      {!areAllPlayersReady && (
-        <WaitingForReady>
+      <WaitingForReady>
+        {!areAllPlayersReady && (
           <span>
             Waiting for all players to click <strong>"Ready"</strong>
           </span>
-          <PlayerList>
-            {playerStatuses.map(({ confirmed, name, player }, index) => (
-              <PlayerEntry
-                className="ph-no-capture"
-                key={index}
-                data-test="player-confirm-status"
-                data-name={name}
-                data-confirmed={confirmed}>
+        )}
+        <PlayerList>
+          {playerStatuses.map(({ confirmed, name, player }, index) => (
+            <PlayerEntry
+              className="ph-no-capture"
+              key={index}
+              data-test="player-confirm-status"
+              data-name={name}
+              data-confirmed={confirmed}>
+              {!areAllPlayersReady && (
                 <ConfirmStatus>
                   {confirmed ? <CheckCircleOutline /> : <CircularProgress color="info" size="1em" />}
-                </ConfirmStatus>{' '}
-                <SinglePlayer player={player} />
-              </PlayerEntry>
-            ))}
-          </PlayerList>
+                </ConfirmStatus>
+              )}{' '}
+              <SinglePlayer player={player} />
+            </PlayerEntry>
+          ))}
+        </PlayerList>
+        {!areAllPlayersReady && (
           <TimeoutMessage>
             The song will start automatically in{' '}
             <strong>
               <CountUp end={0} start={AUTOSTART_TIMEOUT_S} duration={AUTOSTART_TIMEOUT_S} useEasing={false} />
             </strong>
           </TimeoutMessage>
-        </WaitingForReady>
-      )}
+        )}
+      </WaitingForReady>
       <audio
         src={backgroundMusic}
         ref={audio}
@@ -135,6 +139,7 @@ const PlayerList = styled.div`
   flex-direction: column;
   gap: 5rem;
   width: 50rem;
+  view-transition-name: player-mic-check-container;
 `;
 
 const PlayerEntry = styled.div`

diff --git a/src/Scenes/SingASong/SongSelection/SongPreview.tsx b/src/Scenes/SingASong/SongSelection/SongPreview.tsx
@@ -16,7 +16,7 @@ import { ComponentProps, PropsWithChildren, useEffect, useLayoutEffect, useMemo,
 
 interface Props {
   songPreview: SongPreview;
-  onPlay: (setup: SingSetup & { songId: string; video: string }) => void;
+  onPlay: (setup: SingSetup & { song: SongPreview }) => void;
   keyboardControl: boolean;
   onExitKeyboardControl: () => void;
   top: number;

diff --git a/src/Scenes/SingASong/SongSelection/SongSelection.tsx b/src/Scenes/SingASong/SongSelection/SongSelection.tsx
@@ -18,12 +18,12 @@ import useBlockScroll from 'hooks/useBlockScroll';
 import { REGULAR_ALPHA_CHARS } from 'hooks/useKeyboard';
 import usePrevious from 'hooks/usePrevious';
 import useViewportSize from 'hooks/useViewportSize';
-import { SingSetup } from 'interfaces';
+import { SingSetup, SongPreview as SongPreviewEntity } from 'interfaces';
 import { memo, useCallback, useEffect, useRef, useState } from 'react';
 import { useHotkeys } from 'react-hotkeys-hook';
 
 interface Props {
-  onSongSelected: (songSetup: SingSetup & { songId: string; video: string }) => void;
+  onSongSelected: (songSetup: SingSetup & { song: SongPreviewEntity }) => void;
   preselectedSong: string | null;
 }
 

diff --git a/src/Scenes/SingASong/SongSelection/SongSettings/MicCheck.tsx b/src/Scenes/SingASong/SongSelection/SongSettings/MicCheck.tsx
@@ -6,9 +6,9 @@ import PlayersManager from 'Players/PlayersManager';
 import InputManager from 'Scenes/Game/Singing/Input/InputManager';
 import NoiseDetection from 'Scenes/SingASong/SongSelection/SongSettings/MicCheck/NoiseDetection';
 import SinglePlayer from 'Scenes/SingASong/SongSelection/SongSettings/MicCheck/SinglePlayer';
-import { useEffect } from 'react';
+import { ComponentProps, useEffect } from 'react';
 
-export default function MicCheck() {
+export default function MicCheck(props: ComponentProps<typeof Container>) {
   // Force update when the name changes
   useEventListener(events.playerNameChanged);
 
@@ -20,7 +20,7 @@ export default function MicCheck() {
   const isSetup = inputs.some((input) => input.source !== 'Dummy');
 
   return (
-    <Container>
+    <Container {...props}>
       <MicChecksContainer>
         Microphone Check
         {isSetup ? (

diff --git a/src/Scenes/SingASong/SongSelection/SongSettings/SongSettings.tsx b/src/Scenes/SingASong/SongSelection/SongSettings/SongSettings.tsx
@@ -8,7 +8,7 @@ import { useState } from 'react';
 
 interface Props {
   songPreview: SongPreview;
-  onPlay: (setup: SingSetup & { songId: string; video: string }) => void;
+  onPlay: (setup: SingSetup & { song: SongPreview }) => void;
   keyboardControl: boolean;
   onExitKeyboardControl: () => void;
 }
@@ -28,11 +28,11 @@ export default function SongSettings({ songPreview, onPlay, keyboardControl, onE
       players: players,
     };
     events.songStarted.dispatch(songPreview, finalSetup);
-    onPlay({ songId: songPreview.id, video: songPreview.video, ...finalSetup });
+    onPlay({ song: songPreview, ...finalSetup });
   };
   return (
     <Container>
-      <MicCheck />
+      <MicCheck style={step === 'players' ? { viewTransitionName: 'player-mic-check-container' } : undefined} />
       <GameConfiguration>
         {step === 'song' && (
           <GameSettings