41 |
42 | (
43 |
44 | (
45 |
49 | )}/>
50 |
51 | )} />
52 |
53 |
54 |
55 |
56 |
57 |
58 |
59 | {AppStore.dialog &&
60 |
61 | }
62 |
63 |
64 | )
65 | }
66 |
67 | return null;
68 | }
69 | }
70 |
71 | export default observer(App);
72 |
--------------------------------------------------------------------------------
/src/app/components/common/Cursor.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { observer } from 'mobx-react';
3 |
4 | // Icons
5 | import * as icons from '../ui/Icons';
6 |
7 | const Cursor = observer(class Cursor extends React.Component {
8 | constructor() {
9 | super();
10 |
11 | // Set the initial state
12 | this.state = {
13 | x: window.innerWidth / 2,
14 | y: window.innerHeight / 2
15 | };
16 | }
17 |
18 | componentDidMount() {
19 | const speed = 10;
20 | const { direction, position } = this.props.store.CursorStore;
21 |
22 | // document.addEventListener('mousemove', (e) => this.handleMouse(e));
23 |
24 | this.moveInterval = setInterval(() => {
25 | if(direction.x) {
26 | let newX = this.state.x += direction.x * speed;
27 |
28 | if(newX < 0) {
29 | newX = 0;
30 | } else if(newX > window.innerWidth - 20) {
31 | newX = window.innerWidth - 20;
32 | }
33 |
34 | this.setState({
35 | x: newX
36 | });
37 | }
38 |
39 | if(direction.y) {
40 | let newY = this.state.y += direction.y * speed;
41 |
42 | if(newY < 0) {
43 | newY = 0;
44 | } else if(newY > window.innerHeight - 32) {
45 | newY = window.innerHeight - 32;
46 | }
47 |
48 | this.setState({
49 | y: newY
50 | });
51 | }
52 |
53 | position.x = this.state.x;
54 | position.y = this.state.y;
55 | }, 100);
56 | }
57 |
58 | handleMouse(e) {
59 | this.setState({
60 | x: e.pageX,
61 | y: e.pageY
62 | })
63 | }
64 |
65 | render() {
66 | const { direction } = this.props.store.CursorStore;
67 | const { x, y } = this.state;
68 |
69 | return (
70 |