@algoux/standard-ranklist-renderer-component-react 0.5.0

package/dist/index.js

@@ -0,0 +1,1014 @@
+var __defProp = Object.defineProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField = (obj, key, value) => {
+  __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+  return value;
+};
+import "@algoux/standard-ranklist-renderer-component-styles";
+import classnames from "classnames";
+import React from "react";
+import { numberToAlphabet, resolveText, resolveUserMarkers, EnumTheme, resolveStyle, formatTimeDuration, secToTimeStr } from "@algoux/standard-ranklist-utils";
+export { convertToStaticRanklist } from "@algoux/standard-ranklist-utils";
+import { getProblemHeaderBackgroundImage, getAcceptedStatusDetails, captureModalTriggerPointFromMouseEvent, getMarkerPresentation, resolveSrkAssetUrl, caniuse, srkSupportedVersions, shouldShowTimeColumn, getProgressDurationMinutes, getProgressMaxAvailableMinutes, isProgressEnded, getProgressMetrics, ensureModalInteractionTracker, unregisterModalFocusScope, MODAL_ANIMATION_DURATION_MS, resolveModalTransformOrigin, lockModalBodyScroll, unlockModalBodyScroll, registerModalFocusScope, SRK_ANIMATED_MODAL_ROOT_CLASS, getSolutionResultMeta, formatSolutionTimestamp, getSolutionModalTitle } from "@algoux/standard-ranklist-renderer-component-core";
+export { caniuse, srkSupportedVersions } from "@algoux/standard-ranklist-renderer-component-core";
+import ReactDOM from "react-dom";
+var jsxRuntime = { exports: {} };
+var reactJsxRuntime_production_min = {};
+/** @license React v16.14.0
+ * react-jsx-runtime.production.min.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+var f = React, g = 60103;
+reactJsxRuntime_production_min.Fragment = 60107;
+if ("function" === typeof Symbol && Symbol.for) {
+  var h = Symbol.for;
+  g = h("react.element");
+  reactJsxRuntime_production_min.Fragment = h("react.fragment");
+}
+var m = f.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner, n = Object.prototype.hasOwnProperty, p = { key: true, ref: true, __self: true, __source: true };
+function q(c, a, k) {
+  var b, d = {}, e = null, l = null;
+  void 0 !== k && (e = "" + k);
+  void 0 !== a.key && (e = "" + a.key);
+  void 0 !== a.ref && (l = a.ref);
+  for (b in a)
+    n.call(a, b) && !p.hasOwnProperty(b) && (d[b] = a[b]);
+  if (c && c.defaultProps)
+    for (b in a = c.defaultProps, a)
+      void 0 === d[b] && (d[b] = a[b]);
+  return { $$typeof: g, type: c, key: e, ref: l, props: d, _owner: m.current };
+}
+reactJsxRuntime_production_min.jsx = q;
+reactJsxRuntime_production_min.jsxs = q;
+{
+  jsxRuntime.exports = reactJsxRuntime_production_min;
+}
+const jsx = jsxRuntime.exports.jsx;
+const jsxs = jsxRuntime.exports.jsxs;
+const Fragment = jsxRuntime.exports.Fragment;
+function ProblemHeaderCell({
+  problem,
+  index,
+  theme
+}) {
+  const alias = problem.alias ? problem.alias : numberToAlphabet(index);
+  const stat = problem.statistics;
+  const statDesc = stat ? `${stat.accepted} / ${stat.submitted} (${stat.submitted ? (stat.accepted / stat.submitted * 100).toFixed(1) : 0}%)` : "";
+  const innerComp = /* @__PURE__ */ jsxs(Fragment, {
+    children: [/* @__PURE__ */ jsx("span", {
+      className: "srk--display-block",
+      children: alias
+    }), stat ? /* @__PURE__ */ jsx("span", {
+      title: statDesc,
+      className: "srk--display-block srk-problem-stats",
+      children: stat.accepted
+    }) : null]
+  });
+  const cellComp = problem.link ? /* @__PURE__ */ jsx("a", {
+    href: problem.link,
+    target: "_blank",
+    rel: "noopener noreferrer",
+    style: {
+      color: "unset"
+    },
+    children: innerComp
+  }) : innerComp;
+  return /* @__PURE__ */ jsx("th", {
+    className: "srk--nowrap srk-problem-header",
+    style: {
+      backgroundImage: getProblemHeaderBackgroundImage(problem.style, theme)
+    },
+    children: cellComp
+  }, problem.alias || resolveText(problem.title));
+}
+function StatusCell({
+  status,
+  problem,
+  problemIndex,
+  user,
+  row,
+  rowIndex,
+  ranklist,
+  onSolutionClick
+}) {
+  const problemKey = (problem == null ? void 0 : problem.alias) || resolveText(problem == null ? void 0 : problem.title) || problemIndex;
+  const problemTitle = resolveText(problem == null ? void 0 : problem.title) || null;
+  const solutions = [...status.solutions || []].reverse();
+  const hasSolutions = solutions.length > 0;
+  const isClickable = hasSolutions && !!onSolutionClick;
+  const commonClassName = classnames("srk-prest-status-block srk--text-center srk--nowrap", {
+    "srk--cursor-pointer": isClickable
+  });
+  const onClick = isClickable ? (event) => {
+    event.preventDefault();
+    captureModalTriggerPointFromMouseEvent(event.nativeEvent, {
+      source: "status-cell",
+      context: {
+        rowIndex,
+        problemIndex,
+        problemAlias: (problem == null ? void 0 : problem.alias) || null,
+        problemTitle,
+        userId: user.id || null
+      }
+    });
+    onSolutionClick == null ? void 0 : onSolutionClick({
+      user,
+      row,
+      rowIndex,
+      problemIndex,
+      problem,
+      status,
+      solutions,
+      ranklist
+    });
+  } : void 0;
+  if (status.result === "FB") {
+    return /* @__PURE__ */ jsx("td", {
+      onClick,
+      className: classnames(commonClassName, "srk-prest-status-block-fb"),
+      children: renderAcceptedStatusBody(status)
+    }, problemKey);
+  }
+  if (status.result === "AC") {
+    return /* @__PURE__ */ jsx("td", {
+      onClick,
+      className: classnames(commonClassName, "srk-prest-status-block-accepted"),
+      children: renderAcceptedStatusBody(status)
+    }, problemKey);
+  }
+  if (status.result === "?") {
+    return /* @__PURE__ */ jsx("td", {
+      onClick,
+      className: classnames(commonClassName, "srk-prest-status-block-frozen"),
+      children: status.tries
+    }, problemKey);
+  }
+  if (status.result === "RJ") {
+    return /* @__PURE__ */ jsx("td", {
+      onClick,
+      className: classnames(commonClassName, "srk-prest-status-block-failed"),
+      children: status.tries
+    }, problemKey);
+  }
+  return /* @__PURE__ */ jsx("td", {}, problemKey);
+}
+function renderAcceptedStatusBody(status) {
+  const details = getAcceptedStatusDetails(status);
+  if (typeof status.score === "number") {
+    return /* @__PURE__ */ jsxs(Fragment, {
+      children: [/* @__PURE__ */ jsx("span", {
+        className: "srk-prest-status-block-score",
+        children: status.score
+      }), /* @__PURE__ */ jsx("span", {
+        className: "srk-prest-status-block-score-details",
+        children: details
+      })]
+    });
+  }
+  return /* @__PURE__ */ jsx(Fragment, {
+    children: details
+  });
+}
+function UserCell({
+  user,
+  row,
+  rowIndex,
+  ranklist,
+  markers = [],
+  theme,
+  formatSrkAssetUrl,
+  onUserClick
+}) {
+  const userMarkers = resolveUserMarkers(user, markers);
+  const markerCalcStyles = userMarkers.map((marker) => getMarkerPresentation(marker, theme));
+  const name = resolveText(user.name);
+  return /* @__PURE__ */ jsx("td", {
+    className: classnames("srk--text-left srk--nowrap srk-user-cell", {
+      "srk--cursor-pointer": !!onUserClick
+    }),
+    title: "",
+    onClick: (event) => {
+      event.preventDefault();
+      captureModalTriggerPointFromMouseEvent(event.nativeEvent, {
+        source: "user-cell",
+        context: {
+          rowIndex,
+          userId: user.id || null,
+          userName: name
+        }
+      });
+      onUserClick == null ? void 0 : onUserClick({
+        user,
+        row,
+        rowIndex,
+        ranklist
+      });
+    },
+    children: /* @__PURE__ */ jsxs("div", {
+      className: "srk-user-cell-content",
+      children: [user.avatar && /* @__PURE__ */ jsx("div", {
+        className: "srk-user-avatar",
+        children: /* @__PURE__ */ jsx("img", {
+          src: formatSrkAssetUrl(user.avatar, "user.avatar"),
+          alt: "User Avatar"
+        })
+      }), /* @__PURE__ */ jsxs("div", {
+        className: "srk-user-body",
+        children: [/* @__PURE__ */ jsxs("div", {
+          className: "srk-user-name-row",
+          children: [/* @__PURE__ */ jsx("span", {
+            className: "srk-user-name-text",
+            title: name,
+            children: name
+          }), /* @__PURE__ */ jsx("span", {
+            className: "srk-marker-dot-group",
+            children: markerCalcStyles.map((markerStyle, index) => /* @__PURE__ */ jsx("span", {
+              className: classnames("srk-marker srk-marker-dot srk--c-tooltip", markerStyle.className),
+              style: markerStyle.style,
+              "data-tooltip": resolveText(userMarkers[index].label)
+            }, userMarkers[index].id))
+          })]
+        }), !!user.organization && /* @__PURE__ */ jsx("p", {
+          className: "srk-user-secondary-text srk--text-ellipsis",
+          title: "",
+          children: resolveText(user.organization)
+        })]
+      })]
+    })
+  });
+}
+class Ranklist extends React.Component {
+  constructor(props) {
+    super(props);
+    __publicField(this, "formatSrkAssetUrl", (url, field) => {
+      return resolveSrkAssetUrl(url, field, this.props.formatSrkAssetUrl);
+    });
+    __publicField(this, "renderContestBanner", () => {
+      const banner = this.props.data.contest.banner;
+      if (!banner) {
+        return null;
+      }
+      let imgSrc = "";
+      let link = "";
+      if (typeof banner === "string") {
+        imgSrc = banner;
+      } else {
+        imgSrc = banner.image;
+        link = banner.link;
+      }
+      const imgComp = /* @__PURE__ */ jsx("img", {
+        src: this.formatSrkAssetUrl(imgSrc, "contest.banner"),
+        alt: "Contest Banner",
+        className: "srk--full-width"
+      });
+      if (link) {
+        return this.genExternalLink(link, imgComp);
+      } else {
+        return imgComp;
+      }
+    });
+    __publicField(this, "renderSingleSeriesBody", (rk, series, row) => {
+      const theme = this.props.theme;
+      const innerComp = rk.rank ? rk.rank : row.user.official === false ? "\uFF0A" : "";
+      const segment = (series.segments || [])[rk.segmentIndex || rk.segmentIndex === 0 ? rk.segmentIndex : -1] || {};
+      const segmentStyle = segment.style;
+      let className = "";
+      let textColor = {
+        [EnumTheme.light]: void 0,
+        [EnumTheme.dark]: void 0
+      };
+      let backgroundColor = {
+        [EnumTheme.light]: void 0,
+        [EnumTheme.dark]: void 0
+      };
+      if (typeof segmentStyle === "string") {
+        className = `srk-preset-series-segment-${segmentStyle}`;
+      } else if (segmentStyle) {
+        const style = resolveStyle(segmentStyle);
+        textColor = style.textColor;
+        backgroundColor = style.backgroundColor;
+      }
+      return /* @__PURE__ */ jsx("td", {
+        className: classnames("srk--text-right srk--nowrap", className),
+        style: {
+          color: textColor[theme],
+          backgroundColor: backgroundColor[theme]
+        },
+        children: innerComp
+      }, series.title);
+    });
+    this.state = {
+      marker: "all",
+      error: null
+    };
+  }
+  genExternalLink(link, children) {
+    return /* @__PURE__ */ jsx("a", {
+      href: link,
+      target: "_blank",
+      rel: "noopener noreferrer",
+      style: {
+        color: "unset"
+      },
+      children
+    });
+  }
+  render() {
+    var _a, _b, _c;
+    const {
+      error
+    } = this.state;
+    if (error) {
+      return /* @__PURE__ */ jsx("div", {
+        children: /* @__PURE__ */ jsxs("div", {
+          className: "srk-error",
+          children: [/* @__PURE__ */ jsxs("pre", {
+            children: ["Error: ", error]
+          }), /* @__PURE__ */ jsx("p", {
+            children: "Please wait for data correction or refresh page"
+          })]
+        })
+      });
+    }
+    const {
+      data,
+      borderedRows,
+      stripedRows
+    } = this.props;
+    const {
+      type,
+      version,
+      problems,
+      series,
+      rows
+    } = data;
+    const ProblemHeaderCellComponent = ((_a = this.props.components) == null ? void 0 : _a.problemHeaderCell) || ProblemHeaderCell;
+    const UserCellComponent = ((_b = this.props.components) == null ? void 0 : _b.userCell) || UserCell;
+    const StatusCellComponent = ((_c = this.props.components) == null ? void 0 : _c.statusCell) || StatusCell;
+    if (type !== "general") {
+      return /* @__PURE__ */ jsxs("div", {
+        children: ['srk type "', type, '" is not supported']
+      });
+    }
+    if (!caniuse(version)) {
+      return /* @__PURE__ */ jsxs("div", {
+        children: ['srk version "', version, '" is not supported (current supported: ', srkSupportedVersions, ")"]
+      });
+    }
+    const showTimeColumn = shouldShowTimeColumn(rows);
+    return /* @__PURE__ */ jsx(Fragment, {
+      children: /* @__PURE__ */ jsx("div", {
+        className: "srk-common-table srk-main",
+        children: /* @__PURE__ */ jsxs("table", {
+          className: classnames({
+            "srk-table-row-bordered": borderedRows,
+            "srk-table-row-striped": stripedRows
+          }),
+          children: [/* @__PURE__ */ jsx("thead", {
+            children: /* @__PURE__ */ jsxs("tr", {
+              children: [series.map((s) => /* @__PURE__ */ jsx("th", {
+                className: "srk-series-header srk--text-right srk--nowrap",
+                children: s.title
+              }, s.title)), /* @__PURE__ */ jsx("th", {
+                className: "srk--text-left srk--nowrap",
+                children: "Name"
+              }), /* @__PURE__ */ jsx("th", {
+                className: "srk--nowrap",
+                children: "Score"
+              }), showTimeColumn && /* @__PURE__ */ jsx("th", {
+                className: "srk--nowrap",
+                children: "Time"
+              }), problems.map((problem, index) => /* @__PURE__ */ jsx(ProblemHeaderCellComponent, {
+                problem,
+                index,
+                theme: this.props.theme
+              }, problem.alias || resolveText(problem.title)))]
+            })
+          }), /* @__PURE__ */ jsx("tbody", {
+            children: rows.map((r, index) => {
+              if (!r.rankValues) {
+                console.warn("Rank values is not provided, you may need to pass static ranklist data generated by `convertToStaticRanklist()`");
+              }
+              const rankValues = r.rankValues || series.map((s) => ({
+                rank: null,
+                segmentIndex: null
+              }));
+              return /* @__PURE__ */ jsxs("tr", {
+                children: [rankValues.map((rk, index2) => this.renderSingleSeriesBody(rk, series[index2], r)), /* @__PURE__ */ jsx(UserCellComponent, {
+                  user: r.user,
+                  row: r,
+                  rowIndex: index,
+                  ranklist: data,
+                  markers: data.markers,
+                  theme: this.props.theme,
+                  formatSrkAssetUrl: this.formatSrkAssetUrl,
+                  onUserClick: this.props.onUserClick
+                }), /* @__PURE__ */ jsx("td", {
+                  className: "srk--text-right srk--nowrap",
+                  children: r.score.value
+                }), showTimeColumn && /* @__PURE__ */ jsx("td", {
+                  className: "srk--text-right srk--nowrap",
+                  children: r.score.time ? formatTimeDuration(r.score.time, "min", Math.floor) : "-"
+                }), r.statuses.map((status, statusIndex) => /* @__PURE__ */ jsx(StatusCellComponent, {
+                  status,
+                  problem: problems[statusIndex],
+                  problemIndex: statusIndex,
+                  user: r.user,
+                  row: r,
+                  rowIndex: index,
+                  ranklist: data,
+                  onSolutionClick: this.props.onSolutionClick
+                }, (problems[statusIndex] || {}).alias || resolveText((problems[statusIndex] || {}).title) || statusIndex))]
+              }, r.user.id || resolveText(r.user.name));
+            })
+          })]
+        })
+      })
+    });
+  }
+}
+__publicField(Ranklist, "defaultProps", {
+  theme: EnumTheme.light,
+  borderedRows: false,
+  stripedRows: false
+});
+class ProgressBar extends React.Component {
+  constructor(props) {
+    super(props);
+    __publicField(this, "liveInterval");
+    __publicField(this, "handleProgressTimer", () => {
+      const now = Date.now();
+      this.setState({
+        localTime: now
+      });
+      if (this.isEnded) {
+        window.clearInterval(this.liveInterval);
+      }
+    });
+    __publicField(this, "handleTimeTravelChange", (value) => {
+      var _a, _b;
+      let exited = value >= this.durationMinutes || value >= this.maxAvailableMinutes;
+      (_b = (_a = this.props).onTimeTravel) == null ? void 0 : _b.call(_a, exited ? null : value * 60 * 1e3);
+      this.setState({
+        inTimeMachine: !exited,
+        timeTravelValue: exited ? null : value * 60 * 1e3,
+        timeTravelIsChanging: false
+      });
+    });
+    __publicField(this, "beginTimeTravel", () => {
+      this.setState({
+        timeTravelIsChanging: true,
+        inTimeMachine: true
+      });
+    });
+    __publicField(this, "handleSliderChange", (event) => {
+      this.setState({
+        timeTravelCurrentValue: Number(event.target.value)
+      });
+    });
+    __publicField(this, "commitTimeTravel", () => {
+      this.handleTimeTravelChange(this.state.timeTravelCurrentValue);
+    });
+    __publicField(this, "handleSliderKeyDown", (event) => {
+      if (["ArrowLeft", "ArrowRight", "ArrowUp", "ArrowDown", "Home", "End", "PageUp", "PageDown"].includes(event.key)) {
+        this.beginTimeTravel();
+      }
+    });
+    __publicField(this, "handleSliderKeyUp", (event) => {
+      if (["ArrowLeft", "ArrowRight", "ArrowUp", "ArrowDown", "Home", "End", "PageUp", "PageDown"].includes(event.key)) {
+        this.commitTimeTravel();
+      }
+    });
+    const localTime = Date.now();
+    this.state = {
+      localTime,
+      inTimeMachine: false,
+      timeTravelIsChanging: false,
+      timeTravelCurrentValue: ProgressBar.getMaxAvailableMinutes(props.data.contest, localTime, props.td),
+      timeTravelValue: null,
+      isMounted: false
+    };
+  }
+  static getDurationMinutes(contest) {
+    return getProgressDurationMinutes(contest);
+  }
+  static getMaxAvailableMinutes(contest, localTime, td) {
+    return getProgressMaxAvailableMinutes(contest, localTime, td);
+  }
+  get durationMinutes() {
+    return ProgressBar.getDurationMinutes(this.props.data.contest);
+  }
+  get maxAvailableMinutes() {
+    return ProgressBar.getMaxAvailableMinutes(this.props.data.contest, this.state.localTime, this.props.td);
+  }
+  get isEnded() {
+    return isProgressEnded(this.props.data.contest, this.state.localTime, this.props.td);
+  }
+  componentDidMount() {
+    if (this.props.live) {
+      this.liveInterval = window.setInterval(() => {
+        this.handleProgressTimer();
+      }, 1e3);
+    }
+    this.setState({
+      isMounted: true
+    });
+  }
+  componentDidUpdate(prevProps) {
+    var _a, _b, _c, _d, _e, _f;
+    if (!this.props.live && prevProps.live) {
+      if (this.liveInterval) {
+        window.clearInterval(this.liveInterval);
+      }
+    }
+    if (this.props.live && !prevProps.live) {
+      this.liveInterval = window.setInterval(() => {
+        this.handleProgressTimer();
+      }, 1e3);
+    }
+    if (!this.state.timeTravelIsChanging && this.state.timeTravelCurrentValue !== this.maxAvailableMinutes && this.state.timeTravelValue === null) {
+      this.setState({
+        timeTravelCurrentValue: this.maxAvailableMinutes
+      });
+    }
+    if (JSON.stringify((_b = (_a = this.props.data) == null ? void 0 : _a.contest) == null ? void 0 : _b.title) !== JSON.stringify((_d = (_c = prevProps.data) == null ? void 0 : _c.contest) == null ? void 0 : _d.title)) {
+      this.setState({
+        timeTravelIsChanging: false,
+        timeTravelCurrentValue: this.maxAvailableMinutes,
+        timeTravelValue: null,
+        inTimeMachine: false
+      });
+      (_f = (_e = this.props).onTimeTravel) == null ? void 0 : _f.call(_e, null);
+    }
+  }
+  componentWillUnmount() {
+    if (this.liveInterval) {
+      window.clearInterval(this.liveInterval);
+    }
+  }
+  render() {
+    const {
+      data,
+      enableTimeTravel = false,
+      live = false,
+      td = 0
+    } = this.props;
+    const inTimeMachine = this.state.inTimeMachine;
+    const progressMetrics = getProgressMetrics(data, this.state.localTime, td, this.state.timeTravelCurrentValue, inTimeMachine);
+    return /* @__PURE__ */ jsxs("div", {
+      className: "srk-progress-bar-container",
+      children: [/* @__PURE__ */ jsxs("div", {
+        className: "srk-progress-bar",
+        children: [/* @__PURE__ */ jsxs("div", {
+          className: "srk-progress-bar-body",
+          children: [/* @__PURE__ */ jsx("div", {
+            className: "srk-progress-bar-segment srk-progress-bar-normal",
+            style: {
+              width: `${progressMetrics.frozenBreakpoint * 100}%`
+            },
+            children: /* @__PURE__ */ jsx("div", {
+              className: "srk-progress-bar-fill",
+              style: {
+                width: `${progressMetrics.normalInnerPercent}%`
+              }
+            })
+          }), /* @__PURE__ */ jsx("div", {
+            className: "srk-progress-bar-segment srk-progress-bar-frozen",
+            style: {
+              width: `${(1 - progressMetrics.frozenBreakpoint) * 100}%`
+            },
+            children: /* @__PURE__ */ jsx("div", {
+              className: "srk-progress-bar-fill",
+              style: {
+                width: `${progressMetrics.frozenInnerPercent}%`
+              }
+            })
+          })]
+        }), enableTimeTravel && progressMetrics.supportRegen && this.state.isMounted && /* @__PURE__ */ jsxs("div", {
+          className: "srk-progress-slider-layer",
+          children: [this.state.timeTravelIsChanging && /* @__PURE__ */ jsx("div", {
+            className: "srk-progress-slider-tooltip",
+            style: {
+              left: `${this.durationMinutes ? this.state.timeTravelCurrentValue / this.durationMinutes * 100 : 0}%`
+            },
+            children: secToTimeStr(this.state.timeTravelCurrentValue * 60)
+          }), /* @__PURE__ */ jsx("input", {
+            "aria-label": "Time Travel",
+            className: "srk-progress-slider",
+            max: this.durationMinutes,
+            min: 0,
+            onBlur: () => {
+              if (this.state.timeTravelIsChanging) {
+                this.commitTimeTravel();
+              }
+            },
+            onChange: this.handleSliderChange,
+            onKeyDown: this.handleSliderKeyDown,
+            onKeyUp: this.handleSliderKeyUp,
+            onMouseDown: this.beginTimeTravel,
+            onMouseUp: this.commitTimeTravel,
+            onTouchEnd: this.commitTimeTravel,
+            onTouchStart: this.beginTimeTravel,
+            step: 1,
+            title: secToTimeStr(this.state.timeTravelCurrentValue * 60),
+            type: "range",
+            value: this.state.timeTravelCurrentValue
+          })]
+        })]
+      }), /* @__PURE__ */ jsxs("div", {
+        className: "srk-progress-secondary-area",
+        children: [/* @__PURE__ */ jsxs("div", {
+          className: "srk-progress-secondary-area-left",
+          style: live || inTimeMachine ? {} : {
+            display: "none"
+          },
+          children: ["Elapsed: ", secToTimeStr(Math.round(progressMetrics.elapsed / 1e3))]
+        }), /* @__PURE__ */ jsx("div", {
+          className: "srk-progress-secondary-area-center",
+          children: this.state.inTimeMachine ? /* @__PURE__ */ jsx("div", {
+            className: "srk-progress-time-machine-status",
+            children: /* @__PURE__ */ jsx("div", {
+              className: "srk-progress-time-machine-text",
+              children: "Time Travel Mode"
+            })
+          }) : live && !this.isEnded ? /* @__PURE__ */ jsx("div", {
+            className: "srk-progress-live-text",
+            children: "Live"
+          }) : /* @__PURE__ */ jsx("div", {
+            style: {
+              visibility: "hidden"
+            },
+            children: "SRK"
+          })
+        }), /* @__PURE__ */ jsxs("div", {
+          className: "srk-progress-secondary-area-right",
+          style: live || inTimeMachine ? {} : {
+            display: "none"
+          },
+          children: ["Remaining: ", secToTimeStr(Math.round(progressMetrics.remaining / 1e3))]
+        })]
+      })]
+    });
+  }
+}
+function MarkerLabel(props) {
+  if (!props.marker) {
+    return null;
+  }
+  const {
+    marker,
+    theme
+  } = props;
+  const markerPresentation = getMarkerPresentation(marker, theme);
+  return /* @__PURE__ */ jsx("span", {
+    className: classnames(markerPresentation.className, props.className),
+    style: {
+      ...markerPresentation.style,
+      ...props.style
+    },
+    children: resolveText(marker.label)
+  });
+}
+let nextModalId = 0;
+const useModalLayoutEffect = typeof window === "undefined" ? React.useEffect : React.useLayoutEffect;
+function Modal({
+  open,
+  title,
+  children,
+  width,
+  rootClassName,
+  wrapClassName,
+  style,
+  destroyOnClose = true,
+  closeOnEsc = true,
+  closeOnMaskClick = true,
+  onClose
+}) {
+  const titleIdRef = React.useRef(`srk-modal-title-${++nextModalId}`);
+  const dialogRef = React.useRef(null);
+  const closeTimerRef = React.useRef(null);
+  const openTimerRef = React.useRef(null);
+  const focusScopeIdRef = React.useRef(null);
+  const [isMounted, setIsMounted] = React.useState(open || !destroyOnClose);
+  const [animationState, setAnimationState] = React.useState(open ? "pre-open" : "closing");
+  const [transformOrigin, setTransformOrigin] = React.useState({
+    x: 0,
+    y: 0
+  });
+  React.useEffect(() => {
+    ensureModalInteractionTracker();
+  }, []);
+  React.useEffect(() => {
+    return () => {
+      if (closeTimerRef.current !== null) {
+        window.clearTimeout(closeTimerRef.current);
+      }
+      if (openTimerRef.current !== null) {
+        window.clearTimeout(openTimerRef.current);
+      }
+      unregisterModalFocusScope(focusScopeIdRef.current);
+      focusScopeIdRef.current = null;
+    };
+  }, []);
+  React.useEffect(() => {
+    if (closeTimerRef.current !== null) {
+      window.clearTimeout(closeTimerRef.current);
+      closeTimerRef.current = null;
+    }
+    if (openTimerRef.current !== null) {
+      window.clearTimeout(openTimerRef.current);
+      openTimerRef.current = null;
+    }
+    if (open) {
+      setIsMounted(true);
+      setTransformOrigin({
+        x: 0,
+        y: 0
+      });
+      setAnimationState("pre-open");
+      return;
+    }
+    setAnimationState("closing");
+    if (destroyOnClose && isMounted && typeof window !== "undefined") {
+      closeTimerRef.current = window.setTimeout(() => {
+        setIsMounted(false);
+      }, MODAL_ANIMATION_DURATION_MS);
+    }
+  }, [destroyOnClose, isMounted, open]);
+  React.useEffect(() => {
+    if (!open || !isMounted || animationState !== "pre-open") {
+      return;
+    }
+    const resolution = resolveModalTransformOrigin(dialogRef.current);
+    setTransformOrigin(resolution.origin);
+    openTimerRef.current = window.setTimeout(() => {
+      setAnimationState("opening");
+      openTimerRef.current = null;
+    }, 0);
+    return () => {
+      if (openTimerRef.current !== null) {
+        window.clearTimeout(openTimerRef.current);
+        openTimerRef.current = null;
+      }
+    };
+  }, [animationState, isMounted, open]);
+  const shouldLockBody = open || destroyOnClose && isMounted;
+  React.useEffect(() => {
+    if (!shouldLockBody) {
+      return;
+    }
+    lockModalBodyScroll();
+    return () => {
+      unlockModalBodyScroll();
+    };
+  }, [shouldLockBody]);
+  const handleEscape = React.useCallback((event) => {
+    if (closeOnEsc) {
+      onClose == null ? void 0 : onClose(event, "escape");
+    }
+  }, [closeOnEsc, onClose]);
+  useModalLayoutEffect(() => {
+    if (open && isMounted) {
+      focusScopeIdRef.current = registerModalFocusScope(dialogRef.current, {
+        onEscape: closeOnEsc ? handleEscape : void 0
+      });
+      return;
+    }
+    if (!open && focusScopeIdRef.current !== null) {
+      unregisterModalFocusScope(focusScopeIdRef.current);
+      focusScopeIdRef.current = null;
+    }
+  }, [closeOnEsc, handleEscape, isMounted, open]);
+  if (!isMounted && destroyOnClose) {
+    return null;
+  }
+  const dialogStyle = {
+    ...style,
+    width: width ? `${width}px` : style == null ? void 0 : style.width,
+    ["--srk-modal-origin-x"]: `${transformOrigin.x}px`,
+    ["--srk-modal-origin-y"]: `${transformOrigin.y}px`,
+    ["--srk-modal-max-width"]: width ? `${width}px` : typeof (style == null ? void 0 : style.width) === "string" ? style.width : void 0
+  };
+  const modalNode = /* @__PURE__ */ jsxs("div", {
+    className: classnames("srk-modal-root", SRK_ANIMATED_MODAL_ROOT_CLASS, "srk-react-modal-root", rootClassName),
+    "data-srk-modal-state": animationState,
+    children: [/* @__PURE__ */ jsx("div", {
+      className: "srk-modal-mask"
+    }), /* @__PURE__ */ jsx("div", {
+      className: classnames("srk-modal-wrap", wrapClassName),
+      tabIndex: -1,
+      onMouseDown: (event) => {
+        if (closeOnMaskClick && event.target === event.currentTarget) {
+          onClose == null ? void 0 : onClose(event, "mask");
+        }
+      },
+      children: /* @__PURE__ */ jsx("div", {
+        "aria-labelledby": title ? titleIdRef.current : void 0,
+        "aria-modal": "true",
+        className: "srk-modal",
+        "data-srk-modal-panel": "true",
+        ref: dialogRef,
+        role: "dialog",
+        style: dialogStyle,
+        tabIndex: -1,
+        children: /* @__PURE__ */ jsxs("div", {
+          className: "srk-modal-content",
+          children: [/* @__PURE__ */ jsx("button", {
+            "aria-label": "Close",
+            className: "srk-modal-close",
+            type: "button",
+            onClick: (event) => onClose == null ? void 0 : onClose(event, "close-button"),
+            children: /* @__PURE__ */ jsx("span", {
+              className: "srk-modal-close-x"
+            })
+          }), title !== void 0 && /* @__PURE__ */ jsx("div", {
+            className: "srk-modal-header",
+            children: /* @__PURE__ */ jsx("div", {
+              className: "srk-modal-title",
+              id: titleIdRef.current,
+              children: title
+            })
+          }), /* @__PURE__ */ jsx("div", {
+            className: "srk-modal-body",
+            children
+          })]
+        })
+      })
+    })]
+  });
+  if (typeof document === "undefined") {
+    return modalNode;
+  }
+  return ReactDOM.createPortal(modalNode, document.body);
+}
+function UserModalContent({
+  user,
+  userMarkers,
+  theme,
+  formatSrkAssetUrl
+}) {
+  const hasMembers = !!user.teamMembers && user.teamMembers.length > 0;
+  return /* @__PURE__ */ jsxs("div", {
+    className: "srk-user-modal-info",
+    children: [/* @__PURE__ */ jsx("h3", {
+      className: "srk-user-modal-info-user-name",
+      children: resolveText(user.name)
+    }), !!user.organization && /* @__PURE__ */ jsx("p", {
+      className: "srk-user-modal-info-user-second-name",
+      children: resolveText(user.organization)
+    }), /* @__PURE__ */ jsxs("div", {
+      className: "srk-user-modal-info-labels",
+      children: [/* @__PURE__ */ jsx("span", {
+        className: "srk-user-modal-info-labels-label srk-user-modal-info-labels-label-preset-general",
+        children: user.official === false ? "\uFF0A \u975E\u6B63\u5F0F\u53C2\u52A0\u8005" : "\u6B63\u5F0F\u53C2\u52A0\u8005"
+      }), userMarkers.map((marker, index) => /* @__PURE__ */ jsx(MarkerLabel, {
+        marker,
+        theme,
+        className: "srk-user-modal-info-labels-label"
+      }, index))]
+    }), hasMembers && /* @__PURE__ */ jsx("div", {
+      className: "srk-user-modal-info-team-members",
+      children: user.teamMembers.map((member, index) => /* @__PURE__ */ jsxs("span", {
+        children: [index > 0 && /* @__PURE__ */ jsx("span", {
+          className: "srk-user-modal-info-team-members-slash",
+          children: " / "
+        }), /* @__PURE__ */ jsx("span", {
+          children: resolveText(member.name)
+        })]
+      }, resolveText(member.name)))
+    }), user.photo && /* @__PURE__ */ jsx("div", {
+      className: "srk-user-modal-info-photo",
+      children: /* @__PURE__ */ jsx("img", {
+        src: formatSrkAssetUrl(user.photo, "user.photo"),
+        alt: "User portrait",
+        className: "srk-user-modal-info-photo-img"
+      })
+    })]
+  });
+}
+function DefaultUserModal({
+  open,
+  user,
+  markers = [],
+  theme = EnumTheme.light,
+  title = "User Info",
+  width = 420,
+  formatSrkAssetUrl,
+  onClose,
+  rootClassName = "srk-general-modal-root",
+  wrapClassName = "srk-user-modal",
+  style
+}) {
+  const [cachedUser, setCachedUser] = React.useState(user || null);
+  React.useEffect(() => {
+    if (user) {
+      setCachedUser(user);
+    }
+  }, [user]);
+  if (!cachedUser) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx(Modal, {
+    open,
+    onClose,
+    rootClassName,
+    style,
+    title,
+    width,
+    wrapClassName,
+    children: /* @__PURE__ */ jsx(UserModalContent, {
+      user: cachedUser,
+      userMarkers: resolveUserMarkers(cachedUser, markers),
+      theme,
+      formatSrkAssetUrl: (url, field) => resolveSrkAssetUrl(url, field, formatSrkAssetUrl)
+    })
+  });
+}
+function SolutionResultLabel({
+  result
+}) {
+  const resultMeta = getSolutionResultMeta(result);
+  return /* @__PURE__ */ jsx("span", {
+    className: classnames("srk-solution-result-text", resultMeta.className),
+    children: resultMeta.label
+  });
+}
+function SolutionTable({
+  solutions
+}) {
+  return /* @__PURE__ */ jsxs("table", {
+    className: "srk-common-table srk-solutions-table",
+    children: [/* @__PURE__ */ jsx("thead", {
+      children: /* @__PURE__ */ jsxs("tr", {
+        children: [/* @__PURE__ */ jsx("th", {
+          className: "srk--text-left",
+          children: "Result"
+        }), /* @__PURE__ */ jsx("th", {
+          className: "srk--text-right",
+          children: "Time"
+        })]
+      })
+    }), /* @__PURE__ */ jsx("tbody", {
+      children: solutions.map((solution, index) => /* @__PURE__ */ jsxs("tr", {
+        children: [/* @__PURE__ */ jsx("td", {
+          children: /* @__PURE__ */ jsx(SolutionResultLabel, {
+            result: solution.result
+          })
+        }), /* @__PURE__ */ jsx("td", {
+          className: "srk--text-right",
+          children: formatSolutionTimestamp(solution)
+        })]
+      }, `${solution.result}_${solution.time[0]}_${index}`))
+    })]
+  });
+}
+function DefaultSolutionModal({
+  open,
+  user,
+  problem,
+  problemIndex,
+  solutions,
+  title,
+  width = 320,
+  onClose,
+  rootClassName = "srk-general-modal-root",
+  wrapClassName = "srk-solutions-modal",
+  style
+}) {
+  const [cachedPayload, setCachedPayload] = React.useState(user ? {
+    user,
+    problem,
+    problemIndex,
+    solutions
+  } : null);
+  React.useEffect(() => {
+    if (user) {
+      setCachedPayload({
+        user,
+        problem,
+        problemIndex,
+        solutions
+      });
+    }
+  }, [problem, problemIndex, solutions, user]);
+  if (!cachedPayload) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx(Modal, {
+    open,
+    onClose,
+    rootClassName,
+    style,
+    title: title || getSolutionModalTitle(cachedPayload.problemIndex, cachedPayload.user),
+    width,
+    wrapClassName,
+    children: /* @__PURE__ */ jsx(SolutionTable, {
+      solutions: cachedPayload.solutions
+    })
+  });
+}
+export { DefaultSolutionModal, DefaultUserModal, MarkerLabel, Modal, ProgressBar, Ranklist };