Original subtitles

1 1

Let's keep building or Pig Game. 2

2

And in this video, 3

3

we're gonna be concerned with switching 4

4

from one active player to another one. 5

5

So as we already know, whenever the player rules are one, 6

6

we will enter this else block, right? 7

7

So when the dice is not a 1, 8

8

then the current dice gets added to the current score. 9

9

But if we happen to roll a 1, 10

10

then we lose all our score 11

11

and it is the next players round, all right? 12

12

So in the previous lecture, 13

13

we implemented this functionality of adding the dice 14

14

to the current score only 15

15

as the player number 0, okay? 16

16

But now we need to make this work 17

17

for both player number 0 and number 1. 18

18

And so for that, 19

19

we need to keep track of which player 20

20

is actually the current player. 21

21

And in order to do that, 22

22

we actually need to keep track of which player 23

23

is actually the active player in a moment 24

24

that the dice was rolled. 25

25

So basically we need to know which player 26

26

is right now playing. 27

27

And with right now I mean, 28

28

whenever the button is clicked, all right? 29

29

So we will create another variable, 30

30

which will hold exactly that. 31

31

So it will hold 0, 32

32

if the current player is player 0 33

33

and it will hold 1, 34

34

if the active player is player number 1. 35

35

So let active player. 36

36

And since we start with the first player, 37

37

we set it to 0, 38

38

because remember that player number 1 is player 0 39

39

and player 2 is here in our code player number 1. 40

40

And in fact, let me explain you right away, why that is. 41

41

So the reason is that we will store the scores 42

42

of both players in an array. 43

43

So let me do that here. 44

44

So let or actually const, because it's an array. 45

45

So const scores equals an array, 46

46

which will start with 0 points for both sides. 47

47

And so these scores are actually the final scores. 48

48

So the big scores, which accumulate, 49

49

let me show that to you in the demo. 50

50

So that's these big scores here. 51

51

So these are the current scores, 52

52

and these are, let's say the total scores 53

53

that keep accumulating, right? 54

54

And so we are storing these two scores here in an array. 55

55

And remember that the array is zero-based 56

56

and so the score of player number 1 57

57

will be here at position 0, 58

58

and the score of player two will be at position 1. 59

59

And so that's why it will be handy 60

60

to have the activePlayer variable here, 61

61

also set to 0 and 1, okay? 62

62

And we will see that in action actually, 63

63

in the next lecture, where we will hold the scores, 64

64

but for now knowing which is the active player 65

65

is going to be important 66

66

to actually display the current score here 67

67

for the current player 68

68

and not just always for player number 0. 69

69

So instead of manipulating the element of player 0, 70

70

so the current score of player 0, 71

71

let's actually select the element dynamically, okay? 72

72

So let me show that to you. 73

73

So we will actually now do the selection right here, 74

74

document. and actually let's use getElementById. 75

75

And then here we need the class name. 76

76

So the class name is gonna be either current O, 77

77

for player 0, or current 1 for player 1. 78

78

And so maybe now you start to see once more 79

79

why we use the active player as 0 or 1, 80

80

because now we can use that variable 81

81

to basically build these collapse names, okay? 82

82

So when it's player 0, 83

83

we will then end up with current--0 84

84

and if it's 1, 85

85

we will end up with current--1 86

86

because that's gonna be the active player. 87

87

So what I just said is to do this. 88

88

So current-- 89

89

and then the number of the active player, okay? 90

90

And so now on this, 91

91

we will get the text content 92

92

and set it to the current score, okay? 93

93

So again, this 1 here will always set the text content 94

94

on player number 0, 95

95

but here we do instead select 96

96

the score element dynamically based on which 97

97

is the active player right now, okay? 98

98

So this is a very handy trick 99

99

of building the ID name like this dynamically. 100

100

Now here, when we switch the player, 101

101

we of course will then need to change that value 102

102

from zero to one or from one to zero. 103

103

So let's do that here. 104

104

So essentially switching the next player, 105

105

that means to change that value. 106

106

So activePlayer, 107

107

and now here, let's not use again, the turnery operator. 108

108

So we can say if the activePlayer is 0, 109

109

then we want the new activePlayer to be 1 110

110

and else it should be 0. 111

111

All right, does that make sense? 112

112

So essentially we are reassigning the active player here 113

113

and we're checking whether right now it is player 0. 114

114

So if it is then here the result of this whole operator, 115

115

so which again is all of this, 116

116

then the result will be 1. 117

117

And so then activePlayer will be equal to 1, 118

118

but if this is false here, 119

119

so if the player is actually 1, 120

120

well then the active player will become 0. 121

121

And so essentially this allows us to switch 122

122

from zero to 1. 123

123

All right, so I think this would actually work already. 124

124

So this is the demo, 125

125

this is the real game. 126

126

Let's just make sure that it works and reload it. 127

127

And now as we roll the dice, 128

128

remember that we are player number 0 right now. 129

129

So this one. 130

130

So 3 gets added to 0 is 3 and 7, 131

131

so this works right now. 132

132

Three, let's wait for a one so that we can switch the player 133

133

and see what happens then. 134

134

Okay. 135

135

So now we're all the one. 136

136

And so now we should be player number 1. 137

137

So and essentially player 2. 138

138

And so now when we roll the dice again, 139

139

the new score should appear down here, right? 140

140

Because this here is current 1. 141

141

