Tim McCarthy
17160f9d9b
Start tracking a version number and a player-facing changelog, surfaced from the ☰ menu via a new About item. - frontend/src/lib/changelog.js: VERSION (bump every commit) + CHANGELOG. - AboutModal.svelte: shows the version and changelog using the shared modal CSS; closes via ×, backdrop click, or Escape. - CornerMenu.svelte: new 'ℹ️ About' menu item, modal rendered outside the menu's stacking context so it overlays correctly on every page. - AGENTS.md: documents the bump-every-commit / log-only-user-facing convention. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
83 lines
2.3 KiB
Svelte
83 lines
2.3 KiB
Svelte
<script>
|
||
import { createEventDispatcher } from 'svelte';
|
||
import { VERSION, CHANGELOG } from '../lib/changelog';
|
||
|
||
const dispatch = createEventDispatcher();
|
||
function close() { dispatch('close'); }
|
||
</script>
|
||
|
||
<svelte:window on:keydown={(e) => e.key === 'Escape' && close()} />
|
||
|
||
<div class="modal-backdrop" on:click|self={close}>
|
||
<div class="modal-box sheet-modal glass-panel about-modal">
|
||
<button class="modal-close" on:click={close} aria-label="Close">×</button>
|
||
<h3>About</h3>
|
||
<p class="about-tagline">A remote-play companion for <em>Rats with Gats</em>.</p>
|
||
<p class="about-version">Version {VERSION}</p>
|
||
|
||
<h4 class="about-heading">What's New</h4>
|
||
<ul class="changelog">
|
||
{#each CHANGELOG as entry (entry.version)}
|
||
<li class="changelog-entry">
|
||
<div class="changelog-head">
|
||
<span class="changelog-ver">v{entry.version}</span>
|
||
<span class="changelog-date text-muted">{entry.date}</span>
|
||
</div>
|
||
<ul class="changelog-changes">
|
||
{#each entry.changes as change}
|
||
<li>{change}</li>
|
||
{/each}
|
||
</ul>
|
||
</li>
|
||
{/each}
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
|
||
<style>
|
||
.about-tagline {
|
||
margin: 0.25rem 0 0.75rem;
|
||
color: var(--text-muted);
|
||
}
|
||
.about-version {
|
||
font-family: var(--font-heading);
|
||
font-weight: 700;
|
||
color: var(--accent);
|
||
margin: 0;
|
||
}
|
||
.about-heading {
|
||
margin: 1.25rem 0 0.5rem;
|
||
border-top: 1px solid var(--edge-soft);
|
||
padding-top: 1rem;
|
||
}
|
||
.changelog {
|
||
list-style: none;
|
||
margin: 0;
|
||
padding: 0;
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 1rem;
|
||
}
|
||
.changelog-head {
|
||
display: flex;
|
||
align-items: baseline;
|
||
gap: 0.6rem;
|
||
margin-bottom: 0.25rem;
|
||
}
|
||
.changelog-ver {
|
||
font-family: var(--font-heading);
|
||
font-weight: 700;
|
||
color: var(--accent);
|
||
}
|
||
.changelog-date {
|
||
font-size: 0.85rem;
|
||
}
|
||
.changelog-changes {
|
||
margin: 0;
|
||
padding-left: 1.2rem;
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 0.3rem;
|
||
}
|
||
</style>
|