Basic contest name filter

src/components/ContestList.vue

@@ -0,0 +1,59 @@
+<script setup lang="ts">
+import { computed, ref, watch } from "vue";
+import { storeToRefs } from "pinia";
+import type { ContestDetails, ProblemSummary } from "luogu-api-docs/luogu-api";
+import { useUserStore } from "@/stores/user";
+import ContestListProblems from "@/components/ContestListProblems.vue";
+
+export interface ContestWithProblems {
+  details: ContestDetails;
+  problems: ProblemSummary[];
+}
+
+const { contests } = defineProps<{
+  contests: Record<string, ContestWithProblems>;
+}>();
+
+const keyword = ref("");
+const filteredContests = computed(() =>
+  Object.values(contests)
+    .filter(({ details: { name } }) =>
+      name.toLowerCase().includes(keyword.value.toLowerCase()),
+    )
+    .sort(({ details: { id: a } }, { details: { id: b } }) =>
+      a == b ? 0 : a < b ? 1 : -1,
+    ),
+);
+
+const user = storeToRefs(useUserStore());
+const scores = ref<Record<string, Record<string, number>>>({});
+watch(
+  user.uid,
+  async (uid) => {
+    scores.value = {};
+    if (!uid) return;
+
+    const r = await fetch(`/users/${uid}.json`);
+    if (r.ok) scores.value = await r.json();
+  },
+  { immediate: true },
+);
+</script>
+
+<template>
+  <label>
+    关键词
+    <input type="search" v-model="keyword" />
+  </label>
+  <main>
+    <ul>
+      <ContestListProblems
+        v-for="contest in filteredContests"
+        :contest="contest.details"
+        :problems="contest.problems"
+        :scores="scores[contest.details.id]"
+        :key="contest.details.id"
+      />
+    </ul>
+  </main>
+</template>

src/components/ContestListProblems.vue

@@ -0,0 +1,44 @@
+<script setup lang="ts">
+import { storeToRefs } from "pinia";
+import type { Contest, ProblemSummary } from "luogu-api-docs/luogu-api";
+import { useUserStore } from "@/stores/user";
+
+const { scores } = defineProps<{
+  contest: Contest;
+  problems: ProblemSummary[];
+  scores?: Record<string, number>;
+}>();
+
+const user = storeToRefs(useUserStore());
+
+const isPassed = (score: number | undefined, ruleType: number) =>
+  score === undefined
+    ? undefined
+    : (ruleType != 2 && score >= 100) || (ruleType == 2 && score >= 0);
+
+function getColor(contest: Contest, pid: string) {
+  const PASSED = "yellowgreen";
+  const SUBMITTED = "darkorange";
+  const passedDuringContest = isPassed(scores?.[pid], contest.ruleType);
+  if (passedDuringContest || user.passed.value.has(pid)) return PASSED;
+  if (passedDuringContest === false || user.submitted.value.has(pid))
+    return SUBMITTED;
+}
+</script>
+
+<template>
+  <li>
+    {{ contest.name }}
+    <ol>
+      <li v-for="problem in problems" :key="problem.pid">
+        <span
+          :style="{
+            backgroundColor: getColor(contest, problem.pid),
+          }"
+          >{{ problem.pid }}</span
+        >
+        {{ problem.title }}
+      </li>
+    </ol>
+  </li>
+</template>

src/router/index.ts

@@ -1,11 +1,11 @@
 import type { RouterOptions } from "vite-ssg";
-import ContestsView from "@/views/ContestsView.vue";
+import ContestView from "@/views/ContestView.vue";
 
 const routes: RouterOptions["routes"] = [
   {
     path: "/",
     name: "contests",
-    component: ContestsView,
+    component: ContestView,
   },
 ];
 

src/views/ContestView.vue

@@ -0,0 +1,8 @@
+<script setup lang="ts">
+import contests from "@/contests.json";
+import ContestList from "@/components/ContestList.vue";
+</script>
+
+<template>
+  <ContestList :contests="contests" />
+</template>