1
00:00:02,290 --> 00:00:05,750
Let's now work on the login functionality and there,

2
00:00:05,770 --> 00:00:09,370
I want to log every round that happened in the game,

3
00:00:09,430 --> 00:00:11,500
every event that happened to the game -

4
00:00:11,500 --> 00:00:17,620
so when we attack the monster, when we launch a strong attack, when we heal ourselves, when the monster

5
00:00:17,620 --> 00:00:24,790
hits us and also when the game is over. And for that, we can add a new function, maybe up there, which I'll

6
00:00:24,790 --> 00:00:29,640
name writeToLog because that's what's going to happen in there.

7
00:00:29,680 --> 00:00:35,280
Now in this function, the idea is that we write the different events to a log and for that,

8
00:00:35,290 --> 00:00:39,040
we of course also need a variable that holds our log.

9
00:00:39,430 --> 00:00:46,950
So here at the beginning of our file maybe, we can add a new variable, battle log and initially that's

10
00:00:46,950 --> 00:00:50,350
an empty array let's say,

11
00:00:50,420 --> 00:00:56,460
now I want to add entries to that array in the writeToLog function. For that,

12
00:00:56,540 --> 00:01:03,110
it would make sense to expect some kind of event parameter, event identifier which describes the events

13
00:01:03,110 --> 00:01:09,540
that happened and then have multiple if and else if blocks to check for the different events we want

14
00:01:09,560 --> 00:01:10,790
to support.

15
00:01:10,820 --> 00:01:17,180
Now just as in the last lecture with the attack modes which I set up as global identifiers, I want to

16
00:01:17,180 --> 00:01:19,080
do the same for my log events

17
00:01:19,190 --> 00:01:29,140
so that we avoid typos and there I can have my log event player attack for example and give this an

18
00:01:29,140 --> 00:01:37,300
identifier of player attack or use a number instead of a string, that's really up to you. Have my log

19
00:01:37,390 --> 00:01:49,570
event player strong attack within a text of player strong attack let's say. Now these texts, as well as

20
00:01:49,570 --> 00:01:55,180
any variable or constant names here are totally up to you of course, I just try to describe what we'll

21
00:01:55,180 --> 00:02:01,120
use them for and I use this uppercase only notation here to make it clear that these are static values

22
00:02:01,240 --> 00:02:09,370
I, the developer define here, hardcode here at the beginning of my script. Then I also want

23
00:02:09,370 --> 00:02:19,080
to have a log event monster attack of course because the monster may hit us, like this and also a log

24
00:02:19,080 --> 00:02:27,600
event player, heal player, heal because we might heal and also a log event

25
00:02:27,600 --> 00:02:33,320
game over, game over, something like this.

26
00:02:36,100 --> 00:02:40,900
Now that could be the log events with which want to deal and therefore now we can check for them,

27
00:02:40,930 --> 00:02:47,530
we can check if event is equal to log event player attack let's say and if that is the case, I want to

28
00:02:47,530 --> 00:02:53,650
add a new entry, a new object to my battle log which hold some information about that event.

29
00:02:53,650 --> 00:02:58,260
So for that, I'll actually create a new variable inside of the writeToLog function,

30
00:02:58,360 --> 00:03:00,640
so which is only available instead of that function

31
00:03:00,640 --> 00:03:02,770
and that's my log entry

32
00:03:02,770 --> 00:03:10,390
and then here we can set a log entry equal to a new object and in that object, I want to have my event

33
00:03:10,450 --> 00:03:16,360
identifier which is a human readable string and actually therefore here, I prefer having a string identifier

34
00:03:16,390 --> 00:03:23,440
as we set it up up here over a number because later when we print that log to the console, for us humans

35
00:03:23,470 --> 00:03:28,430
it's easier to see which kind of events that was if we have a string that describes the event,

36
00:03:28,540 --> 00:03:33,190
then if we have a number which we then have to translate with the help of our code to find out which

37
00:03:33,190 --> 00:03:34,450
event that was.

38
00:03:34,570 --> 00:03:37,220
So here, I store the event,

39
00:03:37,390 --> 00:03:44,610
then I also want to store the value for the event let's say, so the damage costs,

