Initial commit: Dostalgia — DOS game hub
- Go backend (single binary) with embedded Svelte frontend - JSON-per-game storage (no database) - .jsdos bundle creation on upload - Dark phosphor-green theme (#33FF33) - js-dos v8 emulator integration - Sockdrive support for games >80MB - IGDB placeholder for future artwork scraping - Docker deployment ready
This commit is contained in:
David Alvarez
@@ -0,0 +1,108 @@
|
||||
<script>
|
||||
import { push } from "../lib/router.js";
|
||||
|
||||
let { game } = $props();
|
||||
|
||||
function navigate() {
|
||||
push(`/game/${game.id}`);
|
||||
}
|
||||
</script>
|
||||
|
||||
<button class="card crt-hover" onclick={navigate}>
|
||||
<div class="cover">
|
||||
{#if game.has_cover}
|
||||
<img src={`/games/${game.id}/cover.jpg`} alt={game.title} loading="lazy" />
|
||||
{:else}
|
||||
<div class="cover-placeholder">
|
||||
<span class="cover-icon">💾</span>
|
||||
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
<div class="info">
|
||||
<h3>{game.title}</h3>
|
||||
{#if game.year}
|
||||
<span class="year">{game.year}</span>
|
||||
{/if}
|
||||
{#if game.genre}
|
||||
<span class="genre">{game.genre}</span>
|
||||
{/if}
|
||||
</div>
|
||||
{#if game.ready}
|
||||
<div class="badge">Ready</div>
|
||||
{/if}
|
||||
</button>
|
||||
|
||||
<style>
|
||||
.card {
|
||||
background: var(--surface);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius);
|
||||
overflow: hidden;
|
||||
transition: all 0.2s ease;
|
||||
cursor: pointer;
|
||||
text-align: left;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
}
|
||||
.card:hover {
|
||||
border-color: var(--phosphor-dim);
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 20px rgba(51, 255, 51, 0.1);
|
||||
}
|
||||
.cover {
|
||||
aspect-ratio: 3/4;
|
||||
background: var(--bg-elevated);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
overflow: hidden;
|
||||
}
|
||||
.cover img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
.cover-placeholder {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
color: var(--text-dim);
|
||||
}
|
||||
.cover-icon {
|
||||
font-size: 2.5rem;
|
||||
}
|
||||
.info {
|
||||
padding: 12px;
|
||||
flex: 1;
|
||||
}
|
||||
.info h3 {
|
||||
font-size: 0.95rem;
|
||||
margin-bottom: 4px;
|
||||
color: var(--text-bright);
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
.year, .genre {
|
||||
font-size: 0.8rem;
|
||||
color: var(--text-dim);
|
||||
display: inline-block;
|
||||
margin-right: 8px;
|
||||
}
|
||||
.badge {
|
||||
position: absolute;
|
||||
top: 8px;
|
||||
right: 8px;
|
||||
background: var(--phosphor-dark);
|
||||
color: var(--phosphor);
|
||||
font-size: 0.7rem;
|
||||
padding: 2px 8px;
|
||||
border-radius: 10px;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.05em;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,65 @@
|
||||
<script>
|
||||
import { push } from "./router.js";
|
||||
</script>
|
||||
|
||||
<header class="header">
|
||||
<div class="header-inner">
|
||||
<a href="#/" class="logo" onclick={(e) => { e.preventDefault(); push("/"); }}>
|
||||
<svg class="logo-icon" width="36" height="36" viewBox="0 0 36 36" fill="none">
|
||||
<rect x="4" y="6" width="28" height="22" rx="2" fill="#33FF33" opacity="0.15"/>
|
||||
<rect x="6" y="8" width="24" height="16" fill="#0A0A0A"/>
|
||||
<rect x="8" y="10" width="20" height="10" fill="#33FF33" opacity="0.3"/>
|
||||
<rect x="10" y="12" width="6" height="4" fill="#33FF33" opacity="0.6"/>
|
||||
<rect x="18" y="12" width="6" height="4" fill="#33FF33" opacity="0.4"/>
|
||||
<rect x="10" y="24" width="16" height="3" fill="#33FF33" opacity="0.2"/>
|
||||
<rect x="12" y="29" width="12" height="2" fill="#33FF33" opacity="0.1"/>
|
||||
</svg>
|
||||
<span class="logo-text">DOSTALGIA</span>
|
||||
</a>
|
||||
<nav>
|
||||
<button class="btn" onclick={() => push("/")}>Library</button>
|
||||
</nav>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<style>
|
||||
.header {
|
||||
height: var(--header-height);
|
||||
border-bottom: 1px solid var(--border);
|
||||
background: var(--bg-elevated);
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 100;
|
||||
}
|
||||
.header-inner {
|
||||
max-width: var(--max-width);
|
||||
margin: 0 auto;
|
||||
padding: 0 24px;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.logo {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
}
|
||||
.logo-icon {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.logo-text {
|
||||
font-family: var(--font-mono);
|
||||
font-size: 1.4rem;
|
||||
font-weight: 700;
|
||||
color: var(--phosphor);
|
||||
letter-spacing: 0.15em;
|
||||
animation: phosphor-pulse 3s ease-in-out infinite;
|
||||
}
|
||||
nav {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,81 @@
|
||||
/** API client for Dostalgia backend. */
|
||||
|
||||
const BASE = import.meta.env.PROD ? "" : ""; // Proxy handles it in dev
|
||||
|
||||
async function request(path, options = {}) {
|
||||
const res = await fetch(`${BASE}${path}`, {
|
||||
headers: { "Content-Type": "application/json", ...options.headers },
|
||||
...options,
|
||||
});
|
||||
if (!res.ok) {
|
||||
const err = await res.json().catch(() => ({ detail: res.statusText }));
|
||||
throw new Error(err.detail || `HTTP ${res.status}`);
|
||||
}
|
||||
return res.json();
|
||||
}
|
||||
|
||||
/** Fetch game list */
|
||||
export async function listGames(params = {}) {
|
||||
const qs = new URLSearchParams();
|
||||
if (params.search) qs.set("search", params.search);
|
||||
if (params.genre) qs.set("genre", params.genre);
|
||||
if (params.limit) qs.set("limit", params.limit);
|
||||
if (params.offset) qs.set("offset", params.offset);
|
||||
return request(`/api/games?${qs}`);
|
||||
}
|
||||
|
||||
/** Fetch single game */
|
||||
export async function getGame(id) {
|
||||
return request(`/api/games/${id}`);
|
||||
}
|
||||
|
||||
/** Update game metadata */
|
||||
export async function updateGame(id, data) {
|
||||
return request(`/api/games/${id}`, {
|
||||
method: "PATCH",
|
||||
body: JSON.stringify(data),
|
||||
});
|
||||
}
|
||||
|
||||
/** Delete a game */
|
||||
export async function deleteGame(id) {
|
||||
return request(`/api/games/${id}`, { method: "DELETE" });
|
||||
}
|
||||
|
||||
/** Upload a game ZIP */
|
||||
export async function uploadGame(file, title) {
|
||||
const form = new FormData();
|
||||
form.append("file", file);
|
||||
if (title) form.append("title", title);
|
||||
|
||||
const res = await fetch(`${BASE}/api/upload`, {
|
||||
method: "POST",
|
||||
body: form,
|
||||
});
|
||||
if (!res.ok) {
|
||||
const err = await res.json().catch(() => ({ detail: res.statusText }));
|
||||
throw new Error(err.detail || `HTTP ${res.status}`);
|
||||
}
|
||||
return res.json();
|
||||
}
|
||||
|
||||
/** Search IGDB (placeholder) */
|
||||
export async function searchIGDB(query) {
|
||||
return request(`/api/igdb/search?query=${encodeURIComponent(query)}`);
|
||||
}
|
||||
|
||||
/** Get artwork URL for a path — returns proxy URL or placeholder */
|
||||
export function artworkUrl(path) {
|
||||
if (!path) return null;
|
||||
if (path.startsWith("http")) return path;
|
||||
return `/artwork/${path}`;
|
||||
}
|
||||
|
||||
/** Get game bundle URL */
|
||||
export function bundleUrl(game) {
|
||||
if (!game) return null;
|
||||
if (game.bundle_type === "sockdrive") {
|
||||
return `/api/sockdrive/${game.slug}/file?path=.jsdos/dosbox.conf`;
|
||||
}
|
||||
return `/games/${game.slug}.jsdos`;
|
||||
}
|
||||
@@ -0,0 +1,9 @@
|
||||
/** Simple hash-based router for SPA. */
|
||||
|
||||
export function push(path) {
|
||||
window.location.hash = "#" + path;
|
||||
}
|
||||
|
||||
export function replace(path) {
|
||||
window.location.replace("#" + path);
|
||||
}
|
||||
Reference in New Issue
Block a user