This course has been updated! We now recommend you take the Svelte Fundamentals course.
Transcript from the "Wiring Up Interactivity" Lesson
[00:00:00]
>> Okay, so now that we've created the buttons, we've got the buttons inside this Card component for the selectors, and we've got another button for the same price, we need to wire those up. Which means employing createEvent dispatcher, Creating a dispatch function. And then once the button gets clicked, I'm just gonna make that slightly neater, we can do on:click=() => dispatch('select').
[00:00:52] And then in our Game component, we can add a select handler to both of the celebrity cards. Now, we don't yet know what's gonna happen there, so I'm just gonna leave that blank, like so. And we're gonna add a similar thing to the button, except instead of on:select, it's gonna be an on:click.
[00:01:29] And then we need to create a function that is gonna get called when each of these things happens. We'll call it submit, because the user is submitting their response. And what submit is gonna need is, is it's gonna need the celebrity on the left and the celebrity on the right and some sort of representation of the user's guess.
[00:01:54] And the way that we can do this is, and there's many ways that we can do this, but the way that I'm gonna do is I'm gonna pass in the celebrity objects as the first two arguments. And then the third argument is gonna be a sign, which is gonna be either -1, 0 or 1.
[00:02:13] And then we will see if, The Math.sign(), which is a function that's a Math.sign(), if you give it a positive number, it will return 1, if you give it a negative number, it will return -1. If you give it 0, then it will return 0. So that's very useful for this particular use case.
[00:02:35] Math.sign(a.price- b.price), that value is gonna be 1 if a is the more expensive celebrity. So if that matches the sign that was passed in, Then the result is right, otherwise it's wrong. Then we can console.log that result. And then once that's happened, we can increment the index of the current round.
[00:03:20] If i is less than the number of rounds in the game -1, then increment it, otherwise, We're gonna end the game, but we'll leave that as a to-do for now. So now we just need to call this function from each of those event handlers. on:select you're gonna submit a, b.
[00:03:45] And then if we have clicked on card where the celebrity equals a, then we're guessing that a is the more expensive celebrity. So the sign is gonna be 1, because a.price- b.price. And then it will be the reverse for the other celebrity, -1. And then, finally, for the guess where it's the same price, it's gonna be 0.
[00:04:17] So let's try that. Let's guess Carrie St. Louis. I was wrong. I don't know if you can see that on the video, but down here, it's telling me that the result was wrong. Two people from Big brother. I have no idea who. It'll actually click through to, cameo.com.
[00:04:45] Gary Busey is definitely the more expensive than these two. Also, his videos are completely unhinged. I got that right, result code on the right. Okay, so we need to display that result somehow. But we've got everything pretty much wired up the way we need it to. So let's move on to app.