1
00:00:02,250 --> 00:00:04,689
Now, for styling the game field,

2
00:00:04,689 --> 00:00:06,980
if we have a look at our HTML file,

3
00:00:06,980 --> 00:00:10,260
we have that id, active-game on the section,

4
00:00:10,260 --> 00:00:11,520
and hence, we can use that

5
00:00:11,520 --> 00:00:14,720
but, of course, I'll add a brand new CSS file

6
00:00:14,720 --> 00:00:18,030
so that we really have a nice split between our files

7
00:00:18,030 --> 00:00:19,600
and our CSS styles,

8
00:00:19,600 --> 00:00:23,020
and it is easy to find the styles for different sections

9
00:00:23,020 --> 00:00:24,580
of this page.

10
00:00:24,580 --> 00:00:27,673
And I'll name this new style file game.css.

11
00:00:29,350 --> 00:00:32,520
And, of course, then also link it in index.html

12
00:00:32,520 --> 00:00:35,010
to that this file is loaded as well

13
00:00:35,010 --> 00:00:36,950
when the page is loaded.

14
00:00:36,950 --> 00:00:40,223
So here it's styles/game.css.

15
00:00:41,820 --> 00:00:44,910
And now in game.css here,

16
00:00:44,910 --> 00:00:47,730
I wanna target my active-game,

17
00:00:47,730 --> 00:00:50,620
so the element with the ID active-game.

18
00:00:50,620 --> 00:00:54,180
And first of all, set text-align to center,

19
00:00:54,180 --> 00:00:57,800
set the margin to 2rem top, zero right,

20
00:00:57,800 --> 00:01:01,600
5rem and zero left

21
00:01:01,600 --> 00:01:03,230
because here in CSS,

22
00:01:03,230 --> 00:01:07,270
that is top right bottom left.

23
00:01:07,270 --> 00:01:10,100
That's how we can target different margins or paddings

24
00:01:10,100 --> 00:01:12,574
with this longer shortcut.

25
00:01:12,574 --> 00:01:16,083
And set display: none initially,

26
00:01:17,100 --> 00:01:20,870
so that initially we don't see the game area if I reload

27
00:01:20,870 --> 00:01:24,570
because I only wanna show it once we click Start New Game.

28
00:01:24,570 --> 00:01:28,490
Now, we will implement this later with JavaScript.

29
00:01:28,490 --> 00:01:29,970
At the moment, we don't have it,

30
00:01:29,970 --> 00:01:31,560
and therefore, at the moment,

31
00:01:31,560 --> 00:01:33,700
I'll comment this out with my shortcut

32
00:01:33,700 --> 00:01:35,910
so that we do see the game area

33
00:01:35,910 --> 00:01:37,090
because at the moment, of course,

34
00:01:37,090 --> 00:01:39,263
I wanna make sure that we can work on it.

35
00:01:41,000 --> 00:01:43,570
Now, in there, we then have the game over part

36
00:01:43,570 --> 00:01:48,570
and the actual game board where we have the different boxes

37
00:01:48,680 --> 00:01:49,963
that should be clickable.

38
00:01:51,290 --> 00:01:54,020
Now, I'll start with that game over area,

39
00:01:54,020 --> 00:01:55,700
and in the HTML file,

40
00:01:55,700 --> 00:01:59,770
we can simply add an extra ID to this article here,

41
00:01:59,770 --> 00:02:04,770
an id of game-over so that we can easily target this.

42
00:02:04,940 --> 00:02:06,330
Alternatively, we could, of course,

43
00:02:06,330 --> 00:02:08,470
select the first article in active-game

44
00:02:08,470 --> 00:02:10,430
or anything like that.

45
00:02:10,430 --> 00:02:13,110
But here I'll use a standalone ID.

46
00:02:13,110 --> 00:02:15,380
And then target game-over

47
00:02:15,380 --> 00:02:19,403
and there I wanna set a max-width of 40rem,

48
00:02:20,690 --> 00:02:22,513
a margin of auto,

49
00:02:24,180 --> 00:02:28,420
and in general, a width of 90%.

50
00:02:28,420 --> 00:02:29,890
So similar to what I did

