@xcpcio/board-app 0.6.3 → 0.13.0

package/src/components/board/Progress.less

@@ -0,0 +1,442 @@
+/* ==========================================================================
+   Component: Progress
+ ============================================================================ */
+/* Progress bar animation */
+@-webkit-keyframes progress-bar-stripes {
+  from {
+    background-position: 36px 0;
+  }
+
+  to {
+    background-position: 0 0;
+  }
+}
+
+@keyframes progress-bar-stripes {
+  from {
+    background-position: 36px 0;
+  }
+
+  to {
+    background-position: 0 0;
+  }
+}
+
+/*  Progress container */
+.am-progress {
+  // overflow: hidden;
+  // margin-bottom: 2rem;
+  height: 1rem;
+  background-color: #f5f5f5;
+  border-radius: 0;
+  -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
+  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
+}
+
+/* Progress bar */
+.am-progress-bar {
+  float: left;
+  width: 0;
+  height: 100%;
+  font-size: 1.2rem;
+  line-height: 2rem;
+  color: #fff;
+  text-align: center;
+  background-color: #0e90d2;
+  -webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);
+  box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);
+  -webkit-transition: width 0.6s ease;
+  transition: width 0.6s ease;
+}
+
+.am-progress-striped .am-progress-bar {
+  background-image: -webkit-gradient(
+    linear,
+    0 100%,
+    100% 0,
+    color-stop(0.25, rgba(255, 255, 255, 0.15)),
+    color-stop(0.25, transparent),
+    color-stop(0.5, transparent),
+    color-stop(0.5, rgba(255, 255, 255, 0.15)),
+    color-stop(0.75, rgba(255, 255, 255, 0.15)),
+    color-stop(0.75, transparent),
+    to(transparent)
+  );
+  background-image: -webkit-linear-gradient(
+    45deg,
+    rgba(255, 255, 255, 0.15) 25%,
+    transparent 25%,
+    transparent 50%,
+    rgba(255, 255, 255, 0.15) 50%,
+    rgba(255, 255, 255, 0.15) 75%,
+    transparent 75%,
+    transparent
+  );
+  background-image: linear-gradient(
+    45deg,
+    rgba(255, 255, 255, 0.15) 25%,
+    transparent 25%,
+    transparent 50%,
+    rgba(255, 255, 255, 0.15) 50%,
+    rgba(255, 255, 255, 0.15) 75%,
+    transparent 75%,
+    transparent
+  );
+  -webkit-background-size: 36px 36px;
+  background-size: 36px 36px;
+}
+
+.am-progress.am-active .am-progress-bar {
+  -webkit-animation: progress-bar-stripes 2s linear infinite;
+  animation: progress-bar-stripes 2s linear infinite;
+}
+
+.am-progress-bar[aria-valuenow='1'],
+.am-progress-bar[aria-valuenow='2'] {
+  min-width: 30px;
+}
+
+.am-progress-bar[aria-valuenow='0'] {
+  color: #999999;
+  min-width: 30px;
+  background: none;
+  -webkit-box-shadow: none;
+  box-shadow: none;
+}
+
+.am-progress-bar-secondary {
+  background-color: #3bb4f2;
+}
+
+.am-progress-striped .am-progress-bar-secondary {
+  background-image: -webkit-gradient(
+    linear,
+    0 100%,
+    100% 0,
+    color-stop(0.25, rgba(255, 255, 255, 0.15)),
+    color-stop(0.25, transparent),
+    color-stop(0.5, transparent),
+    color-stop(0.5, rgba(255, 255, 255, 0.15)),
+    color-stop(0.75, rgba(255, 255, 255, 0.15)),
+    color-stop(0.75, transparent),
+    to(transparent)
+  );
+  background-image: -webkit-linear-gradient(
+    45deg,
+    rgba(255, 255, 255, 0.15) 25%,
+    transparent 25%,
+    transparent 50%,
+    rgba(255, 255, 255, 0.15) 50%,
+    rgba(255, 255, 255, 0.15) 75%,
+    transparent 75%,
+    transparent
+  );
+  background-image: linear-gradient(
+    45deg,
+    rgba(255, 255, 255, 0.15) 25%,
+    transparent 25%,
+    transparent 50%,
+    rgba(255, 255, 255, 0.15) 50%,
+    rgba(255, 255, 255, 0.15) 75%,
+    transparent 75%,
+    transparent
+  );
+}
+
+.am-progress-bar-success {
+  background-color: #5eb95e;
+}
+
+.am-progress-striped .am-progress-bar-success {
+  background-image: -webkit-gradient(
+    linear,
+    0 100%,
+    100% 0,
+    color-stop(0.25, rgba(255, 255, 255, 0.15)),
+    color-stop(0.25, transparent),
+    color-stop(0.5, transparent),
+    color-stop(0.5, rgba(255, 255, 255, 0.15)),
+    color-stop(0.75, rgba(255, 255, 255, 0.15)),
+    color-stop(0.75, transparent),
+    to(transparent)
+  );
+  background-image: -webkit-linear-gradient(
+    45deg,
+    rgba(255, 255, 255, 0.15) 25%,
+    transparent 25%,
+    transparent 50%,
+    rgba(255, 255, 255, 0.15) 50%,
+    rgba(255, 255, 255, 0.15) 75%,
+    transparent 75%,
+    transparent
+  );
+  background-image: linear-gradient(
+    45deg,
+    rgba(255, 255, 255, 0.15) 25%,
+    transparent 25%,
+    transparent 50%,
+    rgba(255, 255, 255, 0.15) 50%,
+    rgba(255, 255, 255, 0.15) 75%,
+    transparent 75%,
+    transparent
+  );
+}
+
+.am-progress-bar-warning {
+  background-color: #f37b1d;
+}
+
+.am-progress-striped .am-progress-bar-warning {
+  background-image: -webkit-gradient(
+    linear,
+    0 100%,
+    100% 0,
+    color-stop(0.25, rgba(255, 255, 255, 0.15)),
+    color-stop(0.25, transparent),
+    color-stop(0.5, transparent),
+    color-stop(0.5, rgba(255, 255, 255, 0.15)),
+    color-stop(0.75, rgba(255, 255, 255, 0.15)),
+    color-stop(0.75, transparent),
+    to(transparent)
+  );
+  background-image: -webkit-linear-gradient(
+    45deg,
+    rgba(255, 255, 255, 0.15) 25%,
+    transparent 25%,
+    transparent 50%,
+    rgba(255, 255, 255, 0.15) 50%,
+    rgba(255, 255, 255, 0.15) 75%,
+    transparent 75%,
+    transparent
+  );
+  background-image: linear-gradient(
+    45deg,
+    rgba(255, 255, 255, 0.15) 25%,
+    transparent 25%,
+    transparent 50%,
+    rgba(255, 255, 255, 0.15) 50%,
+    rgba(255, 255, 255, 0.15) 75%,
+    transparent 75%,
+    transparent
+  );
+}
+
+.am-progress-bar-danger {
+  background-color: #dd514c;
+}
+
+.am-progress-striped .am-progress-bar-danger {
+  background-image: -webkit-gradient(
+    linear,
+    0 100%,
+    100% 0,
+    color-stop(0.25, rgba(255, 255, 255, 0.15)),
+    color-stop(0.25, transparent),
+    color-stop(0.5, transparent),
+    color-stop(0.5, rgba(255, 255, 255, 0.15)),
+    color-stop(0.75, rgba(255, 255, 255, 0.15)),
+    color-stop(0.75, transparent),
+    to(transparent)
+  );
+  background-image: -webkit-linear-gradient(
+    45deg,
+    rgba(255, 255, 255, 0.15) 25%,
+    transparent 25%,
+    transparent 50%,
+    rgba(255, 255, 255, 0.15) 50%,
+    rgba(255, 255, 255, 0.15) 75%,
+    transparent 75%,
+    transparent
+  );
+  background-image: linear-gradient(
+    45deg,
+    rgba(255, 255, 255, 0.15) 25%,
+    transparent 25%,
+    transparent 50%,
+    rgba(255, 255, 255, 0.15) 50%,
+    rgba(255, 255, 255, 0.15) 75%,
+    transparent 75%,
+    transparent
+  );
+}
+
+.am-progress-xs {
+  height: 0.6rem;
+}
+
+.am-progress-sm {
+  height: 1.2rem;
+}
+
+.am-progress-cursor {
+  position: absolute;
+  left: 50%;
+  bottom: -4px;
+  cursor: pointer;
+}
+
+/* ==========================================================================
+   Component: Label
+ ============================================================================ */
+.label {
+  box-sizing: inherit;
+  display: inline-block;
+  background-image: none;
+  text-transform: none;
+  font-weight: bold;
+  border: 0 solid transparent;
+  transition: background 0.1s ease;
+  margin-right: 5px;
+  padding: 0.4em !important;
+  line-height: 1em;
+  text-align: center;
+  border-radius: 500rem;
+  font-size: 0.78571429rem;
+  min-width: 0;
+  min-height: 0;
+  overflow: hidden;
+  width: 1px;
+  height: 1px;
+  vertical-align: baseline;
+  color: #ffffff;
+}
+
+/* ==========================================================================
+   State Color
+ ============================================================================ */
+.PENDING {
+  background-color: #3bb4f2;
+  border-color: #3bb4f2;
+}
+
+.RUNNING {
+  background-color: rgb(94, 185, 94);
+  border-color: rgb(94, 185, 94);
+}
+
+.FROZEN {
+  background-color: #dd514c;
+  border-color: #dd514c;
+}
+
+.FINISHED {
+  background-color: #0e90d2;
+  border-color: #0e90d2;
+}
+
+.PAUSED {
+  background-color: #3bb4f2;
+  border-color: #3bb4f2;
+}
+
+/* ==========================================================================
+   Component: Tooltip
+ ============================================================================ */
+.tooltip {
+  position: absolute;
+  z-index: 1070;
+  display: block;
+  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto,
+    Helvetica Neue, Arial, sans-serif;
+  font-style: normal;
+  font-weight: 400;
+  letter-spacing: normal;
+  line-break: auto;
+  line-height: 1.5;
+  text-align: left;
+  text-align: start;
+  text-decoration: none;
+  text-shadow: none;
+  text-transform: none;
+  white-space: normal;
+  word-break: normal;
+  word-spacing: normal;
+  font-size: 0.875rem;
+  word-wrap: break-word;
+  opacity: 0;
+}
+
+.tooltip.in {
+  opacity: 0.9;
+}
+
+.tooltip.bs-tether-element-attached-bottom,
+.tooltip.tooltip-top {
+  padding: 5px 0;
+  margin-top: -3px;
+}
+
+.tooltip.bs-tether-element-attached-bottom .tooltip-inner:before,
+.tooltip.tooltip-top .tooltip-inner:before {
+  bottom: 0;
+  left: 50%;
+  margin-left: -5px;
+  content: '';
+  border-width: 5px 5px 0;
+  border-top-color: #000;
+}
+
+.tooltip.bs-tether-element-attached-left,
+.tooltip.tooltip-right {
+  padding: 0 5px;
+  margin-left: 3px;
+}
+
+.tooltip.bs-tether-element-attached-left .tooltip-inner:before,
+.tooltip.tooltip-right .tooltip-inner:before {
+  top: 50%;
+  left: 0;
+  margin-top: -5px;
+  content: '';
+  border-width: 5px 5px 5px 0;
+  border-right-color: #000;
+}
+
+.tooltip.bs-tether-element-attached-top,
+.tooltip.tooltip-bottom {
+  padding: 5px 0;
+  margin-top: 3px;
+}
+
+.tooltip.bs-tether-element-attached-top .tooltip-inner:before,
+.tooltip.tooltip-bottom .tooltip-inner:before {
+  top: 0;
+  left: 50%;
+  margin-left: -5px;
+  content: '';
+  border-width: 0 5px 5px;
+  border-bottom-color: #000;
+}
+
+.tooltip.bs-tether-element-attached-right,
+.tooltip.tooltip-left {
+  padding: 0 5px;
+  margin-left: -3px;
+}
+
+.tooltip.bs-tether-element-attached-right .tooltip-inner:before,
+.tooltip.tooltip-left .tooltip-inner:before {
+  top: 50%;
+  right: 0;
+  margin-top: -5px;
+  content: '';
+  border-width: 5px 0 5px 5px;
+  border-left-color: #000;
+}
+
+.tooltip-inner {
+  max-width: 200px;
+  padding: 3px 8px;
+  color: #fff;
+  text-align: center;
+  background-color: #000;
+  border-radius: 0.25rem;
+}
+
+.tooltip-inner:before {
+  position: absolute;
+  width: 0;
+  height: 0;
+  border-color: transparent;
+  border-style: solid;
+}

