<!-- The form is static HTML on GitHub Pages. Game-specific field blocks are
     hidden until the title calls for them; only two are shown here. -->
<div class="form-container">
    <h2>Log a Game</h2>
    <label>Date Played: <span id="date-weekday"></span></label>
    <input type="date" id="date_played">
    <label>Game Title:</label>
    <div style="position:relative;">
        <input type="text" id="game_title" autocomplete="off">
        <div id="add_suggestions" class="autocomplete-suggestions"></div>
    </div>
    <label>Result:</label>
    <textarea id="result" rows="1" placeholder="Add result here..."></textarea>

    <!-- Spirit Island records three things that vary independently, so they get
         their own fields rather than being crammed into Level. Hidden until the
         title says Spirit Island. -->
    <div id="si-fields" style="display:none;">
        <label>Spirit:</label>
        <select id="spirit"><option value="">—</option></select>
        <label>Adversary:</label>
        <select id="adversary"><option value="">—</option></select>
        <select id="adversary_level"><option value="">Lvl</option></select>
        <label>Scenario:</label>
        <select id="scenario"><option value="">—</option></select>
    </div>

    <!-- Ark Nova: the map and the appeal you start the bot on are the setup,
         and the pair is what gets climbed. -->
    <div id="an-fields" style="display:none;">
        <label>Map:</label>
        <select id="zoo_map"><option value="">—</option></select>
        <label>Start appeal:</label>
        <input type="number" id="start_appeal" min="0" max="100" step="1">
    </div>

    <label>Notes:</label>
    <textarea id="notes" rows="4" placeholder="Add any notes here..."></textarea>
    <button id="log-btn">Log Game</button>
    <p id="log-status" style="display:none;"></p>
</div>

<script>
document.getElementById('log-btn').addEventListener('click', async () => {
    const title = document.getElementById('game_title').value.trim();
    const dp = document.getElementById('date_played').value;
    if (!title || !dp) { alert('Date and game title are required.'); return; }

    const payload = {
        date_played: dp, game_title: title,
        result: document.getElementById('result').value,
        notes: document.getElementById('notes').value
    };
    // Only send them for a Spirit Island play; the API ignores unknown names
    // anyway, but there is no reason to send four empty fields every time.
    if (isSpiritIsland(title)) {
        SI_FIELDS.forEach(id => payload[id] = document.getElementById(id).value);
    }
    if (isArkNova(title)) {
        AN_FIELDS.forEach(id => payload[id] = document.getElementById(id).value);
    }

    const data = await apiPost('/api/add_game', payload);

    // The photo needs the id of the row that was just written, so it goes up
    // after the play rather than with it.
    if (data?.success && pendingPhoto && data.id) {
        await uploadPhoto(data.id, pendingPhoto);
    }
    document.getElementById('log-status').textContent =
        data?.success ? 'Logged!' : (data?.message || 'Failed');
});
</script>

                     

                     
# One endpoint serves the whole statistics panel. Trimmed here to the shape:
# the real route also computes daily/weekly/monthly/yearly averages against a
# fixed reference date, and the longest-streak records.

