Rewrite to TailwindCSS, enhance the DOM, uninstall Vuetify, improve styles

components/animations/NotFound.vue

@@ -47,9 +47,10 @@ onMounted(() => setTimeout(type, 1500))
 
 <template>
   <section>
-    <h3 class="alex">Page not found!</h3>
-    <pre
-      class="whitespace-pre-wrap break-keep">{{ buffer }}<span class="blinker">&#9610;</span></pre>
+    <h3>Page not found!</h3>
+    <pre class="whitespace-pre-wrap break-keep font-small">{{
+        buffer
+      }}<span class="blinker">&#9610;</span></pre>
   </section>
 </template>
 

components/animations/Portal.vue

@@ -2,12 +2,14 @@
 import sky from '~/assets/images/textures/sky.png'
 import particles from '~/assets/images/textures/particles.png'
 
+const { $local } = useNuxtApp()
 const config = useAppConfig()
-const fqdn = config.url.split('//')[1]
+const fqdn = config.url.split('//').at(1)
 
 const resources: string[] = [sky, particles]
-
-const pages = storeToRefs(usePageStore())
+const animated = defineModel<boolean>({
+  required: true,
+})
 
 const props = defineProps({
   layout: {
@@ -138,7 +140,7 @@ class Portal {
   constructor(
     directory: string = '/',
     create: boolean = true,
-    animate: boolean = true,
+    animate: boolean = false,
     randomize: boolean = false,
     fade: boolean = false,
     speed: number = 1,
@@ -563,9 +565,6 @@ class Portal {
     // Run the scene.
     this.scene()
 
-    // TODO: Make it into a composable? The toggle will not work. Hardcoded.
-    if (!pages.animate.value) this.pause()
-
     // Request the next animation frame if animation is enabled.
     if (this.animate) requestAnimationFrame(this.render.bind(this))
   }
@@ -573,10 +572,6 @@ class Portal {
   resize() {
     if (!this.canvas.full()) this.canvas.fill()
 
-    // Pause the animation if the viewport becomes too small.
-    if (window.innerWidth <= 600) this.pause()
-    else this.continue()
-
     // If we have animation disabled, we still have to re-render the scene once on resize.
     if (!this.animate) requestAnimationFrame(this.render.bind(this))
   }
@@ -585,8 +580,8 @@ class Portal {
     this.clickTime = Date.now()
   }
 
-  continue() {
-    if (this.pauseTime === 0) return
+  play() {
+    if (this.pauseTime === 0) this.pauseTime = this.currentTime
 
     // Add the time that has passed since the pause to the current time.
     this.currentTime += Date.now() - this.pauseTime
@@ -619,47 +614,50 @@ class Portal {
 }
 
 onMounted(() => {
+  // If the localStorage value is null, trigger the setup.
+  // If the viewport is too small, disable by default.
+  const ecmaportal: string | null | undefined = $local.getItem('ecmaportal')
+
+  if (ecmaportal === null) {
+    const notMobile = window.innerWidth > 600
+
+    $local.setItem('ecmaportal', notMobile)
+    animated.value = notMobile
+  } else animated.value = ecmaportal === 'true'
+
   const layout = document.querySelector(props.layout)
   const portal = new Portal(
     props.directory,
     props.create,
-    props.animate && window.innerWidth > 600,
+    animated.value,
     props.randomize,
     props.fade,
     props.speed,
   )
 
-  layout!.addEventListener('mousedown', ((e: UIEvent) => {
-    if (e.target === e.currentTarget && e.detail >= 2) {
+  const click: EventListener = (e: Event) => {
+    if (e.target === e.currentTarget) {
       e.preventDefault()
       portal.click()
     }
-  }) as EventListener)
+  }
+
+  for (const event of ['dblclick', 'touchstart'])
+    layout!.addEventListener(event, click)
+
+  // Save the new value to local storage.
+  watch(animated, (newAnimate) => {
+    $local.setItem('ecmaportal', newAnimate)
+    newAnimate ? portal.play() : portal.pause()
+  })
 })
 </script>
 
 <template>
-  <canvas id="ecmaportal" class="parallax">
+  <canvas id="ecmaportal" class="fixed top-0 left-0 opacity-0 parallax -z-10">
     <span>
       Your browser does not support the &lt;canvas /&gt; element, which is
       required for parallax animation.
     </span>
   </canvas>
 </template>
-
-<style scoped>
-.parallax {
-  position: fixed;
-
-  top: 0;
-  left: 0;
-
-  width: 100%;
-  height: 100%;
-
-  opacity: 0;
-  transition: all 0.6942s ease-in;
-
-  z-index: -1;
-}
-</style>