fix initial lotti enimation

package.json

@@ -26,7 +26,7 @@
     "react-device-detect": "^2.2.3",
     "react-dom": "^18.2.0",
     "react-joystick-component": "^6.2.1",
-    "react-lottie": "^1.2.3",
+    "react-lottie": "^1.2.4",
     "react-nipple": "^1.0.2",
     "react-router-dom": "^6.11.1",
     "three": "^0.152.2",

src/App.jsx

@@ -20,9 +20,9 @@ import RoundButton from './components/RoundButton'
 import MapIcon from './components/Svg/MapIcon'
 import { Gameplay, usePlayerStore } from './store/index.js'
 import { MenuClosed, MenuOpen, useMenuStore } from './store'
+import ChaptersPage from './pages/Chapters'
+import MapPage from './pages/Map'
 
-const MapPage = React.lazy(() => import('./pages/Map'))
-const ChaptersPage = React.lazy(() => import('./pages/Chapters'))
 const queryClient = new QueryClient()
 
 function App() {
@@ -63,7 +63,7 @@ function App() {
   return (
     <QueryClientProvider client={queryClient}>
       <div
-        className="Lottie-animation fade-out"
+        className="Lottie-animation"
         style={{
           zIndex: '7',
           display: 'flex',
@@ -74,7 +74,7 @@ function App() {
           position: 'relative',
         }}
       >
-        <IntroLogoZoomland delay={3000} id="introLogoZoomland" />
+        <IntroLogoZoomland delay={2500} id="introLogoZoomland" hideOnComplete />
       </div>
       <GlitchingBooks />
       <div className="mapButton fill position-fixed bottom-0">
@@ -93,26 +93,12 @@ function App() {
       <Vignette></Vignette>
       <SkipIntro />
       <Endings />
-      {!isMobile ? <GameControls />: null}
+      {!isMobile ? <GameControls /> : null}
       <World isMobile={isMobile} width={window.innerWidth} height={window.innerHeight} />
       <AppRoutes>
         <Route path="/about" element={<About />} />
-        <Route
-          path="/map"
-          element={
-            <Suspense>
-              <MapPage />
-            </Suspense>
-          }
-        />
-        <Route
-          path="/chapters"
-          element={
-            <Suspense fallback={null}>
-              <ChaptersPage />
-            </Suspense>
-          }
-        />
+        <Route path="/map" element={<MapPage />} />
+        <Route path="/chapters" element={<ChaptersPage />} />
         <Route path="*" element={<></>} />
       </AppRoutes>
     </QueryClientProvider>

src/components/Chapter.jsx

@@ -52,29 +52,25 @@ const Chapter = ({ chapter }) => {
       </animated.div>
       <span style={{ color: 'var(--pale-yellow)' }}>Chapter {data?.n}</span>
       <h3 style={{ color: 'var(--pale-yellow)' }}>{data?.title}</h3>
-      <p>
-        {data?.abstract}
-        <br />
-        <Link
-          to={`/chapters?id=${chapter.id}`}
-          style={{
-            color: 'var(--pale-yellow)',
-            textDecoration: 'underline',
-            pointerEvents: 'auto',
-          }}
-        >
-          See all collected chapters
-        </Link>
-      </p>
+      <p>{data?.abstract}</p>
 
-      <div className="btn-group">
-        <RoundButton
-          // Icon={CloseIcon}
-          backgroundColor="var(--rose)"
-          color={'var(--pale-yellow)'}
+      <div className="mb-2">
+        <button
           onClick={doneCollectingChapter}
-          text={'Nice! One less to go'}
-        />
+          className="btn btn-transparent btn-link text-light pointer-events-auto"
+        >
+          Nice! One less to go
+        </button>
+      </div>
+      <div className="btn-group">
+        <Link to={`/chapters?id=${chapter.id}`} className="text-light">
+          <RoundButton
+            // Icon={CloseIcon}
+            backgroundColor="var(--rose)"
+            color={'var(--pale-yellow)'}
+            text={'Read the chapter!'}
+          />
+        </Link>
       </div>
     </>
   )

src/components/GameControls.jsx

@@ -32,7 +32,7 @@ const GameControls = () => {
     if (scene === Gameplay && !hasSeenGameControls) {
       console.debug('[GameControls] show')
 
-      hasSeenGameControlsTimerRef.current = setTimeout(() => show(), 500)
+      hasSeenGameControlsTimerRef.current = setTimeout(() => show(), 4500)
     }
     return () => {
       clearTimeout(hasSeenGameControlsTimerRef.current)

src/components/IntroLogoZoomland.jsx

@@ -2,11 +2,24 @@ import { useRef, useEffect } from 'react'
 import Lottie from 'react-lottie'
 import { useQueueStore } from '../store/preload'
 import animationData from '../assets/json/zoomland-logo.json'
+import { Gameplay, usePlayerStore } from '../store'
+import { useSpring, a } from '@react-spring/web'
 
-const IntroLogoZoomland = ({ delay = 500, width, height, startAnimation = true, id }) => {
+const IntroLogoZoomland = ({
+  delay = 500,
+  width,
+  height,
+  startAnimation = true,
+  id,
+  hideOnComplete = false,
+}) => {
   const lottieRef = useRef()
   const timerRef = useRef()
+  const [styles, api] = useSpring(() => ({
+    opacity: 0,
+  }))
   const isLoadingComplete = useQueueStore((state) => state.isLoadingComplete)
+  const scene = usePlayerStore((state) => state.scene)
 
   useEffect(() => {
     clearTimeout(timerRef.current)
@@ -16,18 +29,29 @@ const IntroLogoZoomland = ({ delay = 500, width, height, startAnimation = true,
       startAnimation,
       '\n - isLoadingComplete:',
       isLoadingComplete,
+      '\n - scene:',
+      scene,
     )
+    if (!(isLoadingComplete && startAnimation && scene === Gameplay)) {
+      return
+    }
+    api.set({
+      opacity: 1,
+    })
     timerRef.current = setTimeout(() => {
       console.debug(`[IntroLogoZoomland #${id}]`, '@useEffect times up.')
-      if (isLoadingComplete && startAnimation) {
-        lottieRef.current.stop()
-        lottieRef.current.play()
-      }
+      lottieRef.current.anim.stop()
+      lottieRef.current.anim.play()
+      hideOnComplete &&
+        api.start({
+          opacity: 0,
+          delay: 1000,
+        })
     }, delay)
     return () => {
       clearTimeout(timerRef.current)
     }
-  }, [isLoadingComplete, startAnimation])
+  }, [isLoadingComplete, startAnimation, scene, hideOnComplete])
 
   const defaultOptions = {
     loop: false,
@@ -38,6 +62,10 @@ const IntroLogoZoomland = ({ delay = 500, width, height, startAnimation = true,
     },
   }
 
-  return <Lottie width={width} height={height} options={defaultOptions} ref={lottieRef} />
+  return (
+    <a.div style={styles}>
+      <Lottie width={width} height={height} options={defaultOptions} ref={lottieRef} />
+    </a.div>
+  )
 }
 export default IntroLogoZoomland

src/components/Player.jsx

@@ -30,7 +30,6 @@ let internalDebounceTimer = null
 
 const Player = ({ isMobile = false, scale = 0.6, position = DefaultPlayerPosition }) => {
   const rigidbody = useRef()
-  const platformRef = useRef()
   const isOnFloor = useRef(true)
   const isOnFloorTimer = useRef(0)
   const character = useRef()
@@ -91,24 +90,6 @@ const Player = ({ isMobile = false, scale = 0.6, position = DefaultPlayerPositio
     return useWorldStore.subscribe((state) => (cameraOffsetRef.current = state.cameraOffset))
   }, [])
 
-  useEffect(() => {
-    return useQueueStore.subscribe((state) => {
-      console.debug(
-        '[Player] @useEffect - useQueueStore.subscribe',
-        state.loaded,
-        state.isLoadingComplete,
-      )
-      platformRef.current.setTranslation(
-        new Vector3([
-          initialPlayerPosition[0],
-          initialPlayerPosition[1] + 10,
-          initialPlayerPosition[2],
-        ]),
-        true,
-      )
-    })
-  }, [])
-
   const movePlayerWithJoystick = (state, delta, shouldStayStill, linvel) => {
     const { moveForward, moveBackward, moveLeft, moveRight, jump, sprint, speedCoeff } =
       joystickRef.current
@@ -258,21 +239,6 @@ const Player = ({ isMobile = false, scale = 0.6, position = DefaultPlayerPositio
 
   return (
     <>
-      <RigidBody
-        ref={platformRef}
-        type="fixed"
-        colliders={'cuboid'}
-        position={[
-          initialPlayerPosition[0],
-          initialPlayerPosition[1] + 0.5,
-          initialPlayerPosition[2],
-        ]}
-      >
-        <mesh>
-          <boxGeometry args={[5, 0.5, 5]} />
-          <meshStandardMaterial depthWrite={false} color={'red'} transparent={true} opacity={0} />
-        </mesh>
-      </RigidBody>
       <RigidBody
         ref={rigidbody}
         restitution={0}

src/components/Vignette.css

@@ -44,6 +44,10 @@
   font-size: var(--vignette-font-size);
 }
 
+.Vignette_subs .btn-link:hover {
+  border-color: transparent !important;
+}
+
 @media screen and (max-width: 768px) {
   .Vignette_subs {
     width: 90%;

src/index.css

@@ -75,6 +75,12 @@ a {
   color: #646cff;
   text-decoration: inherit;
 }
+.text-light {
+  color: var(--pale-yellow) !important;
+}
+.pointer-events-auto {
+  pointer-events: auto !important;
+}
 a:hover {
   color: #535bf2;
 }
@@ -87,15 +93,15 @@ body {
   min-height: 100vh;
   overflow: hidden;
   -moz-user-select: none;
-   -khtml-user-select: none;
-   -webkit-user-select: none;
+  -khtml-user-select: none;
+  -webkit-user-select: none;
 
-   /*
+  /*
      Introduced in Internet Explorer 10.
      See http://ie.microsoft.com/testdrive/HTML5/msUserSelect/
    */
-   -ms-user-select: none;
-   user-select: none;
+  -ms-user-select: none;
+  user-select: none;
 }
 
 h1 {

src/pages/Chapters.jsx

@@ -87,9 +87,7 @@ const Chapters = () => {
             asHtml
             defaultAvatar={
               selectedChapterIdx > -1
-                ? `${import.meta.env.BASE_URL || '/'}assets/cards/${
-                    data[selectedChapterIdx].id
-                  }-220w.jpg`
+                ? `assets/cards/${data[selectedChapterIdx].id}-220w.jpg`
                 : undefined
             }
             enablePrevious

yarn.lock

@@ -2271,10 +2271,10 @@ react-lifecycles-compat@^3.0.4:
   resolved "https://registry.yarnpkg.com/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz#4f1a273afdfc8f3488a8c516bfda78f872352362"
   integrity sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA==
 
-react-lottie@^1.2.3:
-  version "1.2.3"
-  resolved "https://registry.yarnpkg.com/react-lottie/-/react-lottie-1.2.3.tgz#8544b96939e088658072eea5e12d912cdaa3acc1"
-  integrity sha512-qLCERxUr8M+4mm1LU0Ruxw5Y5Fn/OmYkGfnA+JDM/dZb3oKwVAJCjwnjkj9TMHtzR2U6sMEUD3ZZ1RaHagM7kA==
+react-lottie@^1.2.4:
+  version "1.2.4"
+  resolved "https://registry.yarnpkg.com/react-lottie/-/react-lottie-1.2.4.tgz#999ccabff8afc82074588bc50bd75be6f8945161"
+  integrity sha512-kBGxI+MIZGBf4wZhNCWwHkMcVP+kbpmrLWH/SkO0qCKc7D7eSPcxQbfpsmsCo8v2KCBYjuGSou+xTqK44D/jMg==
   dependencies:
     babel-runtime "^6.26.0"
     lottie-web "^5.1.3"