A lot of AI slop

frontend/app/components/parts/TableHeader.vue

@@ -9,11 +9,16 @@ const spritePath = computed(() => {
 });
 const hasAnimated = useState('title-animated', () => false)
 
-const fullText = "ARANROIG.COM";
-const displayedText = ref("");
+const asciiArt = [
+  "█▀█ █▀▄ █▀█ █▀█ █▀▄ █▀█ ▀█▀ █▀▀    █▀▀ █▀█ █▄█",
+  "█▀█ █▀▄ █▀█ █ █ █▀▄ █ █  █  █ █    █   █ █ █ █",
+  "▀ ▀ ▀ ▀ ▀ ▀ ▀ ▀ ▀ ▀ ▀▀▀ ▀▀▀ ▀▀▀ ▀  ▀▀▀ ▀▀▀ ▀ ▀"
+];
+const fullText = asciiArt.join('\n');
 
-let index = 0
-let interval = null
+const displayedArt = ref("");
+let charIndex = 0;
+let intervalId: ReturnType<typeof setInterval> | null = null;
 
 const dragon_names = ["katlum", "solus"];
 const sprite_names = dragon_names.map(name => `/sprites/${name}/${name}.gif`);
@@ -33,41 +38,45 @@ const preloadImages = (imageArray) => {
 
 onMounted(() => {
     preloadImages(sprite_names);
-if (hasAnimated.value) {
-    displayedText.value = fullText
-    return
-  }
 
-  interval = setInterval(() => {
-    if (index < fullText.length) {
-      displayedText.value += fullText[index]
-      index++
-    } else {
-      clearInterval(interval)
-      hasAnimated.value = true;
-    }
-  }, 35) // velocidad de escritura
-})
+   if (hasAnimated.value || displayedArt.value === fullText) {
+     displayedArt.value = fullText;
+     return;
+   }
 
-onBeforeUnmount(() => {
-  clearInterval(interval)
-})
+   intervalId = setInterval(() => {
+     if (charIndex < fullText.length) {
+       displayedArt.value += fullText[charIndex];
+       charIndex++;
+     } else {
+       clearInterval(intervalId!);
+       intervalId = null;
+       hasAnimated.value = true;
+     }
+   }, 5);
+ });
+
+ onBeforeUnmount(() => {
+   if (intervalId) clearInterval(intervalId);
+ });
 
 </script>
 
 <template>
     <div class="header">
         <div class="header-container website">
-                <h1 class="title">{{ displayedText }}</h1>
+                <pre v-html="displayedArt + (displayedArt.length < fullText.length ? '_' : '')" class="title ascii-art" aria-label="ARANROIG.COM"></pre>
                 <HeaderLinks></HeaderLinks>
         </div>
-        <div class="undertable">
-            <Sprite :path="spritePath" bottom="-60px" left="-75px"></Sprite> 
-        </div>
-        <div class="header-container">
+        <div class="header-container right">
             <SiteOptions></SiteOptions>
         </div>
     </div>
+    <div class="undertable-wrapper">
+        <div class="undertable">
+            <Sprite :path="spritePath"></Sprite> 
+        </div>
+    </div>
     <StickyHeader></StickyHeader>
 </template>
 
@@ -90,34 +99,33 @@ onBeforeUnmount(() => {
     }
 }
 
-.undertable {
+.undertable-wrapper {
     position: relative;
-    left: -200px;
-    margin-top: 450px;
-    margin-left: -425px;
-    margin-bottom: 25px;
+    margin-top: -100px;
+    display: flex;
     user-select: none;
     pointer-events: none;
+    z-index: 1;
 
     @media screen and (max-width: 1200px) and (min-width: 900px) {
-        left: -50px;
-        bottom: 20px;
-        margin-top: 350px;
+        margin-top: -340px;
     }
 
     @media screen and (max-width: 900px) and (min-width: 600px) {
-        left: 70px;
-        bottom: 50px;
-        margin-top: 250px;
+        margin-top: -240px;
     }
 
     @media screen and (max-width: 600px) {
-        left: 150px;
-        bottom: 70px;
-        margin-top: 250px;
+        margin-top: -240px;
     }
 }
 
+.undertable {
+    position: relative;
+    width: 160px;
+    height: 180px;
+}
+
 .web-links {
     position: relative;
     z-index: 200;
@@ -127,14 +135,13 @@ onBeforeUnmount(() => {
     background-color: var(--color-background);
 }
 
-.title {
-    width: 300px;
-}
-
-.title::after {
-    content: "_";
-    animation: blink 3s infinite;
-    animation-timing-function: steps(1, end);
+.ascii-art {
+    font-family: 'Hurmit', monospace;
+    font-size: clamp(0.45rem, 1.8vw, 0.85rem);
+    line-height: 1.18;
+    letter-spacing: -0.05ch;
+    white-space: pre;
+    color: var(--color-text);
 }
 
 @keyframes blink {
@@ -145,4 +152,4 @@ onBeforeUnmount(() => {
     opacity: 0;
   }
 }
-</style>
+</style>