holy

frontend/app/components/parts/TableHeader.vue

@@ -2,7 +2,6 @@
 import HeaderLinks from './HeaderLinks.vue';
 import SiteOptions from './site_options/SiteOptions.vue';
 import StickyHeader from './StickyHeader.vue';
-
 import { accent } from '~/composables/theme'
 const spritePath = computed(() => {
     return `/sprites/${accent.value}/${accent.value}.gif`
@@ -16,7 +15,12 @@ const asciiArt = [
 ];
 const fullText = asciiArt.join('\n');
 
-const displayedArt = ref("");
+interface ArtChar {
+  char: string;
+  done: boolean;
+}
+
+const displayedArt = ref<ArtChar[]>([]);
 let charIndex = 0;
 let intervalId: ReturnType<typeof setInterval> | null = null;
 
@@ -36,36 +40,69 @@ const preloadImages = (imageArray) => {
   )
 }
 
-onMounted(() => {
-    preloadImages(sprite_names);
+   onMounted(() => {
+        preloadImages(sprite_names);
 
-   if (hasAnimated.value || displayedArt.value === fullText) {
-     displayedArt.value = fullText;
-     return;
-   }
+        if (hasAnimated.value || displayedArt.value.length === fullText.length) {
+            for (let i = 0; i < fullText.length; i++) {
+                displayedArt.value.push({ char: fullText[i], done: true });
+            }
+            return;
+        }
 
-   intervalId = setInterval(() => {
-     if (charIndex < fullText.length) {
-       displayedArt.value += fullText[charIndex];
-       charIndex++;
-     } else {
-       clearInterval(intervalId!);
-       intervalId = null;
-       hasAnimated.value = true;
-     }
-   }, 5);
- });
+        intervalId = setInterval(() => {
+            if (charIndex < fullText.length) {
+                displayedArt.value[charIndex] = { char: fullText[charIndex], done: true };
+                charIndex++;
+            } else {
+                clearInterval(intervalId!);
+                intervalId = null;
+                hasAnimated.value = true;
+            }
+        }, 5);
+    });
 
- onBeforeUnmount(() => {
-   if (intervalId) clearInterval(intervalId);
- });
+  const getGridPos = (idx: number) => {
+        let x = 0, y = 0;
+        for (let j = 0; j < idx; j++) {
+            if (fullText[j] === '\n') { y++; x = 0; }
+            else { x++; }
+        }
+        return { x, y };
+    };
+
+    const onCharClick = (index: number, spanEl: HTMLElement) => {
+        for (let i = 0; i < fullText.length; i++) {
+            if (fullText[i] === '\n') continue;
+            const indexGrid = getGridPos(index);
+            const charGrid = getGridPos(i);
+            let manhattanDistance = Math.abs(indexGrid.x - charGrid.x) + Math.abs(indexGrid.y - charGrid.y);
+            let delay = manhattanDistance * 20;
+            setTimeout(() => {
+                displayedArt.value[i] = { char: fullText[i], done: true };
+                const targetSpan = document.querySelector(`.ascii-art span[index="${i}"]`) as HTMLElement;
+                if (targetSpan) {
+                    targetSpan.style.transition = 'color 80ms ease-out';
+                    targetSpan.style.color = 'var(--color-link)';
+                    requestAnimationFrame(() => {
+                        setTimeout(() => {
+                            targetSpan.style.color = '';
+                        }, 150);
+                    });
+                }
+            }, delay);
+        }
+    };
+    onBeforeUnmount(() => {
+        if (intervalId) clearInterval(intervalId);
+    });
 
 </script>
 
 <template>
     <div class="header">
         <div class="header-container website">
-                <pre v-html="displayedArt + (displayedArt.length < fullText.length ? '_' : '')" class="title ascii-art" aria-label="ARANROIG.COM"></pre>
+                <pre class="title ascii-art" aria-label="ARANROIG.COM"><span v-for="(c, i) in displayedArt" :key="i" :index="i.toString()" :class="{ 'char-done': c.done }" @click="onCharClick(i, $event.target as HTMLElement)">{{ c.char }}</span><span class="cursor" :class="{ 'blink': displayedArt.length < fullText.length }" v-if="displayedArt.length < fullText.length">_</span></pre>
                 <HeaderLinks></HeaderLinks>
         </div>
         <div class="header-container right">
@@ -144,6 +181,23 @@ onMounted(() => {
     color: var(--color-text);
     min-height: clamp(1.59rem, 6.38vw, 3.01rem);
     min-width: clamp(11rem, 44vw, 23rem);
+
+    span:not(.char-done) {
+        color: transparent;
+    }
+}
+
+.char-done {
+    opacity: 1;
+}
+
+.cursor {
+    font-weight: bold;
+    color: var(--color-text);
+
+    &.blink {
+        animation: blink 1s step-end infinite;
+    }
 }
 
 @keyframes blink {