counter_character.jsx 940 Bytes
Newer Older
peterh-gr's avatar
peterh-gr committed
1
2
import React, {useEffect, useState} from 'react';
import {useInterval} from './use_interval';
3
4

export function CounterCharacter(props) {
peterh-gr's avatar
peterh-gr committed
5
6
  const {character, state} = props;
  const [flash, setFlash] = useState(false);
7

peterh-gr's avatar
peterh-gr committed
8
9
10
  const renderCover = () => {
    if (state == 'resolved') {
      return null;
11
    } else {
peterh-gr's avatar
peterh-gr committed
12
13
14
      return (
        <div className="cover"></div>
      );
15
    }
peterh-gr's avatar
peterh-gr committed
16
  };
17

peterh-gr's avatar
peterh-gr committed
18
19
20
21
  let delay = null;
  if (state == 'flashing' || state == 'resolving') {
    delay = 100;
  }
22

peterh-gr's avatar
peterh-gr committed
23
24
25
26
27
  useInterval(() => {
    if (Math.random() <= 0.5) {
      setFlash(true);
    } else {
      setFlash(false);
28
    }
peterh-gr's avatar
peterh-gr committed
29
  }, delay);
30

peterh-gr's avatar
peterh-gr committed
31
32
33
  let characterClasses = ['character', state];
  if (flash) {
    characterClasses.push('covered');
34
  }
peterh-gr's avatar
peterh-gr committed
35
36
37
38
39
40
41
42
43
44
45
  let displayCharacter = '0';
  if (state == 'resolved') {
    displayCharacter = character;
  }

  return (
    <div className={characterClasses.join(" ")}>
      {renderCover()}
      {displayCharacter}
    </div>
  );
46
}