@xcpcio/board-app 0.35.0 → 0.36.0

package/src/components/board/Board.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import _ from "lodash";
 import { useRouteQuery } from "@vueuse/router";
-import { onKeyStroke } from "@vueuse/core";
+import { onKeyStroke, useIntervalFn, useNow } from "@vueuse/core";
 
 import { Rank, RankOptions, createContest, createSubmissions, createTeams, getTimeDiff } from "@xcpcio/core";
 import type { Contest, Submissions, Teams } from "@xcpcio/core";
@@ -23,7 +23,7 @@ const contestData = ref({} as Contest);
 const teamsData = ref([] as Teams);
 const submissionsData = ref([] as Submissions);
 const rank = ref({} as Rank);
-const now = ref(new Date());
+const now = useNow();
 const rankOptions = ref(new RankOptions());
 
 const enableAutoScroll = ref(false);
@@ -60,15 +60,28 @@ function onChangeCurrentGroup(nextGroup: string) {
   rankOptions.value.setGroup(currentGroupFromRouteQuery.value);
 })();
 
+const replayStartTime = useRouteQuery("replay-start-time", 0, { transform: Number });
+
+const isReBuildRank = ref(false);
 function reBuildRank(options = { force: false }) {
   if (enableAutoScroll.value && options.force === false) {
     return;
   }
 
+  if (isReBuildRank.value === true) {
+    return;
+  }
+
+  isReBuildRank.value = true;
+
   const newRank = new Rank(contestData.value, teamsData.value, submissionsData.value);
   newRank.options = _.cloneDeep(rankOptions.value);
+  newRank.setReplayTime(replayStartTime.value);
+
   newRank.buildRank();
   rank.value = newRank;
+
+  isReBuildRank.value = false;
 }
 
 const { data, isError, error } = useQueryBoardData(props.dataSourceUrl ?? route.path, now);
@@ -92,28 +105,38 @@ watch(data, async () => {
   firstLoaded.value = true;
 });
 
