You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
47 lines
1.4 KiB
47 lines
1.4 KiB
4 years ago
|
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>Score: {apiStore.currentGame?.score}</div>
|
||
|
|
<div>
|
||
|
|
{
|
||
|
|
_.map(apiStore.currentGame?.witches, (item: Witch, index: number) => {
|
||
|
|
const left = item.position * 100;
|
||
|
|
return (
|
||
|
|
<div key={index} style={{position: 'absolute', 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}/> </div>
|
||
|
|
</header>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
|
||
|
|
export default GamePage;
|