From f8c9cfe99604985430f46d0d909055427adcb549 Mon Sep 17 00:00:00 2001 From: Zsolt Tasnadi Date: Tue, 18 Aug 2026 18:12:46 +0200 Subject: [PATCH] new stores page --- apps/frontend/src/i18n/locales/en.ts | 21 ++-- apps/frontend/src/i18n/locales/hu.ts | 21 ++-- .../src/page/stores/StoresIndexPage.vue | 98 +++++++++++-------- 3 files changed, 80 insertions(+), 60 deletions(-) diff --git a/apps/frontend/src/i18n/locales/en.ts b/apps/frontend/src/i18n/locales/en.ts index e5b4cbf..2bd9e90 100644 --- a/apps/frontend/src/i18n/locales/en.ts +++ b/apps/frontend/src/i18n/locales/en.ts @@ -199,18 +199,19 @@ export default { subtitle: 'Which engines build for which platforms.', }, stores: { - title: 'Stores', - subtitle: 'Our games on your own machine, kept up to date.', - lead: 'Two stores put our catalog on the two things that play it: a Batocera box, and RetroArch on anything else — desktop Linux, Windows, macOS, Android, a Steam Deck or a handheld. Both download the games straight from this site with box art, add them to the device\'s own library, and can be re-run any time to pick up new releases. Python 3 standard library only — nothing to install alongside them.', - gui: 'Graphical client', - clientTitle: 'A window, if you would rather not type', - clientDesc: 'WarpEngine Store is a small desktop application that does everything the command line does: the catalog as a grid of cards, one click to install a game into your own application menu, one to play it, one to remove it. It is also the way in on Windows, where `curl … | sh` does not exist.', + title: 'WarpEngine Store', + subtitle: 'Our games on your own machine, kept up to date — as an app, a command line, or your console\'s own library.', + lead: 'Our whole catalog on your own machine, kept up to date. The quickest way in is the app: install it, and games land in your application menu like anything else you have installed. If a window is the wrong shape — a server, a script, or a console with its own library — there is a command line for desktops, and integrations that put our games into Batocera\'s and RetroArch\'s own libraries. All of it downloads straight from this site with box art, and all of it uses nothing but the Python 3 standard library.', + clientTitle: 'Get WarpEngine Store', + clientDesc: 'A small desktop application: the catalog as a grid of cards, one click to install a game into your own application menu, one to play it, one to remove it. Nothing to set up first — it downloads the store itself on first run — and on Windows it is the way in, because `curl … | sh` does not exist there.', + clientPlatforms: 'Linux, macOS and Windows', clientPointSetup: 'Sets the store up itself on first run — nothing to install beforehand.', clientPointBrowse: 'Filter by platform, by what is installed, or by what has an update.', clientPointSame: 'The same store underneath, so the command line keeps working on the same games.', clientDownload: 'Download the app', clientNote: 'Python 3 has to be on the machine, as it does for the command line — the store itself is a Python program and the window drives it. The macOS build is signed but not notarised, so macOS asks before opening it the first time; the download page says how.', - chooseTitle: 'Pick your device', + chooseTitle: 'Other ways in', + chooseDesc: 'The same catalog and the same engine underneath, for the machines where a window is the wrong shape: a command line for scripts and servers, and integrations that put our games into a console\'s own library.', repo: 'Git repository', docs: 'Documentation', installTitle: 'Install', @@ -224,11 +225,11 @@ export default { engineDesc: 'Nothing here is specific to us. Each store is just a config file on top of an open engine that works with any WarpEngine-based site: point it at your own catalog, give it a name and a folder of its own, and your games land on a device the same way. The two engines share warpstore, which does the catalog side for both, so a third kind of device is an adapter and a config rather than a new program. Several stores can live side by side on one machine without touching each other\'s games.', copy: 'Copy', desktop: { - name: 'This computer', + name: 'Desktop CLI', site: 'Teletype Games', - tagline: 'Linux, macOS or Windows', + tagline: 'For scripts and servers', installDesc: 'Run this on the computer you want to play on. It downloads the games, installs them under your own user account and adds them to your application menu — no administrator rights, nothing installed system-wide.', - installNote: 'The native builds are tens of megabytes each, so the first run takes a while. Games we have no native build for get an entry that opens the browser version instead, and those need the network to play. A window for all this is available too — the graphical client installs the store itself, which is the way in on Windows.', + installNote: 'The native builds are tens of megabytes each, so the first run takes a while. Games we have no native build for get an entry that opens the browser version instead, and those need the network to play. This is the same store the app above installs, so the two are interchangeable on one machine.', useDesc: 'The store has a small CLI, and `paths` shows where things went on your machine:', }, batocera: { diff --git a/apps/frontend/src/i18n/locales/hu.ts b/apps/frontend/src/i18n/locales/hu.ts index 8c79f31..047951c 100644 --- a/apps/frontend/src/i18n/locales/hu.ts +++ b/apps/frontend/src/i18n/locales/hu.ts @@ -199,18 +199,19 @@ export default { subtitle: 'Melyik engine melyik platformra fordít.', }, stores: { - title: 'Store-ok', - subtitle: 'A játékaink a saját gépeden, mindig frissen.', - lead: 'Két store teszi fel a katalógusunkat arra a kettőre, ami le is játssza: egy Batocera gépre, és RetroArch-ra minden máson — asztali Linuxon, Windowson, macOS-en, Androidon, Steam Decken vagy egy kézikonzolon. Mindkettő közvetlenül erről az oldalról tölti le a játékokat borítóképpel, felveszi őket a gép saját könyvtárába, és bármikor újrafuttatható az új kiadásokért. Csak a Python 3 alapkönyvtárát használják — nem kell mellé semmit telepíteni.', - gui: 'Grafikus kliens', - clientTitle: 'Ablak, ha nem szeretnél gépelni', - clientDesc: 'A WarpEngine Store egy kis asztali alkalmazás, ami mindent tud, amit a parancssor: a katalógus kártyákban, egy kattintás a telepítés a saját alkalmazásmenüdbe, egy az indítás, egy az eltávolítás. Windowson ez az egyetlen út is, mert ott a `curl … | sh` nem létezik.', + title: 'WarpEngine Store', + subtitle: 'A játékaink a saját gépeden, mindig frissen — alkalmazásként, parancssorból vagy a konzolod saját könyvtárában.', + lead: 'A teljes katalógusunk a saját gépeden, mindig frissen. A legrövidebb út az alkalmazás: telepítsd, és a játékok ugyanúgy megjelennek az alkalmazásmenüdben, mint bármi más. Ahol az ablak a rossz forma — szerveren, szkriptből, vagy egy konzolon, aminek saját könyvtára van —, ott van parancssor asztali gépekre, és integráció, ami a Batocera, illetve a RetroArch saját könyvtárába teszi a játékainkat. Mindegyik közvetlenül erről az oldalról töltődik le, borítóképpel, és mindegyikhez elég a Python 3 alapkészlete.', + clientTitle: 'Töltsd le a WarpEngine Store-t', + clientDesc: 'Egy kis asztali alkalmazás: a katalógus kártyákban, egy kattintás a telepítés a saját alkalmazásmenüdbe, egy az indítás, egy az eltávolítás. Előre semmit nem kell beállítani — első indításkor magát a store-t is letölti —, Windowson pedig ez az út, mert ott a `curl … | sh` nem létezik.', + clientPlatforms: 'Linux, macOS és Windows', clientPointSetup: 'Első indításkor magát a store-t is beállítja — előre semmit nem kell telepíteni.', clientPointBrowse: 'Szűrhetsz platformra, a telepítettekre vagy arra, amihez frissítés van.', clientPointSame: 'Alatta ugyanaz a store, tehát a parancssor ugyanazokon a játékokon dolgozik tovább.', clientDownload: 'Alkalmazás letöltése', clientNote: 'Python 3 kell a gépre, ugyanúgy, mint a parancssorhoz — a store maga egy Python program, az ablak csak vezérli. A macOS-csomag aláírt, de nem notarizált, ezért a rendszer az első megnyitás előtt rákérdez; a letöltési oldal leírja, hogyan.', - chooseTitle: 'Válaszd ki a gépedet', + chooseTitle: 'További utak', + chooseDesc: 'Ugyanaz a katalógus és ugyanaz a motor alatta, azokra a gépekre, ahol az ablak a rossz forma: parancssor szkriptekhez és szerverekhez, meg integrációk, amik a konzol saját könyvtárába teszik a játékainkat.', repo: 'Git tároló', docs: 'Dokumentáció', installTitle: 'Telepítés', @@ -224,11 +225,11 @@ export default { engineDesc: 'Itt semmi sem ránk van szabva. Mindkét store csak egy konfigurációs fájl egy nyílt motor fölött, ami bármilyen WarpEngine alapú oldallal működik: állítsd a saját katalógusodra, adj neki nevet és saját mappát, és a játékaid ugyanígy kerülnek fel egy gépre. A két motor a warpstore-on osztozik, ami mindkettőnek a katalógus-oldalt viszi, tehát egy harmadik fajta gép már csak egy adapter és egy konfiguráció, nem új program. Egy gépen több store is megfér egymás mellett anélkül, hogy egymás játékaihoz nyúlnának.', copy: 'Másolás', desktop: { - name: 'Ez a gép', + name: 'Desktop CLI', site: 'Teletype Games', - tagline: 'Linux, macOS vagy Windows', + tagline: 'Szkriptekhez és szerverekhez', installDesc: 'Futtasd azon a gépen, amin játszani szeretnél. Letölti a játékokat, a saját felhasználód alá telepíti őket, és felveszi az alkalmazás-menüdbe — nem kell rendszergazdai jog, és semmi nem kerül a rendszerbe.', - installNote: 'A natív buildek egyenként több tíz megabájtosak, ezért az első futás eltart egy ideig. Amihez nincs natív buildünk, ahhoz a böngészős változatot megnyitó bejegyzés kerül a menübe — azokhoz internet kell. Van hozzá ablak is: a grafikus kliens magát a store-t is telepíti, és Windowson ez a bejárat.', + installNote: 'A natív buildek egyenként több tíz megabájtosak, ezért az első futás eltart egy ideig. Amihez nincs natív buildünk, ahhoz a böngészős változatot megnyitó bejegyzés kerül a menübe — azokhoz internet kell. Ez ugyanaz a store, amit a fenti alkalmazás is telepít, tehát a kettő felváltva használható egy gépen.', useDesc: 'A store-nak van egy egyszerű CLI-je, a `paths` pedig megmutatja, hova került minden a gépeden:', }, batocera: { diff --git a/apps/frontend/src/page/stores/StoresIndexPage.vue b/apps/frontend/src/page/stores/StoresIndexPage.vue index e01d03c..f398328 100644 --- a/apps/frontend/src/page/stores/StoresIndexPage.vue +++ b/apps/frontend/src/page/stores/StoresIndexPage.vue @@ -11,10 +11,44 @@

{{ t('stores.lead') }}

- + +
+

+ {{ t('stores.clientTitle') }} +

+

{{ t('stores.clientDesc') }}

+ +
+ + {{ t('stores.clientDownload') }} + + + {{ t('stores.repo') }} + + + {{ t('stores.docs') }} + +
+

+ + {{ t('stores.clientPlatforms') }} +

+

{{ t('stores.clientNote') }}

+
+ +

{{ t('stores.chooseTitle') }}

+

{{ t('stores.chooseDesc') }}

- -
-

- {{ t('stores.clientTitle') }} -

-

{{ t('stores.clientDesc') }}

- -
- - {{ t('stores.clientDownload') }} - - - {{ t('stores.repo') }} - - - {{ t('stores.docs') }} - -
-

{{ t('stores.clientNote') }}

-
-

1 {{ t('stores.installTitle') }} @@ -196,7 +198,6 @@ const devices = [ wikiUrl: `${CONFIG.wikiBase}/stores/ttg-desktop-store`, installCmd: `curl -fsSL ${FORGE}/ttg-desktop-store/raw/branch/master/install.sh | sh`, afterInstallCmd: '', - guiUrl: CLIENT.releasesUrl, uninstallCmd: `curl -fsSL ${FORGE}/ttg-desktop-store/raw/branch/master/uninstall.sh | sh`, cliSnippet: [ `${DESKTOP_CLI} paths # where things go on this machine`, @@ -230,9 +231,9 @@ const initial = devices.some((d) => d.id === route.query.device) : 'desktop' const device = ref(initial) const current = computed(() => devices.find((d) => d.id === device.value) ?? devices[0]) -// Only the desktop store has a window; the other two run on devices with no desktop -// to put one on. -const client = computed(() => (device.value === 'desktop' ? CLIENT : null)) +// The app is not tied to a device tab: it drives whichever store the site's registry +// offers, so it stands above the chooser rather than inside it. +const client = CLIENT function select(id: DeviceId) { device.value = id @@ -310,8 +311,25 @@ const engines = [ .st-engine { @apply bg-gray-50; } -.st-client { - @apply bg-emerald-50/60 border-emerald-100; +/* The app leads the page, so it is the one section that looks like an offer rather + than a paragraph. */ +.st-app { + @apply bg-gradient-to-br from-emerald-50 to-teal-50 border-emerald-200; +} +.st-app-title { + @apply text-2xl font-bold text-gray-900 mb-2 flex items-center gap-3; +} +.st-app-icon { + @apply text-emerald-500 text-xl; +} +.st-app-lead { + @apply text-gray-700 text-lg leading-relaxed mb-4; +} +.st-app-platforms { + @apply flex items-center gap-2 text-sm text-gray-500 mt-4; +} +.st-link-cta { + @apply bg-emerald-600 text-white hover:bg-emerald-700 text-base px-5 py-2.5 font-semibold; } .st-client-points { @apply space-y-2 mb-5;