From f72209beb532b4318296ca91d03d8e51cc9d7f23 Mon Sep 17 00:00:00 2001
From: undefined <i@undefined.moe>
Date: Tue, 6 Sep 2022 15:23:41 +0800
Subject: [PATCH] core&ui: allow skipAnimation

---
 packages/hydrooj/package.json                 |  2 +-
 packages/hydrooj/src/model/setting.ts         |  1 +
 .../components/react/DomComponent.tsx         |  2 +-
 packages/ui-default/hydro.ts                  | 32 +++++++++++++------
 packages/ui-default/misc/section.styl         |  2 --
 packages/ui-default/package.json              |  2 +-
 .../ui-default/templates/record_main_tr.html  |  2 +-
 7 files changed, 27 insertions(+), 16 deletions(-)

diff --git a/packages/hydrooj/package.json b/packages/hydrooj/package.json
index 2507d552..ff06eab4 100644
--- a/packages/hydrooj/package.json
+++ b/packages/hydrooj/package.json
@@ -1,6 +1,6 @@
 {
     "name": "hydrooj",
-    "version": "3.17.0",
+    "version": "3.17.1",
     "bin": "bin/hydrooj.js",
     "main": "src/loader",
     "module": "src/loader",
diff --git a/packages/hydrooj/src/model/setting.ts b/packages/hydrooj/src/model/setting.ts
index 6eb05067..b5e3310c 100644
--- a/packages/hydrooj/src/model/setting.ts
+++ b/packages/hydrooj/src/model/setting.ts
@@ -131,6 +131,7 @@ const ServerLangSettingNode = {
 
 PreferenceSetting(
     Setting('setting_display', 'viewLang', null, langRange, 'UI Language'),
+    Setting('setting_display', 'skipAnimate', false, 'boolean', 'Skip Animation'),
     Setting('setting_display', 'timeZone', 'Asia/Shanghai', timezones, 'Timezone'),
     LangSettingNode,
     Setting('setting_usage', 'codeTemplate', '', 'textarea', 'Default Code Template',
diff --git a/packages/ui-default/components/react/DomComponent.tsx b/packages/ui-default/components/react/DomComponent.tsx
index 1f64c145..2ae7e488 100644
--- a/packages/ui-default/components/react/DomComponent.tsx
+++ b/packages/ui-default/components/react/DomComponent.tsx
@@ -9,6 +9,6 @@ export default function DomComponent(props: React.HTMLAttributes<HTMLDivElement>
     return () => {
       $(ref.current).empty();
     };
-  });
+  }, []);
   return <div {...omit(props, 'childDom')} ref={ref}></div>;
 }
diff --git a/packages/ui-default/hydro.ts b/packages/ui-default/hydro.ts
index f5662f03..8642dfd6 100644
--- a/packages/ui-default/hydro.ts
+++ b/packages/ui-default/hydro.ts
@@ -37,6 +37,24 @@ function buildSequence(pages, type) {
     }));
 }
 
+async function animate() {
+  if (UserContext.skipAnimate) return;
+  const style = document.createElement('style');
+  style.innerHTML = `.section {
+    transition: transform .5s, opacity .5s;
+    transition-timing-function: ease-out-cubic;
+  }`;
+  document.head.append(style);
+  const sections = _.map($('.section').get(), (section, idx) => ({
+    shouldDelay: idx < 5, // only animate first 5 sections
+    $element: $(section),
+  }));
+  for (const { $element, shouldDelay } of sections) {
+    $element.addClass('visible');
+    if (shouldDelay) await delay(50);
+  }
+}
+
 async function load() {
   for (const page of window.Hydro.preload) await eval(page); // eslint-disable-line no-eval
 
@@ -78,18 +96,12 @@ async function load() {
       console.log(`${page.name}: ${type}Loading took ${time}ms`);
     }
   }
-  const sections = _.map($('.section').get(), (section, idx) => ({
-    shouldDelay: idx < 5, // only animate first 5 sections
-    $element: $(section),
-  }));
-  $('.page-loader').hide();
   console.log('done! %d ms', Date.now() - start.getTime());
-  for (const { $element, shouldDelay } of sections) {
-    $element.addClass('visible');
-    if (shouldDelay) await delay(50);
-  }
+  $('.page-loader').hide();
+  await animate();
+  $('.section').addClass('visible');
   await delay(500);
-  for (const { $element } of sections) $element.trigger('vjLayout');
+  $('.section').trigger('vjLayout');
   $(document).trigger('vjPageFullyInitialized');
 }
 
diff --git a/packages/ui-default/misc/section.styl b/packages/ui-default/misc/section.styl
index 47c98486..7beccbad 100644
--- a/packages/ui-default/misc/section.styl
+++ b/packages/ui-default/misc/section.styl
@@ -14,8 +14,6 @@
 .section
   background: $section-bg-color
   box-shadow: $section-shadow
-  transition: transform .5s, opacity .5s
-  transition-timing-function: ease-out-cubic
 
   +mobile()
     box-shadow: none
diff --git a/packages/ui-default/package.json b/packages/ui-default/package.json
index 62a85190..b0eaac06 100644
--- a/packages/ui-default/package.json
+++ b/packages/ui-default/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@hydrooj/ui-default",
-  "version": "4.40.0",
+  "version": "4.40.1",
   "author": "undefined <i@undefined.moe>",
   "license": "AGPL-3.0",
   "main": "hydro.js",
diff --git a/packages/ui-default/templates/record_main_tr.html b/packages/ui-default/templates/record_main_tr.html
index 7c223d21..382ce9ed 100644
--- a/packages/ui-default/templates/record_main_tr.html
+++ b/packages/ui-default/templates/record_main_tr.html
@@ -21,7 +21,7 @@
     *
   {% endif %}
   {% if rdoc.files.hack %}<span class="text-orange">({{ _('Hack') }})</span>{% endif %}
-  {% if rdoc.contest and rdoc.contest.toHexString() == '000000000000000000000000' %}<span class="text-orange">(({{ _('Pretest') }})</span>{% endif %}
+  {% elif rdoc.contest and rdoc.contest.toString() == '000000000000000000000000' %}<span class="text-orange">({{ _('Pretest') }})</span>{% endif %}
   </td>
   <td class="col--submit-by">
     <a href="{{ url('user_detail', uid=rdoc.uid) }}">