diff options
| -rw-r--r-- | web/pw-server/src/lib/components/RulesView.svelte | 7 | ||||
| -rw-r--r-- | web/pw-server/src/routes/index.svelte | 92 |
2 files changed, 93 insertions, 6 deletions
diff --git a/web/pw-server/src/lib/components/RulesView.svelte b/web/pw-server/src/lib/components/RulesView.svelte index 92de37e..c7d4a4a 100644 --- a/web/pw-server/src/lib/components/RulesView.svelte +++ b/web/pw-server/src/lib/components/RulesView.svelte @@ -1,11 +1,6 @@ <div class="container"> <div class="game-rules"> - <h2 class="title">Welcome to planetwars!</h2> - - <p> - Planetwars is a game of galactic conquest for busy people. Your goal is to program a bot that - will conquer the galaxy for you, while you take care of more important stuff. - </p> + <h2 class="title">How to play</h2> <p> In every game turn, your bot will receive a json-encoded line on stdin, describing the current state of the game. Each state will hold a set of planets, and a set of spaceship fleets diff --git a/web/pw-server/src/routes/index.svelte b/web/pw-server/src/routes/index.svelte index e69de29..fd1f505 100644 --- a/web/pw-server/src/routes/index.svelte +++ b/web/pw-server/src/routes/index.svelte @@ -0,0 +1,92 @@ +<script lang="ts" context="module"> + import { ApiClient } from "$lib/api_client"; + + const NUM_MATCHES = "25"; + + export async function load({ fetch }) { + try { + const apiClient = new ApiClient(fetch); + + let { matches, has_next } = await apiClient.get("/api/matches", { + count: NUM_MATCHES, + }); + + return { + props: { + matches, + hasNext: has_next, + }, + }; + } catch (error) { + return { + status: error.status, + error: new Error("failed to load matches"), + }; + } + } +</script> + +<script lang="ts"> + import LinkButton from "$lib/components/LinkButton.svelte"; + import MatchList from "$lib/components/matches/MatchList.svelte"; + + export let matches; + export let hasNext; + + $: viewMoreUrl = olderMatchesLink(matches); + + // TODO: deduplicate. + // Maybe move to ApiClient logic? + function olderMatchesLink(matches: object[]): string { + if (matches.length == 0 || !hasNext) { + return null; + } + const lastTimestamp = matches[matches.length - 1]["timestamp"]; + return `/matches?before=${lastTimestamp}`; + } +</script> + +<div class="container"> + <div class="introduction"> + <h2>Welcome to PlanetWars!</h2> + <p> + Planetwars is a game of galactic conquest for busy people. Your goal is to program a bot that + will conquer the galaxy for you, while you take care of more important stuff. + </p> + <p> + Feel free to watch some games below to see what it's all about. When you are ready to try + writing your own bot, head over to + <a href="/docs">How to play</a> for instructions. You can program your bot in the browser + using the <a href="/editor">Editor</a>. + </p> + </div> + <h2>Recent matches</h2> + <MatchList {matches} /> + <div class="see-more-container"> + <LinkButton href={viewMoreUrl}>View more</LinkButton> + </div> +</div> + +<style scoped lang="scss"> + .container { + max-width: 800px; + margin: 0 auto; + } + + .introduction { + padding-top: 16px; + a { + color: rgb(9, 105, 218); + text-decoration: none; + } + + a:hover { + text-decoration: underline; + } + } + + .see-more-container { + padding: 24px; + text-align: center; + } +</style> |