-const isReBuildRank = ref(false);
-watch(rankOptions.value, () => {
+function dynamicReBuildRank() {
   if (firstLoaded.value === false) {
     return;
   }
 
+  reBuildRank();
+}
+
+watch(rankOptions.value, () => {
   if (!rank.value.options.isNeedReBuildRank(rankOptions.value)) {
     rank.value.options = _.cloneDeep(rankOptions.value);
     return;
   }
 
-  if (isReBuildRank.value === true) {
-    return;
-  }
-
-  isReBuildRank.value = true;
-
-  reBuildRank();
-
-  isReBuildRank.value = false;
+  dynamicReBuildRank();
 });
 
+{
+  const { pause, resume } = useIntervalFn(() => {
+    dynamicReBuildRank();
+  }, 1000);
+
+  watch(replayStartTime, () => {
+    if (replayStartTime.value === 0) {
+      pause();
+    } else {
+      dynamicReBuildRank();
+      resume();
+    }
+  });
+}
+
 const typeMenuList = ref<Array<Item>>([
   {
     title: "type_menu.rank",
@@ -231,12 +254,12 @@ onKeyStroke("S", (_e) => {
 }, { dedupe: false });
 
 const startTime = computed(() => {
-  const time = rank.value.contest.startTime.format("YYYY-MM-DD HH:mm:ss");
+  const time = rank.value.contest.getStartTime().format("YYYY-MM-DD HH:mm:ss");
   return `${t("standings.start_time")}${t("common.colon")}${time}`;
 });
 
 const endTime = computed(() => {
-  const time = rank.value.contest.endTime.format("YYYY-MM-DD HH:mm:ss");
+  const time = rank.value.contest.getEndTime().format("YYYY-MM-DD HH:mm:ss");
   return `${t("standings.end_time")}${t("common.colon")}${time}`;
 });
 
@@ -262,12 +285,7 @@ const pausedTime = computed(() => {
   return getTimeDiff(rank.value.options.timestamp);
 });
 
-const setNowIntervalId = setInterval(() => {
-  now.value = new Date();
-}, 1000);
-
 onUnmounted(() => {
-  clearInterval(setNowIntervalId);
   clearAutoScrollInterval();
 });
 
@@ -340,7 +358,7 @@ const widthClass = "sm:w-[1260px] xl:w-screen";
         <div class="w-[92%]">
           <div class="flex font-bold font-mono">
             <div class="float-left">
-              {{ startTime }}<sup class="pl-0.5">{{ rank.contest.startTime.format("z") }}</sup>
+              {{ startTime }}<sup class="pl-0.5">{{ rank.contest.getStartTime().format("z") }}</sup>
             </div>
             <div class="flex-1">
               <ContestStateBadge

package/src/components/board/ProblemBlock.vue

@@ -30,9 +30,8 @@ const balloonColor = computed(() => problem.value.balloonColor);
   >
     <div
       cursor-pointer
-      flex
-      flex-col justify-center
-      items-center
+      flex flex-col
+      justify-center items-center
       @click="onClick"
     >
       <div>

package/src/components/board/Progress.vue

@@ -117,8 +117,8 @@ function startDrag(event: MouseEvent) {
 }
 
 function getTimeScroll() {
-  const startTime = props.rank!.contest.startTime;
-  const endTime = props.rank!.contest.endTime;
+  const startTime = props.rank!.contest.getStartTime();
+  const endTime = props.rank!.contest.getEndTime();
 
   const gap = endTime.unix() - startTime.unix();
   const target = Math.floor(gap * barWidth.value * 0.01);

package/src/components/board/TeamProblemBlock.vue

@@ -80,9 +80,12 @@ function getProblemColorClass(p: TeamProblemStatistics): string {
       justify-center items-center
       @click="onClick"
     >
-      {{ getProblemSign(p) }}
-      <br>
-      {{ getProblemShow(p) }}
+      <div>
+        {{ getProblemSign(p) }}
+      </div>
+      <div>
+        {{ getProblemShow(p) }}
+      </div>
     </div>
 
     <div>

package/src/components.d.ts

@@ -7,6 +7,7 @@ export {}
 
 declare module 'vue' {
   export interface GlobalComponents {
+    AnimatedSubmissionBlock: typeof import('./components/board/AnimatedSubmissionBlock.vue')['default']
     AnimatedSubmissionsModal: typeof import('./components/board/AnimatedSubmissionsModal.vue')['default']
     Badge: typeof import('./components/board/Badge.vue')['default']
     Balloon: typeof import('./components/Balloon.vue')['default']

package/src/composables/color.ts

@@ -1,5 +1,5 @@
 import { MedalType } from "@xcpcio/core";
-import type { Team } from "@xcpcio/core";
+import type { Submission, Team } from "@xcpcio/core";
 
 export function getMedalColor(team: Team): { backgroundColor: string, color: string } | undefined {
   const color = {
@@ -29,3 +29,19 @@ export function getMedalColor(team: Team): { backgroundColor: string, color: str
 
   return undefined;
 }
+
+export function getStandingsStatusColor(submission: Submission) {
+  if (submission.isFirstSolved) {
+    return "#3db03d";
+  }
+
+  if (submission.isAccepted()) {
+    return "#e1ffb5";
+  }
+
+  if (submission.isPending()) {
+    return "#c8d6fa";
+  }
+
+  return "#ffd0d0";
+}

package/src/composables/type.ts

@@ -0,0 +1,13 @@
+import type { Problem, Submission, Team } from "@xcpcio/core";
+
+export interface AnimatedSubmissionBlockItem {
+  submission: Submission,
+  team: Team,
+  problem: Problem,
+  displayName: string,
+}
+
+export enum LastBlockDisplayType {
+  SUBMISSION_STATUS,
+  SUBMIT_TIMESTAMP,
+}

package/src/styles/color.css

@@ -23,6 +23,11 @@ html {
   --theme-status-unknown: #000;
   --theme-status-undefined: var(--theme-status-unknown);
 
+  --theme-standings-first-solve: #3db03d;
+  --theme-standings-correct: #e1ffb5;
+  --theme-standings-incorrect: #ffd0d0;
+  --theme-standings-pending: #c8d6fa;
+
   --theme-resolver-ac: #5eb95e;
   --theme-resolver-wa: #dd514c;
   --theme-resolver-pending: #607D8B;
@@ -56,4 +61,9 @@ html.dark {
   --theme-status-skipped: #78909C;
   --theme-status-unknown: #fff;
   --theme-status-undefined: var(--theme-status-unknown);
+
+  --theme-standings-first-solve: #3db03d;
+  --theme-standings-correct: #e1ffb5;
+  --theme-standings-incorrect: #ffd0d0;
+  --theme-standings-pending: #c8d6fa;
 }