tools/teletypegames
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

releases tweaks

Browse Source
This commit is contained in:
mr.zero
2026-03-20 12:08:30 +01:00
parent 6d90d69e64
commit cb9b92f444
2 changed files with 78 additions and 56 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/frontend/src/pages/catalog.astro
+63 -54
View File
@@ -26,7 +26,10 @@ const softwares = json.softwares;
</div>
<div class="grid grid-cols-1 gap-8 software-list">
{softwares.map(({ software, releases, latestRelease }) => (
{softwares.map(({ software, releases, latestRelease }) => {
const stableReleases = releases.filter((r: any) => !r.version.startsWith('dev-'));
const devReleases = releases.filter((r: any) => r.version.startsWith('dev-'));
return (
<div class="software-card" data-status={software.status}>
<div class="software-card-content">
<div class="flex items-center gap-3 mb-2">
@@ -70,7 +73,7 @@ const softwares = json.softwares;
<summary class="releases-summary">
Releases ({releases.length})
</summary>
<div class="mt-4">
{/* Desktop Table View */}
<div class="desktop-releases">
@@ -78,38 +81,40 @@ const softwares = json.softwares;
<thead class="releases-thead">
<tr>
<th scope="col" class="releases-th">Version</th>
<th scope="col" class="releases-th">Date</th>
<th scope="col" class="releases-th text-right">Actions</th>
<th scope="col" class="releases-th">Created</th>
<th scope="col" class="releases-th">Updated</th>
<th scope="col" class="releases-th !text-right">Actions</th>
</tr>
</thead>
<tbody class="releases-tbody">
{releases.map((release) => (
{stableReleases.map((release: any) => (
<tr>
<td class="releases-td font-medium text-gray-900">{release.version}</td>
<td class="releases-td text-gray-500">
{new Date(release.CreatedAt).toLocaleDateString('en-US')}
</td>
<td class="releases-td text-gray-500">{new Date(release.CreatedAt).toLocaleDateString('en-US')}</td>
<td class="releases-td text-gray-500">{new Date(release.UpdatedAt).toLocaleDateString('en-US')}</td>
<td class="releases-td text-right">
{release.htmlFolderPath ? (
<a href={BASE + release.htmlFolderPath} target="_blank" class="action-link-purple">▶ Play</a>
) : (
<span class="action-link-disabled">▶ Play</span>
)}
{release.cartridgePath ? (
<a href={BASE + release.cartridgePath} target="_blank" class="action-link-blue">Download</a>
) : (
<span class="action-link-disabled">Download</span>
)}
{release.sourcePath ? (
<a href={BASE + release.sourcePath} target="_blank" class="action-link-green">Source</a>
) : (
<span class="action-link-disabled">Source</span>
)}
{release.docsFolderPath ? (
<a href={BASE + release.docsFolderPath} target="_blank" class="action-link-yellow">Docs</a>
) : (
<span class="action-link-disabled">Docs</span>
)}
{release.htmlFolderPath ? (<a href={BASE + release.htmlFolderPath} target="_blank" class="action-link-purple">▶ Play</a>) : (<span class="action-link-disabled">▶ Play</span>)}
{release.cartridgePath ? (<a href={BASE + release.cartridgePath} target="_blank" class="action-link-blue">Download</a>) : (<span class="action-link-disabled">Download</span>)}
{release.sourcePath ? (<a href={BASE + release.sourcePath} target="_blank" class="action-link-green">Source</a>) : (<span class="action-link-disabled">Source</span>)}
{release.docsFolderPath ? (<a href={BASE + release.docsFolderPath} target="_blank" class="action-link-yellow">Docs</a>) : (<span class="action-link-disabled">Docs</span>)}
</td>
</tr>
))}
{devReleases.length > 0 && (
<tr>
<td colspan="4" class="releases-td text-xs font-bold text-gray-400 uppercase tracking-wider pt-3 pb-1">Development Releases</td>
</tr>
)}
{devReleases.map((release: any) => (
<tr class="bg-yellow-50/50">
<td class="releases-td font-medium text-yellow-800">{release.version}</td>
<td class="releases-td text-gray-500">{new Date(release.CreatedAt).toLocaleDateString('en-US')}</td>
<td class="releases-td text-gray-500">{new Date(release.UpdatedAt).toLocaleDateString('en-US')}</td>
<td class="releases-td text-right">
{release.htmlFolderPath ? (<a href={BASE + release.htmlFolderPath} target="_blank" class="action-link-purple">▶ Play</a>) : (<span class="action-link-disabled">▶ Play</span>)}
{release.cartridgePath ? (<a href={BASE + release.cartridgePath} target="_blank" class="action-link-blue">Download</a>) : (<span class="action-link-disabled">Download</span>)}
{release.sourcePath ? (<a href={BASE + release.sourcePath} target="_blank" class="action-link-green">Source</a>) : (<span class="action-link-disabled">Source</span>)}
{release.docsFolderPath ? (<a href={BASE + release.docsFolderPath} target="_blank" class="action-link-yellow">Docs</a>) : (<span class="action-link-disabled">Docs</span>)}
</td>
</tr>
))}
@@ -119,33 +124,36 @@ const softwares = json.softwares;
{/* Mobile Stacked View */}
<div class="mobile-releases">
{releases.map((release) => (
{stableReleases.map((release: any) => (
<div class="release-mobile-card">
<div class="release-mobile-header">
<span class="release-mobile-version">v{release.version}</span>
<span class="release-mobile-date">{new Date(release.CreatedAt).toLocaleDateString('en-US')}</span>
<span class="release-mobile-version">{release.version}</span>
<span class="release-mobile-date">Created: {new Date(release.CreatedAt).toLocaleDateString('en-US')}</span>
<span class="release-mobile-date">Updated: {new Date(release.UpdatedAt).toLocaleDateString('en-US')}</span>
</div>
<div class="release-mobile-grid">
{release.htmlFolderPath ? (
<a href={BASE + release.htmlFolderPath} target="_blank" class="mobile-btn-play">▶ Play</a>
) : (
<span class="mobile-btn-disabled">▶ Play</span>
)}
{release.cartridgePath ? (
<a href={BASE + release.cartridgePath} target="_blank" class="mobile-btn-download">Download</a>
) : (
<span class="mobile-btn-disabled">Download</span>
)}
{release.sourcePath ? (
<a href={BASE + release.sourcePath} target="_blank" class="mobile-btn-source">Source</a>
) : (
<span class="mobile-btn-disabled">Source</span>
)}
{release.docsFolderPath ? (
<a href={BASE + release.docsFolderPath} target="_blank" class="mobile-btn-docs">Docs</a>
) : (
<span class="mobile-btn-disabled">Docs</span>
)}
{release.htmlFolderPath ? (<a href={BASE + release.htmlFolderPath} target="_blank" class="mobile-btn-play">▶ Play</a>) : (<span class="mobile-btn-disabled">▶ Play</span>)}
{release.cartridgePath ? (<a href={BASE + release.cartridgePath} target="_blank" class="mobile-btn-download">Download</a>) : (<span class="mobile-btn-disabled">Download</span>)}
{release.sourcePath ? (<a href={BASE + release.sourcePath} target="_blank" class="mobile-btn-source">Source</a>) : (<span class="mobile-btn-disabled">Source</span>)}
{release.docsFolderPath ? (<a href={BASE + release.docsFolderPath} target="_blank" class="mobile-btn-docs">Docs</a>) : (<span class="mobile-btn-disabled">Docs</span>)}
</div>
</div>
))}
{devReleases.length > 0 && (
<div class="text-xs font-bold text-gray-400 uppercase tracking-wider pt-3 pb-1">Development Releases</div>
)}
{devReleases.map((release: any) => (
<div class="release-mobile-card border-yellow-200 bg-yellow-50">
<div class="release-mobile-header">
<span class="release-mobile-version text-yellow-800">{release.version}</span>
<span class="release-mobile-date">Created: {new Date(release.CreatedAt).toLocaleDateString('en-US')}</span>
<span class="release-mobile-date">Updated: {new Date(release.UpdatedAt).toLocaleDateString('en-US')}</span>
</div>
<div class="release-mobile-grid">
{release.htmlFolderPath ? (<a href={BASE + release.htmlFolderPath} target="_blank" class="mobile-btn-play">▶ Play</a>) : (<span class="mobile-btn-disabled">▶ Play</span>)}
{release.cartridgePath ? (<a href={BASE + release.cartridgePath} target="_blank" class="mobile-btn-download">Download</a>) : (<span class="mobile-btn-disabled">Download</span>)}
{release.sourcePath ? (<a href={BASE + release.sourcePath} target="_blank" class="mobile-btn-source">Source</a>) : (<span class="mobile-btn-disabled">Source</span>)}
{release.docsFolderPath ? (<a href={BASE + release.docsFolderPath} target="_blank" class="mobile-btn-docs">Docs</a>) : (<span class="mobile-btn-disabled">Docs</span>)}
</div>
</div>
))}
@@ -154,7 +162,8 @@ const softwares = json.softwares;
</details>
</div>
</div>
))}
)
})}
</div>
</main>
</Layout>
@@ -203,7 +212,7 @@ const softwares = json.softwares;
@apply bg-white shadow-lg relative rounded-xl overflow-hidden hover:shadow-2xl transition-shadow duration-300;
}
.software-card-content {
@apply p-6 pr-28 sm:pr-6;
@apply p-6;
}
.software-title {
@apply text-2xl font-semibold mb-2;
@@ -215,7 +224,7 @@ const softwares = json.softwares;
@apply text-sm text-gray-500 mb-4;
}
.latest-release-actions {
@apply absolute top-4 right-4 flex flex-col sm:flex-row gap-1 z-10;
@apply flex flex-row flex-wrap gap-1 mb-4 sm:absolute sm:top-4 sm:right-4 sm:flex-col sm:mb-0 z-10;
}
/* Small Action Buttons */
apps/frontend/src/pages/index.astro
+15 -2
View File
@@ -68,11 +68,18 @@ try {
const BASE = "https://games.teletype.hu";
const API_HIGHLIGHTED = BASE + "/api/software/highlighted";
let highlightedSoftware = null;
let highlightedStableRelease = null;
try {
const res = await fetch(API_HIGHLIGHTED);
if (res.ok) {
highlightedSoftware = await res.json();
if (highlightedSoftware?.releases) {
const stableReleases = highlightedSoftware.releases
.filter((r: any) => !r.version.startsWith('dev-'))
.sort((a: any, b: any) => new Date(b.UpdatedAt).getTime() - new Date(a.UpdatedAt).getTime());
highlightedStableRelease = stableReleases[0] ?? null;
}
}
} catch (e) {
console.error('Failed to fetch highlighted software:', e);
@@ -141,13 +148,16 @@ const YOUTUBE_CHANNEL_ID = import.meta.env.YOUTUBE_CHANNEL_ID;
<div class="flex items-center gap-2 mb-4">
<span class="featured-badge">Featured Game</span>
<span class="status-badge status-released">{highlightedSoftware.software.status}</span>
{highlightedStableRelease && (
<span class="featured-version-badge">{highlightedStableRelease.version}</span>
)}
</div>
<h2 class="featured-title">{highlightedSoftware.software.title}</h2>
<p class="featured-desc">{highlightedSoftware.software.desc}</p>
<div class="flex flex-wrap gap-4 mt-8">
{highlightedSoftware.webPlayableRelease && (
<a href={BASE + highlightedSoftware.webPlayableRelease.htmlFolderPath} target="_blank" class="featured-btn-play">
{highlightedStableRelease?.htmlFolderPath && (
<a href={BASE + highlightedStableRelease.htmlFolderPath} target="_blank" class="featured-btn-play">
▶ Play in Browser
</a>
)}
@@ -331,6 +341,9 @@ const YOUTUBE_CHANNEL_ID = import.meta.env.YOUTUBE_CHANNEL_ID;
.status-demo { @apply bg-blue-500/20 text-blue-300 border border-blue-500/30; }
.status-development { @apply bg-yellow-500/20 text-yellow-300 border border-yellow-500/30; }
.status-archived { @apply bg-gray-500/20 text-gray-300 border border-gray-500/30; }
.featured-version-badge {
@apply px-2 py-0.5 rounded text-[10px] font-bold bg-white/10 text-white/70 border border-white/20;
}
/* Countdown Card */