Skip to content

Commit f0a3a80

Browse files
martingastonmartingaston
committed
Refactor game.js to iterate zombie element creation
Relates #22
1 parent 819961d commit f0a3a80

File tree

1 file changed

+85
-121
lines changed

1 file changed

+85
-121
lines changed

‎src/components/game.js

+85-121
Original file line numberDiff line numberDiff line change
@@ -7,130 +7,94 @@ import GameOver from "./gameOver";
77
import YouHaveWon from "./youHaveWon";
88

99
export default class Game extends React.Component {
10-
state = {
11-
counting: false,
12-
seconds: 30,
13-
zombiesAlive: 0,
14-
firstZombieAppeared: false
15-
};
16-
// problem: have to clear this timer when you win or loose
17-
// otherwise the gameover screen renders on top of you win screen
18-
// after time is over
19-
componentDidMount() {
20-
this.intervalId = setInterval(this.countDown, 1000);
21-
}
22-
//calling this function will set firstZombieAppeared to true, this is useful in determining if user has won the game by checking
23-
// if zombiesAlive = 0
24-
setFirstZombieAppeared = () => {
25-
this.setState(prevState => {
26-
return { firstZombieAppeared: true };
27-
});
28-
};
29-
//as zombies respawn, this function will increment zombieAlive number
30-
increment = () => {
31-
this.setState(prevState => {
32-
// console.log("working")
33-
return { zombiesAlive: prevState.zombiesAlive + 1 };
34-
});
35-
};
36-
//as zombies get killed, this function will decrement zombieAlive number
37-
decrement = () => {
38-
this.setState(prevState => {
39-
return { zombiesAlive: prevState.zombiesAlive - 1 };
40-
});
41-
};
42-
//this will countDown the play time, so we can stop the game when seconds = 0
43-
countDown = () => {
44-
this.setState(prevState => {
45-
if (prevState.seconds == 1) {
46-
clearInterval(this.intervalId);
47-
}
48-
return {
49-
seconds: prevState.seconds - 1
50-
};
51-
});
52-
};
10+
state = {
11+
counting: false,
12+
seconds: 30,
13+
zombiesAlive: 0,
14+
firstZombieAppeared: false
15+
};
16+
// problem: have to clear this timer when you win or loose
17+
// otherwise the gameover screen renders on top of you win screen
18+
// after time is over
19+
componentDidMount() {
20+
this.intervalId = setInterval(this.countDown, 1000);
21+
}
22+
//calling this function will set firstZombieAppeared to true, this is useful in determining if user has won the game by checking
23+
// if zombiesAlive = 0
24+
setFirstZombieAppeared = () => {
25+
this.setState(prevState => {
26+
return { firstZombieAppeared: true };
27+
});
28+
};
29+
//as zombies respawn, this function will increment zombieAlive number
30+
increment = () => {
31+
this.setState(prevState => {
32+
// console.log("working")
33+
return { zombiesAlive: prevState.zombiesAlive + 1 };
34+
});
35+
};
36+
//as zombies get killed, this function will decrement zombieAlive number
37+
decrement = () => {
38+
this.setState(prevState => {
39+
return { zombiesAlive: prevState.zombiesAlive - 1 };
40+
});
41+
};
42+
//this will countDown the play time, so we can stop the game when seconds = 0
43+
countDown = () => {
44+
this.setState(prevState => {
45+
if (prevState.seconds == 1) {
46+
clearInterval(this.intervalId);
47+
}
48+
return {
49+
seconds: prevState.seconds - 1
50+
};
51+
});
52+
};
5353

54-
render() {
55-
// console.log(this.state)
56-
return (
57-
<div>
58-
{/* render this div if this.state.seconds == 0, i.e time has not run out
59-
AND ( (first zombie has appeared AND zombies alive is not 0
54+
render() {
55+
// Array.from creates a new, shallow copied array from an array-like object.
56+
// What's an array-like object? It's a JavaScript quirk - but what we want here is the 'length' key to iterate over
57+
const zombieAmount = 9; // draw this many zombies
58+
const drawZombies = Array.from(
59+
{ length: zombieAmount },
60+
(value, index) => (
61+
<Btn
62+
// React uses the 'key' property to give things stability: https://reactjs.org/docs/lists-and-keys.html
63+
key={`button-${index}`}
64+
zombiesAlive={this.state.zombiesAlive}
65+
increment={this.increment}
66+
decrement={this.decrement}
67+
firstZombieAppeared={this.setFirstZombieAppeared}
68+
/>
69+
)
70+
);
71+
return (
72+
<div>
73+
{/* render this div if this.state.seconds == 0, i.e time has not run out
74+
AND ( (first zombie has appeared AND zombies alive is not 0
6075
AND zombies alive is less than 9- because them you lose)
6176
OR (first zombie has not appeared, we don't want to end game before it starts! )*/}
6277

63-
{!this.state.seconds == 0 &&
64-
((this.state.firstZombieAppeared &&
65-
this.state.zombiesAlive != 0 &&
66-
this.state.zombiesAlive < 9) ||
67-
!this.state.firstZombieAppeared) && (
68-
<div>
69-
<div className="game-container">
70-
<Btn
71-
zombiesAlive={this.state.zombiesAlive}
72-
increment={this.increment}
73-
decrement={this.decrement}
74-
firstZombieAppeared={this.setFirstZombieAppeared}
75-
/>
76-
<Btn
77-
zombiesAlive={this.state.zombiesAlive}
78-
increment={this.increment}
79-
decrement={this.decrement}
80-
firstZombieAppeared={this.setFirstZombieAppeared}
81-
/>
82-
<Btn
83-
zombiesAlive={this.state.zombiesAlive}
84-
increment={this.increment}
85-
decrement={this.decrement}
86-
firstZombieAppeared={this.setFirstZombieAppeared}
87-
/>
88-
<Btn
89-
zombiesAlive={this.state.zombiesAlive}
90-
increment={this.increment}
91-
decrement={this.decrement}
92-
firstZombieAppeared={this.setFirstZombieAppeared}
93-
/>
94-
<Btn
95-
zombiesAlive={this.state.zombiesAlive}
96-
increment={this.increment}
97-
decrement={this.decrement}
98-
firstZombieAppeared={this.setFirstZombieAppeared}
99-
/>
100-
<Btn
101-
zombiesAlive={this.state.zombiesAlive}
102-
increment={this.increment}
103-
decrement={this.decrement}
104-
firstZombieAppeared={this.setFirstZombieAppeared}
105-
/>
106-
<Btn
107-
zombiesAlive={this.state.zombiesAlive}
108-
increment={this.increment}
109-
decrement={this.decrement}
110-
firstZombieAppeared={this.setFirstZombieAppeared}
111-
/>
112-
<Btn
113-
zombiesAlive={this.state.zombiesAlive}
114-
increment={this.increment}
115-
decrement={this.decrement}
116-
firstZombieAppeared={this.setFirstZombieAppeared}
117-
/>
118-
<Btn
119-
zombiesAlive={this.state.zombiesAlive}
120-
increment={this.increment}
121-
decrement={this.decrement}
122-
firstZombieAppeared={this.setFirstZombieAppeared}
123-
/>
124-
</div>
125-
<Timer time={this.state.seconds} />
78+
{!this.state.seconds == 0 &&
79+
((this.state.firstZombieAppeared &&
80+
this.state.zombiesAlive != 0 &&
81+
this.state.zombiesAlive < 9) ||
82+
!this.state.firstZombieAppeared) && (
83+
<div>
84+
<div className="game-container">
85+
{
86+
drawZombies /* this then iterates over our array from earlier */
87+
}
88+
</div>
89+
<Timer time={this.state.seconds} />
90+
</div>
91+
)}
92+
{this.state.zombiesAlive == 0 &&
93+
this.state.firstZombieAppeared && <YouHaveWon />}
94+
{(this.state.seconds == 0 || this.state.zombiesAlive >= 9) && (
95+
<GameOver />
96+
)}
12697
</div>
127-
)}
128-
{this.state.zombiesAlive == 0 &&
129-
this.state.firstZombieAppeared && <YouHaveWon />}
130-
{(this.state.seconds == 0 || this.state.zombiesAlive >= 9) && (
131-
<GameOver />
132-
)}
133-
</div>
134-
);
135-
}
98+
);
99+
}
136100
}

0 commit comments

Comments
 (0)