✨ Add task grade guidelines (#1569)

Author: KATO-Hiro

src/lib/components/TaskGrades/GradeGuidelineTable.svelte

@@ -0,0 +1,44 @@
+<script lang="ts">
+  import {
+    Table,
+    TableBody,
+    TableBodyCell,
+    TableBodyRow,
+    TableHead,
+    TableHeadCell,
+  } from 'flowbite-svelte';
+
+  import { gradeGuidelineTableData } from '$lib/components/TaskGrades/grade_guideline_table_data';
+  import GradeLabel from '$lib/components/GradeLabel.svelte';
+</script>
+
+<div class="container w-full lg:w-2/3 mx-auto mt-6 lg:mt-10 overflow-auto rounded-md border">
+  <Table shadow id="grade-guideline" class="text-md table-fixed w-full">
+    <TableHead class="text-sm bg-gray-100">
+      <TableHeadCell class="w-28 xs:w-32 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>

src/lib/components/TaskGrades/grade_guideline_table_data.ts

@@ -0,0 +1,118 @@
+import { TaskGrade } from '$lib/types/task';
+
+export const gradeGuidelineTableData = [
+  {
+    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,
+  },
+];

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">