Merge pull request #1599 from AtCoder-NoviSteps/#1569

✨ Add task grade guidelines (#1569)
AtCoder-NoviSteps · Dec 22, 2024 · 9c8782d · 9c8782d
2 parents 08ce03c + d7919b1
commit 9c8782d
Show file tree

Hide file tree

Showing 4 changed files with 203 additions and 2 deletions.
diff --git a/src/lib/components/TaskGrades/GradeGuidelineTable.svelte b/src/lib/components/TaskGrades/GradeGuidelineTable.svelte
@@ -0,0 +1,63 @@
+<script lang="ts">
+  import {
+    Table,
+    TableBody,
+    TableBodyCell,
+    TableBodyRow,
+    TableHead,
+    TableHeadCell,
+  } from 'flowbite-svelte';
+
+  import ExternalLinkWrapper from '$lib/components/ExternalLinkWrapper.svelte';
+  import { gradeGuidelineTableData } from '$lib/components/TaskGrades/grade_guideline_table_data';
+  import GradeLabel from '$lib/components/GradeLabel.svelte';
+
+  import { TASK_GRADE_CRITERIA_SHEET_URL } from '$lib/constants/urls';
+</script>
+
+<div class="container mx-auto w-5/6 lg:w-2/3 mt-6 text-gray-800 dark:text-gray-300">
+  <div>
+    AtCoder Beginners Contest（通称、ABC）の配点・問題と、対応するグレードの目安を示しています。
+  </div>
+  <div>
+    また、各グレードの基準に関しては、
+    <ExternalLinkWrapper url={TASK_GRADE_CRITERIA_SHEET_URL} description="こちら" />
+    をご覧ください。
+  </div>
+</div>
+
+<div class="container w-full lg:w-2/3 mx-auto mt-3 sm:mt-4 overflow-auto rounded-md border">
+  <Table
+    shadow
+    id="grade-guideline"
+    class="text-md table-fixed w-full"
+    aria-label="Task grade guideline table"
+  >
+    <TableHead class="text-sm bg-gray-100">
+      <TableHeadCell class="w-24 xs:w-32 px-3 sm:px-6 text-center">ABCの配点</TableHeadCell>
+      <TableHeadCell class="w-40 hidden sm:table-cell text-center">問題</TableHeadCell>
+      <TableHeadCell class="w-40 text-center">対応グレード</TableHeadCell>
+    </TableHead>
+
+    <TableBody tableBodyClass="divide-y">
+      {#each gradeGuidelineTableData as { point, task, lowerGrade, upperGrade }}
+        <TableBodyRow>
+          <TableBodyCell class="text-sm xs:text-md text-center py-3">{point}</TableBodyCell>
+          <TableBodyCell class="text-center py-3 hidden sm:table-cell">{task}</TableBodyCell>
+
+          {#if upperGrade === lowerGrade}
+            <TableBodyCell class="flex items-center justify-center space-x-3 py-3">
+              <GradeLabel taskGrade={upperGrade} />
+            </TableBodyCell>
+          {:else}
+            <TableBodyCell class="flex items-center justify-center space-x-3 py-3">
+              <GradeLabel taskGrade={lowerGrade} />
+              <p>〜</p>
+              <GradeLabel taskGrade={upperGrade} />
+            </TableBodyCell>
+          {/if}
+        </TableBodyRow>
+      {/each}
+    </TableBody>
+  </Table>
+</div>
diff --git a/src/lib/components/TaskGrades/grade_guideline_table_data.ts b/src/lib/components/TaskGrades/grade_guideline_table_data.ts
@@ -0,0 +1,127 @@
+import { TaskGrade } from '$lib/types/task';
+
+type TaskGradeGuideline = {
+  point: string;
+  task: string;
+  lowerGrade: TaskGrade;
+  upperGrade: TaskGrade;
+};
+
+type TaskGradeGuidelines = TaskGradeGuideline[];
+
+export const gradeGuidelineTableData: TaskGradeGuidelines = [
+  {
+    point: '〜 100',
+    task: '（JOI 一次予選 A）',
+    lowerGrade: TaskGrade.Q10,
+    upperGrade: TaskGrade.Q10,
+  },
+  {
+    point: '100',
+    task: 'A',
+    lowerGrade: TaskGrade.Q9,
+    upperGrade: TaskGrade.Q6,
+  },
+  {
+    point: '150',
+    task: 'A、B',
+    lowerGrade: TaskGrade.Q7,
+    upperGrade: TaskGrade.Q5,
+  },
+  {
+    point: '200',
+    task: 'B',
+    lowerGrade: TaskGrade.Q6,
+    upperGrade: TaskGrade.Q4,
+  },
+  {
+    point: '250',
+    task: 'B、C',
+    lowerGrade: TaskGrade.Q5,
+    upperGrade: TaskGrade.Q3,
+  },
+  {
+    point: '300',
+    task: 'C',
+    lowerGrade: TaskGrade.Q4,
+    upperGrade: TaskGrade.Q2,
+  },
+  {
+    point: '350',
+    task: 'C、D',
+    lowerGrade: TaskGrade.Q3,
+    upperGrade: TaskGrade.Q1,
+  },
+  {
+    point: '400',
+    task: 'D',
+    lowerGrade: TaskGrade.Q2,
+    upperGrade: TaskGrade.Q1,
+  },
+  {
+    point: '425',
+    task: 'D、E',
+    lowerGrade: TaskGrade.Q2,
+    upperGrade: TaskGrade.Q1,
+  },
+  {
+    point: '450',
+    task: 'D、E',
+    lowerGrade: TaskGrade.Q1,
+    upperGrade: TaskGrade.D1,
+  },
+  {
+    point: '475',
+    task: 'E、F',
+    lowerGrade: TaskGrade.Q1,
+    upperGrade: TaskGrade.D2,
+  },
+  {
+    point: '500',
+    task: 'E、F',
+    lowerGrade: TaskGrade.Q1,
+    upperGrade: TaskGrade.D3,
+  },
+  {
+    point: '525',
+    task: 'F',
+    lowerGrade: TaskGrade.D1,
+    upperGrade: TaskGrade.D3,
+  },
+  {
+    point: '550',
+    task: 'F',
+    lowerGrade: TaskGrade.D2,
+    upperGrade: TaskGrade.D4,
+  },
+  {
+    point: '575',
+    task: 'F、G',
+    lowerGrade: TaskGrade.D3,
+    upperGrade: TaskGrade.D4,
+  },
+  {
+    point: '600',
+    task: 'G',
+    lowerGrade: TaskGrade.D3,
+    upperGrade: TaskGrade.D4,
+  },
+  {
+    point: '625',
+    task: 'G',
+    lowerGrade: TaskGrade.D3,
+    upperGrade: TaskGrade.D5,
+  },
+  {
+    point: '650',
+    task: 'G',
+    lowerGrade: TaskGrade.D4,
+    upperGrade: TaskGrade.D5,
+  },
+  {
+    point: '675',
+    task: 'G',
+    lowerGrade: TaskGrade.D5,
+    upperGrade: TaskGrade.D6,
+  },
+];
diff --git a/src/lib/constants/urls.ts b/src/lib/constants/urls.ts
@@ -22,3 +22,6 @@ export const AOJ_PCK_URL: string = 'https://pro-ktmr.github.io/aoj-pck/';
 export const ICPC_JAPAN_PROBLEMS_URL: string = 'https://icpc-japan-problems.irrrrr.cc/';
 
 export const GITHUB_URL: string = 'https://github.com/AtCoder-NoviSteps/AtCoderNoviSteps';
+
+export const TASK_GRADE_CRITERIA_SHEET_URL: string =
+  'https://docs.google.com/spreadsheets/d/1GJbTRRBsoBaY-CXIr3dIXmxkwacV4nHOTOIMCmo__Ug/';
diff --git a/src/routes/problems/+page.svelte b/src/routes/problems/+page.svelte
@@ -1,11 +1,14 @@
 <script lang="ts">
   import { Tabs } from 'flowbite-svelte';
 
-  import { compareByContestIdAndTaskId } from '$lib/utils/task.js';
+  import type { TaskResults } from '$lib/types/task';
+
+  import { compareByContestIdAndTaskId } from '$lib/utils/task';
+
   import HeadingOne from '$lib/components/HeadingOne.svelte';
   import TabItemWrapper from '$lib/components/TabItemWrapper.svelte';
-  import type { TaskResults } from '$lib/types/task';
   import TaskGradeList from '$lib/components/TaskGradeList.svelte';
+  import GradeGuidelineTable from '$lib/components/TaskGrades/GradeGuidelineTable.svelte';
 
   export let data;
 
@@ -27,6 +30,11 @@
       <TaskGradeList {taskResults} {isAdmin} {isLoggedIn}></TaskGradeList>
     </TabItemWrapper>
 
+    <!-- Grade guidelines -->
+    <TabItemWrapper workbookType={null} title="グレードの目安">
+      <GradeGuidelineTable />
+    </TabItemWrapper>
+
     <!-- HACK: 以下、各テーブルを実装するまで非表示 -->
     <!-- Tags -->
     <!-- <TabItemWrapper title="Tags">