Skip to content
This repository was archived by the owner on Feb 7, 2024. It is now read-only.

Commit 50bc485

Browse files
ryan-roemerryan-roemer
authored
Bug: Fix issues with react-hot-loader (#50)
There are a couple of things going on with #48 -- - We have all this weird `_REACT_HOT_LOADER__` in our `umd` and `lib` builds. I'm guessing that _shouldn't_ be there as we only would want that in `demo` land. - We get some infinite recursion error with `Uncaught RangeError: Maximum call stack size exceeded at Stage.__setDimensions__REACT_HOT_LOADER__` in the actual demo as reported in #48 This looks like an upstream issue with arrow member functions in gaearon/react-hot-loader#698 This PR fixes this and does a little bit of infrastructure housecleaning. - Fixes #48 - Updates the webpack configs to be a little more modern. - Lints root JS files in the repository. - Only babel builds `react-hot-loader` in the _demo_ and not for our produced `lib` or `umd` files. - Converts all arrow member functions to real member functions to get around the hot loading issues. - _Note_: I didn't change the arrow member functions in the `*.example` files. - Harmonizes `umd` and `build` tasks in `package.json:scripts` to be symmetrical. - Updates `react-hot-loader` dep and drops `node@4` in Travis due to engines restriction on new RHL.
1 parent f1e176f commit 50bc485

20 files changed

+7129
-266
lines changed

‎.babelrc

+9-2
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,11 @@
11
{
2-
"presets": ["es2015", "react", "stage-0"],
3-
"plugins": ["transform-flow-strip-types", "transform-decorators-legacy", "react-hot-loader/babel"]
2+
"presets": [
3+
"es2015",
4+
"react",
5+
"stage-0"
6+
],
7+
"plugins": [
8+
"transform-flow-strip-types",
9+
"transform-decorators-legacy"
10+
]
411
}

‎.travis.yml

+1-2
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
language: node_js
22

33
node_js:
4-
- "4"
54
- "6"
65
- "8"
76

@@ -10,6 +9,6 @@ branches:
109
- master
1110

1211
script:
13-
- npm run lint
1412
- npm run build
1513
- npm run umd
14+
- npm run lint

‎README.md

+4-4
Original file line numberDiff line numberDiff line change
@@ -112,17 +112,17 @@ class ChildComponent extends React.Component {
112112
loop: PropTypes.object,
113113
};
114114

115-
update = () => {
116-
// tick logic
117-
};
118-
119115
componentDidMount() {
120116
this.context.loop.subscribe(this.update);
121117
}
122118

123119
componentWillUnmount() {
124120
this.context.loop.unsubscribe(this.update);
125121
}
122+
123+
update() {
124+
// tick logic
125+
};
126126
}
127127