package/src/components/board/Progress.vue

@@ -0,0 +1,229 @@
+<script setup lang="ts">
+import { ContestState } from "@xcpcio/types";
+import { useRouteQuery } from "@vueuse/router";
+import type { Rank, RankOptions } from "@xcpcio/core";
+import { createDayJS, getTimeDiff } from "@xcpcio/core";
+
+const props = defineProps<{
+  width: number,
+  state: ContestState,
+  needScroll?: boolean,
+  rank?: Rank,
+  rankOptions?: RankOptions,
+  elapsedTime?: string,
+}>();
+const emit = defineEmits(["update:rank-options"]);
+
+const rankOptions = computed({
+  get() {
+    return props!.rankOptions;
+  },
+  set(value) {
+    emit("update:rank-options", value);
+  },
+});
+
+const barClass = computed(() => {
+  switch (props.state) {
+    case ContestState.PENDING:
+      return "am-progress-bar-secondary";
+    case ContestState.RUNNING:
+      return "am-progress-bar-success";
+    case ContestState.FROZEN:
+      return "am-progress-bar-danger";
+    case ContestState.FINISHED:
+      return "am-progress-bar-primary";
+  }
+});
+
+const pauseUpdate = ref(false);
+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 scroll = ref<HTMLElement>(null as unknown as HTMLElement);
+const mask = ref<HTMLElement>(null as unknown as HTMLElement);
+const bar = ref<HTMLElement>(null as unknown as HTMLElement);
+const tooltip = ref<HTMLElement>(null as unknown as HTMLElement);
+const tooltipInner = ref<HTMLElement>(null as unknown as HTMLElement);
+
+function startDrag(event: MouseEvent) {
+  isDragging.value = true;
+  const leftVal = event.clientX - bar.value.offsetLeft;
+
+  const updateProgress = (event: MouseEvent) => {
+    if (!isDragging.value) {
+      return;
+    }
+
+    pauseUpdate.value = true;
+
+    let barLeft = event.clientX - leftVal;
+    barLeft = Math.max(barLeft, 0);
+    barLeft = Math.min(barLeft, scroll.value.offsetWidth - bar.value.offsetWidth);
+
+    const maskWidth
+            = scroll.value.offsetWidth * Number.parseInt(mask.value.style?.width) * 0.01;
+
+    // When dragging beyond the current time bar,
+    // then automatic updating resumes
+    if (barLeft >= maskWidth) {
+      barLeft = maskWidth;
+      pauseUpdate.value = false;
+    }
+
+    let width = 0;
+    if (barLeft > 0) {
+      width = Math.round((barLeft + bar.value.offsetWidth) / (scroll.value.offsetWidth) * 10000);
+    }
+
+    if (width > 10000) {
+      width = 10000;
+    }
+
+    if (width === 10000) {
+      pauseUpdate.value = false;
+    }
+
+    window.getSelection()?.removeAllRanges();
+
+    dragWidth.value = width;
+
+    barWidthPX.value = barLeft;
+    barWidth.value = width * 0.01;
+  };
+
+  const stopDrag = () => {
+    document.removeEventListener("mouseup", stopDrag);
+    document.removeEventListener("mousemove", updateProgress);
+
+    isDragging.value = false;
+
+    if (pauseUpdate.value === true) {
+      progressRatio.value = dragWidth.value;
+      rankOptions.value?.setWidth(dragWidth.value, props.rank!.contest);
+    } else {
+      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+      // @ts-expect-error
+      progressRatio.value = undefined;
+      rankOptions.value?.disableFilterSubmissionByTimestamp();
+    }
+  };
+
+  document.addEventListener("mousemove", updateProgress);
+  document.addEventListener("mouseup", stopDrag);
+}
+
+function getTimeScroll() {
+  const startTime = props.rank!.contest.startTime;
+  const endTime = props.rank!.contest.endTime;
+
+  const gap = endTime.unix() - startTime.unix();
+  const target = Math.floor(gap * barWidth.value * 0.01);
+
+  const now = createDayJS();
+  const limit = Math.max(0, Math.min(now.unix(), endTime.unix()) - startTime.unix());
+
+  return getTimeDiff(Math.min(target, limit));
+}
+
+function elapsedTime() {
+  if (pauseUpdate.value === true) {
+    return getTimeScroll();
+  }
+
+  return props.elapsedTime;
+}
+
+function barWidthInStyle() {
+  if (pauseUpdate.value === true) {
+    return `${Math.max(0, barWidthPX.value)}px`;
+  }
+
+  return `max(calc(0%), min(calc(${props.width}%), calc(100% - 10px)))`;
+}
+
+onMounted(() => {
+  scroll.value.onmouseenter = () => {
+    tooltip.value.classList.add("in");
+  };
+
+  scroll.value.onmouseleave = () => {
+    tooltip.value.classList.remove("in");
+  };
+
+  if (progressRatio.value !== -1) {
+    pauseUpdate.value = true;
+    dragWidth.value = Math.max(0, Math.min(10000, progressRatio.value));
+
+    barWidth.value = dragWidth.value * 0.01;
+    barWidthPX.value = barWidth.value * 0.01 * scroll.value.offsetWidth - bar.value.offsetWidth;
+
+    rankOptions.value?.setWidth(progressRatio.value, props.rank!.contest);
+  } else {
+    rankOptions.value?.disableFilterSubmissionByTimestamp();
+  }
+});
+
+onUnmounted(() => {});
+</script>
+
+<template>
+  <div
+    ref="scroll"
+    class="am-progress am-progress-striped am-active"
+    w-full
+    :style="{
+      position: 'relative',
+    }"
+  >
+    <div
+      ref="mask"
+      class="am-progress-bar"
+      :class="[barClass]"
+      :style="{
+        width: `${props.width}%`,
+      }"
+    >
+      <template v-if="props.needScroll">
+        <div
+          ref="tooltip"
+          class="tooltip tooltip-top"
+          :style="{
+            marginLeft: '-32px',
+            bottom: '22px',
+            left: barWidthInStyle(),
+          }"
+        >
+          <div
+            ref="tooltipInner"
+            class="tooltip-inner"
+          >
+            {{ elapsedTime() }}
+          </div>
+        </div>
+
+        <div
+          ref="bar"
+          class="am-progress-bar am-progress-cursor am-progress-scroll-size z-999"
+          :class="[barClass]"
+          :style="{
+            left: barWidthInStyle(),
+          }"
+          @mousedown="startDrag"
+        />
+      </template>
+    </div>
+  </div>
+</template>
+
+<style scoped lang="less">
+@import "./Progress.less";
+
+.am-progress-scroll-size {
+  width: 10px;
+  height: 25px;
+}
+</style>