From 5015b609b814e1877888705cb28d06b2b94824da Mon Sep 17 00:00:00 2001
From: Trenton Zimmer <66042448+trmazi@users.noreply.github.com>
Date: Wed, 1 Jan 2025 20:58:10 -0500
Subject: [PATCH] Update all asset loading to be dynamic

---
 .env.development                |  3 ++-
 .env.production                 |  3 ++-
 index.html                      | 10 ++++----
 src/components/ArcadeCard.vue   |  3 ++-
 src/components/UserAvatar.vue   |  2 +-
 src/components/UserCard.vue     |  3 ++-
 src/constants/index.js          | 41 +++++++++++++++------------------
 src/constants/sources.js        |  3 ++-
 src/views/Game/PlayerView.vue   |  3 ++-
 src/views/Game/RivalsView.vue   |  3 ++-
 src/views/Profile/CardsView.vue |  6 ++++-
 11 files changed, 44 insertions(+), 36 deletions(-)

diff --git a/.env.development b/.env.development
index 372eb7ce..feda988b 100644
--- a/.env.development
+++ b/.env.development
@@ -1,2 +1,3 @@
 VITE_API_URL="http://10.5.7.5:8000/"
-VITE_API_KEY="your_api_key_should_be_here"
\ No newline at end of file
+VITE_API_KEY="your_api_key_should_be_here"
+VITE_ASSET_PATH="/assets"
\ No newline at end of file
diff --git a/.env.production b/.env.production
index 08c09ee0..ed30443f 100644
--- a/.env.production
+++ b/.env.production
@@ -1,2 +1,3 @@
 VITE_API_URL="https://restfulsleep.phaseii.network"
-VITE_API_KEY="your_api_key_should_be_here"
\ No newline at end of file
+VITE_API_KEY="your_api_key_should_be_here"
+VITE_ASSET_PATH="https://cdn.phaseii.network/file/PhaseII/web-assets"
\ No newline at end of file
diff --git a/index.html b/index.html
index 6927eaaa..3d8ed4d0 100644
--- a/index.html
+++ b/index.html
@@ -48,9 +48,9 @@
     </noscript>
     <!-- Snow -->
     <div id="particles-js"></div>
-    <script src="/web-assets/particles.js"></script>
+    <script src="/assets/particles.js"></script>
 
-    <script src="/web-assets/snow.js"></script>
+    <script src="/assets/snow.js"></script>
     <div id="app"></div>
     <script type="module" src="/src/main.js"></script>
 
@@ -58,13 +58,13 @@
 
     <!-- Bats! -->
     <!-- <script src="https://code.jquery.com/jquery.js"></script>
-    <script src="/web-assets/halloween-bats.js"></script>
+    <script src="/assets/halloween-bats.js"></script>
     <script type="text/javascript">
       window.halloweenBats = $.halloweenBats({
-        image: "/web-assets/bats.png",
+        image: "/assets/bats.png",
       });
     </script> -->
 
-    <audio id="audio" src="/web-assets/sounds/konami.mp3" class="hidden">
+    <audio id="audio" src="/assets/sounds/konami.mp3" class="hidden">
   </body>
 </html>
diff --git a/src/components/ArcadeCard.vue b/src/components/ArcadeCard.vue
index 33562c7d..f25bb10c 100644
--- a/src/components/ArcadeCard.vue
+++ b/src/components/ArcadeCard.vue
@@ -12,6 +12,7 @@ import { ref } from "vue";
 import BaseLevel from "@/components/BaseLevel.vue";
 import BaseButton from "@/components/BaseButton.vue";
 import PillTag from "@/components/PillTag.vue";
