Avlesing av filer under bygg prossesen

[LarsGJobloop]

PalDeckArray.js

Ser du har forsatt og lagt ned veldig mye arbeid her med å føre inn de forskjellige Pallene(?).

Har ikke prøvd det ut veldig mye selv, men ViteJS har muligheten for å lese av mapper og filer når mens det bygger prosjektet. Noe som åpner for muligheten for å generere denne listen med objekter via JavaScript. Om det gjør det enklere eller ikke blir litt opp til deg å avgjøre. Her er ihvertfall en snutt med kode for som leser av filene og laster de inn:

const imagesPaths = import.meta.glob('./PalDeckImages/*.webp')

console.log("PalDeck Images")
for (const path in imagesPaths) {
  const name = path.split("/").slice(-1)[0].split(".")[0]
  console.log(`Name: ${name} => Path: ${path}`)
}

ViteJS har mange muligheter for denne type dynamisk lasting av data vil anbefale å se på dokumentasjonen å søke/spørre litt rundt, Vite Static Assets.

Vil og anbefale å ikke skrive inn felter som IDer (number) for hånd, går utifra at dette skal være unikt for vær Pal. En litt enkelt måte å berike dataen som du skriver inn med ekstra informasjon er å benytte seg av Array.map:

const pals = [
  {
    variant: "B",
    name: "Frostallion Noct",
    elementImg: Dark,
    element: "Dark",
    img: FrostallionNoct,
  },
  {
    name: "Jetragon",
    elementImg: Dragon,
    element: "Dragon",
    img: Jetragon,
  },
]
].map((pal, index) => ({...pal, number: index}))

Da er du garantert at du ikke skriver inn duplikater.

[LarsGJobloop]

Endte opp med å se hvordan dette kan gjøres via Vite og litt JavaScript.

Du kan ta en kikk på denne konstruksjonen:

// Last inn alle bilde filene
const imagesPaths = import.meta.glob('./PalDeckImages/*.webp', {
  query: "?url",
  eager: true
})

// Putt de inn i en Map så de kan hentes ut igjen ved hjelp av navnet
const images = new Map()
for (const devPath in imagesPaths) {
  const name = devPath.split("/").slice(-1)[0].split(".")[0]
  const productionPath = new URL(devPath, import.meta.url).href

  images.set(name, productionPath)
}

// En egen funksjon for å berike dataen du skriver inn
function enrichPalData(palRaw, index) {
  return {
    ...palRaw,
    number: index,
    img: images.get(palRaw.name)
  }
}

// Den dataen du har skrevet inn for hånd
consts pals = [
  {
    variant: "B",
    name: "Frostallion Noct",
    elementImg: Dark,
    element: "Dark"
  },
  {
    name: "Jetragon",
    elementImg: Dragon,
    element: "Dragon"
  },
// Lag et nytt array basert på det du har skrevet inn med ekstra data
].map((palRaw, index) => enrichPalData(palRaw, index));

Flere måter å gjøre dette på, men du slipper unna en del arbeid med kun dette 🙂