Refactor Game State to a Single Repeating Broadcaster
When combining two broadcasters it also makes sense to output both of the values as a single state object so our operators can have complete control over how the values come through. This saves us from worrying about keeping values in sync especially when we use something like a repeat operator that tells the original broadcaster to cancel and start over. In our scenario, the mapping logic for I game can easily be expressed inside of the JSX If we have both the most recent value of the guess out of the word.
John Lindquist: [0:00] The first issue is evident here where you see one setup broadcaster. If I guess the word, you'll see one more, but if I guess the word again, [inaudible] , this time you'll see two. If I guess it again, apologizing, this time you'll see one, two, three, four.
[0:30] This makes me think of runaway listeners, meaning that there are listeners being set up which are not being canceled, which is evident here in share. You can see that once we cancel, we do not reset our listeners.
[0:46] The solution is to reset listeners. Now each time I guess, you'll only see one setup, but now our word isn't updating, which is actually the desired behavior, because this word lives outside of the repeat of our game broadcaster, so getWord does not have repeat on it, it only has share.
[1:14] That means that this getWord will get out of sync with this getWord, since this one is being repeated. Now that we're properly cleaning up listeners, this one is not.
[1:26] A nice, clean solution to this is to delete the word which doesn't get repeated, delete the guess as well, and manage all of that state inside of just the game broadcaster, so we can have our game broadcaster return both the word and the guess.
[1:46] This needs to start with an array of two empty strings. Let's comment out the game. Right now, you can see the logic is broken, because it's doing a map which doesn't match what we're expecting anymore. Instead of mapping here, I'm going to grab this, cut it out, delete our map, and bring this down as the game inside of the <p> tag.
[2:14] Now you'll see this as reloading too quickly. Let's back out of this real quick. Let it error out. That's because this repeat was firing because we hadn't updated our done if logic. Let's comment that out for now and bring our broadcaster back in. Now we're back in business.
[2:39] Let's change our done if logic now to accept an array of word and guess. Now the logic for done is essentially checking if the word that every letter is included in the guess.
[3:01] Now, when I type here, you'll see it reloads the next word properly, and I can guess the next word.