1
00:00:02,400 --> 00:00:09,500
Now with that, if we go to the next screen where we have a running game, we face the next problem

2
00:00:09,520 --> 00:00:10,610
there. In portrait mode

3
00:00:10,610 --> 00:00:15,680
it looks good but if we rotate the device, then this doesn't look too good.

4
00:00:15,680 --> 00:00:20,520
Now here, a solution simply could be that we change the styling a little bit

5
00:00:20,570 --> 00:00:23,320
if we don't have that much height available.

6
00:00:23,420 --> 00:00:28,150
Alternatively, we render a totally different layout based on the available space,

7
00:00:28,220 --> 00:00:30,470
both would be options you have.

8
00:00:30,470 --> 00:00:36,920
You could for example try to render this side-by-side by simply adding an if check here in your game screen

9
00:00:36,920 --> 00:00:42,620
where you return totally different jsx code and maybe also with totally different styling and therefore

10
00:00:42,620 --> 00:00:49,820
layouting based on the available width or height and then you would just need to setup a listener that

11
00:00:49,820 --> 00:00:51,200
re-renders your component,

12
00:00:51,200 --> 00:00:56,150
so with set stage just as we did it here in the start game screen to re-render your component whenever

13
00:00:56,150 --> 00:01:02,560
that's the case. I think that would be kind of interesting and therefore that's something I'll do here.

14
00:01:02,570 --> 00:01:08,740
What I'll do is I want to render my buttons here to the left and the right of the number container

15
00:01:08,740 --> 00:01:13,370
if we only have a limited height available and render it like we always did

16
00:01:13,390 --> 00:01:15,160
if that's not the case.

17
00:01:15,460 --> 00:01:20,560
So I want to render totally different jsx code based on my dimensions.

18
00:01:20,560 --> 00:01:30,540
So here I'll add an if check and say if dimensions get window height, let's say if that's smaller than 500

19
00:01:30,670 --> 00:01:33,850
and we'll see if that value works, then I want to return

20
00:01:33,850 --> 00:01:37,770
basically this jsx code from down there,

21
00:01:37,860 --> 00:01:47,770
so I'll copy that, put it between brackets here, parentheses but I don't want to have my card here,

22
00:01:47,770 --> 00:01:55,390
instead I'll have the first main button before my number container, the next one after the number

23
00:01:55,390 --> 00:01:59,530
container and I'll have all of that inside of a new

24
00:02:02,410 --> 00:02:09,000
view here which I'll wrap around this, which should lay these three things out in a row.

25
00:02:09,010 --> 00:02:16,180
So I'll add a brand new style here, styles let's say controls or whatever you want to name it

26
00:02:16,300 --> 00:02:21,400
and now I add this to my stylesheet here and that's the same stylesheet as before because it just

27
00:02:21,400 --> 00:02:27,460
sets up styles that I can use anywhere my component no matter under which conditions I render what

28
00:02:27,460 --> 00:02:31,540
and here I'll set this flex direction to row,

29
00:02:31,540 --> 00:02:38,890
the default is column and now we want to have a row here and I'll set justify content to space around

30
00:02:39,070 --> 00:02:48,360
and we'll see how that looks like. If we now save this and we start a new game here in landscape mode,

31
00:02:48,390 --> 00:02:49,470
doesn't look too bad,

32
00:02:49,470 --> 00:02:54,690
still some work to do but this is now what I get here in landscape mode or on devices with limited height.

33
00:02:55,350 --> 00:02:57,370
On devices with more height,

34
00:02:57,480 --> 00:03:01,530
I still get the old view here which is of course exactly what I want.

35
00:03:01,620 --> 00:03:08,260
Now let's fix this view here and therefore we can simply go to controls and give that a width of let's

36
00:03:08,260 --> 00:03:16,340
say 80% so that the overall container is bigger and very important, set align items here

37
00:03:16,340 --> 00:03:24,340
to center so that the number container and the two buttons are all centered vertically. And now with that

