browser-simon/dist/simon.min.js

Simon memory game for the browser

(function(){function k(a){this.i=a;F.add(this)}function K(){do A=A+1&2147483647||1;while(w.has(A));return A}function R(a,b,f){var l=K();w.set(l,{l:a,once:!1});a={};B.postMessage((a.action="REPEAT",a.id=l,a.delay=b,a.interval=f,a));return l}function L(a,b){var f=K();w.set(f,{l:a,once:!0});a={};B.postMessage((a.action="START",a.id=f,a.delay=b,a));return f}function C(a){if(w.delete(a)){var b={};B.postMessage((b.action="STOP",b.id=a,b))}}function G(a){D&&D.c();var b=t.createOscillator();b.connect(t.destination);
b.frequency.value=a;b.type="square";b.start();D=k.create(function(){b.disconnect();D=null});return b}function M(){G(42);H(!1,"Game over","#A33");k.create(k.h).m(1500)}function I(){x&&(x.c(),u<v.length?N():O())}function P(a){if(Q&&!x){k.h();var b=this.classList;b.add("down");"mousedown"===a.type&&b.add("smooth");if(this===v[u++]){var f=G(this.dataset.frequency);x=k.create(function(){b.remove("down","smooth");f.stop(t.currentTime+.2);x=null})}else k.create(function(){b.remove("down")}),M()}a.preventDefault()}
function S(){k.h();v=[];O();t||(t=new window["AudioContext"in window?"AudioContext":"webkitAudioContext"],t.createOscillator())}function O(){u=0;H(!1,"Look","");v.push(y.children[4*Math.random()^0]);var a=v.length;J.textContent=a;var b=13<a?270:5<a?370:470,f=R(function(){if(u<a){var m=v[u++];G(m.dataset.frequency).stop(t.currentTime+(b-50)/1E3);var n=m.classList;n.add("lit");k.create(function(){n.remove("lit")}).m(b-100)}else l.c()},800,b),l=k.create(function(){C(f);u=0;N();H(!0,"Play","")})}function H(a,
b,f){Q=a;y.classList.toggle("ready",a);E.textContent=b;E.style.color=f}function N(){var a=L(function(){a=void 0;var b=v[u].classList;b.add("lit");k.create(function(){b.remove("lit")});M()},3E3);k.create(function(){C(a)})}(function(){function a(d,e){n.keys(e).forEach(function(g){var h=n.getOwnPropertyDescriptor(e,g);"value"in h?(h=h.value,g in d&&"object"===typeof h?a(d[g],h):d[g]=h):n.defineProperty(d,g,h)})}function b(d,e,g,h){return function(p){function z(T){p[h](T,e,g)}Array.isArray(d)?d.forEach(z):
z(d)}}function f(d){if(!r){var e=q("STYLE");q(document.head,e);r=e.sheet}r.insertRule(d,r.cssRules.length)}function l(d,e){return n.keys(d).map(function(g){return e(g,d[g])})}function m(d,e){e=l(e,function(g,h){return g+":"+h});return d+"{"+e.join(";")+"}"}var n=Object,q=window.o=function(d){var e=d instanceof Node?d:"function"===typeof d?d.call(q):document.createElement(d);for(var g=arguments.length,h=0;++h<g;){var p=arguments[h];if(p instanceof Node)e.appendChild(p);else if(null!=p){var z=typeof p;
"object"===z?a(e,p):"function"===z?p.call(q,e):e.appendChild(document.createTextNode(p))}}return e};q.b=function(d,e){return b(d,e,void 0,"addEventListener")};q.a=function(d,e){d=m(d,e);f(d)};q.a.s=function(){if("KEYFRAME_RULE"in CSSRule)var d="@";else if("WEBKIT_KEYFRAME_RULE"in CSSRule)d="@-webkit-";else return function(){return!1};d+="keyframes ";return function(e,g){g=l(g,m);f(d+e+"{"+g.join("")+"}");return!0}}();var r})();var w=new Map,A,U=URL.createObjectURL(new Blob(['\'use strict\';const b=new Map;self.onmessage=d=>{const f=()=>postMessage({id:a}),e=g=>b.set(a,setTimeout(()=>{g();postMessage({id:a})},c.delay)),{data:c}=d,a=c.id;switch(c.action){case "START":e(()=>b.delete(a));break;case "REPEAT":e(()=>b.set(a,setInterval(f,c.interval)));break;case "STOP":d=b.get(a),b.delete(a),clearTimeout(d)}};\n']));
var B=new Worker(U);B.onmessage=function(a){a=a.data.id;var b=w.get(a);if(b){var f=b.l;b.once&&w.delete(a);f()}};var F=new Set;k.create=function(a){return new k(a)};k.h=function(){F.forEach(function(a){a.c()})};k.prototype.c=function(){var a=this.i;a&&(C(this.j),delete this.j,this.i=void 0,F.delete(this),a())};k.prototype.m=function(a){var b=this;b.i&&(C(b.j),b.j=L(function(){b.c()},a))};var t=null,D=null,c=window.o,J,E,y,Q=!1,x=null,u,v;c(document,c.b("DOMContentLoaded",function(){this.title="Browser Simon";
c(this.head,c("META",{content:"user-scalable=no, width=device-width",name:"viewport"}));c(this.documentElement,c.b("mouseup",I),c.b("touchend",I));var a=c("H1",{style:{font:"bold 28px/100% Georgia",margin:"28px 0",textAlign:"center"}},c("SPAN",{style:{color:"#49F",letterSpacing:"1px"}},"BROWSER"),c("BR"),c("SPAN",{style:{fontSize:"150%"}},"s\u0131mon"));y=c("DIV");var b=c("DIV",{style:{position:"relative",width:"300px",height:"300px"}},y);c.a(".tile",{"box-shadow":"5px 5px 2.5px #ABABAB",position:"absolute",
width:"145px",height:"145px"});c.a(".down",{margin:"3px 0 0 3px"});c.a(".lit,.smooth",{transition:"background 120ms ease, box-shadow 120ms ease, margin 120ms ease"});c.a(".ready *",{cursor:"pointer"});var f={};[{name:"green",frequency:415.305,background:"#DBFFBD",f:"#9F4",g:"#67AB2E"},{name:"red",frequency:311.127,background:"#FFBDBD",f:"#F44",g:"#AB2E2E"},{name:"yellow",frequency:246.942,background:"#FFFFBD",f:"#FF4",g:"#ABAB2E"},{name:"blue",frequency:207.652,background:"#BDDBFF",f:"#49F",g:"#2E67AB"}].forEach(function(m,
n){var q=m.background,r=m.f,d=m.name,e=m.g;m=c("DIV",{className:"tile "+d,dataset:{frequency:m.frequency}},c.b("mousedown",P),c.b("touchstart",P),c.b("mouseout",I));var g=[0,0,0,0],h=n^n>>1;g[h]="145px";c.a("."+d,{background:q,"border-radius":g.join(" "),left:150*(n&1)+"px",top:150*(n>>1)+"px"});c.a(".down."+d,{background:r,"box-shadow":"2px 2px 2.5px "+e});c.a(".lit."+d,{background:r,"box-shadow":"5px 5px 2.5px "+e});c(y,m);f[25*h+"%"]={color:r}});f["100%"]=f["0%"];c.a.s("start",f);var l=c("DIV",
{className:"round",style:{alignItems:"center",background:"#B0C4DE",flexGrow:"1",font:"bold 20px Verdana",justifyContent:"center",letterSpacing:"1px"}},"Start");l=c("DIV",{className:"round startButton",style:{boxShadow:"0 0 0 3px #888",color:"#434A54",cursor:"pointer",flexGrow:"1",padding:"2px"}},c.b("click",S),l);l=c("DIV",{className:"round startLayer"},{style:{padding:"4px",position:"absolute",left:"100px",top:"100px",width:"100px",height:"100px"}},l);c(b,l);c.a(".startButton,.startLayer",{background:"linear-gradient(135deg,#DDD,#AAA)"});
c.a(".startButton:active",{animation:"start 1.5s infinite",background:"linear-gradient(315deg,#DDD,#AAA)"});c.a(".round",{"border-radius":"100%","box-sizing":"border-box",display:"flex"});J=c("SPAN","\u2014");E=c("H2",{style:{textAlign:"center"}},"Hello");l=c("FOOTER",{style:{display:"table",margin:"18px 0",tableLayout:"fixed",whiteSpace:"nowrap",width:"100%"}},c("H2",{style:{overflowX:"auto"}},"Round: ",J),E);c.a("h2",{display:"table-cell",font:"24px Verdana"});c(this.body,{style:{color:"#33A",WebkitTapHighlightColor:"transparent",
userSelect:"none",WebkitUserSelect:"none"}},c("DIV",{style:{cursor:"default",margin:"0 auto",width:"300px"}},a,b,l))}))})();