Moved nice tools from fgo-ta over

src/components/servantCard.astro

@@ -1,6 +1,7 @@
 ---
-import type { ImageMetadata } from 'astro';
 import { Image } from 'astro:assets';
+import type { GlobImage } from '../types/generic'
+import { plsLoadImage } from '../utils/tools'
 
 export interface Props {
   name: string
@@ -16,8 +17,10 @@ export interface Props {
 const { bond10, ml, bondceImageFile, servantImageFile, np, skills, level, name } = Astro.props
 const servantImagePath = `/src/assets/servant/${servantImageFile}`
 const bondceImagePath = `/src/assets/ce/bond-ce/${bondceImageFile}`
-const images_servants = import.meta.glob<{ default: ImageMetadata }>('/src/assets/servant/*.{png,webp}')
-const images_bond_ces = import.meta.glob<{ default: ImageMetadata }>('/src/assets/ce/bond-ce/*.{png,webp}')
+const images_servants = import.meta.glob<GlobImage>('/src/assets/servant/*.{png,webp}')
+const images_bond_ces = import.meta.glob<GlobImage>('/src/assets/ce/bond-ce/*.{png,webp}')
+const loadedServantImage = plsLoadImage(images_servants, servantImagePath)
+const loadedBondCEImage = plsLoadImage(images_bond_ces, bondceImagePath)
 
 let bondce_css: string = 'bond-ce'
 
@@ -27,14 +30,14 @@ if (bond10 === false) {
 ---
 
 <article>
-  <Image src={images_servants[servantImagePath]()} alt={name} />
+  <Image src={loadedServantImage} alt={name} />
   <h2 class="subtext">
     Level {level}<br />
     {skills}<br />
     NP {np}
   </h2>
   <div class="expand-on-hover">
-    <Image src={images_bond_ces[bondceImagePath]()} alt="" class={bondce_css}/>
+    <Image src={loadedBondCEImage} alt="" class={bondce_css}/>
     <h2 class="subtext">Mana Loading: {ml === 'Not Unlocked' && <br />}{ml}</h2>
   </div>
 </article>