PlatformBadge

apps/frontend/src/components/PlatformBadge.vue

@@ -0,0 +1,27 @@
+<template>
+  <span :class="badgeClass">{{ platform }}</span>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+
+const props = defineProps<{ platform: string }>()
+
+const knownPlatforms = ['tic80', 'ebitengine', 'love', 'godot']
+
+const badgeClass = computed(() => {
+  const key = props.platform.toLowerCase().replace(/[^a-z0-9]/g, '')
+  return `platform-badge platform-${knownPlatforms.includes(key) ? key : 'other'}`
+})
+</script>
+
+<style scoped>
+.platform-badge {
+  @apply px-2 py-0.5 rounded text-xs font-bold uppercase;
+}
+.platform-tic80 { @apply bg-cyan-100 text-cyan-800 border border-cyan-200; }
+.platform-ebitengine { @apply bg-red-100 text-red-800 border border-red-200; }
+.platform-love { @apply bg-pink-100 text-pink-800 border border-pink-200; }
+.platform-godot { @apply bg-sky-100 text-sky-800 border border-sky-200; }
+.platform-other { @apply bg-purple-100 text-purple-800 border border-purple-200; }
+</style>

apps/frontend/src/page/catalog/CatalogIndexPage.vue

@@ -32,12 +32,11 @@
                     <h2 class="software-title mb-0">{{ software.title }}</h2>
                   </RouterLink>
                   <span :class="`status-badge status-${software.status}`">{{ t(`common.status.${software.status}`) }}</span>
+                  <PlatformBadge :platform="software.platform" />
                 </div>
                 <p class="software-desc max-w-2xl">{{ software.desc }}</p>
                 <div class="software-meta">
                   <span>{{ t('catalog.author') }} <span class="text-gray-900 font-medium">{{ software.author }}</span></span>
-                  <span class="mx-2 text-gray-300">•</span>
-                  <span>{{ t('catalog.platform') }} <span class="text-gray-900 font-medium">{{ software.platform }}</span></span>
                 </div>
               </div>
 
@@ -70,6 +69,7 @@ import { RouterLink } from 'vue-router'
 import { useI18n } from 'vue-i18n'
 import { useSoftwareStore } from '../../stores/software.store'
 import { getDefaultImageUrl, getLatestStable } from '../../lib/softwareUtils'
+import PlatformBadge from '../../components/PlatformBadge.vue'
 import type { SoftwareEntry } from '../../lib/interfaces/software.interface'
 
 const { t } = useI18n()

apps/frontend/src/page/catalog/CatalogShowPage.vue

@@ -12,7 +12,7 @@
           <div class="flex-grow">
             <div class="flex items-center gap-3 mb-4">
               <span :class="`status-badge status-${software.status} px-3 py-1`">{{ t(`common.status.${software.status}`) }}</span>
-              <span class="text-purple-300 font-mono text-sm tracking-widest uppercase">{{ software.platform }}</span>
+              <PlatformBadge :platform="software.platform" />
             </div>
             <h1 class="text-4xl md:text-6xl font-black text-white mb-4 leading-tight">{{ software.title }}</h1>
             <p class="text-xl text-purple-100 max-w-3xl leading-relaxed">{{ software.desc }}</p>
@@ -57,7 +57,7 @@
               </div>
               <div>
                 <dt class="text-xs font-bold text-gray-400 uppercase tracking-widest mb-1">{{ t('catalogShow.platform') }}</dt>
-                <dd class="text-gray-900 font-medium">{{ software.platform }}</dd>
+                <dd><PlatformBadge :platform="software.platform" /></dd>
               </div>
               <div v-if="software.license">
                 <dt class="text-xs font-bold text-gray-400 uppercase tracking-widest mb-1">{{ t('catalogShow.license') }}</dt>
@@ -236,6 +236,7 @@ import { useSoftwareStore } from '../../stores/software.store'
 import { filterStableReleases, filterDevReleases } from '../../lib/softwareUtils'
 import type { Release, Software, SoftwareImage } from '../../lib/interfaces/software.interface'
 import ImageLightbox from './ImageLightbox.vue'
+import PlatformBadge from '../../components/PlatformBadge.vue'
 
 const { t } = useI18n()
 const route = useRoute()