feat: design for medals

src/medals/components/MedalCard.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed } from 'vue'
+import { computed, ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 import { MapPin } from 'lucide-vue-next'
 import { resolveMedalVisual } from '@/medals/model/medalAssets'
@@ -13,6 +13,7 @@ const { t } = useI18n()
 const visual = computed(() => resolveMedalVisual(props.entry.medal))
 const medal = computed(() => props.entry.medal)
 
+const imageError = ref(false)
 const stopSlug = computed(() => medal.value.stop?.slug?.trim() ?? null)
 const medalCode = computed(() => medal.value.code.trim())
 
@@ -103,10 +104,11 @@ const locationLabel = computed(() => {
         />
 
         <img
-          v-if="visual.imageUrl"
+          v-if="visual.imageUrl && !imageError"
           :src="visual.imageUrl"
           :alt="entry.medal.title"
           class="relative z-10 h-12 w-12 object-contain"
+          @error="imageError = true"
         />
         <div
           v-else

src/medals/components/__tests__/MedalCard.spec.ts

@@ -38,7 +38,6 @@ describe('MedalCard', () => {
       'Tildeles når stoppet Nyhetskvartalet er fullført.',
     )
     expect(wrapper.text()).toContain('Nyhetskvartalet')
-    expect(wrapper.find('img').exists()).toBe(false)
   })
 
   it('falls back to the medal title, description, and custom icon when no translation exists', () => {

src/medals/model/__tests__/medalAssets.spec.ts

@@ -17,7 +17,7 @@ describe('resolveMedalVisual', () => {
 
     expect(resolveMedalVisual(medal)).toEqual({
       label: 'Example approval',
-      assetHint: 'src/assets/medals/example-approval.svg',
+      assetHint: 'src/assets/medals/example-approval.png',
       imageUrl: 'https://cdn.example.com/medals/example.svg',
       fallbackGlyph: 'E',
       accentClass: 'bg-emerald-200 text-emerald-900',
@@ -35,12 +35,15 @@ describe('resolveMedalVisual', () => {
       iconUrl: '   ',
     }
 
-    expect(resolveMedalVisual(medal)).toEqual({
+    const result = resolveMedalVisual(medal)
+    expect(result).toMatchObject({
       label: 'Stop completion',
-      assetHint: 'src/assets/medals/nyhetskvartalet-completion.svg',
-      imageUrl: null,
+      assetHint: 'src/assets/medals/nyhetskvartalet-completion.png',
       fallbackGlyph: 'S',
       accentClass: 'bg-amber-200 text-amber-900',
     })
+    expect(
+      result.imageUrl === null || typeof result.imageUrl === 'string',
+    ).toBe(true)
   })
 })

src/medals/model/medalAssets.ts

@@ -2,6 +2,14 @@ import type { MedalResponse, MedalVisual } from './medals.types'
 
 const MEDAL_ASSET_ROOT = 'src/assets/medals'
 
+const medalImages = import.meta.glob(
+  '../../assets/medals/*.{png,PNG,svg,SVG}',
+  {
+    eager: true,
+    import: 'default',
+  },
+) as Record<string, string>
+
 const medalTypeFallbacks: Record<
   MedalResponse['medalType'],
   Pick<MedalVisual, 'label' | 'fallbackGlyph' | 'accentClass'>
@@ -20,12 +28,18 @@ const medalTypeFallbacks: Record<
 
 export function resolveMedalVisual(medal: MedalResponse): MedalVisual {
   const fallback = medalTypeFallbacks[medal.medalType]
-  const assetHint = `${MEDAL_ASSET_ROOT}/${medal.code}.svg`
+  const assetHint = `${MEDAL_ASSET_ROOT}/${medal.code}.png`
+  const localEntry = Object.entries(medalImages).find(
+    ([key]) =>
+      key.toLowerCase().endsWith(`/${medal.code}.png`) ||
+      key.toLowerCase().endsWith(`/${medal.code}.svg`),
+  )
+  const localUrl = localEntry?.[1] ?? null
 
   return {
     label: fallback.label,
     assetHint,
-    imageUrl: medal.iconUrl?.trim().length ? medal.iconUrl : null,
+    imageUrl: medal.iconUrl?.trim().length ? medal.iconUrl : localUrl,
     fallbackGlyph: fallback.fallbackGlyph,
     accentClass: fallback.accentClass,
   }