38
00:03:24,340 --> 00:03:33,560
if we give that another try here, we enter this, this looks way better and it works in the same way as

39
00:03:33,560 --> 00:03:38,950
before but now we have a different layout based on our dimensions.

40
00:03:38,990 --> 00:03:44,960
Now of course the problem is this layout doesn't change if we rotate, not the end of the world but we

41
00:03:45,050 --> 00:03:49,560
might want to change back to that old layout and you learned how that works,

42
00:03:49,670 --> 00:03:54,690
we just need to manage this with state and set up a listener.

43
00:03:54,690 --> 00:04:00,200
Now I already have useState and useEffect here in the game screen so all we need to do in our game screen

44
00:04:00,200 --> 00:04:08,180
component is start by setting up that state here and in the end what we want to manage here is our device

45
00:04:08,370 --> 00:04:18,370
width which changes over time, maybe name this available device width to make it clear that we're

46
00:04:18,370 --> 00:04:21,960
not setting the device width here, we're just setting the detected

47
00:04:22,030 --> 00:04:25,370
device width, you could therefore also name this detected device width.

48
00:04:25,450 --> 00:04:34,090
I'll name it available device width and set available device width. I manage this with useState where

49
00:04:34,090 --> 00:04:43,930
I use dimensions get window width to get the available device width and of course, I just recognized this

50
00:04:43,930 --> 00:04:44,470
is wrong,

51
00:04:44,470 --> 00:04:46,480
we're interested in the height, not the width

52
00:04:49,520 --> 00:04:52,850
but we'll need the width as well for this check here, so we'll need both.

53
00:04:53,300 --> 00:04:59,250
So we have the available device width and I'll also manage another state,

54
00:04:59,270 --> 00:05:00,560
that's our available

55
00:05:00,560 --> 00:05:03,990
device height, here also

56
00:05:04,000 --> 00:05:07,300
this is set available device height and therefore here

57
00:05:07,300 --> 00:05:11,700
initially, we get the available device height and now we need to change both

58
00:05:11,710 --> 00:05:19,710
when our orientation changes. For that, we can use effect for example here, set up a function that runs

59
00:05:19,710 --> 00:05:29,310
whenever our component renders and in this function here, I'll setup dimensions, add event listener,

60
00:05:29,330 --> 00:05:35,810
listen to change events and setup a function which should trigger when that's the case, update layout

61
00:05:35,810 --> 00:05:39,720
for example is a fitting name because that's exactly what we're doing

62
00:05:39,850 --> 00:05:51,420
and in there, I call set available device width and I set this to dimensions get window.width and

63
00:05:51,420 --> 00:05:59,410
of course also set available device height to dimensions get window height. Update layout is therefore

64
00:05:59,410 --> 00:06:05,680
the function we point at on our event listener on dimensions and just as before, we need a cleanup function

65
00:06:06,010 --> 00:06:14,080
to avoid unnecessary renders and in this function, we simply use dimensions remove event listener change

66
00:06:14,170 --> 00:06:23,010
where we point at update layout and we're good. Now we just need to use our two states here - available

67
00:06:23,040 --> 00:06:25,390
device width and available device height.

68
00:06:25,500 --> 00:06:32,190
So in this if check here, I use available device width and here where I'm interested in the height,

69
00:06:32,220 --> 00:06:40,170
I use available device height. If we now save this, we should have a layout where if we start a game, we

70
00:06:40,170 --> 00:06:47,070
have this look but if we then rotate into landscape mode, this changes and of course also changes

71
00:06:47,070 --> 00:06:55,830
back it if it needs to. Here on iOS, we have this look and we have this look if we rotate. So now this is really

72
00:06:55,830 --> 00:07:03,500
looking good and this is giving us the look we want based on the available width and height and it also

73
00:07:03,510 --> 00:07:06,960
respects changes to that when we rotate the device.