1
00:00:02,250 --> 00:00:04,350
Now let's also fix the game over screen,

2
00:00:04,350 --> 00:00:07,130
it's not that bad because it's scrollable,

3
00:00:07,200 --> 00:00:11,790
of course you can also play around with different layouts there, you could shrink the image further, if

4
00:00:11,790 --> 00:00:17,360
you're on a smaller screen that's something you can do, you learned how to do that with dimensions, with

5
00:00:17,370 --> 00:00:18,150
event listeners - 

6
00:00:18,150 --> 00:00:20,010
use effect and useState.

7
00:00:20,070 --> 00:00:25,160
I will keep it very simple here and just make sure that we take advantage of the scroll view

8
00:00:25,170 --> 00:00:29,550
we already have and have a little bit more spacing at the bottom, so that this looks better.

9
00:00:29,550 --> 00:00:35,610
That's of course very easy to implement on the game over screen, in the end.

10
00:00:35,710 --> 00:00:44,200
I have my main button here at the bottom and I just need more spacing here or in other words, in this

11
00:00:44,200 --> 00:00:47,520
view which holds all the content, on my screen,

12
00:00:47,560 --> 00:00:53,470
I just need to add a little bit of padding here, padding vertical to be precise,

13
00:00:53,470 --> 00:00:56,940
so top and bottom of let's say 10.

14
00:00:56,950 --> 00:00:58,740
That's a very simple change of course,

15
00:00:58,750 --> 00:01:01,390
as I said, you could go more complex than that,

16
00:01:01,420 --> 00:01:04,930
you learned all about the tools you need for that,

17
00:01:07,880 --> 00:01:09,100
let's start a game.

18
00:01:09,510 --> 00:01:22,990
Well let's quickly have a look if that simple fix does the job though

19
00:01:23,050 --> 00:01:24,410
and with that, I'm good. Again,

20
00:01:24,670 --> 00:01:27,070
we have some things there which you could improve,

21
00:01:27,070 --> 00:01:34,340
for example we're locking in the width of the image based on the orientation we have when we start

22
00:01:34,360 --> 00:01:36,610
and that's not what we might want here,

23
00:01:36,670 --> 00:01:43,180
we might want to dynamically recalculate this and for that, you would have to manage it with inline styles

24
00:01:43,210 --> 00:01:45,990
and state and use effect and an event listener.

25
00:01:46,000 --> 00:01:47,370
I'll leave it like this here,

26
00:01:47,520 --> 00:01:52,510
also to not unnecessarily bloat this module but you learned about the tools you need for that

27
00:01:52,540 --> 00:01:58,420
and with that, you got all the basic tools, mostly the dimensions API and the different ways of using

28
00:01:58,420 --> 00:02:05,590
it to build nice user interfaces which look good and work great on different orientations and different

29
00:02:05,590 --> 00:02:06,850
device sizes.