Download "Let's build WORDLE with React Native (tutorial for beginners) 🔴"
%3Aformat(webp)%2Fi.ytimg.com%252Fvi%252F2SpbSIPiDM0%252Fmaxresdefault.jpg&w=1139&q=75)
Table of contents
Similar videos from our catalog
%3Aformat(webp)%2Fi.ytimg.com%252Fvi%252FW1Co2M-gsQE%252Fmaxresdefault.jpg&w=1139&q=75)
![Build a Secure Realtime Chat App in React Native [3] (tutorial for beginners) 🔴](/_next/image?url=https%3A%2F%2Funidownloader.com%2FcontentImages%2Fujyn08UwU0nHKDzCs4sE6vPxiIk%3D%2Ffilters%3Aquality(80)%3Aformat(webp)%2Fi.ytimg.com%252Fvi%252Fu7NXKu5hbbY%252Fmaxresdefault.jpg&w=1139&q=75)
Video tags
Subtitles
Russian
00:00:01
all right hello everyone what's up no00:00:04
jazz developers00:00:06
super pumped up uh to be back to the00:00:09
live stream today we are building00:00:11
something new today we are building a00:00:13
new game in react native um yeah let's00:00:17
first of all see what uh today's00:00:20
tutorial is going to be about and then00:00:22
we can have a little bit of talk00:00:24
so uh here we have today we're gonna00:00:27
build a wordle clone00:00:30
most probably already know about wardle00:00:33
from social media from especially from00:00:35
twitter00:00:36
and um00:00:38
you're gonna00:00:39
get the point in a couple of uh minutes00:00:42
uh but yeah like everyone on twitter is00:00:44
sharing these00:00:45
green squares uh that was very00:00:48
mysterious for me i was thinking like00:00:50
what the hell00:00:51
is happening here it's most definitely00:00:53
another nft00:00:55
but apparently some of the subscribers00:00:58
told me about this world game i tried it00:01:01
out and it's so simple and it's so fun00:01:04
but i decided to build a tutorial to00:01:06
show you how you can build a world00:01:09
application with react native for ios00:01:12
and android and by the end of this00:01:15
video you're going to build this00:01:17
application that you see right here00:01:20
and00:01:21
the point of this game is to try to00:01:24
guess award and the world is uh unique00:01:28
one per day for all the participants so00:01:31
anyone who is joining the game they will00:01:33
all try to guess the same word and i00:01:36
think this00:01:37
led to the popularity uh of this game on00:01:40
twitter00:01:41
and it's simple like you00:01:43
start with the first row like we00:01:45
understand that the word is from five00:01:47
characters and yeah let's see like i00:01:49
don't know let's put some random00:01:51
characters00:01:52
here and i'll put enter and if all of00:01:56
them are green that means that we didn't00:01:58
guess any letters00:02:00
all right let's try another00:02:03
another try00:02:04
and here we see two letters with yellow00:02:07
which means that these letters are in00:02:10
the word but they are at a different00:02:12
position00:02:13
all right so i don't know let's try h300:02:16
the first one00:02:18
let's enter oh we know that h is in the00:02:21
right position because it's with green00:02:24
always in the right position and also we00:02:26
have an e00:02:27
i think the word is hello and yeah00:02:31
we won and after that you can also share00:02:34
your result similar to the world game00:02:38
and after you press share00:02:40
you will copy the result that you have00:02:43
and after that you will be able to paste00:02:44
them here for example00:02:46
and here you see00:02:48
how many tries did you did you have00:02:51
until you nailed the world00:02:54
so um yeah this is the idea of today's00:02:58
tutorial00:03:00
and um yeah we're gonna build everything00:03:02
from scratch00:03:06
yeah super excited about that00:03:09
and00:03:10
yeah without further ado let's run the00:03:12
intro and then we can get started00:03:16
[Music]00:03:17
[Applause]00:03:18
[Music]00:03:22
all right so everyone who is joining00:03:25
today live hello guys where are you00:03:27
joining us from00:03:30
uh00:03:31
right down below yeah where00:03:33
are you currently00:03:35
until i managed to00:03:36
get back on track like for me it's00:03:39
uh00:03:41
like getting back like i almost forgot00:03:43
everything like what i have to do here00:03:45
but i'm gonna get there i'm gonna get00:03:47
there00:03:49
let me put the comments here so i could00:03:51
see them00:03:54
germany india argentina korea oh my god00:03:58
everywhere in the world uh all right how00:04:01
did you enjoy that time with uh with00:04:04
lucas the build with lucas by the way00:04:06
the crypto tracker that lucas is working00:04:09
on is not done yet and we will publish00:04:11
more videos in that project00:04:14
including deploying an application to00:04:18
to app store00:04:21
morocco india00:04:23
pakistan hello guys awesome00:04:27
all right so um00:04:29
without further ado let's start by00:04:32
initializing our project and we're going00:04:34
to use expo to do that because expo is00:04:37
the easiest way to get started and to00:04:39
build00:04:40
rack native application um00:04:42
[Music]00:04:45
with especially if you are a beginner00:04:47
uh expo is not sponsoring this video so00:04:49
this is totally my point of view all00:04:52
right so i'm going to open a00:04:54
terminal to get started00:05:00
and here in the terminal make sure let00:05:03
me zoom in a bit00:05:08
make sure you have00:05:10
um one of a recent version of expo and00:05:14
after that we can00:05:15
first of all let me go into a folder00:05:18
that i need youtube here00:05:23
and we can uh do expo you need to00:05:25
initialize our project and to give a00:05:27
name for our project i'm gonna call it00:05:30
wordle00:05:34
lucas is amazing yeah i'm also happy00:05:36
with uh the tutorials that he was doing00:05:39
and i wish that he's gonna stay with us00:05:42
for for longer to teach us00:05:45
everything he knows00:05:47
uh when we are asked to choose a00:05:49
template here let's choose a blank00:05:51
template basically the first one so just00:05:54
press enter00:05:56
and this will initialize a very minimal00:05:58
application and very clean without a lot00:06:01
of dependencies um because we will take00:06:04
it from there and we will build00:06:06
everything ourself00:06:10
hello from morocco i have always wanted00:06:12
to build that game awesome today is your00:06:15
chance to build it uh from scratch all00:06:18
the way till the end00:06:22
i was trying vox implant in expo project00:06:25
but was getting client module error00:06:28
most probably vox implant does not00:06:31
support expo00:06:33
or you will have to do some extra steps00:06:36
like i cannot answer your question um00:06:39
from the top of my head00:06:41
but most probably it doesn't00:06:44
so all right our application has been00:06:46
initialized now what we have to do is to00:06:50
go inside the project cdwordle and here00:06:53
we can write code and then dot to open00:06:56
the current directory00:06:58
using visual studio code00:07:00
if you don't have this um alias00:07:04
then you can simply open visuals to the00:07:06
code and from there do open project00:07:09
navigate to them folder that it was00:07:11
generated and open that way00:07:14
so now our project is open here00:07:19
all right and00:07:21
before we get into the code let's open a00:07:24
terminal by going in the top right top00:07:27
corner here terminal new terminal00:07:30
and here we will write npm start00:07:38
all right i have another server running00:07:41
so i'm gonna have to stop it first and00:07:44
then run npm start00:07:47
all right this00:07:49
open our export development window00:07:53
in a browser and again let me00:07:57
zoom in and from here what we can do is00:08:00
to run it on either an android device or00:08:02
ios simulator the application will work00:08:04
on both on both android and ios00:08:08
in my case i'm using a mac os so i'm00:08:10
going to run it on ios simulator because00:08:12
it runs00:08:14
smoother00:08:15
if you're working on windows machine or00:08:17
linux then go ahead and run it on an00:08:19
android emulator at the end i'm also00:08:21
gonna test everything on an android00:08:24
device to make sure that everything is00:08:25
compatible00:08:34
in your earlier tutorials you were00:08:36
always doing typescript yeah it depends00:08:38
from project pro to project like this00:08:41
project is quite simple uh it's fun to00:08:45
build but it's not very complicated and00:08:48
for this specific project i decided not00:08:50
to go uh with a typescript route in00:08:53
order not to confuse00:08:55
some beginners00:08:57
if your project is a little bit bigger00:08:59
than00:09:01
it definitely worth00:09:03
starting from the get-go with typescript00:09:05
and having00:09:07
everything typed there00:09:09
i spoke about the benefits of typescript00:09:12
and00:09:13
let me try again to run an ios simulator00:09:19
expo does support vox implant as far as00:09:21
i know00:09:23
that's a good point00:09:26
maybe you have to00:09:28
do the settings00:09:30
i'll have to i'll have to00:09:32
to look into this and i'm going to come00:09:34
with a response00:09:38
does it contain authentication no it00:09:40
doesn't00:09:42
not in this tutorial not in this episode00:09:45
i mean because i don't think we need00:09:48
authentication the world game like is00:09:51
free to play like anyone can go there00:09:53
and play00:09:54
and i think that's00:09:56
best for the user experience because00:09:58
it's a simple game like you just want to00:10:01
play i don't think we need to00:10:03
to make the user authenticate so here we00:10:06
have here we have our application on the00:10:08
right uh the only thing that we see is00:10:10
open up the js to start working on your00:10:12
application everything is working if00:10:14
you're new to00:10:16
react native development or expo00:10:18
development00:10:20
a few words about this development tool00:10:23
is00:10:24
uh00:10:25
on the right on the left side here you00:10:27
will see your device if you click there00:10:30
here you will00:10:32
start seeing all the logs that are00:10:35
coming from your application running on00:10:37
this device this is important because if00:10:39
something is not working come back here00:10:41
and you'll find more details00:10:43
about the issue or about any problem00:10:46
that you encounter in the application00:10:50
that was00:10:51
this is the most important that you need00:10:53
to know at the moment so let's go back00:10:56
to our project and what do we have to do00:10:59
let's open up.js00:11:01
and here if we will update this text to00:11:05
hello world00:11:06
we will right away see it updated in our00:11:10
emulator here on the00:11:12
right perfect00:11:15
uh so guys before we00:11:18
start coding let's import a couple a00:11:21
couple of files uh that will be00:11:24
important for our project i prepared00:11:26
them for you in order for you not to00:11:28
waste time for example i prepared the00:11:31
keyboard00:11:32
component00:11:34
and other important files there that we00:11:36
will need such as colors you can get it00:11:39
by following the link in the description00:11:41
below or go to00:11:43
assets.notjust.dev slash wordle wordle00:11:47
yeah probably00:11:49
you'll find the link in the description00:11:50
below download the00:11:53
the asset bundle and when you open it00:11:55
you will see here00:11:57
a source folder and some screenshot of00:12:00
application00:12:01
for you to easier00:12:03
know what we are building so what are we00:12:06
going to do with this source we are00:12:07
going to take it and drag and drop in00:12:10
the root of our project00:12:13
okay00:12:16
yes add folder to workspace00:12:19
do you trust yes00:12:23
no i think i did it wrong it shouldn't00:12:26
be there00:12:29
i messed up00:12:33
let me try to delete it from here00:12:37
folder00:12:40
what did it create all right so again00:12:44
let me00:12:47
try to00:12:48
copy it inside the wordle so copy folder00:12:52
simply like that yeah copy folder00:12:56
and now inside our project in the wordle00:13:00
package here we see the source the00:13:03
source contains some constants and in00:13:05
the constants we will see i think it's00:13:07
too much00:13:09
in the constants for example we will see00:13:10
the colors that we will be working with00:13:14
uh we will see all the keys that we need00:13:16
for the keyboard and the important thing00:13:19
is here in the components we have the00:13:21
keyboard component00:13:23
that we will import soon in our app.js00:13:27
all right uh back to our app.js00:13:30
gs00:13:31
let's import colors import00:13:35
colors00:13:37
from00:13:39
source van00:13:41
constant00:13:44
constants like this00:13:46
save00:13:47
now for the background color of our00:13:50
application i want to say that it's00:13:52
colors dot black00:13:55
all right00:13:56
and00:13:57
this text00:13:59
i'm gonna delete and i'm going to add a00:14:01
new text below00:14:03
but before that look because our status00:14:06
bar has a style of auto00:14:09
i do not see the00:14:11
clock and the wi-fi indicator and so on00:14:14
so let's set the status bar to light in00:14:18
order to see these uh properties here00:14:21
okay after that what i want to do is i00:14:24
will start with uh the title of this00:14:26
page00:14:27
which is wordle00:14:30
and i'm gonna give it style equal styles00:14:33
dot title00:14:36
let's grab this title here00:14:39
and start00:14:42
first of all i'm going to set the color00:14:44
to colors dot00:14:46
uh light gray in order to see it on the00:14:49
screen yes it's there00:14:52
then00:14:53
look i'm gonna uh00:14:55
yeah00:14:56
title font00:14:58
size 32 probably00:15:01
that's good00:15:03
and also font weight bold to make it00:15:06
bolder yes00:15:09
uh the only thing that i would change00:15:11
here for this text is the spacing00:15:14
between letters now they're too close00:15:16
together00:15:18
we can do that by doing letter spacing00:15:22
and i'm gonna give if we give 10 that's00:15:24
too much probably seven yes that's00:15:28
better00:15:29
okay but the title our title00:15:33
should be on the top of the screen let00:15:35
me also open a screenshot so you could00:15:37
see better what's going on there00:15:42
here we have a screenshot00:15:44
so as you can see the title should be up00:15:47
top here in the application00:15:51
our title is in the middle because00:15:53
the container00:15:55
of our whole application aligns00:15:57
everything invest center so if i remove00:16:00
this one00:16:02
our title is not in the middle it's it00:16:05
moved to the top00:16:07
but i see a small issue like on some00:16:10
devices that do not have a notch00:16:12
everything is going to be perfect but on00:16:14
this specific device because it has a00:16:16
notch our text is behind the notch00:16:19
to fix that like you could go00:16:22
some easy route and add some margin top00:16:25
to this container just to move00:16:26
everything00:16:27
below00:16:29
but a better approach would be to use00:16:32
safe area view00:16:34
a component that we can import from00:16:35
react native and i'm going to replace00:16:38
the root view with a safe area view by00:16:42
doing that00:16:44
a safer review is the same view but it00:16:46
will make sure that everything inside00:16:48
that view is visible on the screen so00:16:50
basically it protects you from00:16:53
notches it protects you from i don't00:16:55
know camera small cameras android have00:16:58
or uh below here there is also a small00:17:01
portion00:17:02
where the content could be hidden behind00:17:05
this line on the iphone00:17:09
so save a review title everything is00:17:11
good so far00:17:13
i think so00:17:15
let's go00:17:19
okay00:17:25
uh00:17:26
does okay00:17:32
so what is the next step if we look at00:17:35
this00:17:36
page00:17:37
let's actually let's import our keyboard00:17:41
and see it in action import00:17:44
keyboard00:17:47
keyboard00:17:49
from00:17:50
uh source directory then component00:17:54
not constants component00:17:57
then00:17:58
keyboard00:18:00
make sure you import00:18:02
the keyboard from this location where00:18:05
you have copied it and not from react00:18:08
native because drag native also has a00:18:10
keyboard there00:18:12
and let's simply00:18:15
render the keyboard00:18:17
and here we have it at the bottom of the00:18:19
screen we see the keyboard00:18:21
similar to how we00:18:23
need it00:18:26
you can go ahead and look into the00:18:28
keyboard and see how i build it because00:18:30
i'm i i did it myself um in the morning00:18:34
but00:18:35
yeah in a couple of words what we did00:18:37
here in the constants we have all the00:18:40
keys00:18:41
the key is an array of00:18:44
three other arrays00:18:47
every array represents one row of our00:18:49
keyboard and has all the characters on00:18:52
that keyboard00:18:53
now in our component00:18:56
we first of all map through all these00:18:58
key rows00:19:00
and we render one row for each row we00:19:03
map through each key and we render a00:19:07
pressable because we need to press on it00:19:09
and to detect00:19:10
presses and then we render a simple00:19:15
the key to uppercase text to render the00:19:18
actual letters on them on the keys00:19:22
that's how it works you can play around00:19:25
with styles if you want you can00:19:28
move the sizes for example key height if00:19:30
you want can be double the00:19:32
size of key weave and in this case like00:19:34
we're going to have super tall00:19:36
keys 1.3 for me was okay00:19:40
all right back in our app.js00:19:44
what do we have to uh to do00:19:50
we have to start00:19:52
rendering the map like the whole00:19:55
uh00:19:56
five by i don't know one two three four00:19:59
five six or something like that00:20:01
uh rose00:20:04
um00:20:05
yeah00:20:06
let's00:20:07
as we can see the map here00:20:10
i can even draw on it00:20:13
no probably i can't00:20:18
so00:20:26
i cannot all right00:20:28
don't worry so we have a map a map00:20:31
contains00:20:32
multiple rows as you can see six rows00:20:36
and each individual row contains00:20:38
one two three four five cells00:20:41
so this is important because we are00:20:43
going to work a lot with00:20:46
this00:20:47
b dimensional array in today's video00:20:50
because everything here is actually00:20:52
represented as a b dimensional array00:20:56
so um for that we will start with a view00:21:01
style00:21:03
styles dot map00:21:05
a view of that will contain the whole00:21:07
map00:21:08
after that00:21:09
we will have a view00:21:11
for our what is our next00:21:14
level of component it's a row00:21:17
it's a row and inside the row we are00:21:19
going to have view00:21:22
style equal00:21:24
styles dot cell00:21:26
so we have a map inside the map we will00:21:28
have multiple multiple of these rows00:21:32
and each row will contain multiple cells00:21:36
let me00:21:37
add these multiple cells five of them00:21:41
okay with that being said let's start to00:21:44
style some of it so mapro and cell00:21:49
map00:21:52
then we have row00:21:55
then we have cell00:21:59
for web map for the map00:22:02
first of all i would like to say00:22:05
let's00:22:06
do a background color red to see the map00:22:09
on the screen basically at the moment we00:22:11
don't see it because it doesn't have any00:22:13
width and height00:22:15
if we do like i don't know some random00:22:18
100 width00:22:20
height00:22:22
100 we will see it00:22:24
the thing is that for the weave we want00:22:27
the map to take the full available space00:22:30
on the screen00:22:32
so instead of saying width is 10000:22:35
i will see how it should align so align00:22:38
self00:22:40
uh00:22:41
stretch basically00:22:43
stretch to fill the whole00:22:45
space00:22:46
in your parent component00:22:51
we can use flat list two dimensions i'm00:22:53
not gonna use a flat list for this use00:22:55
case uh i'm gonna simply map and render00:22:58
them because00:23:00
uh we have a limited number of cells00:23:03
like we00:23:04
don't have like i don't know infinite00:23:06
number of cells we know exactly how many00:23:09
and that's why i think it's okay not to00:23:12
use a flat list in this situation00:23:17
uh all right so we have a line cell00:23:20
stretch height 100 i'm gonna leave00:23:22
height 100 uh for a moment00:23:25
now for the row00:23:28
what do we have let's do a background00:23:30
color color00:23:32
blue00:23:33
and again we don't see anything if i add00:23:37
um00:23:39
again align self stretch00:23:44
then also some00:23:47
height00:23:48
50 for example when we see the row with00:23:51
a blue there00:23:54
perfect now let's the design vessel00:23:58
uh00:23:59
for the00:24:00
cell00:24:02
i'm gonna say that00:24:05
first of all let's do background color00:24:09
um initially the cell will have a00:24:11
background color00:24:14
i know i'm gonna go with green just to00:24:16
see it on the screen00:24:18
and a cell could be with00:24:21
3000:24:24
height00:24:25
30. everything with sizes i'm going to00:24:27
adjust and i'm going to make sure that00:24:28
they're responsive right now just for00:24:30
you to see that00:24:32
it's there00:24:34
we see them but the thing is00:24:37
you don't see them as a square because00:24:39
it's multiple of them on top of each00:24:41
other so i'm gonna add border00:24:45
width of one00:24:46
and border00:24:48
color00:24:49
of colors dot00:24:53
gray00:24:57
okay00:24:58
something is there and i probably don't00:25:00
need the background color because i will00:25:02
still see them00:25:04
okay the first problem that we see here00:25:06
is that they are not in the same row to00:25:08
fix that we will go to the row component00:25:11
and i'm gonna say00:25:13
flex direction00:25:15
row00:25:16
basically render all the child00:25:19
components inside this row00:25:21
in the same yeah row we see them there00:25:25
perfect00:25:26
now instead of saying we 30 instead of00:25:29
hard coordinating the width of this cell00:25:31
i will rather sell say flex 1 and this00:25:35
will mean that00:25:36
divide the space00:25:40
with your siblings00:25:42
so if00:25:44
all the cells00:25:46
inside that row has a flex 1 they will00:25:48
divide the space equally if one cell has00:25:51
flex 2 it will take to 200:25:54
times as much space as the others00:25:57
so just by saying flex 1 we make sure00:26:00
that the horizontal space00:26:04
of these00:26:05
cells00:26:06
is00:26:09
yeah spread between all the children00:26:13
now for the height instead of saying hi00:26:15
i would uh i want my00:26:19
cells to be square00:26:22
well00:26:24
that is possible00:26:26
using aspect ratio and if i say aspect00:26:28
ratio of 100:26:30
my square become00:26:32
my cells become square00:26:35
if i do 1 over 2 then they will have two00:26:38
times as much height as their width00:26:42
that's why we need just one over one or00:26:45
simply one00:26:47
now uh00:26:48
our row doesn't need the height because00:26:50
it will take the height of the cells and00:26:53
if i remove it you see the blue00:26:56
moved to00:26:57
fit our00:26:59
cell's height00:27:01
i don't need this blue00:27:05
and what else i don't need00:27:07
well uh v cell will probably have a00:27:11
margin of five00:27:14
is it enough00:27:17
or even less like three is gonna be00:27:20
enough and i'm gonna remove this red00:27:22
thing00:27:24
perfect i will increase the border width00:27:27
to00:27:28
two00:27:29
like this00:27:31
and let's try a dark gray yes now is00:27:34
better or even free border with00:27:38
yeah i think that's that's good00:27:50
uh could you by the way show your visual00:27:52
studio code extension in a video we have00:27:54
a video00:27:55
about my visuals to the code extensions00:27:57
on the channel i can find it there or00:28:01
momo can drop a link in the in the00:28:04
comments00:28:08
it's been a while yes i also missed the00:28:12
live streams i'm i'm super busy these00:28:15
days with with a course i've been00:28:17
working the whole00:28:19
like the last months00:28:21
almost full time like every day00:28:23
on the course and00:28:25
finally we managed to finish the rack00:28:28
native part we have almost everything00:28:31
that needs to be there and now i'm00:28:32
working on the backend part with amplify00:28:35
we have two modules ready for um like00:28:39
setting up everything and then00:28:40
authentication and there like i spent00:28:43
like00:28:45
this week alone just00:28:47
preparing one video from the00:28:48
authentication like to go into00:28:51
all the details to research and to make00:28:53
sure that what i'm teaching you is uh00:28:56
the industry best standard and um yeah00:28:59
like all the edge cases that you can00:29:01
encounter that's what you're gonna learn00:29:03
during the course00:29:05
so if you are not already join the wait00:29:07
list by following the description in the00:29:09
link in the description below and you'll00:29:12
be the first one to be notified when the00:29:14
course00:29:15
is launched to the public00:29:17
which is going to happen00:29:19
soon in the next couple of months00:29:23
all right00:29:33
all right or you could just do with 10000:29:37
with 100 percent00:29:39
also works in some situations00:29:42
but00:29:43
it's a bit tricky because if apartment00:29:45
has a padding00:29:47
then with 100 will not work it will not00:29:50
consider the padding of a parent00:29:54
all right so uh we have00:29:57
successfully rendered one row there if i00:30:00
copy and paste00:30:02
this row00:30:04
again here00:30:06
boom we have two rows00:30:08
perfect but we are not gonna do copy00:30:10
pasting here because00:30:11
uh that's not the best way to do it00:30:14
whenever you copy paste you know that uh00:30:16
you remember about the dry concept don't00:30:19
repeat yourself00:30:21
and whenever you copy paste that means00:30:23
that probably something can be done00:30:26
better00:30:27
so what i'm going to do i'm going to00:30:29
leave here00:30:31
only one cell00:30:33
and i write away00:30:35
see an issue00:30:37
if00:30:38
the cell00:30:41
if a word will contain i don't know for00:30:43
example three letters00:30:45
then the cells will be too huge and it00:30:48
will not fit all the all six rows00:30:51
like if i do six of them they will not00:30:53
fit for that reason i'm going to add a00:30:56
max00:30:58
width00:30:59
to our cell max00:31:01
with can be00:31:03
i don't know 60.00:31:05
and now our00:31:07
cells will00:31:09
will share this the00:31:12
space00:31:13
that they have but they will not have a00:31:16
width bigger than 60.00:31:18
i can probably do 7000:31:21
yes that that will make sure that00:31:22
everything is visible even on smaller00:31:24
screen devices00:31:26
uh but i want to make them make them in00:31:29
the middle so for the row i'm gonna do00:31:33
uh justify content00:31:36
center00:31:37
boom very in the center perfect00:31:41
okay so00:31:44
the amount of cells that we render in a00:31:47
row what00:31:49
does it depend on00:31:51
the amount of cell that we render in a00:31:53
row depends on how many letters does the00:31:56
word have00:31:57
okay so for that reason let's start with00:32:00
defining a simple word00:32:02
so word equal to hello all right00:32:08
now uh that number00:32:11
of00:32:12
letters00:32:15
or no let's00:32:17
instead of doing number of letters00:32:19
i'm gonna to split this word00:32:24
in an array of characters00:32:26
so um00:32:28
letters00:32:29
is equal to word dot00:32:33
split and i'm gonna split based on00:32:36
uh based on nothing and that will00:32:40
what it will do it will return an array00:32:42
of characters for example h the second00:32:44
one is e00:32:46
but then is l00:32:48
then is l again then is o00:32:52
now that we have this array of00:32:55
characters00:32:56
we can take it with letters00:32:59
and instead i'm gonna delete all the00:33:01
cells except for one00:33:03
here inside this row00:33:06
i want to00:33:08
map through the letters00:33:11
map00:33:14
and for each letter what i want to do is00:33:17
i want to render a cell here00:33:22
save00:33:23
boom we have five letters if i'm gonna00:33:26
do here00:33:27
one two three four something like that00:33:29
we have that many uh spots as many00:33:32
letters we have if i'm gonna do just one00:33:35
we're gonna have only one square there00:33:45
someone is suggesting we can wrap the00:33:46
map in a scroll view just to handle the00:33:48
edge cases when a number of letters are00:33:51
a lot00:33:52
that's a good suggestion suggestion so00:33:56
um00:33:57
i'm gonna first of all00:34:00
i'm gonna get there like i'm i have an00:34:03
idea how to showcase the problem and how00:34:05
to show how to solve it00:34:08
now00:34:10
now now what do we have now00:34:14
um [Music]00:34:17
all right so we have00:34:19
the00:34:20
number of letters now00:34:23
we need to00:34:24
render multiple rows00:34:27
now think about what does the number of00:34:30
rows depend on00:34:33
it depends on the number of tries that00:34:35
you want to let people00:34:40
take00:34:41
so that00:34:43
can be like i don't know somewhere you00:34:45
can store it00:34:46
number00:34:48
of00:34:49
tries equal to six00:34:53
this is how many tries we want00:35:00
one moment i'm gonna go back to the to00:35:02
the chat shortly now i just want to00:35:04
focus to to make sure that everyone is00:35:07
on the same page with this uh solution00:35:14
all right00:35:21
um00:35:26
well we could simply do a for loop here00:35:30
from 0 to 600:35:32
and render that many rows like this is a00:35:35
row that many rows00:35:38
the issue with that is00:35:43
there is no00:35:44
not an easy way to00:35:46
[Music]00:35:47
loops for example six times in00:35:50
javascript00:35:53
and00:35:54
for that reason we00:35:56
will need to map but to map we need an00:35:59
array00:36:00
of00:36:01
an array of data to map over00:36:06
uh00:36:08
look we will have to keep in state00:36:12
all our tries basically the whole map00:36:17
we should keep it in state the whole map00:36:20
and what is this map00:36:22
for example rows is equal to00:36:26
i don't know00:36:27
this is the first try the first try the00:36:30
user wrote these letters00:36:36
i'm trying to00:36:38
show you the data structure that we're00:36:39
gonna use the second try the user00:36:42
wrote these words right00:36:45
for example00:36:48
the third row the user00:36:50
didn't write anything yet so that's why00:36:52
they are empty00:36:54
and the fourth one and so on and we need00:37:00
for example if number of tries is six we00:37:02
need six of these arrays in our row00:37:06
how we can generate this beta b00:37:08
dimensional array dynamically based on00:37:12
the number of tries00:37:13
and based on the00:37:15
number of letters in the world00:37:19
uh we can do that by00:37:23
using the array00:37:25
dot00:37:26
uh00:37:27
it's00:37:28
no it's actually new00:37:31
array00:37:32
here we need to specify the array length00:37:35
the array length is the number of tries00:37:37
because that's how many rows do we need00:37:41
now let's fill this array00:37:46
and we will fill00:37:48
every00:37:49
every row00:37:51
with a00:37:52
an array00:37:54
of how many00:37:55
how many characters00:37:59
letters00:38:00
dot00:38:02
length and then we will fill that array00:38:06
with empty strings because user didn't00:38:10
take any chance yet00:38:13
so our rows contains an array of rows00:38:17
and every row contains an array of cells00:38:21
that are empty strings at the moment00:38:24
later on we will update them with actual00:38:26
data that the user put there00:38:30
okay so now our map actually depends on00:38:35
this uh00:38:37
on this b dimensional array that we00:38:39
declared here this is the data that we00:38:41
will have to render00:38:43
on the map on the screen00:38:48
so00:38:49
let's take this view that renders a row00:38:54
and instead of rendering just one row we00:38:56
are going to map through all the rows00:38:58
that we have so rows dot map00:39:02
for every row00:39:05
basically render00:39:06
a row00:39:08
this one00:39:12
so for every row00:39:14
render one row we already see it there00:39:18
and then00:39:19
instead of looping through these letters00:39:22
i would rather00:39:24
loop00:39:25
through00:39:27
the row itself because row00:39:30
map and now we will have a cell00:39:33
from the screen not a letter00:39:37
which will contain the data about the00:39:39
letter00:39:40
on that like row in that specific cell00:39:45
okay that's interesting um00:39:50
now00:39:52
what i want to do what i want to do00:39:57
i want to show you how we can render the00:40:00
data inside this row because that00:40:02
probably will make a little bit more00:40:04
sense so i'm going to expand this view00:40:07
for the cell because inside the view we00:40:10
want to render a text00:40:12
and the text will be the00:40:14
cell00:40:16
and we can do two upper case00:40:19
per00:40:21
case00:40:22
to make sure that the character is to00:40:24
uppercase00:40:25
now if i will fill all the characters00:40:28
with an a for example00:40:32
i see it there but we need to apply some00:40:34
styles because it's rendered with black00:40:36
and you cannot see it so style dot cell00:40:40
text00:40:43
below cell let's do00:40:46
cell text00:40:49
and first of all i want to change the00:40:50
color to colors00:40:54
light gray00:41:01
it's styles not style okay00:41:03
alright we see it there right away00:41:07
we will have to adjust some styling of00:41:08
it first of all to align it in the00:41:10
middle00:41:11
we are going to apply00:41:13
justify content center00:41:15
and align items center00:41:18
to the00:41:19
container to the cell00:41:24
align not self but align00:41:27
items00:41:29
that's in the middle now for the cell00:41:31
text i'm gonna do font weight00:41:35
bold00:41:38
and also font size00:41:42
2800:41:44
yes that's that's good enough let me00:41:47
open now another screenshot from our00:41:52
package there00:41:55
that will contain00:41:58
more information here so yeah the sizes00:42:01
of the letters i think are good00:42:10
okay so00:42:12
how is it so far00:42:14
is anyone following along live while you00:42:17
are uh watching it right now00:42:20
do you manage to do everything00:42:23
oh uh now i will showcase the error that00:42:26
someone was suggesting as vr00:42:30
so for example if let's say the number00:42:33
of tries i don't know is00:42:34
1500:42:36
then we'll have 15 rows00:42:38
the issue with this is that we cannot00:42:40
scroll and we do not see the last rows00:42:43
so we can solve that by using a00:42:47
scrollable or a scroll view00:42:49
from react native00:42:51
and we will wrap our map inside a scroll00:42:55
view so we will replace the view for our00:42:57
map with a scroll view00:42:59
now our map is scrollable as you can see00:43:03
here00:43:05
so just by doing that we make sure that00:43:08
on any device sizes even if it's a pager00:43:11
i don't know like we will be able to see00:43:13
all the lines there00:43:16
and let me go back to six tries00:43:20
as default00:43:24
uh two to two00:43:28
add some margin top is too close to the00:43:29
title yes we can do that to the map00:43:33
container we can add margin vertical00:43:37
10.00:43:41
or 20 how much do you want 20 is okay00:43:44
yes00:43:47
good what what's our comments we can00:43:50
wrap the map in a scroll view just to00:43:51
handle yes that's what we did right now00:43:54
is the keyboard a package or a custom00:43:56
component the keyboard is a custom00:43:58
component that00:43:59
you can get by downloading the set00:44:01
bundle in the description below so here00:44:04
is the keyboard.js that renders all of00:44:07
our map all of our keys it's quite small00:44:09
like 50 lines of code00:44:11
but it it does its job00:44:22
so how would you go about certain people00:44:24
using different like00:44:26
azerty00:44:27
uh00:44:28
instead of qwerty keyboards um i don't00:44:31
know that's a good thing to to implement as00:44:34
an improvement so if you want to do that00:44:36
go ahead i encourage you to do that00:44:40
i used a custom keyboard because we will00:44:43
also00:44:44
display with different colors different00:44:47
keys depending on if we um guess them or00:44:50
not so that's why i couldn't use the00:44:53
default keyboard from the system because00:44:56
we lose this quite interesting feature00:44:58
of uh highlighting the keys that the00:45:02
letters that you already guessed and the00:45:04
ones that you didn't00:45:07
uh crazy yeah looks good you can also00:45:10
use ref for the scroll view to00:45:12
automatically scroll when needed yes00:45:14
that's also good that's a good00:45:16
suggestion00:45:17
i'm not gonna do that that's a bit extra00:45:20
for00:45:21
for now at least00:45:22
but00:45:24
yeah00:45:25
that's what we have at the moment00:45:29
i see never played word all makes sense00:45:32
yes00:45:33
all right00:45:36
let me see what in my task list what are00:45:39
the next steps00:45:41
so we00:45:42
map from the tries we render all the00:45:45
rows00:45:46
then we have a keyboard00:45:49
and now probably we will have to get00:45:51
into the uh00:45:53
into the state00:45:57
we will um yeah before that let's see00:46:02
we will have to start working on our00:46:05
game logic whenever i press on some00:46:08
letters i want them to be filled inside00:46:11
our map here00:46:15
so first of all keyboard has a00:46:18
on key pressed function00:46:21
that we can00:46:23
that will be called whenever we press on00:46:25
a key and it will send us the letter00:46:28
from that key00:46:29
so let's implement this00:46:31
const00:46:34
on key pressed here00:46:37
we will get the key00:46:40
and it's a simple function let's do00:46:43
console00:46:44
worn at the moment00:46:46
um key00:46:49
so if i press right now on r i see r00:46:52
here if i press on k i see k00:46:56
perfect so00:46:58
what should happen when we press on a00:47:00
key00:47:01
we should update our rows here00:47:06
in order to update our rows and to00:47:11
to have reactive updates so basically if00:47:14
i simply update the row here nothing is00:47:17
going to happen because our component00:47:19
will not re-render00:47:21
in order to have00:47:22
um00:47:24
variables that the component depends on00:47:27
and whenever they are changed they00:47:28
should00:47:29
re-render the component00:47:31
then we need to introduce state00:47:35
state is yeah as i said we can import it00:47:38
from use00:47:39
state00:47:40
from react00:47:43
oh by the way uh the new00:47:46
version of expo00:47:48
uh the new version of expo where do we00:47:50
have it package.json00:47:53
we00:47:56
no longer have to import react from00:47:59
react in our components it is00:48:01
automatically imported this is coming00:48:03
from react native00:48:05
but before that it you should you had to00:48:08
always import react from react if you're00:48:11
using the latest version of expo now you00:48:13
don't have to do that00:48:15
little trick but it's very useful00:48:18
sometimes00:48:20
so you state00:48:23
our rows will become00:48:26
a state so we remember it's rows then00:48:29
set rows00:48:31
this is the value of our state this is00:48:34
the setter in order to update our state00:48:38
is equal to use state00:48:40
and here we need a default value what is00:48:44
going to be the default value00:48:45
well this empty array that we have00:48:48
created here00:48:50
so let's copy it from here paste it00:48:55
copy it from here paste it here00:48:58
and we will not need this rows here00:49:03
all right now that our component is00:49:05
using state for the rows00:49:08
we will be able to update00:49:11
the rows00:49:13
and then00:49:15
we will see these updates00:49:17
here on our map for example if i simply00:49:20
set rows00:49:22
to00:49:23
an array of just one00:49:26
two00:49:27
and three00:49:30
if i press on something all the cells00:49:32
will will be gone and only these things00:49:35
will remain remain because that's what00:49:38
we declared here a map with only one row00:49:44
okay um00:49:46
how do we00:49:48
update uh specifically on the00:49:53
the cell that we are interested in00:49:56
well we have to00:50:00
remember00:50:02
what is the current active00:50:05
cell00:50:06
are we trying to write a letter on the00:50:09
first cell or the second cell or the00:50:10
third cell i don't know we need to keep00:50:12
track of that00:50:14
for that i will also use a state00:50:16
variable const00:50:19
named current row00:50:22
set current00:50:24
row use00:50:26
state and that's gonna start from zero00:50:30
the same for that const00:50:33
current00:50:34
um00:50:36
i don't know00:50:38
cell00:50:39
or00:50:42
it's the index like the the number of a00:50:44
column or00:50:46
current low current column let's go with00:50:48
column00:50:50
set current column usually uh when you00:50:53
work with b dimensional arrays there is00:50:55
this00:50:57
thing as rows and columns so that's why00:51:00
we need these two00:51:02
you state as well zero00:51:06
all right now00:51:08
what we have to do is to update00:51:11
the rows00:51:13
at this position at current row the and00:51:16
current column00:51:18
to contain the new key00:51:20
so how could we do that00:51:22
well we could do i don't know row equal00:51:25
um00:51:27
where no row at current00:51:30
row00:51:33
then is00:51:34
in the second part is current column00:51:37
to get the row and the column is equal00:51:40
to key00:51:44
note robot rows00:51:46
then just update them in the state set00:51:49
rows with rows00:51:52
that's00:51:53
that's it00:51:54
and nothing is happening00:51:56
why nothing is happening is because we00:51:58
have to00:51:59
we cannot update state variables00:52:02
directly00:52:04
basically what we have to do is to00:52:06
create a copy of this array update that00:52:09
copy and after that set it back00:52:12
in state00:52:15
for that i'm going to create a simple00:52:16
function00:52:18
because00:52:19
we have a b dimensional array and it's00:52:22
not that simple to to copy like we need00:52:24
to two steps to copy it so copy00:52:29
array00:52:31
equal we will get the array here00:52:34
and we will return what we will return00:52:37
the array00:52:39
well to00:52:41
copy a one dimensional array we simply00:52:44
do00:52:45
with the structure of the array into and00:52:48
we destruction values of one array into00:52:51
a brand new array and that will create00:52:54
a new array00:52:56
so repetitive but yeah that's uh that's00:52:58
how you do it for00:53:01
for one array00:53:03
but00:53:04
our array is b dimensional and we need00:53:07
to00:53:09
uh where do we have it so for example00:53:18
how do you start that like this00:53:21
so if you have00:53:23
one two00:53:25
three00:53:26
then our syntax00:53:29
uh cr00:53:30
cloned this the top the top array00:53:34
but the arrays inside they're still the00:53:36
same so for that reason we will have to00:53:41
map00:53:42
through the rows00:53:45
and00:53:46
do the same thing basically00:53:48
duplicate the rows by spreading them00:53:52
if i'm not mistaken that's how you do it00:53:57
all right00:53:59
let's give it a go00:54:01
so00:54:03
const updated rows equal copy array00:54:09
and we will take the00:54:11
rows00:54:12
we will00:54:14
create a copy of an array then we will00:54:16
update this array00:54:18
and then we will set it back in state00:54:22
boom00:54:24
let's have a look00:54:26
what is happening there00:54:28
if i do r yes00:54:30
we have our first letter in our map here00:54:41
all right how's it going guys00:54:44
what do you think about github co-pilot00:54:47
man i wanted to try it for so long like00:54:50
from from summer when i received an00:54:53
invitation to try it out but i didn't00:54:56
manage to to find time to try it out i00:54:58
really want to do it00:55:00
i just yeah i'm too busy to00:55:04
to get into it00:55:08
but i saw i saw how it works and i00:55:10
really think that i will enjoy it it00:55:12
will save a lot of time00:55:13
everything that can save me time like00:55:16
that's a good investment that's a good00:55:19
thing00:55:23
so we updated the rows but if i press00:55:26
again and again i still00:55:28
work with the same cell with that first00:55:31
cell00:55:34
how we can00:55:37
move to the next cell well we need to00:55:39
move that current uh column00:55:42
to the next cell00:55:45
so after we update the rows we will set00:55:48
current column00:55:50
to the00:55:52
current column00:55:54
current column plus one00:55:58
save00:55:59
now if i do f it's the first one then we00:56:02
move to the second one then r when t00:56:05
then h that's good uh i also want to00:56:09
in order to see for us visually which is00:56:13
the active00:56:14
cell we can do some um00:56:18
some interesting stuff here on the00:56:20
styles of our cell00:56:22
so i'm going to00:56:24
put this inside an array because i want00:56:27
to00:56:28
add00:56:29
the border00:56:31
color00:56:32
i want it to depend00:56:34
if that's the cell is active00:56:39
um00:56:42
so00:56:46
is00:56:47
cell active00:56:49
that's going to be a function but we'll00:56:50
implement in a moment00:56:52
uh the border color will be colors dot00:56:58
colors dot00:57:00
i don't know gray that's how you do it00:57:03
otherwise oh i forgot to put it inside00:57:06
the object that's why nothing is working00:57:08
here00:57:12
light gray otherwise00:57:14
what was the00:57:16
dark gray00:57:19
colors dot00:57:21
dark grey save00:57:24
now let's um implement this cell is00:57:27
active00:57:28
so i'm going to implement it here const00:57:31
cell is active we need to00:57:34
get the row and the column to understand00:57:37
if it's active or not and we will return00:57:40
at00:57:41
return true if row is the same as00:57:46
uh current row00:57:48
and if column is equal to current column00:57:54
now uh how do we get the00:57:58
index of our row and index of our column00:58:01
because we do not have them here the row00:58:03
is actually00:58:05
an array of data and the cell is a00:58:07
letter well when mapping were00:58:10
in most of00:58:12
javascript array methods00:58:15
the first one the first very value that00:58:17
you will get is the value itself the00:58:20
second one is the index00:58:22
so i can do here i00:58:24
and for the cell i can do j00:58:26
and i represents the index of our row j00:58:30
represents index of our column00:58:33
i can pass them here all right so right00:58:36
away we see00:58:38
uh00:58:41
the active00:58:43
the active cell00:58:45
uh highlighted so if i do f here active00:58:48
cell moves to the next one00:58:50
and so on until we reach the end after00:58:53
that i do it it moves00:58:55
to the to the next one which we do not00:58:58
have00:58:59
and now i can simply add a lot of um00:59:02
letters there00:59:05
um00:59:06
yeah in order not to be able to add a00:59:08
lot of letters here we will need to add00:59:10
some extra um00:59:12
some extra checks00:59:14
but look um00:59:17
while we are still here working with00:59:19
mapping and so on i want to point to a00:59:24
warning that we get the warning is each00:59:26
child in the list should have a unique00:59:28
key prop00:59:30
where is it coming from and where do we00:59:33
have lists00:59:34
well basically00:59:36
whenever we map through an array of data00:59:39
and render some00:59:41
items for each00:59:44
element in that data array00:59:47
what we are doing here00:59:49
then00:59:50
you need to provide a key00:59:53
a unique key to that00:59:56
component00:59:58
and that's because by mapping through01:00:01
through an array of data you potentially01:00:03
can have like thousands of elements01:00:06
and react uh needs to know how to01:00:10
properly re-render the components when01:00:13
the data changes01:00:15
and for that it needs a key so it's uh01:00:18
just for01:00:19
improving the performance behind the01:00:21
scenes uh for react01:00:24
uh what key can we give to this view01:00:28
well we can um01:00:30
this is a key and the same should happen01:00:33
to our row view01:00:35
it should also have a key01:00:37
for the row it's easier so i'm gonna do01:00:40
i'm going to add a template string with01:00:43
backticks01:00:45
and i'm going to say row and then01:00:48
dash01:00:49
and here01:00:50
the index of our row01:00:52
so basically the first row will have a01:00:54
key row 1 then row 2 row 3 row 4 and so01:00:58
on01:00:59
for the key of our cell01:01:03
we can do something similar cell01:01:07
can be01:01:09
first of all we include the01:01:12
id of our row and then we include the id01:01:16
of our cell01:01:18
just to have a unique key for all the01:01:22
cells that we have here on the map01:01:24
all right by doing that if i refresh01:01:27
i don't see the warning anymore because01:01:29
both our01:01:30
lists01:01:32
first one01:01:33
and the second one contain a unique key01:01:39
perfect hello hello everyone who is01:01:41
joining uh01:01:44
yeah a quick status update what we are01:01:46
building today is a world01:01:49
game in react native and if you're not01:01:51
familiar familiar this is a simple01:01:55
word game where you are trying to guess01:01:58
one word which is unique01:02:01
uh not unique which is the same for01:02:04
everyone during the same day so everyone01:02:06
is trying to guess the same word01:02:09
and01:02:10
um yeah like you feel in the first row01:02:13
uh if it's green that means that the01:02:16
letter that you chose is the correct one01:02:18
and is on the correct position if it's01:02:20
orange the letter is in the word but not01:02:24
on the wrong position and if it's gray01:02:25
like you01:02:27
didn't guess the letter so simple and01:02:29
very fun game01:02:31
that we are trying to build in react01:02:33
native01:02:46
john thank you very much for your01:02:48
message01:02:50
um i'll not read it because it it's in01:02:52
russian but yeah i really really01:02:54
appreciate your01:02:55
your support01:03:06
all right01:03:10
so where are we at well uh the next01:03:13
issue that we are trying to solve is not01:03:15
to overflow the row when we01:03:19
fill in all the01:03:22
columns01:03:24
so how do we do that01:03:26
well we need to check if01:03:32
um01:03:35
so we need to do this step01:03:38
only if01:03:40
current column01:03:42
is01:03:43
less01:03:44
than the01:03:48
letters dot01:03:50
length01:03:54
or let's not depend on this letter01:03:56
because i don't know maybe we will have01:03:58
it or maybe we will not have it in01:04:00
future but our map of rows we will01:04:03
always have01:04:04
so01:04:05
if current column is01:04:07
less than rows at position zero because01:04:10
if i just do like this it will return01:04:13
the number of rows but i want the number01:04:16
of columns and i'm gonna take it from01:04:18
the first row01:04:21
uh let's try to refresh if current01:04:23
column is less than that let's try01:04:26
one two three four five01:04:30
and now i cannot do any more01:04:32
well perfect01:04:35
first one is uh done inputting things01:04:39
now let's see how we can clear things01:04:43
like whenever i press on this clear01:04:45
button01:04:47
so01:04:48
uh to do that01:04:50
i'm going to import01:04:52
the or from constants i'm going to01:04:55
import this clear01:04:58
label which simply01:05:01
says clear but it's better to have them01:05:04
as constants because you know that01:05:06
you're not making any typos and if you01:05:08
do like your javascript will tell you01:05:12
so01:05:13
let's do it like this if01:05:15
key01:05:16
is equal to01:05:20
clear01:05:24
then we need to do something01:05:28
we need to do something and then we also01:05:30
need to01:05:31
return because we don't want to get here01:05:36
what do we have to do when we clear so01:05:39
let's visualize it if i have two01:05:43
um two letters here the first one is at01:05:46
position zero01:05:48
the t is at position one and our active01:05:51
current column is at position01:05:53
zero one two this is two01:05:57
so basically we need to01:05:59
move our current column01:06:01
one01:06:04
cell behind and then remove01:06:07
what is inside that cell right01:06:10
um01:06:12
so first of all let's remove what's in01:06:14
the previous cell so const previous01:06:17
column is equal current column -101:06:23
now01:06:26
let's copy this from here01:06:29
updated rows01:06:31
not in the current column but at the01:06:33
previous column01:06:34
will be equal to nothing we remove what01:06:38
was01:06:39
in the previous column01:06:41
then we update the rows01:06:43
and we also need to update the current01:06:45
column01:06:47
to the01:06:48
previous column01:06:52
just to move the active01:06:54
one back let's press on the clear and01:06:56
see if it works boom it works01:06:59
now it works and if i do it one more01:07:01
time01:07:02
we go in the negatives we lose track of01:07:04
it um01:07:07
to fix that let's do it like this01:07:10
if01:07:11
priv column01:07:14
is more or equal than zero right01:07:17
previous column01:07:18
if it's more or equal than zero we need01:07:20
to do01:07:22
this01:07:24
the return should still be outside of01:07:26
this if statement because01:07:30
none01:07:32
even though01:07:33
it's not like we need to stop here01:07:35
because we don't if we press on the01:07:37
clear we don't want to execute this one01:07:41
so if i01:07:42
fill in some letters and if i press01:07:44
clear clear clear and one more time01:07:47
clear nothing happens because we are on01:07:49
the01:07:51
first column here01:07:53
and if i fill in all of the way01:07:57
yep it still works01:08:04
perfect01:08:05
the clear works01:08:08
following but at the slower pace01:08:12
hey mr frank you're back this is such a01:08:16
great idea of a dm world is so much fun01:08:18
yes i also started uh playing it and i'm01:08:21
enjoying itself i'm enjoying it and i01:08:24
decided to to build it thank you very01:08:26
much for the donation frank01:08:29
i remember you are one of the first01:08:32
supporters of the channels01:08:34
thank you01:08:37
okay01:08:43
uh the next01:08:45
key that we want to01:08:48
uh handle is the enter key right so for01:08:52
that i'm going to import the same01:08:54
enter keyword from our constants01:08:58
and the same way as we do if key is01:09:01
clear01:09:04
do this01:09:05
the same way i'm going to check01:09:08
if01:09:09
key01:09:10
is equal to01:09:12
enter01:09:14
if key is equal to enter01:09:16
what do we have to do01:09:19
well01:09:21
we have to01:09:22
move to the next row and to the first01:09:25
column01:09:27
easy let's check01:09:29
set current01:09:32
row to the row plus one01:09:37
then set current01:09:40
column to zero because we want to start01:09:44
from the01:09:45
left01:09:47
and that's probably it and if i press01:09:49
enter can find variable row01:09:53
because it's current01:09:55
row01:09:59
enter boom we are from a new line01:10:03
enter we are from a new line the issue01:10:04
is that i can do enter01:10:07
without finishing them the sentence so01:10:10
for that reason i'm gonna have to do one01:10:12
more extra check here01:10:14
if01:10:17
rows01:10:20
advect01:10:21
current row01:10:23
dot01:10:26
no no no i just need to check if01:10:28
current row01:10:30
no current column if a column is on the01:10:34
last01:10:39
cell that means that we have full01:10:42
a full word so if current column is01:10:45
equal01:10:47
to the amount01:10:51
of columns that our01:10:53
map have01:10:55
length01:10:56
then we can do this01:10:59
do you follow it01:11:00
is it clear01:11:02
can you write in the description if01:11:04
something is not clear and if i have to01:11:06
go over it again i understand it might01:11:08
be confusing because we have we are01:11:11
working a lot with this be the b01:11:13
dimensional array01:11:14
so it's01:11:17
for for some people it might be01:11:18
challenging i i agree01:11:21
let's test it now uh so if i have a01:11:23
couple of them i press enter nothing01:11:26
happens perfect if i press clear it01:11:28
clears however if i01:11:31
have it full i press enter it moves from01:11:34
a new line01:11:35
perfect01:11:38
that's good that's good01:11:40
um01:11:43
we are doing good progress01:11:46
amazing01:11:48
look uh what is our next steps01:11:53
you be doing backhand or will you store01:11:55
all of these words locally or will you01:11:58
leave that up to us01:12:00
uh in this01:12:01
episode i'm not gonna do the back end01:12:04
and uh i'm thinking that all the words01:12:06
i'll keep them locally because there is01:12:09
one word per day so you can easily put01:12:13
all of them and that's not going to be a01:12:14
lot of data that's going to be a couple01:12:16
of uh kilobytes01:12:18
or bytes01:12:21
hey seems i'm late to the party no01:12:23
you're not late like we01:12:25
um yeah we have some progress but you01:12:28
can always go back and watch it from the01:12:30
beginning01:12:34
uh what phone do you use in vs code i01:12:37
don't remember but i made a video about01:12:38
that specifically for forbids01:12:43
hello01:12:44
hello marco hello01:12:47
sonix i don't know01:12:57
okay01:13:00
let's start01:13:02
let's start01:13:04
to add some colors to our project01:13:08
uh you make it look easy01:13:10
um01:13:13
the thing is that i've prepared a bit01:13:15
this morning for the game and that's why01:13:19
it looks easier01:13:21
uh don't get the wrong impression like01:13:23
if you're struggling with this like i01:13:26
totally understand like this is quite01:13:28
complicated01:13:29
um01:13:30
and take your time try to understand01:13:33
what you're doing01:13:34
if you don't understand like why do we01:13:36
have here rows at zero like if i put01:13:39
rows at one will it still work01:13:41
and experiment like this like01:13:44
why do we have more or equal than zero01:13:46
if i put just more than zero will it01:13:48
still work and you give it a try um01:13:52
and then you try to clear and you see01:13:54
that you cannot uh clear the first one01:13:56
oh that's why we need more or equal than01:13:59
zero and so on like yeah try to01:14:01
understand why we are doing these things01:14:07
wouldn't the typescript based one make01:14:09
it easier to work uh for people that01:14:11
know typescript yes it would01:14:14
for people that don't01:14:17
know01:14:19
but not not hugely like this is01:14:21
relatively small application so01:14:27
it's not mandatory to use typescript01:14:32
maybe you could make use of user reducer01:14:39
that might be interesting01:14:41
but i'm not gonna do that i have it now01:14:44
because i'm gonna confuse you even more01:14:50
how to store word in icloud01:14:53
uh in icloud i don't know maybe you01:14:55
meant just cloud01:14:58
we could create a cloud backend for this01:15:01
application using amplify or firebase or01:15:04
any other backend that we want01:15:06
and to query that word of the day from01:15:08
there01:15:09
that's one approach as well01:15:13
um01:15:14
yes let me check if we are on track with01:15:16
everything that we have to do01:15:18
uh i'd let her to the map we did that01:15:21
don't overflow the world clear enter01:15:24
yes01:15:25
the next step is our01:15:28
yeah as i said adding some background01:15:31
colors01:15:35
how we are going to do that01:15:40
well um01:15:42
background colors we need to add to our01:15:45
cell here right01:15:48
so uh what i'm gonna do01:15:51
is01:15:53
i am going to01:15:55
add a new style here to these styles as01:15:58
background color01:16:01
and i'm not gonna try to do all the if01:16:03
statements here even though i can with01:16:05
question mark operator but we have a lot01:16:07
of them that's why i'm going to01:16:09
implement a function get01:16:11
cell01:16:13
bg color01:16:15
color and i will send to that01:16:19
function01:16:21
um01:16:22
i'll send three things i'll send the01:16:24
actual letter01:16:26
like the cell01:16:28
instead of calling it cell i should01:16:30
probably call it letter because it's a01:16:33
letter there01:16:37
and here as well letter01:16:40
can fire but okay01:16:42
i'll send to this function get a cell01:16:45
background color the cell01:16:47
the01:16:49
row and the column01:16:51
i'll send everything to know about it in01:16:52
order to understand if it's01:16:55
uh green if it's orange or if it's01:16:59
black01:17:00
so this function let's implement it here01:17:03
const01:17:04
equal01:17:06
letter01:17:07
a row and column01:17:10
so01:17:12
let's re let me remind you01:17:14
um what are the colors for i don't have01:17:19
any warranties here but the thing is01:17:22
if you guessed if a letter01:17:26
if01:17:27
okay let me try again if you guessed the01:17:29
letter and the letter is in the right01:17:32
position01:17:33
then it is displayed with a01:17:35
green background01:17:37
if01:17:38
the letter is not on the right position01:17:41
but the letter is inside the word that01:17:44
you are trying to guess01:17:45
then the background will be01:17:47
orange01:17:49
and otherwise if the letter is01:17:51
completely not in that word it's going01:17:52
to be with01:17:54
black01:17:55
so with that uh in mind let's start by01:17:59
checking01:18:01
if01:18:03
uh01:18:04
if01:18:06
our01:18:08
letter01:18:10
i think we do not need to send the01:18:13
letter here i mean it's not mandatory01:18:16
because we based on the row and the01:18:17
column we can take it from our01:18:20
rows here01:18:22
but having it it's still01:18:24
okay uh01:18:26
if letter01:18:29
that we're trying to display the01:18:31
background is the same01:18:33
as the01:18:35
where do we have it01:18:36
this01:18:37
word that we are trying to01:18:39
guess01:18:41
this word is an array of letters01:18:45
but we need to01:18:47
get the letter add the position column01:18:51
if they are the same01:18:53
that means that we guessed the letter01:18:55
and it's on the right position because01:18:57
we are checking specifically on that01:18:59
position01:19:01
then we will01:19:03
return01:19:04
colors dot01:19:07
think it's primary01:19:11
all right01:19:12
if we didn't guess the letter let's01:19:14
check if the01:19:16
word that we are trying to guess01:19:18
basically letters01:19:23
if it includes01:19:26
our letter that we are trying we we01:19:30
input there01:19:32
if it includes01:19:35
that means that the background color01:19:37
should be colors dot01:19:41
secondary01:19:45
and01:19:46
i don't know01:19:49
otherwise it can be colors dot01:19:54
usually what background color does we01:19:56
sell have background color dark gray01:20:00
what other colors do we have01:20:02
dark gray i think we will go with the01:20:05
black one01:20:10
oh no that's border color dark gray01:20:15
yes we're gonna go with dark gray01:20:17
actually01:20:18
so01:20:19
if none of these are working then it's01:20:22
dark gray01:20:27
what's happening there01:20:29
can find variable cell01:20:31
get background color not cell but01:20:34
letter01:20:40
background color01:20:47
what's happening01:20:49
come on01:20:53
okay01:20:54
uh01:20:55
if we didn't have this one01:20:57
all right so as you can see if we don't01:21:00
have anything our01:21:02
cells are basically empty like they do01:21:04
not have any background color they are01:21:07
you can see behind it01:21:09
if we add this all of them01:21:11
become01:21:12
uh01:21:13
gray and if i will start writing things01:21:16
you feel like h it's going to be orange01:21:19
because01:21:20
h is inside our hello world01:21:23
and if i'm going to do01:21:25
l here01:21:27
that's going to be green because it's in01:21:28
the right place01:21:30
the thing is that we don't want to show01:21:33
these colors to the current row we want01:21:35
to show them to all the rows above so if01:21:39
i'm going to do here01:21:40
like i want the colors to the first row01:21:43
but i don't want to see the colors here01:21:45
because that's cheating we lose the01:21:47
point of the game01:21:49
um01:21:51
let's think how to fix this issue here01:21:53
get cell01:21:54
background01:21:56
basically i'm going to add another if01:21:57
statement01:21:59
checking if01:22:00
the row that we are currently01:22:06
the row for the letter that we are01:22:08
rendering at the moment01:22:10
if it is01:22:12
more or equal than the current row01:22:15
then the color will be01:22:17
colors dot black basically the empty01:22:21
thing oh here we have it01:22:24
so01:22:25
um01:22:26
yeah the row that we are working with01:22:28
will be01:22:30
with01:22:31
black background all of them doesn't01:22:34
matter if it's the right one but the01:22:36
wrong one we don't want to show it to01:22:38
user so he can clear and try again and01:22:41
only after he does enter we will display01:22:44
the right color there and if i'm gonna01:22:46
do hello01:22:48
boom all green01:22:51
perfect01:22:53
all right01:23:00
what are good resources to start01:23:02
learning ui there are a lot of videos on01:23:04
this channel that are focused on ui01:23:07
development you can start with01:23:10
tesla clone that's an easy clone01:23:13
of an application specifically for01:23:16
beginners and by implementing that you01:23:18
will implement you will build a01:23:22
tesla application the tesla website in a01:23:24
react native01:23:26
way01:23:33
uh i'm getting an error in mongodb and i01:23:35
can solve it there is no solution for it01:23:36
on the internet01:23:38
i don't believe that there is no01:23:39
solution on the internet on the internet01:23:42
you can find everything01:23:44
it's a matter of uh how you search it01:23:48
you can you can send it to01:23:51
to me in private or on discord and i'm01:23:52
gonna try to help you but01:23:55
it's out of scope for this video so01:23:57
let's try to be focused here01:24:01
uh okay let's see our questions01:24:06
uh someone was suggesting first you need01:24:08
to check if it includes the letter if so01:24:11
check if a letter is in the rights index01:24:14
if so is green if not it's orange pretty01:24:17
simple01:24:18
that's one solution01:24:20
but01:24:21
i first check if it's in the right01:24:23
position and if yes i return green01:24:26
and only then only when i know that it's01:24:30
not in the right position i check but01:24:32
maybe it's in the word and then i return01:24:34
secondary i think this is a bit cleaner01:24:39
um01:24:41
let's see is a check one current row01:24:43
plus one not necessary01:24:45
current row plus one01:24:47
is the check01:24:48
are you do you mean here current row01:24:51
plus one01:24:56
or where01:25:10
can we make an application with01:25:11
subscription model using uh react native01:25:14
payment gateway yes we have this planned01:25:17
for the very near future like in the01:25:20
couple of next week we're gonna have01:25:22
uh a tutorial on payment integrations01:25:29
okay guys so let's get back to our01:25:31
application so we have our colors01:25:41
what would be the next steps what are01:25:43
the next steps01:25:51
look if we are working with the colors01:25:55
at the moment let's also implement the01:25:57
colors for our01:25:59
keyboard01:26:00
the way i implemented the keyboard is if01:26:03
you send here green caps01:26:06
an array of caps like for example a01:26:09
and b should be green01:26:11
and orange caps01:26:14
or how is it01:26:17
green01:26:19
what our caps are there01:26:21
uh yellow caps01:26:24
and if i do yellow caps01:26:27
c01:26:28
and w01:26:30
then they are rendered with that01:26:32
specific color01:26:34
so um we need to01:26:38
uh collect01:26:40
all the green letters from our map01:26:43
also all the yellow um keys from our map01:26:47
and also all the black01:26:49
keys from our map in order to send it to01:26:52
the keyboard to properly properly render01:26:54
them there01:26:56
how we're going to do that01:26:59
well we will01:27:01
loop01:27:02
through01:27:03
our map01:27:06
this map01:27:07
rose01:27:09
and we will01:27:11
take01:27:14
yeah we will take the01:27:17
letters01:27:18
based on the colors right01:27:23
for example01:27:26
const green caps01:27:29
is equal01:27:30
to rows because01:27:34
that's the data that we're working with01:27:37
dot01:27:38
um i don't know probably map01:27:40
and for each row01:27:43
we are looking into them01:27:48
row dot01:27:50
map and here is our cell so what are we01:27:53
gonna do with the cell01:27:58
we need to check01:28:01
look using the same guest cell01:28:02
background01:28:04
color01:28:07
we're going to check if the color is01:28:10
primary01:28:12
and only if the color is primary we're01:28:14
gonna01:28:15
keep that letter for our green caps01:28:19
so01:28:20
if01:28:22
get01:28:24
cell background color01:28:26
of our letter01:28:29
you know what i'm going to simplify this01:28:31
uh01:28:32
letter because we can get it01:28:34
automatically01:28:36
you know01:28:37
and it will have to send less data01:28:40
through properties because const letter01:28:44
is equal simply rows at position row and01:28:48
at position column that's it01:28:54
okay here get background color01:28:57
uh01:28:58
cell01:28:59
not cell but we need the index of our01:29:02
row and the index of our column01:29:07
i and j01:29:09
so if get background color is equal to01:29:13
colors dot primary01:29:15
then we01:29:17
need that key to remain in the caps so01:29:20
instead of mapping i'm gonna switch to a01:29:23
filter basically01:29:26
we get rid of all the01:29:28
um01:29:30
all the letters except the ones that01:29:33
have a01:29:34
green background01:29:37
and if i will do console.log01:29:43
green caps01:29:45
let's have a look at what we will see01:29:47
here01:29:49
so it's nothing if i do i don't know01:29:54
and enter01:29:59
then we don't have anything but if i'm01:30:01
gonna do hell01:30:04
something like this01:30:06
we see that01:30:08
there is these three letters h e and l01:30:12
only these letters01:30:13
but as you can see01:30:16
we we have an array of arrays01:30:19
but what we need to do01:30:23
let's do it like this one more time01:30:25
i need here to get the01:30:27
o01:30:28
enter01:30:30
what i need to do is basically merge all01:30:33
these arrays i need an array containing01:30:35
h e l and o01:30:39
so01:30:40
basically we need to01:30:42
merge all the values of this01:30:44
arrays01:30:46
to do that uh easy01:30:48
the easiest solution will be instead of01:30:51
map to call a flat map01:30:54
and this is gonna do what i told you uh01:30:57
just now it will01:30:59
map through everything and advance it01:31:01
will flatten that array basically it01:31:04
will merge all the01:31:07
child arrays01:31:08
hello01:31:11
thank you01:31:14
yes you can01:31:16
you're welcome01:31:19
so01:31:20
um01:31:24
now let's have a look with a flat map01:31:27
here we have it it's a simple array of01:31:30
values01:31:31
and if i'm going to take01:31:33
the green caps and send them to our01:31:36
keyboard01:31:38
green caps01:31:40
then they will be h e l and o01:31:44
perfect01:31:45
let's do the same thing for our yellow01:31:47
caps01:31:49
uh to do two green caps01:31:52
look for the yellow caps i'm gonna have01:31:54
to copy paste this thing and do it01:31:57
again01:31:58
but01:32:01
you know what i'm going to declare01:32:03
better a function01:32:05
that will handle this situation01:32:10
get all01:32:12
um01:32:14
letters01:32:16
with color01:32:18
and then i'm gonna send a color here01:32:22
and i'm gonna do it like01:32:26
this01:32:27
return01:32:31
rows01:32:32
do everything01:32:34
but check it based01:32:37
not on the colors.primary but on this01:32:39
color01:32:46
and now our green caps are simply get01:32:50
all letters with color01:32:52
color colors dot primary01:32:56
then01:32:57
const01:32:59
yellow caps01:33:02
is get all letters with color colors dot01:33:06
secondary and our black01:33:11
caps01:33:12
or letters or keys i don't know01:33:16
is get all letters with color colors dot01:33:21
is it black or dark gray01:33:23
i think it's dark gray01:33:27
yes it's dark green01:33:29
so now we can send them to01:33:33
yellow and the last one is01:33:36
gray caps01:33:38
let's rename it gray here01:33:46
gray caps01:33:47
boom01:33:48
all right we have it so01:33:50
if i refresh the game01:33:52
initially all of them keys are activated01:33:57
if i write something all right h is01:34:00
there01:34:01
but these01:34:02
four letters they are grayed out and the01:34:05
thing is that we can not even press on01:34:07
them because they are01:34:09
obviously not in the word so let's try01:34:12
another thing like i don't know and01:34:15
enter01:34:16
boom we see green uh letters which means01:34:19
that's good01:34:21
okay01:34:23
enter and we are done01:34:26
not with a build we still have a couple01:34:28
of things to to implement but we've01:34:31
with coloring our keyboard01:34:36
any reason why not i use get cell01:34:38
background color to also set green caps01:34:41
yellow caps is a dessert01:34:45
um01:34:51
get background color01:34:55
the thing is that01:34:57
like keyboard is a separate component01:34:59
and i01:35:01
i01:35:02
didn't want to involve a function call01:35:04
here i just wanted to i know i thought01:35:07
this is the easier way like we send here01:35:10
an array of i don't know01:35:12
a couple of keys and we know that this01:35:15
keys should be with green01:35:18
easy easy same thing with yellow and01:35:21
gray caps01:35:26
can you make a video on rack native01:35:28
performance optimization that's an01:35:30
interesting topic we could um definitely01:35:33
do something like that in future01:35:37
is the application uh responsive on all01:35:39
device sizes01:35:42
i tried my best to do it responsive01:35:45
you can give it a try01:35:47
like01:35:49
map height 100 it shouldn't be here map01:35:53
should01:35:54
match the height of everything01:35:56
um01:35:58
but yeah like everything is responsive01:36:01
it depends on the screen size and also01:36:03
we have a max weave for i don't know if01:36:05
you run this application on um01:36:08
ipad like it's gonna look still good it01:36:11
will not have giant01:36:13
um01:36:15
keys there01:36:19
what happens when current row exceeds01:36:21
rose length yeah that's uh that's01:36:23
possible01:36:25
nothing will happen at the moment01:36:27
we will just not be able to01:36:30
oh probably01:36:31
undefined is not an object yeah we'll we01:36:33
will have an error01:36:35
but that's our next task the next next01:36:38
task is to01:36:40
handle01:36:41
um the game states if we won or if we01:36:45
lost01:36:47
and um01:36:48
let's see if we have any other01:36:50
comments01:36:55
in get cell background color we already01:36:58
have a greens and yellows01:37:00
yeah01:37:01
maybe maybe that01:37:04
if you find a better way to do it like01:37:06
go ahead and also send me01:37:08
a screenshot or send me um the code for01:37:11
for for it because i don't say that this01:37:14
is uh the best way to to implement it or01:37:18
the the most performant way like this is one01:37:21
way and if you can think of another way01:37:24
that's also01:37:32
valid so guys let's continue and we're01:37:36
going to continue with01:37:38
win and lose01:37:40
game states right01:37:43
so when that should happen01:37:45
uh01:37:46
when should we check01:37:48
if it's win or loss01:37:50
we need to check that01:37:54
uh01:37:55
whenever we01:37:56
go to the next row01:37:58
so as you can01:38:01
see here like i write something then i01:38:04
press enter i go to the next row and now01:38:07
i need to check did i win or did i lose01:38:11
so for that reason i'm going to01:38:14
use the use effect hook01:38:18
to execute the logic of checking the01:38:21
game state01:38:22
when our current row changes01:38:27
but this use effect will also be updated01:38:30
in the first01:38:31
the first time so we need to check if01:38:34
current row is more than zero01:38:38
then check01:38:40
game state01:38:44
all right let's implement this check01:38:46
game state i don't know where01:38:49
let's scroll a bit down01:38:53
we already have a lot of things here i01:38:55
don't know let's declare it somewhere01:38:57
here check game state01:38:59
and that's it01:39:03
then we are going to have two more01:39:10
function check if01:39:12
one01:39:14
equal to a function01:39:16
and const check if lost01:39:21
is a function01:39:24
check if one01:39:26
[Music]01:39:29
yeah here let's do if01:39:31
check if one will return true01:39:34
then what do we have to do let's start01:39:36
with a simple alert01:39:38
um hooray01:39:43
you won01:39:48
else01:39:50
if01:39:51
check01:39:53
if lost01:39:56
alert01:40:01
try again01:40:03
tomorrow01:40:07
okay now nothing will happen but if we01:40:09
will implement this check if one um01:40:13
so we need to01:40:14
check01:40:15
if every letter01:40:18
uh so let's say that i add something01:40:21
here enter01:40:23
try again tomorrow oh i didn't call this01:40:26
check if lost01:40:28
now it's better01:40:31
so if every letter of our previous row01:40:35
because we already moved to the next one01:40:37
and we need to check the previous one01:40:42
so i can do const row equal to rows01:40:46
add position01:40:49
current row minus one01:40:54
so we are now on the row number one with01:40:58
the index one01:41:00
we get01:41:01
the row from the previous row from the01:41:03
previous position which is at position01:41:05
zero and we need to check01:41:08
this word01:41:10
we are going to do01:41:12
use some01:41:13
handy javascript methods and we are01:41:15
right away gonna return01:41:17
so let's return01:41:19
true if01:41:21
every01:41:22
character in our row01:41:25
every letter in our01:41:27
row01:41:29
is the same as the01:41:32
letter01:41:35
from our word01:41:37
letters01:41:42
i don't know if we01:41:43
need letter letters where do we use it01:41:48
letters here01:41:49
letters column01:41:58
maybe01:41:59
we could use it as an array01:42:02
so uh check if one if letter is equal to01:42:06
letters at the same position but what is01:42:08
the position of01:42:10
this letter01:42:11
well we can get it01:42:13
the same way as we did it previously by01:42:16
taking the i here01:42:19
so at position i01:42:22
so if01:42:23
every letter from our row01:42:27
here01:42:32
well i already saw an issue there01:42:35
did it say that we won no01:42:40
no that's good so let's01:42:43
try it like this01:42:45
enter01:42:47
now if every letter from this row01:42:51
letter01:42:52
is equal to the letter from the word01:42:54
that we're trying to guess but at the01:42:56
same position01:42:58
then we won otherwise we didn't so let's01:43:02
try uh the one state hello enter hurray01:43:07
u101:43:08
good that's awesome now let's check uh01:43:11
do that check if lost as well01:43:15
when did we lose we lose we lost if we01:43:18
didn't win and we are at the01:43:22
um return01:43:25
at the current row basically if we01:43:28
overflow the rows if we have six tries01:43:31
but now we are at the01:43:33
current row01:43:34
um01:43:39
rows with of length01:43:44
so we if currently we are01:43:47
past the number of rows01:43:50
then we01:43:51
lost01:43:54
let me refresh01:43:56
and try again01:44:08
now we are the current row is equal to01:44:11
rows minus01:44:13
rows length minus one because the first01:44:16
one is zero one two three four five but01:44:20
the length is six01:44:22
and now if i will press enter we will go01:44:24
to the current row six which is going to01:44:26
be equal to rows01:44:28
and the first thing we will check if we01:44:31
won otherwise we will check if we lost01:44:34
so01:44:35
we01:44:36
if i press enter ah try again tomorrow01:44:41
all right the01:44:43
lost situation works as well01:44:50
like throw the value packed content well01:44:53
always a pleasure thank you very much01:44:54
it's my pleasure as well to01:44:57
to share with you01:45:00
anyone can tell me this life will be01:45:02
saved on youtube yes yes and yes we are01:45:05
saving all the live streams um01:45:08
on the channel so you can go back watch01:45:10
it on your own pace i understand that01:45:12
now in the live stream i'm trying to go01:45:14
a little bit faster01:45:16
but after that you can pause and go01:45:20
on actually your own pace01:45:24
okay so we have a winning state we have01:45:27
a lost state um01:45:29
[Music]01:45:31
shall we save it in01:45:33
in an actual state variable like what is01:45:36
the state of the game because now there01:45:38
is an issue if i do01:45:40
hello01:45:43
wait hello01:45:45
we won but we can go01:45:48
and play01:45:49
further01:45:50
so i think oh i think we will need a01:45:53
state variable01:45:54
const01:45:56
game state01:45:58
set01:45:59
game01:46:00
state01:46:01
equal use01:46:03
state01:46:05
um01:46:08
what can be the potential states one is01:46:12
game over01:46:16
no no let's do01:46:17
easier one lost and playing01:46:21
these are with three possible01:46:24
states initially it's game state playing01:46:29
um01:46:33
if check is win we display that and we01:46:36
set01:46:37
game state01:46:39
to 101:46:41
and if we lost we set gamestate to01:46:46
lost01:46:50
ok01:46:51
now01:46:52
on key pressed first of all we need to01:46:55
check01:46:57
if01:46:58
game state is equal to01:47:01
playing01:47:04
now if gameplay01:47:06
if game state is different when playing01:47:07
then we want to stop we don't want to01:47:10
execute the function01:47:12
now if i'm gonna do01:47:14
hello01:47:16
enter01:47:17
we won and we will not be able to01:47:20
enter any more01:47:22
data01:47:26
let's see01:47:42
okay okay okay01:47:46
um01:47:47
what's the next step01:47:55
i think we are almost there01:48:02
we are almost there01:48:05
do we need anything anything extra01:48:12
what is the best way for you to improve01:48:15
your coding skills before you are good01:48:17
at it01:48:21
i know let me address it so the question01:48:23
is what was the best way for you to01:48:25
improve your coding skills before you01:48:28
are good at it01:48:30
so my idea is that the best way to01:48:33
improve your coding skills is by01:48:36
building01:48:37
actual real real world projects01:48:40
i don't know you most definitely have an01:48:43
idea01:48:44
of an application that you are you want01:48:46
to build like it's your dream like that01:48:49
is what motivates you to start learning01:48:51
coding01:48:52
why not start it while learning coding01:48:55
and that will01:48:57
uh speed up your process of learning so01:49:00
much because you01:49:01
have a goal of building an application01:49:03
you will learn and you will01:49:05
research over the way a lot of things01:49:08
and by doing that you will learn and you01:49:10
will not get bored and the bonus point01:49:12
is that event you will have a working01:49:14
application01:49:20
so if01:49:23
that's also how i01:49:25
learned coding01:49:28
mostly for building projects for01:49:30
building startups that i was passionate01:49:32
about and01:49:34
even why like i when i started like i01:49:37
was01:49:39
like zero i didn't know any programming01:49:44
like i slowly got the fundamentals and01:49:46
then right away started building01:49:48
projects01:49:58
all right01:50:06
what i wanted to show you next is how we01:50:09
can share the result because i think01:50:12
this is a little trick and it's pretty01:50:15
cool01:50:16
and01:50:17
sharing these results on twitter i don't01:50:20
know if you saw them01:50:22
let me show you01:50:24
this in my opinion contributed to the01:50:27
most01:50:29
growth01:50:30
because01:50:32
you saw for example in my case i saw so01:50:35
many squares like this in my feed01:50:38
uh01:50:39
yeah square like this or let's open even01:50:42
wordle here01:50:45
like so many squares let me say i was01:50:46
like what is this like i don't01:50:48
understand what's happening01:50:51
and this made a lot of people google it01:50:53
and01:50:54
actually start playing uh themselves01:50:57
so i think that it's a really smart01:51:00
feature of01:51:01
sharing um like your score in this way01:51:05
without01:51:07
and having this01:51:10
how's it called01:51:12
mystery mystery01:51:14
in the shared message because it it's01:51:16
nowhere like a link to the game there is01:51:18
nowhere01:51:20
actually there is the name wardle but01:51:22
that's it like that's the only thing01:51:25
so um let's see how we can do the same01:51:28
in our application01:51:30
uh01:51:31
well for that like they are the way they01:51:34
are doing it we are not actually sharing01:51:36
it we are just putting this text in your01:51:39
clipboard01:51:40
and after that you can go to twitter01:51:42
facebook or anywhere and paste that01:51:44
message manually01:51:46
that's how we're gonna do in our01:51:48
application as well01:51:50
and for01:51:52
for that reason we are going to install01:51:55
a package01:51:57
let's open the terminal and let's add a01:52:00
new one no let's better stop our server01:52:03
because we will still need to restart it01:52:05
and do expo01:52:07
install01:52:09
uh01:52:10
and it's called export dash clipboard01:52:13
expo install export clipboard01:52:25
all right we have01:52:27
initialized01:52:28
install the clipboard package01:52:31
now where will that functionality be of01:52:34
sharing well uh when we say u101:52:38
let's add a button so for the alert if01:52:40
you want01:52:42
but did we import the alert yes we did01:52:46
the three parameters01:52:48
in an alert is the list of buttons and01:52:51
we need to provide an array01:52:53
and each button is an object so let's01:52:56
say the button is going to be have a01:52:59
text of share01:53:01
and now on press will be i don't know01:53:05
share01:53:07
score01:53:09
let's take this function and implement01:53:11
it somewhere here01:53:13
cost share score equal01:53:18
all right01:53:20
and01:53:21
let's try to01:53:24
compose this01:53:26
uh this01:53:28
text01:53:29
how we're going to do that so um01:53:32
well we have this01:53:34
rows we have01:53:36
the representation of map in our01:53:39
state01:53:40
well const01:53:42
text to share01:53:45
is going to depend on our rows so rows01:53:48
let's map through01:53:50
every row in that01:53:52
um in that array and we will need the01:53:56
position as well01:53:58
and then for every row we need to map as01:54:01
well01:54:03
through the01:54:07
cell and then j01:54:11
well you know what let's simply take the01:54:13
background color of that cell so01:54:17
get01:54:19
background get cell background of i and01:54:23
then j01:54:24
this is going to give us the background01:54:25
color01:54:27
and we can simply cancel log01:54:31
text01:54:33
to share01:54:37
let's have a look01:54:39
oh we need to restart the server no not01:54:43
like this npm start01:54:49
vadim you are putting out content that's01:54:51
too good to be true the best rack native01:54:53
projects on youtube period thank you01:54:55
very much thank you thank you a lot for01:54:57
appreciating my hard work uh01:54:59
i'm trying my best to provide as much01:55:03
value as possible01:55:04
here on youtube and i'd really01:55:06
appreciate if you yeah let's01:55:09
do it01:55:10
let's all hit the subscribe button down01:55:12
below if you uh take some value out of01:55:16
my videos that i produce here01:55:18
and that will help me tremendously like01:55:21
we i have a goal to reach 100k by the01:55:24
end of this year and with your help i01:55:27
believe that we can do it01:55:30
so it's free uh you can do it right now01:55:34
and uh yeah do it why not subscribe01:55:37
subscribe01:55:40
all right and we have our application01:55:42
back uh here01:55:44
let's01:55:47
refresh it01:55:57
i'm gonna do a couple of things here01:55:59
enter01:56:00
[Music]01:56:02
enter and then let's do01:56:04
hello01:56:07
enter01:56:08
share if i press share we should see i01:56:11
don't see any console log because i01:56:12
didn't select iphone01:56:14
from here so select your device and now01:56:17
we will see the background color here01:56:21
so01:56:23
yeah we see a lot of things01:56:25
but01:56:26
first row second one and third one01:56:29
this is all the greens that we have01:56:31
there01:56:33
um01:56:38
well uh how to proceed look um01:56:43
i made01:56:45
in the our constants01:56:47
i made um01:56:51
a map01:56:52
a simple javascript object that serves01:56:55
as a map where the key is our color01:56:59
for example dark gray01:57:01
and the value is one of these squares01:57:05
now using these colors to emoji we can01:57:07
simply map01:57:09
from these values01:57:11
to the squares that you saw there01:57:15
let's try to do that01:57:16
let's in our app.js01:57:19
import01:57:21
colors to emoji01:57:24
and where we have a share01:57:26
here01:57:28
so we we get the background color01:57:31
and now we using the colors to emoji we01:57:34
simply map01:57:35
we say give me the emoji that01:57:38
corresponds to this color01:57:41
we have a color01:57:43
we want back an emoji01:57:46
that's what's happening here01:57:50
let's have a look01:57:53
uh01:57:54
if i01:57:56
clear everything and i press share01:57:58
all right01:57:59
we see something happening that's good01:58:01
because the third array contains only uh01:58:05
green things01:58:07
and as you can see like it matches our01:58:10
map here like undefined here yeah there01:58:13
is no color there01:58:16
okay um01:58:18
so now01:58:20
let's see how we can01:58:22
from an array of icons01:58:26
get a string of these icons merged01:58:29
together01:58:30
to do that we can call join operator on01:58:34
an array01:58:35
our array is going to be this one a01:58:38
row.map will return an array and we can01:58:42
dot01:58:43
join01:58:45
and you can say here how do you want to01:58:47
join if you want comma add a comma here01:58:50
and now if i press share01:58:56
it's not there why what what01:59:00
join okay01:59:03
share01:59:05
all right now they're gonna be merged01:59:07
with a comma01:59:09
the thing is that we don't want any01:59:11
space between them so we're gonna just01:59:13
join on um01:59:14
using an empty uh array an empty string01:59:18
that will give us this array01:59:22
now this array we need to merge01:59:25
uh01:59:27
no first of all let's filter this01:59:30
rows that do not have anything01:59:33
so i'm gonna do01:59:35
like this rows.map01:59:38
dot01:59:41
dot01:59:42
filter of01:59:45
row01:59:46
if row doesn't have anything01:59:48
filter only if it has something will it01:59:50
work like this01:59:52
share01:59:54
yes01:59:55
it capped only the rows that contain the01:59:58
value02:00:00
now02:00:02
this is still an array02:00:04
so we want to join it02:00:07
but how do we want to join we want to02:00:08
join it with uh enter with a new line02:00:12
character02:00:14
let's have a look at the02:00:16
new line uh code i don't know how is it02:00:20
called yeah02:00:21
is it simply like that02:00:24
join with uh backslash and02:00:28
let's see if02:00:29
it actually works02:00:31
let's have a look at our02:00:33
here share02:00:35
yes02:00:36
yes it works come on let's go02:00:40
now that we have this text to share02:00:46
where is my code here02:00:49
now that we have this text to share we02:00:51
can simply do02:00:52
first of all import the clipboard02:00:55
border color i don't need it here02:00:58
import02:01:00
uh clipboard02:01:01
from react native not react native web02:01:04
but02:01:06
from expo clipboard02:01:10
from here02:01:14
now share score we can do02:01:18
clipboard02:01:19
dot02:01:20
set text02:01:22
or how is it called02:01:25
um02:01:26
clipboard02:01:30
let's uh check the documentation word02:01:32
let me quickly check it here02:01:38
set string02:01:41
set02:01:42
string02:01:43
to that text share that we are trying to02:01:45
share02:01:46
and after that we can also do alert02:01:48
alert i don't know02:01:52
mess02:01:56
your score02:02:02
what to say there copied successfully02:02:06
that's how i write successfully i can02:02:08
never write successfully02:02:10
success sec02:02:13
success02:02:15
it should be never seen02:02:17
double oh my god i did it02:02:21
share your02:02:24
score on your social media02:02:29
save02:02:30
all right we won let's press share02:02:34
let's refresh our application02:02:37
something is going on here02:02:39
so this is my first try enter and this02:02:43
one enter when this one enter and then02:02:49
low enter02:02:51
amazing we won share02:02:54
and define is not an object evaluating02:02:56
expo clipboard clipboard set string02:03:01
4k02:03:07
we02:03:08
install this expo clipboard let's check02:03:10
package.json expo clipboard yes it's02:03:13
there02:03:14
oh probably we will need to02:03:17
restart and clear the cache so npm start02:03:23
clean or clear yeah clear02:03:29
and let's02:03:31
close application completely02:03:33
and run it again02:03:46
so right now let's give it a test02:03:49
enter02:03:51
enter02:03:56
enter02:03:58
and hello02:04:00
and02:04:02
hello enter02:04:04
share02:04:05
and find is not an object why expo02:04:07
clipboard set string once again i'm02:04:10
coming back i need to02:04:12
go somewhere very important so stay02:04:14
tuned i'm coming back we will fix this02:04:16
issue02:05:04
right i'm back let's um see once again02:05:08
what's the issue02:05:14
um oh i think that the way02:05:18
it is imported02:05:20
so02:05:21
oh yes i imported it like this02:05:25
by the structuring but we need to import02:05:27
everything as clipboard02:05:29
and now if i do share02:05:31
copied successfully now let's go into02:05:34
another application02:05:38
for example messages02:05:41
and paste it here02:05:43
paste02:05:44
boom02:05:45
that's it02:05:48
i don't know who i'm texting there02:05:51
but hopefully it's not some of my02:05:53
numbers02:05:54
um02:05:55
yeah for the shared text you can also i02:05:58
don't know add some02:06:02
something in the beginning like this is02:06:04
the02:06:06
map02:06:07
that map02:06:09
to02:06:12
text map02:06:13
or02:06:14
rows02:06:16
and then text02:06:19
to02:06:20
share equal02:06:23
it can be02:06:24
like02:06:25
wordle02:06:28
of the number of days i think they are02:06:32
seeing and something like that02:06:34
but i'm gonna keep it simple02:06:38
text map02:06:47
where is my application02:06:57
what's happening02:07:00
all right02:07:03
enter and then hello02:07:07
enter02:07:08
share02:07:10
copied okay02:07:14
paste and now it will contain some02:07:18
one extra space but02:07:20
you've got the idea02:07:23
that's how we can implement the share02:07:25
mechanism02:07:26
similar to the wordle game02:07:31
you have to empty the clipboard first02:07:35
do you02:07:37
if you just set string it will simply02:07:39
override02:07:48
okay all right02:07:54
what else02:08:00
there is a small issue that i can show02:08:03
you how to fix02:08:05
and i cannot show you exactly how and02:08:09
when it happens for example if i do some02:08:11
change small changes in the application02:08:14
and i save02:08:15
uh i see02:08:17
the u1 message once again02:08:20
so that would happen only if the02:08:24
application re-renders02:08:26
in that win state02:08:29
to02:08:32
fix that what we can do02:08:35
is02:08:36
[Music]02:08:38
simple a simple way02:08:41
would be02:08:42
to check here02:08:49
if check one02:08:50
and uh02:08:52
game state02:08:55
is different02:08:57
than02:08:58
one02:09:01
vendo vis02:09:02
check if lost and02:09:05
game state02:09:06
that's basically don't repeat the same02:09:09
the same02:09:10
step game step is02:09:13
different02:09:14
than02:09:15
lost02:09:16
then do this but because we added02:09:19
another check i think that the best way02:09:22
would be in the check if lost02:09:26
to first of all check if if a user won02:09:29
so02:09:30
um02:09:34
check if02:09:36
one02:09:38
and that02:09:41
he lost if he didn't already win02:09:44
and if he is over02:09:47
that limit02:09:48
now if i'm gonna try a couple of02:09:54
enter02:09:55
enter02:09:57
enter02:09:59
let me try to lose enter02:10:04
enter02:10:05
try again okay and if i'm gonna change02:10:08
some02:10:09
something here i don't know02:10:11
save02:10:12
i'm not gonna see that message again02:10:15
because we are checking02:10:17
um02:10:20
we are showing the alert02:10:22
when we lost but only02:10:24
the first time we lost like if we are02:10:26
already in the lost state we don't show02:10:29
it one more time02:10:31
the same should happen with them02:10:35
winning state02:10:36
hello enter we won share02:10:40
okay02:10:41
now if i do some changes02:10:43
refresh nothing happens02:10:47
uh02:10:48
oh i have to empty the clipboard when i02:10:51
had to go away yes yes02:10:54
exactly all right02:11:01
[Music]02:11:04
so02:11:05
that is mostly everything that i wanted02:11:07
to show you what else we can implement02:11:10
or improve uh the way we take the word02:11:14
so that's that's something interesting02:11:17
um the way i think with the easiest02:11:20
the easiest way to02:11:22
select the daily word02:11:24
is just to simply have like words which02:11:28
is an array02:11:29
of i don't know hello02:11:33
world and so on02:11:38
um and then02:11:41
when we launch the application we will02:11:43
select the word based on the02:11:46
current date02:11:48
so02:11:49
let's have a look how we can no based on02:11:52
them02:11:54
what02:11:56
the number of a day in a year so if it's02:11:59
15 january that's the 15th word02:12:04
if it's02:12:06
if it's 15 february that's somewhere02:12:09
like 45 or i02:12:12
i don't know the math but you get the02:12:14
idea so i'm gonna search something like02:12:17
javascript02:12:20
get day of the year i think i found some02:12:23
functions i don't want to reinvent the02:12:25
wheel here02:12:27
i will simply02:12:32
take one of these02:12:38
i think this one is simple enough02:12:41
they say that it has an issue with02:12:48
during the october02:12:50
during the daylight saving switch but it02:12:53
doesn't matter for us so i'm gonna have02:12:56
this function here02:13:03
const get day02:13:07
of02:13:08
the year02:13:14
i will02:13:15
move everything to cost because02:13:17
we do not use var02:13:19
anymore02:13:21
and now we take the date02:13:24
we then move to the beginning of the02:13:26
year02:13:27
we check the difference between now and02:13:29
the beginning of the year02:13:33
we calculate02:13:34
how many seconds is one day and then we02:13:37
calculate the number of days based on02:13:40
that difference in seconds that's simply02:13:42
how it works and we can return day02:13:49
now02:13:51
our selected word02:13:55
um02:13:59
so const02:14:01
day02:14:02
of the year02:14:04
equal get day over here02:14:07
and then the word will be02:14:10
words02:14:11
at the position day of the year02:14:14
the thing is uh02:14:16
i need to input more words here02:14:20
so02:14:21
i don't know02:14:24
let me just copy paste this multiple02:14:27
times02:14:29
to have enough words02:14:34
all right and it works now let's check02:14:37
if it's hello or word hello enter02:14:41
boom we02:14:43
have done it if i'll remove the first02:14:45
one02:14:46
that will mean that the current word is02:14:48
a different one02:14:50
because it's a different day02:14:52
and now02:14:53
i will have to guess them whoa02:14:57
come on02:14:59
oh i was in them one state02:15:04
world02:15:07
enter02:15:08
hey we won02:15:11
all right now the only step is to02:15:13
actually fill in um02:15:16
36502:15:17
words here02:15:19
and i think that i'm gonna i'm gonna02:15:22
fill in these words and i'm gonna deploy02:15:24
this application on market and i'm gonna02:15:27
do it with uh some programming words so02:15:30
that everyone can have some fun with uh02:15:32
trying to get some programming keywords02:15:35
i'm gonna spend some time to to find02:15:38
some really nice words um names of some02:15:40
algorithms and then we will02:15:43
i will try to deploy it02:15:45
let's hope that i'll have time to um to02:15:47
do that02:15:49
but yeah that's uh the easiest way that02:15:52
we can manage words02:15:54
um02:15:55
of course if you want a different way02:15:58
like you could um have a back end where02:16:01
you store all the words and then from02:16:04
the application you just query the back02:16:05
and get the current word and uh work02:16:08
with it02:16:09
um02:16:11
this way like if we have to add more02:16:14
words we will have to build again the02:16:16
application and publish it again on02:16:18
market02:16:20
but with the help of expo we can do02:16:24
these updates over the air which means02:16:26
that the user will not have to reinstall02:16:29
the application we will not submit a new02:16:32
build we simply will02:16:34
submit a new02:16:35
javascript bundle that will be02:16:39
downloaded by expo02:16:41
when the application will first launch02:16:43
when the application will launch on the02:16:44
device so that's not a big issue02:16:48
uh all right so other things that you02:16:51
can improve on this game uh and things02:16:54
that02:16:56
i will leave you as a homework to02:16:58
practice let me grab something and i02:17:02
will write you02:17:04
or let me do it right here02:17:09
let's do a02:17:12
readme dot md02:17:20
okay02:17:22
react native02:17:26
wordle game in react02:17:29
native02:17:31
uh here is02:17:34
homework02:17:38
um02:17:39
one02:17:41
thing that you could improve is02:17:43
save02:17:44
current progress02:17:46
in async02:17:49
storage02:17:51
so that um02:17:56
if you close the application02:18:00
in the middle of the game02:18:04
and then02:18:05
re launch02:18:08
you continue02:18:10
from where you started02:18:14
this will um yeah this will02:18:18
prevent02:18:20
cheating02:18:22
this will prevent cheating because02:18:25
now you could try some different02:18:27
letters check them close the application02:18:30
open it again and do the word from the02:18:32
first try but if you save a progress in02:18:35
a sync storage then you will02:18:41
yeah make sure that this is not02:18:43
happening02:18:45
your goal is just to subscribe02:18:48
hello catalin how is it going02:18:54
um02:18:56
another thing would be02:18:58
uh02:18:59
keep track02:19:01
of the02:19:03
of02:19:04
all the02:19:09
of the score and02:19:11
streaks02:19:13
so for02:19:14
for example02:19:15
in wordle if i will02:19:18
open it02:19:22
wordle02:19:26
there are so many already uh what is the02:19:28
original one ordeal02:19:31
language i don't know02:19:35
power language02:19:38
so if i do i remember the word from02:19:40
today it was something like berkey02:19:45
enter02:19:48
okay and we will see the statistics oh my god02:19:52
enter02:19:54
or here yes02:19:56
statistics this shows the number of02:19:59
games played02:20:00
let's add that to our project keep track02:20:04
of02:20:05
um02:20:07
stats02:20:09
number of games played02:20:13
what else you can add02:20:16
win rate02:20:18
you can calculate based on how many02:20:20
times you won02:20:22
current straight02:20:26
max02:20:28
straight streak straight strict how do02:20:31
you pronounce it i don't know02:20:34
and um yeah that's it so if you can keep02:20:37
track of these stats you can also do02:20:39
them in a sync storage like02:20:42
of course it could be better with a02:20:43
database because you will you with a02:20:46
database you will never lose this data02:20:48
but with a sync storage that's also good02:20:52
you can also keep them there02:20:55
because it's not like i don't know some02:20:57
very important data that you are afraid02:20:59
of losing because if02:21:02
with a sync storage if a person02:21:04
uninstalls the application then he will02:21:06
lose this data02:21:10
what else02:21:11
animations02:21:14
animations02:21:15
uh02:21:16
for the letters for the words and so on02:21:20
um what else can you do02:21:23
um02:21:27
this is already more advanced like02:21:32
more advanced02:21:34
and needs02:21:36
some02:21:38
backend02:21:43
public leaderboard02:21:49
save the02:21:51
stats in02:21:52
a database02:21:56
uh public leaderboard to see02:21:59
who is the first one and so on02:22:02
hey guys recommend some additional02:22:04
features that we we could add here02:22:21
um yeah i don't remember02:22:24
what other things we could02:22:27
check here02:22:30
if you add02:22:32
i'm gonna add it somewhere here02:22:36
if you um add02:22:38
a big02:22:45
if02:22:46
you add a big data02:22:51
set of words02:22:53
you can also check02:22:56
um02:22:57
if the02:22:58
and02:22:59
entered02:23:01
word02:23:02
is a valid word and what i mean here is02:23:05
for example in wordle02:23:07
uh let me try again02:23:11
if you02:23:13
were the02:23:14
power language if you'd write some very02:23:17
random letters and you press enter02:23:20
nothing is happening because it says02:23:22
the word is not in the list so it should02:23:25
be some valid words to to be able to to02:23:29
enter02:23:30
so02:23:31
you could implement that as well but02:23:33
only if you have a big enough uh data02:23:36
set of words because if you have like i02:23:38
don't know 10 words02:23:39
and02:23:40
you implement this feature i don't think02:23:42
it's going to be good because02:23:45
people will not be able to guess the02:23:47
words that exactly you put there and02:23:49
it's going to be frustrating that's what02:23:51
i think02:23:53
and yeah if you have any other ideas02:23:55
please implement them uh02:23:58
that way02:23:59
you will learn much more02:24:01
by by doing by doing extra features by02:24:04
going that extra mile uh by being02:24:06
curious and saying like what will happen02:24:09
if i do that or if i add one extra rule02:24:12
to this game it will be more fun i don't02:24:15
know02:24:16
be creative02:24:17
and uh implement it and show me show me02:24:20
a demo send me um02:24:22
on my email or on social medias send me02:24:25
your02:24:26
github repositories i'm gonna have a02:24:28
look and if you also publish the game02:24:30
you can um you can send it to me if you02:24:32
want to play this game uh at the moment02:24:35
but no uh we're not gonna do that02:24:38
because i will try my my best to02:24:41
release this game soon02:24:44
i don't know how soon but i will try02:24:50
and um yeah i think that was it guys for02:24:52
today that was everything that i wanted02:24:54
to to show you uh subscribe to the02:24:57
channel down below not to miss future02:24:59
videos because we have a lot of plans02:25:01
for 2021 uh we have lucas on our team uh02:25:05
we have our team members that are02:25:07
helping us create more and better02:25:10
content and we're going to try our best02:25:12
to make sure that this year like we all02:25:15
grow together as a community02:25:19
and we achieve new new highs together02:25:22
and02:25:23
the only thing that i ask you is to02:25:25
subscribe to the channel and the rest02:25:27
i'm gonna come with02:25:29
fire videos with value packed tutorials02:25:33
as this one um later in the future02:25:36
and02:25:37
yeah let's roll the outro where is it02:25:39
outro here it is uh while you're02:25:42
watching for the next video you can02:25:44
watch02:25:45
this video or this video they're both02:25:47
amazing tutorials that will teach you02:25:50
uh rack native and amplify development02:25:53
for mobile development and yeah02:25:56
take care stay hydrated write clean code02:25:58
and i'm out byeDescription:
Learn how to build a WORDLE game in React Native. The tutorial is great for both beginners, and for developers familiar with React Native. We will walk you through all the steps to build the app from scratch. 📚 Enroll NOW for "The Full-stack Mobile Developer" and save 30% https://academy.notjust.dev/ 🎒 Source code and Asset Bundle: https://assets.notjust.dev/wordle 💬 Join the notJust Development gang and let's build together https://discord.com/invite/VpURUN2 Tag me on social media when you finish this build, and I will give you feedback on your project. Twitter: https://twitter.com/VadimNotJustDev IG: https://www.facebook.com/unsupportedbrowser LinkedIn: https://www.linkedin.com/in/vadimsavin TikTok: https://www.tiktok.com/@vadimnotjustdev Timecodes: 0:00 Intro 4:00 Getting started 17:30 Importing keyboard component 20:00 Building the Game Board component 45:50 Implementing Wordle game logic 1:13:04 Color coding the board and keyboard 1:36:05 Handling game won or lost state 1:50:05 Sharing game result 2:11:04 Managing daily word selection 2:16:50 App improvements Disclaimer: This build is for educational purposes only!! All views, opinions, technology choices expressed in this video are my own and do not represent the views, opinions, technology choices of any entity whatsoever with which I have been, am now, or will be affiliated.
Preparing download options
* — If the video is playing in a new tab, go to it, then right-click on the video and select "Save video as..."
** — Link intended for online playback in specialized players
Questions about downloading video
How can I download "Let's build WORDLE with React Native (tutorial for beginners) 🔴" video?
http://unidownloader.com/ website is the best way to download a video or a separate audio track if you want to do without installing programs and extensions.
The UDL Helper extension is a convenient button that is seamlessly integrated into YouTube, Instagram and OK.ru sites for fast content download.
UDL Client program (for Windows) is the most powerful solution that supports more than 900 websites, social networks and video hosting sites, as well as any video quality that is available in the source.
UDL Lite is a really convenient way to access a website from your mobile device. With its help, you can easily download videos directly to your smartphone.
Which format of "Let's build WORDLE with React Native (tutorial for beginners) 🔴" video should I choose?
The best quality formats are FullHD (1080p), 2K (1440p), 4K (2160p) and 8K (4320p). The higher the resolution of your screen, the higher the video quality should be. However, there are other factors to consider: download speed, amount of free space, and device performance during playback.
Why does my computer freeze when loading a "Let's build WORDLE with React Native (tutorial for beginners) 🔴" video?
The browser/computer should not freeze completely! If this happens, please report it with a link to the video. Sometimes videos cannot be downloaded directly in a suitable format, so we have added the ability to convert the file to the desired format. In some cases, this process may actively use computer resources.
How can I download "Let's build WORDLE with React Native (tutorial for beginners) 🔴" video to my phone?
You can download a video to your smartphone using the website or the PWA application UDL Lite. It is also possible to send a download link via QR code using the UDL Helper extension.
How can I download an audio track (music) to MP3 "Let's build WORDLE with React Native (tutorial for beginners) 🔴"?
The most convenient way is to use the UDL Client program, which supports converting video to MP3 format. In some cases, MP3 can also be downloaded through the UDL Helper extension.
How can I save a frame from a video "Let's build WORDLE with React Native (tutorial for beginners) 🔴"?
This feature is available in the UDL Helper extension. Make sure that "Show the video snapshot button" is checked in the settings. A camera icon should appear in the lower right corner of the player to the left of the "Settings" icon. When you click on it, the current frame from the video will be saved to your computer in JPEG format.
What's the price of all this stuff?
It costs nothing. Our services are absolutely free for all users. There are no PRO subscriptions, no restrictions on the number or maximum length of downloaded videos.