So this element here is the current 1 142

142

that we just defined previously 143

143

and indeed it works. 144

144

So something happened here, 145

145

but of course we need to reset the current score. 146

146

So the current score was just for this player, 147

147

but now we edit that for 148

148

to the current score of the previous round. 149

149

So as we switch the player, 150

150

we also need to reset the current score, okay? 151

151

So the logic of the active player is already working, 152

152

but we still need to reset the current score. 153

153

Also, you see that visually nothing changed yet. 154

154

So in the real game, when the player is switched, 155

155

this side here becomes white 156

156

and so the background kind of changes there. 157

157

Oh, and another thing is that this current score here 158

158

should also then be set back to 0 again, okay? 159

159

So basically the previous player 160

160

should have its current score here visibly set to 0. 161

161

So let me just tell you what happens here. 162

162

When we switch to another player, 163

163

so you see the current score 164

164

and now there's a 1 165

165

and so now this side here became white 166

166

and then of course the current 167

167

of the other player became 0. 168

168

So let's first take care of that logic 169

169

of changing the values 170

170

and then I will show you how we change the background here. 171

171

So let's go back. 172

172

And the first thing that we need to do 173

173

is to set the current score back to 0. 174

174

So current score back to 0, 175

175

and then we need to set the text content back to 0, okay? 176

176

So basically of the active player before we switch it. 177

177

So for example, player 0 was playing 178

178

and then we switched to player 1, 179

179

but before we do that switch, 180

180

we need to change the current score 181

181

of player 0 back to 0. 182

182

So we need to do that here before we do the switch, okay? 183

183

So basically what we do is the same as this, 184

184

but we simply set it to 0, okay. 185

185

So we're selecting the current player, 186

186

which at this point is still 0 187

187

and then we set his textContent to 0 188

188

and then we switch from zero to one, okay? 189

189

And actually we can also set the current score to 0 here, 190

190

but that doesn't really matter 191

191

because the current score is not bound to any player. 192

192

So saving it, now let's try again. 193

193

So all of this is still working, 194

194

but let's wait what happens on the one? 195

195

So that's a lot of points here, okay. 196

196

So the current score is back to 0 here 197

197

and now watch what happens 198

198

and yeah, nice, that's working now. 199

199

So now the actual current score variable 200

200

was also set back to 0 201

201

and so 6 plus 0 now on player number 1 is 6. 202

202

So as we keep doing that, it keeps adding here 203

203

and now we're back to player number 0, so this one. 204

204

Then I wrote another one right away 205

205

and so we switched to this player back again immediately. 206

206

But you see that the logic here is already working. 207

207

Now, the only thing that's left to do is that visual change. 208

208

So putting that white background here on this other player. 209

209

So let me show you in the HTML, how that works. 210

210

And so basically the player that is active 211

211

has this whole section here 212

212

with the player--active class. 213

213

So you see that this first section, 214

214

which is for player 0 right now has this class 215

215

because player 0 is always the first player. 216

216

But then as we switch to the other player, 217

217

we want to remove that class from here 218

218

and basically put it here on the other player. 219

219

Okay, so let's do that. 220

220

And as always, 221

221

we will start by selecting these two players. 222

222

And this time is actually a class. 223

223

So player 0 class and player 1 class. 224

224

So let's do that here and do that as the first. 225

225

So const player 0 element, 226

226

document.querySelector. 227

227

And now we need the dot for the class name, 228

228

so that's player--1. 229

229

And I'm just copying it here, 230

230

I'm too lazy. 231

231

And this 1 here is actually player 0, 232

232

so 0 and 1 right here. 233

233

And now let's actually change their class names. 234

234

So the player active class, so down here. 235

235

And for that, 236

236

I will now show you yet another method 237

237

that's available on the class list property. 238

238

Well actually let's start typing first. 239

239

So player0Element.Classlist, 240

240

and we already saw the remove method, 241

241

we saw the add method, 242

242

but now I will show you the toggle method. 243

243

So we will use toggle now. 244

244

And what toggle will do is that 245

245

it will add the class if it is not there 246

246

and if it is there, it will remove it, okay. 247

247

So we could do that manually also 248

248

by checking if the class is there 249

249

and only removing it if it is, 250

250

but using toggle takes that work away from us. 251

251

So actually we could have used this toggle method 252

252

in the previous project of the popup, 253

253

but back then, 254

254

I actually wanted to show you the contains method. 255

255

Remember that? 256

256

But now again, we will use toggle here because it is easier. 257

257

And so now we simply have to add this player active class 258

258

or actually to toggle it. 259

259

So if we do that on both then it will work 260

260

because on player 0 it will remove the class if it's there 261

261

and if it's not it will add it. 262

262

And the same thing on the other player. 263

263

And since we start with the player active class 264

264

on only one element, 265

265

so only on player 0 here, 266

266

then toggling both at the same time 267

267

will ensure that it's only ever 268

268

on one of the elements at once. 269

269

So let's now check that out 270

270

just to make sure we load it here 271

271

and let's wait for it. 272

272

It's taking a lot of time and yes, 273

273

so we switched the active player 274

274

and now it's also nicely visible. 275

275

And yes, we changed it back as well 276

276

and so that works beautifully great job. 277

277

And now basically the only thing that's missing 278

278

to actually make this game work 279

279

is to hold the current score. 280

280

And so that is gonna be the topic of the next video.