ooya.ga/src/components/GamePage/GamePage.tsx

import _ from 'lodash';

// @ts-ignore
import witch from '../../resources/witch.svg';
import './GamePage.css';
import { Witch } from '../../model/Witch';
import apiStore from '../../store/apiStore/apiStore';

type GameProps = {
  onExitGame: () => void,
};

const GamePage: React.FC<GameProps> = (props) => {
  const {onExitGame} = props;

  const clickAtWitch = (guid: string) => {
    apiStore.turn(guid)
      .then((result) => console.log('check whether witch is lucky: ' + guid + ' // ' + result));
  }
  return (
    <header className="App-header">
      <div className='game'>
        <div>Score: {apiStore.currentGame?.score}</div>
        <div>Version: {apiStore.version}</div>
        <div className="witch-row">
          {
            _.map(apiStore.currentGame?.witches, (item: Witch, index: number) => {
              const left = item.position * 100;
              return (
                <div key={index} className='witch' style={{ left }}>
                  <img src={witch} alt={`witch-${index}`} onClick={() => clickAtWitch(item.guid)}/>
                </div>
              )
            })
          }
        </div>
      </div>
      <h1 onClick={() => onExitGame()}> Стоп игра! </h1>
      <div>
        <label htmlFor='hasServer'>У меня, кажется, есть свой сервер!</label>
        <input
          type='checkbox'
          id='hasServer'
          checked={!apiStore.mockMode}
          value='1'
          onChange={(e) => apiStore.tryToSetMockMode(e.target.checked) }
        /> </div>
    </header>
  );
}

export default GamePage;