429 lines
16 KiB
HTML
429 lines
16 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
<title>Game Sessions — Orison Reach</title>
|
|
<style>
|
|
:root {
|
|
--void: #171513;
|
|
--void-soft: #211e1a;
|
|
--panel: #2a2520;
|
|
--paper: #e8dcc4;
|
|
--paper-deep: #cbbd9e;
|
|
--ink: #2c231c;
|
|
--text: #e9dfca;
|
|
--muted: #a89d89;
|
|
--brass: #b88a43;
|
|
--rust: #94452f;
|
|
--moss: #70794e;
|
|
--oxygen: #86a5a4;
|
|
--line: rgba(232, 220, 196, .18);
|
|
--shadow: 0 22px 70px rgba(0,0,0,.42);
|
|
--serif: Georgia, "Times New Roman", serif;
|
|
--sans: Inter, ui-sans-serif, system-ui, -apple-system, sans-serif;
|
|
--mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
|
|
}
|
|
* { box-sizing: border-box; }
|
|
html { scroll-behavior: smooth; }
|
|
body {
|
|
margin: 0;
|
|
color: var(--text);
|
|
background:
|
|
radial-gradient(circle at 12% 8%, rgba(134,165,164,.08), transparent 26rem),
|
|
linear-gradient(rgba(255,255,255,.018) 1px, transparent 1px),
|
|
linear-gradient(90deg, rgba(255,255,255,.014) 1px, transparent 1px),
|
|
var(--void);
|
|
background-size: auto, 28px 28px, 28px 28px, auto;
|
|
font-family: var(--sans);
|
|
line-height: 1.7;
|
|
}
|
|
body::before {
|
|
content: "";
|
|
position: fixed;
|
|
inset: 0;
|
|
pointer-events: none;
|
|
opacity: .16;
|
|
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.16'/%3E%3C/svg%3E");
|
|
mix-blend-mode: soft-light;
|
|
z-index: 10;
|
|
}
|
|
a { color: inherit; }
|
|
.shell { width: min(1180px, calc(100% - 36px)); margin: 0 auto; }
|
|
nav {
|
|
position: sticky;
|
|
top: 0;
|
|
z-index: 5;
|
|
border-bottom: 1px solid var(--line);
|
|
background: rgba(23,21,19,.86);
|
|
backdrop-filter: blur(14px);
|
|
}
|
|
nav .shell { display: flex; gap: 1.6rem; overflow-x: auto; align-items: center; }
|
|
nav a {
|
|
padding: 1rem 0;
|
|
text-decoration: none;
|
|
white-space: nowrap;
|
|
font: 650 .72rem/1 var(--mono);
|
|
letter-spacing: .14em;
|
|
text-transform: uppercase;
|
|
color: var(--muted);
|
|
}
|
|
nav a:hover, nav a.active { color: var(--paper); }
|
|
h1, h2, h3 { font-family: var(--serif); font-weight: 600; letter-spacing: -.02em; margin: 0; }
|
|
h2 { font-size: clamp(2.2rem, 5vw, 4.2rem); line-height: 1.05; color: var(--paper); }
|
|
.eyebrow {
|
|
color: var(--brass);
|
|
font: 700 .74rem/1.2 var(--mono);
|
|
letter-spacing: .22em;
|
|
text-transform: uppercase;
|
|
}
|
|
main { padding: 4rem 0 7rem; }
|
|
.page-header { margin-bottom: 3rem; }
|
|
.page-header-row {
|
|
display: flex;
|
|
align-items: flex-end;
|
|
justify-content: space-between;
|
|
gap: 2rem;
|
|
flex-wrap: wrap;
|
|
margin-top: .8rem;
|
|
}
|
|
.btn {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: .5rem;
|
|
padding: .7rem 1.4rem;
|
|
border: 1px solid var(--line);
|
|
background: transparent;
|
|
color: var(--brass);
|
|
font: 700 .72rem/1 var(--mono);
|
|
letter-spacing: .14em;
|
|
text-transform: uppercase;
|
|
cursor: pointer;
|
|
text-decoration: none;
|
|
transition: background .15s, border-color .15s, color .15s;
|
|
white-space: nowrap;
|
|
}
|
|
.btn:hover { background: rgba(184,138,67,.12); border-color: var(--brass); }
|
|
.btn.primary { background: var(--brass); color: var(--void); border-color: var(--brass); }
|
|
.btn.primary:hover { background: #cca055; }
|
|
.btn.danger { color: var(--rust); }
|
|
.btn.danger:hover { background: rgba(148,69,47,.15); border-color: var(--rust); }
|
|
.btn.sm { padding: .45rem .9rem; font-size: .66rem; }
|
|
/* Game list — open, editorial */
|
|
.games-list { display: flex; flex-direction: column; }
|
|
.game-row {
|
|
padding: 2rem 0;
|
|
border-bottom: 1px solid var(--line);
|
|
text-decoration: none;
|
|
display: block;
|
|
transition: color .15s;
|
|
}
|
|
.game-row:first-child { border-top: 1px solid var(--line); }
|
|
.game-row-eyebrow {
|
|
font: 700 .7rem/1.4 var(--mono);
|
|
letter-spacing: .16em;
|
|
text-transform: uppercase;
|
|
color: var(--brass);
|
|
margin-bottom: .5rem;
|
|
}
|
|
.game-row-eyebrow .sep { color: var(--muted); opacity: .6; margin: 0 .25em; }
|
|
.game-row-eyebrow .e-dark { color: var(--rust); }
|
|
.game-row-title {
|
|
font-family: var(--serif);
|
|
font-size: clamp(1.5rem, 3vw, 2.4rem);
|
|
font-weight: 600;
|
|
color: var(--paper);
|
|
letter-spacing: -.02em;
|
|
line-height: 1.05;
|
|
margin: 0 0 .6rem;
|
|
transition: color .15s;
|
|
}
|
|
.game-row:hover .game-row-title { color: var(--brass); }
|
|
.game-row-desc { color: #c2b7a4; font-size: 1rem; line-height: 1.6; max-width: 72ch; }
|
|
.empty-state {
|
|
padding: 3rem 0;
|
|
color: var(--muted);
|
|
font: italic 1rem/1.6 var(--serif);
|
|
}
|
|
|
|
/* Modal */
|
|
.modal-overlay {
|
|
position: fixed;
|
|
inset: 0;
|
|
background: rgba(23,21,19,.88);
|
|
backdrop-filter: blur(6px);
|
|
z-index: 50;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 1rem;
|
|
}
|
|
.modal {
|
|
background: var(--void-soft);
|
|
border: 1px solid rgba(232,220,196,.3);
|
|
padding: 2rem 2rem 1.6rem;
|
|
width: min(560px, 100%);
|
|
max-height: 90vh;
|
|
overflow-y: auto;
|
|
position: relative;
|
|
}
|
|
.modal-title {
|
|
font-family: var(--serif);
|
|
font-size: 1.5rem;
|
|
font-weight: 600;
|
|
color: var(--paper);
|
|
margin: 0 0 1.6rem;
|
|
}
|
|
.form-group { margin-bottom: 1.2rem; }
|
|
.form-label {
|
|
display: block;
|
|
font: 700 .68rem/1 var(--mono);
|
|
letter-spacing: .1em;
|
|
text-transform: uppercase;
|
|
color: var(--brass);
|
|
margin-bottom: .45rem;
|
|
}
|
|
.form-label span { color: var(--rust); margin-left: .2rem; }
|
|
input[type="text"], input[type="password"], input[type="date"], textarea, select {
|
|
width: 100%;
|
|
background: var(--panel);
|
|
border: 1px solid rgba(232,220,196,.2);
|
|
color: var(--text);
|
|
padding: .65rem .85rem;
|
|
font-family: var(--sans);
|
|
font-size: .94rem;
|
|
line-height: 1.5;
|
|
appearance: none;
|
|
-webkit-appearance: none;
|
|
}
|
|
textarea { resize: vertical; min-height: 80px; }
|
|
input:focus, textarea:focus, select:focus {
|
|
outline: none;
|
|
border-color: var(--brass);
|
|
}
|
|
.mood-row { display: flex; gap: 1rem; }
|
|
.mood-radio { display: flex; align-items: center; gap: .5rem; cursor: pointer; }
|
|
.mood-radio input { width: auto; }
|
|
.mood-radio span { font: .82rem/1 var(--mono); color: var(--text); }
|
|
.form-hint { font: .72rem/1.4 var(--mono); color: var(--muted); margin-top: .35rem; }
|
|
.form-error { font: .78rem/1.4 var(--mono); color: var(--rust); margin-top: .4rem; }
|
|
.date-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
|
|
.modal-actions { display: flex; justify-content: flex-end; gap: .8rem; margin-top: 1.6rem; padding-top: 1.2rem; border-top: 1px solid var(--line); }
|
|
|
|
footer { border-top: 1px solid var(--line); padding: 2.5rem 0 4rem; color: var(--muted); }
|
|
footer .shell { display: flex; justify-content: space-between; gap: 2rem; flex-wrap: wrap; }
|
|
footer p { margin: 0; font: .72rem/1.7 var(--mono); letter-spacing: .08em; text-transform: uppercase; }
|
|
|
|
[x-cloak] { display: none !important; }
|
|
</style>
|
|
</head>
|
|
<body x-data="gamesApp()" x-cloak>
|
|
|
|
<nav aria-label="Archive sections">
|
|
<div class="shell">
|
|
<a href="index.html">Archive</a>
|
|
<a href="games.html" class="active">Game Sessions</a>
|
|
</div>
|
|
</nav>
|
|
|
|
<main class="shell">
|
|
<div class="page-header" style="margin-bottom:4rem">
|
|
<div style="display:flex;align-items:flex-end;justify-content:space-between;gap:2rem;flex-wrap:wrap">
|
|
<div>
|
|
<div class="eyebrow" style="margin-bottom:.4rem">Colony Chronicle // Active Sessions</div>
|
|
<h2 style="font-family:var(--serif);font-size:clamp(2.2rem,5vw,4.2rem);font-weight:600;color:var(--paper);letter-spacing:-.02em;line-height:1.05;margin:0">Game Sessions</h2>
|
|
</div>
|
|
<button class="btn primary" @click="openCreate()">+ New Session</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="games-list">
|
|
<div x-show="loading" class="empty-state" style="border-top:1px solid var(--line)">Loading sessions…</div>
|
|
<div x-show="!loading && games.length === 0" class="empty-state" style="border-top:1px solid var(--line)">
|
|
No sessions recorded. Start a new one to begin the chronicle.
|
|
</div>
|
|
<template x-for="game in games" :key="game.id">
|
|
<a class="game-row" :href="`game.html?slug=${game.slug}`">
|
|
<div class="game-row-eyebrow">
|
|
<span x-text="game.timeline_start"></span> → <span x-text="game.timeline_end"></span>
|
|
<span class="sep"> // </span>
|
|
<span :class="game.mood === 'dark' ? 'e-dark' : ''" x-text="game.mood === 'dark' ? '◉' : '○'"></span>
|
|
</div>
|
|
<div class="game-row-title" x-text="game.title"></div>
|
|
<div class="game-row-desc" x-show="game.description" x-text="game.description"
|
|
style="display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden"></div>
|
|
</a>
|
|
</template>
|
|
</div>
|
|
</main>
|
|
|
|
<footer>
|
|
<div class="shell">
|
|
<p>Orison Reach Public Archive<br />Civilian access edition</p>
|
|
<p>Knowledge builds tomorrow<br />Work keeps it standing</p>
|
|
</div>
|
|
</footer>
|
|
|
|
<!-- Create Game Modal -->
|
|
<div class="modal-overlay" x-show="showModal" @keydown.escape.window="closeModal()">
|
|
<div class="modal" @click.stop>
|
|
<div class="modal-title">New Session</div>
|
|
|
|
<div class="form-group">
|
|
<label class="form-label">Title <span>*</span></label>
|
|
<input type="text" x-model="form.title" placeholder="The Long Winter" @keydown.enter.prevent />
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label class="form-label">Description</label>
|
|
<textarea x-model="form.description" placeholder="What is this session about?"></textarea>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label class="form-label">Mood</label>
|
|
<div class="mood-row">
|
|
<label class="mood-radio"><input type="radio" x-model="form.mood" value="light" /><span>Light</span></label>
|
|
<label class="mood-radio"><input type="radio" x-model="form.mood" value="dark" /><span>Dark</span></label>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="date-row">
|
|
<div class="form-group">
|
|
<label class="form-label">Timeline Start <span>*</span></label>
|
|
<input type="date" x-model="form.timeline_start" />
|
|
</div>
|
|
<div class="form-group">
|
|
<label class="form-label">Timeline End <span>*</span></label>
|
|
<input type="date" x-model="form.timeline_end" />
|
|
</div>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label class="form-label">Password <span>*</span></label>
|
|
<input type="password" x-model="form.password" placeholder="Required to edit this session" />
|
|
<div class="form-hint">Anyone with the URL can read. Password required to add or edit entries.</div>
|
|
</div>
|
|
|
|
<div style="border-top:1px solid rgba(232,220,196,.18);margin-top:1.4rem;padding-top:1.2rem;">
|
|
<div style="font:700 .68rem/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:1rem;">Opening Event</div>
|
|
<div class="form-group">
|
|
<label class="form-label">Title</label>
|
|
<input type="text" x-model="form.start_title" placeholder="Where does this story begin?" />
|
|
</div>
|
|
<div class="form-group">
|
|
<label class="form-label">Description</label>
|
|
<textarea x-model="form.start_description" placeholder="The circumstances of the opening moment…" style="min-height:60px"></textarea>
|
|
</div>
|
|
<div class="form-group">
|
|
<label class="form-label">Mood</label>
|
|
<div class="mood-row">
|
|
<label class="mood-radio"><input type="radio" x-model="form.start_mood" value="" /><span>Inherit</span></label>
|
|
<label class="mood-radio"><input type="radio" x-model="form.start_mood" value="light" /><span>Light</span></label>
|
|
<label class="mood-radio"><input type="radio" x-model="form.start_mood" value="dark" /><span>Dark</span></label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div style="border-top:1px solid rgba(232,220,196,.18);margin-top:1.4rem;padding-top:1.2rem;">
|
|
<div style="font:700 .68rem/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:1rem;">Closing Event</div>
|
|
<div class="form-group">
|
|
<label class="form-label">Title</label>
|
|
<input type="text" x-model="form.end_title" placeholder="Where does this story end?" />
|
|
</div>
|
|
<div class="form-group">
|
|
<label class="form-label">Description</label>
|
|
<textarea x-model="form.end_description" placeholder="The circumstances of the closing moment…" style="min-height:60px"></textarea>
|
|
</div>
|
|
<div class="form-group">
|
|
<label class="form-label">Mood</label>
|
|
<div class="mood-row">
|
|
<label class="mood-radio"><input type="radio" x-model="form.end_mood" value="" /><span>Inherit</span></label>
|
|
<label class="mood-radio"><input type="radio" x-model="form.end_mood" value="light" /><span>Light</span></label>
|
|
<label class="mood-radio"><input type="radio" x-model="form.end_mood" value="dark" /><span>Dark</span></label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="form-error" x-show="formError" x-text="formError"></div>
|
|
|
|
<div class="modal-actions">
|
|
<button class="btn" @click="closeModal()">Cancel</button>
|
|
<button class="btn primary" @click="createGame()" :disabled="saving">
|
|
<span x-text="saving ? 'Creating…' : 'Create Session'"></span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.14.3/dist/cdn.min.js"></script>
|
|
<script>
|
|
function gamesApp() {
|
|
return {
|
|
games: [],
|
|
loading: true,
|
|
showModal: false,
|
|
saving: false,
|
|
formError: null,
|
|
form: {},
|
|
|
|
async init() {
|
|
await this.loadGames()
|
|
},
|
|
|
|
async loadGames() {
|
|
this.loading = true
|
|
try {
|
|
const r = await fetch('/api/games')
|
|
this.games = r.ok ? await r.json() : []
|
|
} catch {
|
|
this.games = []
|
|
}
|
|
this.loading = false
|
|
},
|
|
|
|
openCreate() {
|
|
this.form = {
|
|
title: '', description: '', mood: 'light',
|
|
timeline_start: '', timeline_end: '', password: '',
|
|
start_title: '', start_description: '', start_mood: '',
|
|
end_title: '', end_description: '', end_mood: ''
|
|
}
|
|
this.formError = null
|
|
this.showModal = true
|
|
},
|
|
|
|
closeModal() {
|
|
this.showModal = false
|
|
this.form = {}
|
|
this.formError = null
|
|
},
|
|
|
|
async createGame() {
|
|
if (!this.form.title) { this.formError = 'Title is required'; return }
|
|
if (!this.form.timeline_start) { this.formError = 'Start date is required'; return }
|
|
if (!this.form.timeline_end) { this.formError = 'End date is required'; return }
|
|
if (this.form.timeline_end <= this.form.timeline_start) { this.formError = 'End date must be after start date'; return }
|
|
if (!this.form.password) { this.formError = 'Password is required'; return }
|
|
this.saving = true
|
|
this.formError = null
|
|
try {
|
|
const r = await fetch('/api/games', {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify(this.form)
|
|
})
|
|
const data = await r.json()
|
|
if (!r.ok) { this.formError = data.error || 'Failed to create session'; return }
|
|
window.location.href = `game.html?slug=${data.slug}`
|
|
} catch {
|
|
this.formError = 'Network error. Is the server running?'
|
|
} finally {
|
|
this.saving = false
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>
|