飞镖计时器 - 飞镖

简介

飞镖计时器是一款用于飞镖比赛的计时器应用程序。它可以帮助比赛的裁判员更加准确地计时，而不会因为计时出错而影响比赛的结果。

主要功能

1. 计时功能

飞镖计时器可以精准地计算每位选手的用时，同时也提供了多种计时模式以适应不同的比赛规则。你可以自定义每轮比赛的时间、每位选手用时的上限，或者选择比赛结束后自动结束计时。

2. 记录功能

飞镖计时器还提供了记录选手得分的功能。每当一名选手完成赛段时，您可以轻松地记录其得分并自动将其添加到总得分中。

3. 数据分析

为了帮助您更好地跟踪比赛进程，飞镖计时器还提供了数据分析功能，它可以帮助您分析每名选手的比赛表现、比赛时段中的得分分布情况、及每轮比赛的结果。

技术栈

• 前端：React, Ant Design
• 后端：Node.js, Express, MongoDB

如何使用

1. 安装 Node.js 和 MongoDB
2. 将代码克隆到本地
3. 运行 "npm install" 来安装依赖
4. 在 "config/config.js" 中配置数据库信息
5. 运行 "npm start" 启动服务器
6. 访问 http://localhost:3000 即可访问应用程序

代码片段

// 设置默认计时模式（倒计时模式）
const [timerMode, setTimerMode] = useState('countDown');
// 设置比赛时间（默认为 60s）
const [gameTime, setGameTime] = useState(60);
// 设置选手用时上限（默认为 20s）
const [playerTimeLimit, setPlayerTimeLimit] = useState(20);
// 设置比赛是否结束
const [gameOver, setGameOver] = useState(false);
// 设置选手得分
const [playerScore, setPlayerScore] = useState({});
// 设置选手当前用时
const [playerTime, setPlayerTime] = useState({});

// 计时器组件
import { useEffect, useState } from 'react';

function Timer(props) {
  const { mode, time, timeLimit, onTimeUp } = props;
  const [running, setRunning] = useState(false);

  useEffect(() => {
    let timer = null;
    if (running && time > 0) {
      timer = setInterval(() => {
        setTime((t) => t - 1);
      }, 1000);
    }
    return () => clearInterval(timer);
  }, [running, time]);

  useEffect(() => {
    if (time === 0) onTimeUp();
  }, [time]);

  const handleStart = () => {
    setRunning(true);
  };

  const handlePause = () => {
    setRunning(false);
  };

  const handleResume = () => {
    setRunning(true);
  };

  const handleReset = () => {
    setRunning(false);
    setTime(timeLimit);
  };

  return (
    <div>
      <div>{time}</div>
      {!running && time === timeLimit && (
        <button onClick={handleStart}>开始计时</button>
      )}
      {running && <button onClick={handlePause}>暂停计时</button>}
      {!running && time < timeLimit && (
        <button onClick={handleResume}>继续计时</button>
      )}
      {!running && time < timeLimit && (
        <button onClick={handleReset}>重置计时</button>
      )}
    </div>
  );
}

Markdown 标识：

# 标题
## 二级标题
### 三级标题

- 列表
- 列表

1. 列表
2. 列表

`代码片段`

```代码块```