@xcpcio/board-app 0.66.2 → 0.68.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@xcpcio/board-app",
   "type": "module",
-  "version": "0.66.2",
+  "version": "0.68.0",
   "description": "The ICPC Series Competition Leaderboard Visualization Engine",
   "author": "Dup4 <hi@dup4.com>",
   "license": "MIT",
@@ -53,8 +53,8 @@
     "vue-router": "^4.5.1",
     "vue-search-select": "^3.2.0",
     "vue-toast-notification": "^3.1.3",
-    "@xcpcio/core": "0.66.2",
-    "@xcpcio/types": "0.66.2"
+    "@xcpcio/core": "0.68.0",
+    "@xcpcio/types": "0.68.0"
   },
   "devDependencies": {
     "@iconify/json": "^2.2.394",

package/src/auto-imports.d.ts

@@ -53,7 +53,6 @@ declare global {
   const getCurrentInstance: typeof import('vue')['getCurrentInstance']
   const getCurrentScope: typeof import('vue')['getCurrentScope']
   const getCurrentWatcher: typeof import('vue')['getCurrentWatcher']
-  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']
@@ -260,11 +259,18 @@ declare global {
   const usePreferredReducedTransparency: typeof import('@vueuse/core')['usePreferredReducedTransparency']
   const usePrevious: typeof import('@vueuse/core')['usePrevious']
   const useQueryBoardData: typeof import('./composables/useQueryBoardData')['useQueryBoardData']
+  const useQueryForBattleOfGiants: typeof import('./composables/query')['useQueryForBattleOfGiants']
+  const useQueryForComponent: typeof import('./composables/query')['useQueryForComponent']
+  const useQueryForDataSourceUrl: typeof import('./composables/query')['useQueryForDataSourceUrl']
+  const useQueryForGroup: typeof import('./composables/query')['useQueryForGroup']
+  const useQueryForProgressRatio: typeof import('./composables/query')['useQueryForProgressRatio']
+  const useQueryForReplayStartTime: typeof import('./composables/query')['useQueryForReplayStartTime']
+  const useQueryForSearch: typeof import('./composables/query')['useQueryForSearch']
   const useRafFn: typeof import('@vueuse/core')['useRafFn']
   const useRefHistory: typeof import('@vueuse/core')['useRefHistory']
   const useResizeObserver: typeof import('@vueuse/core')['useResizeObserver']
   const useRoute: typeof import('vue-router')['useRoute']
-  const useRouteQueryForBattleOfGiants: typeof import('./composables/query')['useRouteQueryForBattleOfGiants']
+  const useRouteQueryWithoutParam: typeof import('./composables/useRouteQueryWithoutParam')['useRouteQueryWithoutParam']
   const useRouter: typeof import('vue-router')['useRouter']
   const useSSRWidth: typeof import('@vueuse/core')['useSSRWidth']
   const useScreenOrientation: typeof import('@vueuse/core')['useScreenOrientation']
@@ -353,6 +359,9 @@ declare global {
   // @ts-ignore
   export type { BoardData } from './composables/useQueryBoardData'
   import('./composables/useQueryBoardData')
+  // @ts-ignore
+  export type { RouteQueryValueRaw, RouteHashValueRaw, ReactiveRouteOptions, ReactiveRouteOptionsWithTransform } from './composables/useRouteQueryWithoutParam'
+  import('./composables/useRouteQueryWithoutParam')
 }
 
 // for vue template auto import
@@ -407,7 +416,6 @@ declare module 'vue' {
     readonly getCurrentInstance: UnwrapRef<typeof import('vue')['getCurrentInstance']>
     readonly getCurrentScope: UnwrapRef<typeof import('vue')['getCurrentScope']>
     readonly getCurrentWatcher: UnwrapRef<typeof import('vue')['getCurrentWatcher']>
-    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']>
@@ -614,11 +622,18 @@ declare module 'vue' {
     readonly usePreferredReducedTransparency: UnwrapRef<typeof import('@vueuse/core')['usePreferredReducedTransparency']>
     readonly usePrevious: UnwrapRef<typeof import('@vueuse/core')['usePrevious']>
     readonly useQueryBoardData: UnwrapRef<typeof import('./composables/useQueryBoardData')['useQueryBoardData']>
+    readonly useQueryForBattleOfGiants: UnwrapRef<typeof import('./composables/query')['useQueryForBattleOfGiants']>
+    readonly useQueryForComponent: UnwrapRef<typeof import('./composables/query')['useQueryForComponent']>
+    readonly useQueryForDataSourceUrl: UnwrapRef<typeof import('./composables/query')['useQueryForDataSourceUrl']>
+    readonly useQueryForGroup: UnwrapRef<typeof import('./composables/query')['useQueryForGroup']>
+    readonly useQueryForProgressRatio: UnwrapRef<typeof import('./composables/query')['useQueryForProgressRatio']>
+    readonly useQueryForReplayStartTime: UnwrapRef<typeof import('./composables/query')['useQueryForReplayStartTime']>
+    readonly useQueryForSearch: UnwrapRef<typeof import('./composables/query')['useQueryForSearch']>
     readonly useRafFn: UnwrapRef<typeof import('@vueuse/core')['useRafFn']>
     readonly useRefHistory: UnwrapRef<typeof import('@vueuse/core')['useRefHistory']>
     readonly useResizeObserver: UnwrapRef<typeof import('@vueuse/core')['useResizeObserver']>
     readonly useRoute: UnwrapRef<typeof import('vue-router')['useRoute']>
-    readonly useRouteQueryForBattleOfGiants: UnwrapRef<typeof import('./composables/query')['useRouteQueryForBattleOfGiants']>
+    readonly useRouteQueryWithoutParam: UnwrapRef<typeof import('./composables/useRouteQueryWithoutParam')['useRouteQueryWithoutParam']>
     readonly useRouter: UnwrapRef<typeof import('vue-router')['useRouter']>
     readonly useSSRWidth: UnwrapRef<typeof import('@vueuse/core')['useSSRWidth']>
     readonly useScreenOrientation: UnwrapRef<typeof import('@vueuse/core')['useScreenOrientation']>

package/src/components/CustomBalloon.vue

@@ -1,7 +1,5 @@
 <script setup lang="ts">
-import { getDataSourceUrl } from "@board/composables/query";
-
-const dataSourceUrl = getDataSourceUrl();
+const dataSourceUrl = useQueryForDataSourceUrl();
 </script>
 
 <template>

package/src/components/CustomBoard.vue

@@ -1,7 +1,5 @@
 <script setup lang="ts">
-import { getDataSourceUrl } from "@board/composables/query";
-
-const dataSourceUrl = getDataSourceUrl();
+const dataSourceUrl = useQueryForDataSourceUrl();
 </script>
 
 <template>

package/src/components/CustomCountdown.vue

@@ -1,7 +1,5 @@
 <script setup lang="ts">
-import { getDataSourceUrl } from "@board/composables/query";
-
-const dataSourceUrl = getDataSourceUrl();
+const dataSourceUrl = useQueryForDataSourceUrl();
 </script>
 
 <template>

package/src/components/CustomResolver.vue

@@ -1,7 +1,5 @@
 <script setup lang="ts">
-import { getDataSourceUrl } from "@board/composables/query";
-
-const dataSourceUrl = getDataSourceUrl();
+const dataSourceUrl = useQueryForDataSourceUrl();
 </script>
 
 <template>

package/src/components/DataSourceInput.vue

@@ -1,9 +1,7 @@
 <script setup lang="ts">
-import { getDataSourceUrl } from "@board/composables/query";
-
 const { t } = useI18n();
 
-const dataSourceUrl = getDataSourceUrl();
+const dataSourceUrl = useQueryForDataSourceUrl();
 const dataSourceUrlText = "Data Source URL";
 const dataSourceUrlInput = ref(dataSourceUrl.value);
 

package/src/components/board/Badge.vue

@@ -22,7 +22,7 @@ const widthClass = computed(() => {
 
 <template>
   <img
-    v-if="image.base64"
+    v-if="image.base64 || image.url"
     :src="getImageSource(image)"
     alt="badge"
     :class="[widthClass]"

package/src/components/board/Board.vue

@@ -3,12 +3,6 @@ import type { Item } from "@board/components/board/SecondLevelMenu.vue";
 import type { Contest, Submissions, Teams } from "@xcpcio/core";
 import type { Contest as IContest, Submissions as ISubmissions, Teams as ITeams, Lang } from "@xcpcio/types";
 
-import FilterModal from "@board/components/board/FilterModal.vue";
-
-import { TITLE_SUFFIX } from "@board/composables/constant";
-import { onKeyStroke, useDocumentVisibility, useIntervalFn, useNow } from "@vueuse/core";
-
-import { useRouteQuery } from "@vueuse/router";
 import { createContest, createSubmissions, createTeams, getImageSource, getTimeDiff, Rank, RankOptions } from "@xcpcio/core";
 import { ContestState } from "@xcpcio/types";
 
@@ -34,10 +28,6 @@ const contestName = ref("");
 
 const enableAutoScroll = ref(false);
 
-function fixPath(path: string) {
-  return path.replaceAll("%2F", "/");
-}
-
 (() => {
   const filterOrganizations = useLocalStorageForFilterOrganizations();
   const filterTeams = useLocalStorageForFilterTeams();
@@ -52,7 +42,7 @@ function fixPath(path: string) {
 })();
 
 (() => {
-  const routeQueryForBattleOfGiants = useRouteQueryForBattleOfGiants();
+  const routeQueryForBattleOfGiants = useQueryForBattleOfGiants();
   if (
     routeQueryForBattleOfGiants.value !== null
     && routeQueryForBattleOfGiants.value !== undefined
@@ -70,17 +60,12 @@ function onChangeCurrentGroup(nextGroup: string) {
   rankOptions.value.setGroup(nextGroup);
 }
 (() => {
-  const currentGroupFromRouteQuery = useRouteQuery(
-    /* name */ "group",
-    /* defaultValue */ "all",
-    { transform: String },
-  );
-
+  const currentGroupFromRouteQuery = useQueryForGroup();
   currentGroup.value = currentGroupFromRouteQuery.value;
   rankOptions.value.setGroup(currentGroupFromRouteQuery.value);
 })();
 
-const replayStartTime = useRouteQuery("replay-start-time", 0, { transform: Number });
+const replayStartTime = useQueryForReplayStartTime();
 
 const isReBuildRank = ref(false);
 function reBuildRank(options = { force: false }) {
@@ -109,7 +94,7 @@ function updateContestName() {
   title.value = `${contestName.value} | ${TITLE_SUFFIX}`;
 }
 
-const { data, isError, error, refetch } = useQueryBoardData(props.dataSourceUrl ?? fixPath(route.path), now);
+const { data, isError, error, refetch } = useQueryBoardData(props.dataSourceUrl ?? route.path, now);
 watch(data, async () => {
   if (data.value === null || data.value === undefined) {
     return;
@@ -420,7 +405,7 @@ const widthClass = "sm:w-[1260px] xl:w-screen";
         >
           <div class="max-w-[92%]">
             <img
-              :src="getImageSource(rank.contest.banner, `${DATA_HOST}${fixPath(route.path).slice(1)}`)"
+              :src="getImageSource(rank.contest.banner, `${DATA_HOST}${route.path.slice(1)}`)"
               class="w-screen"
               alt="banner"
             >

package/src/components/board/OptionsModal.vue

@@ -66,7 +66,7 @@ const teamsOptions = computed(() => {
   return res;
 });
 
-const routeQueryForBattleOfGiants = useRouteQueryForBattleOfGiants();
+const routeQueryForBattleOfGiants = useQueryForBattleOfGiants();
 function persistBattleOfGiants() {
   if (rankOptions.value.battleOfGiants.persist) {
     routeQueryForBattleOfGiants.value = rankOptions.value.battleOfGiants.ToBase64();

package/src/components/board/Progress.vue

@@ -1,6 +1,5 @@
 <script setup lang="ts">
 import type { Rank, RankOptions } from "@xcpcio/core";
-import { useRouteQuery } from "@vueuse/router";
 import { createDayJS, getTimeDiff } from "@xcpcio/core";
 import { ContestState } from "@xcpcio/types";
 
@@ -44,7 +43,7 @@ const isDragging = ref(false);
 const dragWidth = ref(0);
 const barWidth = ref(props.width);
 const barWidthPX = ref(0);
-const progressRatio = useRouteQuery("progress-ratio", -1, { transform: Number });
+const progressRatio = useQueryForProgressRatio();
 
 const scroll = ref<HTMLElement>(null as unknown as HTMLElement);
 const mask = ref<HTMLElement>(null as unknown as HTMLElement);

package/src/components/board/SecondLevelMenu.vue

@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import type { I18nText } from "@xcpcio/core";
 import type { Lang } from "@xcpcio/types";
-import { useRouteQuery } from "@vueuse/router";
 
 export interface Item {
   title: string | I18nText;
@@ -33,7 +32,7 @@ const defaultType = computed(() => {
   return props.items?.[0].keyword;
 });
 
-const currentItemFromRouteQuery = useRouteQuery(
+const currentItemFromRouteQuery = useRouteQueryWithoutParam(
   props.queryParamName,
   defaultType.value,
   { transform: String },

package/src/components/board/Standings.vue

@@ -167,7 +167,7 @@ const maxTeamLength = computed(() => {
             <th
               v-if="rank.contest.badge"
               class="title"
-              style="width: 2rem;"
+              style="width: 2.5rem;"
             >
               {{ rank.contest.badge }}
             </th>

package/src/components/board/TeamInfo.vue

@@ -0,0 +1,116 @@
+<script setup lang="ts">
+import type { Rank, Team } from "@xcpcio/core";
+import type { Lang } from "@xcpcio/types";
+
+const props = defineProps<{
+  rank: Rank;
+  team: Team;
+}>();
+
+const { t, locale } = useI18n();
+const lang = computed(() => locale.value as unknown as Lang);
+
+const rank = computed(() => props.rank);
+const team = computed(() => props.team);
+
+const photoLoadError = ref(false);
+function handlePhotoError() {
+  photoLoadError.value = true;
+}
+
+const hasPhoto = computed(() => {
+  if (team.value.missingPhoto || photoLoadError.value) {
+    return false;
+  }
+
+  return rank.value.contest.options.teamPhotoTemplate || team.value.photo;
+});
+
+const teamPhoto = computed(() => {
+  if (team.value.photo?.url) {
+    return {
+      url: team.value.photo.url,
+      width: team.value.photo.width,
+      height: team.value.photo.height,
+    };
+  }
+
+  const template = rank.value.contest.options.teamPhotoTemplate;
+  if (template?.url) {
+    return {
+      url: template.url.replace(/\$\{team_id\}/, team.value.id),
+      width: template.width,
+      height: template.height,
+    };
+  }
+
+  return { url: "", width: undefined, height: undefined };
+});
+
+const groupNames = computed(() => {
+  return team.value.group
+    .map((groupId) => {
+      const group = rank.value.contest.group.get(groupId);
+      return group ? group.name.getOrDefault(lang.value) : groupId;
+    })
+    .join(", ");
+});
+
+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.organization"), value: team.value.organization, 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 },
+    { label: t("team_info.coaches"), value: team.value.coachesToString(lang.value), show: team.value.coaches.length > 0 },
+    { label: t("team_info.location"), value: team.value.location, show: !!team.value.location },
+  ];
+  return rows.filter(row => row.show);
+});
+</script>
+
+<template>
+  <div
+    flex w-full
+    :class="hasPhoto ? 'flex-row gap-8' : 'justify-center'"
+  >
+    <div
+      :class="hasPhoto ? 'flex-1' : 'w-1/2'"
+      flex items-center justify-center
+    >
+      <table w-full text-lg text-left text-gray-900 dark:text-gray-100>
+        <tbody>
+          <tr
+            v-for="(row, index) in tableRows"
+            :key="row.label"
+            :class="index % 2 === 0 ? 'bg-gray-100 dark:bg-gray-700' : 'bg-white dark:bg-gray-800'"
+          >
+            <td px-4 py-2>
+              {{ row.label }}
+            </td>
+            <td px-4 py-2>
+              {{ row.value }}
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+    <div v-if="hasPhoto" flex-1>
+      <div flex items-center justify-center>
+        <a
+          class="max-w-[98%]"
+          target="_blank" rel="nofollow" :href="teamPhoto.url"
+        >
+          <img
+            :src="teamPhoto.url"
+            :width="teamPhoto.width"
+            :height="teamPhoto.height"
+            alt="team photo"
+            @error="handlePhotoError"
+          >
+        </a>
+      </div>
+    </div>
+  </div>
+</template>

package/src/components/board/TeamInfoModal.vue

@@ -25,7 +25,7 @@ const isHidden = computed({
   },
 });
 
-const currentType = ref("submissions");
+const currentType = ref("info");
 
 const rank = computed(() => props.rank);
 const team = computed(() => props.team);
@@ -39,21 +39,14 @@ const headerTitle = computed(() => {
 
   res += `${team.value.name.getOrDefault(lang.value)}`;
 
-  if (team.value.members && team.value.members.length > 0) {
-    res += ` - ${team.value.membersToString(lang.value)}`;
-  }
-
-  if (team.value.coaches && team.value.coaches.length > 0) {
-    res += ` - ${team.value.coachesToString(lang.value)}(coach)`;
-  }
-
   return res;
 });
 
+const TYPE_INFO = "info";
 const TYPE_SUBMISSIONS = "submissions";
 const TYPE_STATISTICS = "statistics";
 const TYPE_AWARDS = "awards";
-const types = [TYPE_SUBMISSIONS, TYPE_STATISTICS, TYPE_AWARDS];
+const types = [TYPE_INFO, TYPE_SUBMISSIONS, TYPE_STATISTICS, TYPE_AWARDS];
 </script>
 
 <template>
@@ -75,13 +68,13 @@ const types = [TYPE_SUBMISSIONS, TYPE_STATISTICS, TYPE_AWARDS];
             space-y-3 md:space-y-0
           >
             <div
-              flex flex-row
-              space-x-3
+              flex flex-row items-center justify-center
+              space-x-4
             >
               <Badge
                 v-if="team.badge"
                 :image="team.badge"
-                width-class="h-8 w-8"
+                width-class="h-16 w-16"
               />
 
               <Tooltip>
@@ -120,6 +113,16 @@ const types = [TYPE_SUBMISSIONS, TYPE_STATISTICS, TYPE_AWARDS];
       font-bold font-mono
       flex items-center justify-center
     >
+      <div
+        v-if="currentType === TYPE_INFO"
+        w-full
+      >
+        <TeamInfo
+          :rank="rank"
+          :team="team"
+        />
+      </div>
+
       <div
         v-if="currentType === TYPE_SUBMISSIONS"
         w-full

package/src/components/board/TeamUI.vue

@@ -91,10 +91,11 @@ function isRenderByVisible() {
     <td
       v-if="rank.contest.badge && team.badge && isRenderByVisible()"
       class="empty flex items-center justify-center"
+      style="padding: 0px !important; margin: 0px !important;"
     >
       <Badge
         :image="team.badge"
-        width-class="h-8 w-8"
+        width-class="w-full h-full"
       />
     </td>
     <td

package/src/components/board/Utility.vue

@@ -1,6 +1,5 @@
 <script setup lang="ts">
 import type { Rank } from "@xcpcio/core";
-import { useRouteQuery } from "@vueuse/router";
 
 const props = defineProps<{
   rank: Rank;
@@ -10,7 +9,7 @@ const { t } = useI18n();
 
 const route = useRoute();
 const router = useRouter();
-const component = useRouteQuery("component", "board", { transform: String });
+const component = useQueryForComponent();
 
 function goResolver() {
   if (window.DATA_SOURCE) {

package/src/components.d.ts

@@ -60,6 +60,7 @@ declare module 'vue' {
     SubmitHeatMap: typeof import('./components/board/SubmitHeatMap.vue')['default']
     TablePagination: typeof import('./components/table/TablePagination.vue')['default']
     TeamAwards: typeof import('./components/board/TeamAwards.vue')['default']
+    TeamInfo: typeof import('./components/board/TeamInfo.vue')['default']
     TeamInfoModal: typeof import('./components/board/TeamInfoModal.vue')['default']
     TeamProblemBlock: typeof import('./components/board/TeamProblemBlock.vue')['default']
     TeamUI: typeof import('./components/board/TeamUI.vue')['default']

package/src/composables/query.ts

@@ -1,17 +1,57 @@
-import { useRouteQuery } from "@vueuse/router";
+import { useRouteQueryWithoutParam } from "./useRouteQueryWithoutParam";
 
-export function getDataSourceUrl() {
-  return useRouteQuery(
-    "data-source",
+export function useQueryForSearch() {
+  return useRouteQueryWithoutParam(
+    "s",
     "",
     { transform: String },
   );
 }
 
-export function useRouteQueryForBattleOfGiants() {
-  return useRouteQuery(
+export function useQueryForDataSourceUrl() {
+  return useRouteQueryWithoutParam(
+    "data-source-url",
+    "",
+    { transform: String },
+  );
+}
+
+export function useQueryForGroup() {
+  return useRouteQueryWithoutParam(
+    "group",
+    "all",
+    { transform: String },
+  );
+}
+
+export function useQueryForReplayStartTime() {
+  return useRouteQueryWithoutParam(
+    "replay-start-time",
+    "0",
+    { transform: Number },
+  );
+}
+
+export function useQueryForProgressRatio() {
+  return useRouteQueryWithoutParam(
+    "progress-ratio",
+    -1,
+    { transform: Number },
+  );
+}
+
+export function useQueryForBattleOfGiants() {
+  return useRouteQueryWithoutParam(
     "battle-of-giants",
     "",
     { transform: String },
   );
 }
+
+export function useQueryForComponent() {
+  return useRouteQueryWithoutParam(
+    "component",
+    "board",
+    { transform: String },
+  );
+}

package/src/composables/rating.ts

@@ -1,4 +1,5 @@
 import type { RatingUser } from "@xcpcio/core";
+import type { Lang } from "@xcpcio/types";
 import { RatingLevelToString, RatingUtility } from "@xcpcio/core";
 
 interface RatingGraphData {
@@ -27,6 +28,9 @@ export function getRatingGraphOptions(
 ) {
   const data: RatingGraphData[] = [];
 
+  const { locale } = useI18n();
+  const lang = locale.value as unknown as Lang;
+
   {
     let oldRating = 0;
     for (const h of ratingUser.ratingHistories) {
@@ -35,10 +39,10 @@ export function getRatingGraphOptions(
       d.y = h.rating;
       d.diffRating = getDiffRating(oldRating, h.rating);
       d.rank = h.rank;
-      d.contestName = h.contestName;
+      d.contestName = h.contestName.getOrDefault(lang);
       d.link = `/board/${h.contestID}`;
       d.contestTime = h.contestTime.format("YYYY-MM-DD HH:mm:ss");
-      d.teamName = h.teamName;
+      d.teamName = h.teamName.getOrDefault(lang);
       d.ratingTitle = RatingLevelToString[RatingUtility.getRatingLevel(h.rating)];
       data.push(d);