@app.route('/api/dashboard')
def api_dashboard():
    conn = get_db_connection()
    cur = conn.cursor()

    cur.execute("SELECT DISTINCT game_title FROM games ORDER BY game_title")
    game_titles = [row[0] for row in cur.fetchall()]

    cur.execute("""
        SELECT game_title, COUNT(*) FROM games
        GROUP BY game_title ORDER BY COUNT(*) DESC LIMIT 5
    """)
    top_games = [{'game': r[0], 'count': r[1]} for r in cur.fetchall()]

    # "Today" is the user's today: each account stores its own timezone, so a
    # game logged at 11pm in Auckland does not land on yesterday in UTC.
    today = today_local()
    start_of_week = today - timedelta(days=today.weekday())
    start_of_month = today.replace(day=1)
    start_of_year = today.replace(month=1, day=1)
    end_of_last_week = start_of_week - timedelta(days=1)
    start_of_last_week = end_of_last_week - timedelta(days=6)

    def count(q, *args):
        cur.execute(q, args)
        return cur.fetchone()[0]

    def most_played(start, end=None):
        if end:
            cur.execute("""SELECT game_title, COUNT(*) FROM games
                           WHERE date_played BETWEEN %s AND %s
                           GROUP BY game_title ORDER BY COUNT(*) DESC LIMIT 1""",
                        (start, end))
        else:
            cur.execute("""SELECT game_title, COUNT(*) FROM games
                           WHERE date_played >= %s
                           GROUP BY game_title ORDER BY COUNT(*) DESC LIMIT 1""",
                        (start,))
        row = cur.fetchone()
        return {'game': row[0], 'count': row[1]} if row else {'game': None, 'count': 0}

    # Averages are each taken against a fixed reference date — omitted here,
    # along with the last-month and last-year periods, to keep the shape legible.
    records = {k: {'count': v['count'],
                   'start': v['start'].isoformat() if v['start'] else None}
               for k, v in period_records(cur).items()}

    result = {
        'game_titles': game_titles,
        'top_games': top_games,
        'today': today.isoformat(),
        'games_played': {
            'today':     count("SELECT COUNT(*) FROM games WHERE date_played = %s", today),
            'yesterday': count("SELECT COUNT(*) FROM games WHERE date_played = %s",
                               today - timedelta(days=1)),
            'this_week':  count("SELECT COUNT(*) FROM games WHERE date_played >= %s", start_of_week),
            'this_month': count("SELECT COUNT(*) FROM games WHERE date_played >= %s", start_of_month),
            'this_year':  count("SELECT COUNT(*) FROM games WHERE date_played >= %s", start_of_year),
            'last_week':  count("SELECT COUNT(*) FROM games WHERE date_played BETWEEN %s AND %s",
                                start_of_last_week, end_of_last_week),
            'daily_avg': daily_avg, 'weekly_avg': weekly_avg,
            'monthly_avg': monthly_avg, 'yearly_avg': yearly_avg,
        },
        'records': records,
        'most_played': {
            'this_week': most_played(start_of_week),
            'last_week': most_played(start_of_last_week, end_of_last_week),
            'this_year': most_played(start_of_year),
        },
    }
    cur.close()
    conn.close()
    return jsonify(result)

                     

                     
<!-- The panel is static markup; one call fills every figure in it. -->
<div class="stats-grid">
    <div><span class="stat-label">Today</span><span id="s-td">—</span></div>
    <div><span class="stat-label">Yesterday</span><span id="s-yd">—</span></div>
    <div><span class="stat-label">Daily average</span><span id="s-ad">—</span></div>
    <div><span class="stat-label">This week</span><span id="s-tw">—</span></div>
    <div><span class="stat-label">This month</span><span id="s-tm">—</span></div>
    <div><span class="stat-label">This year</span><span id="s-ty">—</span></div>
</div>
<h3>Most played</h3>
<table id="most-played">
    <tr><td>This week</td><td id="mp-tw-g">—</td><td id="mp-tw-c">0</td></tr>
    <tr><td>Last week</td><td id="mp-lw-g">—</td><td id="mp-lw-c">0</td></tr>
    <tr><td>This year</td><td id="mp-ty-g">—</td><td id="mp-ty-c">0</td></tr>
</table>
<ul id="top-games"></ul>

<script>
async function loadStats() {
    // apiGet attaches the bearer token and bounces to the login page on a 401.
    const d = await apiGet('/api/dashboard');
    if (!d) return;

    const gp = d.games_played;
    document.getElementById('s-td').textContent = gp.today;
    document.getElementById('s-yd').textContent = gp.yesterday;
    document.getElementById('s-ad').textContent = gp.daily_avg;
    document.getElementById('s-tw').textContent = gp.this_week;
    document.getElementById('s-tm').textContent = gp.this_month;
    document.getElementById('s-ty').textContent = gp.this_year;

    const mp = d.most_played;
    [['tw', mp.this_week], ['lw', mp.last_week], ['ty', mp.this_year]]
        .forEach(([k, v]) => {
            document.getElementById('mp-' + k + '-g').textContent = v.game || '—';
            document.getElementById('mp-' + k + '-c').textContent = v.count || 0;
        });

    document.getElementById('top-games').innerHTML =
        d.top_games.map(g => `<li>${escapeHtml(g.game)} — ${g.count}</li>`).join('');

    renderRecords(d.records, gp);
}
loadStats();
</script>

                     

                     
<!-- Autocomplete on the title field, from the shared api.js. Two problems
     worth showing: replies that come back out of order, and a request per
     keystroke. -->
