Execute Code when Entering and Exiting States using Activities
Activities are useful for anything that needs to be executed at the beginning and end of a state. Like an animation that needs to stop or an observable that needs to be unsubscribed. We'll add a completely spurious Dark Side mode for the quiz that makes all the ui elements float around the screen so that users have a more difficult time taking the quiz. Leaving Dark Side mode should return all elements to their original locations.
Instructor: [0:00] I've created a small state machine to model the two sides of the force. When you're on the light side of the force and you're corrupted, you go to the dark side of the force. On the dark side of the force, if you're redeemed, you go back to the light side of the force.
[0:14] We'll use this state machine to explain the concept called activities. Activities are useful when there's a process that needs to start when you enter a state and end when you leave the state.
[0:25] This is a great place for something like an observable that needs to be subscribed and then unsubscribed, or a set interval that needs to be canceled or WebSocket that needs to be connected and then disconnected. We'll add an activity called theDarknessGrows to the dark side.
[0:44] Let's use this machine in our app component. We'll define this activity in our second object here, theDarknessGrows. An activity is a function that takes in the context and returns another function that will be executed when the state machine leaves the dark state.
[1:08] Code up here is when you're entering the dark state, and down here is when you're leaving the dark state. We'll create a local component state variable called darkSidePower. We'll set it to initially.
[1:22] When we enter the dark side, we'll set the darkSidePower to 10. Then, we'll set up an interval here to periodically increase that power. We'll do that every 600 milliseconds. Now, when we leave the dark state, we'll set the darkSidePower back to and clear that interval.
[1:42] Let's make a button that allows us to change sides of the force. If the force state matches light, we'll make a button that says, "Come to the dark side," and send to the force machine a corrupt event. Otherwise, we'll say, "Go back to the light side," and we'll send a redeem of it.
[2:11] Let's use the darkSidePower by sending it as a prop into a list component. Say darkSidePower == darkSidePower. Let's set that up in the list component.
[2:27] DarkSidePower here, and we'll define it as a number. We'll add some styles to the list item. Let's set the position to relative tough to a random value based on the darkSidePower, left random value also vexed on the darkSidePower. Let's add some rotation as well and make the transition to these values.
[3:06] If we click "Come to the dark side," our answer starts to get more difficult to select. It only gets worse as the power of the dark side gets stronger and stronger until finally, if we can make it back to the light side, they return back to the normal place.