feat: add rank color for AnimatedSubmissionsModal

Signed-off-by: Dup4 <lyuzhi.pan@gmail.com>
xcpcio · Nov 6, 2023 · 81b564e · 81b564e
1 parent a7ef4cb
commit 81b564e
Show file tree

Hide file tree

Showing 3 changed files with 49 additions and 6 deletions.
diff --git a/packages/apps/board/src/auto-imports.d.ts b/packages/apps/board/src/auto-imports.d.ts
@@ -46,6 +46,7 @@ declare global {
   const getDataSourceUrl: typeof import('./composables/query')['getDataSourceUrl']
   const getLocalStorageKeyForFilterOrganizations: typeof import('./composables/useLocalStorage')['getLocalStorageKeyForFilterOrganizations']
   const getLocalStorageKeyForFilterTeams: typeof import('./composables/useLocalStorage')['getLocalStorageKeyForFilterTeams']
+  const getMedalColor: typeof import('./composables/color')['getMedalColor']
   const getProblemChart: typeof import('./composables/statistics')['getProblemChart']
   const getSubmitChart: typeof import('./composables/statistics')['getSubmitChart']
   const getTeamChart: typeof import('./composables/statistics')['getTeamChart']
@@ -357,6 +358,7 @@ declare module 'vue' {
     readonly getDataSourceUrl: UnwrapRef<typeof import('./composables/query')['getDataSourceUrl']>
     readonly getLocalStorageKeyForFilterOrganizations: UnwrapRef<typeof import('./composables/useLocalStorage')['getLocalStorageKeyForFilterOrganizations']>
     readonly getLocalStorageKeyForFilterTeams: UnwrapRef<typeof import('./composables/useLocalStorage')['getLocalStorageKeyForFilterTeams']>
+    readonly getMedalColor: UnwrapRef<typeof import('./composables/color')['getMedalColor']>
     readonly getProblemChart: UnwrapRef<typeof import('./composables/statistics')['getProblemChart']>
     readonly getSubmitChart: UnwrapRef<typeof import('./composables/statistics')['getSubmitChart']>
     readonly getTeamChart: UnwrapRef<typeof import('./composables/statistics')['getTeamChart']>
@@ -658,6 +660,7 @@ declare module '@vue/runtime-core' {
     readonly getDataSourceUrl: UnwrapRef<typeof import('./composables/query')['getDataSourceUrl']>
     readonly getLocalStorageKeyForFilterOrganizations: UnwrapRef<typeof import('./composables/useLocalStorage')['getLocalStorageKeyForFilterOrganizations']>
     readonly getLocalStorageKeyForFilterTeams: UnwrapRef<typeof import('./composables/useLocalStorage')['getLocalStorageKeyForFilterTeams']>
+    readonly getMedalColor: UnwrapRef<typeof import('./composables/color')['getMedalColor']>
     readonly getProblemChart: UnwrapRef<typeof import('./composables/statistics')['getProblemChart']>
     readonly getSubmitChart: UnwrapRef<typeof import('./composables/statistics')['getSubmitChart']>
     readonly getTeamChart: UnwrapRef<typeof import('./composables/statistics')['getTeamChart']>

diff --git a/packages/apps/board/src/components/board/AnimatedSubmissionsModal.vue b/packages/apps/board/src/components/board/AnimatedSubmissionsModal.vue
@@ -3,6 +3,8 @@ import type { Problem, Rank, Team } from "@xcpcio/core";
 import { Submission } from "@xcpcio/core";
 import { SubmissionStatusToSimpleString } from "@xcpcio/types";
 
+import { getMedalColor } from "~/composables/color";
+
 const props = defineProps<{
   rank: Rank,
 }>();
@@ -78,16 +80,21 @@ const submissions = computed(() => {
             bg-slate-800 text-gray-200
             font-mono
             flex flex-row
-            pl-2
+            justify-center items-center
           >
             <div
-              w-8
+              w-10
+              :style="getMedalColor(s.team)"
+              flex
+              justify-center items-center
             >
-              {{ s.team.rank }}
+              <div>
+                {{ s.team.rank }}
+              </div>
             </div>
 
             <div
-              pl-2
+              pl-1
               w-80
               truncate
             >
@@ -105,7 +112,7 @@ const submissions = computed(() => {
               border-b-4
               flex justify-center
               :style="{
-                'border-color': s.problem.balloonColor?.background_color.toString() ?? '#fff',
+                borderColor: s.problem.balloonColor.background_color,
               }"
             >
               {{ s.problem.label }}
@@ -115,7 +122,9 @@ const submissions = computed(() => {
               w-10
               flex justify-center
               :class="[s.submission.status]"
-              opacity-100
+              :style="{
+                color: '#000',
+              }"
             >
               {{ SubmissionStatusToSimpleString[s.submission.status] }}
             </div>

diff --git a/packages/apps/board/src/composables/color.ts b/packages/apps/board/src/composables/color.ts
@@ -0,0 +1,31 @@
+import { MedalType } from "@xcpcio/core";
+import type { Team } from "@xcpcio/core";
+
+export function getMedalColor(team: Team): { backgroundColor: string, color: string } | undefined {
+  const color = {
+    backgroundColor: "#fff",
+    color: "#000",
+  };
+
+  if (team.awards.includes(MedalType.GOLD)) {
+    color.backgroundColor = "#fff566";
+    return color;
+  }
+
+  if (team.awards.includes(MedalType.SILVER)) {
+    color.backgroundColor = "#ffadd2";
+    return color;
+  }
+
+  if (team.awards.includes(MedalType.BRONZE)) {
+    color.backgroundColor = "#f0c0a0";
+    return color;
+  }
+
+  if (team.awards.includes(MedalType.HONORABLE)) {
+    color.backgroundColor = "#e6f7ff";
+    return color;
+  }
+
+  return undefined;
+}