+const ASSET_PATH = import.meta.env.VITE_ASSET_PATH;
 
 const props = defineProps({
   useSmall: {
@@ -41,7 +42,7 @@ function getCardStyle(path) {
 
 <template>
   <div
-    :style="getCardStyle('/web-assets/card/carpet.webp')"
+    :style="getCardStyle(`${ASSET_PATH}/card/carpet.webp`)"
     class="rounded-2xl mb-6 w-full"
   >
     <BaseLevel
diff --git a/src/components/UserAvatar.vue b/src/components/UserAvatar.vue
index 17efe2c7..de1b93c5 100644
--- a/src/components/UserAvatar.vue
+++ b/src/components/UserAvatar.vue
@@ -30,7 +30,7 @@ const username = computed(() => props.username);
         class="w-full h-auto bg-gray-100 dark:bg-slate-800 rounded-full overflow-hidden drop-shadow-lg"
       />
       <!-- <img
-        src="/web-assets/border/pride.webp"
+        :src="`${ASSET_PATH}/border/pride.webp`"
         alt="border"
         class="absolute inset-0 w-full h-full overflow-hidden scale-[1.02]"
         style="object-fit: fill"
diff --git a/src/components/UserCard.vue b/src/components/UserCard.vue
index a01bc64c..5176b035 100644
--- a/src/components/UserCard.vue
+++ b/src/components/UserCard.vue
@@ -12,6 +12,7 @@ import BaseLevel from "@/components/BaseLevel.vue";
 import UserAvatarCurrentUser from "@/components/UserAvatarCurrentUser.vue";
 import CardBox from "@/components/CardBox.vue";
 import PillTag from "@/components/PillTag.vue";
+const ASSET_PATH = import.meta.env.VITE_ASSET_PATH;
 
 defineProps({
   useSmall: {
@@ -41,7 +42,7 @@ const greeting = GetRandomMessage();
 function getCardStyle(game) {
   if (game !== null) {
     return `
-      background-image: url('/web-assets/card/${game}.webp');
+      background-image: url('${ASSET_PATH}/card/${game}.webp');
       background-size: cover;
       background-repeat: no-repeat;
     `;
diff --git a/src/constants/index.js b/src/constants/index.js
index f7a0fd40..79244148 100644
--- a/src/constants/index.js
+++ b/src/constants/index.js
@@ -11,6 +11,7 @@ import { PopnMusicOptions } from "@/constants/gameOptions/popnOptions";
 import { ReflecBeatOptions } from "@/constants/gameOptions/reflecOptions";
 import { SDVXOptions } from "@/constants/gameOptions/sdvxOptions";
 import { WinningElevenOptions } from "@/constants/gameOptions/weOptions";
+const ASSET_PATH = import.meta.env.VITE_ASSET_PATH;
 
 export class GameConstants {
   static BEATSTREAM = "bst";
@@ -598,8 +599,8 @@ export const gameData = [
   {
     id: GameConstants.DDRCLASS,
     name: "Classic DDR",
-    icon: "/web-assets/icon/ddr.webp",
-    cardBG: "/web-assets/card/ddr.webp",
+    icon: `${ASSET_PATH}/icon/ddr.webp`,
+    cardBG: `${ASSET_PATH}/card/ddr.webp`,
     noRivals: true,
     noScores: true,
     noRecords: true,
@@ -650,8 +651,8 @@ export const gameData = [
   {
     id: GameConstants.DDROMNI,
     name: "DDR OmniMIX",
-    icon: "/web-assets/icon/ddr.webp",
-    cardBG: "/web-assets/card/ddr.webp",
+    icon: `${ASSET_PATH}/icon/ddr.webp`,
+    cardBG: `${ASSET_PATH}/card/ddr.webp`,
     videoTable: [VersionConstants.DDR_A20_PLUS],
     scoreHeaders: [
       { text: "Combos", value: "data.combo" },
@@ -1161,8 +1162,8 @@ export const gameData = [
     id: GameConstants.IIDX,
     name: "beatmaniaIIDX",
     shortName: "IIDX",
-    icon: "/web-assets/icon/iidx.webp",
-    cardBG: "/web-assets/card/iidx.webp",
+    icon: `${ASSET_PATH}/icon/iidx.webp`,
+    cardBG: `${ASSET_PATH}/card/iidx.webp`,
     gameOptions: IIDXOptions,
     videoTable: [
       VersionConstants.IIDX_TRICORO,
@@ -1360,8 +1361,8 @@ export const gameData = [
   {
     id: GameConstants.IIDXCLASS,
     name: "Classic IIDX",
-    icon: "/web-assets/icon/iidx.webp",
-    cardBG: "/web-assets/card/iidx.webp",
+    icon: `${ASSET_PATH}/icon/iidx.webp`,
+    cardBG: `${ASSET_PATH}/card/iidx.webp`,
     noRivals: true,
     noScores: true,
     noRecords: true,
@@ -1664,8 +1665,6 @@ export const gameData = [
   {
     id: GameConstants.PASELI_CHARGE_MACHINE,
     name: "PASELI Charge Machine",
-    icon: "/web-assets/icon/paseli.webp",
-    cardBG: "/web-assets/card/paseli.webp",
     skip: true,
     noRivals: true,
     noScores: true,
@@ -1675,8 +1674,8 @@ export const gameData = [
   {
     id: GameConstants.POPN_HELLO,
     name: "Hello! Pop'n Music",
-    icon: "/web-assets/icon/popn.webp",
-    cardBG: "/web-assets/card/popn.webp",
+    icon: `${ASSET_PATH}/icon/popn.webp`,
+    cardBG: `${ASSET_PATH}/card/popn.webp`,
     skip: true,
     noRivals: true,
     noScores: true,
@@ -1686,8 +1685,8 @@ export const gameData = [
     id: GameConstants.POPN_MUSIC,
     name: "pop'n music",
     shortName: "pop'n",
-    icon: "/web-assets/icon/popn.webp",
-    cardBG: "/web-assets/card/popn.webp",
+    icon: `${ASSET_PATH}/icon/popn.webp`,
+    cardBG: `${ASSET_PATH}/card/popn.webp`,
     useUnicode: true,
     maxLength: 6,
     gameOptions: PopnMusicOptions,
@@ -1858,8 +1857,8 @@ export const gameData = [
   {
     id: GameConstants.ROAD_FIGHTERS,
     name: "Road Fighters 3D",
-    icon: "/web-assets/icon/rf.webp",
-    cardBG: "/web-assets/card/rf.webp",
+    icon: `${ASSET_PATH}/icon/rf.webp`,
+    cardBG: `${ASSET_PATH}/card/rf.webp`,
     skip: true,
     noRivals: true,
     noScores: true,
@@ -1911,8 +1910,6 @@ export const gameData = [
   {
     id: GameConstants.TSUMTSUM,
     name: "Tsum Tsum",
-    icon: "/web-assets/icon/tsum.webp",
-    cardBG: "/web-assets/card/tsum.webp",
     skip: false,
     noRivals: true,
     noScores: false,
@@ -1922,8 +1919,8 @@ export const gameData = [
   {
     id: GameConstants.WINNING_ELEVEN,
     name: "World Soccer",
-    icon: "/web-assets/icon/we.webp",
-    cardBG: "/web-assets/card/we.webp",
+    icon: `${ASSET_PATH}/icon/we.webp`,
+    cardBG: `${ASSET_PATH}/card/we.webp`,
     skip: false,
     noRivals: true,
     noScores: true,
@@ -1963,10 +1960,10 @@ export function getGameInfo(game) {
   }
 
   if (!requestedData.icon) {
-    requestedData.icon = `/web-assets/icon/${game}.webp`;
+    requestedData.icon = `${ASSET_PATH}/icon/${game}.webp`;
   }
   if (!requestedData.cardBG) {
-    requestedData.cardBG = `/web-assets/card/${game}.webp`;
+    requestedData.cardBG = `${ASSET_PATH}/card/${game}.webp`;
   }
   return requestedData;
 }
diff --git a/src/constants/sources.js b/src/constants/sources.js
index 69b7d6f7..1956fc5e 100644
--- a/src/constants/sources.js
+++ b/src/constants/sources.js
@@ -1,8 +1,9 @@
+const ASSET_PATH = import.meta.env.VITE_ASSET_PATH;
 export function getSources(game, version) {
   if (!version) {
     return game?.cardBG;
   } else {
-    return `/web-assets/games/${game.id}/card/${version}.webp`;
+    return `${ASSET_PATH}/games/${game.id}/card/${version}.webp`;
   }
 }
 
diff --git a/src/views/Game/PlayerView.vue b/src/views/Game/PlayerView.vue
index 71947089..6464810f 100644
--- a/src/views/Game/PlayerView.vue
+++ b/src/views/Game/PlayerView.vue
@@ -26,6 +26,7 @@ import { APIGetArcade } from "@/stores/api/arcade";
 import { getGameInfo } from "@/constants";
 import { getIIDXDan } from "@/constants/danClass.js";
 import { getGitadoraColor, getJubilityColor } from "@/constants/skillColor";
+const ASSET_PATH = import.meta.env.VITE_ASSET_PATH;
 
 const $route = useRoute();
 const $router = useRouter();
@@ -159,7 +160,7 @@ function getSources() {
   if (!versionForm.currentVersion) {
     return thisGame.cardBG;
   } else {
-    return `/web-assets/games/${thisGame.id}/card/${versionForm.currentVersion}.webp`;
+    return `${ASSET_PATH}/games/${thisGame.id}/card/${versionForm.currentVersion}.webp`;
   }
 }
 
diff --git a/src/views/Game/RivalsView.vue b/src/views/Game/RivalsView.vue
index 77dabd34..b171728f 100644
--- a/src/views/Game/RivalsView.vue
+++ b/src/views/Game/RivalsView.vue
@@ -11,6 +11,7 @@ import SectionTitleLine from "@/components/SectionTitleLine.vue";
 import FormField from "@/components/FormField.vue";
 import FormControl from "@/components/FormControl.vue";
 import { getGameInfo } from "@/constants";
+const ASSET_PATH = import.meta.env.VITE_ASSET_PATH;
 
 const $route = useRoute();
 const $router = useRouter();
@@ -86,7 +87,7 @@ function getSources() {
   if (!versionForm.currentVersion) {
     sources = thisGame.cardBG;
   } else {
-    sources = `/web-assets/games/${thisGame.id}/card/${versionForm.currentVersion}.webp`;
+    sources = `${ASSET_PATH}/games/${thisGame.id}/card/${versionForm.currentVersion}.webp`;
   }
   return sources;
 }
diff --git a/src/views/Profile/CardsView.vue b/src/views/Profile/CardsView.vue
index eb151b88..56ed77fd 100644
--- a/src/views/Profile/CardsView.vue
+++ b/src/views/Profile/CardsView.vue
@@ -14,6 +14,7 @@ import FormField from "@/components/FormField.vue";
 import FormControl from "@/components/FormControl.vue";
 import LayoutAuthenticated from "@/layouts/LayoutAuthenticated.vue";
 import SectionTitleLine from "@/components/SectionTitleLine.vue";
+const ASSET_PATH = import.meta.env.VITE_ASSET_PATH;
 
 import { APIGetCards, APIPutCard, APIDeleteCard } from "@/stores/api/account";
 var cardData = ref([]);
@@ -140,7 +141,10 @@ const copyToClipboard = (text) => {
           class="grid dark:bg-slate-900/70 rounded-2xl p-5"
         >
           <div class="flex justify-between md:grid md:gap-2 mb-4 items-center">
-            <img src="/web-assets/passes/generic.webp" class="w-24 md:w-auto" />
+            <img
+              :src="`${ASSET_PATH}/passes/generic.webp`"
+              class="w-24 md:w-auto"
+            />
             <h1 class="text-xl text-center font-mono">
               {{ dashCode(card.encoded) }}
             </h1>