40
00:03:44,620 --> 00:03:54,180
so that's probably also something we should get here as our argument, as an argument. So I'll expect a

41
00:03:54,180 --> 00:03:58,470
value here, a value argument and store that in my value prop here

42
00:03:58,470 --> 00:04:01,700
and in case it's confusing for you that we have the same names for the keys

43
00:04:01,700 --> 00:04:08,230
as for the values here, of course you could get let's say ev here and a val

44
00:04:08,280 --> 00:04:14,250
and then use ev here and here and then val here to make it clear that the key names are totally detached

45
00:04:14,250 --> 00:04:16,670
from the value variable names here.

46
00:04:16,690 --> 00:04:21,660
So now I'm storing the event which is something like player attack, the value for that event which for

47
00:04:21,660 --> 00:04:27,870
the player attack would be the damage dealt, for player heal it would be the damage for which you healed.

48
00:04:28,170 --> 00:04:32,010
For game over, it could be the the name of the winner,

49
00:04:32,010 --> 00:04:42,580
so player or monster for example and I also want to output the final monster health here and for that I

50
00:04:42,580 --> 00:04:44,960
can access the current monster health,

51
00:04:44,980 --> 00:04:50,480
alternatively we also expect this as an argument here which might be cleaner. We could use the global

52
00:04:50,480 --> 00:04:58,270
variable but by using an internal parameter, we make this function a more pure function which only

53
00:04:58,270 --> 00:05:05,350
works with data provided to it instead of also taking some global value which is always kind of dirty

54
00:05:05,350 --> 00:05:11,470
or harder to follow if you're reading the code, it might be unexpected that a function also pulls in

55
00:05:11,470 --> 00:05:18,400
some information from outside, especially if it's a function that also does take parameters and also the

56
00:05:18,400 --> 00:05:20,580
final player health here maybe

57
00:05:20,680 --> 00:05:27,400
and for that I also expect to get my player health snapshot here and store that. So that could be a log

58
00:05:27,400 --> 00:05:33,970
entry we want to create and then we can reach out to the battle log and push that log entry onto the battle

59
00:05:33,970 --> 00:05:34,350
log,

60
00:05:34,490 --> 00:05:37,260
this is how we could add a new entry there.

61
00:05:37,360 --> 00:05:41,210
Now of course we don't just have that case that we have the player attack,

62
00:05:41,230 --> 00:05:47,170
we also have many other events that can occur for which we set up identifiers. So we can add another

63
00:05:47,170 --> 00:05:54,450
else if statement here where we check if event is maybe equal to log event player strong attack let's

64
00:05:54,460 --> 00:06:01,500
say. If that is the case, I will basically create my log entry in the same way though,

65
00:06:01,600 --> 00:06:05,740
so therefore actually, we don't really need an else if log here, right

66
00:06:05,830 --> 00:06:11,170
because we only populate the log entry with the data we got here.

67
00:06:11,170 --> 00:06:12,450
Well that's indeed true,

68
00:06:12,460 --> 00:06:18,100
you could totally create that function without any if checks if log entry is always created in the same

69
00:06:18,100 --> 00:06:24,670
way with dynamic data that changes when you call the function but not inside of the function, to again

70
00:06:24,670 --> 00:06:26,530
practice if statements,

71
00:06:26,530 --> 00:06:32,440
I will add some extra information here which depends on the event that occurred.

72
00:06:32,600 --> 00:06:36,820
I want to say target and here, say monster,

73
00:06:37,280 --> 00:06:40,290
that's some information we're not getting from outside. Here,

74
00:06:40,310 --> 00:06:41,840
I'll also add target

75
00:06:41,840 --> 00:06:48,370
monster and then just as before, push this entry into my log

76
00:06:48,800 --> 00:06:55,190
and then add another else if block where I check if the event is equal to let's say log event monster

77
00:06:55,190 --> 00:06:59,240
attack, in which case we can also copy that code here

78
00:07:02,200 --> 00:07:04,060
and here the target would be player,

79
00:07:04,060 --> 00:07:05,350
that's the difference.

80
00:07:05,350 --> 00:07:11,600
Now let's add another case because we also might have the event that we healed the player,

