tweaks to bus bunching and temple photo op

.gitignore

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

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

@@ -1,8 +1,8 @@
 /** @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"
+import { css } from "@emotion/react";
+import React, { useCallback, useState } from "react";
+import { useMessaging } from "@footron/controls-client";
+import { Slider, Box, Button } from "@material-ui/core";
 
 const containerStyle = css`
   padding: 16px;
@@ -11,51 +11,167 @@ const containerStyle = css`
   p {
     margin: 0 0 16px;
   }
-`
+`;
+const stopSymbols = ["■", "▲", "●", "♥"];
+const stopColors = ["#EE6352", "#08B2E3", "#57A773", "#8657a7", "#2222AA"];
+
+const sectionWrapperStyle = {
+  justifyContent: "center",
+  padding: "2em 0 0 0",
+  margin: "auto",
+};
+
+const buttonWrapperStyle = {
+  display: "grid",
+  gap: "10px",
+  gridTemplateColumns: "repeat(5, minmax(70px, 1fr))",
+};
+
+const buttonStyle = {
+  position: "relative",
+  width: "100%",
+  paddingTop: "100%",
+  borderRadius: "50%",
+};
+
+const contentStyle = {
+  position: "absolute",
+  top: "0",
+  left: "0",
+  right: "0",
+  bottom: "0",
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  color: "white",
+  fontSize: "500%",
+
+}
 
 const ControlsComponent = () => {
-  const { sendMessage } = useMessaging()
+  const { sendMessage } = useMessaging();
+  const [buttonCount, setButtonCount] = useState(3);
 
   const updateBusCount = useCallback(
     async (event, value) => {
-      await sendMessage({ type: "numBuses", value: value })
+      await sendMessage({ type: "numBuses", value: value });
     },
     [sendMessage]
-  )
+  );
 
   const updateStopCount = useCallback(
     async (event, value) => {
-      await sendMessage({ type: "numStops", value: value })
+      setButtonCount(value);
+      await sendMessage({ type: "numStops", value: value });
     },
     [sendMessage]
-  )
+  );
+
+  const restart = useCallback(
+    async (event, value) => {
+      await sendMessage({ type: "restart", value: value });
+    },
+    [sendMessage]
+  );
+
+  const pauseStart = useCallback(
+    async (value) => {
+      console.log(value);
+      await sendMessage({ type: "delayStop", value: value });
+    },
+    [sendMessage]
+  );
+
+  const pauseEnd = useCallback(
+    async (value) => {
+      console.log(value);
+      await sendMessage({ type: "freeStop", value: value });
+    },
+    [sendMessage]
+  );
+
+  const busStopSymbol = (index) => {
+    let stopStyle = {
+      ...contentStyle,
+      color: stopColors[index % stopColors.length],
+    };
+    return (
+      <span style={stopStyle}>{stopSymbols[index % stopSymbols.length]}</span>
+    );
+  };
+
+  const buttons = Array.from({ length: buttonCount }, (_, index) => (
+    <Button
+      key={index}
+      style={buttonStyle}
+      variant="outlined"
+      color="primary"
+      onMouseDown={() => pauseStart(index)}
+      onMouseUp={() => pauseEnd(index)}
+      onTouchStart={() => pauseStart(index)}
+      onTouchEnd={() => pauseEnd(index)}
+    >
+      {busStopSymbol(index)}
+    </Button>
+  ));
 
   return (
     <div css={containerStyle}>
+      <h1>Bus Bunching</h1>
       <p>
-        <b>Change the number of buses!</b>
+        Learn more about bus bunching here:{' '}
+        <a href="https://en.wikipedia.org/wiki/Bus_bunching">
+          Wikipedia &quot;Bus Bunching&quot;
+        </a>
       </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={2}
-        max={20}
-        onChange={updateStopCount}
-        step={1}
-        marks
-        defaultValue={5}
-      />
+      <Box style={sectionWrapperStyle}>
+        <p>
+          <b>Change the number of buses!</b>
+        </p>
+        <Slider
+          min={1}
+          max={10}
+          valueLabelDisplay="auto"
+          onChange={updateBusCount}
+          step={1}
+          marks
+          defaultValue={3}
+        />
+        <p>
+          <b>Change the number of bus stops!</b>
+        </p>
+        <Slider
+          min={2}
+          max={20}
+          valueLabelDisplay="auto"
+          onChange={updateStopCount}
+          step={1}
+          marks
+          defaultValue={5}
+        />
+      </Box>
+      <Box style={sectionWrapperStyle}>
+        <Box style={{ textAlign: "center" }}>
+          <Button
+            style={{ margin: "0 auto" }}
+            variant="contained"
+            color="primary"
+            onClick={restart}
+          >
+            <b>Restart</b>
+          </Button>
+        </Box>
+      </Box>
+      <Box style={sectionWrapperStyle}>
+        <p>
+          <b>
+            Create a delay by clicking and holding any of the bus stops below.
+          </b>
+        </p>
+        <Box style={buttonWrapperStyle}>{buttons}</Box>
+      </Box>
     </div>
-  )
-}
+  );
+};
 
-export default ControlsComponent
+export default ControlsComponent;

experiences/bus-bunching/web/index.html

@@ -7,10 +7,11 @@
   <title>Bus Bunching: UVX</title>
 
   <script src="./footron-messaging.development.js" type="text/javascript"></script>
+  <script>if (typeof module === 'object') { window.module = module; module = undefined; }</script>
   <script src="./jquery-3.6.0.min.js" type="text/javascript"></script>
   <script src="./fader.js" type="text/javascript"></script>
-  <script type="module" crossorigin src="index-DUfHmJ6Z.js"></script>
-  <link rel="stylesheet" crossorigin href="index-DfisqMx5.css">
+  <script type="module" crossorigin src="/assets/index-Drcr_JpC.js"></script>
+  <link rel="stylesheet" crossorigin href="/assets/index-CO6LLJQy.css">
 </head>
 
 <body>