@xcpcio/board-app 0.6.4 → 0.13.0

package/src/components/board/TeamAwards.vue

@@ -0,0 +1,93 @@
+<script setup lang="ts">
+import { MedalType, type Team } from "@xcpcio/core";
+
+const props = defineProps<{
+  team: Team,
+}>();
+
+const team = computed(() => props.team);
+
+const firstSolvedProblems = computed(() => {
+  return props.team.problemStatistics.filter((p) => {
+    if (p.isFirstSolved) {
+      return true;
+    }
+
+    return false;
+  });
+});
+
+interface Medal {
+  text: string;
+}
+
+const medal = computed((): Medal | null => {
+  const awards = props.team.awards;
+
+  if (awards.includes(MedalType.GOLD)) {
+    return {
+      text: "Gold",
+    };
+  }
+
+  if (awards.includes(MedalType.SILVER)) {
+    return {
+      text: "Silver",
+    };
+  }
+
+  if (awards.includes(MedalType.BRONZE)) {
+    return {
+      text: "Bronze",
+    };
+  }
+
+  if (awards.includes(MedalType.HONORABLE)) {
+    return {
+      text: "Honorable",
+    };
+  }
+
+  return null;
+});
+</script>
+
+<template>
+  <div
+    text-gray-900 dark:text-white
+    text-xl
+    font-mono font-semibold italic
+    flex flex-col gap-2
+    justify-center
+  >
+    <div>
+      Team Rank: {{ team.rank }}
+    </div>
+
+    <div
+      v-if="team.organization && team.organizationRank !== -1"
+    >
+      School Rank: {{ team.organizationRank }}
+    </div>
+
+    <div
+      v-if="firstSolvedProblems.length"
+      flex flex-col gap-2
+    >
+      <template
+        v-for="p in firstSolvedProblems"
+        :key="p.problem.id"
+      >
+        <div>
+          First Solved Problem {{ p.problem.label }}
+        </div>
+      </template>
+    </div>
+
+    <div
+      v-if="medal"
+    >
+      {{ medal.text }} Medal
+    </div>
+  </div>
+</template>

package/src/components/board/TeamInfoModal.vue

@@ -0,0 +1,128 @@
+<script setup lang="ts">
+import { Chart } from "highcharts-vue";
+
+import type { Rank, Team } from "@xcpcio/core";
+
+const props = defineProps<{
+  isHidden: boolean,
+
+  rank: Rank,
+  team: Team,
+}>();
+
+const emit = defineEmits(["update:isHidden"]);
+
+const isHidden = computed({
+  get() {
+    return props.isHidden;
+  },
+  set(value) {
+    emit("update:isHidden", value);
+  },
+});
+
+const currentType = ref("submissions");
+
+const rank = computed(() => props.rank);
+const team = computed(() => props.team);
+
+const headerTitle = computed(() => {
+  let res = "";
+
+  if (rank.value.contest.organization && team.value.organization.length > 0) {
+    res += `${team.value.organization} - `;
+  }
+
+  res += `${team.value.name}`;
+
+  if (team.value.members) {
+    res += ` - ${team.value.members}`;
+  }
+
+  if (team.value.coach) {
+    res += ` - ${team.value.coach}(coach)`;
+  }
+
+  return res;
+});
+
+const TYPE_SUBMISSIONS = "submissions";
+const TYPE_STATISTICS = "statistics";
+const TYPE_AWARDS = "awards";
+const types = [TYPE_SUBMISSIONS, TYPE_STATISTICS, TYPE_AWARDS];
+</script>
+
+<template>
+  <Modal
+    v-model:isHidden="isHidden"
+  >
+    <template #header>
+      <div
+        w-full max-w-screen-xl
+        px-4 mx-auto lg:px-12
+      >
+        <div
+          relative overflow-hidden
+          bg-white dark:bg-gray-800
+        >
+          <div
+            flex flex-col items-center justify-between
+            md:flex-row
+            space-y-3 md:space-y-0 md:space-x-4
+          >
+            <h3
+              text-gray-900 dark:text-white
+              text-xl
+              font-sans font-semibold italic
+            >
+              {{ headerTitle }}
+            </h3>
+
+            <ModalMenu
+              v-model:current-type="currentType"
+              :types="types"
+            />
+          </div>
+        </div>
+      </div>
+    </template>
+
+    <div
+      w-full
+      font-bold font-mono
+      flex items-center justify-center
+    >
+      <div
+        v-if="currentType === TYPE_SUBMISSIONS"
+        w-full
+        class="mt-[-12px]"
+      >
+        <SubmissionsTable
+          w-full
+          :rank="rank"
+          :submissions="team.submissions"
+          :page-size="8"
+          :remove-border="true"
+        />
+      </div>
+
+      <div
+        v-if="currentType === TYPE_STATISTICS"
+        w-full
+      >
+        <Chart
+          :options="getTeamPlaceChart(rank, team)"
+        />
+      </div>
+
+      <div
+        v-if="currentType === TYPE_AWARDS"
+        w-full
+      >
+        <TeamAwards
+          :team="team"
+        />
+      </div>
+    </div>
+  </Modal>
+</template>