81
00:07:11,710 --> 00:07:16,560
so log event player heal here and therefore again, we can copy in that code,

82
00:07:16,570 --> 00:07:19,390
the target here is the player of course

83
00:07:19,390 --> 00:07:21,950
and then we have the last else if block here,

84
00:07:21,970 --> 00:07:23,830
the event is that

85
00:07:23,830 --> 00:07:30,160
we have the game over case and there we have no target,

86
00:07:30,190 --> 00:07:32,220
so I don't need to set a target here,

87
00:07:32,230 --> 00:07:38,710
instead I just have my log entry like this where I output the final health value,

88
00:07:38,710 --> 00:07:43,060
then in this case could be the name of the winner,

89
00:07:43,060 --> 00:07:50,010
so player or monster or draw if we have a draw and then we push this onto our log.

90
00:07:50,030 --> 00:07:55,850
Now I push to the log in every case and therefore we can actually remove that line from the if cases

91
00:07:55,850 --> 00:08:03,310
here, so for all the else if blocks and for the main if block I remove this and instead, I can push

92
00:08:03,310 --> 00:08:09,790
log entry onto the battle log after the entire if block because we know we have a log entry variable, it

93
00:08:09,790 --> 00:08:16,060
will hold some value after all these if checks unless we passed in an ev identifier which is not

94
00:08:16,060 --> 00:08:23,350
covered here and then we push that entry onto the log and that uncovered event identifier case shouldn't

95
00:08:23,350 --> 00:08:28,600
really happen here because we will call that function and we as a developer here will make sure we don't

96
00:08:28,600 --> 00:08:31,180
call that function with an invalid value.

97
00:08:31,180 --> 00:08:37,270
Alternatively of course, you could add an extra check and before you execute any code, check if ev

98
00:08:37,540 --> 00:08:44,200
is log event player attack or strong attack or monster attack and so on and if that is not the case,

99
00:08:44,230 --> 00:08:50,650
so actually check if it's not that or not that or not that and so on, then you could return basically such

100
00:08:50,650 --> 00:08:54,990
a check as we also added it earlier in this module in the calculator already. Here,

101
00:08:55,030 --> 00:08:59,030
I'll not do it but it is something you could do.

102
00:08:59,110 --> 00:09:04,270
Now with that, we create these different log entries here and you could even refine this code a bit more

103
00:09:05,140 --> 00:09:11,530
and actually set log entry to an object here where you do have all these fields which are always the

104
00:09:11,530 --> 00:09:12,260
same,

105
00:09:12,750 --> 00:09:14,690
didn't want to cut them there,

106
00:09:14,740 --> 00:09:16,450
so everything except for target

107
00:09:16,870 --> 00:09:22,870
and then here you would only add logEntry.target and set this equal to monster

108
00:09:22,870 --> 00:09:24,340
here for example,

109
00:09:24,340 --> 00:09:29,730
so only add a new property dynamically which you can do in Javascript with the dot notation

110
00:09:29,740 --> 00:09:32,340
if you access a property which doesn't exist yet,

111
00:09:32,470 --> 00:09:34,720
this will add it dynamically.

112
00:09:34,720 --> 00:09:37,690
So you could do that and save even more code,

113
00:09:37,690 --> 00:09:43,450
I will leave these other log entries here like this though, just to make it really clear that we do set

114
00:09:43,450 --> 00:09:45,400
this information on every if block,

115
00:09:45,400 --> 00:09:50,250
we do it with this other approach too but this might be easier to read and to understand,

116
00:09:50,470 --> 00:09:55,720
this approach however where you only change the target of course is the more dynamic or the shorter

117
00:09:55,720 --> 00:10:00,550
approach and therefore the approach you might want to use in bigger apps.

118
00:10:00,590 --> 00:10:05,990
Side note, if you do follow that approach where you set up that object up there and thereafter you only

119
00:10:05,990 --> 00:10:07,370
change the target,

120
00:10:07,370 --> 00:10:12,220
you can of course omit that last if else if block here because there we don't set a target,

121
00:10:12,410 --> 00:10:18,310
so there we already got the readily configured log entry with our default log entry up there.

122
00:10:18,500 --> 00:10:20,510
So that's just a side note,

