1
    let state = {
2
      allowInput: false,
3
      score1: 0,
4
      score2: 0,
5
      values: null,
6
      startTime: null,
7
      value1: null,
8
      value2: null,
9
      inputs: [],
10
      stopUpdate: false,
11
    };
12

13
    function loadGame() {
14
      fetch('/game', {
15
        method: 'POST',
16
        headers: {
17
          'Content-Type': 'application/json',
18
        },
19
        body: JSON.stringify({}),
20
      })
21
        .then(response => response.json())
22
        .then(data => {
23
          state.values = data.values;
24
          state.startTime = data.startTime * 1000;
25
          state.value1 = data.values[0][0];
26
          state.value2 = data.values[0][1];
27
          document.getElementById('value1').textContent = state.value1;
28
          document.getElementById('value2').textContent = state.value2;
29
          updateCountdown();
30
        })
31
        .catch(error => {
32
          document.getElementById('dialog').textContent = '加载失败，请刷新页面重试';
33
        });
34
    }
35

36
    function updateCountdown() {
37
      if (state.stopUpdate) {
38
        return;
39
      }
40
      const seconds = Math.ceil((state.startTime - Date.now()) / 1000);
41
      if (seconds >= 4) {
42
        requestAnimationFrame(updateCountdown);
43
      }
44
      if (seconds <= 3 && seconds >= 1) {
45
        document.getElementById('dialog').textContent = seconds;
46
        requestAnimationFrame(updateCountdown);
47
      } else if (seconds <= 0) {
48
        document.getElementById('dialog').style.display = 'none';
49
        state.allowInput = true;
50
        updateTimer();
51
      }
52
    }
53

54
    function updateTimer() {
55
      if (state.stopUpdate) {
56
        return;
57
      }
58
      const time1 = Date.now() - state.startTime;
59
      const time2 = Math.min(10000, time1);
60
      state.score2 = Math.max(0, Math.floor(time2 / 100));
61
      document.getElementById('time1').textContent = `${String(Math.floor(time1 / 60000)).padStart(2, '0')}:${String(Math.floor(time1 / 1000) % 60).padStart(2, '0')}.${String(time1 % 1000).padStart(3, '0')}`;
62
      document.getElementById('time2').textContent = `${String(Math.floor(time2 / 60000)).padStart(2, '0')}:${String(Math.floor(time2 / 1000) % 60).padStart(2, '0')}.${String(time2 % 1000).padStart(3, '0')}`;
63
      document.getElementById('score2').textContent = state.score2;
64
      document.getElementById('progress2').style.width = `${state.score2}%`;
65
      if (state.score2 === 100) {
66
        state.allowInput = false;
67
        state.stopUpdate = true;
68
        document.getElementById('dialog').textContent = '对手已完成，挑战失败！';
69
        document.getElementById('dialog').style.display = 'flex';
70
        document.getElementById('time1').textContent = `00:10.000`;
71
      } else {
72
        requestAnimationFrame(updateTimer);
73
      }
74
    }
75

76
    function chooseAnswer(choice) {
77
      if (!state.allowInput) {
78
        return;
79
      }
80
      state.inputs.push(choice);
81
      let correct;
82
      if (state.value1 < state.value2 && choice === '<' || state.value1 > state.value2 && choice === '>') {
83
        correct = true;
84
        state.score1++;
85
        document.getElementById('answer').style.backgroundColor = '#5e5';
86
      } else {
87
        correct = false;
88
        document.getElementById('answer').style.backgroundColor = '#e55';
89
      }
90
      document.getElementById('answer').textContent = choice;
91
      document.getElementById('score1').textContent = state.score1;
92
      document.getElementById('progress1').style.width = `${state.score1}%`;
93
      state.allowInput = false;
94
      setTimeout(() => {
95
        if (state.score1 === 100) {
96
          submit(state.inputs);
97
        } else if (correct) {
98
          state.value1 = state.values[state.score1][0];
99
          state.value2 = state.values[state.score1][1];
100
          state.allowInput = true;
101
          document.getElementById('value1').textContent = state.value1;
102
          document.getElementById('value2').textContent = state.value2;
103
          document.getElementById('answer').textContent = '?';
104
          document.getElementById('answer').style.backgroundColor = '#fff';
105
        } else {
106
          state.allowInput = false;
107
          state.stopUpdate = true;
108
          document.getElementById('dialog').textContent = '你选错了，挑战失败！';
109
          document.getElementById('dialog').style.display = 'flex';
110
        }
111
      }, 200);
112
    }
113

114
    function submit(inputs) {
115
      fetch('/submit', {
116
        method: 'POST',
117
        headers: {
118
          'Content-Type': 'application/json',
119
        },
120
        body: JSON.stringify({inputs}),
121
      })
122
        .then(response => response.json())
123
        .then(data => {
124
          state.stopUpdate = true;
125
          document.getElementById('dialog').textContent = data.message;
126
          document.getElementById('dialog').style.display = 'flex';
127
        })
128
        .catch(error => {
129
          state.stopUpdate = true;
130
          document.getElementById('dialog').textContent = '提交失败，请刷新页面重试';
131
          document.getElementById('dialog').style.display = 'flex';
132
        });
133
    }
134

135
    document.addEventListener('keydown', e => {
136
      if (e.key === 'ArrowLeft' || e.key === 'a') {
137
        document.getElementById('less-than').classList.add('active');
138
        setTimeout(() => document.getElementById('less-than').classList.remove('active'), 200);
139
        chooseAnswer('<');
140
      } else if (e.key === 'ArrowRight' || e.key === 'd') {
141
        document.getElementById('greater-than').classList.add('active');
142
        setTimeout(() => document.getElementById('greater-than').classList.remove('active'), 200);
143
        chooseAnswer('>');
144
      }
145
    });
146
    document.getElementById('less-than').addEventListener('click', () => chooseAnswer('<'));
147
    document.getElementById('greater-than').addEventListener('click', () => chooseAnswer('>'));
148
    document.addEventListener('load', loadGame());