@xcpcio/board-app 0.31.1 → 0.33.0

package/src/auto-imports.d.ts

@@ -38,7 +38,6 @@ declare global {
   const debouncedWatch: typeof import('@vueuse/core')['debouncedWatch']
   const defineAsyncComponent: typeof import('vue')['defineAsyncComponent']
   const defineComponent: typeof import('vue')['defineComponent']
-  const downloadSingleFile: typeof import('./composables/utils')['downloadSingleFile']
   const eagerComputed: typeof import('@vueuse/core')['eagerComputed']
   const effectScope: typeof import('vue')['effectScope']
   const extendRef: typeof import('@vueuse/core')['extendRef']
@@ -47,10 +46,12 @@ 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']
   const getTeamPlaceChart: typeof import('./composables/statistics')['getTeamPlaceChart']
+  const getWhiteOrBlackColor: typeof import('./composables/color')['getWhiteOrBlackColor']
   const h: typeof import('vue')['h']
   const ignorableWatch: typeof import('@vueuse/core')['ignorableWatch']
   const inject: typeof import('vue')['inject']
@@ -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']>

package/src/components/Balloon.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { Rank, createContest, createSubmissions, createTeams } from "@xcpcio/core";
+import { Balloon, Rank, createContest, createSubmissions, createTeams } from "@xcpcio/core";
 import type { Contest, Submissions, Teams } from "@xcpcio/core";
 import type { Contest as IContest, Submissions as ISubmissions, Teams as ITeams } from "@xcpcio/types";
 
@@ -43,7 +43,7 @@ watch(data, async () => {
 });
 
 const balloons = computed(() => {
-  return rank.value.balloons;
+  return rank.value.balloons.sort(Balloon.compare).reverse().slice(0, 256);
 });
 
 const setNowIntervalId = setInterval(() => {

package/src/components/BalloonBlock.vue

@@ -1,6 +1,5 @@
 <script setup lang="ts">
 import type { Balloon, Team } from "@xcpcio/core";
-import type { ThemeColor } from "@xcpcio/types";
 
 const props = defineProps<{
   index: number;
@@ -18,17 +17,7 @@ function showTeamName(team: Team) {
   return sections.filter(s => s).join(" - ");
 }
 
-function getColor(c: ThemeColor): string {
-  if (typeof c === "string") {
-    return c;
-  }
-
-  if (isDark && c?.dark) {
-    return c.dark;
-  }
-
-  return c.light;
-}
+const balloonColor = computed(() => balloon.value.problem.balloonColor);
 </script>
 
 <template>
@@ -47,12 +36,12 @@ function getColor(c: ThemeColor): string {
         w-20
         flex flex-shrink-0 justify-center items-center
         :style="{
-          backgroundColor: getColor(balloon.problem?.balloonColor?.background_color ?? 'rgba(0, 0, 0, 0.5)'),
+          backgroundColor: balloonColor.background_color,
         }"
       >
         <div
           :style="{
-            color: getColor(balloon.problem?.balloonColor?.color ?? '#fff'),
+            color: balloonColor.color,
           }"
         >
           {{ balloon.problem.label }}

package/src/components/Countdown.vue

@@ -68,13 +68,6 @@ onUnmounted(() => {
         items-center justify-center
         font-mono
       >
-        <div
-          mt-20
-          text-5xl
-        >
-          {{ contest.name }}
-        </div>
-
         <div
           mt-20
           text-6xl

package/src/components/board/AnimatedSubmissionsModal.vue

@@ -0,0 +1,144 @@
+<script setup lang="ts">
+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,
+}>();
+
+interface Item {
+  submission: Submission,
+  team: Team,
+  problem: Problem,
+  displayName: string,
+}
+
+const rank = computed(() => props.rank);
+const submissions = computed(() => {
+  const ss = rank.value.getSubmissions().sort(Submission.compare).reverse();
+
+  const res: Item[] = [];
+
+  let cnt = 0;
+  const need = 16;
+  for (let i = 0; i < ss.length && cnt < need; i++) {
+    const s = ss[i];
+    const teamId = s.teamId;
+    const problemId = s.problemId;
+
+    const team = rank.value.teamsMap.get(teamId);
+
+    if (!team) {
+      continue;
+    }
+
+    if (rank.value.filterTeamByOrg(team)) {
+      continue;
+    }
+
+    const problem = rank.value.contest.problemsMap.get(problemId);
+    if (!problem) {
+      continue;
+    }
+
+    let displayName = team.name;
+
+    if (team.organization) {
+      displayName = `${team.organization} - ${displayName}`;
+    }
+
+    res.push({
+      submission: s,
+      team,
+      problem,
+      displayName,
+    });
+
+    ++cnt;
+  }
+
+  return res.reverse();
+});
+</script>
+
+<template>
+  <div
+    absolute fixed z-99
+    bottom-4 left-4
+    opacity-90
+  >
+    <div
+      flex flex-col
+    >
+      <div>
+        <template
+          v-for="s in submissions"
+          :key="s.id"
+        >
+          <div
+            w-104
+            h-6
+            bg-slate-800 text-gray-200
+            font-mono
+            flex flex-row
+            justify-center items-center
+          >
+            <div
+              w-10
+              :style="getMedalColor(s.team)"
+              flex
+              justify-center items-center
+            >
+              <div>
+                {{ s.team.rank }}
+              </div>
+            </div>
+
+            <div
+              pl-1
+              w-80
+              truncate
+            >
+              {{ s.displayName }}
+            </div>
+
+            <div
+              w-5
+            >
+              {{ s.team.solvedProblemNum }}
+            </div>
+
+            <div
+              w-8
+              border-b-4
+              flex justify-center
+              :style="{
+                borderColor: s.problem.balloonColor.background_color,
+              }"
+            >
+              {{ s.problem.label }}
+            </div>
+
+            <div
+              w-10
+              flex justify-center
+              :class="[s.submission.status]"
+              :style="{
+                color: '#000',
+              }"
+            >
+              {{ SubmissionStatusToSimpleString[s.submission.status] }}
+            </div>
+          </div>
+        </template>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped lang="less">
+@import "../../styles/submission-status-background.css";
+</style>

package/src/components/board/Board.vue

@@ -280,7 +280,8 @@ const widthClass = "sm:w-[1260px] xl:w-screen";
     <div v-if="!firstLoaded">
       <div
         :class="[wrapperWidthClass]"
-        flex flex-col gap-4 justify-center items-center
+        flex flex-col gap-4
+        justify-center items-center
       >
         <div>
           {{ t("common.loading") }}...
@@ -457,14 +458,22 @@ const widthClass = "sm:w-[1260px] xl:w-screen";
           </div>
         </div>
       </div>
-    </div>
 
-    <OptionsModal
-      v-if="!isHiddenOptionsModal"
-      v-model:is-hidden="isHiddenOptionsModal"
-      v-model:rank-options="rankOptions"
-      :rank="rank"
-    />
+      <div
+        v-if="rankOptions.enableAnimatedSubmissions"
+      >
+        <AnimatedSubmissionsModal
+          :rank="rank"
+        />
+      </div>
+
+      <OptionsModal
+        v-if="!isHiddenOptionsModal"
+        v-model:is-hidden="isHiddenOptionsModal"
+        v-model:rank-options="rankOptions"
+        :rank="rank"
+      />
+    </div>
   </div>
 </template>
 

package/src/components/board/BottomStatistics.vue

@@ -54,7 +54,7 @@ function getFirstSolved(p: ProblemStatistics): string {
     return "Null";
   }
 
-  const t = Math.floor(p.firstSolveSubmissions[0].timestamp / 60);
+  const t = p.firstSolveSubmissions[0].timestampToMinute;
   return `${t}`;
 }
 
@@ -63,7 +63,7 @@ function getLastSolved(p: ProblemStatistics): string {
     return "Null";
   }
 
-  const t = Math.floor(p.lastSolveSubmissions[0].timestamp / 60);
+  const t = p.lastSolveSubmissions[0].timestampToMinute;
   return `${t}`;
 }
 </script>

