🎨 Enable to change column width in contest table (#2368)

Author: KATO-Hiro

src/lib/components/TaskTables/TaskTable.svelte

@@ -105,15 +105,10 @@
     return totalColumns > 8 ? 'flex flex-wrap' : 'flex flex-wrap xl:table-row';
   }
 
-  function getBodyCellClasses(taskResult: TaskResult, totalColumns: number): string {
-    const baseClasses =
-      totalColumns >= 5
-        ? 'w-1/2 xs:w-1/3 sm:w-1/4 md:w-1/5 lg:w-1/6 px-1 py-1'
-        : 'w-1/2 xs:w-1/3 sm:w-1/4 px-1 py-1';
-    const additionalClasses = totalColumns > 8 ? '2xl:w-1/7 py-2' : '';
+  function getBodyCellClasses(taskResult: TaskResult, tableBodyCellWidth: string): string {
     const backgroundColor = getBackgroundColor(taskResult);
 
-    return `${baseClasses} ${additionalClasses} ${backgroundColor}`;
+    return `${tableBodyCellWidth} ${backgroundColor}`;
   }
 
   function getBackgroundColor(taskResult: TaskResult): string {
@@ -244,7 +239,10 @@
 
                   <TableBodyCell
                     id={contestId + '-' + taskTableHeaderId}
-                    class={getBodyCellClasses(taskResult, totalColumns)}
+                    class={getBodyCellClasses(
+                      taskResult,
+                      contestTable.displayConfig.tableBodyCellsWidth,
+                    )}
                   >
                     {#if taskResult}
                       <TaskTableBodyCell

src/lib/types/contest_table_provider.ts

@@ -125,12 +125,14 @@ export type ContestTablesMetaData = {
  * @interface ContestTableDisplayConfig
  * @property {boolean} isShownHeader - Whether to display the table header
  * @property {boolean} isShownRoundLabel - Whether to display round labels in the contest table
- * @property {string} roundLabelWidth - tailwind CSS width for the round label column, e.g., "w-16" or "w-20"
+ * @property {string} roundLabelWidth - tailwind CSS width for the round label column, e.g., "xl:w-16" or "xl:w-20"
+ * @property {string} tableBodyCellWidth - tailwind CSS width for the table body cells, e.g., "w-1/2 xs:w-1/3 sm:w-1/4 md:w-1/5 lg:w-1/6 px-1 py-1"
  * @property {boolean} isShownTaskIndex - Whether to display task index in the contest table cells
  */
 export interface ContestTableDisplayConfig {
   isShownHeader: boolean;
   isShownRoundLabel: boolean;
   roundLabelWidth: string;
+  tableBodyCellsWidth: string;
   isShownTaskIndex: boolean;
 }

src/lib/utils/contest_table_provider.ts

@@ -99,6 +99,7 @@ export abstract class ContestTableProviderBase implements ContestTableProvider {
       isShownHeader: true,
       isShownRoundLabel: true,
       roundLabelWidth: 'xl:w-16', // Default width for task index column
+      tableBodyCellsWidth: 'w-1/2 xs:w-1/3 sm:w-1/4 md:w-1/5 lg:w-1/6 px-1 py-1', // Default width for table body cells
       isShownTaskIndex: false,
     };
   }
@@ -232,6 +233,7 @@ export class EDPCProvider extends ContestTableProviderBase {
       isShownHeader: false,
       isShownRoundLabel: false,
       roundLabelWidth: '', // No specific width for task index in EDPC
+      tableBodyCellsWidth: 'w-1/2 xs:w-1/3 sm:w-1/4 md:w-1/5 lg:w-1/6 2xl:w-1/7 px-1 py-2',
       isShownTaskIndex: true,
     };
   }
@@ -264,6 +266,7 @@ export class TDPCProvider extends ContestTableProviderBase {
       isShownHeader: false,
       isShownRoundLabel: false,
       roundLabelWidth: '', // No specific width for task index in TDPC
+      tableBodyCellsWidth: 'w-1/2 xs:w-1/3 sm:w-1/4 md:w-1/5 lg:w-1/6 2xl:w-1/7 px-1 py-2',
       isShownTaskIndex: true,
     };
   }
@@ -298,6 +301,7 @@ export class JOIFirstQualRoundProvider extends ContestTableProviderBase {
       isShownHeader: true,
       isShownRoundLabel: true,
       isShownTaskIndex: false,
+      tableBodyCellsWidth: 'w-1/2 md:w-1/3 lg:w-1/4 px-1 py-1',
       roundLabelWidth: 'xl:w-28',
     };
   }
