Merge pull request #1904 from AtCoder-NoviSteps/#1901

✨ Publish contest table (#1901)

Author: KATO-Hiro

src/lib/components/ExternalLinkWrapper.svelte

@@ -8,6 +8,7 @@
     textColorInDarkMode?: string;
     textOverflow?: string;
     iconSize?: number;
+    useInlineFlex?: boolean;
   }
 
   let {
@@ -17,12 +18,13 @@
     textColorInDarkMode = 'dark:text-primary-500',
     textOverflow = '',
     iconSize = 4,
+    useInlineFlex = true,
   }: Props = $props();
 </script>
 
 <a
   href={url}
-  class={`inline-flex items-center font-medium ${textSize} text-primary-600 hover:underline ${textColorInDarkMode}`}
+  class={`${useInlineFlex ? 'inline-flex' : ''} items-center font-medium ${textSize} text-primary-600 hover:underline ${textColorInDarkMode}`}
   target="_blank"
   rel="noreferrer"
 >

src/lib/components/GradeLabel.svelte

@@ -25,13 +25,23 @@
 
   let grade = $derived(getTaskGradeLabel(taskGrade));
   let gradeColor = $derived(getTaskGradeColor(taskGrade));
+
+  function addGradientIfNeeds(taskGrade: TaskGrade | string) {
+    if (taskGrade === TaskGrade.D6) {
+      const bronze =
+        'bg-gradient-to-br from-atcoder-D6 via-stone-600 to-amber-600 shadow-inner shadow shadow-amber-900/80 ring-2 ring-amber-300/50 text-amber-50 font-bold drop-shadow relative overflow-hidden';
+      return bronze;
+    }
+    return '';
+  }
+
+  let gradient = $derived(addGradientIfNeeds(taskGrade));
 </script>
 
-<div class="rounded-lg border-2 {toChangeBorderColorIfNeeds(grade)}">
+<div class="rounded-lg border-2 {toChangeBorderColorIfNeeds(grade)} {gradient ? 'shadow-md' : ''}">
   <div
-    class="p-{defaultPadding} w-{reducedWidth} xs:w-{defaultWidth} text-sm xs:text-{defaultTextSize} text-center rounded-md {toChangeTextColorIfNeeds(
-      grade,
-    )} {gradeColor}"
+    class="p-{defaultPadding} w-{reducedWidth} xs:w-{defaultWidth} text-sm xs:text-{defaultTextSize} text-center rounded-md
+    {gradient || toChangeTextColorIfNeeds(grade) + ' ' + gradeColor}"
   >
     {#if taskGrade !== TaskGrade.PENDING}
       {grade}

src/lib/components/SubmissionStatus/AcceptedCounter.svelte

@@ -21,10 +21,9 @@
   });
 </script>
 
-<!-- FIXME: 横幅を微調整する -->
 <!-- See: -->
 <!-- https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Number/toFixed -->
-<div class="text-xs xs:text-sm w-max-[72px] w-max-[96px] text-center">
+<div class="text-xs md:text-sm w-min-[72px] w-max-[96px] text-center">
   <div>
     {acceptedCount} / {allTaskCount}
   </div>

src/lib/components/TaskList.svelte

@@ -33,7 +33,6 @@
 
   let { grade, taskResults, isAdmin, isLoggedIn }: Props = $props();
 
