From 4f3509d03c78e050ea891ddf5387482ea36e7840 Mon Sep 17 00:00:00 2001 From: oskarrough Date: Mon, 16 Dec 2024 12:39:36 +0100 Subject: [PATCH] Show latest run in the menu --- src/game/dungeon.js | 1 - src/ui/components/run-stats.js | 11 ++++++-- src/ui/components/splash-screen.js | 43 +++++++++++++++++++++++++++--- src/ui/pages/stats.astro | 21 ++++++--------- src/ui/styles/app.css | 6 +++++ 5 files changed, 63 insertions(+), 19 deletions(-) diff --git a/src/game/dungeon.js b/src/game/dungeon.js index 616b4019..feeec715 100644 --- a/src/game/dungeon.js +++ b/src/game/dungeon.js @@ -290,7 +290,6 @@ export function graphToString(graph) { * @returns {Graph} */ function storePathOnGraph(graph, path) { - console.log('storePathOnGraph', {graph, path}) path.forEach((move) => { const a = nodeFromMove(graph, move[0]) const b = nodeFromMove(graph, move[1]) diff --git a/src/ui/components/run-stats.js b/src/ui/components/run-stats.js index 00518df7..2fc71543 100644 --- a/src/ui/components/run-stats.js +++ b/src/ui/components/run-stats.js @@ -15,12 +15,17 @@ export default function RunStats() { }, []) useEffect(() => { + if (!id) { + setRun(null) + return + } getRun(id).then((what) => { setRun(what) console.log(what) }) }, [id]) + if (!id) return html`

Add ?id=1234 (and use a real ID) to the URL to see a specific run.

` if (!run) return html`

Loading statistics for run no. ${id}...

` const state = run.gameState @@ -47,8 +52,10 @@ export default function RunStats() { ${state.won ? 'won' : 'lost'}.

- The run took ${duration} on ${date} with ${state.player.currentHealth}/${state.player.maxHealth} health - and ${run.gamePast.length} actions taken over ${run.gameState.turn} turns. + The run took ${duration} on ${date}.

+

+ Player made ${run.gamePast.length} moves over ${run.gameState.turn} turns,
+ and ended with ${state.player.currentHealth}/${state.player.maxHealth} health.

${extraStats && ( diff --git a/src/ui/components/splash-screen.js b/src/ui/components/splash-screen.js index 8d141a23..b73db85c 100644 --- a/src/ui/components/splash-screen.js +++ b/src/ui/components/splash-screen.js @@ -1,12 +1,43 @@ import {html, Component} from '../lib.js' import gsap from '../animations.js' +import {getRuns} from '../../game/backend.js' + +function formatDate(timestamp) { + return new Intl.DateTimeFormat('en', { + dateStyle: 'medium', + // month: 'short', + // timeStyle: 'short', + hour12: false, + }).format(new Date(timestamp)) +} + +function timeSince(timestamp) { + const seconds = Math.floor((Date.now() - timestamp) / 1000) + if (seconds < 60) return 'just now' + if (seconds < 120) return 'a minute ago' + if (seconds < 3600) return `${Math.floor(seconds / 60)} minutes ago` + if (seconds < 7200) return 'an hour ago' + if (seconds < 86400) return `${Math.floor(seconds / 3600)} hours ago` + if (seconds < 172800) return 'yesterday' + return `${Math.floor(seconds / 86400)} days ago` +} export default class SplashScreen extends Component { + constructor() { + super() + this.state = {runs: []} + } + componentDidMount() { + getRuns().then(({runs}) => this.setState({runs})) + gsap.from(this.base, {duration: 0.4, autoAlpha: 0, scale: 0.98}) gsap.to(this.base.querySelector('.Splash-spoder'), {delay: 5, x: 420, y: 60, duration: 3}) } - render(props) { + + render(props, state) { + const run = this.state.runs[0] + return html`
@@ -26,10 +57,16 @@ export default class SplashScreen extends Component {
  • Tutorial
    • `}
  • Collection
    • -
  • Highscores
    • +
  • + Highscores + ${this.state.runs.length > 0 ? html` + + ${timeSince(this.state.runs[0].createdAt)} someone ${this.state.runs[0].won ? 'won' : 'lost'} + ` : ''} +

    • - Changelog & Manual + Changelog & Manual

    diff --git a/src/ui/pages/stats.astro b/src/ui/pages/stats.astro index bd3744f2..a46d370c 100644 --- a/src/ui/pages/stats.astro +++ b/src/ui/pages/stats.astro @@ -8,21 +8,15 @@ let {runs, total} = await getRuns()
    -
    - -
    +

    ← Back to game

    Statistics & Highscores for Slay the Web

    - A chronological list of {total} Slay the Web runs. Although we only show 200 latest here - because I did not implement pagination and else the server timeouts..
    - There is quite a bit of statistics that could be gathered from the runs, and isn't yet shown here. {total} Slay the Web runs to explore.
    Come     Chat on #slaytheweb:matrix.orgchat on #slaytheweb:matrix.org

    @@ -32,17 +26,18 @@ let {runs, total} = await getRuns() Player Win? Floor - Time - Date + Time + Date { runs?.length ? runs.map((run) => { - const state = run.gameState + // const state = run.gameState const date = new Intl.DateTimeFormat('en', { - dateStyle: 'long', + dateStyle: 'medium', + // month: 'short', // timeStyle: 'short', hour12: false, }).format(new Date(run.createdAt)) diff --git a/src/ui/styles/app.css b/src/ui/styles/app.css index 0df1285c..0d598ff8 100644 --- a/src/ui/styles/app.css +++ b/src/ui/styles/app.css @@ -349,6 +349,12 @@ h2 { transform: rotate(130deg); } +.LastRun { + background: var(--yellow); + padding: 1px 3px; + font-size: small; +} + .Box, .Box--text { background: hsla(17, 6%, 53%, 1);