JSFiddle - React, Tailwind, and code Playground

by Farzad YZ

HTML

<script src="http://en-inflectors.surge.sh/main.js"></script>
<button id="talk-btn">
  Talk to me!
</button>

CSS

button {
  width: 200px;
  height: 50px;
  background-color: tomato;
  color: white;
  font-size: 20px;
  border: 0 none;
  border-radius: 10px;
  cursor: pointer;
}

JavaScript 1.7

const zone = {
  id: "zoneMachine",
  initial: "preparing",
  context: {
    error: undefined,
    zone: undefined
  },
  states: {
    preparing: {
      invoke: {
        src: "detectLocationSupport",
        id: "detectLocationSupport",
        onDone: {
          target: "ready"
        },
        onError: {
          target: "error"
        }
      }
    },
    ready: {
      initial: "zone_idle",
      states: {
        zone_idle: {
          on: {
            DETECT_ZONE: {
              target: "zone_pending"
            }
          }
        },
        zone_pending: {
          invoke: {
            id: "detectZone",
            src: "detectZone",
            onDone: {
              target: "zone_available",
              actions: ["setZone"]
            },
            onError: {
              target: "zone_error",
              actions: ["setError"]
            }
          }
        },
        zone_available: {
          initial: "not_watching",
          on: {
            REFRESH: {
              target: "zone_pending"
            },
            LOCATION_CHANGED: {
              target: ".history",
              actions: ["setZone", "sendNotif"]
            }
          },
          states: {
            history: {
              type: "history",
              history: "deep"
            },
            not_watching: {
              on: {
                WATCH_LOCATION: {
                  target: "watching"
                }
              }
            },
            watching: {
              invoke: {
                id: "watchLocation",
                src: "watchLocationService"
              }
            }
          }
        },
        zone_error: {
          on: {
            DETECT_ZONE: {
              target: "zone_pending"
            }
          }
        }
      }
    },
    error: {
      type: "final"
    }
  }
}

const draggingBox = {
  id: "dragging-box",
  initial: "released",
  context: {
    mousePositionInBox: {
      x: 0,
      y:...