Adjust stats pages to new API responses

oskarrough · Feb 22, 2024 · 49e3d24 · 49e3d24
1 parent 8983ff0
commit 49e3d24
Show file tree

Hide file tree

Showing 3 changed files with 44 additions and 34 deletions.
diff --git a/src/game/backend.js b/src/game/backend.js
@@ -6,6 +6,10 @@ const apiUrl = 'https://api.slaytheweb.cards/api/runs'
 /**
  * @typedef {object} Run
  * @prop {string} player - user inputted player name
+ * @prop {win} number
+ * @prop {number} floor
+ * @prop {number} floor
+ * @prop {number} floor
  * @prop {object} gameState - the final state
  * @prop {PastEntry[]} gamePast - a list of past states
  */

diff --git a/src/ui/pages/stats.astro b/src/ui/pages/stats.astro
@@ -30,8 +30,6 @@ const runs = (await getRuns()).reverse()
           <th>Player</th>
           <th>Win?</th>
           <th>Floor</th>
-          <th>Health</th>
-          <th>Cards</th>
           <th align="right">Time</th>
           <th align="right">Date</th>
         </tr>
@@ -45,11 +43,11 @@ const runs = (await getRuns()).reverse()
                   dateStyle: 'long',
                   // timeStyle: 'short',
                   hour12: false,
-                }).format(new Date(state.createdAt))
+                }).format(new Date(run.createdAt))
 
                 let duration = 0
-                if (state.endedAt) {
-                  const ms = state.endedAt - state.createdAt
+                if (run.endedAt) {
+                  const ms = run.endedAt - run.createdAt
                   const hours = Math.floor(ms / (1000 * 60 * 60))
                   const minutes = Math.floor((ms % (1000 * 60 * 60)) / (1000 * 60))
                   const seconds = Math.floor((ms / 1000) % 60)
@@ -63,12 +61,8 @@ const runs = (await getRuns()).reverse()
                         {run.id}. {run.player}
                       </a>
                     </td>
-                    <td>{state.won ? 'WIN' : 'LOSS'}</td>
-                    <td>{state.dungeon.y}</td>
-                    <td>
-                      {state.player.currentHealth}/{state.player.maxHealth}
-                    </td>
-                    <td>{run.gameState.deck.length}</td>
+                    <td>{run.won ? 'WIN' : 'LOSS'}</td>
+                    <td>{run.floor}</td>
                     <td align="right">{duration}</td>
                     <td align="right">{date}</td>
                   </tr>

diff --git a/src/ui/pages/stats/[id].astro b/src/ui/pages/stats/[id].astro
@@ -4,23 +4,22 @@ import {getRuns, getRun} from '../../../game/backend.js'
 import {getEnemiesStats} from '../../components/dungeon-stats.js'
 import '../../styles/typography.css'
 
-export const getStaticPaths = (async () => {
-	const runs = await getRuns()
-	return runs.map(run => {
-		return {
-			params: {id: run.id}
-		}
-	})
-})
+export const getStaticPaths = async () => {
+  const runs = await getRuns()
+  return runs.map((run) => {
+    return {
+      params: {id: run.id},
+    }
+  })
+}
 
 const {id} = Astro.params
 const run = await getRun(id)
 const state = run.gameState
 
 const date = new Intl.DateTimeFormat('en', {
-	dateStyle: 'long',
-	// timeStyle: 'short',
-	hour12: false,
+  dateStyle: 'long',
+  hour12: false,
 }).format(new Date(state.createdAt))
 
 const ms = state.endedAt - state.createdAt
@@ -32,24 +31,37 @@ const duration = `${hours > 0 ? hours + 'h ' : ''}${minutes}m ${seconds}s`
 // Not all runs have this data in the backend.
 let extraStats = false
 if (state.dungeon.graph) {
-	extraStats = getEnemiesStats(state.dungeon)
-	console.log(extraStats)
+  extraStats = getEnemiesStats(state.dungeon)
+  console.log(extraStats)
 }
 ---
 
 <Layout title="Statistics & Highscores">
   <article class="Container">
-		<p><a class="Button" href="/stats">&larr; Back to all runs</a></p>
-		<h1>Slay the Web run no. {run.id}</h1>
+    <p><a class="Button" href="/stats">&larr; Back to all runs</a></p>
+    <h1>Slay the Web run no. {run.id}</h1>
     <div class="Box Box--text Box--full">
-			<p><em>{run.player}</em> made it to floor {state.dungeon.y} and {state.won ? 'won' : 'lost'} in {duration} on {date} with {state.player.currentHealth}/{state.player.maxHealth} health.</p>
-			{extraStats && <p>You encountered {extraStats.encountered} monsters. And killed {extraStats.killed} of them.</p>}
-			<p>Final deck had {state.deck.length} cards:</p>
-			<ul>
-				{state.deck.map(card => <li>{card}</li>)}
-			</ul>
-
+      <p>
+        <em>{run.player}</em> made it to floor {state.dungeon.y} and {state.won ? 'won' : 'lost'} in {
+          duration
+        } on {date} with {state.player.currentHealth}/{state.player.maxHealth} health.
+      </p>
+      {
+        extraStats && (
+          <p>
+            You encountered {extraStats.encountered} monsters. And killed {extraStats.killed} of them.
+          </p>
+        )
+      }
+      <p>Final deck had {state.deck.length} cards:</p>
+      <ul>
+        {state.deck.map((card) => <li>{card}</li>)}
+      </ul>
+      <p>
+        Feel free to inspect the data yourself: <a href={'https://api.slaytheweb.cards/runs/' + run.id}
+          >api.slaytheweb.cards/runs/{run.id}</a
+        >.
+      </p>
     </div>
   </article>
 </Layout>
-