Show latest run in the menu

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])

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`<p>Add ?id=1234 (and use a real ID) to the URL to see a specific run.</p>`
 	if (!run) return html`<h1>Loading statistics for run no. ${id}...</h1>`
 
 	const state = run.gameState
@@ -47,8 +52,10 @@ export default function RunStats() {
 			<strong> ${state.won ? 'won' : 'lost'}</strong>.
 		</p>
 		<p>
-			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}.</p>
+		<p>
+			Player made ${run.gamePast.length} moves over ${run.gameState.turn} turns,<br/>
+		 and ended with ${state.player.currentHealth}/${state.player.maxHealth} health.
 		</p>
 
 		${extraStats && (

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`
 			<article class="Container Splash--fadein">
 				<header class="Header">
@@ -26,10 +57,16 @@ export default class SplashScreen extends Component {
 							<li><a class="Button" href="/?debug&tutorial">Tutorial</a></li>
 							`}
 						<li><a class="Button" href="/collection">Collection</a></li>
-						<li><a class="Button" href="/stats">Highscores</a></li>
+						<li>
+							<a class="Button" href="/stats">Highscores</a>
+							${this.state.runs.length > 0 ? html`
+							<a class="LastRun" href=${`/stats/run?id=${this.state.runs[0].id}`}>
+								${timeSince(this.state.runs[0].createdAt)} someone ${this.state.runs[0].won ? 'won' : 'lost'}
+							</a>` : ''}
+						</li>
 					</ul>
 					<p center>
-						<small><a href="/changelog">Changelog</a> & <a href="/manual">Manual</a></small>
+						<a href="/changelog">Changelog</a> & <a href="/manual">Manual</a>
 					</p>
 				</div>
 			</article>

src/ui/pages/stats.astro

@@ -8,21 +8,15 @@ let {runs, total} = await getRuns()
 
 <Layout title="Statistics & Highscores">
 	<article class="Container">
-		<div class="Box">
-			<ul class="Options">
-				<li><a class="Button" href="/">Back</a></li>
-			</ul>
-		</div>
+		<p><a class="Button" href="/">&larr; Back to game</a></p>
 
 		<h1>Statistics & Highscores for Slay the Web</h1>
 
 		<div class="Box Box--text Box--full">
 			<p>
-				A chronological list of <strong>{total}</strong> Slay the Web runs. Although we only show 200 latest here
-				because I did not implement pagination and else the server timeouts..<br />
-				There is quite a bit of statistics that could be gathered from the runs, and isn't yet shown here. <a
+				A chronological list of <strong>{total}</strong> Slay the Web runs to explore.<br>Come <a
 					href="https://matrix.to/#/#slaytheweb:matrix.org"
-					rel="nofollow">Chat on #slaytheweb:matrix.org</a
+					rel="nofollow">chat on #slaytheweb:matrix.org</a
 				>
 			</p>
 		</div>
@@ -32,17 +26,18 @@ let {runs, total} = await getRuns()
 					<th>Player</th>
 					<th>Win?</th>
 					<th>Floor</th>
-					<th align="right">Time</th>
-					<th align="right">Date</th>
+					<th align="right" style="min-width: 4em">Time</th>
+					<th align="right" style="min-width: 6em">Date</th>
 				</tr>
 			</thead>
 			<tbody>
 				{
 					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))

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);