Live-code a Rock, Paper, Scissors game with us | JavaScript, CSS, HTML

Key Takeaways

hello oh no have i started the wrong one again no no i think that's the right yeah i think but it also says nobody's watching no well that's probably oh no now people are watching okay panic over i think it's a bug that's a bug yes wow hello to everyone all of you thank you for joining us excited for this rock emoji scroll emoji scissor emoji did you know there was a rock emoji i did not until i did this no why would you use that shreems was 45 minutes early yes uh first time ever attending a live coding session i'm super excited for this is anime fan lots of people are here yeah has it started says tom chant i think it has i'm just saying a spinning gif i wonder if tom is still seeing a spinning gif what's a spinning gif i don't know it's like a waiting screen that you have on i don't know that i have one don't know anyway we've started so hopefully you can see us okay says it's working and he's watching it okay that's good excellent okay yeah in case you haven't heard the excitingness we will be making a rock paper scissor game are we yep going to get it up on the screen um here just a little bit hellos remember family so here hey hello to you too um yes here is the screenshot a very small screenshot a lot it will look like i can zoom but it'll be well actually it's not that blurry yeah if you let it go i think yeah there you go so yeah um here is the starter code and it dawned on me this afternoon why don't we have the to-do's in the actual scrim that would be clever so that's what that is pretty clear if you'd like to join in uh link right there yeah don't forget to follow it yes i think i already did but i will do it again so anyone coding along at home uh will not get our changes okay ella emma leonard michael with myself rock paper scissors very official so we are starting off with this rather face like contraption yeah there is something about it yeah it kind of looks a bit like that like a pink rubber by the way before i go any further if you've been if you've been thinking about trying out wordle today is the day to do it everyone has the same word to guess today's was a good one and that is what i'm saying what was it well i can't tell because that would ruin it for people wouldn't it we're both looking intelligent that is good i hope we can live up to that look watching from south africa i'm from spain yeah i know i only look intelligent yes um yes so this is what we have right cool in the html so does it um well i kind of saw but like who do you basically pick one emoji and then the other emoji is generated or how does it tend to work i mean i know how rock paper scissors works yeah well they're both going to be made at random at the same time well yeah you can't do one and then the other because then obviously you would choose the one that beats it wouldn't you maybe you don't know how rock paper scissors work so you have to do it at the same time yeah but is it like you you you basically play on one online screen like for example if i have it on my phone you know i pick one and i press i pick one yeah and then it gets hidden and then i give you the phone again okay ah i'm thinking i'm clarifying it's called clarifying anyway so basically yeah it's single player or multiplayer are we talking about at first it's single player the computer plays the computer i mean yeah i mean realistically it's going to be like why is it math.random that's not really an ai anyway over in the html yeah i have used for this utility classes here they all are and what this means is oh you've written your own yeah oh wow i have oh wow you're writing your own so i've used flexbox here to center things on the page and to center the emojis that will show up inside these i call them hands um and the one way to do that is by having a utility class called flex which only does display flex and then you apply it to the elements that you want to use in so this it does make for some more complicated html as you can see but it also makes things cleaner in terms of you know exactly what's doing what and it's easy to add flex to things and i'm not explaining it very well however i do know someone who can explain it well and that's kevin powell yes i learned this from the build a space travel website course in which kevin powell introduces us all to utility classes so go check that out if you're interested in utilities there you go you know like i was trying to celebrate on tailwind css and she was like well i don't know about it and now there we go yeah it is just witnessed the birth of tailwind leanne of lyanne's css pumpkin wind css i don't think that that's gonna i mean maybe it will translate okay but i think in english it's already like a bit it could be pumpkin css yeah pumpkin spice but anyway yeah it works in a similar way to tailwind but instead of bringing in the whole of tailwind i'm just adding the utility classes that i need i think we should also just very quickly point out that if anyone starts an argument in the chat right now about utility classes or pure css they'll be kicked out well i can kick them out actually but i don't think i would and i don't think anyone would start that i'm just wanting people out who knows eric b has reminded me of our weekly tradition yes and that is if you are new here put a bunny rabbit into the chat and if you've been before hit me with that tiger and if you're dave hit me with that elephant or any other animal you want we should put like uh like an elephant emoji somewhere somewhere up in there i feel like dave can remember the elephant on his own it would yes we don't use this information it's just for fun and something of a tradition oh an argument about infinity undefined yes that's very simple there is no argument it's undefined they're wrong yeah or if you're only and you just go whatever nod and smile and ask when would i ever actually use that anyway i mean and lots of bunny rabbits amazing yes welcome to the bunny rabbits among you and welcome back to the tigers yes oh look a wolf welcome everyone a wolf and a raccoon oh interesting is that no berlin is berlin as a bear i'm trying to figure out where that person is from it's probably some kind of is it raccoon or is it an altar or something what is it now the auto emoji is like floating on its back and it's brown well if you why is it vojtech voice i think voice uh well if you can tell if that's emojis from the town you're from or that's just your favorite animals so there you go um interesting stream as i'm developing rock paper scissors and villagers react and angular i guess all in one or no i think it's like comparing yeah trying to build it to then see how it differs yeah interesting very nice we should do some stuff with react but i need to relearn it because i haven't used it in many years i made a utility class today with the newest css so i did good um yay uh he couldn't find the rabbit [Music] right that makes sense i always receive a notification from you guys but never been hit but now i have mine to learn something new i can't guarantee you'll learn from us well you might learn what not to do that's no information too that is useful greetings yeah what's that zebra no not that there uh yeah it does bug me how the full-sized animals like zebra for example are smaller than the rabbits yeah like this yes the whole tiger is smaller than the big one but well you know what to do if you're not happy with an emoji you can submit it to oh there is like uh some kind of committee that reviews them or something yeah i could but you know time is short so anyway let's get on this um yeah so these are the functions i have identified that we need to do play button runs play it's actually not the play button it's the run button we could change it but okay randomly assigns to each hand each hand or the hands are these i didn't know what else to call them yes basically these yeah i don't think it randomly assigns it to each hand it randomly assigns to like a computer's hand because you pick you pick one right what i mean is both white squares get a random emoji right oh is there anything being shared on the screen i don't see any code thank you for telling just got the wordle on his second guess and he doesn't know if that says more about me no comment to you tom yeah i actually saw was it um [Music] ah what what's the the the guy who created css for js developers josh josh comey yeah yeah he actually had a guess on the first one i think you're thinking of william shatner unless they've both done it i think they've both done a problem yeah but i mean you know it's only a five word five letter word so so doable yeah so anyway wrong button plays run function which randomly assigns one of these three emojis to these squares example here so basically when you actually play you don't well you don't actually choose what you want no it's random i think you should choose let's do this and then we can refactor or implement okay what should you call it okay so basically you just randomly pick two emojis stick them into those squares uh and then yeah do you decide who won yeah basically which is the run declare when a function okay and what that does is it displays that i mean really that could be part of that function yeah probably let's move it i mean i mean realistically user stories will not be bad details but so what declare winner will do is if it's a draw it adds the draw class yeah to both hands and the draw class is over here it's an orange border and they both get slightly bigger and there's also a winner class which is a green border and only the winner gets bigger which is the other option of what declare winner does if only one hand wins then you add the green winner class and display in the winner text who has one okay and then um initialize i think it would be nice if we had like a question mark or something in them on page load yes oh you're ready to teach me at japan interesting so let's do it um let's start with this randomly assigning one of these i think it's probably easier to start with initialize i feel like that's the least important thing oh let's see yeah if we run out of time yeah okay yeah let's go we have time we will do it i don't think your part is charging no it doesn't okay bear with me oh oh well i will there'll be no funny sounds today the rock image does not show up on my chrome browser do we need some special font installed ah no um it's not a special font but it might be that you have a slightly outdated version of the operating system basically yeah you oh yeah if you if you're using an old mac because the emojis get loaded up on the system update so you might want to well not now because obviously you'll be uh you'll log out for like three hours yeah um but you could use another one i'm not sure which yeah i hope that answers your question so i can be more helpful but anyway let's do this uh play function so okay i will copy this actually i might as well copy all of these no no shut up leon okay here they are ah you already have it i do so i have let hands this might have been poorly named is an array rock paper and scissor and then let hand one is basically this that hand two is the one on the right and then button there's a button and a winner text currently has nothing in it um but it's this got there which is where we will say who has won uh okay so my idea is we generate a random number between zero and two and then that will choose from this array which i will actually rename to possible and hungry so um left random num equals let's see if i can do this for memory mouth dog i know i i actually can today math got random times three or it's not times three plus three maybe it's times three okay that's what i wanted yeah so i can't get off on memory still oh man so yeah that's not right so that is three okay i'm doing it in the wrong one needs to be inside play yeah so now console log random run just to see what that is doing and also this is a good chance for us to wire up this actually as tom chan told us instead of saving that i will do adjavent listener um play okay on click on a board let's just click and play let's give that a go one zero zero one okay yeah so we can get all of the random numbers um yeah why okay otherwise you would always have a draw they'd get the same yeah yeah um okay let's come for back to our two days are they in the candy they are um so randomly assigned to each hand so generate the number twice and then pick pick that into your hand yes but first we need to find it from the array don't we i'm sure so to do that we must do um let alone hand equals possible hands uh and then now let's see what that does current hand scissor rock rock rock scissors paper yay wait you've got to celebrate the small wins you know yeah that's true very true okay yeah zozo's using the diamond emoji that's a good idea oh yeah bye it's pretty good huh catalina um that's not the current one is it no i think i'm guessing coding that's how to break oh anyway continue so we have this yeah it's generating that but now i just realized i totally um over complicated this because i had an idea that if it says rock you display the rock emoji but surely it would be better because i have that in there [Music] why not just i mean that okay it looks a bit funny but i think that's okay that's fine there you go and you have some rocks okay cool fine no no you need to get a horn to celebrate your little wins totally yeah i love the small wins okay so we got to put them in the doo-dahs oh no you need the hand now you need to generate the second one no yes probably yeah what's up what's up you just like come on let's go i feel like you've got one idea and i've got another idea the intersection of them is i think what's happening is that you have a mix of two ideas in your head and your yeah you know which one's going on one idea is from you michael yeah well i don't know it's not my phone this was what i was going to do what were you going to do i mean when you said yeah when you say that to me you always think like i'm inside of your head and i know exactly what you mean oh i know what you want to do oh now i do too we can use cool the initialize function and what we can do is do something along the lines of play and then pass in hand one hand one being this and then we need to do the same for hand too so it will run it i don't know if it's exactly simultaneously but in one go but it will generate the two different um hands basically look michael we just have to put in to here and let hand we have this what kind of like where did you get this from like this idea of playing i made it scissors like that i mean have you ever played wrong purposes i think you need to see it in action okay okay okay content no i don't it's not called display it's called um game describe to me what actually what you actually have on your mind because if i see you into action they'll be like really late it will be coding no it won't and we just have to pass something in to this which i can call display and then text content equals um okay right so we've got the function into which we pass something which we're calling display but then you need to run initialize when you hit yes when you hit run and probably there might be a cleaner way of doing this maybe not actually let's see oh my god it worked sorry that was a shock wow the surprise of that working is actually incredible i mean okay so just it's initialized but i think i know your brits spell it with an s yes well that's because that's uh never mind i wouldn't say that's how it's meant to be spelled but oh well yes although it you do say initialize with zed you do i was thinking like actually it kind of sounds like it should be instead yes but if you want to be snobby play the horse please the hard they're asking for the horn anyway yeah so if you're just as confused as me i think what lian has done is she has created initialize function into which she passes the basically the divs for these squares and then she says grab me a random element from this array and stick it into this hand that i have passed into that is pretty convoluted way of doing it but i'll give you i'll give that work is it yeah i think i think it's kind of how can you clean it up i do like well i don't know i just know that your way is crap no i'm just saying like a little bit it's a little bit awkward but then i can also see yeah i can kind of see why basically yeah once you get the logic it's kind of uh very straightforward but well what's really puzzling is that you have this uh you basically grab the element and then there is play which is a mixture of like a logic that creates that randomness and it's also dealing with um display and that's just in my head i prefer to have these things separated like the whole logic of creation and number mangling and stuff and then just like this goes into the dom like this is presentation stuff i like to have those separated but again this is a small app so you know if it works it works yeah sounds good okay and then what what's next jose thinks it's pretty simple to understand then woo some horns nice serious question for you today is using emoticons in jail as an actual thing like are they interpreted correctly everywhere um no well they're not interpreting well by correctly they're not interpreted the same on every platform so it's like yeah um emoji media this is where you can check them all out yeah so if you go for like a lot of time on your hands some of them look really silly so there you go like if you scroll up um let's have a look at um winter yeah well come on cold face dancing one that kind of slightly different i think there are um there are times when the emoji wouldn't render properly take the papers for example so in a production code base you probably wouldn't use them like this i think you would use like you know you can get those unix codes or whatever they're called huh is it unix codes oh unicode i think the can i use emojis in javascript yeah i think what you would do you would also have a fallback in case it doesn't get rendered so you would have like a word that would be shown yeah he could do that you can get away with copying and pasting yeah there will be situations when you can't do it i still think there are times when you wouldn't um yeah this is what i had in mind using this the the unicode yeah for the emoji every emoji has a kind of code which will render it well they say it will render it across platforms but actually sometimes i see the actual code rendered so yeah yeah sometimes sometimes it wouldn't work so you would want to have um some kind of fallback yeah but again generally are suffering generally they're pretty universal they work pretty well don't forget you have to account for a tie if both hands are equal yes yes we did going to do that next uh your logic for declaring a winner would still work everywhere then hope so let's find out um yeah there would be a weird icon that would get rendered if there's an issue rendering the emoji but the logic is still fine that's good to know or you can use it in text fields you just see i think yeah the modern browsers can read the emojis correct so now we can add some styling basically over to the to-do's um [Music] oh we need to run the declare winner function when we play um so here i don't think you do want i think you want to run it at the end of initialize the deployment with that function doesn't do anything no i know i'm just checking that everything still works yeah but the thing is that now you're running it twice huh for each hand so you probably want to run it yeah but then we might get a situation where it's declaring the winner before it's finished running this i mean probably not uh no no it should be fine i mean you can make it a sink away and just await i feel like that might be overkill bearing in mind that this is only three lines of code it's probably going to be all right but let's see um yeah so we can put a big green tick here and delete this amazing stuff um so now on to declaring the class oh no well yeah the winner class um so this is what um [Music] johnny oxley was saying don't care die basically yeah because sometimes you will get that well that was well i missed it but anyway so oh crumbs in here i'm having a blank here i think what you want is how are we going to ascertain which is which is the way you well that's what i meant like because i think you were trying to confuse the two of basically what's the text and what's the rendering but i think what you're gonna have to do is you're basically gonna have to i mean the draw well you're gonna well firstly let's access the um hand one oh you want to code the logic for for the thing first if hand one is the same as hand two i think that that'd be yes uh [Music] because you you just like you're like a parrot on a stand you know like it's difficult to know when i really need to answer it um it's a draw and then right we can have a nice little scale emoji let's if i go well that didn't work but oh right because yeah we need to do text content not because hand one itself isn't the same as hand to itself because that would mean that the two goods are the same but actually we want the context content of them to be the same yay oh no no sound i didn't know that i had a party boy i've never pressed that button before oh well my prayers have been answered maybe it's been updated i think it's been updated that's amazing um [Music] could you please provide the subtitles or closed captions um there should be a button on your screen that allows that i think yeah chrome provide uh create author generates captions you should be able to do it in youtube yeah yeah no it says it's unavailable i don't know why um i think that would be available after i don't think they generate it for life oh yeah i think but in chrome you can do it yeah um where is it i don't need that settings yeah and then you click get that okay yeah and that should that should do it for you hope that helps but again don't trust everything it says because some of it will be funny ah see now the problem it keeps it so that yeah the other thing we have to do inside play is remove uh the classes that we've already added so to do that we can do hand one oops dot plus list got removed with a text but you want to remove text content well no because this is hold on let me generate a draw yeah i haven't actually is draw and the same for hand too let's give that a go yay anyway so now when i run again i'm hoping that these like well that line of code will remove the draw oh no only removed it from one yeah because oh yeah but can you remove more than one yeah in the same line i mean because i need to remove winner and draw i think i don't know but you can give it a go okay one draw yes wow yeah actually you can you can remember multiple classes in one function well that's perfect well yeah but you still need to remove the text yes so when a text dot text content needs to be string well that was interesting like three drawers in a row there you go oh i think that was yeah yeah it was just three drawers in a row okay wow i didn't know you could do that neither did i good news emmanuel yeah okay and okay now we've done one case and um now what do you wanna cover the rest i do but i've had an idea for i'm not sure if this is a great idea but i'll do it anyway um if you would like to learn excuse me how uh to code you can do so with scrambler frontend gripper yes and to get involved in this you need a scrimba subscription and i will give away one uh six month scrimba subscription chosen at random from everyone who retweets this tweet at the end of the show unless i forget in which case remind me uh you can't forget that i can so head on over to this tweet which i wanna put in the chat and retweet it and you might win three months of free three six months of scrimba pro so was that your idea that was my idea okay okay let's see um and then come back here and watch the rest of it preferably don't leave in the first place that would be disastrous anyway yes so we figured out the draw but now we need to figure out um if it's a winner there are so many permutations uh well i actually don't think there are that many we'll have a look at it i just joined how did you get the emojis to work well um they're just in this array i'm not saying this would necessarily work in production code oh i think that's good enough but it's good enough for now yeah i think it's good enough i mean sometimes you do boot emojis and stuff like you know when you go to some website and they have an emoji in the in the text then yeah they've just put it into into their reactor or whatever yeah that's right nice so anyway we now need to figure out possible situations as johnny sullivan says now instead of reinventing the wheel how many rock paper scissors possibilities four there you go tie rock paper scissors cut paper i mean i i know that but i need a list of like if the left one gets do you know what i mean i think you're looking for this the the one to delay yeah and said maths oh oh man it's golden level four statistics activity uh i don't think this is what i'm looking for let's just do it mentally um so hand i think you want to write that else if above sure now there's blank in a bit i'm not bear with us go on oh yeah i think i didn't want that no you want to write the condition in there well no basically what we need to do uh wait what like a completely separate one yeah let's do that hand one um hex content equals rock and and two dot x content equals let's say um a scissor yeah then in that case and which one wins rock and one got text content oh no basically we need hand one dot classless dot add so that means yes okay and then we're going to do winner text.text content is rock wins i think there will be an opportunity to abstract like some kind of rock winning function away from this in a minute but let's make it work first uh let's do this one okay but that's going to be difficult to test because we have to wait for oh there we go well that works but now we need to figure out all the other different um possibilities uh well you just go through i don't know why i pressed that [Music] you just got further in come on look zozo's got an idea which might be easier you can just have two arrays i think one reference hands rps another one denoting which can defeat or that this is above my pay scale if both the same time i'll just check if either has been defeated i i feel like that's um probably a better solution but um outside of my capabilities i haven't thought of this at all actually let's do this quite a few permutations but i don't think they're you can you can basically go straight uh oh actually um no michael you're not trying something because when you're not no you're not you're not because when you do that we go off piste and then we're so all piece right now we're not off piste we're we're on the blue run what are you doing calm down can you compare rock emoji and scissor emoji like constantly compare them to what i just got to log in i just want to go on a record of saying i think this is a bad idea you are on a record i know i'm on fire record has been taken oh is it f uh rock and emoji scissors there's another idea up there um actually okay i'll just try to get this um i'll try to put it into i would personally use an object yeah true uh okay so rook is all right so rock is better than rob is better than scissors that's good that's true uh scissors i mean that's better than paper it should work right i think it will if if the unicodes are aligned in in the right order no no there you go it's up see it's not rock is not uh more than paper but oh well it was worth the time worth a try i think you basically you want to you know no no no no i think what um like for example sylvia is saying here is you could have something like uh let probably should be a cons actually and so should that no i think about it um and then you could have something a lot longer the lines are are you on railways wow i had an idea then if you had like a i think um yeah i don't know no i think you i think you're just trying to overcomplicate it a little bit more than it needs to be like let's just have a look at this bob zorrell's got an idea if you have a rock all right look uh leon can i let's just let's just have a think that if you have a rock and you have ah if they're the same it's a draw else if object hand equals object okay hand two ends ah see i told you let me let me think through it so i think we don't want all the permutations you just want to say do i have a rock uh is it basically look if you have a rock you have could we use a switch case yeah stop reading the comments but they're helpful michael stop reading the comments think about the problem basically if you have a rock the only other options would be would be these basically you really like you already compared for a pie on every single case right you really compare it time so if it's rock and rock uh we don't need to worry about paper paper scissors scissors yeah you don't care so those why did it not copy now sometimes it does that and it only starts again when i restart the browser it's pretty annoying okay that works really well anyway so whenever you have a tie in here because you're basically saying do the text contents match so whenever you have a tie you have already eliminated three possible outcomes yeah so you don't care about these the next one you're just comparing do i have do i have a rock and they have scissors so it's this option if they yeah but i think won won this is what yeah but else they lost i know and then you just and then the rest of it you just need to compare the same one but we've got two players so the rock might be in the other hand yeah i know but you do the same you do the same for a paper you do the same for a paper uh scissors basically uh oh and that what i was saying so you can put so really you only need so only you only need three comparisons so like a winning a winning combination for each else you lost that's it you cover the tie and then you need four other uh else if clauses so this is a winning combination so basically what you do is else if you have this you have a winning combination for a rock michael can you just do it daddy's doing it with classes yeah i suppose you can you can do wow uh i suppose like you can create an object and then track winning and losing like properties of a class yeah but anyway basically this would become if it's a tie then you do a tie else you'd go into the further condition and then here you just go if uh whoops so if text content rock [Music] ah so yes uh let's just extract that so you would say that's probably that probably would be a little bit easier to read so basically we're going if you have a rock yes i feel like we've been at this stage for a while now well no it's just it's all about like nesting it properly so it actually reads but then we can yeah we can extract it a little bit cool okay so if you have a rock oh boy and the second one has scissors e1 else you lost yeah then this if ended can you say if oops i feel like i'll have i'm i have a missing parenthesis that's because further up you've still got the emojis i think how do i yes i do thank you still something missing it's like there's something at the bottom you've got an extra one okay i think i had not enough yeah there we go and that should do it okay anyway so uh you've got a rock and they've got scissors then you won else you lost and then you have if if you have like if you have scissors let's say if you have scissors and then i'm really not convinced this is better than what we were doing we also have to add in into the else you lost we would need to add in yeah all of that rendering logic so so basically i what if says brenda mcconnell hear me out you put all three in an array and use the modules operator to declare the winner if the two are not equal how would you use the modulus operator for that though i'm not sure maybe he's teasing us if that's actually possible send us the code can we assign rock paper scissors value one two three and then compare the numbers i did wonder about this but then it's like a circle isn't it anyway michael we're running up time so let's just do what i'm just gonna go whoa dear in the first place what we will do in the first place oh you go through like multiple ands yeah you can probably well you see the thing with this that you can probably collapse into a ternary or as you go through the the switch statement yeah analysis paralysis i'm going to maybe a switch would be nice let's just i think it is a good case for a switch statement actually you want you don't want uh you basically go and yeah hand to text content equals scissors yeah i think like it would be useful if we actually have like we do this as we do it and then we have a follow-up stream where we're actually cleaning out properly yeah uh i think it's oh yeah of course it's missing here yeah yeah oh sorry man stop it yeah but you gotta have one of these okay [Laughter] where text cut see yeah never mind that's what i meant like you know when you have the it becomes really confusing when you start having your logic the only thing that's confusing is yay okay everything was going perfectly fine and then we went off paste why is that doing that you have deleted one of her killer braces yeah okay now nothing's working else [Music] it's not a draw that's debugged oh let's say there's an issue with this michael oh i think we need this yeah oh okay uh i wonder if i haven't met something up in here well you have definitely but what unexpected character 35 won't what if you want what is it talking about hey if i just okay click run okay so yeah click on online it's just a case of too many curly brackets somewhere down the line michael what right you think it is that closes that yeah okay so that's but it's a really it really doesn't like it 35 maybe it just needs a refresh it looks like unexpected character and basically oh maybe it's maybe it doesn't like some of these emojis but they're commented out on your land it says 35 with us i'm gonna give it a refresh hey oh here we go where did that come from hey some kind of invisible character okay well it's not what that was about but anyway it's now fixed uh maybe there was like some kind of emoji that didn't get rented or something yeah probably invisible look text content yeah but we're not running declare winner when we're debugging uh we've come off commented out oh yeah there you go okay very good that works oh boy this is a look to run but we will get there um so we're looking for oh rock oh well that's annoying well that's why and hey dot text content if one of the value of paper and how to read rook and hand one is winner yeah what are you reading oh yeah this that's what i'm reading again do you have adult adhd i don't know if and so do i if okay come on leanne oh i shouldn't have copied that right that and that so we have a rock wigs we have a scroll and then that would be oh hang on where's that then should that be there oh down here i think dan yeah can i just just put just hit the keyboard for a little bit no because you're gonna go paste and we're never gonna get it going michael it's fine if you have let me just do this if you have scissors ah just honestly uh if you have a rock hand to hand to why is it uh what's missing again all right uh this got deleted oh okay so okay let's roll let's roll yeah jesus can you at least like okay so now we've got this is williams [Music] did you get that yeah and uh with with paper paper uh and you only have rock paper wins over rock yeah but else you're gonna miss some if you don't like this else you lost that's it what oh my god why don't i let you i'd loose on this well there's no that isn't it there's nothing else there oh my word there are only three winning combinations yes yeah but what about if they're the other way around oops which way look rock yeah and the other will know actually the other possibility is paper yeah so we do this so rock paper would win ah because you need to uh you need to have this like drawing thing where you draw who wins ah yeah i'm not sure what the deal is with this else i forgot that you're describing which which one won so now paper um against rock the rock would win wouldn't it um yep oh michael look what we need else if not because if do you or maybe it's just just see if it's fine [Music] why did you go for like this weird drawing of like witch symbol one otherwise it would have been much much easier because you just say boom boom boom claire one night wins otherwise player one lost michael look yeah right this hey why didn't i just copy the whole thing i don't know either okay right so that those are the rock ones this is paper so we have paper and rock paper rock would not win paper would win that one so now we need paper and scissors um ah scissors would win oops crikey yep okay so those are all the paper combinations because the drawer is dealt with up here yes so now we just need to do the same i hope for the scissors scissors and rock rock would win and then scissors and paper um this is wins why is that underlined oh hopefully oh craig what did that say yes there's definitely like because you have a lot of repetition in terms of who wins again so fine but as a like as i said we'll we'll just do it this way and then we'll come back to in the next stream to refactor to do it properly yeah yeah sounds good what was the error again just open the console uh is that invisible characters back no what does it say unexpected character to do line 34 line 34 where is it really actually is like let's give it a refresh it is look at it yeah it's all over the place the audacity yeah where yeah well i don't think it should be a problem inside of a string ideas there's a space missing michael that's fun it's online 38 yeah but look that's got this missing let's play it's online yeah i'm looking for line 38 right right yeah okay now what it's the scissor emoji something wrong with it wallpaper it's call up let's go down where are those characters again okay well say that again no so it's online 38 34 again is that a space i feel like it might be something to do with your keyboard a keyboard look there's one there on line 39 ah and if this has gone haywire as well yeah they're like i have a feeling like it might be something even like maybe yeah okay i don't know it's thought line 34 anywhere else that needs to be purple one all right so i like to say like alive i like your friends would be like in certain characters all over the place oh where is that yeah that's pretty weird okay a result okay okay we have finally got rid of it okay my finger is hovering over the celebrator it's actually not so i can't find it okay scissor wins there you go you have scissor wins paper wins rock wins it's a draw rock wins yeah there you go the only thing is we also need which i will do now uh which had one yeah okay so yeah let's go just from top to bottom hand one dot classless dot um so here would be uh that would be hand one one winner yeah copy that line and then that's hunter that's hand one so that can stay right and this is hand too i guess yes obviously there is a much better way of doing this which we'll get to next we are well aware of that but let's just get it working that's hand trying that's hand one right is it no that hand two why have i got two hand twos in a row then oh maybe and then this would be hand one yes just the other way around okay let's give that a go rock wins draw scissors wins we just need a win on the other side yes hey cool well that was very exciting it can definitely be better it can be better yes it can be drier and you have lots of interesting ideas in the chat so hopefully you will come along the next stream we do when we will refactor this and make it into something to this yes something that doesn't make us want to be sad about it i'm not sad about it i'm happy that it works that's good so now i will choose the winner of a three six month subscription okay some of them might show offensive content apparently um well there's only nine so um random number not random cats i really must check what that is it's a good thing for sale yeah could be risky anyway number five one two three four five that oh one two three four five she ran joe well done you have one six months of free scramble pro so please email help at scrimba.com and tell them leanne sent you from the friday night stream yeah amazing okay well that's that then we will be back the week after next actually because we're away next week um refactoring this which will be nice but for now i have something to show you i will leave you with this it's a video of a pigeon that puts himself to bed and what i would argue that's a dove but anyway technically the same thing put some stuff to oh my word wow okay anyway i hope you enjoyed that yes thank you all for coming and for your brilliant ideas in the chat oh yes one other thing you may think there are a lot of um scrimma things and you find it hard to keep track of them yes which is why i have created this link tree so you can find everything you need um and copy from scrambler right here yes so check it out and you might find out about some other things we have that you have previously know about are the different pricing plans gift cards the community handbook troubleshooting discord twitter uh the newsletter yeah oh podcast scribble town hall recordings oh yeah people often ask me about scrumptious recordings on discord so there you go you can find in there yes nice and this is michael's newsletter yeah this is like your site uh all the the previous previous where you can sign up you wish to grab that newsletter yeah all available on the link tree okay well as sylvia says have a nice weekend and don't forget to play today's wordle it's a good one is it what is it yeah it is i'm not going to start okay have a wonderful weekend everyone and keep coding [Music]