diff --git a/apps/frontend/src/i18n/__tests__/locales.test.ts b/apps/frontend/src/i18n/__tests__/locales.test.ts new file mode 100644 index 0000000..7362be8 --- /dev/null +++ b/apps/frontend/src/i18n/__tests__/locales.test.ts @@ -0,0 +1,41 @@ +import { describe, expect, it } from 'vitest' +import en from '../locales/en' +import hu from '../locales/hu' + +/** + * The two bundles have to carry the same keys. + * + * A missing translation is not an error at runtime — vue-i18n falls back and the page + * renders the key itself, so `home.store.title` appears on screen looking like a bug + * somebody forgot to finish. That is exactly the kind of thing a person only notices + * after switching language, which is to say: after it has shipped. + */ +function paths (value: unknown, prefix = ''): string[] { + if (typeof value !== 'object' || value === null) return [prefix] + return Object.entries(value as Record) + .flatMap(([key, nested]) => paths(nested, prefix === '' ? key : `${prefix}.${key}`)) +} + +describe('locale bundles', () => { + const english = paths(en).sort() + const hungarian = paths(hu).sort() + + it('has something to compare', () => { + expect(english.length).toBeGreaterThan(50) + }) + + it('translates every English key into Hungarian', () => { + expect(hungarian.filter((key) => !english.includes(key))).toEqual([]) + expect(english.filter((key) => !hungarian.includes(key))).toEqual([]) + }) + + it('leaves no empty string behind', () => { + const empty = [...paths(en), ...paths(hu)].filter((key) => { + const read = (bundle: unknown) => + key.split('.').reduce((acc, part) => + (acc as Record | undefined)?.[part], bundle) + return read(en) === '' || read(hu) === '' + }) + expect(empty).toEqual([]) + }) +}) diff --git a/apps/frontend/src/i18n/locales/en.ts b/apps/frontend/src/i18n/locales/en.ts index 618d22f..d602eb2 100644 --- a/apps/frontend/src/i18n/locales/en.ts +++ b/apps/frontend/src/i18n/locales/en.ts @@ -60,6 +60,18 @@ export default { spotify: { openInSpotify: 'Open in Spotify ↗', }, + store: { + label: 'Play on your own machine', + allStores: 'All stores', + title: 'WarpEngine Client', + desc: 'Our catalog as a grid of cards on your desktop: one click installs a game into your application menu, one plays it. It sets itself up on first run.', + point1: 'Nothing to install first — no interpreter, no admin rights', + point2: 'Installed games become normal menu entries, so they start without the app running', + point3: 'Browser builds too, for titles with no download for your machine', + download: 'Download', + more: 'How it works', + platforms: 'Linux, macOS and Windows', + }, }, contact: { title: 'Contact Us', @@ -109,6 +121,7 @@ export default { readMore: 'Read more', }, catalog: { + getTheStore: 'Get the store', title: 'Our Games', subtitle: 'Discover games made for TIC-80 and other platforms, with versions playable directly in your browser!', filter: { @@ -206,7 +219,7 @@ export default { clientDesc: 'The app: the catalog as a grid of cards, one click to install a game into your application menu, one to play it. It sets the store up itself on first run, and on Windows it is the way in.', clientDownload: 'Download', - clientPlatforms: 'Linux, macOS and Windows · needs Python 3', + clientPlatforms: 'Linux, macOS and Windows · nothing to install first', clientShotAlt: 'The WarpEngine Client window: the store picker and category filters on the left, and the catalog as a grid of game cards with install and play buttons.', docs: 'Documentation', diff --git a/apps/frontend/src/i18n/locales/hu.ts b/apps/frontend/src/i18n/locales/hu.ts index 97d5ecc..8e547cf 100644 --- a/apps/frontend/src/i18n/locales/hu.ts +++ b/apps/frontend/src/i18n/locales/hu.ts @@ -60,6 +60,18 @@ export default { spotify: { openInSpotify: 'Megnyitás Spotify-ban ↗', }, + store: { + label: 'Játssz a saját gépeden', + allStores: 'Összes bolt', + title: 'WarpEngine Client', + desc: 'A katalógusunk kártyákban, az asztalodon: egy kattintás a telepítés az alkalmazásmenübe, egy az indítás. Első futáskor magát is beállítja.', + point1: 'Semmit nem kell előtte feltenni — se értelmező, se rendszergazdai jog', + point2: 'A feltelepített játék rendes menüelem lesz, tehát az app nélkül is indul', + point3: 'Böngészős buildek is, ha egy címhez nincs letöltés a gépedre', + download: 'Letöltés', + more: 'Hogyan működik', + platforms: 'Linux, macOS és Windows', + }, }, contact: { title: 'Kapcsolat', @@ -109,6 +121,7 @@ export default { readMore: 'Tovább olvasom', }, catalog: { + getTheStore: 'Töltsd le a boltot', title: 'Játékaink', subtitle: 'Fedezd fel a TIC-80-ra és más platformokra készített játékainkat, amelyeknek közvetlenül a böngésződben is kipróbálhatsz verzióit!', filter: { @@ -206,7 +219,7 @@ export default { clientDesc: 'Az alkalmazás: a katalógus kártyákban, egy kattintás a telepítés az alkalmazásmenübe, egy az indítás. Első indításkor magát a store-t is beállítja, Windowson pedig ez az út.', clientDownload: 'Letöltés', - clientPlatforms: 'Linux, macOS és Windows · Python 3 kell hozzá', + clientPlatforms: 'Linux, macOS és Windows · semmit nem kell előtte feltenni', clientShotAlt: 'A WarpEngine Client ablaka: balra a store-választó és a kategóriaszűrők, jobbra a katalógus játékkártyákban, telepítés és indítás gombokkal.', docs: 'Dokumentáció', diff --git a/apps/frontend/src/page/catalog/CatalogIndexPage.vue b/apps/frontend/src/page/catalog/CatalogIndexPage.vue index aaf31e8..a524f86 100644 --- a/apps/frontend/src/page/catalog/CatalogIndexPage.vue +++ b/apps/frontend/src/page/catalog/CatalogIndexPage.vue @@ -2,7 +2,13 @@

{{ t('catalog.title') }}

-

{{ t('catalog.subtitle') }}

+ +

{{ t('catalog.subtitle') }}

+ + {{ t('catalog.getTheStore') }} +
@@ -62,14 +68,12 @@ +
{{ t('builds.title') }} - | - - {{ t('stores.title') }} -
@@ -171,7 +175,4 @@ onMounted(() => store.fetch()) .builds-link { @apply text-sm text-gray-400 hover:text-purple-600 font-medium transition-colors; } -.builds-link-sep { - @apply text-gray-200 text-sm; -} diff --git a/apps/frontend/src/page/home/HomePage.vue b/apps/frontend/src/page/home/HomePage.vue index 29f76d4..c5b7774 100644 --- a/apps/frontend/src/page/home/HomePage.vue +++ b/apps/frontend/src/page/home/HomePage.vue @@ -66,6 +66,58 @@ + +
+
+
+ +
+
+
+
+
+ {{ t('home.store.label') }} +
+ {{ t('home.store.allStores') }} +
+ +
+
+ +
+ +
+

{{ t('home.store.title') }}

+

{{ t('home.store.desc') }}

+
    +
  • {{ t('home.store.point1') }}
    • +
  • {{ t('home.store.point2') }}
    • +
  • {{ t('home.store.point3') }}
    • +
+ +
+ + {{ t('home.store.download') }} + + + {{ t('home.store.more') }} + +
+ +

+ + {{ t('home.store.platforms') }} +

+
+
+
+
+
@@ -228,6 +280,11 @@ import { useEventStore } from '../../stores/event.store' import { useSoftwareStore } from '../../stores/software.store' import { useYoutubeStore } from '../../stores/youtube.store' import { getDefaultImageUrl } from '../../lib/softwareUtils' +import clientScreenshot from '../../assets/warpengine-client.png' + +// The releases page, not a versioned file: whoever follows it should get whatever is +// newest, and this page would otherwise need a release every time the client has one. +const CLIENT_RELEASES_URL = 'https://git.teletypegames.org/stores/warp-engine-client/releases' const { t } = useI18n() @@ -457,6 +514,73 @@ onUnmounted(() => eventStore.cleanup()) @apply relative z-10 rounded-xl overflow-hidden; } +/* Store Promo */ +.store-wrapper { + @apply relative overflow-hidden bg-gradient-to-br from-slate-900 via-slate-900 to-violet-950 rounded-3xl shadow-2xl border border-slate-800 p-6 md:p-8; +} +.store-glow { + @apply absolute -bottom-24 -right-24 w-96 h-96 bg-violet-500/10 rounded-full blur-[100px] pointer-events-none; +} +.store-header { + @apply flex items-center justify-between mb-6 relative z-10; +} +.store-header-inner { + @apply flex items-center gap-3; +} +.store-status-blob { + @apply w-3 h-3 bg-violet-500/20 rounded-full flex items-center justify-center; +} +.store-status-dot { + @apply w-1.5 h-1.5 bg-violet-400 rounded-full animate-pulse; +} +.store-label { + @apply text-xs font-bold uppercase tracking-widest text-slate-400; +} +.store-all-link { + @apply text-xs font-semibold text-violet-400 hover:text-violet-300 transition-colors; +} +.store-grid { + @apply flex flex-col lg:flex-row gap-8 relative z-10; +} +/* The screenshot leads on a wide screen and follows on a narrow one: it is what makes + the section legible at a glance, but it is not what somebody reads first on a phone. */ +.store-shot { + @apply flex-[1.4] order-last lg:order-first overflow-hidden rounded-2xl border border-white/5 shadow-inner bg-black; +} +.store-shot img { + @apply w-full h-auto block; +} +.store-info { + @apply flex-1 flex flex-col justify-center; +} +.store-title { + @apply text-2xl font-black text-white mb-3 leading-tight group-hover:text-violet-200 transition-colors; +} +.store-desc { + @apply text-slate-300 leading-relaxed mb-5; +} +.store-points { + @apply space-y-2 mb-6 text-sm text-slate-400; +} +.store-points li { + @apply flex items-start gap-2; +} +.store-points i { + @apply text-violet-400 mt-1 text-xs; +} +.store-actions { + @apply flex flex-wrap gap-3; +} +.store-btn-primary { + @apply inline-flex items-center gap-2 px-6 py-3 bg-white text-slate-900 font-black rounded-xl transition-all hover:scale-[1.02] hover:bg-violet-50 active:scale-95 shadow-xl; +} +.store-btn-secondary { + @apply inline-flex items-center gap-2 px-6 py-3 bg-violet-500/10 text-white border border-violet-400/30 font-bold rounded-xl transition-all hover:bg-violet-500/20; +} +.store-platforms { + @apply flex items-center gap-2 mt-5 text-xs text-slate-500; +} + /* Nav Grid */ .nav-grid { @apply grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6; diff --git a/apps/frontend/src/styles/global.css b/apps/frontend/src/styles/global.css index 3851beb..33a46e9 100644 --- a/apps/frontend/src/styles/global.css +++ b/apps/frontend/src/styles/global.css @@ -52,6 +52,10 @@ body { @apply btn-hero text-indigo-900 hover:bg-indigo-50; } + .btn-hero-purple { + @apply btn-hero text-purple-700 hover:bg-purple-50; + } + .btn-primary { @apply inline-flex items-center justify-center font-bold py-3 px-8 rounded-xl transition-all shadow-lg; } diff --git a/apps/frontend/src/styles/retro.css b/apps/frontend/src/styles/retro.css index 04e52b3..49b49f1 100644 --- a/apps/frontend/src/styles/retro.css +++ b/apps/frontend/src/styles/retro.css @@ -365,6 +365,7 @@ .retro-mode .btn-hero, .retro-mode .btn-hero-teal, .retro-mode .btn-hero-indigo, +.retro-mode .btn-hero-purple, .retro-mode .btn-primary { background-color: #00a800 !important; color: #000 !important;