diff --git a/.gitignore b/.gitignore
index ad54838..f1ba66d 100644
--- a/.gitignore
+++ b/.gitignore
@@ -7,4 +7,5 @@ __pycache__/
*.webm
node_modules/
build/
-devbox.*
\ No newline at end of file
+devbox.*
+.devbox/
\ No newline at end of file
diff --git a/experiences/bus-bunching/controls/lib/index.js b/experiences/bus-bunching/controls/lib/index.js
index 3c71a22..92e8843 100644
--- a/experiences/bus-bunching/controls/lib/index.js
+++ b/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 (
+ {stopSymbols[index % stopSymbols.length]}
+ );
+ };
+
+ const buttons = Array.from({ length: buttonCount }, (_, index) => (
+
+ ));
return (
+
Bus Bunching
- Change the number of buses!
+ Learn more about bus bunching here:{' '}
+
+ Wikipedia "Bus Bunching"
+
-
-
- Change the number of bus stops!
-
-
+
+
+ Change the number of buses!
+
+
+
+ Change the number of bus stops!
+
+
+
+
+
+
+
+
+
+
+
+ Create a delay by clicking and holding any of the bus stops below.
+
+
+ {buttons}
+
- )
-}
+ );
+};
-export default ControlsComponent
+export default ControlsComponent;
diff --git a/experiences/bus-bunching/web/Urbanist-Medium-CG0un8Mr.ttf b/experiences/bus-bunching/web/assets/Urbanist-Medium-CG0un8Mr.ttf
similarity index 100%
rename from experiences/bus-bunching/web/Urbanist-Medium-CG0un8Mr.ttf
rename to experiences/bus-bunching/web/assets/Urbanist-Medium-CG0un8Mr.ttf
diff --git a/experiences/bus-bunching/web/assets/index-CO6LLJQy.css b/experiences/bus-bunching/web/assets/index-CO6LLJQy.css
new file mode 100644
index 0000000..37d1dbe
--- /dev/null
+++ b/experiences/bus-bunching/web/assets/index-CO6LLJQy.css
@@ -0,0 +1 @@
+@font-face{font-family:Urbanist;src:url(/assets/Urbanist-Medium-CG0un8Mr.ttf) format("truetype")}*{font-family:Urbanist}body,html{margin:0;padding:0;width:2736px;height:1216px;background:#343434;z-index:0;overflow:hidden}.storytext{position:absolute;top:1000px;left:0;right:0;margin-left:auto;margin-right:auto;width:1800px;padding:30px;z-index:101;display:none;border:solid rgb(128,128,128,1) 1px;text-align:center;color:#fff;background:#ffffff1a;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);text-shadow:2px 2px 10px rgba(0,0,0,1);filter:drop-shadow(rgba(0,0,0,.5) 4px 4px 5px);font-family:Urbanist;font-size:3em;line-height:1.5em}#title{color:#fff;position:absolute;top:20px;left:0;right:0;margin:auto;width:1000px;text-align:center;font-size:80px}.info{position:absolute;height:150;align-self:center;text-align:center;z-index:100;font-size:20px;margin-left:-60px;margin-top:-150px}.infoTitle{align-content:center;background-color:#eee;width:120px;height:120px;border-radius:70px;font-size:300%;border:10px solid #eee;z-index:20}.infoTitle:before{position:absolute;content:" ";background-color:#eee;width:20px;height:80px;bottom:-60px;left:60px;border-radius:10px}.passengersWrapper{opacity:80%;display:flex;align-items:center;justify-content:center;position:absolute;white-space:nowrap;overflow:hidden;top:120px;left:80px;height:80px;min-width:80px;background-color:#eee;border-radius:40px;transition:width .3s ease-in-out,opacity 1s}.passengersWrapper:empty{opacity:0;width:100px}.busPassengers{display:grid;grid-template-rows:repeat(2,1fr);grid-auto-flow:column;align-items:center;justify-content:center;background-color:#eee;border-radius:15px;opacity:80%;padding:5px;right:100%;position:absolute;transition:opacity 1s}.busPassengers:empty{opacity:0}.busInfo{position:absolute;display:flex}.passenger{opacity:1;width:20px;height:20px}@keyframes pulse{0%{border-color:red;box-shadow:0 0 30px #ff0000b3}50%{border-color:transparent;box-shadow:0 0 15px #f006}to{border-color:red;box-shadow:0 0 30px #ff0000b3}}.pulsing-border{border:10px solid red;animation:pulse .5s infinite}
diff --git a/experiences/bus-bunching/web/assets/index-Drcr_JpC.js b/experiences/bus-bunching/web/assets/index-Drcr_JpC.js
new file mode 100644
index 0000000..529cf87
--- /dev/null
+++ b/experiences/bus-bunching/web/assets/index-Drcr_JpC.js
@@ -0,0 +1,6518 @@
+(function(){const e=document.createElement("link").relList;if(e&&e.supports&&e.supports("modulepreload"))return;for(const n of document.querySelectorAll('link[rel="modulepreload"]'))i(n);new MutationObserver(n=>{for(const s of n)if(s.type==="childList")for(const a of s.addedNodes)a.tagName==="LINK"&&a.rel==="modulepreload"&&i(a)}).observe(document,{childList:!0,subtree:!0});function t(n){const s={};return n.integrity&&(s.integrity=n.integrity),n.referrerPolicy&&(s.referrerPolicy=n.referrerPolicy),n.crossOrigin==="use-credentials"?s.credentials="include":n.crossOrigin==="anonymous"?s.credentials="omit":s.credentials="same-origin",s}function i(n){if(n.ep)return;n.ep=!0;const s=t(n);fetch(n.href,s)}})();const cf="166",hf=0,Bc=1,uf=2,Gu=1,df=2,Di=3,rn=0,Pt=1,di=2,nn=0,Ms=1,zc=2,kc=3,Hc=4,ff=5,bn=100,pf=101,mf=102,gf=103,_f=104,xf=200,yf=201,Mf=202,vf=203,cl=204,hl=205,Sf=206,wf=207,bf=208,Ef=209,Af=210,Tf=211,Rf=212,Cf=213,Pf=214,Lf=0,If=1,Df=2,Ua=3,Nf=4,Uf=5,Ff=6,Of=7,Wu=0,Bf=1,zf=2,sn=0,kf=1,Hf=2,Vf=3,Gf=4,Wf=5,Xf=6,qf=7,Xu=300,Es=301,As=302,ul=303,dl=304,Wa=306,fl=1e3,Tn=1001,pl=1002,Yt=1003,Yf=1004,Cr=1005,ni=1006,to=1007,Rn=1008,Oi=1009,qu=1010,Yu=1011,cr=1012,ic=1013,Ln=1014,Ui=1015,_r=1016,nc=1017,sc=1018,Ts=1020,$u=35902,ju=1021,Ku=1022,ri=1023,Ju=1024,Zu=1025,vs=1026,Rs=1027,Qu=1028,rc=1029,ed=1030,ac=1031,oc=1033,Ta=33776,Ra=33777,Ca=33778,Pa=33779,ml=35840,gl=35841,_l=35842,xl=35843,yl=36196,Ml=37492,vl=37496,Sl=37808,wl=37809,bl=37810,El=37811,Al=37812,Tl=37813,Rl=37814,Cl=37815,Pl=37816,Ll=37817,Il=37818,Dl=37819,Nl=37820,Ul=37821,La=36492,Fl=36494,Ol=36495,td=36283,Bl=36284,zl=36285,kl=36286,$f=3200,jf=3201,id=0,Kf=1,en="",hi="srgb",ln="srgb-linear",lc="display-p3",Xa="display-p3-linear",Fa="linear",Ze="srgb",Oa="rec709",Ba="p3",On=7680,Vc=519,Jf=512,Zf=513,Qf=514,nd=515,ep=516,tp=517,ip=518,np=519,Gc=35044,Wc="300 es",Fi=2e3,za=2001;let Ds=class{addEventListener(e,t){this._listeners===void 0&&(this._listeners={});const i=this._listeners;i[e]===void 0&&(i[e]=[]),i[e].indexOf(t)===-1&&i[e].push(t)}hasEventListener(e,t){if(this._listeners===void 0)return!1;const i=this._listeners;return i[e]!==void 0&&i[e].indexOf(t)!==-1}removeEventListener(e,t){if(this._listeners===void 0)return;const n=this._listeners[e];if(n!==void 0){const s=n.indexOf(t);s!==-1&&n.splice(s,1)}}dispatchEvent(e){if(this._listeners===void 0)return;const i=this._listeners[e.type];if(i!==void 0){e.target=this;const n=i.slice(0);for(let s=0,a=n.length;s