@xcpcio/board-app 0.84.0 → 0.85.4

package/src/components/board/SeatMapView.vue

@@ -85,7 +85,7 @@ function getNormalizedRow(row: Array<string | null>, maxCols: number): Array<str
   if (row.length >= maxCols) {
     return row;
   }
-  return [...row, ...Array.from({ length: maxCols - row.length }, () => null)];
+  return [...row, ...Array.from({ length: maxCols - row.length }).fill(null) as Array<string | null>];
 }
 
 // Get grid style for a section
@@ -165,7 +165,7 @@ function getRowLabelStyle() {
         <div :style="getSectionGridStyle(section)">
           <template v-for="(row, rowIdx) in section.grid" :key="rowIdx">
             <template v-for="(seatId, colIdx) in getNormalizedRow(row, getMaxCols(section))" :key="`${rowIdx}-${colIdx}`">
-              <HeatMapTooltip v-if="seatId" :content="getTooltipContent(seatId)" position="bottom">
+              <Tooltip v-if="seatId" placement="bottom">
                 <div
                   class="seat"
                   :class="{
@@ -181,7 +181,10 @@ function getRowLabelStyle() {
                 >
                   {{ seatId }}
                 </div>
-              </HeatMapTooltip>
+                <template #popper>
+                  {{ getTooltipContent(seatId) }}
+                </template>
+              </Tooltip>
               <div
                 v-else
                 :style="getSeatStyle(section)"

package/src/components/board/SubmissionsTable.vue

@@ -150,8 +150,7 @@ const submissions = computed(() => {
     if (o.orgIds.length === 0
       && o.teamIds.length === 0
       && o.languages.length === 0
-      && o.statuses.length === 0
-    ) {
+      && o.statuses.length === 0) {
       return true;
     }
 

package/src/components/board/SubmitHeatMap.less

@@ -1,13 +1,21 @@
 @correct-colors: #9be9a8, #40c463, #30a14e, #216e39;
 @incorrect-colors: #ff8c8c, #ff4d4f, #ff1a1a, #d40d0d;
+@correct-colors-dark: #216e39, #30a14e, #40c463, #9be9a8;
+@incorrect-colors-dark: #d40d0d, #ff1a1a, #ff4d4f, #ff8c8c;
 
-.generate-heat-rules(@class, @colors) {
+.generate-heat-rules(@class, @colors, @dark-colors) {
   each(@colors, {
     .@{class}[data-level="@{index}"] {
       background-color: @value;
     }
   });
+
+  each(@dark-colors, {
+    .dark .@{class}[data-level="@{index}"] {
+      background-color: @value;
+    }
+  });
 }
 
-.generate-heat-rules(correct-heat, @correct-colors);
-.generate-heat-rules(incorrect-heat, @incorrect-colors);
+.generate-heat-rules(correct-heat, @correct-colors, @correct-colors-dark);
+.generate-heat-rules(incorrect-heat, @incorrect-colors, @incorrect-colors-dark);

package/src/components/board/SubmitHeatMap.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
-import type { Rank } from "@xcpcio/core";
+import type { Rank, Submission } from "@xcpcio/core";
 import { isAccepted, isRejected } from "@xcpcio/core";
+import "./SubmitHeatMap.less";
 
 const props = defineProps<{
   rank: Rank;
@@ -9,23 +10,32 @@ const props = defineProps<{
 const { t } = useI18n();
 
 const rank = computed(() => props.rank);
+const submissions = computed(() => rank.value.getSubmissions());
 
 const mapTimeDiffLength = 20;
-const startTime = rank.value.contest.getStartTime();
-const endTime = rank.value.contest.getEndTime();
-const totalDuration = endTime.diff(startTime, "minute");
-const intervalSize = totalDuration / mapTimeDiffLength;
 
-const submissions = computed(() => rank.value.getSubmissions());
+const intervalSize = computed(() => {
+  const startTime = rank.value.contest.getStartTime();
+  const endTime = rank.value.contest.getEndTime();
+  const totalDuration = endTime.diff(startTime, "minute");
+
+  if (!Number.isFinite(totalDuration) || totalDuration <= 0) {
+    return 1;
+  }
 
-const intervalDescriptions = Array.from({ length: mapTimeDiffLength }, (_, index) => {
-  const start = index * intervalSize;
-  const end = (index + 1) * intervalSize;
-  return `Between ${start} and ${end} minutes: `;
+  return totalDuration / mapTimeDiffLength;
 });
 
+const intervalDescriptions = computed(() =>
+  Array.from({ length: mapTimeDiffLength }, (_, index) => {
+    const start = index * intervalSize.value;
+    const end = (index + 1) * intervalSize.value;
+    return `Between ${start} and ${end} minutes: `;
+  }),
+);
+
 const submissionsByProblemId = computed(() => {
-  const result = new Map();
+  const result = new Map<string, { correct: Submission[]; incorrect: Submission[] }>();
 
   rank.value.contest.problems.forEach((p) => {
     result.set(p.id, { correct: [], incorrect: [] });
@@ -47,64 +57,30 @@ const submissionsByProblemId = computed(() => {
   return result;
 });
 
-function generateHeatMap(submissions: Map<any, any>, type: "correct" | "incorrect") {
+function generateHeatMap(submissions: Submission[], type: "correct" | "incorrect") {
   const counts = Array.from<number>({ length: mapTimeDiffLength }).fill(0);
+  const size = intervalSize.value > 0 ? intervalSize.value : 1;
+  const descriptions = intervalDescriptions.value;
 
   submissions.forEach((s) => {
-    const index = Math.min(Math.floor(s.timestampToMinute / intervalSize), mapTimeDiffLength - 1);
+    const index = Math.min(Math.floor(s.timestampToMinute / size), mapTimeDiffLength - 1);
     counts[index]++;
   });
 
   return counts.map((count, i) => ({
     count,
     level: 0,
-    description: `${intervalDescriptions[i]}${count} ${type} submissions`,
+    description: `${descriptions[i]}${count} ${type} submissions`,
   }));
 }
 
-function calcPreciseQuan(sortedValues: number[], p: number): number {
-  if (sortedValues.length === 0) {
+function getHeatLevel(value: number, maxValue: number): number {
+  if (value <= 0 || maxValue <= 0) {
     return 0;
   }
 
-  const position = (sortedValues.length - 1) * p;
-  const index = Math.floor(position);
-  const fraction = position - index;
-
-  if (sortedValues[index + 1] !== undefined) {
-    return sortedValues[index] + fraction * (sortedValues[index + 1] - sortedValues[index]);
-  }
-
-  return sortedValues[index];
-}
-
-function calcStaticThresholds(counts: number[]) {
-  const nonZeroCounts = counts.filter(c => c > 0);
-
-  if (nonZeroCounts.length === 0) {
-    return [0, 0, 0, 0, 0];
-  }
-
-  const sorted = [...nonZeroCounts].sort((a, b) => a - b);
-
-  return [
-    0,
-    calcPreciseQuan(sorted, 0.2),
-    calcPreciseQuan(sorted, 0.4),
-    calcPreciseQuan(sorted, 0.6),
-    calcPreciseQuan(sorted, 0.8),
-  ];
-}
-
-function getDynamicHeatLevel(value: number, thresholds: number[]): number {
-  for (let i = thresholds.length - 1; i >= 0; i--) {
-    if (value === 0) {
-      return 0;
-    } else if (value >= thresholds[i]) {
-      return i;
-    }
-  }
-  return 0;
+  const level = Math.ceil((value / maxValue) * 4);
+  return Math.min(Math.max(level, 1), 4);
 }
 
 const heatMapData = computed(() =>
@@ -115,13 +91,13 @@ const heatMapData = computed(() =>
     const incorrectHeatMap = generateHeatMap(incorrect, "incorrect");
 
     const correctCounts = correctHeatMap.map(i => i.count);
-    const correctThresholds = calcStaticThresholds(correctCounts);
+    const correctMax = Math.max(0, ...correctCounts);
 
     const incorrectCounts = incorrectHeatMap.map(i => i.count);
-    const incorrectThresholds = calcStaticThresholds(incorrectCounts);
+    const incorrectMax = Math.max(0, ...incorrectCounts);
 
-    correctHeatMap.forEach(i => i.level = getDynamicHeatLevel(i.count, correctThresholds));
-    incorrectHeatMap.forEach(i => i.level = getDynamicHeatLevel(i.count, incorrectThresholds));
+    correctHeatMap.forEach(i => i.level = getHeatLevel(i.count, correctMax));
+    incorrectHeatMap.forEach(i => i.level = getHeatLevel(i.count, incorrectMax));
 
     return {
       label: p.label,
@@ -145,14 +121,14 @@ const heatMapData = computed(() =>
     </span>
 
     <div
-      grid grid-cols-3
-      gap-10 space-y-0
+      grid grid-cols-4
+      gap-6 space-y-0
       place-items-center
     >
       <div
         v-for="heatMap in heatMapData" :key="heatMap.label"
-        class="w-350px h-100px"
-        flex flex-col
+        class="w-280px h-100px"
+        flex flex-col gap-2
         items-center justify-center
         border border-gray-100 dark:border-gray-600
         rounded-md
@@ -173,54 +149,48 @@ const heatMapData = computed(() =>
 
         <div
           flex flex-row
-          gap-1
+          gap-0.5
         >
           <div
             v-for="(correctItem, index) in heatMap.correctHeatMap" :key="`correct-${index}`"
           >
-            <HeatMapTooltip
-              :content="correctItem.description"
-              position="top"
-            >
+            <Tooltip>
               <div
                 :data-level="correctItem.level"
                 class="correct-heat"
-                size-12px
-                rounded-1
-                shadow
-                border border-gray-100 dark:border-gray-600
+                size-10px
+                rounded-0.7
+                bg-gray-200 dark:bg-gray-700
               />
-            </HeatMapTooltip>
+              <template #popper>
+                {{ correctItem.description }}
+              </template>
+            </Tooltip>
           </div>
         </div>
 
         <div
           flex flex-row
-          gap-1
+          gap-0.5
         >
           <div
             v-for="(incorrectItem, index) in heatMap.incorrectHeatMap" :key="`incorrect-${index}`"
           >
-            <HeatMapTooltip
-              :content="incorrectItem.description"
-              position="top"
-            >
+            <Tooltip>
               <div
                 :data-level="incorrectItem.level"
                 class="incorrect-heat"
-                size-12px
-                rounded-1
-                shadow
-                border border-gray-100 dark:border-gray-600
+                size-10px
+                rounded-0.7
+                bg-gray-200 dark:bg-gray-700
               />
-            </HeatMapTooltip>
+              <template #popper>
+                {{ incorrectItem.description }}
+              </template>
+            </Tooltip>
           </div>
         </div>
       </div>
     </div>
   </div>
 </template>
-
-<style scoped lang="less">
-@import "./SubmitHeatMap.less";
-</style>

package/src/components/board/TeamCard.vue

@@ -48,20 +48,28 @@ const isGirl = computed(() => team.value.isGirl);
   >
     <template v-if="isVisible">
       <div flex="~ items-center gap-3" mb="2">
-        <img
+        <div
           v-if="team.organization?.logo"
-          :src="getImageSource(team.organization.logo, DATA_HOST)"
-          alt="org logo"
-          class="h-12 w-12"
+          class="h-12 w-12 flex items-center justify-center bg-transparent"
         >
-        <img
+          <img
+            :src="getImageSource(team.organization.logo, DATA_HOST)"
+            alt="org logo"
+            class="max-h-12 max-w-full object-contain mx-auto h-full w-auto block"
+          >
+        </div>
+        <div
           v-if="team.badge"
-          :src="getImageSource(team.badge, DATA_HOST)"
-          alt="team badge"
-          class="h-12 w-12"
+          class="h-12 w-12 flex items-center justify-center bg-transparent"
         >
+          <img
+            :src="getImageSource(team.badge, DATA_HOST)"
+            alt="team badge"
+            class="max-h-12 max-w-full object-contain mx-auto h-full w-auto block"
+          >
+        </div>
         <div flex="1 ~ col" min-w-0>
-          <HeatMapTooltip position="top">
+          <Tooltip placement="top">
             <div
               text="lg gray-900 dark:white"
               font="semibold"
@@ -71,23 +79,23 @@ const isGirl = computed(() => team.value.isGirl);
               <span v-if="isUnofficial" class="i-line-md:star-alt-filled" text="sm" />
               <span v-if="isGirl" class="i-tabler:gender-female" text="sm pink-500" />
             </div>
-            <template #tooltip-content>
+            <template #popper>
               <div>{{ t("team_info.team_id") }}{{ t("common.colon") }}{{ team.id }}</div>
               <div>{{ t("team_info.team_name") }}{{ t("common.colon") }}{{ teamName }}</div>
             </template>
-          </HeatMapTooltip>
-          <HeatMapTooltip v-if="organizationName" position="top">
+          </Tooltip>
+          <Tooltip v-if="organizationName" placement="top">
             <div
               text="sm gray-500 dark:gray-400"
               class="line-clamp-1"
             >
               {{ organizationName }}
             </div>
-            <template #tooltip-content>
+            <template #popper>
               <div>{{ t("team_info.org_id") }}{{ t("common.colon") }}{{ team.organization?.id }}</div>
               <div>{{ t("team_info.org_name") }}{{ t("common.colon") }}{{ organizationName }}</div>
             </template>
-          </HeatMapTooltip>
+          </Tooltip>
         </div>
       </div>
 

package/src/components/board/TeamOverview.vue

@@ -92,6 +92,7 @@ const tableRows = computed(() => {
   const rows = [
     { label: t("team_info.rank"), value: team.value.rank, show: true },
     { label: t("team_info.team_name"), value: team.value.name.getOrDefault(lang.value), show: true },
+    { label: t("team_info.description"), value: team.value.description?.getOrDefault(lang.value), show: !!team.value.description },
     { label: t("team_info.organization"), value: team.value.organization?.name.getOrDefault(lang.value), show: !!team.value.organization },
     { label: t("team_info.group"), value: groupNames.value, show: team.value.group.length > 0 },
     { label: t("team_info.members"), value: team.value.membersToString(lang.value), show: team.value.members.length > 0 },

package/src/components/board/TeamUI.vue

@@ -104,13 +104,15 @@ function isRenderByVisible() {
       :class="[getStandClassName(team)]"
     >
       <div
-        v-if="team?.organization?.logo"
-        class="absolute left-0 top-0 bottom-0 flex items-center px-1"
+        class="absolute left-0 top-0 bottom-0 flex items-center justify-center px-1 w-12"
       >
-        <Badge
-          :image="team?.organization?.logo"
-          width-class="h-full w-auto"
-        />
+        <div class="flex items-center justify-center w-full h-full">
+          <Badge
+            v-if="team?.organization?.logo"
+            :image="team?.organization?.logo"
+            width-class="max-h-full max-w-full object-contain mx-auto"
+          />
+        </div>
       </div>
       <div flex flex-1 :class="team?.organization?.logo ? 'pl-10' : ''">
         <div
@@ -149,13 +151,15 @@ function isRenderByVisible() {
       :class="[getStandClassName(team)]"
     >
       <div
-        v-if="team.badge"
-        class="absolute left-0 top-0 bottom-0 flex items-center px-1"
+        class="absolute left-0 top-0 bottom-0 flex items-center justify-center px-1 w-12"
       >
-        <Badge
-          :image="team.badge"
-          width-class="h-full w-auto"
-        />
+        <div class="flex items-center justify-center w-full h-full">
+          <Badge
+            v-if="team.badge"
+            :image="team.badge"
+            width-class="max-h-full max-w-full object-contain mx-auto"
+          />
+        </div>
       </div>
       <div
         flex items-center justify-center

package/src/components/board/Utility.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import type { Rank } from "@xcpcio/core";
+import { getRuntimeConfig } from "@board/composables/runtimeConfig";
 
 const props = defineProps<{
   rank: Rank;
@@ -10,9 +11,10 @@ const { t } = useI18n();
 const route = useRoute();
 const router = useRouter();
 const component = useQueryForComponent();
+const dataSource = getRuntimeConfig().dataSource;
 
 function goResolver() {
-  if (window.DATA_SOURCE) {
+  if (dataSource) {
     component.value = "resolver";
   } else {
     router.push(`/resolver/?data-source=${route.path}`);
@@ -20,7 +22,7 @@ function goResolver() {
 }
 
 function goBalloon() {
-  if (window.DATA_SOURCE) {
+  if (dataSource) {
     component.value = "balloon";
   } else {
     router.push(`/balloon/?data-source=${route.path}`);
@@ -28,7 +30,7 @@ function goBalloon() {
 }
 
 function goCountdown() {
-  if (window.DATA_SOURCE) {
+  if (dataSource) {
     component.value = "countdown";
   } else {
     router.push(`/countdown/?data-source=${route.path}`);

package/src/components/flowbite/Tooltip.vue

@@ -1,32 +1,98 @@
 <script setup lang="ts">
 import type { TooltipInterface, TooltipOptions } from "flowbite";
 import { Tooltip } from "flowbite";
-
 import "./Tooltip.css";
 
 const props = defineProps<{
   placement?: "left" | "right" | "top" | "bottom" | "auto";
 }>();
 
-const tooltipTargetEl = ref(null);
-const tooltipTriggerEl = ref(null);
+const instanceId = `vue-tooltip-${getCurrentInstance()?.uid ?? Math.random().toString(36).slice(2)}`;
+const tooltipTargetEl = ref<HTMLElement | null>(null);
+const tooltipTriggerEl = ref<HTMLElement | null>(null);
+const isTriggerVisible = useElementVisibility(tooltipTriggerEl);
+const placement = computed(() => {
+  return props.placement ?? "auto";
+});
 
-// eslint-disable-next-line unused-imports/no-unused-vars
 let tooltip: TooltipInterface | null = null;
+let cleanup: (() => void) | null = null;
 
-const placement = computed(() => {
-  return props.placement ?? "auto";
+function createTooltip() {
+  if (tooltip) {
+    return;
+  }
+
+  if (!tooltipTargetEl.value || !tooltipTriggerEl.value) {
+    return;
+  }
+
+  const options: TooltipOptions = {
+    placement: placement.value as unknown as undefined,
+    triggerType: "none",
+  };
+
+  tooltip = new Tooltip(tooltipTargetEl.value, tooltipTriggerEl.value, options, {
+    id: instanceId,
+    override: true,
+  });
+}
+
+function destroyTooltip() {
+  tooltip?.destroyAndRemoveInstance();
+  tooltip = null;
+}
+
+function showTooltip() {
+  createTooltip();
+  tooltip?.show();
+}
+
+function hideTooltip() {
+  tooltip?.hide();
+}
+
+watch(isTriggerVisible, (visible) => {
+  if (visible) {
+    return;
+  }
+
+  if (!tooltip) {
+    return;
+  }
+
+  tooltip.hide();
+  destroyTooltip();
 });
 
 onMounted(() => {
-  if (tooltipTargetEl.value && tooltipTriggerEl.value) {
-    const options: TooltipOptions = {
-      placement: placement.value as unknown as undefined,
-      triggerType: "hover",
-    };
-
-    tooltip = new Tooltip(tooltipTargetEl.value, tooltipTriggerEl.value, options);
+  const triggerEl = tooltipTriggerEl.value;
+  if (!triggerEl) {
+    return;
   }
+
+  const onMouseEnter = () => showTooltip();
+  const onMouseLeave = () => hideTooltip();
+  const onFocus = () => showTooltip();
+  const onBlur = () => hideTooltip();
+
+  triggerEl.addEventListener("mouseenter", onMouseEnter);
+  triggerEl.addEventListener("mouseleave", onMouseLeave);
+  triggerEl.addEventListener("focus", onFocus, true);
+  triggerEl.addEventListener("blur", onBlur, true);
+
+  cleanup = () => {
+    triggerEl.removeEventListener("mouseenter", onMouseEnter);
+    triggerEl.removeEventListener("mouseleave", onMouseLeave);
+    triggerEl.removeEventListener("focus", onFocus, true);
+    triggerEl.removeEventListener("blur", onBlur, true);
+  };
+});
+
+onBeforeUnmount(() => {
+  cleanup?.();
+  cleanup = null;
+  destroyTooltip();
 });
 </script>
 

package/src/components.d.ts

@@ -34,7 +34,6 @@ declare module 'vue' {
     GiantsOptions: typeof import('./components/battle-of-giants/GiantsOptions.vue')['default']
     GiantsScoreBoard: typeof import('./components/battle-of-giants/GiantsScoreBoard.vue')['default']
     GoBack: typeof import('./components/GoBack.vue')['default']
-    HeatMapTooltip: typeof import('./components/board/HeatMapTooltip.vue')['default']
     InfoModal: typeof import('./components/board/InfoModal.vue')['default']
     Modal: typeof import('./components/board/Modal.vue')['default']
     ModalMenu: typeof import('./components/board/ModalMenu.vue')['default']

package/src/composables/constant.ts

@@ -1,3 +1,5 @@
+import { getRuntimeConfig } from "./runtimeConfig";
+
 export const APP_VERSION = __APP_VERSION__;
 export const GITHUB_URL = __GITHUB_URL__;
 export const GITHUB_SHA = __GITHUB_SHA__;
@@ -11,19 +13,11 @@ export const COUNTDOWN_TITLE_SUFFIX = "Countdown - XCPCIO";
 export const SUBMISSION_TITLE_SUFFIX = "Submission - XCPCIO";
 
 export const CDN_HOST = computed(() => {
-  if (!window) {
-    return "";
-  }
-
-  return window.CDN_HOST;
+  return getRuntimeConfig().cdnHost ?? "";
 });
 
 export const DATA_HOST = computed(() => {
-  if (!window) {
-    return "";
-  }
-
-  return window.DATA_HOST;
+  return getRuntimeConfig().dataHost ?? "";
 });
 
 export const RATING_DATA_HOST = computed(() => {
@@ -32,9 +26,5 @@ export const RATING_DATA_HOST = computed(() => {
 });
 
 export const DATA_REGION = computed(() => {
-  if (!window) {
-    return "";
-  }
-
-  return window.DATA_REGION;
+  return getRuntimeConfig().dataRegion ?? "";
 });

package/src/composables/runtimeConfig.ts

@@ -0,0 +1,21 @@
+import type { RuntimeConfig } from "@board/types";
+
+export function getRuntimeConfig(): RuntimeConfig {
+  if (typeof window === "undefined") {
+    return {};
+  }
+
+  const config = window.RUNTIME_CONFIG ?? {};
+
+  return {
+    pageType: config.pageType,
+    component: config.component,
+    dataSource: config.dataSource ?? window.DATA_SOURCE,
+    baseUrl: config.baseUrl ?? window.BASE_URL,
+    cdnHost: config.cdnHost ?? window.CDN_HOST,
+    dataHost: config.dataHost ?? window.DATA_HOST,
+    dataRegion: config.dataRegion ?? window.DATA_REGION,
+    defaultLang: config.defaultLang ?? window.DEFAULT_LANG,
+    refetchInterval: config.refetchInterval ?? window.REFETCH_INTERVAL,
+  };
+}

package/src/composables/useQueryBoardData.ts

@@ -1,5 +1,6 @@
 import type { Contest, Submissions, Teams } from "@xcpcio/types";
 import { useQuery } from "@tanstack/vue-query";
+import { getRuntimeConfig } from "./runtimeConfig";
 
 export interface BoardData {
   contest: Contest;
@@ -47,7 +48,7 @@ async function fetchAndAssignSeatMap(contest: Contest, baseUrl: string): Promise
 
 async function fetch_board_data(target: string): Promise<BoardData> {
   const endpoint = target.startsWith("/") ? target.slice(1) : target;
-  let prefix = `${window.DATA_HOST}${endpoint}`;
+  let prefix = `${getRuntimeConfig().dataHost ?? ""}${endpoint}`;
   const options = {
     allInOne: false,
   };
@@ -97,7 +98,7 @@ async function fetch_board_data(target: string): Promise<BoardData> {
 export function useQueryBoardData(target: string, queryOnce = false) {
   const retry = 3;
   const staleTime = 30_000;
-  let refetchInterval: number | false = window.REFETCH_INTERVAL;
+  let refetchInterval: number | false = getRuntimeConfig().refetchInterval ?? 15_000;
 
   if (queryOnce) {
     refetchInterval = false;