1
00:00:02,090 --> 00:00:03,460
Now let's get started

2
00:00:03,460 --> 00:00:06,510
working on that milestone project then.

3
00:00:06,510 --> 00:00:08,730
And before that, I first of all,

4
00:00:08,730 --> 00:00:10,970
wanna plan the project.

5
00:00:10,970 --> 00:00:14,420
I wanna have a look at the different features we'll need

6
00:00:14,420 --> 00:00:18,400
and what will be important for those features.

7
00:00:18,400 --> 00:00:22,070
And we can simply go through this finished project

8
00:00:22,070 --> 00:00:25,170
from top to bottom and I'll not talk about

9
00:00:25,170 --> 00:00:28,100
all the different HTML elements we'll need,

10
00:00:28,100 --> 00:00:30,700
but instead about the main features

11
00:00:30,700 --> 00:00:33,030
that we can see on this page.

12
00:00:33,030 --> 00:00:35,700
And here we can see that it will all start

13
00:00:35,700 --> 00:00:38,230
with that configuration area,

14
00:00:38,230 --> 00:00:40,230
where we see the two players

15
00:00:40,230 --> 00:00:45,170
and where we can configure the names of those players.

16
00:00:45,170 --> 00:00:48,440
And we do that with help of an input field

17
00:00:48,440 --> 00:00:49,970
inside of a form.

18
00:00:49,970 --> 00:00:54,440
And that form is loaded inside a module overlay.

19
00:00:54,440 --> 00:00:57,420
So such a overlay window, so to say.

20
00:00:57,420 --> 00:01:00,380
And therefore, we will have write all the HTML,

21
00:01:00,380 --> 00:01:04,470
CSS code, and javascript code for that overlay.

22
00:01:04,470 --> 00:01:08,290
And then we also have to validate the user input

23
00:01:08,290 --> 00:01:12,480
and show some feedback if an empty form is submitted,

24
00:01:12,480 --> 00:01:14,140
for example.

25
00:01:14,140 --> 00:01:17,640
And of course, we wanna update the player names

26
00:01:17,640 --> 00:01:22,330
and save the submitted input if the input is valid.

27
00:01:22,330 --> 00:01:26,783
So that's the first major feature we can see on this page.

28
00:01:27,640 --> 00:01:32,470
The next feature is that once we are happy with our players,

29
00:01:32,470 --> 00:01:34,510
we have that "Start Game" button.

30
00:01:34,510 --> 00:01:38,400
And here we will need to make sure that this button

31
00:01:38,400 --> 00:01:40,790
clears the existing game board,

32
00:01:40,790 --> 00:01:43,690
if we had a running game already,

33
00:01:43,690 --> 00:01:46,890
and or the "Game Over" message we might be seeing,

34
00:01:46,890 --> 00:01:49,840
and that we make sure that the game overall,

35
00:01:49,840 --> 00:01:53,633
this game field, is initialized correctly.

36
00:01:55,070 --> 00:01:57,140
Then of course, we have to implement

37
00:01:57,140 --> 00:02:00,030
the turn-based gameplay feature.

38
00:02:00,030 --> 00:02:02,360
We have to make sure that the turn

39
00:02:02,360 --> 00:02:05,700
automatically switches between these two players

40
00:02:05,700 --> 00:02:08,419
so that we alternate between the two players

41
00:02:08,419 --> 00:02:10,410
and their symbols.

42
00:02:10,410 --> 00:02:13,150
And then, related to that, we have to make sure

43
00:02:13,150 --> 00:02:16,510
that we make these fields in the game field selectable,

44
00:02:16,510 --> 00:02:18,090
that they can be clicked,

45
00:02:18,090 --> 00:02:20,990
that we then display the player's symbol

46
00:02:20,990 --> 00:02:22,930
once a field was clicked,

47
00:02:22,930 --> 00:02:26,200
and that we also internally keep track

48
00:02:26,200 --> 00:02:29,191
of which fields belong to which player,

49
00:02:29,191 --> 00:02:33,200
and that we then, after every turn, also check

50
00:02:33,200 --> 00:02:36,490
whether we maybe we have a winner or maybe a draw,

51
00:02:36,490 --> 00:02:40,020
if all the fields have been exhausted and clicked.

52
00:02:40,020 --> 00:02:42,330
And ultimately after all of that,

53
00:02:42,330 --> 00:02:45,530
we wanna make sure that we show a "Game Over" window

54
00:02:45,530 --> 00:02:49,350
where we either inform the players about a draw

55
00:02:49,350 --> 00:02:52,823
or we highlight the potential winner of that game.

56
00:02:53,700 --> 00:02:56,270
These are the main features we have here

57
00:02:56,270 --> 00:02:59,100
and these are the features we are going to work on

58
00:02:59,100 --> 00:03:01,043
throughout this course section.

59
00:03:02,480 --> 00:03:05,590
Now you already saw how the finished project

60
00:03:05,590 --> 00:03:07,160
should look and feel like.

61
00:03:07,160 --> 00:03:09,680
And of course, as always,

62
00:03:09,680 --> 00:03:13,110
feel free to get started on your own.

63
00:03:13,110 --> 00:03:15,490
Try to build and implement

64
00:03:15,490 --> 00:03:18,760
as many of these features as you can.

65
00:03:18,760 --> 00:03:21,820
And then of course, make sure you follow along with me

66
00:03:21,820 --> 00:03:25,170
so that we can build this together using my approach

67
00:03:25,170 --> 00:03:27,663
and we can then finish this project together.