robertpenner

/* Restore blue shading to current state in Simulate */
.css-1brufv, .css-z8ukhg, .css-1c8j3c2, .css-1skrtun {
  background-color: unset;
}

/* Remove square from start of transition arrow */
path {
  marker-start: unset;
}

robertpenner

const machine = Machine(
  {
    id: "Search Field",
    context: {
      filterTyped: "",
      filterApplied: "",
    },
    initial: "collapsed",
    states: {

robertpenner

SpirioCast Cast Flow
  home_screen*
    PREPARE_TO_CAST -> preparing_to_cast_screen
  cast_screens
    BACK -> home_screen
    VIEW_CAST_DETAILS -> cast_details_screen
    VIEW_HELP -> help_page
    cast_details_screen
      # Would actually return to whichever the previous screen was (via memory state).
      BACK -> preparing_to_cast_screen

robertpenner

  const machine = Machine({
  id: "Planning Poker",
  initial: "playing",
  states: {
    playing: {
      initial: "discussing story",
      states: {
        "discussing story": {
          on: {
            "REVEAL ESTIMATES": {

robertpenner

const machine = Machine({
    id: "Workout",
    type: "parallel",
    context: {
      timerSeconds: 60,
    },

    states: {
      timer: {
        id: "timer",

robertpenner

const machine = Machine( 
   {
    id: "Stories",
    type: "parallel",
    states: {
      playback: {
        initial: "playing",
        states: {
          playing: {
            initial: "counting down",

robertpenner

const machine = Machine({
  id: "PGA Onboarding",

  initial: "Let's personalize",
  states: {
    "Let's personalize": {
      on: {
        "DO THIS LATER": "#app landing",
        CONTINUE: "Favorite tour?",
      },

robertpenner

const machine = Machine({
  id: "PGA Onboarding & Login",
  initial: "splash screen",
  states: {
    "splash screen": {
      after: {
        2000: "onboard or sign in",
      },
    },
    "onboard or sign in": {

robertpenner

const machine = Machine({
    id: "Page transition",
    type: "parallel",
    states: {
      "current page": {
        initial: "visible",
        states: {
          visible: {
            on: {
              "LOAD NEXT PAGE": "fading out",

robertpenner

/**
 * Abstraction of:
 * assign({ Player_1: ({ Player_1 }) => Player_1 + 1 })
 */
const addShot = (player) =>
  assign({
    [player]: (context) => context[player] + 1,
  });

const machine = Machine(