package/src/components/board/TeamProblemBlock.vue

@@ -0,0 +1,100 @@
+<script setup lang="ts">
+import type { Rank, Team, TeamProblemStatistics } from "@xcpcio/core";
+
+const props = defineProps<{
+  rank: Rank,
+  team: Team,
+  p: TeamProblemStatistics,
+}>();
+
+const hiddenModal = ref(true);
+function onClick() {
+  hiddenModal.value = false;
+}
+
+const rank = computed(() => props.rank);
+const team = computed(() => props.team);
+const p = computed(() => props.p);
+
+function getProblemSign(p: TeamProblemStatistics): string {
+  if (p.isSolved) {
+    return "+";
+  }
+
+  if (p.isWrongAnswer) {
+    return "-";
+  }
+
+  if (p.isPending) {
+    return `? ${p.pendingCount}`;
+  }
+
+  return "";
+}
+
+function getProblemShow(p: TeamProblemStatistics): string {
+  let res = "";
+
+  if (!p.isUnSubmitted) {
+    res += `${p.failedCount + Number(p.isSolved)}`;
+  }
+
+  if ((p.isSolved && rank.value.contest.statusTimeDisplay.correct)
+                || (p.isPending && rank.value.contest.statusTimeDisplay.pending)
+                || (p.isWrongAnswer && rank.value.contest.statusTimeDisplay.incorrect)) {
+    res += `/${Math.floor(p.lastSubmitTimestamp / 60)}`;
+  }
+
+  return res;
+}
+
+function getProblemColorClass(p: TeamProblemStatistics): string {
+  if (p.isFirstSolved) {
+    return "first-solve";
+  }
+
+  if (p.isSolved) {
+    return "correct";
+  }
+
+  if (p.isWrongAnswer) {
+    return "incorrect";
+  }
+
+  if (p.isPending) {
+    return "pending";
+  }
+
+  return "unattempted";
+}
+</script>
+
+<template>
+  <td
+    class="stnd"
+    :class="[getProblemColorClass(p)]"
+  >
+    <div
+      cursor-pointer
+      @click="onClick"
+    >
+      {{ getProblemSign(p) }}
+      <br>
+      {{ getProblemShow(p) }}
+    </div>
+
+    <div>
+      <SubmissionsTableModal
+        v-if="!hiddenModal"
+        v-model:isHidden="hiddenModal"
+        :rank="rank"
+        :team="team"
+        :p="p"
+      />
+    </div>
+  </td>
+</template>
+
+<style scoped lang="less">
+@import "./Standings.less";
+</style>

package/src/components/board/TeamUI.vue

