update genshin image visibility

djsisson · Nov 7, 2024 · b480590 · b480590
1 parent fc05d3f
commit b480590
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 16 deletions.
diff --git a/src/app/genshin/components/Char-Info.tsx b/src/app/genshin/components/Char-Info.tsx
@@ -5,19 +5,27 @@ import { Characters } from "../data";
 export default function CharInfo({ character }: { character: Characters[0] }) {
   return (
     <div className="flex h-full flex-col">
-      <div className="absolute top-0 left-0 flex h-full w-full items-center justify-center">
-        <Image
-          className="aspect-square object-contain opacity-50"
-          src={
-            elements[
-              character.element.name.toLowerCase() as keyof typeof elements
-            ]
-          }
-          alt={character.element.name}
-          fill={true}
-          priority={true}
-        />
-      </div>
+      {Object.entries(elements).map(([key, value]) => {
+        return (
+          <div
+            key={key}
+            className={`absolute left-0 top-0 flex h-full w-full items-center justify-center ${
+              key === character.element.name.toLowerCase()
+                ? "visible"
+                : "hidden"
+            }`}
+          >
+            <Image
+              className="aspect-square object-contain opacity-50"
+              src={value}
+              alt={key}
+              fill={true}
+              priority={false}
+            />
+          </div>
+        );
+      })}
+
       <div className="bg-white/20 backdrop-blur-sm">
         <h1
           className="border-b-2 border-white/20 bg-gradient-to-b from-white to-[var(--bgcolour)] bg-clip-text p-2 font-bold text-transparent md:text-2xl lg:text-4xl"

diff --git a/src/app/genshin/components/Profile.tsx b/src/app/genshin/components/Profile.tsx
@@ -14,7 +14,7 @@ export default function Profile({
 }) {
   return (
     <div
-      className={`absolute left-0 top-0 h-svh w-svw overflow-clip ${currentCharacter != charName && "opacity-0"} ${currentCharacter == charName ? "z-20" : "z-0"}`}
+      className={`absolute left-0 top-0 h-svh w-svw overflow-clip ${currentCharacter == charName ? "z-20" : "z-0 hidden opacity-0"} `}
     >
       <Image
         onTouchEnd={(e) => handleTouchEnd(e)}
@@ -29,8 +29,7 @@ export default function Profile({
           ]
         }
         alt={charName}
-        fill={true}
-        priority={currentCharacter == charName}
+        priority={true}
         placeholder="blur"
       />
     </div>