ui: add contest_timer

packages/ui-default/components/contest/contest.page.styl

@@ -41,6 +41,14 @@ for key, value in $contest-color
     background: $primary-color
     border-color: $primary-color
 
+.contest-timer
+  position: fixed;
+  left: 0;
+  top: 48px;
+  z-index: 10000;
+  +mobile()
+    visibility: hidden !important;
+
 .contest-problems
   font-size: 0.9375rem;
   font-weight: 400;

packages/ui-default/pages/contest.page.ts

@@ -1,5 +1,10 @@
+import { formatSeconds } from '@hydrooj/utils/lib/common';
 import NProgress from 'nprogress';
 import { NamedPage } from 'vj/misc/Page';
+import tpl from 'vj/utils/tpl';
+
+const contestTimer = $(tpl`<pre class="contest-timer" style="display:none"></pre>`);
+contestTimer.appendTo(document.body);
 
 export default new NamedPage(['contest_detail', 'contest_detail_problem', 'contest_scoreboard'], () => {
   const beginAt = new Date(UiContext.tdoc.beginAt).getTime();
@@ -7,11 +12,17 @@ export default new NamedPage(['contest_detail', 'contest_detail_problem', 'conte
   NProgress.configure({ trickle: false, showSpinner: false, minimum: 0 });
   function updateProgress() {
     const now = Date.now();
-    if (beginAt <= now && now <= endAt) NProgress.set((now - beginAt) / (endAt - beginAt));
-    else if (now > endAt) NProgress.set(1);
-    else NProgress.set(0);
+    if (beginAt <= now && now <= endAt) {
+      NProgress.set((now - beginAt) / (endAt - beginAt));
+      contestTimer.show();
+      contestTimer.text(formatSeconds(Math.floor((endAt - now) / 1000)));
+    } else {
+      if (now > endAt) NProgress.set(1);
+      else NProgress.set(0);
+      contestTimer.hide();
+    }
   }
   NProgress.start();
   updateProgress();
-  setInterval(updateProgress, 5000);
+  setInterval(updateProgress, 1000);
 });