✨ leaderboard api

Author: Platane

.github/workflows/main.yml

@@ -21,8 +21,18 @@ jobs:
         env:
           VITE_XR8_API_KEY: ${{ secrets.VITE_XR8_API_KEY }}
       - run: cp doc/* ./dist/
+
       - uses: actions/upload-pages-artifact@v3
         with:
           path: dist
+
       - uses: actions/deploy-pages@v4
         if: success() && github.ref == 'refs/heads/master'
+
+      - run: bunx wrangler deploy
+        if: success() && github.ref == 'refs/heads/master'
+        working-directory: src/api-leaderboard
+        env:
+          IMAGES_BUCKET_PUBLIC_URL: https://pub-6518f5a0bbad459698868dfbf8d106df.r2.dev
+          CLOUDFLARE_API_TOKEN: ${{ secrets.CLOUDFLARE_API_TOKEN }}
+          GITHUB_ACCESS_TOKEN: ${{ secrets.LEADERBOARD_GITHUB_ACCESS_TOKEN }}

.gitignore

@@ -1,3 +1,5 @@
 node_modules
 dist
 .env
+.dev.vars
+.wrangler

bun.lockb

@@ -9,13 +9,15 @@
     "@react-three/drei": "10.0.6",
     "@react-three/fiber": "9.1.2",
     "cannon-es": "0.20.0",
+    "parse-multipart-data": "1.5.0",
     "react": "19.1.0",
     "react-dom": "19.1.0",
     "react-touch-visualizer": "0.0.1",
     "three": "0.175.0",
     "tunnel-rat": "0.1.2"
   },
   "devDependencies": {
+    "@cloudflare/workers-types": "4.20250415.0",
     "@types/bun": "1.2.9",
     "@types/loadable__component": "5.13.9",
     "@types/react": "19.1.2",
@@ -24,7 +26,8 @@
     "@types/webxr": "0.5.21",
     "prettier": "2.8.8",
     "typescript": "5.8.3",
-    "vite": "6.2.6"
+    "vite": "6.2.6",
+    "wrangler": "4.11.0"
   },
   "scripts": {
     "type": "tsc --noEmit",

package.json

@@ -0,0 +1,258 @@
+import * as crypto from "crypto";
+import { parse as multiPartParse } from "parse-multipart-data";
+import type { R2Bucket } from "@cloudflare/workers-types";
+import {
+  categories,
+  DiceValue,
+  getScoreSheetScore,
+  isScoreSheet,
+  isScoreSheetFinished,
+} from "../gameRules/types";
+import { getScore } from "../gameRules/getScore";
+import { nDice } from "../gameRules/game";
+
+const handler = async (req: Request, env: Env) => {
+  const contentType = req.headers.get("content-type");
+  if (!contentType?.startsWith("multipart/form-data;"))
+    return new Response("Expect multipart", { status: 400 });
+
+  const boundary = contentType.split("boundary=")[1].trim();
+
+  const params = multiPartParse(Buffer.from(await req.arrayBuffer()), boundary);
+
+  const screenshots = new Map<string, string>();
+  for (const category of categories) {
+    const param = params.find((p) => p.name === category);
+
+    if (!param)
+      return new Response(`missing screenshot for category "${category}"`, {
+        status: 400,
+      });
+
+    const hash = crypto
+      .createHash("md5")
+      .update(new Uint8Array(param.data))
+      .digest("base64")
+      .replaceAll(/[\/\+]/g, "")
+      .padEnd(16, "=")
+      .slice(0, 16)
+      .toLowerCase();
+
+    if (param.data.byteLength > 10_000)
+      return new Response("unexpected image format", { status: 400 });
+
+    const extension =
+      (param.type === "image/jpeg" && ".jpeg") ||
+      (param.type === "image/png" && ".png") ||
+      (param.type === "image/webp" && ".webp") ||
+      "";
+
+    const key = hash + extension;
+    await env.images_bucket.put(key, param.data, {
+      customMetadata: {
+        "cache-control": "public, max-age=31536000, immutable",
+      },
+    });
+
+    screenshots.set(category, key);
+  }
+
+  const gameParam = params.find((p) => p.name === "game");
+  if (!gameParam) return new Response(`missing entry  "game"`, { status: 400 });
+  const game = JSON.parse(gameParam.data.toString());
+
+  const scoreSheet = game.scoreSheet;
+  if (!isScoreSheet(scoreSheet, nDice) || !isScoreSheetFinished(scoreSheet))
+    return new Response(`missing finished scoresheet"`, { status: 400 });
+
+  const user = "anonym";
+
+  const dicesToUnicode = (dices: DiceValue[]) =>
+    dices
+      .map(
+        (d) =>
+          (d === 1 && "⚀") ||
+          (d === 2 && "⚁") ||
+          (d === 3 && "⚂") ||
+          (d === 4 && "⚃") ||
+          (d === 5 && "⚄") ||
+          (d === 6 && "⚅") ||
+          "\xa0"
+      )
+      .join("");
+
+  const markdownBlock =
+    `## ${getScoreSheetScore(scoreSheet)} by __${user}__\n` +
+    "|Combination|Score|Screenshot|\n" +
+    "|--|--|--|\n" +
+    categories
+      .map(
+        (category) =>
+          "| " +
+          category.padEnd(
+            Math.max(...categories.map((c) => c.length)),
+            "\xa0"
+          ) +
+          " | " +
+          getScore(category, scoreSheet[category])
+            .toString()
+            .padStart(2, "\xa0") +
+          " " +
+          dicesToUnicode(scoreSheet[category]) +
+          " | " +
+          `<img width="50px" height="34" src="${
+            env.IMAGES_BUCKET_PUBLIC_URL + screenshots.get(category)
+          }"/>` +
+          " |"
+      )
+      .join("\n");
+
+  const { entries, id } = await getLeaderboard(env);
+
+  if (entries.some((e) => e.block === markdownBlock))
+    return new Response(`already submitted"`, { status: 400 });
+
+  entries.push({ score: getScoreSheetScore(scoreSheet), block: markdownBlock });
+  entries.sort((a, b) => b.score - a.score);
+
+  while (entries.length > 10) entries.pop();
+
+  await setLeaderboard(env, id, entries);
+
+  const isTopScore = entries.some((b) => b.block === markdownBlock);
+  const leaderboardUrl = `https://github.com/${env.LEADER_BOARD_REPOSITORY}/issues/${env.LEADER_BOARD_ISSUE_NUMBER}`;
+
+  return new Response(JSON.stringify({ isTopScore, leaderboardUrl }), {
+    status: 200,
+    headers: { "Content-Type": "application/json" },
+  });
+};
+
+const getLeaderboard = async (env: Env) => {
+  const query = /* GraphQL */ `
+    query (
+      $repository_owner: String!
+      $repository_name: String!
+      $issue_number: Int!
+    ) {
+      repository(name: $repository_name, owner: $repository_owner) {
+        issue(number: $issue_number) {
+          body
+          id
+        }
+      }
+    }
+  `;
+  const [repository_owner, repository_name] =
+    env.LEADER_BOARD_REPOSITORY.split("/");
+  const variables = {
+    repository_owner,
+    repository_name,
+    issue_number: +env.LEADER_BOARD_ISSUE_NUMBER,
+  };
+
+  const data = await githubGraphQLRequest<any>(env, query, variables);
+
+  const body = data.repository.issue.body as string;
+  const id = data.repository.issue.id as string;
+  const entries = [...body.matchAll(/## (\d+).*?\n(|.*|\n?)+/g)].map(
+    ([block, score]) => ({ block, score: +score })
+  );
+
+  return { entries, id };
+};
+
+const setLeaderboard = async (
+  env: Env,
+  id: string,
+  entries: { block: string }[]
+) => {
+  const query = /* GraphQL */ `
+    mutation ($body: String!, $id: ID!) {
+      updateIssue(input: { id: $id, body: $body }) {
+        issue {
+          body
+        }
+      }
+    }
+  `;
+
+  const variables = {
+    id,
+    body: entries.map((e) => e.block).join("\n"),
+  };
+
+  await githubGraphQLRequest(env, query, variables);
+};
+
+const githubGraphQLRequest = async <T extends unknown>(
+  { GITHUB_ACCESS_TOKEN }: { GITHUB_ACCESS_TOKEN: string },
+  query: string,
+  variables: any
+) => {
+  const res = await fetch("https://api.github.com/graphql", {
+    headers: {
+      Authorization: `bearer ${GITHUB_ACCESS_TOKEN}`,
+      "Content-Type": "application/json",
+      "User-Agent": "me@platane.me",
+    },
+    method: "POST",
+    body: JSON.stringify({ variables, query }),
+  });
+
+  if (!res.ok) throw new Error(await res.text().catch(() => res.statusText));
+
+  const { data, errors } = (await res.json()) as {
+    data: any;
+    errors?: { message: string }[];
+  };
+
+  if (errors?.[0]) throw errors[0];
+
+  return data as T;
+};
+
+type Env = {
+  GITHUB_ACCESS_TOKEN: string;
+  LEADER_BOARD_REPOSITORY: string;
+  LEADER_BOARD_ISSUE_NUMBER: string;
+  IMAGES_BUCKET_PUBLIC_URL: string;
+  images_bucket: R2Bucket;
+};
+
+const cors =
+  <
+    Req extends { headers: Headers },
+    Res extends { headers: Headers },
+    A extends Array<any>
+  >(
+    f: (req: Req, ...args: A) => Res | Promise<Res>
+  ) =>
+  async (req: Req, ...args: A) => {
+    const res = await f(req, ...args);
+
+    const origin = req.headers.get("origin");
+
+    if (origin) {
+      const { host, hostname } = new URL(origin);
+
+      if (hostname === "localhost" || host === "platane.github.io")
+        res.headers.set("Access-Control-Allow-Origin", origin);
+    }
+
+    res.headers.set("Access-Control-Allow-Methods", "POST, OPTIONS");
+    res.headers.set("Access-Control-Allow-Headers", "Content-Type");
+    return res;
+  };
+
+export default {
+  fetch: cors((req: Request, env: Env) => {
+    const url = new URL(req.url);
+
+    if (req.method === "OPTIONS") return new Response();
+
+    if (req.method === "POST") return handler(req, env);
+
+    return new Response("", { status: 404 });
+  }),
+};

src/api-leaderboard/index.ts

@@ -0,0 +1,18 @@
+name = "yar-htzee-leaderboard"
+
+main = "./index.ts"
+
+
+compatibility_date = "2024-09-23"
+
+compatibility_flags = ["nodejs_compat"]
+
+[[r2_buckets]]
+binding = 'images_bucket'
+bucket_name = 'yar-htzee-leaderboard-images'
+
+[vars]
+GITHUB_ACCESS_TOKEN = "XXX"
+LEADER_BOARD_REPOSITORY = "platane/yAR-htzee"
+LEADER_BOARD_ISSUE_NUMBER = "5"
+IMAGES_BUCKET_PUBLIC_URL = "https://example.com/"