From 92b4ae22b78818871ca7c18c36351505fc96b388 Mon Sep 17 00:00:00 2001
From: Zsolt Tasnadi <rastasi@gmail.com>
Date: Thu, 20 Aug 2026 16:02:47 +0200
Subject: [PATCH] =?UTF-8?q?K=C3=A9t=20tengelyen=20kap=20vissza=20=C3=A9let?=
 =?UTF-8?q?et=20a=20fel=C3=BClet:=20piktogram=20=C3=A9s=20sz=C3=ADn?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

A facelift után a site helyenként túl csendes lett. Élet kerül vissza, de
nem dekorációként: két szabály mentén, amiket egymástól függetlenül lehet
olvasni.

A piktogram identitást jelöl — miféle dolog ez. Minden motor és platform
saját glifát kap (TIC-80, Ebitengine, LÖVE, Godot, Bevy, Phaser, C64), és
ugyanazt a jelet viszi a katalógusban, a részletlapon és a build-mátrix
motor-oszlopában, egyetlen PlatformIcon komponensből. A Contact IRC- és
BBS-csatornája is jelet kapott, mert a másik három brandnek eddig is volt,
és a hiány látszott.

A szín állapotot jelöl — mi van vele. A négy státuszból három kap hangot:
a megjelent az akcens zöldet, a demó egy kéket (új --c-info token, 6,7:1
fehéren és 7,8:1 feketén), a fejlesztés alatti a borostyánt. Az archivált
marad semleges, mert az a "már nem történik vele semmi" állapot.

A navigáció, a gombok és a szekciócímek továbbra sem kapnak ikont: ott a
szöveg megmondja, mi az.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
---
 .../frontend/src/components/PlatformBadge.vue |  5 +++-
 apps/frontend/src/components/PlatformIcon.vue | 26 ++++++++++++++++++
 .../__tests__/PlatformBadge.test.ts           | 27 +++++++++++++++++++
 apps/frontend/src/lib/softwareUtils.ts        |  4 +--
 .../src/page/builds/BuildsIndexPage.vue       | 13 +++++++--
 .../frontend/src/page/contact/ContactPage.vue |  7 ++---
 apps/frontend/src/styles/global.css           | 10 ++++++-
 apps/frontend/src/styles/retro.css            | 10 +++++++
 apps/frontend/src/styles/tokens.css           |  2 ++
 apps/frontend/tailwind.config.cjs             |  1 +
 10 files changed, 96 insertions(+), 9 deletions(-)
 create mode 100644 apps/frontend/src/components/PlatformIcon.vue
 create mode 100644 apps/frontend/src/components/__tests__/PlatformBadge.test.ts

diff --git a/apps/frontend/src/components/PlatformBadge.vue b/apps/frontend/src/components/PlatformBadge.vue
index 44d146e..c0a3f98 100644
--- a/apps/frontend/src/components/PlatformBadge.vue
+++ b/apps/frontend/src/components/PlatformBadge.vue
@@ -1,8 +1,11 @@
 <template>
-  <span class="badge">{{ platform }}</span>
+  <span class="badge gap-1.5">
+    <PlatformIcon :platform="platform" />{{ platform }}
+  </span>
 </template>
 
 <script setup lang="ts">
+import PlatformIcon from './PlatformIcon.vue'
 
 defineProps<{ platform: string }>()
 </script>
