initial commit
This commit is contained in:
160
web/src/pages/Game.svelte
Normal file
160
web/src/pages/Game.svelte
Normal file
@@ -0,0 +1,160 @@
|
||||
<script lang="ts">
|
||||
import { request } from "graphql-request";
|
||||
import { graphql } from "./../gql";
|
||||
import { onMount } from "svelte";
|
||||
import type { GetGameQuery } from "../gql/graphql";
|
||||
import { useRoute, link } from "@dvcol/svelte-simple-router/router";
|
||||
|
||||
const doc = graphql(`
|
||||
query getGame($gameID: ID!) {
|
||||
game(id: $gameID) {
|
||||
added
|
||||
overtime
|
||||
score
|
||||
author {
|
||||
ID
|
||||
name
|
||||
}
|
||||
team0player0 {
|
||||
ID
|
||||
name
|
||||
history(game: $gameID) {
|
||||
startElo
|
||||
delta
|
||||
}
|
||||
}
|
||||
team0player1 {
|
||||
ID
|
||||
name
|
||||
history(game: $gameID) {
|
||||
startElo
|
||||
delta
|
||||
}
|
||||
}
|
||||
team1player0 {
|
||||
ID
|
||||
name
|
||||
history(game: $gameID) {
|
||||
startElo
|
||||
delta
|
||||
}
|
||||
}
|
||||
team1player1 {
|
||||
ID
|
||||
name
|
||||
history(game: $gameID) {
|
||||
startElo
|
||||
delta
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
`);
|
||||
|
||||
interface Player {
|
||||
name: string;
|
||||
id: string;
|
||||
startElo: number;
|
||||
delta: number;
|
||||
}
|
||||
|
||||
interface Team {
|
||||
name: string;
|
||||
p0: Player;
|
||||
p1: Player;
|
||||
}
|
||||
|
||||
let loading = $state(true);
|
||||
let errorState = $state(false);
|
||||
let data: GetGameQuery | undefined = $state();
|
||||
|
||||
onMount(() => {
|
||||
const idParam = useRoute().location?.params.id;
|
||||
if (typeof idParam == "string") {
|
||||
request(window.location.origin + "/graphql", doc, {
|
||||
gameID: idParam,
|
||||
})
|
||||
.then((e) => {
|
||||
data = e;
|
||||
loading = false;
|
||||
})
|
||||
.catch((e) => {
|
||||
console.error(e);
|
||||
errorState = true;
|
||||
loading = false;
|
||||
});
|
||||
} else {
|
||||
loading = false;
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<h1 class="text-4xl">Game</h1>
|
||||
|
||||
{#if loading}
|
||||
Loading...
|
||||
{:else if errorState}
|
||||
An error occurred
|
||||
{:else if data == null || data.game == null}
|
||||
Game not found.
|
||||
{:else}
|
||||
{#snippet player(p: Player)}
|
||||
<a use:link href="/player/{p.id}"
|
||||
>{p.name} ({p.startElo} <span class="{p.delta<0?"text-red-700":"text-green-700"}" >{(p.delta<0?"":"+")+p.delta}</span>)
|
||||
</a>
|
||||
{/snippet}
|
||||
|
||||
{#snippet team(team: Team)}
|
||||
<div class="mx-3">
|
||||
<h2 class="text-xl">{team.name}</h2>
|
||||
<div>
|
||||
{@render player(team.p0)}
|
||||
</div>
|
||||
<div>
|
||||
{@render player(team.p1)}
|
||||
</div>
|
||||
</div>
|
||||
{/snippet}
|
||||
|
||||
Added by: {data.game.author.name} on {data.game.added}
|
||||
|
||||
<div class="flex justify-between">
|
||||
{@render team({
|
||||
name: "Team 1",
|
||||
p0: {
|
||||
id: data.game.team0player0.ID,
|
||||
name: data.game.team0player0.name,
|
||||
startElo: data.game.team0player0.history[0]!.startElo,
|
||||
delta: data.game.team0player0.history[0]!.delta,
|
||||
},
|
||||
p1: {
|
||||
id: data.game.team0player1.ID,
|
||||
name: data.game.team0player1.name,
|
||||
startElo: data.game.team0player1.history[0]!.startElo,
|
||||
delta: data.game.team0player1.history[0]!.delta,
|
||||
},
|
||||
})}
|
||||
<div class="text-2xl flex items-center">
|
||||
<div>
|
||||
<span>{data.game.score > 0 ? data.game.score : 0}</span>
|
||||
-
|
||||
<span>{data.game.score < 0 ? -data.game.score : 0}</span>
|
||||
</div>
|
||||
</div>
|
||||
{@render team({
|
||||
name: "Team 1",
|
||||
p0: {
|
||||
id: data.game.team1player0.ID,
|
||||
name: data.game.team1player0.name,
|
||||
startElo: data.game.team1player0.history[0]!.startElo,
|
||||
delta: data.game.team1player0.history[0]!.delta,
|
||||
},
|
||||
p1: {
|
||||
id: data.game.team1player1.ID,
|
||||
name: data.game.team1player1.name,
|
||||
startElo: data.game.team1player1.history[0]!.startElo,
|
||||
delta: data.game.team1player1.history[0]!.delta,
|
||||
},
|
||||
})}
|
||||
</div>
|
||||
{/if}
|
||||
62
web/src/pages/Player.svelte
Normal file
62
web/src/pages/Player.svelte
Normal file
@@ -0,0 +1,62 @@
|
||||
<script lang="ts">
|
||||
import { request } from "graphql-request";
|
||||
import { graphql } from "./../gql";
|
||||
import { onMount } from "svelte";
|
||||
import type { GetPlayerQuery } from "../gql/graphql";
|
||||
import { useRoute } from "@dvcol/svelte-simple-router/router";
|
||||
import Graph from "../lib/Graph.svelte";
|
||||
|
||||
const doc = graphql(`
|
||||
query getPlayer($playerID: ID!) {
|
||||
player(id: $playerID) {
|
||||
ID
|
||||
name
|
||||
elo
|
||||
history {
|
||||
delta
|
||||
endElo
|
||||
game {
|
||||
id
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
`);
|
||||
|
||||
let loading = $state(true);
|
||||
let errorState = $state(false);
|
||||
let data: GetPlayerQuery | undefined = $state();
|
||||
|
||||
onMount(() => {
|
||||
const idParam = useRoute().location?.params.id;
|
||||
if (typeof idParam == "string") {
|
||||
request(window.location.origin + "/graphql", doc, {
|
||||
playerID: idParam,
|
||||
})
|
||||
.then((e) => {
|
||||
data = e;
|
||||
loading = false;
|
||||
})
|
||||
.catch((e) => {
|
||||
console.error(e);
|
||||
errorState = true;
|
||||
loading = false;
|
||||
});
|
||||
} else {
|
||||
loading = false;
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
{#if loading}
|
||||
Loading...
|
||||
{:else if errorState}
|
||||
An error occurred
|
||||
{:else if data == null || data.player == null}
|
||||
Player not found.
|
||||
{:else}
|
||||
<div class="m-2">
|
||||
<h1 class="text-2xl">{data.player.name} ({data.player.elo})</h1>
|
||||
<Graph height={500} width={800} data={data.player.history.map((e) => e!.endElo)} />
|
||||
</div>
|
||||
{/if}
|
||||
Reference in New Issue
Block a user