add board option: showMedal

Author: Nugine

data/test.json

@@ -17731,5 +17731,10 @@
     "duration": 7200000,
     "penaltyTime": 1200000,
     "freezeTime": 3600000,
-    "name": "Shenyang Warmup Contest"
+    "name": "Shenyang Warmup Contest",
+    "medal": {
+        "gold": 19,
+        "silver": 38,
+        "bronze": 57
+    }
 }

src/app/Board.css

@@ -6,9 +6,9 @@
 
 .focused-team{
     width: 100%;
+    position: relative;
     z-index: 512;
     border: 1px solid transparent;
-    background-color: white;
     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;
 }

src/app/Board.tsx

@@ -306,6 +306,20 @@ const Board: React.FC<BoardProps> = ({ data, options }: BoardProps) => {
                 {state.teamStates.map((team, idx) => {
                     const isFocused = idx === focusIndex;
 
+                    let backgroundColor = "white";
+                    if (state.info.medal && options.showMedal) {
+                        const goldLine = state.info.medal.gold;
+                        const silverLine = goldLine + state.info.medal.silver;
+                        const bronzeLine = silverLine + state.info.medal.bronze;
+                        if (idx < goldLine) {
+                            backgroundColor = "#fff9c0";
+                        } else if (idx < silverLine) {
+                            backgroundColor = "#f6f6f6";
+                        } else if (idx < bronzeLine) {
+                            backgroundColor = "#eddccf";
+                        }
+                    }
+
                     return (
                         <table
                             key={team.info.id}
@@ -317,7 +331,7 @@ const Board: React.FC<BoardProps> = ({ data, options }: BoardProps) => {
                                 <tr
                                     style={{
                                         transform: isFocused ? "perspective(65535px) translateZ(1px)" : undefined,
-                                        backgroundColor: isFocused ? "white" : undefined
+                                        backgroundColor
                                     }}
                                 >
                                     <td style={{ width: "5%" }}>

src/app/Loader.tsx

@@ -58,8 +58,9 @@ const Loader: React.FC<LoaderProps> = ({ onLoad, onStart }: LoaderProps) => {
         const autoReveal = !!form.getFieldValue("autoReveal");
         const shiningBeforeReveal = !!form.getFieldValue("shiningBeforeReveal");
         const speedFactor = parseFloat(form.getFieldValue("speedFactor"));
-        onStart({ autoReveal, shiningBeforeReveal, speedFactor });
-    }, [onStart, form]);
+        const showMedal = (data?.medal !== undefined) && (!!form.getFieldValue("showMedal"));
+        onStart({ autoReveal, shiningBeforeReveal, speedFactor, showMedal });
+    }, [onStart, form, data]);
 
     return (
         <Card
@@ -158,7 +159,7 @@ const Loader: React.FC<LoaderProps> = ({ onLoad, onStart }: LoaderProps) => {
                     </Row>
                     <Row>
                         <Form form={form} style={{ width: "100%" }} layout="inline"
-                            initialValues={{ autoReveal: false, shiningBeforeReveal: true, speedFactor: 1 }}
+                            initialValues={{ autoReveal: false, shiningBeforeReveal: true, speedFactor: 1, showMedal: true }}
                         >
                             <Form.Item name="autoReveal" label="自动运行" valuePropName="checked">
                                 <Switch />
@@ -169,6 +170,11 @@ const Loader: React.FC<LoaderProps> = ({ onLoad, onStart }: LoaderProps) => {
                             <Form.Item name="speedFactor" label="速度因子">
                                 <InputNumber min={0.1} max={10} step={0.1} />
                             </Form.Item>
+                            {data.medal === undefined ? null : (
+                                <Form.Item name="showMedal" label="显示奖牌" valuePropName="checked">
+                                    <Switch />
+                                </Form.Item>
+                            )}
                         </Form>
                     </Row>
                     <Row justify="center" style={{ marginTop: "1em" }}>

src/app/dto.ts

@@ -6,6 +6,11 @@ export interface Contest {
     penaltyTime: number;
     freezeTime: number;
     name: string;
+    medal?: {
+        gold: number;
+        silver: number;
+        bronze: number;
+    }
 }
 
 export interface Problem {

src/app/vo.ts

@@ -194,4 +194,5 @@ export interface BoardOptions {
     autoReveal: boolean;
     shiningBeforeReveal: boolean;
     speedFactor: number;
+    showMedal: boolean;
 }