-  // TODO: 他のコンポーネントでも利用できるようにする。
   let updatingModal: UpdatingModal | null = null;
 
   function openModal(taskResult: TaskResult): void {
@@ -48,17 +47,24 @@
 <Accordion flush>
   <AccordionItem>
     {#snippet header()}
-      <span class="flex justify-around w-full place-items-center">
-        <GradeLabel
-          taskGrade={grade}
-          defaultPadding={0.25}
-          defaultWidth={12}
-          reducedWidth={9}
-          defaultTextSize="xl"
-        />
+      <span class="grid grid-cols-[1fr_6fr_0fr] sm:grid-cols-[1fr_6fr_1fr] w-full items-center">
+        <div class="flex justify-center">
+          <GradeLabel
+            taskGrade={grade}
+            defaultPadding={0.25}
+            defaultWidth={12}
+            reducedWidth={9}
+            defaultTextSize="xl"
+          />
+        </div>
 
-        <ThermometerProgressBar {taskResults} />
-        <AcceptedCounter {taskResults} />
+        <div class="flex justify-center">
+          <ThermometerProgressBar {taskResults} width="w-5/6 md:w-11/12 lg:w-full" />
+        </div>
+
+        <div class="hidden sm:flex justify-center">
+          <AcceptedCounter {taskResults} />
+        </div>
       </span>
     {/snippet}
 

src/lib/components/TaskTables/TaskTableBodyCell.svelte

@@ -43,13 +43,14 @@
 {/snippet}
 
 {#snippet taskTitleAndExternalLink(taskResult: TaskResult)}
-  <div class="max-w-[calc(100%-2rem)] truncate">
+  <div class="max-w-[calc(100%-1rem)] truncate">
     <ExternalLinkWrapper
       url={getTaskUrl(taskResult.contest_id, taskResult.task_id)}
       description={removeTaskIndexFromTitle(taskResult.title, taskResult.task_table_index)}
       textSize="xs:text-md"
       textColorInDarkMode="dark:text-gray-300"
       iconSize={0}
+      useInlineFlex={false}
     />
   </div>
 {/snippet}

src/lib/stores/active_problem_list_tab.svelte.ts

@@ -1,15 +1,15 @@
 export type ActiveProblemListTab = 'contestTable' | 'listByGrade' | 'gradeGuidelineTable';
 
 export class ActiveProblemListTabStore {
-  value = $state<ActiveProblemListTab>('listByGrade');
+  value = $state<ActiveProblemListTab>('contestTable');
 
   /**
    * Creates an instance with the specified problem list tab.
    *
    * @param activeTab - The default problem list tab to initialize.
-   * Defaults to 'listByGrade'.
+   * Defaults to 'contestTable'.
    */
-  constructor(activeTab: ActiveProblemListTab = 'listByGrade') {
+  constructor(activeTab: ActiveProblemListTab = 'contestTable') {
     this.value = activeTab;
   }
 
@@ -42,10 +42,10 @@ export class ActiveProblemListTabStore {
 
   /**
    * Resets the active tab to the default value.
-   * Sets the internal value to 'listByGrade'.
+   * Sets the internal value to 'contestTable'.
    */
   reset(): void {
-    this.value = 'listByGrade';
+    this.value = 'contestTable';
   }
 }
 

src/routes/problems/+page.svelte

@@ -38,11 +38,7 @@
   <!-- https://flowbite-svelte.com/docs/components/tabs -->
   <Tabs tabStyle="underline" contentClass="bg-white dark:bg-gray-800 mt-0 p-0">
     <!-- Contest table -->
-    <!-- WIP: UIのデザインが試行錯誤の段階であるため、管理者のみ閲覧可能 -->
-    <!-- TODO: 一般公開するときに、デフォルトで開くタブにする -->
-    {#if isAdmin}
-      {@render problemListTab('テーブル', 'contestTable', contestTable)}
-    {/if}
+    {@render problemListTab('テーブル（アルファ版）', 'contestTable', contestTable)}
 
     <!-- Grades -->
     {@render problemListTab('グレード', 'listByGrade', listByGrade)}

src/test/lib/stores/active_problem_list_tab.svelte.test.ts

@@ -11,25 +11,25 @@ describe('ActiveProblemListTabStore', () => {
 
   describe('constructor', () => {
     test('expects to initialize with default value', () => {
-      expect(store.get()).toBe('listByGrade');
+      expect(store.get()).toBe('contestTable');
     });
 
     test('expects to initialize with provided value', () => {
-      const customStore = new ActiveProblemListTabStore('contestTable');
-      expect(customStore.get()).toBe('contestTable');
+      const customStore = new ActiveProblemListTabStore('listByGrade');
+      expect(customStore.get()).toBe('listByGrade');
     });
   });
 
   describe('get', () => {
     test('expects to return the current active tab', () => {
-      expect(store.get()).toBe('listByGrade');
+      expect(store.get()).toBe('contestTable');
     });
   });
 
   describe('set', () => {
     test('expects to update the active tab value', () => {
-      store.set('contestTable');
-      expect(store.get()).toBe('contestTable');
+      store.set('listByGrade');
+      expect(store.get()).toBe('listByGrade');
 
       store.set('gradeGuidelineTable');
       expect(store.get()).toBe('gradeGuidelineTable');
@@ -38,24 +38,24 @@ describe('ActiveProblemListTabStore', () => {
 
   describe('isSame', () => {
     test('expects to return true when active tab matches the argument', () => {
-      store.set('contestTable');
-      expect(store.isSame('contestTable')).toBe(true);
+      store.set('listByGrade');
+      expect(store.isSame('listByGrade')).toBe(true);
     });
 
     test('expects to return false when active tab does not match the argument', () => {
-      store.set('contestTable');
-      expect(store.isSame('listByGrade')).toBe(false);
+      store.set('listByGrade');
+      expect(store.isSame('contestTable')).toBe(false);
       expect(store.isSame('gradeGuidelineTable')).toBe(false);
     });
   });
 
   describe('reset', () => {
     test('expects to reset the active tab to the default value', () => {
-      store.set('contestTable');
-      expect(store.get()).toBe('contestTable');
+      store.set('listByGrade');
+      expect(store.get()).toBe('listByGrade');
 
       store.reset();
-      expect(store.get()).toBe('listByGrade');
+      expect(store.get()).toBe('contestTable');
     });
   });
 });

tailwind.config.ts

@@ -37,13 +37,13 @@ const config = {
           Q10: '#e3cad8',
           Q9: '#e4cde0',
           Q8: '#e4cbe8',
-          Q7: '#d0afd6',
+          Q7: '#ddbbe6',
           Q6: '#d9afe5',
           Q5: '#f7cc52',
           Q4: '#f1dd72',
-          Q3: '#c8e389',
-          Q2: '#97d093',
-          Q1: '#73d091',
+          Q3: '#cde030',
+          Q2: '#6dd452',
+          Q1: '#41c7ad',
           D1: '#1c85b6',
           D2: '#7f36be',
           D3: '#e68e2e',