diff --git a/assets/index-2klQwAeG.js b/assets/index-2klQwAeG.js
new file mode 100644
index 0000000..1c00a1a
--- /dev/null
+++ b/assets/index-2klQwAeG.js
@@ -0,0 +1,9 @@
+var N=Object.defineProperty;var z=(e,n,t)=>n in e?N(e,n,{enumerable:!0,configurable:!0,writable:!0,value:t}):e[n]=t;var P=(e,n,t)=>(z(e,typeof n!="symbol"?n+"":n,t),t);import{r as D,a as L,R as M}from"./react-H14vcryl.js";import{P as T}from"./phaser-pQREW5IE.js";(function(){const n=document.createElement("link").relList;if(n&&n.supports&&n.supports("modulepreload"))return;for(const o of document.querySelectorAll('link[rel="modulepreload"]'))i(o);new MutationObserver(o=>{for(const r of o)if(r.type==="childList")for(const s of r.addedNodes)s.tagName==="LINK"&&s.rel==="modulepreload"&&i(s)}).observe(document,{childList:!0,subtree:!0});function t(o){const r={};return o.integrity&&(r.integrity=o.integrity),o.referrerPolicy&&(r.referrerPolicy=o.referrerPolicy),o.crossOrigin==="use-credentials"?r.credentials="include":o.crossOrigin==="anonymous"?r.credentials="omit":r.credentials="same-origin",r}function i(o){if(o.ep)return;o.ep=!0;const r=t(o);fetch(o.href,r)}})();var O={exports:{}},y={};/**
+ * @license React
+ * react-jsx-runtime.production.min.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */var k=D,I=Symbol.for("react.element"),H=Symbol.for("react.fragment"),j=Object.prototype.hasOwnProperty,W=k.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner,$={key:!0,ref:!0,__self:!0,__source:!0};function v(e,n,t){var i,o={},r=null,s=null;t!==void 0&&(r=""+t),n.key!==void 0&&(r=""+n.key),n.ref!==void 0&&(s=n.ref);for(i in n)j.call(n,i)&&!$.hasOwnProperty(i)&&(o[i]=n[i]);if(e&&e.defaultProps)for(i in n=e.defaultProps,n)o[i]===void 0&&(o[i]=n[i]);return{$$typeof:I,type:e,key:r,ref:s,props:o,_owner:W.current}}y.Fragment=H;y.jsx=v;y.jsxs=v;O.exports=y;var g=O.exports,A={},b=L;A.createRoot=b.createRoot,A.hydrateRoot=b.hydrateRoot;let x=null;const h=()=>{if(!x){const e=window.AudioContext||window.webkitAudioContext;x=new e}return x};function U(){const e=h(),n=e.sampleRate*.05,t=e.createBuffer(1,n,e.sampleRate),i=t.getChannelData(0);for(let l=0;l<n;l++)i[l]=Math.random()*2-1;const o=e.createBufferSource();o.buffer=t;const r=e.createBiquadFilter();r.type="highpass",r.frequency.setValueAtTime(8e3,e.currentTime),r.Q.setValueAtTime(1,e.currentTime);const s=e.createGain();s.gain.setValueAtTime(1,e.currentTime),s.gain.exponentialRampToValueAtTime(.001,e.currentTime+.05),o.connect(r),r.connect(s),s.connect(e.destination),o.start(),o.stop(e.currentTime+.05);const a=e.createOscillator();a.type="square",a.frequency.setValueAtTime(1e4,e.currentTime);const c=e.createGain();c.gain.setValueAtTime(.1,e.currentTime),c.gain.exponentialRampToValueAtTime(.001,e.currentTime+.03),a.connect(c),c.connect(e.destination),a.start(),a.stop(e.currentTime+.03)}function K(){const e=h(),n=e.sampleRate*.2,t=e.createBuffer(1,n,e.sampleRate),i=t.getChannelData(0);for(let l=0;l<n;l++)i[l]=Math.random()*2-1;const o=e.createBufferSource();o.buffer=t;const r=e.createBiquadFilter();r.type="highpass",r.frequency.setValueAtTime(1e3,e.currentTime);const s=e.createGain();s.gain.setValueAtTime(1,e.currentTime),s.gain.exponentialRampToValueAtTime(.01,e.currentTime+.2),o.connect(r),r.connect(s),s.connect(e.destination),o.start(),o.stop(e.currentTime+.2);const a=e.createOscillator();a.type="sine",a.frequency.setValueAtTime(150,e.currentTime);const c=e.createGain();c.gain.setValueAtTime(.7,e.currentTime),c.gain.exponentialRampToValueAtTime(.01,e.currentTime+.1),a.connect(c),c.connect(e.destination),a.start(),a.stop(e.currentTime+.1)}function J(){const e=h(),n=e.createOscillator();n.type="sine";const t=e.createGain();n.frequency.setValueAtTime(200,e.currentTime),n.frequency.exponentialRampToValueAtTime(70,e.currentTime+.05),t.gain.setValueAtTime(1,e.currentTime),t.gain.exponentialRampToValueAtTime(.001,e.currentTime+1),n.connect(t),t.connect(e.destination),n.start(),n.stop(e.currentTime+1.5)}function Q(){const e=h(),n=e.sampleRate*1.5,t=e.createBuffer(1,n,e.sampleRate),i=t.getChannelData(0);for(let u=0;u<n;u++)i[u]=Math.random()*2-1;const o=e.createBufferSource();o.buffer=t;const r=e.createBiquadFilter();r.type="highpass",r.frequency.setValueAtTime(4e3,e.currentTime);const s=e.createBiquadFilter();s.type="lowpass",s.frequency.setValueAtTime(12e3,e.currentTime);const a=e.createGain();a.gain.setValueAtTime(1,e.currentTime),a.gain.exponentialRampToValueAtTime(.001,e.currentTime+1.5),o.connect(r),r.connect(s),s.connect(a),a.connect(e.destination),o.start(),o.stop(e.currentTime+1.5);const c=e.createOscillator();c.type="triangle",c.frequency.setValueAtTime(1e4,e.currentTime);const l=e.createGain();l.gain.setValueAtTime(.05,e.currentTime),l.gain.exponentialRampToValueAtTime(.001,e.currentTime+1.5),c.connect(l),l.connect(e.destination),c.start(),c.stop(e.currentTime+1.5)}const d=e=>T.Display.Color.HexStringToColor(e).color;function Y(){const e=h(),n=e.sampleRate*.5,t=e.createBuffer(1,n,e.sampleRate),i=t.getChannelData(0);for(let c=0;c<n;c++)i[c]=Math.random()*2-1;const o=e.createBufferSource();o.buffer=t;const r=e.createBiquadFilter();r.type="highpass",r.frequency.setValueAtTime(5e3,e.currentTime);const s=e.createBiquadFilter();s.type="lowpass",s.frequency.setValueAtTime(1e4,e.currentTime);const a=e.createGain();a.gain.setValueAtTime(.6,e.currentTime),a.gain.exponentialRampToValueAtTime(.001,e.currentTime+.5),o.connect(r),r.connect(s),s.connect(a),a.connect(e.destination),o.start(),o.stop(e.currentTime+.5)}function Z(){const e=h(),n=e.sampleRate*1.2,t=e.createBuffer(1,n,e.sampleRate),i=t.getChannelData(0);for(let c=0;c<n;c++)i[c]=Math.random()*2-1;const o=e.createBufferSource();o.buffer=t;const r=e.createBiquadFilter();r.type="highpass",r.frequency.setValueAtTime(3e3,e.currentTime);const s=e.createBiquadFilter();s.type="lowpass",s.frequency.setValueAtTime(9e3,e.currentTime);const a=e.createGain();a.gain.setValueAtTime(.8,e.currentTime),a.gain.exponentialRampToValueAtTime(.001,e.currentTime+1.2),o.connect(r),r.connect(s),s.connect(a),a.connect(e.destination),o.start(),o.stop(e.currentTime+1.2)}function E(e=99,n=500){const t=h(),i=t.createOscillator();i.type="sine",i.frequency.setValueAtTime(e,t.currentTime);const o=t.createGain();o.gain.setValueAtTime(1,t.currentTime),o.gain.exponentialRampToValueAtTime(.001,t.currentTime+.5),i.detune.setValueAtTime(-5,t.currentTime),i.connect(o),o.connect(t.destination),i.start(),i.stop(t.currentTime+n/1e3)}function X(){E(120,400)}const p={Material:"Material",Arial:"Arial"},ee=async()=>{const e=new FontFace(p.Material,"url(./fonts/material.woff2)");return document.fonts.add(e),e.load().catch(n=>console.error(n))};let R=!1,S=0,m=[],f=0,C=null;function te(){R=!0,S=Date.now(),m=[],console.log("Recording started")}function w(){R=!1,m.push({instrument:null,time:Date.now()-S}),console.log("Recording stopped")}function oe(){const e=()=>{f>=m.length&&(f=0);const{instrument:n,time:t}=m[f],i=f===0?0:m[f-1].time;C=setTimeout(()=>{console.log(`Playing ${n} after ${t}ms`),n&&_(n),f++,e()},t-i)};console.log("Loop play starting"),e()}function V(){C&&clearTimeout(C),console.log("Loop stopped")}const ne={hihat:U,kick:J,snare:K,crash:Q,"hihat-open":Y,ride:Z,"tom-low":E,"tom-high":X},_=e=>{if(console.log(`Playing ${e}`),ne[e](),R){const n=Date.now()-S;m.push({instrument:e,time:n}),console.log(`Recording ${e} at time ${n}ms`)}},re={hihat:"#FDA341",kick:"#F24E1E",snare:"#4A90E2",crash:"#A0D8C5","hihat-open":"#F9F871",ride:"#F5C542","tom-low":"#FF7F50","tom-high":"#9B59B6"},B={idle:"#FFF",readyToRecord:"#0FF",recording:"#FD0041",playing:"#0F0"};class ie extends T.Scene{constructor(){super(...arguments);P(this,"controls")}create(){this.createPads(),this.createControlButtons()}createPads(){const t=[this.createPad("crash"),this.createPad("ride"),this.createPad("hihat-open"),this.createPad("hihat"),this.createPad("snare"),this.createPad("tom-low"),this.createPad("tom-high"),this.createPad("kick")],i=()=>{const s=window.innerWidth/4,a=window.innerHeight/2;t.forEach(({button:c},l)=>{const u=l%4*s,F=Math.floor(l/4)*a;c.setSize(s,a).setPosition(u,F)})};window.addEventListener("resize",i),i()}createPad(t){const i=this.add.rectangle().setFillStyle(d(re[t])).setStrokeStyle(2,d("#FFF"),.8).setInteractive().setOrigin(0,0);return i.on("pointerdown",()=>{i.setAlpha(.7),this.controls.state==="readyToRecord"&&(this.controls.state="recording",this.updateControlsText(),te()),_(t)}).on("pointerup",()=>i.setAlpha(1)).on("pointerout",()=>i.setAlpha(1)),{instrument:t,button:i}}createControlButton(){const t=this.add.rectangle().setFillStyle(d("#000")).setStrokeStyle(2,d("#FFF"),.8).setOrigin(0,0);return t.setInteractive().on("pointerdown",()=>t.setFillStyle(d("#666"))).on("pointerup",()=>t.setFillStyle(d("#000"))).on("pointerout",()=>t.setFillStyle(d("#000"))),t}createText(t){return this.add.text(0,0,t,{fontFamily:p.Material,fontSize:20,color:"#FFF",align:"center",resolution:2}).setOrigin(.5,.5).setData("initial",t)}createControlButtons(){this.controls={state:"idle",stop:{button:this.createControlButton(),text:this.createText("stop")},record:{button:this.createControlButton(),text:this.createText("fiber_manual_record")},play:{button:this.createControlButton(),text:this.createText("play_arrow")}};const{record:t,stop:i,play:o}=this.controls;t.button.setInteractive().on("pointerdown",()=>{this.controls.state==="idle"||this.controls.state==="playing"?(V(),this.controls.state="readyToRecord"):this.controls.state==="readyToRecord"?this.controls.state="idle":this.controls.state==="recording"&&(this.controls.state="idle",w()),this.updateControlsText()}),i.button.setInteractive().on("pointerdown",()=>{this.controls.state==="recording"&&w(),this.controls.state==="playing"&&V(),this.controls.state="idle",this.updateControlsText()}),o.button.setInteractive().on("pointerdown",()=>{this.controls.state==="recording"&&w(),m.length>0?(this.controls.state="playing",oe(),this.updateControlsText()):(this.controls.state="idle",this.updateControlsText(),console.log("No loop to play"),this.controls.play.text.setFontFamily(p.Arial).setText("No loop to play, record first"),this.time.delayedCall(2e3,()=>{this.updateControlsText()}))});const r=()=>{const s=window.innerWidth,a=window.innerHeight,c=Math.max(a,s)/15,l=s/3;[i,t,o].forEach(({button:u,text:F},G)=>{u.setSize(l,c).setPosition(l*G,-1),F.setFontSize(c/2).setWordWrapWidth(u.width,!0).setSize(u.width,u.height).setPosition(u.getCenter().x,u.getCenter().y)})};window.addEventListener("resize",r),r()}updateControlsText(){const{record:{text:t},stop:{text:i},play:{text:o}}=this.controls;[t,i,o].forEach(s=>s.setFontFamily(p.Material).setText(s.getData("initial")).setColor(B.idle));const r=B[this.controls.state];switch(this.controls.state){case"idle":break;case"readyToRecord":t.setFontFamily(p.Arial).setText("Hit a pad to start").setColor(r);break;case"recording":t.setFontFamily(p.Material).setColor(r);break;case"playing":o.setFontFamily(p.Material).setColor(r);break}}}function se(e){const n=window.innerWidth,t=window.innerHeight;e.scale.resize(n,t),e.scene.scenes.forEach(i=>{var o,r;return(r=(o=i.sys)==null?void 0:o.scale)==null?void 0:r.refresh()})}let q=!1;const ae=()=>(q||(q=!0,ee().then(()=>{const e=new T.Game({type:T.AUTO,mode:T.Scale.RESIZE,parent:"phaser-container",width:window.innerWidth,height:window.innerHeight,backgroundColor:"#FFF",scene:[ie],input:{activePointers:4}});window.addEventListener("resize",()=>{se(e)})})),g.jsx(g.Fragment,{}));function ce(){return g.jsx(ae,{})}A.createRoot(document.getElementById("root")).render(g.jsx(M.StrictMode,{children:g.jsx(ce,{})}));
diff --git a/assets/index-YelipFu0.js b/assets/index-YelipFu0.js
deleted file mode 100644
index 857f1f4..0000000
--- a/assets/index-YelipFu0.js
+++ /dev/null
@@ -1,9 +0,0 @@
-var G=Object.defineProperty;var N=(e,n,t)=>n in e?G(e,n,{enumerable:!0,configurable:!0,writable:!0,value:t}):e[n]=t;var C=(e,n,t)=>(N(e,typeof n!="symbol"?n+"":n,t),t);import{r as z,a as D,R as _}from"./react-H14vcryl.js";import{P as f}from"./phaser-pQREW5IE.js";(function(){const n=document.createElement("link").relList;if(n&&n.supports&&n.supports("modulepreload"))return;for(const o of document.querySelectorAll('link[rel="modulepreload"]'))i(o);new MutationObserver(o=>{for(const r of o)if(r.type==="childList")for(const s of r.addedNodes)s.tagName==="LINK"&&s.rel==="modulepreload"&&i(s)}).observe(document,{childList:!0,subtree:!0});function t(o){const r={};return o.integrity&&(r.integrity=o.integrity),o.referrerPolicy&&(r.referrerPolicy=o.referrerPolicy),o.crossOrigin==="use-credentials"?r.credentials="include":o.crossOrigin==="anonymous"?r.credentials="omit":r.credentials="same-origin",r}function i(o){if(o.ep)return;o.ep=!0;const r=t(o);fetch(o.href,r)}})();var B={exports:{}},g={};/**
- * @license React
- * react-jsx-runtime.production.min.js
- *
- * Copyright (c) Facebook, Inc. and its affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */var L=z,k=Symbol.for("react.element"),I=Symbol.for("react.fragment"),H=Object.prototype.hasOwnProperty,j=L.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner,M={key:!0,ref:!0,__self:!0,__source:!0};function q(e,n,t){var i,o={},r=null,s=null;t!==void 0&&(r=""+t),n.key!==void 0&&(r=""+n.key),n.ref!==void 0&&(s=n.ref);for(i in n)H.call(n,i)&&!M.hasOwnProperty(i)&&(o[i]=n[i]);if(e&&e.defaultProps)for(i in n=e.defaultProps,n)o[i]===void 0&&(o[i]=n[i]);return{$$typeof:k,type:e,key:r,ref:s,props:o,_owner:j.current}}g.Fragment=I;g.jsx=q;g.jsxs=q;B.exports=g;var T=B.exports,w={},P=D;w.createRoot=P.createRoot,w.hydrateRoot=P.hydrateRoot;const m=()=>{const e=window.AudioContext||window.webkitAudioContext;return new e};function W(){const e=m(),n=e.sampleRate*.05,t=e.createBuffer(1,n,e.sampleRate),i=t.getChannelData(0);for(let l=0;l<n;l++)i[l]=Math.random()*2-1;const o=e.createBufferSource();o.buffer=t;const r=e.createBiquadFilter();r.type="highpass",r.frequency.setValueAtTime(8e3,e.currentTime),r.Q.setValueAtTime(1,e.currentTime);const s=e.createGain();s.gain.setValueAtTime(1,e.currentTime),s.gain.exponentialRampToValueAtTime(.001,e.currentTime+.05),o.connect(r),r.connect(s),s.connect(e.destination),o.start(),o.stop(e.currentTime+.05);const a=e.createOscillator();a.type="square",a.frequency.setValueAtTime(1e4,e.currentTime);const c=e.createGain();c.gain.setValueAtTime(.1,e.currentTime),c.gain.exponentialRampToValueAtTime(.001,e.currentTime+.03),a.connect(c),c.connect(e.destination),a.start(),a.stop(e.currentTime+.03)}function $(){const e=m(),n=e.sampleRate*.2,t=e.createBuffer(1,n,e.sampleRate),i=t.getChannelData(0);for(let l=0;l<n;l++)i[l]=Math.random()*2-1;const o=e.createBufferSource();o.buffer=t;const r=e.createBiquadFilter();r.type="highpass",r.frequency.setValueAtTime(1e3,e.currentTime);const s=e.createGain();s.gain.setValueAtTime(1,e.currentTime),s.gain.exponentialRampToValueAtTime(.01,e.currentTime+.2),o.connect(r),r.connect(s),s.connect(e.destination),o.start(),o.stop(e.currentTime+.2);const a=e.createOscillator();a.type="sine",a.frequency.setValueAtTime(150,e.currentTime);const c=e.createGain();c.gain.setValueAtTime(.7,e.currentTime),c.gain.exponentialRampToValueAtTime(.01,e.currentTime+.1),a.connect(c),c.connect(e.destination),a.start(),a.stop(e.currentTime+.1)}function U(){const e=m(),n=e.createOscillator();n.type="sine";const t=e.createGain();n.frequency.setValueAtTime(200,e.currentTime),n.frequency.exponentialRampToValueAtTime(70,e.currentTime+.05),t.gain.setValueAtTime(1,e.currentTime),t.gain.exponentialRampToValueAtTime(.001,e.currentTime+1),n.connect(t),t.connect(e.destination),n.start(),n.stop(e.currentTime+1.5)}function K(){const e=m(),n=e.sampleRate*1.5,t=e.createBuffer(1,n,e.sampleRate),i=t.getChannelData(0);for(let u=0;u<n;u++)i[u]=Math.random()*2-1;const o=e.createBufferSource();o.buffer=t;const r=e.createBiquadFilter();r.type="highpass",r.frequency.setValueAtTime(4e3,e.currentTime);const s=e.createBiquadFilter();s.type="lowpass",s.frequency.setValueAtTime(12e3,e.currentTime);const a=e.createGain();a.gain.setValueAtTime(1,e.currentTime),a.gain.exponentialRampToValueAtTime(.001,e.currentTime+1.5),o.connect(r),r.connect(s),s.connect(a),a.connect(e.destination),o.start(),o.stop(e.currentTime+1.5);const c=e.createOscillator();c.type="triangle",c.frequency.setValueAtTime(1e4,e.currentTime);const l=e.createGain();l.gain.setValueAtTime(.05,e.currentTime),l.gain.exponentialRampToValueAtTime(.001,e.currentTime+1.5),c.connect(l),l.connect(e.destination),c.start(),c.stop(e.currentTime+1.5)}const d=e=>f.Display.Color.HexStringToColor(e).color;function J(){const e=m(),n=e.sampleRate*.5,t=e.createBuffer(1,n,e.sampleRate),i=t.getChannelData(0);for(let c=0;c<n;c++)i[c]=Math.random()*2-1;const o=e.createBufferSource();o.buffer=t;const r=e.createBiquadFilter();r.type="highpass",r.frequency.setValueAtTime(5e3,e.currentTime);const s=e.createBiquadFilter();s.type="lowpass",s.frequency.setValueAtTime(1e4,e.currentTime);const a=e.createGain();a.gain.setValueAtTime(.6,e.currentTime),a.gain.exponentialRampToValueAtTime(.001,e.currentTime+.5),o.connect(r),r.connect(s),s.connect(a),a.connect(e.destination),o.start(),o.stop(e.currentTime+.5)}function Q(){const e=m(),n=e.sampleRate*1.2,t=e.createBuffer(1,n,e.sampleRate),i=t.getChannelData(0);for(let c=0;c<n;c++)i[c]=Math.random()*2-1;const o=e.createBufferSource();o.buffer=t;const r=e.createBiquadFilter();r.type="highpass",r.frequency.setValueAtTime(3e3,e.currentTime);const s=e.createBiquadFilter();s.type="lowpass",s.frequency.setValueAtTime(9e3,e.currentTime);const a=e.createGain();a.gain.setValueAtTime(.8,e.currentTime),a.gain.exponentialRampToValueAtTime(.001,e.currentTime+1.2),o.connect(r),r.connect(s),s.connect(a),a.connect(e.destination),o.start(),o.stop(e.currentTime+1.2)}function O(e=99,n=500){const t=m(),i=t.createOscillator();i.type="sine",i.frequency.setValueAtTime(e,t.currentTime);const o=t.createGain();o.gain.setValueAtTime(1,t.currentTime),o.gain.exponentialRampToValueAtTime(.001,t.currentTime+.5),i.detune.setValueAtTime(-5,t.currentTime),i.connect(o),o.connect(t.destination),i.start(),i.stop(t.currentTime+n/1e3)}function Y(){O(120,400)}let A=!1,R=0,p=[],h=0,F=null;function Z(){A=!0,R=Date.now(),p=[],console.log("Recording started")}function x(){A=!1,p.push({instrument:null,time:Date.now()-R}),console.log("Recording stopped")}function X(){const e=()=>{h>=p.length&&(h=0);const{instrument:n,time:t}=p[h],i=h===0?0:p[h-1].time;F=setTimeout(()=>{console.log(`Playing ${n} after ${t}ms`),n&&v(n),h++,e()},t-i)};console.log("Loop play starting"),e()}function S(){F&&clearTimeout(F),console.log("Loop stopped")}const ee={hihat:W,kick:U,snare:$,crash:K,"hihat-open":J,ride:Q,"tom-low":O,"tom-high":Y},v=e=>{if(console.log(`Playing ${e}`),ee[e](),A){const n=Date.now()-R;p.push({instrument:e,time:n}),console.log(`Recording ${e} at time ${n}ms`)}},te={hihat:"#FDA341",kick:"#F24E1E",snare:"#4A90E2",crash:"#A0D8C5","hihat-open":"#F9F871",ride:"#F5C542","tom-low":"#FF7F50","tom-high":"#9B59B6"},V={idle:"#FFF",readyToRecord:"#0FF",recording:"#FD0041",playing:"#0F0"};class oe extends f.Scene{constructor(){super(...arguments);C(this,"controls")}create(){this.createPads(),this.createControlButtons()}createPads(){const t=[this.createPad("crash"),this.createPad("ride"),this.createPad("hihat-open"),this.createPad("hihat"),this.createPad("snare"),this.createPad("tom-low"),this.createPad("tom-high"),this.createPad("kick")],i=()=>{const s=window.innerWidth/4,a=window.innerHeight/2;t.forEach(({button:c},l)=>{const u=l%4*s,y=Math.floor(l/4)*a;c.setSize(s,a).setPosition(u,y)})};window.addEventListener("resize",i),i()}createPad(t){const i=this.add.rectangle().setFillStyle(d(te[t])).setStrokeStyle(2,d("#FFF"),.8).setInteractive().setOrigin(0,0);return i.on("pointerdown",()=>{i.setAlpha(.7),this.controls.state==="readyToRecord"&&(this.controls.state="recording",this.updateControlsText(),Z()),v(t)}).on("pointerup",()=>i.setAlpha(1)).on("pointerout",()=>i.setAlpha(1)),{instrument:t,button:i}}createControlButton(){const t=this.add.rectangle().setFillStyle(d("#000")).setStrokeStyle(2,d("#FFF"),.8).setOrigin(0,0);return t.setInteractive().on("pointerdown",()=>t.setFillStyle(d("#666"))).on("pointerup",()=>t.setFillStyle(d("#000"))).on("pointerout",()=>t.setFillStyle(d("#000"))),t}createText(t){return this.add.text(0,0,t).setOrigin(.5,.5).setFontSize(20).setFontFamily("Arial").setAlign("center").setColor("#FFF").setData("initial",t)}createControlButtons(){this.controls={state:"idle",stop:{button:this.createControlButton(),text:this.createText("Stop")},record:{button:this.createControlButton(),text:this.createText("Record")},play:{button:this.createControlButton(),text:this.createText("Play")}};const{record:t,stop:i,play:o}=this.controls;t.button.setInteractive().on("pointerdown",()=>{this.controls.state==="idle"||this.controls.state==="playing"?(S(),this.controls.state="readyToRecord"):this.controls.state==="readyToRecord"?this.controls.state="idle":this.controls.state==="recording"&&(this.controls.state="idle",x()),this.updateControlsText()}),i.button.setInteractive().on("pointerdown",()=>{this.controls.state==="recording"&&x(),this.controls.state==="playing"&&S(),this.controls.state="idle",this.updateControlsText()}),o.button.setInteractive().on("pointerdown",()=>{this.controls.state==="recording"&&x(),p.length>0?(this.controls.state="playing",X(),this.updateControlsText()):(this.controls.state="idle",this.updateControlsText(),console.log("No loop to play"),this.controls.play.text.setText("No loop to play, record first"),this.time.delayedCall(2e3,()=>{this.updateControlsText()}))});const r=()=>{const s=window.innerWidth,a=window.innerHeight,c=Math.max(a,s)/15,l=s/3;[i,t,o].forEach(({button:u,text:y},E)=>{u.setSize(l,c).setPosition(l*E,-1),y.setFontSize(c/3).setWordWrapWidth(u.width,!0).setSize(u.width,u.height).setPosition(u.getCenter().x,u.getCenter().y)})};window.addEventListener("resize",r),r()}updateControlsText(){const{record:{text:t},stop:{text:i},play:{text:o}}=this.controls;[t,i,o].forEach(s=>s.setText(s.getData("initial")).setColor(V.idle));const r=V[this.controls.state];switch(this.controls.state){case"idle":break;case"readyToRecord":t.setText("Hit a pad to start").setColor(r);break;case"recording":t.setText("Recording...").setColor(r);break;case"playing":o.setText("Playing...").setColor(r);break}}}function ne(e){const n=window.innerWidth,t=window.innerHeight;e.scale.resize(n,t),e.scene.scenes.forEach(i=>{var o,r;return(r=(o=i.sys)==null?void 0:o.scale)==null?void 0:r.refresh()})}let b=!1;const re=()=>{if(!b){b=!0;const e=new f.Game({type:f.AUTO,mode:f.Scale.RESIZE,parent:"phaser-container",width:window.innerWidth,height:window.innerHeight,backgroundColor:"#FFF",scene:[oe],input:{activePointers:4}});window.addEventListener("resize",()=>{ne(e)})}return T.jsx(T.Fragment,{})};function ie(){return T.jsx(re,{})}w.createRoot(document.getElementById("root")).render(T.jsx(_.StrictMode,{children:T.jsx(ie,{})}));
diff --git a/fonts/material.woff2 b/fonts/material.woff2
new file mode 100644
index 0000000..ecd223d
Binary files /dev/null and b/fonts/material.woff2 differ
diff --git a/index.html b/index.html
index e5b1210..98322c1 100644
--- a/index.html
+++ b/index.html
@@ -15,7 +15,7 @@
               height: 100%;
           }
       </style>