51
00:02:29,890 --> 00:02:34,293
in the configuration.css file earlier here.

52
00:02:36,240 --> 00:02:38,840
And I'll add a padding of 1rem top and bottom

53
00:02:38,840 --> 00:02:41,590
and 2rem left and right.

54
00:02:41,590 --> 00:02:45,720
And add a background, not color, not origin, but color.

55
00:02:45,720 --> 00:02:49,470
Background-color of rgb 50, 5, 87,

56
00:02:51,370 --> 00:02:52,993
which is a dark purple.

57
00:02:54,390 --> 00:02:56,780
And a box-shadow, which I will copy

58
00:02:56,780 --> 00:02:59,090
from the overlay.css file.

59
00:02:59,090 --> 00:03:01,483
This box-shadow, which I had on the modal.

60
00:03:02,920 --> 00:03:05,403
I'll use that here.

61
00:03:06,570 --> 00:03:08,730
Give it a border-radius of four pixels

62
00:03:08,730 --> 00:03:10,993
and set the text color to white.

63
00:03:12,190 --> 00:03:14,340
And I'll move that next to background-color,

64
00:03:14,340 --> 00:03:15,330
not because we have to

65
00:03:15,330 --> 00:03:19,280
but so that we can easily see all the colors in one place.

66
00:03:19,280 --> 00:03:22,260
And we'll also set display: none here,

67
00:03:22,260 --> 00:03:24,950
though for the moment, I'll comment it out

68
00:03:24,950 --> 00:03:27,300
so we can see if that looks the way it should.

69
00:03:27,300 --> 00:03:31,030
It almost does but later, I will set display to none

70
00:03:31,030 --> 00:03:34,573
so that we can again also show this with help of JavaScript.

71
00:03:35,514 --> 00:03:37,730
For the moment, I wanna change the look

72
00:03:37,730 --> 00:03:39,470
of this title here a little bit.

73
00:03:39,470 --> 00:03:44,470
And therefore, I'll target game-over h2, is it, I guess?

74
00:03:45,930 --> 00:03:48,120
No, our h3 element in here.

75
00:03:48,120 --> 00:03:51,300
Actually, we could make this a h2 element.

76
00:03:51,300 --> 00:03:53,083
So I'll change this to h2.

77
00:03:54,250 --> 00:03:57,050
And target h2 here.

78
00:03:57,050 --> 00:03:58,283
Game-over h2.

79
00:03:59,370 --> 00:04:02,030
And then set the font-size here to 3rem,

80
00:04:02,030 --> 00:04:06,441
make it really big, and a margin of 0.5rem and 0.

81
00:04:06,441 --> 00:04:09,610
And now if I reload, it should be fairly easy

82
00:04:09,610 --> 00:04:11,810
to see who won.

83
00:04:11,810 --> 00:04:16,740
And maybe we actually use 2.5rem here instead of 3rem.

84
00:04:19,630 --> 00:04:21,870
Yeah, I think that's better.

85
00:04:21,870 --> 00:04:23,710
And that's now the game-over box,

86
00:04:23,710 --> 00:04:26,673
which I will now hide by setting display to none.

87
00:04:28,310 --> 00:04:29,970
So now it's gone.

88
00:04:29,970 --> 00:04:33,420
Now for the other parts of this game part.

89
00:04:33,420 --> 00:04:35,000
And here we have this paragraph

90
00:04:35,000 --> 00:04:36,860
with the active-player-name.

91
00:04:36,860 --> 00:04:39,000
And I wanna style this active-player-name

92
00:04:39,000 --> 00:04:40,110
and for this, we can, of course,

93
00:04:40,110 --> 00:04:42,263
conveniently use this ID again.

94
00:04:43,160 --> 00:04:44,990
So add another ID selector

95
00:04:44,990 --> 00:04:47,120
and select active-player-name.

96
00:04:47,120 --> 00:04:50,940
And then here set maybe the font-weight to bold,

97
00:04:50,940 --> 00:04:53,770
and add a color of rgb,

98
00:04:53,770 --> 00:04:56,410
and then again 50, 5, 87

99
00:04:58,340 --> 00:05:02,053
so that this player name is highlighted a little bit.

