diff --git a/assets/index-UC79mN4L.js b/assets/index-UC79mN4L.js new file mode 100644 index 0000000..8f0f5da --- /dev/null +++ b/assets/index-UC79mN4L.js @@ -0,0 +1,9 @@ +var _=Object.defineProperty;var q=(i,n,o)=>n in i?_(i,n,{enumerable:!0,configurable:!0,writable:!0,value:o}):i[n]=o;var S=(i,n,o)=>(q(i,typeof n!="symbol"?n+"":n,o),o);import{r as D,a as G,R as L}from"./react-H14vcryl.js";import{P as g}from"./phaser-pQREW5IE.js";(function(){const n=document.createElement("link").relList;if(n&&n.supports&&n.supports("modulepreload"))return;for(const e of document.querySelectorAll('link[rel="modulepreload"]'))r(e);new MutationObserver(e=>{for(const t of e)if(t.type==="childList")for(const s of t.addedNodes)s.tagName==="LINK"&&s.rel==="modulepreload"&&r(s)}).observe(document,{childList:!0,subtree:!0});function o(e){const t={};return e.integrity&&(t.integrity=e.integrity),e.referrerPolicy&&(t.referrerPolicy=e.referrerPolicy),e.crossOrigin==="use-credentials"?t.credentials="include":e.crossOrigin==="anonymous"?t.credentials="omit":t.credentials="same-origin",t}function r(e){if(e.ep)return;e.ep=!0;const t=o(e);fetch(e.href,t)}})();var v={exports:{}},x={};/** + * @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 I=D,$=Symbol.for("react.element"),H=Symbol.for("react.fragment"),j=Object.prototype.hasOwnProperty,W=I.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner,N={key:!0,ref:!0,__self:!0,__source:!0};function E(i,n,o){var r,e={},t=null,s=null;o!==void 0&&(t=""+o),n.key!==void 0&&(t=""+n.key),n.ref!==void 0&&(s=n.ref);for(r in n)j.call(n,r)&&!N.hasOwnProperty(r)&&(e[r]=n[r]);if(i&&i.defaultProps)for(r in n=i.defaultProps,n)e[r]===void 0&&(e[r]=n[r]);return{$$typeof:$,type:i,key:t,ref:s,props:e,_owner:W.current}}x.Fragment=H;x.jsx=E;x.jsxs=E;v.exports=x;var w=v.exports,R={},P=G;R.createRoot=P.createRoot,R.hydrateRoot=P.hydrateRoot;const c=new(window.AudioContext||window.webkitAudioContext);function M(){const i=c.sampleRate*.05,n=c.createBuffer(1,i,c.sampleRate),o=n.getChannelData(0);for(let d=0;dg.Display.Color.HexStringToColor(i).color;let F=!1,k=0,y=[],T=0,C=null;function Q(){F=!0,k=Date.now(),y=[],console.log("Recording started")}function A(){F=!1,console.log("Recording stopped")}function Y(){const i=()=>{T>=y.length&&(T=0);const{instrument:n,time:o}=y[T],r=T===0?0:y[T-1].time;C=setTimeout(()=>{console.log(`Playing ${n} after ${o}ms`),O(n),T++,i()},o-r)};console.log("Loop play starting"),i()}function Z(){C&&clearTimeout(C),console.log("Loop stopped")}const O=i=>{switch(console.log(`Playing ${i}`),i){case"hihat":M();break;case"snare":K();break;case"kick":U();break;case"crash":J();break}if(F){const n=Date.now()-k;y.push({instrument:i,time:n}),console.log(`Recording ${i} at time ${n}ms`)}},X={hihat:"#FDA341",kick:"#F24E1E",snare:"#4A90E2",crash:"#A0D8C5"},b={idle:"#FFF",readyToRecord:"#0FF",recording:"#FD0041",playing:"#0F0"};class ee extends g.Scene{constructor(){super(...arguments);S(this,"controls")}create(){this.createPads(),this.createControlButtons()}createPads(){const o=[this.createPad("hihat"),this.createPad("kick"),this.createPad("snare"),this.createPad("crash")];o.forEach(({button:e,instrument:t})=>e.setInteractive().setOrigin(0,0).on("pointerdown",()=>{e.setAlpha(.7),this.controls.state==="readyToRecord"&&(this.controls.state="recording",this.updateControlsText(),Q()),O(t)}).on("pointerup",()=>e.setAlpha(1)).on("pointerout",()=>e.setAlpha(1)));const r=()=>{const e=window.innerWidth,t=window.innerHeight;o[0].button.setSize(e/2,t/2).setPosition(0,0),o[1].button.setSize(e/2,t/2).setPosition(e/2,0),o[2].button.setSize(e/2,t/2).setPosition(0,t/2),o[3].button.setSize(e/2,t/2).setPosition(e/2,t/2)};window.addEventListener("resize",r),r()}createPad(o){return{instrument:o,button:this.add.rectangle().setFillStyle(f(X[o])).setStrokeStyle(2,f("#FFF"),.8)}}createButton(){const o=this.add.rectangle().setFillStyle(f("#000")).setStrokeStyle(2,f("#FFF"),.8).setOrigin(0,0);return o.setInteractive().on("pointerdown",()=>o.setFillStyle(f("#666"))).on("pointerup",()=>o.setFillStyle(f("#000"))),o}createText(o){return this.add.text(0,0,o).setOrigin(.5,.5).setFontSize(20).setFontFamily("Arial").setAlign("center").setColor("#FFF").setData("initial",o)}createControlButtons(){this.controls={state:"idle",stop:{button:this.createButton(),text:this.createText("Stop")},record:{button:this.createButton(),text:this.createText("Record")},play:{button:this.createButton(),text:this.createText("Play")}};const{record:o,stop:r,play:e}=this.controls;o.button.setInteractive().on("pointerdown",()=>{this.controls.state==="idle"||this.controls.state==="playing"?(this.controls.state="readyToRecord",o.text.setText("Hit a pad to start")):this.controls.state==="readyToRecord"?(this.controls.state="idle",o.text.setText(o.text.getData("initial"))):this.controls.state==="recording"&&(this.controls.state="idle",A()),this.updateControlsText()}),r.button.setInteractive().on("pointerdown",()=>{this.controls.state==="recording"&&A(),this.controls.state==="playing"&&Z(),this.controls.state="idle",this.updateControlsText()}),e.button.setInteractive().on("pointerdown",()=>{this.controls.state==="recording"&&A(),this.controls.state="playing",Y(),this.updateControlsText()});const t=()=>{const s=window.innerWidth,u=window.innerHeight,d=Math.max(u,s)/15,h=s/3;[r,o,e].forEach(({button:m,text:B},z)=>{m.setSize(h,d).setPosition(h*z,-1),B.setFontSize(d/3).setWordWrapWidth(m.width,!0).setSize(m.width,m.height).setPosition(m.getCenter().x,m.getCenter().y)})};window.addEventListener("resize",t),t()}updateControlsText(){const{record:{text:o},stop:{text:r},play:{text:e}}=this.controls;[o,r,e].forEach(s=>s.setText(s.getData("initial")).setColor(b.idle));const t=b[this.controls.state];switch(this.controls.state){case"idle":break;case"readyToRecord":o.setText("Hit a pad to start").setColor(t);break;case"recording":o.setText("Recording...").setColor(t);break;case"playing":e.setText("Playing...").setColor(t);break}}}function te(i){const n=window.innerWidth,o=window.innerHeight;i.scale.resize(n,o),i.scene.scenes.forEach(r=>{var e,t;return(t=(e=r.sys)==null?void 0:e.scale)==null?void 0:t.refresh()})}let V=!1;const oe=()=>{if(!V){V=!0;const i=new g.Game({type:g.AUTO,mode:g.Scale.RESIZE,parent:"phaser-container",width:window.innerWidth,height:window.innerHeight,backgroundColor:"#FFF",scene:[ee],input:{activePointers:4}});window.addEventListener("resize",()=>{te(i)})}return w.jsx(w.Fragment,{})};function ne(){return w.jsx(oe,{})}R.createRoot(document.getElementById("root")).render(w.jsx(L.StrictMode,{children:w.jsx(ne,{})})); diff --git a/assets/index-zwHzKd1P.js b/assets/index-zwHzKd1P.js deleted file mode 100644 index 3fc99a4..0000000 --- a/assets/index-zwHzKd1P.js +++ /dev/null @@ -1,9 +0,0 @@ -var V=Object.defineProperty;var E=(r,n,o)=>n in r?V(r,n,{enumerable:!0,configurable:!0,writable:!0,value:o}):r[n]=o;var x=(r,n,o)=>(E(r,typeof n!="symbol"?n+"":n,o),o);import{r as v,a as O,R as B}from"./react-H14vcryl.js";import{P as m}from"./phaser-pQREW5IE.js";(function(){const n=document.createElement("link").relList;if(n&&n.supports&&n.supports("modulepreload"))return;for(const e of document.querySelectorAll('link[rel="modulepreload"]'))i(e);new MutationObserver(e=>{for(const t of e)if(t.type==="childList")for(const s of t.addedNodes)s.tagName==="LINK"&&s.rel==="modulepreload"&&i(s)}).observe(document,{childList:!0,subtree:!0});function o(e){const t={};return e.integrity&&(t.integrity=e.integrity),e.referrerPolicy&&(t.referrerPolicy=e.referrerPolicy),e.crossOrigin==="use-credentials"?t.credentials="include":e.crossOrigin==="anonymous"?t.credentials="omit":t.credentials="same-origin",t}function i(e){if(e.ep)return;e.ep=!0;const t=o(e);fetch(e.href,t)}})();var R={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 z=v,_=Symbol.for("react.element"),q=Symbol.for("react.fragment"),G=Object.prototype.hasOwnProperty,D=z.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner,L={key:!0,ref:!0,__self:!0,__source:!0};function S(r,n,o){var i,e={},t=null,s=null;o!==void 0&&(t=""+o),n.key!==void 0&&(t=""+n.key),n.ref!==void 0&&(s=n.ref);for(i in n)G.call(n,i)&&!L.hasOwnProperty(i)&&(e[i]=n[i]);if(r&&r.defaultProps)for(i in n=r.defaultProps,n)e[i]===void 0&&(e[i]=n[i]);return{$$typeof:_,type:r,key:t,ref:s,props:e,_owner:D.current}}g.Fragment=q;g.jsx=S;g.jsxs=S;R.exports=g;var T=R.exports,y={},w=O;y.createRoot=w.createRoot,y.hydrateRoot=w.hydrateRoot;const c=new(window.AudioContext||window.webkitAudioContext);function I(){const r=c.sampleRate*.05,n=c.createBuffer(1,r,c.sampleRate),o=n.getChannelData(0);for(let d=0;dI()),this.add.rectangle().setFillStyle(this.hexToColor("#F24E1E")).on("pointerdown",()=>H()),this.add.rectangle().setFillStyle(this.hexToColor("#4A90E2")).on("pointerdown",()=>k()),this.add.rectangle().setFillStyle(this.hexToColor("#A0D8C5")).on("pointerdown",()=>j())];o.forEach(e=>e.setInteractive().setOrigin(0,0).on("pointerdown",()=>{e.setAlpha(.7),this.controls.state==="readyToRecord"&&(this.controls.state="recording",this.updateControlsText(),W())}).on("pointerup",()=>e.setAlpha(1)).on("pointerout",()=>e.setAlpha(1)));const i=()=>{const e=window.innerWidth,t=window.innerHeight;o[0].setSize(e/2,t/2).setPosition(0,0),o[1].setSize(e/2,t/2).setPosition(e/2,0),o[2].setSize(e/2,t/2).setPosition(0,t/2),o[3].setSize(e/2,t/2).setPosition(e/2,t/2)};window.addEventListener("resize",i),i()}createButton(){const o=this.add.rectangle().setFillStyle(this.hexToColor("#000")).setStrokeStyle(2,this.hexToColor("#FFF"),.8).setOrigin(0,0);return o.setInteractive().on("pointerdown",()=>o.setFillStyle(this.hexToColor("#666"))).on("pointerup",()=>o.setFillStyle(this.hexToColor("#000"))),o}createText(o){return this.add.text(0,0,o).setOrigin(.5,.5).setFontSize(20).setFontFamily("Arial").setAlign("center").setColor("#FFF").setData("initial",o)}createControlButtons(){this.controls={state:"idle",stop:{button:this.createButton(),text:this.createText("Stop")},record:{button:this.createButton(),text:this.createText("Record")},play:{button:this.createButton(),text:this.createText("Play")}};const{record:o,stop:i,play:e}=this.controls;o.button.setInteractive().on("pointerdown",()=>{this.controls.state==="idle"||this.controls.state==="playing"?(this.controls.state="readyToRecord",o.text.setText("Hit a pad to start")):this.controls.state==="readyToRecord"?(this.controls.state="idle",o.text.setText(o.text.getData("initial"))):this.controls.state==="recording"&&(this.controls.state="idle",C()),this.updateControlsText()}),i.button.setInteractive().on("pointerdown",()=>{this.controls.state==="recording"&&C(),this.controls.state==="playing"&&M(),this.controls.state="idle",this.updateControlsText()}),e.button.setInteractive().on("pointerdown",()=>{this.controls.state="playing",N(),this.updateControlsText()});const t=()=>{const s=window.innerWidth,u=window.innerHeight,d=Math.max(u,s)/15,h=s/3;[i,o,e].forEach(({button:f,text:b},P)=>{f.setSize(h,d).setPosition(h*P,-1),b.setFontSize(d/3).setWordWrapWidth(f.width,!0).setSize(f.width,f.height).setPosition(f.getCenter().x,f.getCenter().y)})};window.addEventListener("resize",t),t()}updateControlsText(){const{record:{text:o},stop:{text:i},play:{text:e}}=this.controls;[o,i,e].forEach(s=>s.setText(s.getData("initial")).setColor(A.fonts.idle));const t=A.fonts[this.controls.state];switch(this.controls.state){case"idle":break;case"readyToRecord":o.setText("Hit a pad to start").setColor(t);break;case"recording":o.setText("Recording...").setColor(t);break;case"playing":e.setText("Playing...").setColor(t);break}}}function U(r){const n=window.innerWidth,o=window.innerHeight;r.scale.resize(n,o),r.scene.scenes.forEach(i=>{var e,t;return(t=(e=i.sys)==null?void 0:e.scale)==null?void 0:t.refresh()})}let F=!1;const J=()=>{if(!F){F=!0;const r=new m.Game({type:m.AUTO,mode:m.Scale.RESIZE,parent:"phaser-container",width:window.innerWidth,height:window.innerHeight,backgroundColor:"#FFF",scene:[K],input:{activePointers:4}});window.addEventListener("resize",()=>{U(r)})}return T.jsx(T.Fragment,{})};function Q(){return T.jsx(J,{})}y.createRoot(document.getElementById("root")).render(T.jsx(B.StrictMode,{children:T.jsx(Q,{})})); diff --git a/index.html b/index.html index 060cecd..d630426 100644 --- a/index.html +++ b/index.html @@ -15,7 +15,7 @@ height: 100%; } - + diff --git a/sw.js b/sw.js index 26d2830..95b6636 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 t={};const a=e=>n(e,o),c={module:{uri:o},exports:t,require:a};s[o]=Promise.all(i.map((e=>c[e]||a(e)))).then((e=>(r(...e),t)))}}define(["./workbox-209e5686"],(function(e){"use strict";self.skipWaiting(),e.clientsClaim(),e.precacheAndRoute([{url:"assets/index-zwHzKd1P.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:"18d129b8a092ce174d2d184dffae11fd"},{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 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-UC79mN4L.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:"0508775aa0ab5827b9728988988423ad"},{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")}));