diff --git a/apps/frontend/src/components/PlatformIcon.vue b/apps/frontend/src/components/PlatformIcon.vue
new file mode 100644
index 0000000..23a1aed
--- /dev/null
+++ b/apps/frontend/src/components/PlatformIcon.vue
@@ -0,0 +1,26 @@
+<template>
+  <BrandIcon v-if="brand" :name="brand" />
+  <component :is="glyph" v-else v-bind="ICON" />
+</template>
+
+<script setup lang="ts">
+import { computed, type Component } from 'vue'
+import { Bot, Box, Boxes, Heart, Save, Tv, Zap } from 'lucide-vue-next'
+import BrandIcon from './icons/BrandIcon.vue'
+import { ICON } from './icons'
+
+const props = defineProps<{ platform: string }>()
+
+const GLYPHS: Record<string, Component> = {
+  tic80: Tv,
+  love: Heart,
+  godot: Bot,
+  bevy: Boxes,
+  phaser: Zap,
+  c64: Save,
+}
+
+const key = computed(() => props.platform.toLowerCase().replace(/[^a-z0-9]/g, ''))
+const brand = computed(() => (key.value === 'ebitengine' ? 'go' : null))
+const glyph = computed(() => GLYPHS[key.value] ?? Box)
+</script>
diff --git a/apps/frontend/src/components/__tests__/PlatformBadge.test.ts b/apps/frontend/src/components/__tests__/PlatformBadge.test.ts
new file mode 100644
index 0000000..0c0d165
--- /dev/null
+++ b/apps/frontend/src/components/__tests__/PlatformBadge.test.ts
@@ -0,0 +1,27 @@
+import { describe, it, expect } from 'vitest'
+import { mount } from '@vue/test-utils'
+import PlatformBadge from '../PlatformBadge.vue'
+import { statusBadgeClass } from '../../lib/softwareUtils'
+
+describe('PlatformBadge', () => {
+  it('shows the platform name next to its own glyph', () => {
+    const wrapper = mount(PlatformBadge, { props: { platform: 'TIC-80' } })
+    expect(wrapper.text()).toContain('TIC-80')
+    expect(wrapper.find('svg').exists()).toBe(true)
+  })
+
+  it('falls back to a glyph for a platform it has never seen', () => {
+    const wrapper = mount(PlatformBadge, { props: { platform: 'Amiga' } })
+    expect(wrapper.find('svg').exists()).toBe(true)
+  })
+})
+
+describe('statusBadgeClass', () => {
+  it('gives every live status its own hue and leaves the archived ones neutral', () => {
+    expect(statusBadgeClass('released')).toContain('status-released')
+    expect(statusBadgeClass('demo')).toContain('status-demo')
+    expect(statusBadgeClass('development')).toContain('status-development')
+    expect(statusBadgeClass('archived')).toBe('status-badge')
+    expect(statusBadgeClass('whatever')).toBe('status-badge')
+  })
+})
diff --git a/apps/frontend/src/lib/softwareUtils.ts b/apps/frontend/src/lib/softwareUtils.ts
index 2a21269..2dcc65e 100644
--- a/apps/frontend/src/lib/softwareUtils.ts
+++ b/apps/frontend/src/lib/softwareUtils.ts
@@ -32,8 +32,8 @@ export function getLatestStable(releases: Release[]): Release | undefined {
 
 const STATUS_BADGE_CLASS: Record<string, string> = {
   released: 'status-badge status-released',
-  demo: 'status-badge',
-  development: 'status-badge',
+  demo: 'status-badge status-demo',
+  development: 'status-badge status-development',
   archived: 'status-badge',
 }
 
diff --git a/apps/frontend/src/page/builds/BuildsIndexPage.vue b/apps/frontend/src/page/builds/BuildsIndexPage.vue
index c651e78..1f52dd1 100644
--- a/apps/frontend/src/page/builds/BuildsIndexPage.vue
+++ b/apps/frontend/src/page/builds/BuildsIndexPage.vue
@@ -40,7 +40,9 @@
           </thead>
           <tbody>
             <tr v-for="(info, platform) in data.platforms" :key="platform" class="builds-row">
-              <td class="builds-td-engine">{{ info.label }}</td>
+              <td class="builds-td-engine">
+                <span class="builds-engine"><PlatformIcon :platform="platform as string" />{{ info.label }}</span>
+              </td>
               <template v-for="group in columnGroups" :key="group.label">
                 <td
                   v-for="(col, colIdx) in group.kinds" :key="col.kind"
@@ -58,7 +60,9 @@
 
     <div v-if="data" class="builds-mobile">
       <div v-for="(info, platform) in data.platforms" :key="platform" class="builds-card">
-        <h2 class="builds-card-title">{{ info.label }}</h2>
+        <h2 class="builds-card-title">
+          <PlatformIcon :platform="platform as string" />{{ info.label }}
+        </h2>
         <div v-for="group in columnGroups" :key="group.label" class="builds-card-group">
           <h3 class="builds-card-group-header">{{ group.label }}</h3>
           <div class="builds-card-kinds">
@@ -86,6 +90,7 @@ import { useI18n } from 'vue-i18n'
 import { Check, X } from 'lucide-vue-next'
 import { useBuildsStore } from '../../stores/builds.store'
 import SkeletonCard from '../../components/SkeletonCard.vue'
+import PlatformIcon from '../../components/PlatformIcon.vue'
 
 const { t } = useI18n()
 
@@ -170,6 +175,10 @@ onMounted(() => store.fetch())
 .builds-td-engine {
   @apply whitespace-nowrap px-5 py-3 font-medium text-fg;
 }
+.builds-engine,
+.builds-card-title {
+  @apply flex items-center gap-2;
+}
 .builds-td-kind {
   @apply px-3 py-3 text-center;
 }
diff --git a/apps/frontend/src/page/contact/ContactPage.vue b/apps/frontend/src/page/contact/ContactPage.vue
index 13a6b5f..fd41461 100644
--- a/apps/frontend/src/page/contact/ContactPage.vue
+++ b/apps/frontend/src/page/contact/ContactPage.vue
@@ -32,7 +32,7 @@
         </article>
 
         <article class="channel">
-          <h3 class="channel-title">IRC</h3>
+          <h3 class="channel-title"><Terminal v-bind="ICON" />IRC</h3>
           <p class="channel-desc">{{ t('contact.irc.desc') }}</p>
           <dl class="channel-facts">
             <dt>Network</dt><dd class="mono">Libera.Chat</dd>
@@ -41,7 +41,7 @@
         </article>
 
         <article class="channel">
-          <h3 class="channel-title">BBS</h3>
+          <h3 class="channel-title"><RadioTower v-bind="ICON" />BBS</h3>
           <p class="channel-desc">{{ t('contact.bbs.desc') }}</p>
           <dl class="channel-facts">
             <dt>Host</dt><dd class="mono">games.teletype.hu</dd>
@@ -88,7 +88,8 @@
 import { useI18n } from 'vue-i18n'
 import { CONFIG } from '../../lib/config'
 import MediaBand from '../../components/MediaBand.vue'
-import { BrandIcon } from '../../components/icons'
+import { RadioTower, Terminal } from 'lucide-vue-next'
+import { BrandIcon, ICON } from '../../components/icons'
 
 const { t } = useI18n()
 
diff --git a/apps/frontend/src/styles/global.css b/apps/frontend/src/styles/global.css
index 61260b4..ea14b76 100644
--- a/apps/frontend/src/styles/global.css
+++ b/apps/frontend/src/styles/global.css
@@ -127,7 +127,15 @@ button:focus-visible {
   }
 
   .status-released {
-    @apply border-accent/40 bg-accent-quiet text-accent;
+    @apply border-accent/40 bg-accent/15 text-accent;
+  }
+
+  .status-demo {
+    @apply border-info/40 bg-info/15 text-info;
+  }
+
+  .status-development {
+    @apply border-warn/40 bg-warn/15 text-warn;
   }
 
   .mono {
diff --git a/apps/frontend/src/styles/retro.css b/apps/frontend/src/styles/retro.css
index b1d1db2..ca5de2f 100644
--- a/apps/frontend/src/styles/retro.css
+++ b/apps/frontend/src/styles/retro.css
@@ -229,6 +229,16 @@
   background-color: #00a800 !important;
 }
 
+.retro-mode .status-demo {
+  background-color: #0000a8 !important;
+  color: #fff !important;
+}
+
+.retro-mode .status-development {
+  background-color: #a85400 !important;
+  color: #fff !important;
+}
+
 .retro-mode table {
   border: 2px solid #a8a8a8 !important;
   border-collapse: collapse !important;
diff --git a/apps/frontend/src/styles/tokens.css b/apps/frontend/src/styles/tokens.css
index d1cf73c..0bed51c 100644
--- a/apps/frontend/src/styles/tokens.css
+++ b/apps/frontend/src/styles/tokens.css
@@ -15,6 +15,7 @@
   --c-accent-fg: 255 255 255;
   --c-accent-quiet: 220 252 231;
 
+  --c-info: 29 78 216;
   --c-warn: 180 83 9;
   --c-danger: 185 28 28;
 }
@@ -36,6 +37,7 @@
   --c-accent-fg: 9 9 11;
   --c-accent-quiet: 20 83 45;
 
+  --c-info: 96 165 250;
   --c-warn: 255 176 0;
   --c-danger: 248 113 113;
 }
diff --git a/apps/frontend/tailwind.config.cjs b/apps/frontend/tailwind.config.cjs
index ff35b31..2291759 100644
--- a/apps/frontend/tailwind.config.cjs
+++ b/apps/frontend/tailwind.config.cjs
@@ -21,6 +21,7 @@ module.exports = {
         'accent-hover': token('--c-accent-hover'),
         'accent-fg': token('--c-accent-fg'),
         'accent-quiet': token('--c-accent-quiet'),
+        info: token('--c-info'),
         warn: token('--c-warn'),
         danger: token('--c-danger'),