@@ -0,0 +1,161 @@
+<script setup lang="ts">
+import { MedalType } from "@xcpcio/core";
+import type { Rank, Team } from "@xcpcio/core";
+
+const props = defineProps<{
+  ix: number,
+  rank: Rank,
+  team: Team,
+  isFilter?: boolean;
+}>();
+
+const el = ref(null);
+const isVisible = useElementVisibility(el);
+
+const hiddenTeamInfoModal = ref(true);
+function onClickTeamInfoModal() {
+  hiddenTeamInfoModal.value = false;
+}
+
+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";
+    }
+
+    if (t.awards.includes(MedalType.SILVER)) {
+      return "silver";
+    }
+
+    if (t.awards.includes(MedalType.BRONZE)) {
+      return "bronze";
+    }
+
+    if (t.awards.includes(MedalType.HONORABLE)) {
+      return "honorable";
+    }
+  }
+
+  return `stand${(rank.value.rankStatistics.maxSolvedProblems - t.solvedProblemNum) % 2}${(t.rank - 1) % 2}`;
+}
+
+function isRenderByVisible() {
+  // Some teams in the header may have rendering anomalies,
+  // so force the first 32 teams to render regardless of their visibility
+  // when rank rebuild trigger by drag the progress bar
+  return isVisible.value || props.ix < 32;
+}
+</script>
+
+<template>
+  <tr
+    ref="el"
+    class="h-10"
+    :class="[props.isFilter ? 'filter-team' : '']"
+  >
+    <td
+      v-if="isRenderByVisible()"
+      class="stnd"
+      :class="[getStandClassName(team, true)]"
+    >
+      {{ team.rank }}
+    </td>
+    <td
+      v-if="rank.contest.badge && isRenderByVisible()"
+      class="empty flex items-center justify-center"
+    >
+      <img
+        :src="['data:image/png;base64,', team.badge?.base64].join('')"
+        alt=""
+        class="h-8 w-8"
+      >
+    </td>
+    <td
+      v-if="rank.contest.organization && isRenderByVisible()"
+      class="stnd"
+      :class="[getStandClassName(team)]"
+    >
+      <div flex>
+        <div class="float-left pl-2 font-serif">
+          <div v-if="team.organizationRank > -1">
+            {{ team.organizationRank }}
+          </div>
+        </div>
+        <div class="flex-1">
+          {{ team.organization }}
+        </div>
+        <div class="float-right" />
+      </div>
+    </td>
+
+    <td
+      v-if="isRenderByVisible()"
+      class="stnd"
+      :class="[getStandClassName(team)]"
+    >
+      <div
+        cursor-pointer
+        @click="onClickTeamInfoModal"
+      >
+        <span>{{ team.name }}</span>
+        <StarIcon v-if="team.group.includes('unofficial')" inline-block />
+        <GirlIcon v-if="team.group.includes('girl')" inline-block />
+      </div>
+
+      <div>
+        <TeamInfoModal
+          v-if="!hiddenTeamInfoModal"
+          v-model:isHidden="hiddenTeamInfoModal"
+          :rank="rank"
+          :team="team"
+        />
+      </div>
+    </td>
+
+    <td
+      v-if="isRenderByVisible()"
+      class="stnd"
+      :class="[getStandClassName(team)]"
+    >
+      {{ team.solvedProblemNum }}
+    </td>
+
+    <td
+      v-if="isRenderByVisible()"
+      class="stnd"
+      :class="[getStandClassName(team)]"
+    >
+      {{ team.penaltyToMinute }}
+    </td>
+
+    <template
+      v-for="p in team.problemStatistics"
+      :key="p.problem.id"
+    >
+      <TeamProblemBlock
+        v-if="isRenderByVisible()"
+        :rank="rank"
+        :team="team"
+        :p="p"
+      />
+    </template>
+    <td
+      v-if="isRenderByVisible()"
+      class="stnd"
+      :class="[getStandClassName(team)]"
+    >
+      {{ `${team.dict}%` }}
+    </td>
+  </tr>
+</template>
+
+<style scoped lang="less">
+@import "./Standings.less";
+</style>

package/src/components/board/Utility.vue

