Timer and Input Recap

John Lindquist
InstructorJohn Lindquist

Share this video with your friends

Send Tweet

This lesson recaps everything we’ve covered about building a timer stream, and input stream, and how we’ve combined all their parts together.

[00:00] To summarize our entire game, we have five buttons and an input, all of which have query selectors, just to get a reference to it. And then, from events which take that reference, and then the event you want to grab and set up as a stream.

[00:14] When we click on the start button, you see we have this start stream. Let's look for that. It'd down here in emerged observable, which means that start or half or a quarter, all of these click events, would trigger this stream.

[00:30] If we look for the starter stream, we can see that when we click on this it's going to switch over to another stream called interval actions. Interval actions is going to take this 1,000 or 500 or 250 that comes from our starter stream, because we switch map using this function, and this time that comes through. It's going to pass through to another observable merge.

[00:54] It's going to say, "OK, start an interval and then run that interval until you get a stop click and map that to a increment function," or, because we're in emerge, "When I reset click, we'll map that to the rest function."

[01:13] We'll go ahead and look at the next step in this, which is start with. Start with is simply going to take this data from up here, just an object with a count of zero, and set that to the initial accumulator value of our scan. This scan, as it goes through each time, so scan one, two, three. As we go through, each time it's going to apply this function increment as long as this interval is running.

[01:37] Interval map to an increment, so one second increment, two seconds increment, or, because we emerged or, the reset would pass in the reset function and then the scan current function would apply. This reset function would apply to the data.

[01:57] Then, if we look at our timer stream to see where that's used, you can see we have a combined latest with a timer and an input. It's going to take that timer, which is going to be objects that look like this with a count and a value. It's going to combine it with an input value, which is just this input up here with the text of the input.

[02:17] We can format that to give us an object, so an object with a count of whatever that count is, and a text of whatever the input is. With that combined, we're going to take until the count is three. Our game only lasts three seconds long.

[02:33] We're going to filter, meaning if the count and the text are the same, we'll allow it to pass through into the reduce. The reduce is going to start at zero and then give us a point for every time that this count and text match.

[02:49] Then, finally, once that's done we'll get a final score. It will log out complete.

J. Matthew
J. Matthew
~ 2 years ago

I just want to point out that, technically, the game doesn't end after three seconds, but rather three emissions from the interval Observable. The duration between those emissions depends on which "starter" button you click—and, in fact, you can change that midstream by clicking a different button.

So you could make the game really hard by clicking Quarter and only having three-fourths of a second to score any points. Or you could click Start to begin with a one-second interval and score a point, but then click Half mid-game to give yourself only a half-second window from then on.

J. Matthew
J. Matthew
~ 2 years ago

Actually, now that I think about it more, it's not even three emissions—the game ends whenever the value of that count property within any emission exceeds 3. Since we increment the count by 1 on each emission of the interval Observable, and we typically hit the Start button, which sets a one-second duration between emissions, it more or less amounts to ending the game after three seconds. But, in addition to the customizable interval as described in the previous comment, we could also modify how much count increments each emission. And don't forget about that Reset button—you can use that to keep the game going indefinitely.