Now with that, if we go to the next screen where we have a running game, we face the next problem
there. In portrait mode
it looks good but if we rotate the device, then this doesn't look too good.
Now here, a solution simply could be that we change the styling a little bit
if we don't have that much height available.
Alternatively, we render a totally different layout based on the available space,
both would be options you have.
You could for example try to render this side-by-side by simply adding an if check here in your game screen
where you return totally different jsx code and maybe also with totally different styling and therefore
layouting based on the available width or height and then you would just need to setup a listener that
re-renders your component,
so with set stage just as we did it here in the start game screen to re-render your component whenever
that's the case. I think that would be kind of interesting and therefore that's something I'll do here.
What I'll do is I want to render my buttons here to the left and the right of the number container
if we only have a limited height available and render it like we always did
if that's not the case.
So I want to render totally different jsx code based on my dimensions.
So here I'll add an if check and say if dimensions get window height, let's say if that's smaller than 500
and we'll see if that value works, then I want to return
basically this jsx code from down there,
so I'll copy that, put it between brackets here, parentheses but I don't want to have my card here,
instead I'll have the first main button before my number container, the next one after the number
container and I'll have all of that inside of a new
view here which I'll wrap around this, which should lay these three things out in a row.
So I'll add a brand new style here, styles let's say controls or whatever you want to name it
and now I add this to my stylesheet here and that's the same stylesheet as before because it just
sets up styles that I can use anywhere my component no matter under which conditions I render what
and here I'll set this flex direction to row,
the default is column and now we want to have a row here and I'll set justify content to space around
and we'll see how that looks like. If we now save this and we start a new game here in landscape mode,
doesn't look too bad,
still some work to do but this is now what I get here in landscape mode or on devices with limited height.
On devices with more height,
I still get the old view here which is of course exactly what I want.
Now let's fix this view here and therefore we can simply go to controls and give that a width of let's
say 80% so that the overall container is bigger and very important, set align items here
to center so that the number container and the two buttons are all centered vertically. And now with that
if we give that another try here, we enter this, this looks way better and it works in the same way as
before but now we have a different layout based on our dimensions.
Now of course the problem is this layout doesn't change if we rotate, not the end of the world but we
might want to change back to that old layout and you learned how that works,
we just need to manage this with state and set up a listener.
Now I already have useState and useEffect here in the game screen so all we need to do in our game screen
component is start by setting up that state here and in the end what we want to manage here is our device
width which changes over time, maybe name this available device width to make it clear that we're
not setting the device width here, we're just setting the detected
device width, you could therefore also name this detected device width.
I'll name it available device width and set available device width. I manage this with useState where
I use dimensions get window width to get the available device width and of course, I just recognized this
is wrong,
we're interested in the height, not the width
but we'll need the width as well for this check here, so we'll need both.
So we have the available device width and I'll also manage another state,
that's our available
device height, here also
this is set available device height and therefore here
initially, we get the available device height and now we need to change both
when our orientation changes. For that, we can use effect for example here, set up a function that runs
whenever our component renders and in this function here, I'll setup dimensions, add event listener,
listen to change events and setup a function which should trigger when that's the case, update layout
for example is a fitting name because that's exactly what we're doing
and in there, I call set available device width and I set this to dimensions get window.width and
of course also set available device height to dimensions get window height. Update layout is therefore
the function we point at on our event listener on dimensions and just as before, we need a cleanup function
to avoid unnecessary renders and in this function, we simply use dimensions remove event listener change
where we point at update layout and we're good. Now we just need to use our two states here - available
device width and available device height.
So in this if check here, I use available device width and here where I'm interested in the height,
I use available device height. If we now save this, we should have a layout where if we start a game, we
have this look but if we then rotate into landscape mode, this changes and of course also changes
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
looking good and this is giving us the look we want based on the available width and height and it also
respects changes to that when we rotate the device.