@@ -0,0 +1,28 @@
+<script  setup lang="ts">
+// const props = defineProps<{
+//   rank: Rank,
+// }>();
+
+const { t } = useI18n();
+
+const route = useRoute();
+
+const resolverUrl = computed(() => {
+  return `https://resolver.xcpcio.com/resolver?xcpcio-data-source=${route.path}`;
+});
+</script>
+
+<template>
+  <div
+    flex w-full mt-4
+  >
+    <a
+      btn
+      :href="resolverUrl"
+      target="_blank"
+      title="Resolver"
+    >
+      {{ t("type_menu.resolver") }}
+    </a>
+  </div>
+</template>

package/src/components/icon/GirlIcon.vue

@@ -0,0 +1,80 @@
+<template>
+  <div class="color-gray-700 dark:color-gray-200">
+    <svg
+      t="1685666543416"
+      class="icon"
+      viewBox="0 0 1024 1024"
+      version="1.1"
+      xmlns="http://www.w3.org/2000/svg"
+      p-id="3736"
+      width="16"
+      height="16"
+    >
+      <path
+        d="M661.333333 662.613333c0.213333 82.133333 28.8 169.386667 64 169.386667v170.666667H298.666667v-170.666667c35.2 0 63.786667-87.253333 64-169.386667a176.256 176.256 0 0 1 21.333333-1.28h21.333333c0 35.413333 47.786667 64 106.666667 64s106.666667-28.586667 106.666667-64h21.333333a176.256 176.256 0 0 1 21.333333 1.28z"
+        fill="#F3596B"
+        p-id="3737"
+      />
+      <path
+        d="M810.666667 832v170.666667h-85.333334v-170.666667c-35.2 0-63.786667-87.253333-64-169.386667A170.666667 170.666667 0 0 1 810.666667 832zM362.666667 662.613333c-0.213333 82.133333-28.8 169.386667-64 169.386667v170.666667h-85.333334v-170.666667a170.666667 170.666667 0 0 1 149.333334-169.386667z"
+        fill="#FFD0AA"
+        p-id="3738"
+      />
+      <path
+        d="M704 320v-85.333333c0-94.293333-97.706667-170.666667-192-170.666667a42.794667 42.794667 0 0 1 42.666667-42.666667h128a128 128 0 0 1 128 128v234.666667s0 85.333333 85.333333 85.333333c0 0-93.226667 134.613333-228.48 6.186667a166.229333 166.229333 0 0 0 13.866667-49.066667L682.666667 426.666667h21.333333a42.666667 42.666667 0 0 0 0-85.333334h-21.333333v-21.333333z"
+        fill="#FFCA6B"
+        p-id="3739"
+      />
+      <path
+        d="M704 234.666667H320c0-94.293333 97.706667-170.666667 192-170.666667s192 76.373333 192 170.666667z"
+        fill="#FFCA6B"
+        p-id="3740"
+      />
+      <path
+        d="M704 234.666667v85.333333H320v-85.333333h384z"
+        fill="#F3596B"
+        p-id="3741"
+      />
+      <path
+        d="M746.666667 384a42.794667 42.794667 0 0 1-42.666667 42.666667h-21.333333l-1.28-0.213334A172.8 172.8 0 0 0 682.666667 405.333333v-64h21.333333a42.794667 42.794667 0 0 1 42.666667 42.666667zM341.333333 405.333333a172.8 172.8 0 0 0 1.28 21.12L341.333333 426.666667h-21.333333a42.666667 42.666667 0 0 1 0-85.333334h21.333333zM618.666667 661.333333c0 35.413333-47.786667 64-106.666667 64s-106.666667-28.586667-106.666667-64a42.794667 42.794667 0 0 0 42.666667-42.666666v-55.04a171.712 171.712 0 0 0 128 0V618.666667a42.794667 42.794667 0 0 0 42.666667 42.666666z"
+        fill="#FFD0AA"
+        p-id="3742"
+      />
+      <path
+        d="M682.666667 341.333333v64a172.8 172.8 0 0 1-1.28 21.12 166.229333 166.229333 0 0 1-13.866667 49.066667A170.474667 170.474667 0 0 1 576 563.626667 170.538667 170.538667 0 0 1 341.333333 405.333333v-85.333333h341.333334z"
+        fill="#FFD0AA"
+        p-id="3743"
+      />
+      <path
+        d="M810.666667 1024H213.333333a21.333333 21.333333 0 0 1-21.333333-21.333333v-170.666667a192.213333 192.213333 0 0 1 192-192h21.333333a21.333333 21.333333 0 0 0 21.333334-21.333333v-64h42.666666v64a64 64 0 0 1-64 64h-21.333333a149.504 149.504 0 0 0-149.333333 149.333333v149.333333h554.666666v-149.333333a149.504 149.504 0 0 0-149.333333-149.333333h-21.333333a64 64 0 0 1-64-64v-64h42.666666v64a21.333333 21.333333 0 0 0 21.333334 21.333333h21.333333a192.213333 192.213333 0 0 1 192 192v170.666667a21.333333 21.333333 0 0 1-21.333333 21.333333z"
+        fill="#2A3244"
+        p-id="3744"
+      />
+      <path
+        d="M512 597.333333a192.234667 192.234667 0 0 1-192-192v-85.333333a21.333333 21.333333 0 0 1 21.333333-21.333333h341.333334a21.333333 21.333333 0 0 1 21.333333 21.333333v85.333333a192.234667 192.234667 0 0 1-192 192z m-149.333333-256v64a149.333333 149.333333 0 0 0 298.666666 0v-64z"
+        fill="#2A3244"
+        p-id="3745"
+      />
+      <path
+        d="M704 448h-21.333333v-42.666667h21.333333a21.333333 21.333333 0 0 0 0-42.666666h-21.333333v-42.666667h21.333333a64 64 0 0 1 0 128zM341.333333 448h-21.333333a64 64 0 0 1 0-128h21.333333v42.666667h-21.333333a21.333333 21.333333 0 0 0 0 42.666666h21.333333z"
+        fill="#2A3244"
+        p-id="3746"
+      />
+      <path
+        d="M704 341.333333H320a21.333333 21.333333 0 0 1-21.333333-21.333333v-85.333333a21.333333 21.333333 0 0 1 21.333333-21.333334h384a21.333333 21.333333 0 0 1 21.333333 21.333334v85.333333a21.333333 21.333333 0 0 1-21.333333 21.333333z m-362.666667-42.666666h341.333334v-42.666667H341.333333z"
+        fill="#2A3244"
+        p-id="3747"
+      />
+      <path
+        d="M725.333333 234.666667h-42.666666c0-84.096-91.733333-149.333333-170.666667-149.333334s-170.666667 65.237333-170.666667 149.333334h-42.666666c0-109.888 112.618667-192 213.333333-192s213.333333 82.112 213.333333 192z"
+        fill="#2A3244"
+        p-id="3748"
+      />
+      <path
+        d="M783.616 552.32c-46.122667 0-92.266667-22.805333-137.365333-67.904l30.165333-30.165333c39.701333 39.701333 78.613333 58.389333 115.648 55.018666a114.282667 114.282667 0 0 0 60.8-26.026666A105.92 105.92 0 0 1 789.333333 384V149.333333a106.794667 106.794667 0 0 0-106.666666-106.666666h-128a21.333333 21.333333 0 0 0-21.333334 21.333333h-42.666666a64 64 0 0 1 64-64h128a149.504 149.504 0 0 1 149.333333 149.333333v234.666667a60.842667 60.842667 0 0 0 64 64 21.333333 21.333333 0 0 1 17.536 33.472 174.72 174.72 0 0 1-117.333333 70.250667 130.133333 130.133333 0 0 1-12.586667 0.597333zM512 746.666667c-71.765333 0-128-37.482667-128-85.333334h42.666667c0 20.138667 36.48 42.666667 85.333333 42.666667s85.333333-22.528 85.333333-42.666667h42.666667c0 47.850667-56.234667 85.333333-128 85.333334zM746.666667 1002.666667h-42.666667v-154.709334c-43.968-23.274667-64-117.333333-64-186.624h42.666667c0 85.333333 29.866667 148.842667 42.666666 149.333334a22.08 22.08 0 0 1 21.333334 21.333333zM320 1002.666667h-42.666667v-170.666667a21.333333 21.333333 0 0 1 21.333334-21.333333c12.8-0.490667 42.666667-64 42.666666-149.333334h42.666667c0 69.354667-20.032 163.349333-64 186.624z"
+        fill="#2A3244"
+        p-id="3749"
+      />
+    </svg>
+  </div>
+</template>

