🚧 bun run test

wappon28dev · Nov 9, 2024 · 5e7e606 · 5e7e606
1 parent a7ed17d
commit 5e7e606
Show file tree

Hide file tree

Showing 4 changed files with 14 additions and 15 deletions.
diff --git a/src/assets/animations/logoanimation.json → src/assets/animations/logo.json b/src/assets/animations/logoanimation.json → src/assets/animations/logo.json
diff --git a/src/components/LogoAnimation.tsx b/src/components/LogoAnimation.tsx
@@ -1,7 +1,7 @@
 import { VStack } from "panda/jsx";
 import { type ReactElement } from "react";
 import LottiePlayer from "./LottiePlayer";
-import logoAnimation from "@/assets/animations/logoAnimation.json";
+import logoAnimation from "@/assets/animations/logo.json";
 
 export function LogoAnimation(): ReactElement {
   return (

diff --git a/src/components/LottiePlayer.tsx b/src/components/LottiePlayer.tsx
@@ -23,7 +23,7 @@ export default function LottiePlayer({
   const _stopAtEnd = stopAtEnd ?? false;
 
   useEffect(() => {
-    if (_stopAtEnd && lottieState) {
+    if (_stopAtEnd && lottieState != null) {
       const lastFrame = lottieState.totalFrames - 1;
 
       lottieState.addEventListener("complete", () => {
@@ -44,11 +44,11 @@ export default function LottiePlayer({
   return (
     <p.div h="100%" overflow="hidden" w="auto">
       <Player
+        loop={!_stopAtEnd}
         lottieRef={(instance) => {
           setLottieState(instance);
         }}
         onEvent={eventHandler}
-        loop={!_stopAtEnd}
         style={{
           height: "100%",
         }}

diff --git a/src/routes/index.tsx b/src/routes/index.tsx
@@ -7,9 +7,9 @@ import headerLeft from "@/assets/svg/background/header-left.svg";
 import headerRight from "@/assets/svg/background/header-right.svg";
 import wakaba from "@/assets/svg/background/wakaba.svg";
 import wakabaIcon from "@/assets/svg/icon/wakaba.svg";
+import { LogoAnimation } from "@/components/LogoAnimation";
 import { Button } from "@/components/cva/Button";
 import { Expanded } from "@/components/cva/Expanded";
-import { LogoAnimation } from "@/components/LogoAnimation";
 
 export const Route = createFileRoute("/")({
   component: () => {
@@ -61,14 +61,13 @@ export const Route = createFileRoute("/")({
           backgroundColor="white"
           display="grid"
           duration="1000"
-          slideInX="-10"
           height={{
             base: "50vh",
             sm: "50vh",
-
             lg: "50vh",
             xl: "50vh",
           }}
+          slideInX="-10"
           style={{
             position: "relative",
             backgroundImage: `url("${headerLeft}")`,
@@ -79,8 +78,8 @@ export const Route = createFileRoute("/")({
         >
           <p.div
             fadeIn="8"
-            slideInX="20"
             position="relative"
+            slideInX="20"
             style={{
               position: "relative",
               backgroundImage: `url("${headerRight}")`,
@@ -90,16 +89,16 @@ export const Route = createFileRoute("/")({
             }}
           >
             <p.div
-              slideInX="-10"
-              placeItems="center"
-              m="0 auto"
+              bottom="0"
               height="100%"
-              verticalAlign="middle"
-              position="absolute"
               left="0"
-              right="0"
-              bottom="0"
+              m="0 auto"
               margin="auto"
+              placeItems="center"
+              position="absolute"
+              right="0"
+              slideInX="-10"
+              verticalAlign="middle"
             >
               <LogoAnimation />
             </p.div>
@@ -110,9 +109,9 @@ export const Route = createFileRoute("/")({
           ref={ref1}
           display="grid"
           fadeIn="2"
-          slideInX="100"
           height={{ base: "400px", sm: "600px", lg: "40vh", xl: "60vh" }}
           placeItems="center"
+          slideInX="100"
           style={{
             backgroundImage: `url("${wakabaIcon}"), url("${decorationRight}")`,
             backgroundSize: "auto 15%, auto 15%",