diff options
| -rw-r--r-- | web/pw-server/src/routes/matches/[match_id].svelte | 35 |
1 files changed, 28 insertions, 7 deletions
diff --git a/web/pw-server/src/routes/matches/[match_id].svelte b/web/pw-server/src/routes/matches/[match_id].svelte index 3fe98f8..2c0a3fa 100644 --- a/web/pw-server/src/routes/matches/[match_id].svelte +++ b/web/pw-server/src/routes/matches/[match_id].svelte @@ -1,21 +1,31 @@ <script lang="ts" context="module"> - export async function load({ page }) { - const res = await fetch(`/api/matches/${page.params["match_id"]}`, { + function fetchJson(url: string): Promise<Response> { + return fetch(url, { headers: { "Content-Type": "application/json", }, }); + } + + export async function load({ params }) { + // TODO: handle failure cases better + const matchId = params["match_id"]; + const matchDataResponse = await fetchJson(`/api/matches/${matchId}`); + if (!matchDataResponse.ok) { + } + const matchLogResponse = await fetchJson(`/api/matches/${matchId}/log`); - if (res.ok) { + if (matchDataResponse.ok && matchLogResponse.ok) { return { props: { - matchLog: await res.text(), + matchData: await matchDataResponse.json(), + matchLog: await matchLogResponse.text(), }, }; } return { - status: res.status, + status: matchDataResponse.status, error: new Error("failed to load match"), }; } @@ -24,8 +34,19 @@ <script lang="ts"> import Visualizer from "$lib/components/Visualizer.svelte"; export let matchLog: string; + export let matchData: object; </script> -<div> - <Visualizer {matchLog} /> +<div class="container"> + <Visualizer {matchLog} {matchData} /> </div> + +<style lang="scss"> + .container { + display: flex; + // these are needed for making the visualizer fill the screen. + min-height: 0; + flex-grow: 1; + overflow: hidden; + } +</style> |