populate new index page
This commit is contained in:
parent
947ced152e
commit
82ab9cef78
2 changed files with 93 additions and 6 deletions
|
@ -1,11 +1,6 @@
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<div class="game-rules">
|
<div class="game-rules">
|
||||||
<h2 class="title">Welcome to planetwars!</h2>
|
<h2 class="title">How to play</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>
|
<p>
|
||||||
In every game turn, your bot will receive a json-encoded line on stdin, describing the current
|
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
|
state of the game. Each state will hold a set of planets, and a set of spaceship fleets
|
||||||
|
|
|
@ -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>
|
Loading…
Reference in a new issue