package/src/components/board/OptionsModal.vue

@@ -40,6 +40,8 @@ const title = computed(() => {
   return t("type_menu.options");
 });
 
+const enableAnimatedSubmissions = ref(rankOptions.value.enableAnimatedSubmissions);
+
 const orgOptions = computed(() => {
   const res = rank.value.organizations.map((o) => {
     return {
@@ -93,6 +95,8 @@ function onConfirm() {
   localStorage.setItem(localStorageKeyForFilterOrganizations, JSON.stringify(orgSelectedItems.value));
   localStorage.setItem(localStorageKeyForFilterTeams, JSON.stringify(teamsSelectedItems.value));
 
+  rankOptions.value.enableAnimatedSubmissions = enableAnimatedSubmissions.value;
+
   onCancel();
 }
 </script>
@@ -150,6 +154,32 @@ function onConfirm() {
         </div>
       </div>
 
+      <div
+        flex flex-col
+        w-full
+      >
+        <div
+          flex
+          mb-2
+        >
+          Feature
+        </div>
+
+        <div
+          flex flex-row
+        >
+          <label class="relative inline-flex items-center cursor-pointer">
+            <input
+              v-model="enableAnimatedSubmissions"
+              type="checkbox"
+              class="sr-only peer"
+            >
+            <div class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 dark:peer-focus:ring-blue-800 rounded-full peer dark:bg-gray-700 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-blue-600" />
+            <span class="ml-3 text-sm font-medium text-gray-900 dark:text-gray-300">Animated Submissions</span>
+          </label>
+        </div>
+      </div>
+
       <div
         mt-2
         w-full

package/src/components/board/ProblemBlock.vue

@@ -13,6 +13,8 @@ function onClick() {
 
 const rank = computed(() => props.rank);
 const problem = computed(() => props.problem);
+
+const balloonColor = computed(() => problem.value.balloonColor);
 </script>
 
 <template>
@@ -22,8 +24,8 @@ const problem = computed(() => props.problem);
     text-center
     style="width: 3rem;"
     :style="{
-      'background-color': problem.balloonColor?.background_color,
-      'color': problem.balloonColor?.color,
+      'background-color': balloonColor.background_color,
+      'color': balloonColor.color,
     }"
   >
     <div

package/src/components/board/SubmissionsTable.vue

@@ -244,11 +244,9 @@ function getProblemLabelColorStyle(s: Submission) {
     return undefined;
   }
 
-  const b = p.balloonColor;
-
   return {
-    backgroundColor: b.background_color as string,
-    color: b.color as string,
+    backgroundColor: p.balloonColor.background_color,
+    color: p.balloonColor.color,
   };
 }
 </script>

package/src/components/board/TeamUI.vue

@@ -21,10 +21,6 @@ const rank = computed(() => props.rank);
 const team = computed(() => props.team);
 
 function getStandClassName(t: Team, isRankField = false): string {
-  if (props.isFilter) {
-    return "filter-team";
-  }
-
   if (isRankField) {
     if (t.awards.includes(MedalType.GOLD)) {
       return "gold";
@@ -43,6 +39,10 @@ function getStandClassName(t: Team, isRankField = false): string {
     }
   }
 
+  if (props.isFilter) {
+    return "filter-team";
+  }
+
   const solvedProblemIndex = (rank.value.rankStatistics.getTeamSolvedNumIndex(t.solvedProblemNum) - 1) % 2;
   const rankIndex = (t.rank - 1) % 2;
 

package/src/components/board/Utility.vue

@@ -26,15 +26,6 @@ function goCountdown() {
     w-full
     flex mt-4 gap-4
   >
-    <a
-      btn
-      :href="resolverUrl"
-      target="_blank"
-      title="Resolver"
-    >
-      {{ t("type_menu.resolver") }}
-    </a>
-
     <button
       btn
       title="Balloon"
@@ -45,10 +36,10 @@ function goCountdown() {
 
     <button
       btn
-      title="Countdown"
-      @click="goCountdown"
+      title="Submissions"
+      disabled="true"
     >
-      {{ t('type_menu.countdown') }}
+      {{ t('type_menu.submissions') }}
     </button>
   </div>
 
@@ -56,12 +47,21 @@ function goCountdown() {
     w-full
     flex mt-4 gap-4
   >
+    <a
+      btn
+      :href="resolverUrl"
+      target="_blank"
+      title="Resolver"
+    >
+      {{ t("type_menu.resolver") }}
+    </a>
+
     <button
       btn
-      title="Submissions"
-      disabled="true"
+      title="Countdown"
+      @click="goCountdown"
     >
-      {{ t('type_menu.submissions') }}
+      {{ t('type_menu.countdown') }}
     </button>
   </div>
 </template>

package/src/components.d.ts

@@ -7,6 +7,7 @@ export {}
 
 declare module 'vue' {
   export interface GlobalComponents {
+    AnimatedSubmissionsModal: typeof import('./components/board/AnimatedSubmissionsModal.vue')['default']
     Badge: typeof import('./components/board/Badge.vue')['default']
     Balloon: typeof import('./components/Balloon.vue')['default']
     BalloonBlock: typeof import('./components/BalloonBlock.vue')['default']

package/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;
+}

package/src/styles/submission-status-background.css

@@ -0,0 +1,123 @@
+.PENDING {
+  background-color: var(--theme-status-pending);
+}
+
+.WAITING {
+  background-color: var(--theme-status-waiting);
+}
+
+.PREPARING {
+  background-color: var(--theme-status-preparing);
+}
+
+.COMPILING {
+  background-color: var(--theme-status-compiling);
+}
+
+.RUNNING {
+  background-color: var(--theme-status-running);
+}
+
+.JUDGING {
+  background-color: var(--theme-status-running);
+}
+
+.FROZEN {
+  background-color: var(--theme-status-pending);
+}
+
+
+.ACCEPTED {
+  background-color: var(--theme-status-accepted);
+}
+
+.CORRECT {
+  background-color: var(--theme-status-accepted);
+}
+
+.PARTIALLY_CORRECT {
+  background-color: var(--theme-status-partially-correct);
+}
+
+
+.REJECTED {
+  background-color: var(--theme-status-wrong-answer);
+}
+
+.WRONG_ANSWER {
+  background-color: var(--theme-status-wrong-answer);
+}
+
+
+.COMPILATION_ERROR {
+  background-color: var(--theme-status-compilation-error);
+}
+
+.PRESENTATION_ERROR {
+  background-color: var(--theme-status-compilation-error);
+}
+
+
+.RUNTIME_ERROR {
+  background-color: var(--theme-status-runtime-error);
+}
+
+.TIME_LIMIT_EXCEEDED {
+  background-color: var(--theme-status-time-limit-exceeded);
+}
+
+.MEMORY_LIMIT_EXCEEDED {
+  background-color: var(--theme-status-memory-limit-exceeded);
+}
+
+.OUTPUT_LIMIT_EXCEEDED {
+  background-color: var(--theme-status-output-limit-exceeded);
+}
+
+.IDLENESS_LIMIT_EXCEEDED {
+  background-color: var(--theme-status-output-limit-exceeded);
+}
+
+.HACKED {
+  background-color: var(--theme-status-wrong-answer);
+}
+
+.JUDGEMENT_FAILED {
+  background-color: var(--theme-status-judgement-failed);
+}
+
+.CONFIGURATION_ERROR {
+  background-color: var(--theme-status-configuration-error);
+}
+
+.FILE_ERROR {
+  background-color: var(--theme-status-file-error);
+}
+
+.SYSTEM_ERROR {
+  background-color: var(--theme-status-system-error);
+}
+
+.CANCELED {
+  background-color: var(--theme-status-canceled);
+}
+
+.SKIPPED {
+  background-color: var(--theme-status-skipped);
+}
+
+.SECURITY_VIOLATED {
+  background-color: var(--theme-status-judgement-failed);
+}
+
+.DENIAL_OF_JUDGEMENT {
+  background-color: var(--theme-status-judgement-failed);
+}
+
+.UNKNOWN {
+  background-color: var(--theme-status-unknown);
+}
+
+.UNDEFINED {
+  background-color: var(--theme-status-undefined);
+}

package/vite.config.ts

@@ -16,6 +16,7 @@ import Unocss from "unocss/vite";
 import Shiki from "markdown-it-shiki";
 import VueMacros from "unplugin-vue-macros/vite";
 import WebfontDownload from "vite-plugin-webfont-dl";
+import { createHtmlPlugin } from "vite-plugin-html";
 
 import packageJSON from "./package.json";
 
@@ -138,6 +139,21 @@ export default defineConfig({
 
     // https://github.com/webfansplz/vite-plugin-vue-devtools
     VueDevTools(),
+
+    // https://github.com/vbenjs/vite-plugin-html
+    createHtmlPlugin({
+      minify: {
+        collapseWhitespace: true,
+        keepClosingSlash: true,
+        removeComments: true,
+        removeRedundantAttributes: true,
+        removeScriptTypeAttributes: true,
+        removeStyleLinkTypeAttributes: true,
+        useShortDoctype: true,
+        minifyCSS: true,
+        minifyJS: true,
+      },
+    }),
   ],
 
   // https://github.com/vitest-dev/vitest