package/src/components/icon/RightArrowIcon.vue

@@ -0,0 +1,26 @@
+<template>
+  <div class="color-gray-700 dark:color-gray-200">
+    <svg
+      stroke="currentColor"
+      fill="currentColor"
+      strokeWidth="0"
+      viewBox="0 0 1024 1024"
+      version="1.1"
+      xmlns="http://www.w3.org/2000/svg"
+      p-id="1161"
+      width="30"
+      height="30"
+    >
+      <path
+        d="M837.9904 570.0608H124.5696a29.0304 29.0304 0 0 1-29.0304-29.0304V482.9696a29.0304 29.0304 0 0 1 29.0304-29.0304h713.4208z"
+        fill="currentColor"
+        p-id="1162"
+      />
+      <path
+        d="M561.3056 808.96l-40.96-40.96a28.928 28.928 0 0 1 0-40.96l215.04-215.04-215.04-215.04a28.9792 28.9792 0 0 1 0-40.96l40.96-40.96a28.9792 28.9792 0 0 1 40.96 0l296.96 296.96-296.96 296.96a28.9792 28.9792 0 0 1-40.96 0z"
+        fill="currentColor"
+        p-id="1163"
+      />
+    </svg>
+  </div>
+</template>

package/src/components/icon/StarIcon.vue