128128
```

‎demo/game/character.js

+79-71
Original file line numberDiff line numberDiff line change
@@ -18,32 +18,103 @@ export default class Character extends Component {
1818
scale: PropTypes.number,
1919
};
2020

21-
handlePlayStateChanged = state => {
21+
constructor(props) {
22+
super(props);
23+
24+
this.loopID = null;
25+
this.isJumping = false;
26+
this.isPunching = false;
27+
this.isLeaving = false;
28+
this.lastX = 0;
29+
30+
this.state = {
31+
characterState: 2,
32+
loop: false,
33+
spritePlaying: true,
34+
};
35+
36+
this.handlePlayStateChanged = this.handlePlayStateChanged.bind(this);
37+
this.jump = this.jump.bind(this);
38+
this.punch = this.punch.bind(this);
39+
this.getDoorIndex = this.getDoorIndex.bind(this);
40+
this.enterBuilding = this.enterBuilding.bind(this);
41+
this.checkKeys = this.checkKeys.bind(this);
42+
this.update = this.update.bind(this);
43+
}
44+
45+
componentDidMount() {
46+
this.jumpNoise = new AudioPlayer('/assets/jump.wav');
47+
Matter.Events.on(this.context.engine, 'afterUpdate', this.update);
48+
}
49+
50+
componentWillUnmount() {
51+
Matter.Events.off(this.context.engine, 'afterUpdate', this.update);
52+
}
53+
54+
getWrapperStyles() {
55+
const { characterPosition, stageX } = this.props.store;
56+
const { scale } = this.context;
57+
const { x, y } = characterPosition;
58+
const targetX = x + stageX;
59+
60+
return {
61+
position: 'absolute',
62+
transform: `translate(${targetX * scale}px, ${y * scale}px)`,
63+
transformOrigin: 'left top',
64+
};
65+
}
66+
67+
render() {
68+
const x = this.props.store.characterPosition.x;
69+
70+
return (
71+
<div style={this.getWrapperStyles()}>
72+
<Body
73+
args={[x, 384, 64, 64]}
74+
inertia={Infinity}
75+
ref={b => {
76+
this.body = b;
77+
}}
78+
>
79+
<Sprite
80+
repeat={this.state.repeat}
81+
onPlayStateChanged={this.handlePlayStateChanged}
82+
src="assets/character-sprite.png"
83+
scale={this.context.scale * 2}
84+
state={this.state.characterState}
85+
steps={[9, 9, 0, 4, 5]}
86+
/>
87+
</Body>
88+
</div>
89+
);
90+
}
91+
92+
handlePlayStateChanged(state) {
2293
this.setState({
2394
spritePlaying: state ? true : false,
2495
});
2596
};
2697

27-
move = (body, x) => {
98+
move(body, x) {
2899
Matter.Body.setVelocity(body, { x, y: 0 });
29100
};
30101

31-
jump = body => {
102+
jump(body) {
32103
this.jumpNoise.play();
33104
this.isJumping = true;
34105
Matter.Body.applyForce(body, { x: 0, y: 0 }, { x: 0, y: -0.15 });
35106
Matter.Body.set(body, 'friction', 0.0001);
36107
};
37108

38-
punch = () => {
109+
punch() {
39110
this.isPunching = true;
40111
this.setState({
41112
characterState: 4,
42113
repeat: false,
43114
});
44115
};
45116

46-
getDoorIndex = body => {
117+
getDoorIndex(body) {
47118
let doorIndex = null;
48119

49120
const doorPositions = [...Array(6).keys()].map(a => {
@@ -59,7 +130,7 @@ export default class Character extends Component {
59130
return doorIndex;
60131
};
61132

62-
enterBuilding = body => {
133+
enterBuilding(body) {
63134
const doorIndex = this.getDoorIndex(body);
64135

65136
if (doorIndex !== null) {
@@ -71,7 +142,7 @@ export default class Character extends Component {
71142
}
72143
};
73144

74-
checkKeys = (shouldMoveStageLeft, shouldMoveStageRight) => {
145+
checkKeys(shouldMoveStageLeft, shouldMoveStageRight) {
75146
const { keys, store } = this.props;
76147
const { body } = this.body;
77148

@@ -111,7 +182,7 @@ export default class Character extends Component {
111182
});
112183
};
113184

114-
update = () => {
185+
update() {
115186
const { store } = this.props;
116187
const { body } = this.body;
117188

@@ -147,67 +218,4 @@ export default class Character extends Component {
147218

148219
this.lastX = body.position.x;
149220
};
150-
151-
constructor(props) {
152-
super(props);
153-
154-
this.loopID = null;
155-
this.isJumping = false;
156-
this.isPunching = false;
157-
this.isLeaving = false;
158-
this.lastX = 0;
159-
160-
this.state = {
161-
characterState: 2,
162-
loop: false,
163-
spritePlaying: true,
164-
};
165-
}
166-
167-
componentDidMount() {
168-
this.jumpNoise = new AudioPlayer('/assets/jump.wav');
169-
Matter.Events.on(this.context.engine, 'afterUpdate', this.update);
170-
}
171-
172-
componentWillUnmount() {
173-
Matter.Events.off(this.context.engine, 'afterUpdate', this.update);
174-
}
175-
176-
getWrapperStyles() {
177-
const { characterPosition, stageX } = this.props.store;
178-
const { scale } = this.context;
179-
const { x, y } = characterPosition;
180-
const targetX = x + stageX;
181-
182-
return {
183-
position: 'absolute',
184-
transform: `translate(${targetX * scale}px, ${y * scale}px)`,
185-
transformOrigin: 'left top',
186-
};
187-
}
188-
189-
render() {
190-
const x = this.props.store.characterPosition.x;
191-
192-
return (
193-
<div style={this.getWrapperStyles()}>
194-
<Body
195-
args={[x, 384, 64, 64]}
196-
inertia={Infinity}
197-
ref={b => {
198-
this.body = b;
199-
}}
200-
>
201-
<Sprite
202-
repeat={this.state.repeat}
203-
onPlayStateChanged={this.handlePlayStateChanged}
204-
src="assets/character-sprite.png"
205-
scale={this.context.scale * 2}
206-
state={this.state.characterState}
207-
steps={[9, 9, 0, 4, 5]}
208-
/>
209-
</Body>
210-
</div>
211-
);
212-
}
213221
}

‎demo/game/index.js

+40-38
Original file line numberDiff line numberDiff line change
@@ -15,44 +15,6 @@ export default class Game extends Component {
1515
onLeave: PropTypes.func,
1616
};
1717

18-
physicsInit = engine => {
19-
const ground = Matter.Bodies.rectangle(512 * 3, 448, 1024 * 3, 64, {
20-
isStatic: true,
21-
});
22-
23-
const leftWall = Matter.Bodies.rectangle(-64, 288, 64, 576, {
24-
isStatic: true,
25-
});
26-
27-
const rightWall = Matter.Bodies.rectangle(3008, 288, 64, 576, {
28-
isStatic: true,
29-
});
30-
31-
Matter.World.addBody(engine.world, ground);
32-
Matter.World.addBody(engine.world, leftWall);
33-
Matter.World.addBody(engine.world, rightWall);
34-
};
35-
36-
handleEnterBuilding = index => {
37-
this.setState({
38-
fade: true,
39-
});
40-
setTimeout(() => {
41-
this.props.onLeave(index);
42-
}, 500);
43-
};
44-
45-
constructor(props) {
46-
super(props);
47-
48-
this.state = {
49-
fade: true,
50-
};
51-
this.keyListener = new KeyListener();
52-
window.AudioContext = window.AudioContext || window.webkitAudioContext;
53-
window.context = window.context || new AudioContext();
54-
}
55-
5618
componentDidMount() {
5719
this.player = new AudioPlayer('/assets/music.wav', () => {
5820
this.stopMusic = this.player.play({
@@ -97,4 +59,44 @@ export default class Game extends Component {
9759
</Loop>
9860
);
9961
}
62+
63+
physicsInit(engine) {
64+
const ground = Matter.Bodies.rectangle(512 * 3, 448, 1024 * 3, 64, {
65+
isStatic: true,
66+
});
67+
68+
const leftWall = Matter.Bodies.rectangle(-64, 288, 64, 576, {
69+
isStatic: true,
70+
});
71+
72+
const rightWall = Matter.Bodies.rectangle(3008, 288, 64, 576, {
73+
isStatic: true,
74+
});
75+
76+
Matter.World.addBody(engine.world, ground);
77+
Matter.World.addBody(engine.world, leftWall);
78+
Matter.World.addBody(engine.world, rightWall);
79+
};
80+
81+
handleEnterBuilding(index) {
82+
this.setState({
83+
fade: true,
84+
});
85+
setTimeout(() => {
86+
this.props.onLeave(index);
87+
}, 500);
88+
};
89+
90+
constructor(props) {
91+
super(props);
92+
93+
this.state = {
94+
fade: true,
95+
};
96+
this.keyListener = new KeyListener();
97+
window.AudioContext = window.AudioContext || window.webkitAudioContext;
98+
window.context = window.context || new AudioContext();
99+
100+
this.handleEnterBuilding = this.handleEnterBuilding.bind(this);
101+
}
100102
}

‎demo/intro.js

+14-11
Original file line numberDiff line numberDiff line change
@@ -7,23 +7,15 @@ export default class Intro extends Component {
77
onStart: PropTypes.func,
88
};
99

10-
startUpdate = () => {
11-
this.animationFrame = requestAnimationFrame(this.startUpdate);
12-
};
13-
14-
handleKeyPress = e => {
15-
if (e.keyCode === 13) {
16-
this.startNoise.play();
17-
this.props.onStart();
18-
}
19-
};
20-
2110
constructor(props) {
2211
super(props);
2312

2413
this.state = {
2514
blink: false,
2615
};
16+
17+
this.startUpdate = this.startUpdate.bind(this);
18+
this.handleKeyPress = this.handleKeyPress.bind(this);
2719
}
2820

2921
componentDidMount() {
@@ -56,4 +48,15 @@ export default class Intro extends Component {
5648
</div>
5749
);
5850
}
51+
52+
startUpdate() {
53+
this.animationFrame = requestAnimationFrame(this.startUpdate);
54+
}
55+
56+
handleKeyPress(e) {
57+
if (e.keyCode === 13) {
58+
this.startNoise.play();
59+
this.props.onStart();
60+
}
61+
}
5962
}

0 commit comments

Comments
 (0)