-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.nonpacked.html
1 lines (1 loc) · 1.48 KB
/
index.nonpacked.html
1
<!DOCTYPE html><html><head><meta name=viewport content="initial-scale=1"></head><body id=b><script>e=[],t=document.createElement`div`,d=document.createElement`div`,o=document.createElement`button`,i=()=>e.map((e,t)=>e.style.cssText=`height:1in;width:1in;position:fixed;overflow:hidden;transition:all.3s;transform:translate(${t%3}in,${t/3|0}in);font-size:0;padding:0`);b.append(t),t.append(d,o),b.style.cssText=`background:#efe`,t.style.cssText=`width:3in;background:#7dd;border:2ex solid #7dd;border-radius:2ex;display:grid;gap:4ex;box-shadow:0 0 1ex #1785;margin:3em auto`,d.style.cssText=`height:3in;box-shadow:0 0 1ex #178 inset;filter:drop-shadow(0 0 1ex #178)`,o.style.cssText=`height:3em;box-shadow:0 0 1ex #1785`,o.disabled=1,o.innerText=`Loading camera…`,o.onclick=()=>{e.sort(()=>Math.random()-.5),i(),o.innerText=`Shuffle`},navigator.mediaDevices.getUserMedia({video:1}).then(t=>{for(n=0;n<9;n++){let a=n<8?document.createElement`button`:document.createElement`div`,r=document.createElement`video`;e.push(a),a.t=n,d.append(a),n<8&&(a.append(r),r.srcObject=t,r.style.cssText=`transform:translate(-${n%3}in,-${n/3|0}in)scaleX(-1)`,r.oncanplay=()=>{r.play(),r[parseInt(getComputedStyle(r).width)>parseInt(getComputedStyle(r).height)?`height`:`width`]=288},a.onclick=()=>{let t=e.indexOf(a),d=e.findIndex(e=>8&e.t);t-d==-3|t-d==3|t-d==-1&t%3<2|t-d==1&t%3>0&&([e[t],e[d]]=[e[d],e[t]],i(),e.every((e,t)=>e.t==t)&&(o.innerText=`Sorted! Try again?`))})}i(),o.innerText=`Shuffle`,o.disabled=0})</script></body></html>