https://alex-frei.web.app/en/chunk-W7MPERC2.js

1import{b as _t}from"./chunk-PSALEWE6.js";import{a as Ct}from"./chunk-VIJII4JL.js";import{b as ft}from"./chunk-FE3XZPDU.js";import{a as ht}from"./chunk-XJKJUKOW.js";import{a as ut}from"./chunk-AFUNIWTO.js";import"./chunk-LH4USWJO.js";import{f as pt,g as dt}from"./chunk-AU7TNUKF.js";import{l as gt}from"./chunk-EZMMEJRW.js";import{C as b,Ca as u,Cc as lt,Db as nt,Fb as P,Ga as l,Ia as x,Ma as y,Mb as h,Nb as ot,Oc as mt,Pa as j,Pb as A,Q as B,Qb as it,Rb as rt,S as D,Sb as g,Ta as Q,Tb as L,U as F,Ua as K,Ub as st,_b as _,ca as p,cb as q,dc as T,eb as J,ec as k,f as $,fb as W,gc as I,ha as U,hb as Y,hc as N,ia as V,ib as E,jb as R,jc as at,kb as d,lb as a,mb as c,nb as m,q as S,qc as f,ta as O,tb as Z,uc as ct,vb as tt,x as G,xa as X,y as z,z as H,zb as et}from"./chunk-QOOWFF2T.js";var Mt=`<svg viewBox="0 0 24 24" fill="none"
2    xmlns="http://www.w3.org/2000/svg">
3    <g id="SVGRepo_iconCarrier">
4        <path d="M12 20H12.01" stroke="#323232" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
5        <path d="M7 9C7 7.87439 7.37194 6.83566 7.99963 6C8.91184 4.78555 10.3642 4 12 4C14.7614 4 17 6.23858 17 9C17 11.4212 15.279 13.4405 12.9936 13.9013C12.4522 14.0104 12 14.4477 12 15V15V16" stroke="#323232" stroke-width="2" stroke-linecap="round"></path>
6    </g>
7</svg>`;var C=class{content;color;shortcut;id;constructor({content:o,color:t,buttonIndex:e,id:n}){this.id=n,this.color=t,this.content=o,this.shortcut=e===0?"S":e===1?"D":e===2?"F":e===3?"J":e===4?"K":"L";}};var wt=`<svg fill="red" viewBox="0 0 100 100"
8    xmlns="http://www.w3.org/2000/svg">
9    <circle cx="50" cy="50" r="50"/>
10</svg>`;var vt=` <svg fill="red" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
11      <rect x="0" y="0" width="100" height="100"/>
12    </svg>`;var St=`<svg fill="red" viewBox="0 0 100 100"
13    xmlns="http://www.w3.org/2000/svg">
14    <polygon points="50,0 0,100 100,100" />
15</svg>`;var M=class{rectangleSVG={id:"rect",svg:vt};triangleSVG={id:"triangle",svg:St};circleSVG={id:"circle",svg:wt};insertAtPosition(o,t,e){if(e<0||e>o.length)throw new Error("Invalid position");return[...o.slice(0,e),t,...o.slice(e)];}getRandomNumbers(){let o=[];for(;o.length<4;){let t=Math.randomNextInt(10,1);o.findIndex(e=>e.id===t.toString())<0&&o.push({id:t.toString(),content:t});}return o;}getRandomSymbol(){let o=[this.rectangleSVG,this.triangleSVG,this.circleSVG],t=[];for(;t.length<2;){let e=o[Math.randomNextInt(o.length)];t.findIndex(n=>n.id===e.id)<0&&t.push({id:e.id,content:e.svg});}return t;}generate(){let o=this.getRandomNumbers();for(let t of this.getRandomSymbol())o=this.insertAtPosition(o,t,Math.randomNextInt(o.length+1));return o;}};var Et=["buttonsRef"],Rt=["buttonRef"],Pt=["timeBanner"],At=()=>["avif","webp","jpeg"],Lt=()=>({state:"instruction"}),Tt=i=>({outlets:i}),kt=i=>["/relax","color-clash",i],It=(i,o)=>o.loopId;function Nt(i,o){if(i&1&&m(0,"source",5),i&2){let t=o.$implicit;d("srcset",_("assets/img/splash/swirling.",t))("type",_("image/",t));}}function $t(i,o){if(i&1&&(a(0,"span"),et(1,3),c(),g(2)),i&2){let t=P();l(2),st(": ",3-t.warmUpRounds()," ");}}function Gt(i,o){i&1&&(a(0,"span",null,2),g(2,"01:00"),c());}function zt(i,o){if(i&1&&(a(0,"div"),q("leave"),a(1,"div",14),g(2),I(3,"uppercase"),c(),m(4,"div",15),c()),i&2){let t=o.$implicit,e=o.$index;rt(_("item pos-",e)),A("--state-color",t.isCorrect?"green":"red")("--game-item-color",t.color),it("correct",t.isCorrect),l(2),L(N(3,11,t.modeTranslated)),l(2),d("innerHTML",t.content,u);}}function Ht(i,o){if(i&1){let t=tt();a(0,"button",16),nt("click",function(){let n=U(t),r=n.id,s=n.color,w=P();return V(w.buttonTap(r,s));}),m(1,"div",17),a(2,"kbd"),g(3),c()();}if(i&2){let t=o.content,e=o.color,n=o.shortcut;A("--game-item-color",e),l(),d("innerHTML",t,u),l(2),L(n);}}var de=(()=>{class i extends gt{router=p(pt);sanitizer=p(mt);cdRef=p(ct);theme=p(_t);gameManager=p(Ct);infoIcon=Mt;buttonsRef=f.required("buttonsRef",{read:y});buttonRef=f.required("buttonRef",{read:x});timeBanner=f("timeBanner");viewItems=O([]);gameButtons=[];countdownDuration=60;activeCountdown=!1;warmUpRounds=O(0);itemCount=0;shortcutKeys=["s","d","f","j","k","l"];colors=["#009688","#E91E63","#2196f3","#673ab7","#c77600","#000000"];countdownDestroy$=new $();ngOnInit(){this.isBrowser&&(this.generateButtons(),this.generateItems(),this.listenShortcutKeys(),this.listenTheme()),super.ngOnInit();}ngOnDestroy(){this.countdownDestroy$.next(!0),this.countdownDestroy$.complete();}listenShortcutKeys(){G(this.document,"keydown").pipe(b(t=>this.shortcutKeys.includes(t.key)),S(t=>this.gameButtons.find(e=>e.shortcut.toLowerCase()==t.key.toLowerCase())),this.destroyPipe()).subscribe(t=>{this.buttonTap(t.id,t.color),this.cdRef.detectChanges();});}listenTheme(){this.theme.changed$.pipe(this.destroyPipe(),B(this.theme.isDarkMode())).subscribe(t=>

15{let e=t?"#000000":"#ffffff",n=t?"#ffffff":"#000000";this.colors.updateLastItem(n);let r=this.gameButtons.filter(s=>s.color==e);for(let s of r)s.color=n;this.viewItems.update(s=>{let w=s.filter(v=>v.color===e);for(let v of w)v.color=n;return[...s];});});}generateButtons(){this.gameButtons.clear();let t=[...this.colors],e=new M().generate();for(let n=0;n<e.length;n++){let r=e[n],s=new C({id:r.id,content:this.sanitizer.bypassSecurityTrustHtml(r.content.toString()),color:t.splice(Math.randomNextInt(t.length),1)[0],buttonIndex:n});this.gameButtons.push(s),this.buttonsRef().createEmbeddedView(this.buttonRef(),s);}}generateItems(){for(;this.viewItems().length<3;){let t=this.gameButtons[Math.randomNextInt(this.gameButtons.length)].id,e=this.getMeaning(t),n=Math.random()>.5?"color":"meaning";this.viewItems.update(r=>[{color:this.colors[Math.randomNextInt(this.colors.length)],content:this.sanitizer.bypassSecurityTrustHtml(e),item:e,mode:n,modeTranslated:n==="color"?"Color":"Meaning",loopId:++this.itemCount,id:t},...r]);}}buttonTap(t,e){let n=this.viewItems().getLastItem();this.warmUpRounds()<3&&this.warmUpRounds.update(r=>++r),n.isCorrect=n.mode==="color"?n.color===e:n.id===t,this.activeCountdown&&(n.isCorrect?this.gameManager.points.update(r=>r+1):this.gameManager.mistakes.update(r=>r+1)),z(1).pipe(this.destroyPipe()).subscribe(()=>{this.warmUpRounds()>=3&&!this.activeCountdown&&this.startCountdown(),this.viewItems.update(r=>(r.pop(),r)),this.generateItems();});}getMeaning(t){switch(t){case"1":return"One";case"2":return"Two";case"3":return"Three";case"4":return"Four";case"5":return"Five";case"6":return"Six";case"7":return"Seven";case"8":return"Eight";case"9":return"Nine";case"rect":return"Rectangle";case"circle":return"Circle";case"triangle":return"Triangle";default:throw new Error(`Meaning for id ${t} is required!`);}}startCountdown(){function t(e){let n=(e/60).floor(),r=e%60;return`${n.padStart(2,"0")}:${r.padStart(2,"0")}`;}this.activeCountdown=!0,this.countdownDestroy$.next(!0),H(1e3).pipe(S(e=>t(this.countdownDuration-e-1)),D(this.countdownDestroy$),this.destroyPipe(),F(e=>{this.timeBanner().nativeElement.innerHTML=e;}),b(e=>e==="00:00")).subscribe(()=>{this.setGameFinish();});}setGameFinish(){this.activeCountdown=!1,this.countdownDestroy$.next(!0);let t=JSON.parse(localStorage.getItem("color-clash-high-score")??JSON.stringify({points:0,mistakes:0}));(!t.points||this.gameManager.mistakes()<t?.mistakes||this.gameManager.mistakes()<=t?.mistakes&&this.gameManager.points()>t.points)&&localStorage.setItem("color-clash-high-score",JSON.stringify({points:this.gameManager.points(),mistakes:this.gameManager.mistakes()})),this.router.navigate(["/relax","color-clash",{outlets:{state:"evaluation"}}]);}static ɵfac=(()=>{let t;return function(n){return(t||(t=X(i)))(n||i);};})();static ɵcmp=j({type:i,selectors:[["af-color-clash-game"]],viewQuery:function(e,n){e&1&&(h(n.buttonsRef,Et,5,y),h(n.buttonRef,Rt,5,x),h(n.timeBanner,Pt,5)),e&2&&ot(3);},features:[Q],decls:20,vars:11,consts:()=>{let t;t="Show Instruction";let e;e="Show Instruction";let n;return n="Warm-up laps",[["buttonsRef",""],["buttonRef",""],["timeBanner",""],n,[1,"frosted-background"],[3,"srcset","type"],["src","assets/img/splash/swirling.jpeg","alt",""],[1,"frosted-glass"],[1,"frosted-box"],[1,"header"],[1,"items"],[3,"class","correct","--state-color","--game-item-color"],[1,"action-buttons"],["aria-label",t,"afTooltip",e,1,"instruction-button",3,"routerLink","innerHTML"],[1,"mode"],[1,"content",3,"innerHTML"],["type","button",1,"action-button",3,"click"],[1,"col",3,"innerHTML"]];},template:function(e,n){e&1&&(a(0,"div",4)(1,"picture"),E(2,Nt,1,4,"source",5,Y),m(4,"img",6),c()(),m(5,"div",7),a(6,"div",8)(7,"div",9),J(8,$t,3,1)(9,Gt,3,0,"span"),c(),a(10,"div",10),E(11,zt,5,13,"div",11,It),c(),a(13,"div",12),Z(14,null,0),c(),m(16,"a",13),I(17,"safe"),c(),K(18,Ht,4,4,"ng-template",null,1,at)),e&2&&(l(2),R(T(5,At)),l(6),W(n.warmUpRounds()<3?8:9),l(3),R(n.viewItems()),l(5),d("routerLink",k(9,kt,k(7,Tt,T(6,Lt))))("innerHTML",N(17,3,n.infoIcon),u));},dependencies:[ft,dt,ut,lt,ht],styles:["kbd[_ngcontent-%COMP%]{background-color:#eee;border-radius:3px;border:1px solid #b4b4b4;box-shadow:0 1px 1px #0003,0 2px #ffffffb3 inset;color:#333;display:inline-block;font-size:.85em;font-weight:700;line-height:1;padding:2px 4px;white-space:nowrap}","[_nghost-%COMP%]{animation:_ngcontent-%COMP%_game-animation .5s ease forwards}@keyframes _ngcontent-%COMP%_game-animation{0%{opacity:.3;transform:translateY(25px) scale(.85)}to{opacity:1;transform:unset}}","[_nghost-%COMP%]{display:block;position:relative;height:525px;max-height:calc(100vh - 165px);max-height:calc(100dvh - 165px);max-width:500px;overflow:hidden;margin:auto;text-align:center;border-radius:12px;background-color:var(--color-primary-600)}.frosted-box[_ngcontent-%COMP%]{position:absolute;top:0;left:0;width:100%;height:100%;z-index:3;background:#0d244247;-webkit-backdrop-filter:saturate(180%) blur(10px);backdrop-filter:saturate(180%) blur(10px);display:flex;flex-direction:column;justify-content:space-between;align-items:stretch}[data-theme=dark][_nghost-%COMP%]   .frosted-box[_ngcontent-%COMP%], [data-theme=dark]   [_nghost-%COMP%]   .frosted-box[_ngcontent-%COMP%]{-webkit-backdrop-filter:grayscale(.4) blur(10px);backdrop-filter:grayscale(.4) blur(10px)}.header[_ngcontent-%COMP%]{color:#fff;font-size:.85rem;font-weight:500;margin-top:7px}.items[_ngcontent-%COMP%]{position:relative;overflow:hidden;width:100%;height:100%}.item[_ngcontent-%COMP%]{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);transition:transform .25s linear,opacity .25s linear;will-change:transform;padding:7px 25px}.item[_ngcontent-%COMP%]   .mode[_ngcontent-%COMP%]{font-size:.75rem;font-weight:400;letter-spacing:.2px;color:var(--color-primary-900)}.item.leave[_ngcontent-%COMP%]{background:var(--state-color);animation:_ngcontent-%COMP%_item-leave .3s ease forwards}.item.pos-0[_ngcontent-%COMP%]{transform:translate(70%,-225%) scale(0);opacity:0}

15.item.pos-1[_ngcontent-%COMP%]{transform:translate(25%,-170%) scale(.75);opacity:.7}.item[_ngcontent-%COMP%], .action-button[_ngcontent-%COMP%]{font-size:32px;font-weight:700;border-radius:7px;background-color:var(--color-primary-100);background:linear-gradient(var(--color-primary-100),var(--color-primary-200))}.action-buttons[_ngcontent-%COMP%]{z-index:4;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(2,1fr);gap:10px;border-top:2px solid var(--color-primary-100);padding:10px 15px 20px}.action-button[_ngcontent-%COMP%]{display:flex;align-items:center;justify-content:center;min-height:48px;outline:none;border:unset;padding:0;transition:transform .3s ease;will-change:transform}.action-button[_ngcontent-%COMP%]:hover{transform:scale(1.03)}.action-button[_ngcontent-%COMP%]:focus-visible{background:var(--color-primary-300);box-shadow:0 0 8px var(--shadow-color)}.action-button[_ngcontent-%COMP%]:active{transform:scale(.95)}kbd[_ngcontent-%COMP%]{font-size:.65rem;position:absolute;top:2px;right:3px}@media(max-width:960px){kbd[_ngcontent-%COMP%]{display:none}}[_nghost-%COMP%]     .item, [_nghost-%COMP%]     .action-button{color:var(--game-item-color)}[_nghost-%COMP%]     .item svg, [_nghost-%COMP%]     .action-button svg{width:36px;height:36px;

15fill:var(--game-item-color)}.instruction-button[_ngcontent-%COMP%]{position:absolute;top:5px;left:5px;border-radius:100%;width:32px;height:32px;padding:4px;background-color:#fff;outline:none;border:none}.instruction-button[_ngcontent-%COMP%]   svg[_ngcontent-%COMP%]{width:100%;height:100%}@keyframes _ngcontent-%COMP%_item-leave{0%{opacity:1}to{opacity:0;transform:translate(-50%,50px)}}"],changeDetection:0});}return i;})();export{de as ColorClashGameComponent};/**i18n:7145d090777048f7ede00ee9238fe3800846c380f170740d42e6cae8e793e3bb*/