@@ -0,0 +1,19 @@
+<template>
+  <div class="color-gray-700 dark:color-gray-200">
+    <svg
+      t="1685845881484"
+      class="icon"
+      viewBox="0 0 1024 1024"
+      version="1.1"
+      xmlns="http://www.w3.org/2000/svg"
+      p-id="4847"
+      width="16"
+      height="16"
+    >
+      <path
+        d="M785.352203 933.397493c-4.074805 0-8.151657-0.970094-11.833513-3.007497l-261.311471-142.488225L250.942821 930.388972c-8.343015 4.559852-18.527982 3.8814-26.28669-1.599428-7.760754-5.5279-11.640108-14.987343-10.088776-24.347524l47.578622-285.365306L72.563154 429.470355c-6.594185-6.547113-8.971325-16.295128-6.110161-25.122167 2.814092-8.850575 10.379395-15.397688 19.546172-16.949021l285.512662-47.577598 118.529557-236.989529c4.172019-8.391111 12.803607-13.701047 22.165836-13.701047 9.359158 0 17.992793 5.309936 22.163789 13.701047l118.529557 236.989529 285.511639 47.577598c9.217942 1.551332 16.73208 8.051373 19.593244 16.949021 2.813069 8.875135 0.48607 18.575054-6.109138 25.122167L762.264369 619.077737l47.577598 285.365306c1.50119 9.360182-2.37714 18.819624-10.087753 24.347524C795.487028 931.797042 790.394033 933.397493 785.352203 933.397493zM512.206196 734.747153c4.073782 0 8.196683 0.968048 11.880585 3.006474l228.379431 124.545574-41.268916-247.634983c-1.308809-7.90504 1.257643-16.005532 6.932899-21.63167l164.55787-164.555823-250.398934-41.709961c-7.855922-1.308809-14.549368-6.304589-18.140149-13.408381l-101.942787-203.915249"
+        p-id="4848"
+      />
+    </svg>
+  </div>
+</template>