123
00:10:20,510 --> 00:10:25,550
creating all these extra objects is a bit redundant but I'll leave it like this for readability here.

124
00:10:25,670 --> 00:10:27,720
Then we push that onto our log

125
00:10:27,750 --> 00:10:31,880
and with that, we should have a log,

126
00:10:31,910 --> 00:10:34,190
now let's make sure we can also output it

127
00:10:34,330 --> 00:10:39,320
and for that in the vendor.js file, we have that log button to which we can add an event listener,

128
00:10:39,500 --> 00:10:42,810
so I'll do that in app.js at the very bottom here,

129
00:10:43,010 --> 00:10:50,450
I add my event listener for a click event and there, I want to have my let's say printLogHandler

130
00:10:50,450 --> 00:10:53,380
function which doesn't exist yet which we have to create,

131
00:10:53,390 --> 00:11:00,890
maybe right down there, the printLogHandler function and in that function, I want to output the log

132
00:11:00,890 --> 00:11:08,890
and for now, I'll just console log the battle log, the variable which should be that array.

133
00:11:08,920 --> 00:11:14,920
Now we just need to make sure that we actually call write to log for every event that we do want to

134
00:11:14,920 --> 00:11:18,180
log because right now, that's not something we're doing.

135
00:11:18,310 --> 00:11:19,790
So let's do it

136
00:11:20,140 --> 00:11:27,850
and for that of course in and round when the monster hit us, I want to call writeToLog with my log

137
00:11:27,850 --> 00:11:37,010
event monster attack identifier because the monster attacked us. The value then is player damage and

138
00:11:37,020 --> 00:11:38,790
the monster health at this point

139
00:11:38,790 --> 00:11:43,590
then is the current monster health and the player health is currentPlayerHealth.

140
00:11:43,590 --> 00:11:45,840
So this is how we can call this function here,

141
00:11:45,840 --> 00:11:51,300
we can also really structure this across multiple lines with the auto formatting shortcut to make that

142
00:11:51,300 --> 00:11:52,590
a bit easier to read,

143
00:11:52,710 --> 00:11:55,670
so that's writeToLog after the monster hit us.

144
00:11:55,690 --> 00:12:02,910
Now I also want to log when the game is over and that of course is the case whenever we also call reset

145
00:12:02,910 --> 00:12:06,650
but I need to know whether we won or lost or had a draw so

146
00:12:06,700 --> 00:12:12,830
I will actually write to the logs here in these checks where I do know whether we won or the monster

147
00:12:12,830 --> 00:12:13,660
won.

148
00:12:13,740 --> 00:12:21,150
Then here, I will create my log event game over, the value which I now pass in is not the damage

149
00:12:21,180 --> 00:12:23,210
but instead the result of the game,

150
00:12:23,220 --> 00:12:28,670
so here that could be player1, whatever you want to use here,

151
00:12:28,680 --> 00:12:34,780
that's any text you want to put into your log message, into your log object,

152
00:12:34,850 --> 00:12:43,060
the health snapshots and then do the same here for the monster if it won, so monster won and

153
00:12:43,060 --> 00:12:49,930
also down there if we have a draw, then maybe output a text of a draw. In the end, you can put any data

154
00:12:49,930 --> 00:12:51,440
you want in there.

155
00:12:51,910 --> 00:12:56,770
And now we got two other events which I want to log or three other events actually,

156
00:12:56,770 --> 00:13:01,090
that's when we attack the monster strong or with a weak attack

157
00:13:01,300 --> 00:13:03,380
and also when we heal ourselves.

158
00:13:03,460 --> 00:13:06,130
So let's start with attacking the monster,

159
00:13:06,130 --> 00:13:13,570
so here I also want to write to the log after we reduce the monsters health and which event I

160
00:13:13,570 --> 00:13:16,630
write to the log differs based on the mode we have here,

161
00:13:16,630 --> 00:13:29,230
so actually we can add a new variable, log event and then log event is either equal to log event player

162
00:13:29,230 --> 00:13:37,050
attack here or if we selected a strong attack,

163
00:13:37,060 --> 00:13:43,510
it's log event strong attack. And now log event is a variable that holds either of the two identifiers,