100
00:05:03,700 --> 00:05:06,250
Now for the game board itself though.

101
00:05:06,250 --> 00:05:08,290
And for that, we have that ordered list,

102
00:05:08,290 --> 00:05:11,310
and we could target the ordered list in active-game

103
00:05:11,310 --> 00:05:12,910
and that would work

104
00:05:12,910 --> 00:05:15,090
or we give it a standalone id

105
00:05:15,090 --> 00:05:17,350
to have an even easier time of selecting it

106
00:05:17,350 --> 00:05:18,780
and that's what I'll do here.

107
00:05:18,780 --> 00:05:21,320
And I'll give it an id of game-board,

108
00:05:21,320 --> 00:05:23,083
which I'll use in my CSS code.

109
00:05:23,950 --> 00:05:25,440
So for this in game.css,

110
00:05:25,440 --> 00:05:29,020
we can now target game-board like this.

111
00:05:29,020 --> 00:05:31,683
And then what I do I wanna do here?

112
00:05:32,530 --> 00:05:35,930
Well, as I said, I want to have all these boxes,

113
00:05:35,930 --> 00:05:39,270
the list items, organized as a grid.

114
00:05:39,270 --> 00:05:41,580
And therefore, it makes a lot of sense

115
00:05:41,580 --> 00:05:43,560
to set display to grid,

116
00:05:43,560 --> 00:05:46,930
and use CSS grid for styling this.

117
00:05:46,930 --> 00:05:48,800
Before we do that though,

118
00:05:48,800 --> 00:05:50,490
I'll set list-style to none

119
00:05:50,490 --> 00:05:54,000
to get rid of the one, two, three, four bullet points

120
00:05:54,000 --> 00:05:57,280
so to say, and I'll overwrite the default margin

121
00:05:57,280 --> 00:05:59,733
and set it to 1rem 0 here,

122
00:06:01,000 --> 00:06:03,870
and overwrite the browser default padding

123
00:06:03,870 --> 00:06:05,173
and set it to zero.

124
00:06:06,390 --> 00:06:08,040
Then I'll set display: grid

125
00:06:08,040 --> 00:06:10,860
and this should now be a grid with three columns

126
00:06:10,860 --> 00:06:12,350
and three rows

127
00:06:12,350 --> 00:06:15,270
because we have nine items overall.

128
00:06:15,270 --> 00:06:18,480
And therefore, we can set the grid-template-columns

129
00:06:18,480 --> 00:06:22,480
to 6rem 6rem 6rem

130
00:06:22,480 --> 00:06:26,580
to add three columns, which are each 6rem wide.

131
00:06:26,580 --> 00:06:30,330
Alternatively, we can also use a little shortcut here

132
00:06:30,330 --> 00:06:32,610
and use the built-in repeat function

133
00:06:32,610 --> 00:06:33,923
and write it like this.

134
00:06:34,890 --> 00:06:38,390
This tells CSS to add three columns,

135
00:06:38,390 --> 00:06:40,620
which are each 6rem wide.

136
00:06:40,620 --> 00:06:45,600
So it's the same as manually writing 6rem 6rem 6rem,

137
00:06:47,070 --> 00:06:49,080
what we had before.

138
00:06:49,080 --> 00:06:50,573
This is just a shorter form.

139
00:06:51,690 --> 00:06:53,260
And that's what I'll do here,

140
00:06:53,260 --> 00:06:54,976
and I'll do exactly the same

141
00:06:54,976 --> 00:06:59,150
for my grid-template-rows.

142
00:06:59,150 --> 00:07:01,670
In this case, the rows should have the same height

143
00:07:01,670 --> 00:07:03,910
as the columns have a width,

144
00:07:03,910 --> 00:07:06,900
and therefore, I'll set my grid-template-rows like this

145
00:07:06,900 --> 00:07:08,903
to add three rows with this height.

146
00:07:10,870 --> 00:07:13,480
I'll also add justify-content: center

147
00:07:13,480 --> 00:07:16,297
to ensure that everything is centered nicely

148
00:07:16,297 --> 00:07:19,470
so that the grid items are centered.

149
00:07:19,470 --> 00:07:21,510
And I'll add a gap between the boxes

