@xcpcio/board-app 0.53.2 → 0.55.0

package/src/components/board/HeatMapTooltip.less

@@ -0,0 +1,115 @@
+.tooltip-container {
+  position: relative;
+  display: inline-block;
+}
+
+.tooltip {
+  position: absolute;
+  padding: 8px 12px;
+  border-radius: 4px;
+  font-size: 14px;
+  line-height: 1.4;
+  text-align: center;
+  opacity: 0;
+  visibility: hidden;
+  transition:
+    opacity 0.3s,
+    visibility 0.3s;
+  white-space: nowrap;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+  pointer-events: none;
+  background-color: #1f2937;
+}
+
+.dark.tooltip {
+  background-color: #374151;
+}
+
+.tooltip.visible {
+  opacity: 1;
+  visibility: visible;
+}
+
+.tooltip::after {
+  content: "";
+  position: absolute;
+  width: 0;
+  height: 0;
+  border: 6px solid transparent;
+}
+
+.tooltip.top {
+  bottom: 100%;
+  left: 50%;
+  transform: translateX(-50%) translateY(-5px);
+  margin-bottom: 5px;
+}
+
+.tooltip.top::after {
+  top: 100%;
+  left: 50%;
+  transform: translateX(-50%);
+  border-top-color: #1f2937;
+  border-bottom: 0;
+}
+
+.dark.tooltip.top::after {
+  border-top-color: #374151;
+}
+
+.tooltip.bottom {
+  top: 100%;
+  left: 50%;
+  transform: translateX(-50%) translateY(5px);
+  margin-top: 5px;
+}
+
+.tooltip.bottom::after {
+  bottom: 100%;
+  left: 50%;
+  transform: translateX(-50%);
+  border-bottom-color: #1f2937;
+  border-top: 0;
+}
+
+.dark.tooltip.bottom::after {
+  border-bottom-color: #374151;
+}
+
+.tooltip.left {
+  right: 100%;
+  top: 50%;
+  transform: translateY(-50%) translateX(-5px);
+  margin-right: 5px;
+}
+
+.tooltip.left::after {
+  left: 100%;
+  top: 50%;
+  transform: translateY(-50%);
+  border-left-color: #1f2937;
+  border-right: 0;
+}
+
+.dark.tooltip.left::after {
+  border-left-color: #374151;
+}
+
+.tooltip.right {
+  left: 100%;
+  top: 50%;
+  transform: translateY(-50%) translateX(5px);
+  margin-left: 5px;
+}
+
+.tooltip.right::after {
+  right: 100%;
+  top: 50%;
+  transform: translateY(-50%);
+  border-right-color: #1f2937;
+  border-left: 0;
+}
+
+.dark.tooltip.right::after {
+  border-right-color: #374151;
+}

package/src/components/board/HeatMapTooltip.vue

@@ -0,0 +1,68 @@
+<script setup lang="ts">
+const props = defineProps({
+  content: {
+    type: String,
+    default: "",
+  },
+  position: {
+    type: String,
+    default: "top",
+    validator: (value: string) => ["top", "right", "bottom", "left"].includes(value),
+  },
+  delay: {
+    type: Number,
+    default: 100,
+  },
+  textColor: {
+    type: String,
+    default: "#fff",
+  },
+  width: {
+    type: String,
+    default: "auto",
+  },
+  zIndex: {
+    type: Number,
+    default: 1000,
+  },
+});
+
+const isVisible = ref(false);
+let timeoutId: ReturnType<typeof setTimeout>;
+
+const tooltipStyle = computed(() => ({
+  color: props.textColor,
+  width: props.width,
+  zIndex: props.zIndex,
+}));
+
+function showTooltip() {
+  clearTimeout(timeoutId);
+  timeoutId = setTimeout(() => {
+    isVisible.value = true;
+  }, props.delay);
+}
+
+function hideTooltip() {
+  clearTimeout(timeoutId);
+  isVisible.value = false;
+}
+</script>
+
+<template>
+  <div class="tooltip-container" @mouseenter="showTooltip" @mouseleave="hideTooltip">
+    <slot />
+    <div
+      class="tooltip"
+      :class="[position, { visible: isVisible }]"
+      :style="tooltipStyle"
+    >
+      {{ content }}
+      <slot name="tooltip-content" />
+    </div>
+  </div>
+</template>
+
+<style scoped lang="less">
+@import "./HeatMapTooltip.less";
+</style>

