jerry_game_engine

import { assign, createMachine, DoneInvokeEvent } from "xstate";

type GameEngineContext = {
  current_joke: string | null;
  color?: string;
  /**
   * !!! Maximum 2 teams
   */
  teams_score: Record<string, number>;
};

type GameEngineEvents =
  | { type: "GET_NEW_JOKE" }
  | { type: "START_TIMER" }
  | { type: "SELECT_WINNER"; winner: string };

  createMachine<GameEngineContext, GameEngineEvents>(
    {
      id: "game_engine",
      initial: "choose_joke",
      context: {
        current_joke: null,
        teams_score: {
          "🐊": 0,
          "🦁": 0,
        },
      },
      states: {
        choose_joke: {
          entry: "getRandomBackgroundColor",
          invoke: {
            id: "getNewJoke",
            src: "getJoke",
            onDone: {
              actions: assign<GameEngineContext, DoneInvokeEvent<string>>({
                current_joke: (_, joke) => joke.data,
              }),
            },
          },
          on: {
            START_TIMER: "timer_running",
            GET_NEW_JOKE: "choose_joke",
          },
        },
        timer_running: {
          after: {
            LAUGH_TIMER: "choose_loser",
          },
        },
        choose_loser: {
          on: {
            SELECT_WINNER: [
              {
                cond: "winnerIsNotNull",
                target: "choose_joke",
                actions: "updateTeamsPoints",
              },
              { target: "choose_joke" },
            ],
          },
        },
      },
    },
    {
      actions: {
        getRandomBackgroundColor: assign<GameEngineContext, GameEngineEvents>({
          color: () => "bg-cyan-500",
        }),
        updateTeamsPoints: assign({
          teams_score: (ctx, event) => {
            if (event.type !== "SELECT_WINNER") return ctx.teams_score;

            return Object.assign(ctx.teams_score, {
              [event.winner]: ctx.teams_score[event.winner] + 1,
            });
          },
        }),
      },
      services: {
        getJoke: () => Promise.resolve("FAKE DATA FOR DIAGRAM"),
      },
      guards: {
        winnerIsNotNull: (ctx, event) =>
          event.type === "SELECT_WINNER"
            ? Object.keys(ctx.teams_score).includes(event.winner)
            : false,
      },
      delays: {
        LAUGH_TIMER: 10000,
      },
    }
  )

Keybinding	Description
`Ctrl` + `S`	Saves or updates the code in Stately Registry
`Ctrl` + `Enter`	Visualizes the current editor code
`Ctrl` + `KShift` + `?`	Show the Command palette
`Up` , `Left` , `Down` , `Right`	Pan the view. Use `Shift` for a larger pan.
`Shift` + `1`	Fit to content
`+` , `-`	Zoom-in/out

Keyboard shortcuts

Editor theme