164
00:13:43,570 --> 00:13:46,970
so the string value is stored in these constants in the end

165
00:13:47,080 --> 00:13:52,480
and therefore now here when I write to the log, I can use log event, this variable which is one of my identifiers

166
00:13:52,540 --> 00:13:57,550
or to be precise, the values stored in these identifiers of course. The value which I want to write to

167
00:13:57,550 --> 00:14:00,430
the log is the damage that was actually dealt

168
00:14:00,490 --> 00:14:04,440
and then again, I take my current monster and player health snapshot.

169
00:14:04,840 --> 00:14:10,090
And now there's one last thing I want to write to the log and that is when we heal ourselves. There, after

170
00:14:10,090 --> 00:14:20,280
we adjusted the player health, I have my log player heal event, then I healed by the heal value here, heal

171
00:14:20,310 --> 00:14:24,030
value like this because that's the actual heal value by which we healed

172
00:14:24,150 --> 00:14:26,600
and then again my health snapshots.

173
00:14:26,610 --> 00:14:32,370
So now with that, we should have all that functionality implemented. Back in the app, we can open the developer

174
00:14:32,370 --> 00:14:34,580
tools now to see the console.

175
00:14:34,620 --> 00:14:41,290
Now if we now reload and start a new game and we attack and a strong attack and we heal and then I show

176
00:14:41,290 --> 00:14:43,910
the log, we have six events in there

177
00:14:44,140 --> 00:14:44,890
and that makes sense,

178
00:14:44,890 --> 00:14:50,960
we have a player attack where we hit the monster for a value of around six and

179
00:14:50,980 --> 00:14:56,180
that makes sense because the monster health thereafter is around 94.

180
00:14:56,320 --> 00:15:02,710
Then the monster attacks us for around four damage points which again makes sense,

181
00:15:02,710 --> 00:15:05,440
monster health is still what it had after we hit it

182
00:15:05,470 --> 00:15:12,550
but now the player health is reduced by that damage here and then we launch a strong attack with the

183
00:15:12,550 --> 00:15:14,500
value of 10, monster health

184
00:15:14,500 --> 00:15:19,540
thereafter is 83 which makes sense, it was 93 something before, now it's 83 something,

185
00:15:19,570 --> 00:15:21,400
after hitting it for 10 something

186
00:15:21,430 --> 00:15:23,260
player health is unchanged.

187
00:15:23,260 --> 00:15:25,630
Monster attacks us, so now

188
00:15:25,630 --> 00:15:27,870
this is the damage it dealt to us,

189
00:15:27,910 --> 00:15:30,130
this is our health thereafter

190
00:15:30,220 --> 00:15:32,420
and so on. We healed ourselves,

191
00:15:32,440 --> 00:15:39,370
there you see we healed ourselves for around six, fully up to 100 thereafter but then the monster hits

192
00:15:39,370 --> 00:15:43,450
us again, takes us down to 90 and that's basically what we see there.

193
00:15:43,630 --> 00:15:50,320
Now let's continue here and launch a couple of strong attacks until we win,

194
00:15:50,320 --> 00:15:55,080
yes we did and now print the log, lots of messages in there. In the end,

195
00:15:55,080 --> 00:16:00,700
you see the game over message and there you see player won and the final monster health, below zero of

196
00:16:00,700 --> 00:16:02,980
course, player health above zero

197
00:16:03,130 --> 00:16:04,780
and therefore this all works.

198
00:16:04,810 --> 00:16:08,380
This is how we can write to the log and how we can output the log like this.

199
00:16:08,470 --> 00:16:13,630
Now later, we will learn about loops and therefore how we can output this log in a bit of a nicer way

200
00:16:13,630 --> 00:16:17,020
instead of just throwing the entire array in there like this

201
00:16:17,140 --> 00:16:19,000
but for now, this will do

202
00:16:19,000 --> 00:16:27,190
and with that we also had a lot of if usage. Now I want a dive into some of the neat features which

203
00:16:27,190 --> 00:16:33,580
we haven't really talked about yet when it comes to if statements, about conditional code before we

204
00:16:33,580 --> 00:16:34,960
thereafter dive into loops.