From 92498b6ffe1997be1e0f75ffb8adf77441e517e2 Mon Sep 17 00:00:00 2001
From: Andres Smith <andressmithdev@pm.me>
Date: Tue, 26 Mar 2024 14:27:47 +0100
Subject: [PATCH] Move images to assets directory for better control of them
 during routing

---
 .gitignore                                  |   2 +-
 generate_images.sh                          |   2 +-
 public/{ => assets}/sample_hor_1_high.webp  | Bin
 public/{ => assets}/sample_hor_1_low.webp   | Bin
 public/{ => assets}/sample_hor_1_mid.webp   | Bin
 public/{ => assets}/sample_hor_2_high.webp  | Bin
 public/{ => assets}/sample_hor_2_low.webp   | Bin
 public/{ => assets}/sample_hor_2_mid.webp   | Bin
 public/{ => assets}/sample_hor_3_high.webp  | Bin
 public/{ => assets}/sample_hor_3_low.webp   | Bin
 public/{ => assets}/sample_hor_3_mid.webp   | Bin
 public/{ => assets}/sample_vert_1_high.webp | Bin
 public/{ => assets}/sample_vert_1_low.webp  | Bin
 public/{ => assets}/sample_vert_1_mid.webp  | Bin
 public/{ => assets}/sample_vert_2_high.webp | Bin
 public/{ => assets}/sample_vert_2_low.webp  | Bin
 public/{ => assets}/sample_vert_2_mid.webp  | Bin
 public/{ => assets}/sample_vert_3_high.webp | Bin
 public/{ => assets}/sample_vert_3_low.webp  | Bin
 public/{ => assets}/sample_vert_3_mid.webp  | Bin
 src/views/HomeView.vue                      |  20 +++++++++++---------
 21 files changed, 13 insertions(+), 11 deletions(-)
 rename public/{ => assets}/sample_hor_1_high.webp (100%)
 rename public/{ => assets}/sample_hor_1_low.webp (100%)
 rename public/{ => assets}/sample_hor_1_mid.webp (100%)
 rename public/{ => assets}/sample_hor_2_high.webp (100%)
 rename public/{ => assets}/sample_hor_2_low.webp (100%)
 rename public/{ => assets}/sample_hor_2_mid.webp (100%)
 rename public/{ => assets}/sample_hor_3_high.webp (100%)
 rename public/{ => assets}/sample_hor_3_low.webp (100%)
 rename public/{ => assets}/sample_hor_3_mid.webp (100%)
 rename public/{ => assets}/sample_vert_1_high.webp (100%)
 rename public/{ => assets}/sample_vert_1_low.webp (100%)
 rename public/{ => assets}/sample_vert_1_mid.webp (100%)
 rename public/{ => assets}/sample_vert_2_high.webp (100%)
 rename public/{ => assets}/sample_vert_2_low.webp (100%)
 rename public/{ => assets}/sample_vert_2_mid.webp (100%)
 rename public/{ => assets}/sample_vert_3_high.webp (100%)
 rename public/{ => assets}/sample_vert_3_low.webp (100%)
 rename public/{ => assets}/sample_vert_3_mid.webp (100%)

diff --git a/.gitignore b/.gitignore
index ab65420..5d701b1 100644
--- a/.gitignore
+++ b/.gitignore
@@ -7,7 +7,7 @@ yarn-error.log*
 pnpm-debug.log*
 lerna-debug.log*
 
-public/*.png
+public/**/*.png
 
 node_modules
 .DS_Store
diff --git a/generate_images.sh b/generate_images.sh
index 15243aa..7d5f543 100755
--- a/generate_images.sh
+++ b/generate_images.sh
@@ -1,6 +1,6 @@
 #!/bin/bash
 
