fix styling

djsisson · Nov 7, 2024 · a553962 · a553962
1 parent 8fbc778
commit a553962
Show file tree

Hide file tree

Showing 4 changed files with 44 additions and 20 deletions.
diff --git a/src/app/genshin/components/Character.tsx b/src/app/genshin/components/Character.tsx
@@ -1,6 +1,6 @@
 "use client";
 import { Cities, Characters } from "../data";
-import { useState, useEffect } from "react";
+import { useState, useEffect, useRef } from "react";
 import Background from "./Background";
 import Profile from "./Profile";
 import CitySelector from "./City-Selector";
@@ -13,6 +13,7 @@ export default function Character({ data }: { data: Cities }) {
   const [xdown, setXdown] = useState(0);
   const [ydown, setYdown] = useState(0);
   const [characterLoading, setCharacterLoading] = useState(true);
+  const loadingTimer = useRef<NodeJS.Timeout>(null);
 
   useEffect(() => {
     setCharacterLoading(true);
@@ -22,7 +23,7 @@ export default function Character({ data }: { data: Cities }) {
   useEffect(() => {
     const characterRef = document.getElementById(
       `icon-${currentCharacter.name}`,
-    )
+    );
     if (characterRef) {
       characterRef.scrollIntoView({
         behavior: "smooth",
@@ -32,6 +33,17 @@ export default function Character({ data }: { data: Cities }) {
     }
   }, [currentCharacter]);
 
+  useEffect(() => {
+    if (characterLoading) {
+      loadingTimer.current = setTimeout(() => {
+        setCharacterLoading(false);
+      }, 500);
+    }
+    return () => {
+      if (loadingTimer.current) clearTimeout(loadingTimer.current);
+    };
+  }, [characterLoading]);
+
   const handleTouchStart = (e: React.TouchEvent<HTMLDivElement>) => {
     setXdown(e.targetTouches[0].clientX);
     setYdown(e.targetTouches[0].clientY);
@@ -77,15 +89,25 @@ export default function Character({ data }: { data: Cities }) {
   return (
     <>
       <Background currentCity={data[currentCity].name} />
-      {currentCharacter.name && (
+      {data[currentCity].characters.map((char) => (
+        <Profile
+          key={char.name}
+          charName={char.name}
+          currentCharacter={currentCharacter.name}
+          handleTouchEnd={handleTouchEnd}
+          handleTouchStart={handleTouchStart}
+          setCharacterLoading={setCharacterLoading}
+        />
+      ))}
+      {/* {currentCharacter.name && (
         <Profile
           currentCharacter={currentCharacter.name}
           handleTouchEnd={handleTouchEnd}
           handleTouchStart={handleTouchStart}
           setCharacterLoading={setCharacterLoading}
         />
-      )}
-      <div className="absolute top-[20%] left-[35%] z-20 h-[30%] w-[30%] max-w-96 sm:left-[25%]">
+      )} */}
+      <div className="absolute left-[35%] top-[20%] z-20 h-[30%] w-[30%] max-w-96 sm:left-[25%]">
         {currentCharacter.name && <CharInfo character={currentCharacter} />}
       </div>
       <div className="flex h-full w-full flex-col justify-center">

diff --git a/src/app/genshin/components/Profile.tsx b/src/app/genshin/components/Profile.tsx
@@ -6,36 +6,38 @@ export default function Profile({
   handleTouchEnd,
   handleTouchStart,
   setCharacterLoading,
+  charName,
 }: {
   currentCharacter: string;
   handleTouchEnd: (e: React.TouchEvent<HTMLDivElement>) => void;
   handleTouchStart: (e: React.TouchEvent<HTMLDivElement>) => void;
   setCharacterLoading: React.Dispatch<React.SetStateAction<boolean>>;
+  charName: string;
 }) {
   return (
-    <div className="absolute top-0 left-0 z-20 h-svh w-svw overflow-clip">
+    <div
+      className={`absolute left-0 top-0 z-20 h-svh w-svw overflow-clip ${currentCharacter != charName && "hidden"}`}
+    >
       <Image
         onTouchEnd={(e) => handleTouchEnd(e)}
         onTouchStart={(e) => handleTouchStart(e)}
-        key={currentCharacter}
+        key={charName}
         quality={75}
-        className="left-[calc(50%-63vh)] z-0 h-svh w-auto max-w-none overflow-clip object-cover opacity-0"
+        className={`left-[calc(50%-63vh)] z-0 h-svh w-auto max-w-none overflow-clip object-cover ${currentCharacter == charName && "animate-slide-in"}`}
         style={{ inset: undefined, width: undefined, height: undefined }}
         src={
           portraits[
-            currentCharacter
-              .replace(" ", "_")
-              .toLowerCase() as keyof typeof portraits
+            charName.replace(" ", "_").toLowerCase() as keyof typeof portraits
           ]
         }
-        alt={currentCharacter}
+        alt={charName}
         fill={true}
-        priority={true}
-        onLoad={(e) => {
-          setCharacterLoading(false);
-          e.currentTarget.classList.add("animate-slide-in");
-          e.currentTarget.classList.remove("opacity-0");
-        }}
+        priority={currentCharacter == charName}
+        // onLoad={(e) => {
+        //   setCharacterLoading(false);
+        //   e.currentTarget.classList.add("animate-slide-in");
+        //   e.currentTarget.classList.remove("opacity-0");
+        // }}
         placeholder="blur"
       />
     </div>

diff --git a/src/app/global.css b/src/app/global.css
@@ -26,7 +26,7 @@
   --animate-acordian-down: animate-acordian-down 0.2s ease-out;
   --animate-acordian-up: animate-acordian-up 0.2s ease-out;
   --animate-appear-up: animate-appear-up 500ms ease-in-out;
-  --animate-slide-in: animate-slide-in 500ms ease-in-out;
+  --animate-slide-in: animate-slide-in 1000ms ease-in-out;
   --font-family-sans: var(--font-inter), sans-serif;
   --color-sidebar: hsl(var(--sidebar-background));
   --color-sidebar-foreground: hsl(var(--sidebar-foreground));

diff --git a/src/app/tilez/components/CurrentWord.tsx b/src/app/tilez/components/CurrentWord.tsx
@@ -99,7 +99,7 @@ export default function CurrentWord() {
         <div className="bg-secondary flex flex-col gap-4 rounded-lg p-4">
           <div className="text-center">Congratulations, you won!</div>
           <div className="text-center">You made {gameState.moves} moves.</div>
-          <div className="flex gap-2">
+          <div className="flex max-h-[calc(100svh-20rem)] gap-2 overflow-y-auto">
             <div className="border-secondary-foreground flex flex-col p-2">
               <div>Found words:</div>
               {gameState.found.map((x) => (