150
00:07:21,510 --> 00:07:25,080
of 0.5rem with the gap CSS property,

151
00:07:25,080 --> 00:07:27,610
which will add a row and column gap

152
00:07:27,610 --> 00:07:29,773
between the different items in the grid.

153
00:07:30,640 --> 00:07:32,910
Alternatively, we could add a margin

154
00:07:32,910 --> 00:07:34,653
around the list items.

155
00:07:36,270 --> 00:07:39,980
Now, I will also target the list items themselves

156
00:07:39,980 --> 00:07:43,120
with game-board li to target the list items

157
00:07:43,120 --> 00:07:45,040
that we find in there.

158
00:07:45,040 --> 00:07:48,370
And here I wanna give each list item a background-color

159
00:07:48,370 --> 00:07:53,370
of rgb 215, 187, and 247.

160
00:07:57,740 --> 00:08:02,540
And a border-radius of two pixels, like this.

161
00:08:02,540 --> 00:08:04,930
And I'll also add a cursor of pointer

162
00:08:04,930 --> 00:08:07,930
to indicate that the items are clickable.

163
00:08:07,930 --> 00:08:09,500
They aren't by default

164
00:08:09,500 --> 00:08:10,840
since they are list items,

165
00:08:10,840 --> 00:08:12,320
not buttons or links

166
00:08:12,320 --> 00:08:13,980
but we will make them clickable

167
00:08:13,980 --> 00:08:15,623
with help of JavaScript.

168
00:08:16,600 --> 00:08:19,880
I also wanna turn them into flex boxes

169
00:08:19,880 --> 00:08:21,740
with display: flex

170
00:08:21,740 --> 00:08:24,440
and then add justify-content: center

171
00:08:24,440 --> 00:08:26,520
and align-items: center

172
00:08:26,520 --> 00:08:31,490
to horizontally and vertically center any content in there.

173
00:08:31,490 --> 00:08:33,190
And the content in the boxes,

174
00:08:33,190 --> 00:08:34,530
which will soon show up

175
00:08:34,530 --> 00:08:37,470
will be the symbols the players have.

176
00:08:37,470 --> 00:08:39,880
And these symbols should be centered in the middle

177
00:08:39,880 --> 00:08:43,330
of the boxes, both on the x and y-axis,

178
00:08:43,330 --> 00:08:45,960
and that's what we can achieve by turning the boxes

179
00:08:45,960 --> 00:08:47,330
into flex boxes

180
00:08:47,330 --> 00:08:49,380
and adding justify-content: center

181
00:08:49,380 --> 00:08:51,063
and align-items: center.

182
00:08:52,530 --> 00:08:55,810
And then I'll also add a font-size of 2.5rem

183
00:08:55,810 --> 00:08:56,790
for these symbols

184
00:08:56,790 --> 00:08:59,150
and a font-weight of bold

185
00:09:00,080 --> 00:09:03,203
so that we can see those symbols once they were added.

186
00:09:04,940 --> 00:09:07,230
I also wanna have a slight hover effect

187
00:09:07,230 --> 00:09:08,950
once we hover over a box

188
00:09:08,950 --> 00:09:13,220
since well, we wanna be able to select them,

189
00:09:13,220 --> 00:09:18,050
and for this, I'll add a game-board li:hover,

190
00:09:18,050 --> 00:09:20,540
add a hover style to a list item,

191
00:09:20,540 --> 00:09:23,170
and you can add the hover pseudo selector

192
00:09:23,170 --> 00:09:25,500
to any HTML elements,

193
00:09:25,500 --> 00:09:29,520
not just to links and buttons but to any element

194
00:09:29,520 --> 00:09:32,150
because you can also make any element clickable

195
00:09:32,150 --> 00:09:35,700
with JavaScript, as you will see in this section.

196
00:09:35,700 --> 00:09:37,740
And then here, I'll add a background-color

197
00:09:37,740 --> 00:09:42,630
of rgb 112, 13, 204

198
00:09:43,610 --> 00:09:45,773
once we hover over such a box.

199
00:09:47,360 --> 00:09:49,540
With that, this is the board I get here

200
00:09:49,540 --> 00:09:52,093
and I can hover over these items as you can see.