@@ -331,6 +335,7 @@ export class Typical90Provider extends ContestTableProviderBase {
       isShownHeader: false,
       isShownRoundLabel: false,
       roundLabelWidth: '', // No specific width for the round label in Typical90
+      tableBodyCellsWidth: 'w-1/2 lg:w-1/3 xl:w-1/4 px-1 py-2',
       isShownTaskIndex: true,
     };
   }

src/test/lib/utils/contest_table_provider.test.ts

@@ -143,6 +143,9 @@ describe('ContestTableProviderBase and implementations', () => {
       expect(displayConfig.isShownHeader).toBe(true);
       expect(displayConfig.isShownRoundLabel).toBe(true);
       expect(displayConfig.roundLabelWidth).toBe('xl:w-16');
+      expect(displayConfig.tableBodyCellsWidth).toBe(
+        'w-1/2 xs:w-1/3 sm:w-1/4 md:w-1/5 lg:w-1/6 px-1 py-1',
+      );
       expect(displayConfig.isShownTaskIndex).toBe(false);
     });
   });
@@ -183,6 +186,9 @@ describe('ContestTableProviderBase and implementations', () => {
       expect(displayConfig.isShownHeader).toBe(true);
       expect(displayConfig.isShownRoundLabel).toBe(true);
       expect(displayConfig.roundLabelWidth).toBe('xl:w-16');
+      expect(displayConfig.tableBodyCellsWidth).toBe(
+        'w-1/2 xs:w-1/3 sm:w-1/4 md:w-1/5 lg:w-1/6 px-1 py-1',
+      );
       expect(displayConfig.isShownTaskIndex).toBe(false);
     });
   });
@@ -223,6 +229,9 @@ describe('ContestTableProviderBase and implementations', () => {
       expect(displayConfig.isShownHeader).toBe(true);
       expect(displayConfig.isShownRoundLabel).toBe(true);
       expect(displayConfig.roundLabelWidth).toBe('xl:w-16');
+      expect(displayConfig.tableBodyCellsWidth).toBe(
+        'w-1/2 xs:w-1/3 sm:w-1/4 md:w-1/5 lg:w-1/6 px-1 py-1',
+      );
       expect(displayConfig.isShownTaskIndex).toBe(false);
     });
   });
@@ -243,6 +252,9 @@ describe('ContestTableProviderBase and implementations', () => {
       expect(displayConfig.isShownHeader).toBe(false);
       expect(displayConfig.isShownRoundLabel).toBe(false);
       expect(displayConfig.roundLabelWidth).toBe('');
+      expect(displayConfig.tableBodyCellsWidth).toBe(
+        'w-1/2 xs:w-1/3 sm:w-1/4 md:w-1/5 lg:w-1/6 2xl:w-1/7 px-1 py-2',
+      );
       expect(displayConfig.isShownTaskIndex).toBe(true);
     });
 
@@ -270,6 +282,9 @@ describe('ContestTableProviderBase and implementations', () => {
       expect(displayConfig.isShownHeader).toBe(false);
       expect(displayConfig.isShownRoundLabel).toBe(false);
       expect(displayConfig.roundLabelWidth).toBe('');
+      expect(displayConfig.tableBodyCellsWidth).toBe(
+        'w-1/2 xs:w-1/3 sm:w-1/4 md:w-1/5 lg:w-1/6 2xl:w-1/7 px-1 py-2',
+      );
       expect(displayConfig.isShownTaskIndex).toBe(true);
     });
 
@@ -334,6 +349,7 @@ describe('ContestTableProviderBase and implementations', () => {
       expect(displayConfig.isShownHeader).toBe(true);
       expect(displayConfig.isShownRoundLabel).toBe(true);
       expect(displayConfig.roundLabelWidth).toBe('xl:w-28');
+      expect(displayConfig.tableBodyCellsWidth).toBe('w-1/2 md:w-1/3 lg:w-1/4 px-1 py-1');
       expect(displayConfig.isShownTaskIndex).toBe(false);
     });
 
@@ -434,6 +450,7 @@ describe('ContestTableProviderBase and implementations', () => {
       expect(displayConfig.isShownHeader).toBe(false);
       expect(displayConfig.isShownRoundLabel).toBe(false);
       expect(displayConfig.roundLabelWidth).toBe('');
+      expect(displayConfig.tableBodyCellsWidth).toBe('w-1/2 lg:w-1/3 xl:w-1/4 px-1 py-2');
       expect(displayConfig.isShownTaskIndex).toBe(true);
     });