diff --git a/src/lib/components/TaskGradeList.svelte b/src/lib/components/TaskGradeList.svelte
index 32a6de44d..c9c955865 100644
--- a/src/lib/components/TaskGradeList.svelte
+++ b/src/lib/components/TaskGradeList.svelte
@@ -3,8 +3,6 @@
import TaskList from '$lib/components/TaskList.svelte';
- import { getTaskGradeColor, getTaskGradeLabel } from '$lib/utils/task';
-
import type { TaskResults, TaskResult } from '$lib/types/task';
import { TaskGrade, taskGradeValues } from '$lib/types/task';
@@ -53,8 +51,7 @@
{#if countTasks(taskGrade) && isShowTaskList(isAdmin, taskGrade)}
{#snippet header()}
-
- {#if grade !== TaskGrade.PENDING}
- {grade}
- {:else}
- ??
- {/if}
-
+
diff --git a/src/lib/utils/task.ts b/src/lib/utils/task.ts
index 362649649..5c680b276 100644
--- a/src/lib/utils/task.ts
+++ b/src/lib/utils/task.ts
@@ -263,20 +263,28 @@ export const getTaskGradeLabel = (taskGrade: TaskGrade | string) => {
// See:
// https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/includes
-export const toWhiteTextIfNeeds = (grade: string) => {
+export const toChangeTextColorIfNeeds = (grade: string): string => {
const gradeToWhiteText = [
- `${getTaskGradeLabel(TaskGrade.Q3)}`,
- `${getTaskGradeLabel(TaskGrade.Q2)}`,
`${getTaskGradeLabel(TaskGrade.D1)}`,
`${getTaskGradeLabel(TaskGrade.D2)}`,
+ `${getTaskGradeLabel(TaskGrade.D3)}`,
`${getTaskGradeLabel(TaskGrade.D4)}`,
`${getTaskGradeLabel(TaskGrade.D5)}`,
- `${getTaskGradeLabel(TaskGrade.D6)}`,
];
if (gradeToWhiteText.includes(grade)) {
return 'text-white';
+ } else if (getTaskGradeLabel(grade) === TaskGrade.D6) {
+ return 'text-atcoder-bronze';
} else {
return 'text-black';
}
};
+
+export const toChangeBorderColorIfNeeds = (grade: string): string => {
+ if (getTaskGradeLabel(grade) === TaskGrade.D6) {
+ return 'border-atcoder-bronze';
+ }
+
+ return 'border-white';
+};
diff --git a/src/test/lib/utils/task_grade.test.ts b/src/test/lib/utils/task_grade.test.ts
index d009cf0cf..858ce168c 100644
--- a/src/test/lib/utils/task_grade.test.ts
+++ b/src/test/lib/utils/task_grade.test.ts
@@ -1,10 +1,13 @@
import { expect, test } from 'vitest';
+import { runTests } from '../common/test_helpers';
import {
getGradeOrder,
taskGradeOrderInfinity,
calcGradeMode,
getTaskGradeLabel,
+ toChangeTextColorIfNeeds,
+ toChangeBorderColorIfNeeds,
} from '$lib/utils/task';
import { TaskGrade, type TaskGrades } from '$lib/types/task';
@@ -30,6 +33,13 @@ type TestCaseForTaskGradeLabel = {
type TestCasesForTaskGradeLabel = TestCaseForTaskGradeLabel[];
+type TestCaseForTaskGrade = {
+ taskGrade: TaskGrade;
+ expected: string;
+};
+
+type TestCasesForTaskGrade = TestCaseForTaskGrade[];
+
// See: src/lib/utils/task.ts
//
// Note: We split the test file by task and task grade because there are more test cases.
@@ -463,4 +473,99 @@ describe('Task grade', () => {
test.each(testCases)(`${testName}(taskGrade: $taskGrade)`, testFunction);
}
});
+
+ describe('to change text color if needs', () => {
+ describe('when task grades from 11Q to 1Q are given ', () => {
+ const testCases: TestCasesForTaskGrade = [
+ { taskGrade: TaskGrade.Q11, expected: 'text-black' },
+ { taskGrade: TaskGrade.Q10, expected: 'text-black' },
+ { taskGrade: TaskGrade.Q6, expected: 'text-black' },
+ { taskGrade: TaskGrade.Q5, expected: 'text-black' },
+ { taskGrade: TaskGrade.Q2, expected: 'text-black' },
+ { taskGrade: TaskGrade.Q1, expected: 'text-black' },
+ ];
+
+ runTests(
+ 'toChangeTextColorIfNeeds',
+ testCases,
+ ({ taskGrade, expected }: TestCaseForTaskGrade) => {
+ expect(toChangeTextColorIfNeeds(getTaskGradeLabel(taskGrade))).toBe(expected);
+ },
+ );
+ });
+
+ describe('when task grades from 1D to 5D are given', () => {
+ const testCases: TestCasesForTaskGrade = [
+ { taskGrade: TaskGrade.D1, expected: 'text-white' },
+ { taskGrade: TaskGrade.D2, expected: 'text-white' },
+ { taskGrade: TaskGrade.D3, expected: 'text-white' },
+ { taskGrade: TaskGrade.D4, expected: 'text-white' },
+ { taskGrade: TaskGrade.D5, expected: 'text-white' },
+ ];
+
+ runTests(
+ 'toChangeTextColorIfNeeds',
+ testCases,
+ ({ taskGrade, expected }: TestCaseForTaskGrade) => {
+ expect(toChangeTextColorIfNeeds(getTaskGradeLabel(taskGrade))).toBe(expected);
+ },
+ );
+ });
+
+ describe('when task grades 6D is given', () => {
+ const testCases: TestCasesForTaskGrade = [
+ { taskGrade: TaskGrade.D6, expected: 'text-atcoder-bronze' },
+ ];
+
+ runTests(
+ 'toChangeTextColorIfNeeds',
+ testCases,
+ ({ taskGrade, expected }: TestCaseForTaskGrade) => {
+ expect(toChangeTextColorIfNeeds(getTaskGradeLabel(taskGrade))).toBe(expected);
+ },
+ );
+ });
+ });
+
+ describe('to change border color if needs', () => {
+ describe('when task grades from 11Q to 5D are given', () => {
+ const testCasesForQGrades = [
+ { taskGrade: TaskGrade.Q11, expected: 'border-white' },
+ { taskGrade: TaskGrade.Q10, expected: 'border-white' },
+ { taskGrade: TaskGrade.Q7, expected: 'border-white' },
+ { taskGrade: TaskGrade.Q6, expected: 'border-white' },
+ { taskGrade: TaskGrade.Q2, expected: 'border-white' },
+ { taskGrade: TaskGrade.Q1, expected: 'border-white' },
+ ];
+ const testCasesForDGrades = [
+ { taskGrade: TaskGrade.D1, expected: 'border-white' },
+ { taskGrade: TaskGrade.D2, expected: 'border-white' },
+ { taskGrade: TaskGrade.D4, expected: 'border-white' },
+ { taskGrade: TaskGrade.D5, expected: 'border-white' },
+ ];
+ const testCases: TestCasesForTaskGrade = [...testCasesForQGrades, ...testCasesForDGrades];
+
+ runTests(
+ 'toChangeBorderColorIfNeeds',
+ testCases,
+ ({ taskGrade, expected }: TestCaseForTaskGrade) => {
+ expect(toChangeBorderColorIfNeeds(getTaskGradeLabel(taskGrade))).toBe(expected);
+ },
+ );
+ });
+
+ describe('when task grade 6D is given ', () => {
+ const testCases: TestCasesForTaskGrade = [
+ { taskGrade: TaskGrade.D6, expected: 'border-atcoder-bronze' },
+ ];
+
+ runTests(
+ 'toChangeBorderColorIfNeeds',
+ testCases,
+ ({ taskGrade, expected }: TestCaseForTaskGrade) => {
+ expect(toChangeBorderColorIfNeeds(getTaskGradeLabel(taskGrade))).toBe(expected);
+ },
+ );
+ });
+ });
});
diff --git a/tailwind.config.ts b/tailwind.config.ts
index 8380200f6..d13233ec9 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -33,23 +33,23 @@ const config = {
900: '#159957',
},
atcoder: {
- Q11: '#e4e3e3',
- Q10: '#e4dfdc',
- Q9: '#dde3dc',
- Q8: '#dde7e7',
- Q7: '#dddceb',
- Q6: '#e8e7dc',
- Q5: '#ece3dc',
- Q4: '#ecdcdc',
- Q3: '#741b47',
- Q2: '#7f6000',
- Q1: '#01fb02',
- D1: '#72C6ef',
- D2: '#002eff',
- D3: '#ffff02',
- D4: '#ff9900',
- D5: '#ff1000',
- D6: '#cc0A00',
+ Q11: '#e4d3da',
+ Q10: '#e3cad8',
+ Q9: '#e4cde0',
+ Q8: '#e4cbe8',
+ Q7: '#d0afd6',
+ Q6: '#d9afe5',
+ Q5: '#f7cc52',
+ Q4: '#f1dd72',
+ Q3: '#c8e389',
+ Q2: '#97d093',
+ Q1: '#73d091',
+ D1: '#1c85b6',
+ D2: '#7f36be',
+ D3: '#e68e2e',
+ D4: '#e36223',
+ D5: '#e60d00',
+ D6: '#432414',
gray: '',
brown: '',
green: '',
@@ -58,7 +58,7 @@ const config = {
yellow: '',
orange: '',
red: '',
- bronze: '',
+ bronze: '#e38a66',
silver: '',
gold: '',
ns: '#ffffff',