-    <script type="module" crossorigin src="./assets/index-YelipFu0.js"></script>
+    <script type="module" crossorigin src="./assets/index-2klQwAeG.js"></script>
     <link rel="modulepreload" crossorigin href="./assets/react-H14vcryl.js">
     <link rel="modulepreload" crossorigin href="./assets/phaser-pQREW5IE.js">
   <link rel="manifest" href="./manifest.webmanifest"><script id="vite-plugin-pwa:register-sw" src="./registerSW.js"></script></head>
diff --git a/sw.js b/sw.js
index d737a76..8eb00c6 100644
--- a/sw.js
+++ b/sw.js
@@ -1 +1 @@
-if(!self.define){let e,s={};const n=(n,i)=>(n=new URL(n+".js",i).href,s[n]||new Promise((s=>{if("document"in self){const e=document.createElement("script");e.src=n,e.onload=s,document.head.appendChild(e)}else e=n,importScripts(n),s()})).then((()=>{let e=s[n];if(!e)throw new Error(`Module ${n} didn’t register its module`);return e})));self.define=(i,r)=>{const o=e||("document"in self?document.currentScript.src:"")||location.href;if(s[o])return;let a={};const t=e=>n(e,o),c={module:{uri:o},exports:a,require:t};s[o]=Promise.all(i.map((e=>c[e]||t(e)))).then((e=>(r(...e),a)))}}define(["./workbox-209e5686"],(function(e){"use strict";self.skipWaiting(),e.clientsClaim(),e.precacheAndRoute([{url:"assets/index-YelipFu0.js",revision:null},{url:"assets/phaser-pQREW5IE.js",revision:null},{url:"assets/react-H14vcryl.js",revision:null},{url:"icons/favicon-32x32.png",revision:"385f8ba6daaec15480b890f5f7343438"},{url:"icons/pwa-192x192.png",revision:"eabf4d19df264df1374b6b8ec103ece3"},{url:"icons/pwa-512x512.png",revision:"a6a962c6a584754622ba3a30d845f540"},{url:"index.html",revision:"6ce1a5a65d6cea1a8b94893878994637"},{url:"registerSW.js",revision:"402b66900e731ca748771b6fc5e7a068"},{url:"./icons/pwa-192x192.png",revision:"eabf4d19df264df1374b6b8ec103ece3"},{url:"./icons/pwa-512x512.png",revision:"a6a962c6a584754622ba3a30d845f540"},{url:"manifest.webmanifest",revision:"7f72e7a7dd56296347bb1d27f4279e27"}],{}),e.cleanupOutdatedCaches(),e.registerRoute(new e.NavigationRoute(e.createHandlerBoundToURL("index.html"))),e.registerRoute((({url:e})=>"https://docs.google.com"===e.origin&&e.pathname.startsWith("/spreadsheets/")),new e.NetworkFirst({cacheName:"api-cache",networkTimeoutSeconds:10,plugins:[new e.ExpirationPlugin({maxEntries:50,maxAgeSeconds:86400}),new e.CacheableResponsePlugin({statuses:[0,200]})]}),"GET")}));
+if(!self.define){let e,s={};const n=(n,i)=>(n=new URL(n+".js",i).href,s[n]||new Promise((s=>{if("document"in self){const e=document.createElement("script");e.src=n,e.onload=s,document.head.appendChild(e)}else e=n,importScripts(n),s()})).then((()=>{let e=s[n];if(!e)throw new Error(`Module ${n} didn’t register its module`);return e})));self.define=(i,r)=>{const o=e||("document"in self?document.currentScript.src:"")||location.href;if(s[o])return;let t={};const c=e=>n(e,o),a={module:{uri:o},exports:t,require:c};s[o]=Promise.all(i.map((e=>a[e]||c(e)))).then((e=>(r(...e),t)))}}define(["./workbox-209e5686"],(function(e){"use strict";self.skipWaiting(),e.clientsClaim(),e.precacheAndRoute([{url:"assets/index-2klQwAeG.js",revision:null},{url:"assets/phaser-pQREW5IE.js",revision:null},{url:"assets/react-H14vcryl.js",revision:null},{url:"icons/favicon-32x32.png",revision:"385f8ba6daaec15480b890f5f7343438"},{url:"icons/pwa-192x192.png",revision:"eabf4d19df264df1374b6b8ec103ece3"},{url:"icons/pwa-512x512.png",revision:"a6a962c6a584754622ba3a30d845f540"},{url:"index.html",revision:"8045356bd041273fee85b928d22ce9c0"},{url:"registerSW.js",revision:"402b66900e731ca748771b6fc5e7a068"},{url:"./icons/pwa-192x192.png",revision:"eabf4d19df264df1374b6b8ec103ece3"},{url:"./icons/pwa-512x512.png",revision:"a6a962c6a584754622ba3a30d845f540"},{url:"manifest.webmanifest",revision:"7f72e7a7dd56296347bb1d27f4279e27"}],{}),e.cleanupOutdatedCaches(),e.registerRoute(new e.NavigationRoute(e.createHandlerBoundToURL("index.html"))),e.registerRoute((({url:e})=>"https://docs.google.com"===e.origin&&e.pathname.startsWith("/spreadsheets/")),new e.NetworkFirst({cacheName:"api-cache",networkTimeoutSeconds:10,plugins:[new e.ExpirationPlugin({maxEntries:50,maxAgeSeconds:86400}),new e.CacheableResponsePlugin({statuses:[0,200]})]}),"GET")}));