Update all asset loading to be dynamic

This commit is contained in:
Trenton Zimmer
2025-01-01 20:58:10 -05:00
parent 0f24add936
commit 5015b609b8
11 changed files with 44 additions and 36 deletions

View File

@@ -1,2 +1,3 @@
VITE_API_URL="http://10.5.7.5:8000/"
VITE_API_KEY="your_api_key_should_be_here"
VITE_API_KEY="your_api_key_should_be_here"
VITE_ASSET_PATH="/assets"

View File

@@ -1,2 +1,3 @@
VITE_API_URL="https://restfulsleep.phaseii.network"
VITE_API_KEY="your_api_key_should_be_here"
VITE_API_KEY="your_api_key_should_be_here"
VITE_ASSET_PATH="https://cdn.phaseii.network/file/PhaseII/web-assets"

View File

@@ -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>

View File

@@ -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

View File

@@ -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"

View File

@@ -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;
`;

View File

@@ -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;
}

View File

@@ -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`;
}
}

View File

@@ -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`;
}
}

View File

@@ -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;
}

View File

@@ -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>