@xcpcio/board-app 0.84.0 → 0.85.3

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

@@ -61,7 +61,7 @@ const isGirl = computed(() => team.value.isGirl);
           class="h-12 w-12"
         >
         <div flex="1 ~ col" min-w-0>
-          <HeatMapTooltip position="top">
+          <Tooltip placement="top">
             <div
               text="lg gray-900 dark:white"
               font="semibold"
@@ -71,23 +71,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/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/dist/assets/Balloon.vue_vue_type_script_setup_true_lang-DHemO8cG.js

@@ -1 +0,0 @@
-import{e as w,m as L,f as C,c as n,o as s,p as i,q as D,u as e,n as O,h as c,b as o,I as k,t as d,A as F,C as I,F as N,E as V,G as z}from"./index-B34Y_Z57.js";import{B}from"./constant-CYOTMbJW.js";import{c as R,a as U,R as A,B as q}from"./rank-DJDWVDFD.js";import{c as G}from"./use-vmodel-Bem9C7yk.js";import{u as M}from"./TheInput.vue_vue_type_script_setup_true_lang-OA6Dkh4w.js";const Q={flex:"","flex-1":"","flex-col":"","justify-center":"","items-start":""},X={class:"resolver-team-name",truncate:"","overflow-hidden":""},H={"w-32":"",flex:"","flex-shrink-0":"","flex-row":"","justify-start":"","items-center":""},J=w({__name:"BalloonBlock",props:{index:null,balloon:null},setup(p){const f=p,b=c(()=>f.index),r=c(()=>f.balloon),v=i(null),y=L(v),{locale:_}=C(),l=c(()=>_.value);function x(a){return[a.location,a.organization?.name.getOrDefault(l.value),a.name.getOrDefault(l.value)].filter(t=>t).join(" - ")}const u=c(()=>r.value.problem.balloonColor);return(a,m)=>(s(),n("div",{ref_key:"el",ref:v,"h-24":""},[e(y)?(s(),n("div",{key:0,"h-24":"",flex:"","flex-row":"","gap-x-4":"","font-mono":"","text-4xl":"",class:O([e(b)%2===0?"bg-resolver-bg-0":"bg-resolver-bg-1"])},[o("div",{"w-20":"",flex:"","flex-shrink-0":"","justify-center":"","items-center":"",style:k({backgroundColor:e(u).background_color})},[o("div",{style:k({color:e(u).color})},d(e(r).problem.label),5)],4),o("div",Q,[o("div",X,d(x(e(r).team)),1),m[0]||(m[0]=o("div",{flex:"","flex-row":"","text-sm":"","items-start":"","gap-x-2":""},null,-1))]),o("div",H,d(e(r).submission.timestampToMinute),1)],2)):D("",!0)],512))}}),K={class:"bg-[#323443]","text-gray-200":"","w-screen":"","h-screen":""},P={key:0},W={flex:"","flex-col":"","justify-center":"","items-center":"","w-screen":"","h-screen":"","text-xl":"",italic:""},Y={key:0},Z={key:1},ee={flex:"","flex-col":"","justify-between":""},re=w({__name:"Balloon",props:{dataSourceUrl:null},setup(p){const f=p,b=F(B),{t:r,locale:v}=C(),y=c(()=>v.value),_=i(!1),l=i({}),x=i([]),u=i([]),a=i({});function m(){const g=new A(l.value,x.value,u.value);g.buildBalloons(),a.value=g}const{data:t,isError:j,error:S}=M(f.dataSourceUrl);I(t,async()=>{t.value===null||t.value===void 0||(l.value=G(t.value?.contest),b.value=`${l.value.name.getOrDefault(y.value)} | ${B}`,x.value=R(t.value?.teams),u.value=U(t.value?.submissions,l.value),m(),_.value=!0)},{immediate:!0});const T=c(()=>a.value.balloons.sort(q.compare).reverse().slice(0,256));return(g,oe)=>{const $=J;return s(),n("div",K,[e(_)?(s(),n("div",Z,[o("div",ee,[(s(!0),n(N,null,V(e(T),(h,E)=>(s(),z($,{key:h.key,index:E,balloon:h},null,8,["index","balloon"]))),128))])])):(s(),n("div",P,[o("div",W,[o("div",null,d(e(r)("common.loading"))+"... ",1),e(j)?(s(),n("div",Y,d(e(S)),1)):D("",!0)])]))])}}});export{re as _};