Let's create the KONAMI CODE AS A REACT HOOK - JavaScript

hello friends today boy do we have a fun one i'll be creating the famous konami code as a react component for embedding into websites what that's going to look like is something like this here i have your standard create react app application running and i have the debugger open on the right side and if you watch the console you can see the application tracking my keystrokes after successfully entering the konami code the react logo changes to konami and once again i'll hit refresh and i'm going to enter the code again up up down down left right left right b a and there's the konami code but first i'd like to thank some of our new subscribers so thank you to bogdan p jaitley abhishek tree magnus tom nicholas jason camille yoga and theodore it's your support that really helps a small channel like this and i really do appreciate each and every one of you so thanks again so now that we've got a pretty good idea of what we're going to make let's just go ahead and dive right in i'm going to start by creating a new react app i'm going to use create react app and i'm going to call this konami one eternity later okay and we're back so i'm going to cd into konami i'm going to reload vs code in the konami directory and i'm going to call npm start on this and there's our base react app now that i have that running i'm going to close the panel i'm going to keep that running in the background first thing i'm going to do is i'm going to create a prettier file so i'm going to do printerrc.yaml and i'm going to tell it to use tabs true just because i prefer to use tabs instead of spaces and so if you look here you can see everything is spaces but after i change my prettier file i can convert all of these things to tabs so i'll just go in and hit save on each one of these js files the service worker i'm not going to use so i'll just delete that and inside of index i'm just going to kill the service worker stuff because i'm not going to use that it's also going to kill strict mode i don't want that either so this is the basics of my index file and my app and also in the app i just want the logo so i'm going to kill this stuff here just to keep it real simple now if i open the browser again i can see it's nice and clean with just the react logo and one of the things i'd like to do is use hooks instead of class components so first i'm going to create a konami code directory just because this is going to be where i'm going to put everything related to the konami code i just prefer to organize my projects like that meaning feature based organization instead of having one directory just called components and having all the components under there i now know that everything having to do with the konami code will be in here and there's a couple of different components that i know i'm going to want to create the first is going to be a use input event the goal of this component is to track all types of user input not just the konami code and i'm thinking about creating another konami code component that's going to wrap this and so what i plan on doing is use the use input event hook to track basic key up and key down movements that way this hook isn't limited to just the konami code i can use it in anything then what i plan on doing is creating a second hook which is the konami code hook which will wrap the use input event and then compare that against the konami code itself so i'm going to start by creating a basic hook so i'm just going to call it use input event i don't know what i'm going to be returning right now so i'll just return null and i'm going to be calling use effect and the events i want to track here are key down and key up so i'm just going to say global. add event listener key down and i'm going to need a key down handler and the same with key up i'll need a key up handler i'm going to declare these here so i'm going to say key down handler that'll take an event and key up handler doesn't need to take anything i'm doing here is i'm just going to console log i'm going to say key down handler and the event this is up okay next i have to add this into the app so i'm going to go into app.js and i'm going to say import from the konami code use input event use input event and eventually this is going to return the key right now it doesn't return anything but if i put this in here i should be able to see my application running so i'm going to pop open my browser again i'm going to hit f12 to open up the console and i'm going to type a letter i hit the letter j and i can see in my event here that i did get my key down handler firing and the key up handler firing so i can see that it did fire the key j and that's exactly what i need so back inside of use input events because i'm adding these event listeners when the component is mounted i need to also remove the event listeners when the component unmounts so i'm going to do is inside of the use effect if you return a function this is going to be the unmount event right here so i'm going to take my event listeners just copy them in here and i'm just going to change these to remove and this is important because this hook doesn't know when it may be mounted or unmounted that's up to the component that's consuming this hook to decide that so anytime you add an event listener you always want to be sure to remove it now so far the only thing this component does is log to consoles because we're returning null on line 21 and we actually want to return the key being pressed so up here i want to use state so i'm going to in addition to use effect i'm going to say use state and then here i'm going to declare my key and i'm going to use a function to set the key and this is going to use the state i'm going to initialize it with null null is going to mean that the key is up or not pressed at the moment so now in the key down handler all i have to do is call set key and i'm going to use event.code actually let's destructure this to just say code because that's all i really want and as far as key up goes i'm going to do the same thing i'm just going to pass it null now i can just take key from up here and return key next i'm going to pop open the app.js i have the key set here and i want to check to see if that key is actually being returned correctly not code key and if this is working correctly i should see the keys pop up enter f perfect so now using use input event i'm able to track key up and key down presses and those are just returned as key in this hook now the next piece is to create the use konami code hook so in here i'm going to create another hook called use konami code.js and i'm going to do the same thing i'm going to export use konami code and i'm going to import our use input event i'm going to use that here i'm going to track the key using the input event and for now i'm just going to return the key and i'm going to go into the app and instead of tracking the use input event i'm going to use use konami code and i'm going to change that to konami because i want this to return a true or false based on whether the konami code has been input so let's go back here and just change that to false now i want to use the use effect again so i'm going to copy that line from use input event it's probably going to be the same thing so i'm going to do use effect use effect but here what i'm going to do is i'm going to add a key as the dependency for use effect and basically what that means is it's going to fire use effect every time this key changes during the key up it's going to change during the key down it's going to change and i'm just going to console log let's see because we're in the konami code i'll put that out just so that the debugging is a little bit easier okay and if i pop open the browser and i hit a key i can see that konami code key is key f and then it resets it back to null and you know what looking at this i think i forgot to add yep i forgot to add it here so adding this little line this empty array means that this use effect will only run one time when the components mounted so if additional properties are passed in then it won't call this and while i'm in here i'm just going to go ahead and shorten these [Music] okay i'm back to use konami code so i'm going to paste this in this is just the konami code and these will be the keys that i'll be comparing to once they're once i get them from use input i'm going to compare them with this array here now if we go back into use effect it's firing every time the key changes which means that it fires when the key is pressed down as well as when key becomes null which means the key is in the up state and here we only care about it being pressed so i'm going to say if the key is null i'm going to exit here that way everything after we're only dealing with key presses the next thing i'd like to do is keep track of how many keys i got correct so for example in this code if i were to press any key other than up arrow i'd like my correct count to stay at zero if i pressed up arrow i'd want to go to one up arrow again i'd want to go to two and if i pressed any other key then the down arrow i'd want to get reset back to zero so that's what the count is going to be so i'm just going to go ahead and use state for that i'm going to name the value count and the function set count and that's just going to use state and i'm going to set it at 0 because they haven't pressed anything so they got nothing correct next i can check here i'm going to use count as the index because it starts at zero the first index of this is going to be zero and if we get one correct the next index will be one the next index after that will be two so the index of konami code is going to track with the value of count so what i can do here is i can say if the key equals the konami code count so when this passes that means that they pressed a key correctly i'm going to say set count and i'm just going to increment the state by one and i can check to see if this is working by also outputting the count now in the console if i press any key other than the up key the count is going to remain at zero and if i were to enter the code after i left right ba you can see it does increment all the way up to nine and i'm just going to go ahead and hit another key just to see yeah it should be 10 keys and you can see here after i press the up arrow actually the count was still at zero and that's because we're outputting the count here before it even gets incremented so the count will always be one behind in the console but it does look like it is working next i'm going to add the invalid state so i'm going to say else set count zero and i'm going to test this again by entering part of the code and then just pressing a random key so you can see here as soon as i hit the shift and the a key it got reset back to zero so the next thing i'm going to do is i'm going to invert this if i actually have an entire video on inverting if statements and early returns so i'll link that down below in the description i highly recommend you check that out but what i'm going to do is i'm just going to convert this equal sign and then swap this because i just want to exit the function here and because i'm returning out here i can actually get rid of the else completely and i'm going to create one more piece of state i'm just going to call this success what this is going to do is let's initialize it to false once we reach a successful state which is 10 correct i'm going to go ahead and set this to true and i'm going to change this line 35 return to false i'm going to return success and down here i'm going to add another condition that's going to say if our count which is still one behind so i'm going to say i'm going to increment it plus 1 and i'll make that equal to the konami code.length then i'm going to set success to true now to confirm this is actually working i'm going to open up app.js again and i have the konami here but this is just outputting true and false and because it's react i need to output a string so i'll just change it to yes and no and now when i open up the react application again you can see it has no at the bottom i'm going to say up up down down left right left right b a and as soon as i hit a you can see it changed to yes so that's the basics of our konami code we've wrapped everything into a simple usable hook so in any web application i can just import this use konami code and it's just as simple as adding this one line and adding a test here so the next piece i want to import the logo so i'm going to go ahead and open up the terminal and i'm going to cd into public and i'm just going to download the konami logo into public this url i'm going to go ahead and paste this in the description so you can copy it out of there now all i have to do is scroll up and then as far as this logo goes i'm going to rename this to react logo because we're going to be adding a new logo so i'll change this to the konami logo and let's see i'm going to open up public this is the file i downloaded konami logo.svg okay and now i have the konami so instead of this react logo i'm just going to go ahead and create a new logo that is going to be konami which is the true or false value if it's true it's going to be the konami logo otherwise it's going to be the react logo and then i can change this src here to just the logo now we don't need this true false here anymore and uh oops it looks like it's in the wrong directory so i'm going to go back into public because the logo is not in there it's actually in source so the react logo is in source and the konami logo is also in source and now it looks like the react application is running again so i'm going to enter the code va konami code so those are the basics of creating the konami code hook but if you bear with me i'm going to do a little bit of refactoring because i think what would be really interesting is that instead of use konami code i had a generic hook that could be used with any type of secret code so if we look at this konami code project it's very specific to this konami code and if i wanted to change the code i would have to change this if i wanted to have another code i would need to duplicate this file and basically copy and paste all the contents but i can actually create this to be really generic and not and have the code passed in as a prop okay so what i'm going to do is i'm just going to close these and i would like to actually rename konami code to secret code and i'll have to go into app and change the konami code to secret code but i'm still going to use the use konami code file in here what i'm going to do instead is i'm going to create a new file called use secretcode.js and it's going to be similar to the use konami code and the difference is instead of having the konami code up here let me rename this first and the reason why i'm doing that is because it's going to rename everything in here to secret code because i would like to just pass in the secret code and now in the use konami code i'm going to import the use secret code use secret code it looks like i forgot to rename this function there we go no more references to konami and we'll keep this in here and this is just going to be the success using the use secret code and i'm going to pass in the konami code now we don't need any of these and we don't need our use effect so this is the use konami code it's going to just wrap you secret code and pass in the konami code that's wrong use konami code doesn't take any arguments and the use secret code does take one argument which is the secret code in this case it'll be the canon code and in this way the use secret code is generic so if i wanted to add a different secret code i could either call the use secret code directly or i could wrap it in something like this which is the use konami code okay it looks like we have an error in our application it's complaining about the secret code oh okay so that's because i'm passing this as a prop indirectly and i had this as an object so let's just take that out and if i go back in the application let's test just to make sure it's still working so up up down down left right left right b a konami code okay i'm actually pretty happy about how this is working we were able to implement generic hook just for tracking key presses we were able to implement another generic hook for secret codes and then we were able to implement finally our use konami code hook it was all pretty easy to do and very reusable i mean come on look at this code so this is this is pretty good right this is not too much code this is uh pretty easy to add into any site so i definitely like the way this hook turned out and i'm not quite sure yet where i'm going to use it but i know for sure i will of course the repository to this is going to be linked in the description below go ahead and check this out i'd actually really love to see where you do end up using this if you have suggestions on how i can improve the code let me know i'll update the repo and just a reminder for those of you wanting to subscribe right now be sure to click the bell icon and select all otherwise you won't be notified of all of the videos that are coming out that's just the way the youtube algorithm works and of course thank you for spending your time with me i really do appreciate it and as always i'll see you in the next video [Music] [Applause] [Music] oh

Channel: Joel Codes

Views: 920

Keywords:

Id: 08Gd6ZABaII

Length: 20min 43sec (1243 seconds)

Published: Mon Sep 14 2020