package/src/components/board/Progress.less

@@ -91,12 +91,12 @@
   animation: progress-bar-stripes 2s linear infinite;
 }
 
-.am-progress-bar[aria-valuenow='1'],
-.am-progress-bar[aria-valuenow='2'] {
+.am-progress-bar[aria-valuenow="1"],
+.am-progress-bar[aria-valuenow="2"] {
   min-width: 30px;
 }
 
-.am-progress-bar[aria-valuenow='0'] {
+.am-progress-bar[aria-valuenow="0"] {
   color: #999999;
   min-width: 30px;
   background: none;
@@ -336,8 +336,14 @@
   position: absolute;
   z-index: 99;
   display: block;
-  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto,
-    Helvetica Neue, Arial, sans-serif;
+  font-family:
+    -apple-system,
+    BlinkMacSystemFont,
+    Segoe UI,
+    Roboto,
+    Helvetica Neue,
+    Arial,
+    sans-serif;
   font-style: normal;
   font-weight: 400;
   letter-spacing: normal;
@@ -371,7 +377,7 @@
   bottom: 0;
   left: 50%;
   margin-left: -5px;
-  content: '';
+  content: "";
   border-width: 5px 5px 0;
   border-top-color: #000;
 }
@@ -387,7 +393,7 @@
   top: 50%;
   left: 0;
   margin-top: -5px;
-  content: '';
+  content: "";
   border-width: 5px 5px 5px 0;
   border-right-color: #000;
 }
@@ -403,7 +409,7 @@
   top: 0;
   left: 50%;
   margin-left: -5px;
-  content: '';
+  content: "";
   border-width: 0 5px 5px;
   border-bottom-color: #000;
 }
@@ -419,7 +425,7 @@
   top: 50%;
   right: 0;
   margin-top: -5px;
-  content: '';
+  content: "";
   border-width: 5px 0 5px 5px;
   border-left-color: #000;
 }

package/src/components/board/Statistics.vue

