Bus-bunching

.gitignore

@@ -7,3 +7,4 @@ __pycache__/
 *.webm
 node_modules/
 build/
+devbox.*

.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+    "liveServer.settings.port": 5501
+}

experiences/bus-bunching/config.json

@@ -0,0 +1,10 @@
+{
+  "id": "bus-bunching",
+  "type": "web",
+  "title": "Bus Bunching",
+  "description": "Bus traffic simulation",
+  "action_hints": ["change the number of buses", "change the number of stops", "pause a bus on your phone"],
+  "layout": "full",
+  "lifetime": 180,
+  "queueable": true
+}

experiences/bus-bunching/controls/lib/index.js

@@ -0,0 +1,61 @@
+/** @jsxImportSource @emotion/react */
+import { css } from "@emotion/react"
+import React, { useCallback } from "react"
+import { useMessaging } from "@footron/controls-client"
+import { Slider } from "@material-ui/core"
+
+const containerStyle = css`
+  padding: 16px;
+  overflow-x: hidden;
+
+  p {
+    margin: 0 0 16px;
+  }
+`
+
+const ControlsComponent = () => {
+  const { sendMessage } = useMessaging()
+
+  const updateBusCount = useCallback(
+    async (event, value) => {
+      await sendMessage({ type: "busCount", value: value })
+    },
+    [sendMessage]
+  )
+
+  const updateStopCount = useCallback(
+    async (event, value) => {
+      await sendMessage({ type: "stopCount", value: value })
+    },
+    [sendMessage]
+  )
+
+  return (
+    <div css={containerStyle}>
+      <p>
+        <b>Change the number of buses!</b>
+      </p>
+      <Slider
+        min={1}
+        max={10}
+        onChange={updateBusCount}
+        step={1}
+        marks
+        defaultValue={3}
+      />
+      <p>
+        <b>Change the number of bus stops!</b>
+      </p>
+      <Slider
+        min={1}
+        max={20}
+        onChange={updateStopCount}
+        step={1}
+        marks
+        defaultValue={5}
+      />
+    </div>
+  )
+}
+
+export default ControlsComponent

experiences/bus-bunching/web/fader.js

@@ -0,0 +1,78 @@
+var fader_defaults = {
+  in: 500,
+  stay: 2000,
+  out: 500,
+  delaynext: 1000,
+};
+
+function fader_set_defaults(new_defaults) {
+  var attrs = ["in", "stay", "out", "delaynext"];
+  for (var ind = 0; ind < attrs.length; ind++) {
+    if (new_defaults[attrs[ind]]) {
+      fader_defaults[attrs[ind]] = new_defaults[attrs[ind]];
+    }
+  }
+}
+
+function fader_start() {
+  var fades = document.querySelectorAll(".fader");
+  if (fades.length == 0) {
+    return;
+  }
+
+  var events = [];
+  for (var ind = 0; ind < fades.length; ind++) {
+    events.push({
+      objref: fades[ind],
+      in: fades[ind].dataset.in
+        ? Number(fades[ind].dataset.in)
+        : fader_defaults.in,
+      stay: fades[ind].dataset.stay
+        ? Number(fades[ind].dataset.stay)
+        : fader_defaults.stay,
+      out: fades[ind].dataset.out
+        ? Number(fades[ind].dataset.out)
+        : fader_defaults.out,
+      delaynext: fades[ind].dataset.delaynext
+        ? Number(fades[ind].dataset.delaynext)
+        : fader_defaults.delaynext,
+    });
+  }
+  main_fader(events, 0);
+}
+
+var event_count = 0;
+
+function main_fader(events, ind) {
+  var evt = events[ind];
+
+  event_count += 1;
+  $(evt.objref).fadeIn(evt.in, function () {
+    setTimeout(function () {
+      $(evt.objref).fadeOut(evt.out, function () {
+        event_count -= 1;
+      });
+    }, evt.stay);
+  });
+
+  if (ind < events.length - 1) {
+    setTimeout(function () {
+      main_fader(events, ind + 1);
+    }, evt.delaynext);
+  } else {
+    setTimeout(function () {
+      try_to_loop(events);
+    }, evt.delaynext);
+  }
+}
+
+function try_to_loop(events) {
+  // loop back to the beginning
+  if (event_count > 0) {
+    setTimeout(function () {
+      try_to_loop(events);
+    }, 1000);
+  } else {
+    main_fader(events, 0);
+  }
+}