201
00:09:53,070 --> 00:09:54,770
And with that, we have this result,

202
00:09:54,770 --> 00:09:56,120
which doesn't look too bad.

203
00:09:57,030 --> 00:09:58,830
Now, one thing I wanna do

204
00:09:58,830 --> 00:10:02,400
is I wanna simulate that we have some items selected,

205
00:10:02,400 --> 00:10:06,750
so I'll add a couple of Xs and Os in some of these items,

206
00:10:06,750 --> 00:10:08,550
in some of these list items,

207
00:10:08,550 --> 00:10:10,510
and this also looks good

208
00:10:10,510 --> 00:10:12,400
but I now also wanna make sure

209
00:10:12,400 --> 00:10:16,980
that items that are selected get a special CSS class

210
00:10:16,980 --> 00:10:19,570
that will ensure that when we hover over them,

211
00:10:19,570 --> 00:10:22,120
we don't get the hover effect anymore

212
00:10:22,120 --> 00:10:23,550
because in JavaScript,

213
00:10:23,550 --> 00:10:25,410
I will also make sure later

214
00:10:25,410 --> 00:10:27,260
that we can't select items

215
00:10:27,260 --> 00:10:29,840
that already were selected before,

216
00:10:29,840 --> 00:10:31,790
and I also wanna reflect this

217
00:10:31,790 --> 00:10:33,863
with appropriate hover styles.

218
00:10:34,840 --> 00:10:37,563
Therefore, I wanna add another class,

219
00:10:38,470 --> 00:10:42,470
disabled, which we can add to all these elements

220
00:10:42,470 --> 00:10:44,770
that have been selected later,

221
00:10:44,770 --> 00:10:47,920
and of course, we will, therefore add this class dynamically

222
00:10:47,920 --> 00:10:51,140
with help of JavaScript later on.

223
00:10:51,140 --> 00:10:53,670
And every element that has this class

224
00:10:53,670 --> 00:10:56,300
should have a different hover effect.

225
00:10:56,300 --> 00:10:58,940
So for this here in my game.css file,

226
00:10:58,940 --> 00:11:02,590
I will now target game-board list items

227
00:11:02,590 --> 00:11:07,280
that do have the disabled effect,

228
00:11:07,280 --> 00:11:10,253
and here in the end, I wanna set the background-color

229
00:11:10,253 --> 00:11:11,620
to this background-color,

230
00:11:11,620 --> 00:11:13,793
which I otherwise use for hovering.

231
00:11:14,920 --> 00:11:17,690
And I'll set the cursor to default,

232
00:11:17,690 --> 00:11:20,070
so not to pointer anymore

233
00:11:20,070 --> 00:11:22,300
so that we don't give the illusion

234
00:11:22,300 --> 00:11:25,313
of this being a clickable item.

235
00:11:26,610 --> 00:11:29,270
And I will also add a text color of white

236
00:11:29,270 --> 00:11:31,643
to make it easier to see that symbol.

237
00:11:33,710 --> 00:11:35,950
With that, if I now reload,

238
00:11:35,950 --> 00:11:37,780
these items are clearly marked

239
00:11:37,780 --> 00:11:41,180
as disabled or has have been selected,

240
00:11:41,180 --> 00:11:42,400
and when I hover over them,

241
00:11:42,400 --> 00:11:44,980
I don't think that I can click them again.

242
00:11:44,980 --> 00:11:46,450
And later in JavaScript,

243
00:11:46,450 --> 00:11:49,350
we will make sure that we can't click them again

244
00:11:49,350 --> 00:11:51,800
so that nothing happens when we click them.

245
00:11:51,800 --> 00:11:53,120
Other items, on the other hand,

246
00:11:53,120 --> 00:11:55,663
are clearly marked as clickable.

247
00:11:56,620 --> 00:11:58,650
And that's now the finished styling.

248
00:11:58,650 --> 00:12:00,730
It was definitely a lot of work

249
00:12:00,730 --> 00:12:03,160
but with that, we now got the styling which we need

250
00:12:03,160 --> 00:12:06,030
to now continue with the actual star

251
00:12:06,030 --> 00:12:08,773
of this section, which will be JavaScript.