From e3164246e1733c717072b804566a485458769314 Mon Sep 17 00:00:00 2001
From: Ilion Beyst <ilion.beyst@gmail.com>
Date: Mon, 24 Oct 2022 07:19:52 +0200
Subject: create simple stats page

---
 web/pw-server/src/routes/bots/[bot_name].svelte    | 173 --------------------
 .../src/routes/bots/[bot_name]/index.svelte        | 176 +++++++++++++++++++++
 .../src/routes/bots/[bot_name]/stats.svelte        | 169 ++++++++++++++++++++
 3 files changed, 345 insertions(+), 173 deletions(-)
 delete mode 100644 web/pw-server/src/routes/bots/[bot_name].svelte
 create mode 100644 web/pw-server/src/routes/bots/[bot_name]/index.svelte
 create mode 100644 web/pw-server/src/routes/bots/[bot_name]/stats.svelte

(limited to 'web/pw-server/src')

diff --git a/web/pw-server/src/routes/bots/[bot_name].svelte b/web/pw-server/src/routes/bots/[bot_name].svelte
deleted file mode 100644
index 58e89ad..0000000
--- a/web/pw-server/src/routes/bots/[bot_name].svelte
+++ /dev/null
@@ -1,173 +0,0 @@
-<script lang="ts" context="module">
-  import { ApiClient } from "$lib/api_client";
-
-  export async function load({ params, fetch }) {
-    const apiClient = new ApiClient(fetch);
-
-    try {
-      const [botData, matchesPage] = await Promise.all([
-        apiClient.get(`/api/bots/${params["bot_name"]}`),
-        apiClient.get("/api/matches", { bot: params["bot_name"], count: "20" }),
-      ]);
-
-      const { bot, owner, versions } = botData;
-      versions.sort((a: string, b: string) =>
-        dayjs(a["created_at"]).isAfter(b["created_at"]) ? -1 : 1
-      );
-      return {
-        props: {
-          bot,
-          owner,
-          versions,
-          matches: matchesPage["matches"],
-        },
-      };
-    } catch (error) {
-      return {
-        status: error.status,
-        error: error,
-      };
-    }
-  }
-</script>
-
-<script lang="ts">
-  import dayjs from "dayjs";
-  import { currentUser } from "$lib/stores/current_user";
-  import MatchList from "$lib/components/matches/MatchList.svelte";
-  import LinkButton from "$lib/components/LinkButton.svelte";
-
-  export let bot: object;
-  export let owner: object;
-  export let versions: object[];
-  export let matches: object[];
-
-  // function last_updated() {
-  //   versions.sort()
-  // }
-
-  // let files;
-
-  // async function submitCode() {
-  //   console.log("click");
-  //   const token = get_session_token();
-
-  //   const formData = new FormData();
-  //   formData.append("File", files[0]);
-
-  //   const res = await fetch(`/api/bots/${bot["id"]}/upload`, {
-  //     method: "POST",
-  //     headers: {
-  //       // the content type header will be set by the browser
-  //       Authorization: `Bearer ${token}`,
-  //     },
-  //     body: formData,
-  //   });
-
-  //   console.log(res.statusText);
-  // }
-</script>
-
-<!-- 
-<div>Upload code</div>
-<form on:submit|preventDefault={submitCode}>
-  <input type="file" bind:files />
-  <button type="submit">Submit</button>
-</form> -->
-
-<div class="container">
-  <div class="header">
-    <h1 class="bot-name">{bot["name"]}</h1>
-    {#if owner}
-      <a class="owner-name" href="/users/{owner['username']}">
-        {owner["username"]}
-      </a>
-    {/if}
-  </div>
-
-  {#if $currentUser && $currentUser["user_id"] === bot["owner_id"]}
-    <div>
-      <!-- TODO: can we avoid hardcoding the url? -->
-      Publish a new version by pushing a docker container to
-      <code>registry.planetwars.dev/{bot["name"]}:latest</code>, or using the web editor.
-    </div>
-
-    <div class="versions">
-      <h3>Versions</h3>
-      <ul class="version-list">
-        {#each versions.slice(0, 10) as version}
-          <li class="bot-version">
-            {dayjs(version["created_at"]).format("YYYY-MM-DD HH:mm")}
-            {#if version["container_digest"]}
-              <span class="container-digest">{version["container_digest"]}</span>
-            {:else}
-              <a href={`/code/${version["id"]}`}>view code</a>
-            {/if}
-          </li>
-        {/each}
-      </ul>
-      {#if versions.length == 0}
-        This bot does not have any versions yet.
-      {/if}
-    </div>
-  {/if}
-
-  <div class="matches">
-    <h3>Recent matches</h3>
-    <MatchList {matches} />
-    {#if matches.length > 0}
-      <div class="btn-container">
-        <LinkButton href={`/matches?bot=${bot["name"]}`}>All matches</LinkButton>
-      </div>
-    {/if}
-  </div>
-</div>
-
-<style lang="scss">
-  .container {
-    width: 800px;
-    max-width: 80%;
-    margin: 50px auto;
-  }
-
-  .header {
-    display: flex;
-    justify-content: space-between;
-    align-items: flex-end;
-    margin-bottom: 60px;
-    border-bottom: 1px solid black;
-  }
-
-  $header-space-above-line: 12px;
-
-  .bot-name {
-    font-size: 24pt;
-    margin-bottom: $header-space-above-line;
-  }
-
-  .owner-name {
-    font-size: 14pt;
-    text-decoration: none;
-    color: #333;
-    margin-bottom: $header-space-above-line;
-  }
-
-  .btn-container {
-    padding: 24px;
-    text-align: center;
-  }
-
-  .versions {
-    margin: 30px 0;
-  }
-
-  .version-list {
-    padding: 0;
-  }
-
-  .bot-version {
-    display: flex;
-    justify-content: space-between;
-    padding: 4px 24px;
-  }
-</style>
diff --git a/web/pw-server/src/routes/bots/[bot_name]/index.svelte b/web/pw-server/src/routes/bots/[bot_name]/index.svelte
new file mode 100644
index 0000000..6e93834
--- /dev/null
+++ b/web/pw-server/src/routes/bots/[bot_name]/index.svelte
@@ -0,0 +1,176 @@
+<script lang="ts" context="module">
+  import { ApiClient } from "$lib/api_client";
+
+  export async function load({ params, fetch }) {
+    const apiClient = new ApiClient(fetch);
+
+    try {
+      const bot_name = params["bot_name"];
+      const [botData, botStats, matchesPage] = await Promise.all([
+        apiClient.get(`/api/bots/${bot_name}`),
+        apiClient.get(`/api/bots/${bot_name}/stats`),
+        apiClient.get("/api/matches", { bot: params["bot_name"], count: "20" }),
+      ]);
+
+      const { bot, owner, versions } = botData;
+      versions.sort((a: string, b: string) =>
+        dayjs(a["created_at"]).isAfter(b["created_at"]) ? -1 : 1
+      );
+      return {
+        props: {
+          bot,
+          owner,
+          versions,
+          botStats,
+          matches: matchesPage["matches"],
+        },
+      };
+    } catch (error) {
+      return {
+        status: error.status,
+        error: error,
+      };
+    }
+  }
+</script>
+
+<script lang="ts">
+  import dayjs from "dayjs";
+  import { currentUser } from "$lib/stores/current_user";
+  import MatchList from "$lib/components/matches/MatchList.svelte";
+  import LinkButton from "$lib/components/LinkButton.svelte";
+
+  export let bot: object;
+  export let owner: object;
+  export let versions: object[];
+  export let matches: object[];
+  export let botStats: object;
+  // function last_updated() {
+  //   versions.sort()
+  // }
+
+  // let files;
+
+  // async function submitCode() {
+  //   console.log("click");
+  //   const token = get_session_token();
+
+  //   const formData = new FormData();
+  //   formData.append("File", files[0]);
+
+  //   const res = await fetch(`/api/bots/${bot["id"]}/upload`, {
+  //     method: "POST",
+  //     headers: {
+  //       // the content type header will be set by the browser
+  //       Authorization: `Bearer ${token}`,
+  //     },
+  //     body: formData,
+  //   });
+
+  //   console.log(res.statusText);
+  // }
+</script>
+
+<!-- 
+<div>Upload code</div>
+<form on:submit|preventDefault={submitCode}>
+  <input type="file" bind:files />
+  <button type="submit">Submit</button>
+</form> -->
+
+<div class="container">
+  <div class="header">
+    <h1 class="bot-name">{bot["name"]}</h1>
+    {#if owner}
+      <a class="owner-name" href="/users/{owner['username']}">
+        {owner["username"]}
+      </a>
+    {/if}
+  </div>
+
+  {#if $currentUser && $currentUser["user_id"] === bot["owner_id"]}
+    <div>
+      <!-- TODO: can we avoid hardcoding the url? -->
+      Publish a new version by pushing a docker container to
+      <code>registry.planetwars.dev/{bot["name"]}:latest</code>, or using the web editor.
+    </div>
+
+    <div class="versions">
+      <h3>Versions</h3>
+      <ul class="version-list">
+        {#each versions.slice(0, 10) as version}
+          <li class="bot-version">
+            {dayjs(version["created_at"]).format("YYYY-MM-DD HH:mm")}
+            {#if version["container_digest"]}
+              <span class="container-digest">{version["container_digest"]}</span>
+            {:else}
+              <a href={`/code/${version["id"]}`}>view code</a>
+            {/if}
+          </li>
+        {/each}
+      </ul>
+      {#if versions.length == 0}
+        This bot does not have any versions yet.
+      {/if}
+    </div>
+  {/if}
+
+  <div class="matches">
+    <h3>Recent matches</h3>
+    <MatchList {matches} />
+    {#if matches.length > 0}
+      <div class="btn-container">
+        <LinkButton href={`/matches?bot=${bot["name"]}`}>All matches</LinkButton>
+      </div>
+    {/if}
+  </div>
+</div>
+
+<style lang="scss">
+  .container {
+    width: 800px;
+    max-width: 80%;
+    margin: 50px auto;
+  }
+
+  .header {
+    display: flex;
+    justify-content: space-between;
+    align-items: flex-end;
+    margin-bottom: 60px;
+    border-bottom: 1px solid black;
+  }
+
+  $header-space-above-line: 12px;
+
+  .bot-name {
+    font-size: 24pt;
+    margin-bottom: $header-space-above-line;
+  }
+
+  .owner-name {
+    font-size: 14pt;
+    text-decoration: none;
+    color: #333;
+    margin-bottom: $header-space-above-line;
+  }
+
+  .btn-container {
+    padding: 24px;
+    text-align: center;
+  }
+
+  .versions {
+    margin: 30px 0;
+  }
+
+  .version-list {
+    padding: 0;
+  }
+
+  .bot-version {
+    display: flex;
+    justify-content: space-between;
+    padding: 4px 24px;
+  }
+</style>
diff --git a/web/pw-server/src/routes/bots/[bot_name]/stats.svelte b/web/pw-server/src/routes/bots/[bot_name]/stats.svelte
new file mode 100644
index 0000000..6b5a2e1
--- /dev/null
+++ b/web/pw-server/src/routes/bots/[bot_name]/stats.svelte
@@ -0,0 +1,169 @@
+<script lang="ts" context="module">
+  import { ApiClient } from "$lib/api_client";
+
+  export async function load({ params, fetch }) {
+    const apiClient = new ApiClient(fetch);
+
+    try {
+      const bot_name = params["bot_name"];
+      const [botData, botStats, leaderboard] = await Promise.all([
+        apiClient.get(`/api/bots/${bot_name}`),
+        apiClient.get(`/api/bots/${bot_name}/stats`),
+        apiClient.get("/api/leaderboard"),
+      ]);
+
+      const { bot, owner } = botData;
+      return {
+        props: {
+          bot,
+          owner,
+          botStats,
+          leaderboard,
+        },
+      };
+    } catch (error) {
+      return {
+        status: error.status,
+        error: error,
+      };
+    }
+  }
+
+  function mergedStats(rawStats: object) {
+    return Object.fromEntries(
+      Object.entries(rawStats).map(([opponent, ms]) => {
+        const mapStats = ms as { k: MatchupStats };
+        return [opponent, Object.values(mapStats).reduce(mergeStats)];
+      })
+    );
+  }
+
+  type MatchupStats = {
+    win: number;
+    tie: number;
+    loss: number;
+  };
+
+  function winRate(stats: MatchupStats) {
+    return (stats.win + 0.5 * stats.tie) / (stats.win + stats.tie + stats.loss);
+  }
+
+  function mergeStats(a: MatchupStats, b: MatchupStats): MatchupStats {
+    return {
+      win: a.win + b.win,
+      tie: a.tie + b.tie,
+      loss: a.loss + b.loss,
+    };
+  }
+</script>
+
+<script lang="ts">
+  export let bot: object;
+  export let owner: object;
+  export let botStats: object;
+  export let leaderboard: object[];
+
+  $: mergedStats = mergedStats(botStats);
+</script>
+
+<div class="container">
+  <div class="header">
+    <h1 class="bot-name">{bot["name"]}</h1>
+    {#if owner}
+      <a class="owner-name" href="/users/{owner['username']}">
+        {owner["username"]}
+      </a>
+    {/if}
+  </div>
+  <h2>Stats</h2>
+  <table class="leaderboard">
+    <tr class="leaderboard-row leaderboard-header">
+      <th class="leaderboard-rank">Rank</th>
+      <th class="leaderboard-rating">Rating</th>
+      <th class="leaderboard-bot">Bot</th>
+      <th class="leaderboard-author">Author</th>
+      <th>Winrate</th>
+      <th>Matches</th>
+    </tr>
+    {#each leaderboard as entry, index}
+      <tr class="leaderboard-row">
+        <td class="leaderboard-rank">{index + 1}</td>
+        <td class="leaderboard-rating">
+          {entry["rating"].toFixed(0)}
+        </td>
+        <td class="leaderboard-bot">
+          <a class="leaderboard-href" href="/bots/{entry['bot']['name']}"
+            >{entry["bot"]["name"]}
+          </a></td
+        >
+        <td class="leaderboard-author">
+          {#if entry["author"]}
+            <!-- TODO: remove duplication -->
+            <a class="leaderboard-href" href="/users/{entry['author']['username']}"
+              >{entry["author"]["username"]}</a
+            >
+          {/if}
+        </td>
+        {#if mergedStats[entry["bot"]["name"]]}
+          <td>
+            {winRate(mergedStats[entry["bot"]["name"]]).toFixed(2)}
+          </td>
+          <td>
+            <a href={`/matches?bot=${bot["name"]}&opponent=${entry["bot"]["name"]}`}>view matches</a
+            >
+          </td>
+        {:else}
+          <td />
+          <td>no matches yet </td>{/if}
+      </tr>
+    {/each}
+  </table>
+</div>
+
+<style lang="scss">
+  .container {
+    width: 800px;
+    max-width: 80%;
+    margin: 50px auto;
+  }
+
+  .header {
+    display: flex;
+    justify-content: space-between;
+    align-items: flex-end;
+    margin-bottom: 60px;
+    border-bottom: 1px solid black;
+  }
+
+  $header-space-above-line: 12px;
+
+  .bot-name {
+    font-size: 24pt;
+    margin-bottom: $header-space-above-line;
+  }
+
+  .owner-name {
+    font-size: 14pt;
+    text-decoration: none;
+    color: #333;
+    margin-bottom: $header-space-above-line;
+  }
+
+  .leaderboard {
+    margin: 18px 10px;
+    text-align: center;
+  }
+
+  .leaderboard th,
+  .leaderboard td {
+    padding: 8px 16px;
+  }
+  .leaderboard-rank {
+    color: #333;
+  }
+
+  .leaderboard-href {
+    text-decoration: none;
+    color: black;
+  }
+</style>
-- 
cgit v1.2.3