Orbit Satellite

What We Are Building

A satellite UI component whos orbit speed can be controlled.

Concepts

These are the XState concepts that will be covered in this lesson and required knowledge (if any).

Concepts Covered
  • Context
  • Options
Required Knowledge
  • Config
  • States
  • Initial State

Modelling

These are the states, events and context (if any) the machine we will be building will have.

states
  • active
events
  • INPUT_CHANGED
context
  • speed

Template

Follow along and build this component step by step using the template.

Steps

Code

Define the machine's context type. This defines what properties can be in the machine's context (more on this later).

  • types.ts
  • machine.ts
  • animations.ts
  • components.ts
  • index.ts
export interface ContextType {
speed: number;
};