<div style="position:relative;">
    <input type="text" id="game_title" autocomplete="off">
    <div id="add_suggestions" class="autocomplete-suggestions"></div>
</div>

<script>
function setupAutocomplete(inputId, suggestionsId, onSelect) {
    const input = document.getElementById(inputId);
    const box = document.getElementById(suggestionsId);
    if (!input || !box) return;

    // Every keystroke starts a request, and they don't come back in order.
    // Without this counter, picking a suggestion clears the list and then an
    // older reply lands and draws it again — once per request still in flight,
    // which is why a fast typist saw the dropdown reopen several times over.
    // Bumping `latest` invalidates everything outstanding.
    let latest = 0;
    let timer = null;
    const dismiss = () => { latest++; clearTimeout(timer); box.innerHTML = ''; };

    // Wait for a pause in typing before asking. Firing per keystroke sent six
    // requests for a six-letter game, and with only two server workers the one
    // that mattered — the last — queued behind its own predecessors. One
    // request after you stop typing is both fewer and sooner.
    const DEBOUNCE_MS = 200;

    input.addEventListener('input', () => {
        clearTimeout(timer);
        const term = input.value.trim();
        if (term.length < 2) { latest++; box.innerHTML = ''; return; }
        timer = setTimeout(() => search(term), DEBOUNCE_MS);
    });

    async function search(term) {
        const mine = ++latest;
        const data = await apiGet('/search_games?term=' + encodeURIComponent(term));
        if (mine !== latest) return;      // superseded while we waited
        box.innerHTML = '';
        (data?.suggestions || []).forEach(s => {
            const div = document.createElement('div');
            div.className = 'autocomplete-suggestion';
            div.textContent = s;
            div.addEventListener('click', () => {
                input.value = s;
                dismiss();
                // Setting .value in code fires no event, so anything watching
                // the field has to be told by hand.
                input.dispatchEvent(new Event('change', { bubbles: true }));
                if (onSelect) onSelect(s);
            });
            box.appendChild(div);
        });
    }

    document.addEventListener('click', e => { if (!input.contains(e.target)) dismiss(); });
}

setupAutocomplete('game_title', 'add_suggestions', onTitleChosen);
</script>

                     

                     
<!-- The whole page: a login guard, the shared tab bar, one call, one render. -->
<script src="./config.js"></script>
<script src="./api.js"></script>
<script src="./tabs.js"></script>
<script>
    requireAuth();
    renderTabs('games');

    const labels = {
        this_week: 'This Week', this_month: 'This Month', this_year: 'This Year',
        last_week: 'Last Week', last_month: 'Last Month', last_year: 'Last Year'
    };
    // Each period next to the one before it, rather than all the current
    // windows and then all the previous ones.
    const order = ['this_week','last_week','this_month','last_month','this_year','last_year'];

    async function load() {
        const data = await apiGet('/api/games_overview');
        if (!data) return;
        const grid = document.getElementById('grid');
        grid.innerHTML = order.map(key => {
            const games = data[key] || [];
            const items = games.length
                ? games.map(g => `<li>${g.game} — ${g.count}</li>`).join('')
                : '<li style="color:#888;">None</li>';
            return `<div class="period-block"><h3>${labels[key]}</h3><ul>${items}</ul></div>`;
        }).join('');
    }
    load();
</script>

                     

                     
<!-- Sorting happens in the browser: the list is small, and re-sorting without
     a round trip is instant. -->