@@ -76,6 +76,12 @@ function getHeadData() {
       mt-8 gap-8
       flex flex-col
     >
+      <div>
+        <SubmitHeatMap
+          :rank="rank"
+        />
+      </div>
+
       <div>
         <Chart
           :options="getSubmitChart(rank)"

package/src/components/board/SubmitHeatMap.less

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

package/src/components/board/SubmitHeatMap.vue

@@ -0,0 +1,226 @@
+<script setup lang="ts">
+import type { Rank } from "@xcpcio/core";
+import { isAccepted, isRejected } from "@xcpcio/core";
+
+const props = defineProps<{
+  rank: Rank;
+}>();
+
+const { t } = useI18n();
+
+const rank = computed(() => props.rank);
+
+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 intervalDescriptions = Array.from({ length: mapTimeDiffLength }, (_, index) => {
+  const start = index * intervalSize;
+  const end = (index + 1) * intervalSize;
+  return `Between ${start} and ${end} minutes: `;
+});
+
+const submissionsByProblemId = computed(() => {
+  const result = new Map();
+
+  rank.value.contest.problems.forEach((p) => {
+    result.set(p.id, { correct: [], incorrect: [] });
+  });
+
+  submissions.value.forEach((s) => {
+    const entry = result.get(s.problemId);
+    if (!entry) {
+      return;
+    }
+
+    if (isAccepted(s.status)) {
+      entry.correct.push(s);
+    } else if (isRejected(s.status)) {
+      entry.incorrect.push(s);
+    }
+  });
+
+  return result;
+});
+
+function generateHeatMap(submissions: Map<any, any>, type: "correct" | "incorrect") {
+  const counts = Array.from<number>({ length: mapTimeDiffLength }).fill(0);
+
+  submissions.forEach((s) => {
+    const index = Math.min(Math.floor(s.timestampToMinute / intervalSize), mapTimeDiffLength - 1);
+    counts[index]++;
+  });
+
+  return counts.map((count, i) => ({
+    count,
+    level: 0,
+    description: `${intervalDescriptions[i]}${count} ${type} submissions`,
+  }));
+}
+
+function calcPreciseQuan(sortedValues: number[], p: number): number {
+  if (sortedValues.length === 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 heatMapData = computed(() =>
+  rank.value.contest.problems.map((p) => {
+    const { correct, incorrect } = submissionsByProblemId.value.get(p.id)!;
+
+    const correctHeatMap = generateHeatMap(correct, "correct");
+    const incorrectHeatMap = generateHeatMap(incorrect, "incorrect");
+
+    const correctCounts = correctHeatMap.map(i => i.count);
+    const correctThresholds = calcStaticThresholds(correctCounts);
+
+    const incorrectCounts = incorrectHeatMap.map(i => i.count);
+    const incorrectThresholds = calcStaticThresholds(incorrectCounts);
+
+    correctHeatMap.forEach(i => i.level = getDynamicHeatLevel(i.count, correctThresholds));
+    incorrectHeatMap.forEach(i => i.level = getDynamicHeatLevel(i.count, incorrectThresholds));
+
+    return {
+      label: p.label,
+      balloonColor: p.balloonColor,
+      correctHeatMap,
+      incorrectHeatMap,
+    };
+  }),
+);
+</script>
+
+<template>
+  <div flex flex-col mb-8>
+    <span
+      text-align-center
+      text-size-lg
+      font-semibold
+      mb-8
+    >
+      {{ t("standings.statistics.submit_heatmap") }}
+    </span>
+
+    <div
+      grid grid-cols-3
+      gap-10 space-y-0
+      place-items-center
+    >
+      <div
+        v-for="heatMap in heatMapData" :key="heatMap.label"
+        class="w-350px h-100px"
+        flex flex-col
+        items-center justify-center
+        border border-gray-100 dark:border-gray-600
+        rounded-md
+        shadow
+      >
+        <div
+          mb-1
+          size-30px
+          flex
+          justify-center items-center
+          rounded-md
+          :style="{ backgroundColor: heatMap.balloonColor.background_color, color: heatMap.balloonColor.color }"
+        >
+          <span text-size-lg font-semibold>
+            {{ heatMap.label }}
+          </span>
+        </div>
+
+        <div
+          flex flex-row
+          gap-1
+        >
+          <div
+            v-for="(correctItem, index) in heatMap.correctHeatMap" :key="`correct-${index}`"
+          >
+            <HeatMapTooltip
+              :content="correctItem.description"
+              position="top"
+            >
+              <div
+                :data-level="correctItem.level"
+                class="correct-heat"
+                size-12px
+                rounded-1
+                shadow
+                border border-gray-100 dark:border-gray-600
+              />
+            </HeatMapTooltip>
+          </div>
+        </div>
+
+        <div
+          flex flex-row
+          gap-1
+        >
+          <div
+            v-for="(incorrectItem, index) in heatMap.incorrectHeatMap" :key="`incorrect-${index}`"
+          >
+            <HeatMapTooltip
+              :content="incorrectItem.description"
+              position="top"
+            >
+              <div
+                :data-level="incorrectItem.level"
+                class="incorrect-heat"
+                size-12px
+                rounded-1
+                shadow
+                border border-gray-100 dark:border-gray-600
+              />
+            </HeatMapTooltip>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped lang="less">
+@import "./SubmitHeatMap.less";
+</style>

package/src/components/flowbite/Tooltip.css

@@ -1,4 +1,5 @@
-.tooltip-arrow,.tooltip-arrow:before {
+.tooltip-arrow,
+.tooltip-arrow:before {
   position: absolute;
   width: 8px;
   height: 8px;
@@ -15,44 +16,44 @@
   transform: rotate(45deg);
 }
 
-[data-tooltip-style^='light'] + .tooltip > .tooltip-arrow:before {
+[data-tooltip-style^="light"] + .tooltip > .tooltip-arrow:before {
   border-style: solid;
   border-color: #e5e7eb;
 }
 
-[data-tooltip-style^='light'] + .tooltip[data-popper-placement^='top'] > .tooltip-arrow:before {
+[data-tooltip-style^="light"] + .tooltip[data-popper-placement^="top"] > .tooltip-arrow:before {
   border-bottom-width: 1px;
   border-right-width: 1px;
 }
 
-[data-tooltip-style^='light'] + .tooltip[data-popper-placement^='right'] > .tooltip-arrow:before {
+[data-tooltip-style^="light"] + .tooltip[data-popper-placement^="right"] > .tooltip-arrow:before {
   border-bottom-width: 1px;
   border-left-width: 1px;
 }
 
-[data-tooltip-style^='light'] + .tooltip[data-popper-placement^='bottom'] > .tooltip-arrow:before {
+[data-tooltip-style^="light"] + .tooltip[data-popper-placement^="bottom"] > .tooltip-arrow:before {
   border-top-width: 1px;
   border-left-width: 1px;
 }
 
-[data-tooltip-style^='light'] + .tooltip[data-popper-placement^='left'] > .tooltip-arrow:before {
+[data-tooltip-style^="light"] + .tooltip[data-popper-placement^="left"] > .tooltip-arrow:before {
   border-top-width: 1px;
   border-right-width: 1px;
 }
 
-.tooltip[data-popper-placement^='top'] > .tooltip-arrow {
+.tooltip[data-popper-placement^="top"] > .tooltip-arrow {
   bottom: -4px;
 }
 
-.tooltip[data-popper-placement^='bottom'] > .tooltip-arrow {
+.tooltip[data-popper-placement^="bottom"] > .tooltip-arrow {
   top: -4px;
 }
 
-.tooltip[data-popper-placement^='left'] > .tooltip-arrow {
+.tooltip[data-popper-placement^="left"] > .tooltip-arrow {
   right: -4px;
 }
 
-.tooltip[data-popper-placement^='right'] > .tooltip-arrow {
+.tooltip[data-popper-placement^="right"] > .tooltip-arrow {
   left: -4px;
 }
 
@@ -60,7 +61,8 @@
   visibility: hidden;
 }
 
-[data-popper-arrow],[data-popper-arrow]:before {
+[data-popper-arrow],
+[data-popper-arrow]:before {
   position: absolute;
   width: 8px;
   height: 8px;
@@ -107,59 +109,59 @@
   border-color: #4b5563;
 }
 
-[data-popover][role="tooltip"][data-popper-placement^='top'] > [data-popper-arrow]:before {
+[data-popover][role="tooltip"][data-popper-placement^="top"] > [data-popper-arrow]:before {
   border-bottom-width: 1px;
   border-right-width: 1px;
 }
 
-[data-popover][role="tooltip"][data-popper-placement^='top'] > [data-popper-arrow]:after {
+[data-popover][role="tooltip"][data-popper-placement^="top"] > [data-popper-arrow]:after {
   border-bottom-width: 1px;
   border-right-width: 1px;
 }
 
-[data-popover][role="tooltip"][data-popper-placement^='right'] > [data-popper-arrow]:before {
+[data-popover][role="tooltip"][data-popper-placement^="right"] > [data-popper-arrow]:before {
   border-bottom-width: 1px;
   border-left-width: 1px;
 }
 
-[data-popover][role="tooltip"][data-popper-placement^='right'] > [data-popper-arrow]:after {
+[data-popover][role="tooltip"][data-popper-placement^="right"] > [data-popper-arrow]:after {
   border-bottom-width: 1px;
   border-left-width: 1px;
 }
 
-[data-popover][role="tooltip"][data-popper-placement^='bottom'] > [data-popper-arrow]:before {
+[data-popover][role="tooltip"][data-popper-placement^="bottom"] > [data-popper-arrow]:before {
   border-top-width: 1px;
   border-left-width: 1px;
 }
 
-[data-popover][role="tooltip"][data-popper-placement^='bottom'] > [data-popper-arrow]:after {
+[data-popover][role="tooltip"][data-popper-placement^="bottom"] > [data-popper-arrow]:after {
   border-top-width: 1px;
   border-left-width: 1px;
 }
 
-[data-popover][role="tooltip"][data-popper-placement^='left'] > [data-popper-arrow]:before {
+[data-popover][role="tooltip"][data-popper-placement^="left"] > [data-popper-arrow]:before {
   border-top-width: 1px;
   border-right-width: 1px;
 }
 
-[data-popover][role="tooltip"][data-popper-placement^='left'] > [data-popper-arrow]:after {
+[data-popover][role="tooltip"][data-popper-placement^="left"] > [data-popper-arrow]:after {
   border-top-width: 1px;
   border-right-width: 1px;
 }
 
-[data-popover][role="tooltip"][data-popper-placement^='top'] > [data-popper-arrow] {
+[data-popover][role="tooltip"][data-popper-placement^="top"] > [data-popper-arrow] {
   bottom: -5px;
 }
 
-[data-popover][role="tooltip"][data-popper-placement^='bottom'] > [data-popper-arrow] {
+[data-popover][role="tooltip"][data-popper-placement^="bottom"] > [data-popper-arrow] {
   top: -5px;
 }
 
-[data-popover][role="tooltip"][data-popper-placement^='left'] > [data-popper-arrow] {
+[data-popover][role="tooltip"][data-popper-placement^="left"] > [data-popper-arrow] {
   right: -5px;
 }
 
-[data-popover][role="tooltip"][data-popper-placement^='right'] > [data-popper-arrow] {
+[data-popover][role="tooltip"][data-popper-placement^="right"] > [data-popper-arrow] {
   left: -5px;
 }
 

package/src/components/rating/rating.less

@@ -4,7 +4,11 @@
 }
 
 .rated-user {
-  font-family: helvetica neue, Helvetica, Arial, sans-serif;
+  font-family:
+    helvetica neue,
+    Helvetica,
+    Arial,
+    sans-serif;
   text-decoration: none;
   font-weight: 700;
   display: inline-block;

package/src/components.d.ts

@@ -2,6 +2,7 @@
 // @ts-nocheck
 // Generated by unplugin-vue-components
 // Read more: https://github.com/vuejs/core/pull/3399
+// biome-ignore lint: disable
 export {}
 
 /* prettier-ignore */
@@ -29,6 +30,7 @@ declare module 'vue' {
     GiantsScoreBoard: typeof import('./components/battle-of-giants/GiantsScoreBoard.vue')['default']
     GirlIcon: typeof import('./components/icon/GirlIcon.vue')['default']
     GoBack: typeof import('./components/GoBack.vue')['default']
+    HeatMapTooltip: typeof import('./components/board/HeatMapTooltip.vue')['default']
     Modal: typeof import('./components/board/Modal.vue')['default']
     ModalMenu: typeof import('./components/board/ModalMenu.vue')['default']
     NavBar: typeof import('./components/NavBar.vue')['default']
@@ -56,6 +58,7 @@ declare module 'vue' {
     Statistics: typeof import('./components/board/Statistics.vue')['default']
     SubmissionsTable: typeof import('./components/board/SubmissionsTable.vue')['default']
     SubmissionsTableModal: typeof import('./components/board/SubmissionsTableModal.vue')['default']
+    SubmitHeatMap: typeof import('./components/board/SubmitHeatMap.vue')['default']
     TablePagination: typeof import('./components/table/TablePagination.vue')['default']
     TeamAwards: typeof import('./components/board/TeamAwards.vue')['default']
     TeamInfoModal: typeof import('./components/board/TeamInfoModal.vue')['default']

package/src/composables/constant.ts

@@ -3,6 +3,7 @@ export const RATING_TITLE_SUFFIX = "Rating - XCPCIO";
 export const BALLOON_TITLE_SUFFIX = "Balloon - XCPCIO";
 export const RESOLVER_TITLE_SUFFIX = "Resolver - XCPCIO";
 export const COUNTDOWN_TITLE_SUFFIX = "Countdown - XCPCIO";
+export const SUBMISSION_TITLE_SUFFIX = "Submission - XCPCIO";
 
 export const CDN_HOST = computed(() => {
   if (!window) {