-for pngImage in $(ls public/*png); do
+for pngImage in $(ls public/assets/*png); do
     convert -resize 15% -quality 100 -antialias $pngImage $(echo $pngImage | sed 's~.png~_high.webp~')
     convert -resize 10% -quality 100 -antialias $pngImage $(echo $pngImage | sed 's~.png~_mid.webp~')
     convert -resize 7.5% -quality 90 -antialias $pngImage $(echo $pngImage | sed 's~.png~_low.webp~')
diff --git a/public/sample_hor_1_high.webp b/public/assets/sample_hor_1_high.webp
similarity index 100%
rename from public/sample_hor_1_high.webp
rename to public/assets/sample_hor_1_high.webp
diff --git a/public/sample_hor_1_low.webp b/public/assets/sample_hor_1_low.webp
similarity index 100%
rename from public/sample_hor_1_low.webp
rename to public/assets/sample_hor_1_low.webp
diff --git a/public/sample_hor_1_mid.webp b/public/assets/sample_hor_1_mid.webp
similarity index 100%
rename from public/sample_hor_1_mid.webp
rename to public/assets/sample_hor_1_mid.webp
diff --git a/public/sample_hor_2_high.webp b/public/assets/sample_hor_2_high.webp
similarity index 100%
rename from public/sample_hor_2_high.webp
rename to public/assets/sample_hor_2_high.webp
diff --git a/public/sample_hor_2_low.webp b/public/assets/sample_hor_2_low.webp
similarity index 100%
rename from public/sample_hor_2_low.webp
rename to public/assets/sample_hor_2_low.webp
diff --git a/public/sample_hor_2_mid.webp b/public/assets/sample_hor_2_mid.webp
similarity index 100%
rename from public/sample_hor_2_mid.webp
rename to public/assets/sample_hor_2_mid.webp
diff --git a/public/sample_hor_3_high.webp b/public/assets/sample_hor_3_high.webp
similarity index 100%
rename from public/sample_hor_3_high.webp
rename to public/assets/sample_hor_3_high.webp
diff --git a/public/sample_hor_3_low.webp b/public/assets/sample_hor_3_low.webp
similarity index 100%
rename from public/sample_hor_3_low.webp
rename to public/assets/sample_hor_3_low.webp
diff --git a/public/sample_hor_3_mid.webp b/public/assets/sample_hor_3_mid.webp
similarity index 100%
rename from public/sample_hor_3_mid.webp
rename to public/assets/sample_hor_3_mid.webp
diff --git a/public/sample_vert_1_high.webp b/public/assets/sample_vert_1_high.webp
similarity index 100%
rename from public/sample_vert_1_high.webp
rename to public/assets/sample_vert_1_high.webp
diff --git a/public/sample_vert_1_low.webp b/public/assets/sample_vert_1_low.webp
similarity index 100%
rename from public/sample_vert_1_low.webp
rename to public/assets/sample_vert_1_low.webp
diff --git a/public/sample_vert_1_mid.webp b/public/assets/sample_vert_1_mid.webp
similarity index 100%
rename from public/sample_vert_1_mid.webp
rename to public/assets/sample_vert_1_mid.webp
diff --git a/public/sample_vert_2_high.webp b/public/assets/sample_vert_2_high.webp
similarity index 100%
rename from public/sample_vert_2_high.webp
rename to public/assets/sample_vert_2_high.webp
diff --git a/public/sample_vert_2_low.webp b/public/assets/sample_vert_2_low.webp
similarity index 100%
rename from public/sample_vert_2_low.webp
rename to public/assets/sample_vert_2_low.webp
diff --git a/public/sample_vert_2_mid.webp b/public/assets/sample_vert_2_mid.webp
similarity index 100%
rename from public/sample_vert_2_mid.webp
rename to public/assets/sample_vert_2_mid.webp
diff --git a/public/sample_vert_3_high.webp b/public/assets/sample_vert_3_high.webp
similarity index 100%
rename from public/sample_vert_3_high.webp
rename to public/assets/sample_vert_3_high.webp
diff --git a/public/sample_vert_3_low.webp b/public/assets/sample_vert_3_low.webp
similarity index 100%
rename from public/sample_vert_3_low.webp
rename to public/assets/sample_vert_3_low.webp
diff --git a/public/sample_vert_3_mid.webp b/public/assets/sample_vert_3_mid.webp
similarity index 100%
rename from public/sample_vert_3_mid.webp
rename to public/assets/sample_vert_3_mid.webp
diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue
index 8135604..2b090ab 100644
--- a/src/views/HomeView.vue
+++ b/src/views/HomeView.vue
@@ -8,11 +8,10 @@
         href="/create"
         >{{ $t('home.button-text') }}</v-btn
       >
-      <p :class="'subtext' + (areImagesLoaded ? '' : '--faded')">
+      <p :class="'subtext' + (showSubtext ? '' : '--faded')">
         {{ $t('home.subtext') }}
         <a href="https://github.com/nanoandrew4/adventure-tracks">{{ $t('home.source-code') }}</a>
       </p>
-      
     </div>
 
     <Carousel3d
@@ -82,15 +81,15 @@ export default defineComponent({
       this.loadedImagesSet.clear()
       if (this.isPortrait) {
         this.carouselImages = [
-          this.getScaledImage('/sample_vert_1.png'),
-          this.getScaledImage('/sample_vert_2.png'),
-          this.getScaledImage('/sample_vert_3.png')
+          this.getScaledImage('/assets/sample_vert_1.png'),
+          this.getScaledImage('/assets/sample_vert_2.png'),
+          this.getScaledImage('/assets/sample_vert_3.png')
         ]
       } else {
         this.carouselImages = [
-          this.getScaledImage('/sample_hor_1.png'),
-          this.getScaledImage('/sample_hor_2.png'),
-          this.getScaledImage('/sample_hor_3.png')
+          this.getScaledImage('/assets/sample_hor_1.png'),
+          this.getScaledImage('/assets/sample_hor_2.png'),
+          this.getScaledImage('/assets/sample_hor_3.png')
         ]
       }
     }
@@ -102,6 +101,9 @@ export default defineComponent({
     areImagesLoaded(): boolean {
       return this.loadCarousel && this.loadedImagesSet.size == this.carouselImages.length
     },
+    showSubtext(): boolean {
+      return this.areImagesLoaded && document.documentElement.clientWidth < document.documentElement.clientHeight *2
+    },
     slideWidth(): number {
       if (this.isPortrait) {
         return document.documentElement.clientWidth * 0.55
@@ -198,7 +200,7 @@ h1 {
 
 .main-text--bottom {
   display: block;
-  top: calc(85%);
+  top: calc(80%);
 }
 
 @media (max-width: 768px) {