<script>
    let games = [];
    let sortKey = 'rank';
    let ascending = true;

    function render() {
        const numeric = sortKey === 'rank' || sortKey === 'play_count';
        const rows = [...games].sort((a, b) => {
            const x = a[sortKey], y = b[sortKey];
            if (numeric) return ascending ? x - y : y - x;
            // Blank notes sort last either way, rather than clumping at the top.
            const sx = (x || '').toString(), sy = (y || '').toString();
            if (!sx && sy) return 1;
            if (sx && !sy) return -1;
            return ascending ? sx.localeCompare(sy) : sy.localeCompare(sx);
        });

        document.querySelectorAll('#games-table th').forEach(th => {
            const active = th.dataset.sort === sortKey;
            th.innerHTML = th.textContent.replace(/[ ▲▼]+$/, '') +
                (active ? ` <span class="arrow">${ascending ? '▲' : '▼'}</span>` : '');
        });

        document.getElementById('games-body').innerHTML = rows.map(g => `
            <tr>
                <td class="num">${g.rank}</td>
                <td>${esc(g.game)}</td>
                <td class="num">${g.play_count}</td>
                <td class="note">${esc(g.latest_note)}</td>
            </tr>`).join('');
    }

    document.querySelectorAll('#games-table th').forEach(th => {
        th.addEventListener('click', () => {
            const key = th.dataset.sort;
            // Same column again reverses; a new column starts ascending,
            // except the counts, where you almost always want most-first.
            if (key === sortKey) ascending = !ascending;
            else { sortKey = key; ascending = key !== 'play_count'; }
            render();
        });
    });

    async function load() {
        const data = await apiGet('/api/all_games');
        if (!data) return;
        games = data;
        render();
    }
    load();
</script>

                     

                     
<!-- Mid-voyage the two questions are "have I been here before?" and "where did
     I see that?", so location and note search are the two buttons. -->
<script>
    document.getElementById('search-loc-btn').addEventListener('click', async () => {
        const term = document.getElementById('search-loc').value;
        const data = await apiGet('/search_sleeping_gods_location?term='
                                  + encodeURIComponent(term));
        document.getElementById('search-results').innerHTML = renderResults(data || []);
    });

    document.getElementById('search-notes-btn').addEventListener('click', async () => {
        const term = document.getElementById('search-notes').value.trim();
        if (!term) return;
        const data = await apiGet('/search_sleeping_gods_notes?term='
                                  + encodeURIComponent(term));
        document.getElementById('search-results').innerHTML = renderResults(data || []);
    });

    async function deleteRow(id) {
        if (!confirm('Delete this entry?')) return;
        const data = await apiPost('/delete_sleeping_gods_row', { id });
        // Drop the row from the page rather than reloading the whole search.
        if (data?.success) document.getElementById(`row-${id}`)?.remove();
    }

    // A new voyage starts the map fresh, but the notes are worth keeping —
    // so this clears the visited flags without deleting anything.
    document.getElementById('reset-visited-btn').addEventListener('click', async () => {
        if (!confirm('Reset all visited flags?')) return;
        await apiPost('/reset_visited_sleeping_gods', {});
    });
</script>

                     

                     
<script src="./config.js"></script>
<script src="./api.js"></script>
<script src="./tabs.js"></script>
<script>
    requireAuth();
    renderTabs('games');

    const esc = s => String(s ?? '')
        .replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');

    async function load() {
        const data = await apiGet('/api/imperium_stats');
        const body = document.getElementById('body');
        if (!data) return;
        if (data.success === false) {
            body.innerHTML = `<p class="status-err">${esc(data.message || 'Not allowed.')}</p>`;
            return;
        }

        let totalWon = 0, totalLost = 0;
        const rows = data.expansions.map(group => {
            const civs = group.civilisations.map(c => {
                totalWon += c.won; totalLost += c.lost;
                // Greyed means never faced, not never finished. A deck you
                // sat down to and left mid-game still counts as tried.
                const played = (c.plays || c.won + c.lost) > 0;
                return `<tr class="civ${played ? '' : ' unplayed'}">
                    <td>${esc(c.name)}<span class="stars">${'★'.repeat(c.stars)}</span></td>
                    <td class="num lost">${c.lost || ''}</td>
                    <td class="num won">${c.won || ''}</td>
                </tr>`;
            }).join('');
            return `<tr class="exp-row"><td colspan="3">${esc(group.expansion)}</td></tr>${civs}`;
        }).join('');

        const unmatched = data.unmatched_levels.length
            ? `<p class="unmatched">Not matched to a civilisation:
                 ${data.unmatched_levels.map(esc).join(', ')}</p>`
            : '';

        body.innerHTML = `
            <table class="civs">
                <thead><tr><th></th><th>Lost</th><th>Won</th></tr></thead>
                <tbody>
                    ${rows}
                    <tr class="totals">
                        <td>Total — ${data.total_games} finished</td>
                        <td class="num lost">${totalLost}</td>
                        <td class="num won">${totalWon}</td>
                    </tr>
                </tbody>
            </table>${unmatched}`;
    }
    load();
</script>