1 00:00:02,200 --> 00:00:06,380 So we spent loads of time on this first screen but obviously for a good reason, 2 00:00:06,400 --> 00:00:11,950 this course is about learning React Native after all and you learned a lot about layouting, styling, 3 00:00:11,980 --> 00:00:16,810 connecting components, using multiple components and configuring built-in components already 4 00:00:16,810 --> 00:00:23,920 and that is a core part of React Native and what allows you to build real apps in the end. Nonetheless, it's 5 00:00:23,920 --> 00:00:26,840 now time to continue working on this app and 6 00:00:27,190 --> 00:00:31,630 before we dive deeper into other things we could style which I'll do later, 7 00:00:31,840 --> 00:00:36,640 I want to make sure that this start game button works because right now we're always stuck on this 8 00:00:36,640 --> 00:00:43,030 start game screen but now, I'll add a second component to the screens folder, the game screen itself, so 9 00:00:43,210 --> 00:00:49,390 the screen, the content I want to show on the screen when the game is running and that is the screen 10 00:00:49,390 --> 00:00:54,940 that is responsible for showing the guess of the computer and allowing the user to tell the computer 11 00:00:54,940 --> 00:00:58,780 whether that's right or wrong, if the value should be lower or greater, 12 00:00:58,930 --> 00:01:01,070 so that's the goal here. 13 00:01:01,120 --> 00:01:04,660 Now as I mentioned before, it's a regular component nonetheless, 14 00:01:04,660 --> 00:01:11,620 so we need to import React for sure and we'll also import some stuff from React Native, 15 00:01:12,010 --> 00:01:17,640 most importantly of course the view and the text, you can never go wrong with these, also the stylesheet 16 00:01:17,650 --> 00:01:20,260 of course, you typically always need these. 17 00:01:20,590 --> 00:01:28,150 Then here, we can add our game screen functional component, create the styles object here by 18 00:01:28,150 --> 00:01:38,310 using Stylesheet.create like that and in the end, export our game screen here as the default and get 19 00:01:38,310 --> 00:01:40,790 rid of that plus here at the top. 20 00:01:40,800 --> 00:01:45,340 So now we have that game screen component defined here and 21 00:01:45,370 --> 00:01:49,980 now let's briefly pause and think about what needs to happen here. 22 00:01:50,190 --> 00:01:55,620 Now in the end what needs to happen is that the computer needs to make a guess and it needs to make 23 00:01:55,620 --> 00:01:56,460 a guess 24 00:01:56,520 --> 00:02:04,400 initially when this screen first loads but then also whenever the user basically presses the this is 25 00:02:04,410 --> 00:02:05,230 too low or 26 00:02:05,310 --> 00:02:07,020 this is too high button, 27 00:02:07,020 --> 00:02:13,460 so whenever the user gives a hint regarding whether that guess is, in which direction of the real number 28 00:02:13,490 --> 00:02:18,990 this guess is so to say, whenever that happens we want to generate a new guess. 29 00:02:19,080 --> 00:02:27,240 Now the guess itself should be a random number and therefore, I'll start by creating a new function outside 30 00:02:27,360 --> 00:02:28,740 of my functional component 31 00:02:28,740 --> 00:02:35,700 now because it will not use any data from in there, so it shouldn't be recreated on every re-rendering of 32 00:02:35,700 --> 00:02:38,190 the components simply to save some performance, 33 00:02:38,250 --> 00:02:44,820 if you don't rely on props or state, you can also simply have a function that resides outside of your 34 00:02:44,820 --> 00:02:48,210 component and I'll name this generate 35 00:02:51,000 --> 00:02:52,770 random between 36 00:02:52,770 --> 00:02:54,920 because that's what this function will do. 37 00:02:54,930 --> 00:03:00,360 It's a function, it will generate a random number between a minimum and a maximum and which also allows 38 00:03:00,360 --> 00:03:02,010 us to exclude certain numbers, 39 00:03:02,070 --> 00:03:09,510 for example the first number we generate should exclude the solution so that the device, the app can never 40 00:03:09,510 --> 00:03:14,010 guess the user's choice on the first try. 41 00:03:14,010 --> 00:03:21,210 Now in here, minimum will be normalized to Math.ceil minimum, 42 00:03:21,210 --> 00:03:31,160 so to basically have an integer number here if a non-integer is entered and round it up and max will be 43 00:03:31,160 --> 00:03:42,000 floored to do the same but rounded down. Then I'll have my random number which I generate with Math.random 44 00:03:42,810 --> 00:03:45,920 and Math.random gives us a random number between 0 and 1, 45 00:03:45,930 --> 00:03:54,470 so to have a number between min and max, we have to multiply this with max - min and then also 46 00:03:54,970 --> 00:04:05,880 in the end, add min here here but also make sure that you call Math.floor on the result of this entire 47 00:04:05,880 --> 00:04:10,410 operation here and this will give you a random number between this minimum and maximum. 48 00:04:13,340 --> 00:04:14,620 Now with that generated, 49 00:04:14,630 --> 00:04:20,750 I want to check if the random number is equal to the number we want to exclude, which would of course 50 00:04:20,750 --> 00:04:28,200 be a very rare coincidence but it can happen, in which case I will return the result of 51 00:04:28,200 --> 00:04:33,300 another generate random between call where I simply forward min, max and exclude which we got, 52 00:04:33,300 --> 00:04:39,440 so I will simply repeat generate random between and return the value of that repeated run if we there 53 00:04:39,460 --> 00:04:43,700 get the excluded value again, we'll repeat it one more time so ultimately we'll get there 54 00:04:43,920 --> 00:04:49,140 and if we don't have the excluded number which should be the case in most cases, then I'll just return that 55 00:04:49,140 --> 00:04:51,030 random number right away. 56 00:04:51,030 --> 00:04:55,940 So this is now a function which generates us a random number. 57 00:04:56,050 --> 00:05:06,070 Now here in the game screen, I want to manage some state, so I'll import the useState hook from React 58 00:05:06,700 --> 00:05:12,040 and initialize some state here with the random number because the state I want to manage here is the 59 00:05:12,040 --> 00:05:15,400 guess of the computer, the current guess 60 00:05:15,490 --> 00:05:21,640 and that also needs a set current guess function so that we can change this whenever the user gives 61 00:05:21,640 --> 00:05:22,900 a new hint. 62 00:05:22,900 --> 00:05:29,410 So here, we can call generate random between to generate an initial state which will be saved and this 63 00:05:29,410 --> 00:05:31,990 will then only be considered as an initial state, 64 00:05:31,990 --> 00:05:37,540 so when this component rebuilds and therefore use state is called again, we'll generate another random 65 00:05:37,540 --> 00:05:43,810 number again but this will then not override that state because once the state is set initially, it 66 00:05:43,810 --> 00:05:47,560 will not be overridden again by adding value derived here. 67 00:05:47,570 --> 00:05:54,190 This will only be considered by React if we have no initial state yet, thereafter this initial or updated 68 00:05:54,190 --> 00:06:00,400 state will be managed detached from the component and will not be overridden again by this call here. 69 00:06:00,400 --> 00:06:05,640 Initially however we need to make this call, we want to get a random number between 1 and 100, 100 70 00:06:05,650 --> 00:06:08,170 is excluded with the logic we wrote up there, 71 00:06:08,200 --> 00:06:12,700 so it will be a number between 1 and 99, 99 included 72 00:06:12,790 --> 00:06:15,580 and I want to exclude the choice of the user. 73 00:06:16,210 --> 00:06:19,040 I expect to get this on my props here, 74 00:06:19,150 --> 00:06:25,480 so user choice could be a prop name we use here and that's the value I want to execute because that's 75 00:06:25,480 --> 00:06:26,350 the solution 76 00:06:26,440 --> 00:06:30,310 in the end and we won't be able to guess the solution right away, 77 00:06:30,310 --> 00:06:31,480 that would be a bit unfair.