add key: ctrl

Author: Nugine

README.md

@@ -18,6 +18,7 @@
 + 鼠标单击或按 Enter 进行下一步。
 + 按 p 切换自动运行模式。
 + 按 + 和 - 增减速度因子
++ 按 ctrl 以较大步长改变速度因子
 
 ## 开发
 

src/app/Board.css

@@ -12,3 +12,7 @@
     box-shadow: 0 5px 12px 4px rgba(0, 0, 0, 0.09), 0 -5px 12px 4px rgba(0, 0, 0, 0.09);
     transition: box-shadow 0.2s ease-out;
 }
+
+.info-message{
+    margin-top: 80vh;
+}

src/app/Board.tsx

@@ -8,7 +8,7 @@ import React, { useState, useEffect, useCallback, useRef, useMemo, CSSProperties
 import FlipMove from "react-flip-move";
 import { StickyContainer, Sticky } from "react-sticky";
 import { Transition } from "react-transition-group";
-import { Tooltip } from "antd";
+import { Tooltip, message } from "antd";
 
 function cvtColor(state: vo.ProblemStateKind): string | undefined {
     if (state === vo.ProblemStateKind.Passed) {
@@ -23,6 +23,10 @@ function cvtColor(state: vo.ProblemStateKind): string | undefined {
     return undefined;
 }
 
+function messageInfo(content: string): void {
+    void message.info({ content, className: "info-message", duration: 0.4 });
+}
+
 interface BoardProps {
     data: dto.Contest;
     options: vo.BoardOptions;
@@ -70,12 +74,12 @@ const Board: React.FC<BoardProps> = ({ data, options }: BoardProps) => {
                     setHighlightItem(value);
 
                     let delay;
-                    delay = options.shiningBeforeReveal ? 1200 : (autoReveal ? 400 : 0);
+                    delay = options.shiningBeforeReveal ? 600 : (autoReveal ? 200 : 0);
                     console.log("delay", delay / speedFactor);
                     await util.delay(delay / speedFactor);  // wait for shining
                     handleNextStep();
 
-                    delay = autoReveal ? (value.accepted ? 800 : 300) : (0);
+                    delay = autoReveal ? (value.accepted ? 500 : 200) : (0);
                     console.log("delay", delay / speedFactor);
                     await util.delay(delay / speedFactor); // wait for showing result
 
@@ -85,7 +89,7 @@ const Board: React.FC<BoardProps> = ({ data, options }: BoardProps) => {
                     const curRank = team?.rank;
 
                     if (prevRank !== curRank) {
-                        delay = 2000;
+                        delay = vo.FLIP_MOVE_DURATION;
                         console.log("delay", delay / speedFactor);
                         await util.delay(delay / speedFactor); // wait for moving up
                     }
@@ -148,28 +152,36 @@ const Board: React.FC<BoardProps> = ({ data, options }: BoardProps) => {
             handleNextStep();
         }
         if (e.key === "p") {
-            setAutoReveal(a => {
-                if (a) {
-                    console.log("disable autoReveal");
-                } else {
-                    console.log("enable autoReveal");
-                }
-                return !a;
-            });
+            if (autoReveal) {
+                console.log("disable autoReveal");
+                messageInfo("禁用自动运行");
+            } else {
+                console.log("enable autoReveal");
+                messageInfo("启用自动运行");
+            }
+            setAutoReveal(a => !a);
         }
         if (e.key === "+") {
-            const s = speedFactor + 0.1;
-            if (s > 10) { return; }
+            const s = Math.min(speedFactor + 0.1, vo.MAX_SPEED_FACTOR);
             setSpeedFactor(s);
             console.log("speedFactor", s);
+            messageInfo(`速度因子：${s.toFixed(1)}`);
         }
         if (e.key === "-") {
-            const s = speedFactor - 0.1;
-            if (s < 0.1) { return; }
+            const s = Math.max(speedFactor - 0.1, vo.MIN_SPEED_FACTOR);
+            setSpeedFactor(s);
+            console.log("speedFactor", s);
+            messageInfo(`速度因子：${s.toFixed(1)}`);
+        }
+        if (e.key === "Control") {
+            let s = speedFactor + 3;
+            if (s > vo.MAX_SPEED_FACTOR) { s -= vo.MAX_SPEED_FACTOR; }
+            if (s < vo.MIN_SPEED_FACTOR) { s = vo.MIN_SPEED_FACTOR; }
             setSpeedFactor(s);
             console.log("speedFactor", s);
+            messageInfo(`速度因子：${s.toFixed(1)}`);
         }
-    }, [handleNextStep, keyLock, speedFactor, state.cursor]);
+    }, [handleNextStep, keyLock, speedFactor, state.cursor, autoReveal]);
 
     useEffect(() => {
         document.addEventListener("keydown", handleKeydown);
@@ -299,7 +311,7 @@ const Board: React.FC<BoardProps> = ({ data, options }: BoardProps) => {
                     textAlign: "center",
                     transformStyle: "preserve-3d"
                 }}
-                duration={2000 / speedFactor}
+                duration={vo.FLIP_MOVE_DURATION / speedFactor}
                 onFinish={handleMovingFinished}
             >
 

src/app/Loader.tsx

@@ -168,7 +168,7 @@ const Loader: React.FC<LoaderProps> = ({ onLoad, onStart }: LoaderProps) => {
                                 <Switch />
                             </Form.Item>
                             <Form.Item name="speedFactor" label="速度因子">
-                                <InputNumber min={0.1} max={10} step={0.1} />
+                                <InputNumber min={vo.MIN_SPEED_FACTOR} max={vo.MAX_SPEED_FACTOR} step={0.1} />
                             </Form.Item>
                             {data.medal === undefined ? null : (
                                 <Form.Item name="showMedal" label="显示奖牌" valuePropName="checked">

src/app/vo.ts

@@ -195,4 +195,9 @@ export interface BoardOptions {
     shiningBeforeReveal: boolean;
     speedFactor: number;
     showMedal: boolean;
-}
+}
+
+export const MIN_SPEED_FACTOR = 0.1;
+export const MAX_SPEED_FACTOR = 10;
+
+export const FLIP_MOVE_DURATION = 800;