speakid-build-a-sentence 1.0.23 → 1.0.24
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/Game.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Game.d.ts","sourceRoot":"","sources":["../src/Game.tsx"],"names":[],"mappings":"AA4DA,MAAM,WAAW,SAAS;IACxB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,iBAAS,aAAa,CAAC,KAAK,GAAE,SAAc,
|
|
1
|
+
{"version":3,"file":"Game.d.ts","sourceRoot":"","sources":["../src/Game.tsx"],"names":[],"mappings":"AA4DA,MAAM,WAAW,SAAS;IACxB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,iBAAS,aAAa,CAAC,KAAK,GAAE,SAAc,2CAwmC3C;AAED,eAAe,aAAa,CAAC"}
|
|
@@ -57,5 +57,5 @@
|
|
|
57
57
|
height: 100% !important;
|
|
58
58
|
overflow: hidden !important;
|
|
59
59
|
}
|
|
60
|
-
`;const d=document.getElementById("magic-sentence-reset");d&&d.remove(),document.head.appendChild(g)},at=g=>[...g].sort(()=>Math.random()-.5);function Te(g={}){const{logoUrl:d,showLogo:S=!0}=g,ie=s.useRef(null),{validateAllSentences:re,errors:v}=He(),H=()=>l||window.innerWidth<768,f=()=>l||window.innerWidth<768||window.innerWidth>=320&&window.innerWidth<=932&&window.innerHeight>=390&&window.innerHeight<=932,x=(e="medium")=>{if(!f())return{padding:"12px 24px",fontSize:"16px",minWidth:"auto"};switch(e){case"small":return{padding:"4px 6px",fontSize:"9px",minWidth:"40px"};case"medium":return{padding:"5px 8px",fontSize:"10px",minWidth:"50px"};case"large":return{padding:"6px 10px",fontSize:"11px",minWidth:"60px"}}};s.useEffect(()=>(st(),()=>{document.documentElement.style.overflow="",document.body.style.overflow="";const e=document.getElementById("magic-sentence-reset");e&&e.remove()}),[]);const[y,b]=s.useState("select"),[I,J]=s.useState(null),[ce,ue]=s.useState(null),[C,K]=s.useState([]),[T,he]=s.useState(0),[oe,pe]=s.useState([]),[W,se]=s.useState([]),[F,ge]=s.useState(20),[q,P]=s.useState(0),[lt,we]=s.useState(null),[B,D]=s.useState(null),[c,Y]=s.useState(!1),[fe,ae]=s.useState(!1),[de,je]=s.useState(Number(localStorage.getItem("magicSentenceBest"))||0),V=s.useRef(null),De=s.useRef(null),me=s.useRef(0),[m,R]=s.useState({list:null,id:null,side:null}),[l,Re]=s.useState(!1),[Ee,Z]=s.useState(1),[xe,_]=s.useState(null),[ze,Pe]=s.useState(!1),[M,Be]=s.useState(!1),[L,Me]=s.useState(!1),[A,Le]=s.useState(!1),[$,Ae]=s.useState(!1),[O,$e]=s.useState(!1),[N,Oe]=s.useState(!1),[G,Ne]=s.useState(!1),[X,Ge]=s.useState(!1),[ct,Xe]=s.useState(!1),[ut,Fe]=s.useState(!1);s.useEffect(()=>{const e=()=>{const n=window.innerWidth,t=window.innerHeight,i=n<768||n===926&&t===428||n===932&&t===430,o=t<700,h=n/t>1.8,w=n===768&&t===1024,a=n===1024&&t===768,u=n===820&&t===1180,j=n===1180&&t===820,k=n===540&&t===720,ne=n===720&&t===540,Se=n===1024&&t===1366,We=n===1366&&t===1024,ke=n>=1200&&t>=600&&!i;Pe(ke),Be(w),Me(a),Le(u),Ae(j),$e(k),Oe(ne),Ne(Se),Ge(We),Fe(h);const rt=i&&n>t||i||t<700||h||n===1366&&t===766||n===1366&&t===768||n===1280&&t===720||n===1440&&t===900||w||a||u||j||k||ne||Se||We||ke;if(Xe(rt),Re(i),i)_(null),Z(1);else if(o)_(null),Z(1);else if(h){const le=Math.min(1e3,Math.min(n,t)*.9);_(le),Z(.85)}else{const le=Math.min(1e3,Math.min(n,t)*.9);_(le),Z(1)}};return e(),window.addEventListener("resize",e),()=>window.removeEventListener("resize",e)},[]);const Q=(e,n,t,i)=>{if(c)return;let o=[...oe],h=[...W];const w=e==="bank"?o:h,a=n==="bank"?o:h,u=w.findIndex(ne=>ne.id===t);if(u===-1)return;const[j]=w.splice(u,1);let k=i;e===n&&k!==null&&k!==void 0&&k>u&&(k=k-1),k==null||k<0||k>a.length?a.push(j):a.splice(k,0,j),e==="bank"?o=w:h=w,n==="bank"?o=a:h=a,pe(o),se(h)},U=(e,n,t)=>{if(e.preventDefault(),c){R({list:null,id:null,side:null});return}const i=e.dataTransfer.getData("application/x-token")||(()=>{const o=e.dataTransfer.getData("text/plain");if(!o)return"";const h=oe.some(u=>u.id===o),w=W.some(u=>u.id===o),a=h?"bank":w?"selected":null;return a?JSON.stringify({from:a,id:o}):""})();if(i){try{const o=JSON.parse(i);if(!o||!o.id||!o.from)return;Q(o.from,n,o.id,t)}catch{}R({list:null,id:null,side:null})}},qe=e=>{J(e),De.current=e,K(Array(e).fill("")),b("time")},Ve=e=>{ue(e),b("type")},Ue=(e,n)=>{if(n.length>41||n&&!/^[a-zA-Z0-9\s.,!?;:'"-]*$/.test(n))return;const i=[...C];i[e]=n,K(i);const o=re(i);o.isValid||console.warn("Validation errors:",o.errors)},Je=e=>e.trim().replace(/\s+/g," "),ye=e=>e<=3?20:e<=5?18:e<=7?16:e<=9?14:12,Ke=()=>{C.some(n=>n.trim().length===0)||(K(n=>n.map(t=>Je(t))),P(0),he(0),me.current=0,we(null),b("getready"))};s.useEffect(()=>{if(y==="getready"){const e=setTimeout(()=>ee(0),3e3);return()=>clearTimeout(e)}},[y]);const ee=e=>{const n=C[e];if(!n)return;const i=at(n.trim().split(/\s+/).filter(Boolean)).map((o,h)=>({id:`${Date.now()}-${e}-${h}-${Math.random().toString(36).slice(2)}`,text:o}));pe(i),se([]),he(e),me.current=e,ge(ce||20),D(null),Y(!1),ae(!1),b("play")};s.useEffect(()=>{if(y==="play"&&!c)if(V.current!==null&&window.clearTimeout(V.current),F>0)V.current=window.setTimeout(()=>ge(e=>e-1),1e3);else{Y(!0);const e=C[T];if(!e){D(null);return}const n=e.trim().split(/\s+/),t=W.map(a=>a.text),i=n.filter(a=>!t.includes(a)).length,o=t.filter(a=>!n.includes(a)).length,h=n.filter((a,u)=>a!==t[u]).length,w=i+o+h;w===0?(D("correct"),fe||(ae(!0),P(a=>a+1)),E("correct"),z("Correct! Well done!")):w===1?(D("almost"),P(a=>a+.5),E("half"),z("Almost correct! Just one mistake.")):(D("wrong"),E("wrong"),z("Not quite right. Keep trying!"))}return()=>{V.current!==null&&window.clearTimeout(V.current)}},[y,F,c,C,T,W,fe]);const Ye=(e=!0)=>{if(e){if(c){T+1<(I||0)?ee(T+1):(b("results"),setTimeout(()=>te(),600));return}const n=C[T];if(!n){T+1<(I||0)?ee(T+1):(b("results"),setTimeout(()=>te(),600));return}const t=n.trim().split(/\s+/),i=W.map(u=>u.text),o=t.filter(u=>!i.includes(u)).length,h=i.filter(u=>!t.includes(u)).length,w=t.filter((u,j)=>u!==i[j]).length,a=o+h+w;a===0?(P(u=>u+1),D("correct"),ae(!0),E("correct"),z("Correct! Well done!")):a===1?(P(u=>u+.5),D("almost"),E("half"),z("Almost correct! Just one mistake.")):(D("wrong"),E("wrong"),z("Not quite right. Keep trying!")),T+1<(I||0)?setTimeout(()=>ee(T+1),800):setTimeout(()=>{b("results"),setTimeout(()=>te(),600)},800)}};s.useEffect(()=>{y==="results"&&q>de&&(je(q),localStorage.setItem("magicSentenceBest",String(q)))},[y,q,de]);const E=e=>{const n=new(window.AudioContext||window.webkitAudioContext),t=n.createOscillator(),i=n.createGain();switch(t.connect(i),i.connect(n.destination),e){case"start":t.frequency.value=500;break;case"click":t.frequency.value=800;break;case"correct":t.frequency.value=1e3;break;case"half":t.frequency.value=700;break;case"wrong":t.frequency.value=200;break}i.gain.setValueAtTime(.1,n.currentTime),t.start(),t.stop(n.currentTime+.2)},te=()=>{const n=Date.now()+2500,t=["#ec4c44","#f7c948","#6fcf97","#56ccf2","#bb6bd9"],i=document.createElement("canvas"),o=i.getContext("2d");i.width=window.innerWidth,i.height=window.innerHeight,i.style.position="fixed",i.style.top="0",i.style.left="0",i.style.pointerEvents="none",document.body.appendChild(i);const h=Array.from({length:100}).map(()=>({x:Math.random()*i.width,y:Math.random()*i.height-i.height,size:6+Math.random()*6,color:t[Math.floor(Math.random()*t.length)],speed:2+Math.random()*4,tilt:Math.random()*2*Math.PI})),w=()=>{o.clearRect(0,0,i.width,i.height),h.forEach(a=>{o.fillStyle=a.color,o.beginPath(),o.ellipse(a.x,a.y,a.size,a.size/2,a.tilt,0,2*Math.PI),o.fill(),a.y+=a.speed,a.x+=Math.sin(a.tilt)}),Date.now()<n?requestAnimationFrame(w):document.body.removeChild(i)};w()},Ze=()=>r.jsxs("div",{style:p.gmCenterScreen,children:[r.jsx("h1",{style:p.gmHeadline1,children:"MAGIC SENTENCE"}),r.jsx("p",{style:p.gmBodyM,children:"Select number of rounds"}),r.jsx("div",{style:{display:"flex",gap:f()?"8px":"16px",justifyContent:"center"},children:[3,4,5].map(e=>r.jsxs("button",{onClick:()=>qe(e),style:{...p.gmButton,...x("medium")},children:[e," ROUNDS"]},e))})]}),_e=()=>r.jsxs("div",{style:p.gmCenterScreen,children:[r.jsx("h1",{style:p.gmHeadline1,children:"MAGIC SENTENCE"}),r.jsx("p",{style:p.gmBodyM,children:"Select time per round"}),r.jsx("div",{style:{display:"flex",gap:f()?"8px":"16px",justifyContent:"center"},children:[15,20,30].map(e=>r.jsxs("button",{onClick:()=>Ve(e),style:{...p.gmButton,...x("medium")},children:[e,"s"]},e))})]}),Qe=()=>r.jsxs("div",{style:p.gmCenterScreen,children:[r.jsxs("h2",{style:{...p.gmBodyM,marginBottom:"0px"},children:["Type down ",I," sentence",I&&I>1?"s":""," for your student"]}),r.jsx("p",{style:{...p.gmBodyS,marginBottom:"16px",marginTop:"0px",color:"#6b7280"},children:"Maximum 41 characters per sentence"}),r.jsx("div",{style:{display:"flex",flexDirection:"column",gap:12,width:"auto",minWidth:"fit-content",maxWidth:"600px"},children:C.map((e,n)=>r.jsx("input",{value:e,placeholder:`Sentence ${n+1}`,onChange:t=>Ue(n,t.target.value),style:{...p.gmInput,padding:f()?"8px 12px":"12px 16px",fontSize:f()?"14px":"16px",width:"100%",textAlign:"center"}},n))}),r.jsx("button",{onClick:Ke,disabled:C.some(e=>e.trim().length===0),style:{...p.gmButton,marginTop:30,background:C.some(e=>e.trim().length===0)?"#ccc":"#ec4c44",cursor:C.some(e=>e.trim().length===0)?"not-allowed":"pointer",...x("large")},children:"PLAY"})]}),et=()=>r.jsxs("div",{style:p.gmReadyWrapper,children:[r.jsx("h1",{style:{...p.gmHeadline1,color:"#ec4c44"},children:"GET READY"}),r.jsx("div",{style:p.gmHourglass,children:"⏳"})]}),tt=()=>r.jsxs("div",{style:p.gmGameLayout,children:[r.jsxs("h2",{style:{marginBottom:f()?"5px":"10px",fontSize:f()?"16px":"20px"},children:["Round ",T+1,"/",I," — ",c?"TIME'S UP!":`Time: ${F}s`]}),r.jsx("div",{style:{width:"60%",height:f()?"8px":"14px",borderRadius:8,background:"#eee",overflow:"hidden",marginBottom:f()?"10px":"20px"},children:r.jsx("div",{style:{height:"100%",width:`${F/(ce||20)*100}%`,background:F<=5?"#ec4c44":"#4caf50",transition:"width 1s linear"}})}),r.jsx("div",{onDragOver:e=>e.preventDefault(),onDrop:e=>U(e,"bank",null),style:{display:"flex",flexWrap:H()?"wrap":"nowrap",gap:l||window.innerWidth<768?"6px":"10px",justifyContent:"center",marginBottom:l||window.innerWidth<768?"15px":"30px",padding:l||window.innerWidth<768?"5px":"10px",width:"100%",boxSizing:"border-box"},children:oe.map((e,n)=>r.jsx("div",{draggable:!c,role:"button",tabIndex:c?-1:0,"aria-label":c?`Word: ${e.text} (time expired)`:Ie("Drag word",e.text,"to build sentence"),onDragStart:t=>{if(c){t.preventDefault();return}t.dataTransfer.setData("application/x-token",JSON.stringify({from:"bank",id:e.id})),t.dataTransfer.setData("text/plain",e.id),z(`Dragging word: ${e.text}`)},onKeyDown:t=>{c||Ce(t,()=>Q("bank","selected",e.id,null))},onDragOver:t=>t.preventDefault(),onDrop:t=>{const i=t.currentTarget.getBoundingClientRect(),o=i.left+i.width/2,h=t.clientX>o?n+1:n;R({list:null,id:null,side:null}),t.stopPropagation(),U(t,"bank",h)},onDragEnter:t=>{if(c)return;const i=t.currentTarget.getBoundingClientRect(),o=i.left+i.width/2;R({list:"bank",id:e.id,side:t.clientX>o?"right":"left"})},onDragLeave:()=>R({list:null,id:null,side:null}),onClick:()=>{c||Q("bank","selected",e.id,null)},style:{padding:l||window.innerWidth<768?"6px 10px":"10px 16px",borderRadius:l||window.innerWidth<768?"6px":"10px",border:"1px solid #ccc",background:c?"#f0f0f0":"#f9f9f9",cursor:c?"not-allowed":m.list==="bank"&&m.id===e.id?"grabbing":"grab",fontSize:l||window.innerWidth<768?"12px":"18px",...m.list==="bank"&&m.id===e.id&&m.side==="left"?{borderLeft:"3px solid #3b82f6"}:{},...m.list==="bank"&&m.id===e.id&&m.side==="right"?{borderRight:"3px solid #3b82f6"}:{},flexShrink:0,flexBasis:"auto",opacity:c?.6:1,transition:"opacity 0.3s ease, transform 0.2s ease",...m.list==="bank"&&m.id===e.id?{transform:"scale(1.05)",boxShadow:"0 2px 8px rgba(59, 130, 246, 0.3)"}:{}},children:e.text},e.id))}),r.jsx("div",{onDragOver:e=>e.preventDefault(),onDrop:e=>{const n=e.currentTarget.getBoundingClientRect(),t=Array.from(e.currentTarget.children);if(t.length===0){U(e,"selected",0);return}let i=W.length,o=1/0;t.forEach((h,w)=>{const a=h.getBoundingClientRect(),u=a.left+a.width/2,j=Math.abs(e.clientX-u);j<o&&(o=j,i=e.clientX<u?w:w+1)}),e.clientX>n.right-30&&(i=W.length),e.clientX<n.left+30&&(i=0),U(e,"selected",i)},style:{minHeight:l||window.innerWidth<768?"50px":"70px",width:"auto",maxWidth:"none",minWidth:"245px",border:B==="correct"?"2px dashed #4caf50":B==="almost"?"2px dashed #ff9800":B==="wrong"?"2px dashed #f44336":"2px dashed #ccc",borderRadius:l||window.innerWidth<768?"8px":"12px",padding:l||window.innerWidth<768?"8px":"12px",display:"flex",flexWrap:H()?"wrap":"nowrap",alignItems:"center",justifyContent:"center",fontSize:`${ye(W.length)}px`,background:B==="correct"?"#e8f5e8":B==="almost"?"#fff3e0":B==="wrong"?"#ffebee":"#fafafa",overflowX:H()?"hidden":"auto",whiteSpace:H()?"normal":"nowrap"},children:W.map((e,n)=>r.jsx("span",{draggable:!c,onDragStart:t=>{if(c){t.preventDefault();return}t.dataTransfer.setData("application/x-token",JSON.stringify({from:"selected",id:e.id})),t.dataTransfer.setData("text/plain",e.id)},onDragOver:t=>t.preventDefault(),onDrop:t=>{const i=t.currentTarget.getBoundingClientRect(),o=i.left+i.width/2,h=i.width*.25,w=t.clientX<o-h?n:t.clientX>o+h||t.clientX>o?n+1:n;R({list:null,id:null,side:null}),t.stopPropagation(),U(t,"selected",w)},onDragEnter:t=>{if(c)return;const i=t.currentTarget.getBoundingClientRect(),o=i.left+i.width/2;R({list:"selected",id:e.id,side:t.clientX>o?"right":"left"})},onDragLeave:()=>R({list:null,id:null,side:null}),onClick:()=>{c||Q("selected","bank",e.id,null)},title:c?"Time expired":"Click to remove back to bank",style:{padding:f()?"4px 6px":"6px 10px",margin:f()?"2px":"4px",borderRadius:f()?"4px":"8px",background:c?"#f0f0f0":"#ffe9e7",border:c?"1px solid #ccc":"1px solid #ec4c44",...m.list==="selected"&&m.id===e.id&&m.side==="left"?{borderLeft:"3px solid #3b82f6"}:{},...m.list==="selected"&&m.id===e.id&&m.side==="right"?{borderRight:"3px solid #3b82f6"}:{},cursor:c?"not-allowed":m.list==="selected"&&m.id===e.id?"grabbing":"grab",userSelect:"none",fontSize:`${ye(W.length)}px`,fontFamily:'"Roboto", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif',whiteSpace:"nowrap",opacity:c?.6:1,transition:"opacity 0.3s ease, transform 0.2s ease",...m.list==="selected"&&m.id===e.id?{transform:"scale(1.05)",boxShadow:"0 2px 8px rgba(59, 130, 246, 0.3)"}:{}},children:e.text},e.id))}),r.jsx("button",{onClick:()=>Ye(!0),disabled:!c&&W.length===0,style:{marginTop:f()?"15px":"30px",fontSize:f()?"14px":"20px",padding:f()?"6px 12px":"10px 24px",borderRadius:f()?"8px":"12px",background:c||W.length>0?"#ec4c44":"#ccc",color:"white",border:"none",cursor:c||W.length>0?"pointer":"not-allowed"},children:"NEXT"})]}),nt=()=>r.jsxs("div",{style:p.gmCenterScreen,children:[r.jsx("h1",{style:{...p.gmHeadline1,marginTop:(l&&window.innerWidth>window.innerHeight||window.innerWidth===896&&window.innerHeight===414||window.innerWidth===844&&window.innerHeight===390||window.innerWidth===926&&window.innerHeight===428||window.innerWidth===932&&window.innerHeight===430||M||L||A||$||O||N||G||X,"0px"),marginBottom:l&&window.innerWidth>window.innerHeight||window.innerWidth===896&&window.innerHeight===414||window.innerWidth===844&&window.innerHeight===390||window.innerWidth===926&&window.innerHeight===428||window.innerWidth===932&&window.innerHeight===430||M||L||A||$||O||N||G||X?"2px":"10px",fontSize:l&&window.innerWidth<=375&&window.innerHeight<=667||window.innerWidth===896&&window.innerHeight===414||window.innerWidth===844&&window.innerHeight===390||window.innerWidth===926&&window.innerHeight===428||window.innerWidth===932&&window.innerHeight===430?"32px":"clamp(28px, 4vw, 40px)"},children:"Game Over 🎯"}),r.jsxs("h2",{style:{...p.gmHeadline2,marginTop:(l&&window.innerWidth>window.innerHeight||window.innerWidth===896&&window.innerHeight===414||window.innerWidth===844&&window.innerHeight===390||window.innerWidth===926&&window.innerHeight===428||window.innerWidth===932&&window.innerHeight===430||M||L||A||$||O||N||G||X,"0px"),marginBottom:l&&window.innerWidth>window.innerHeight||window.innerWidth===896&&window.innerHeight===414||window.innerWidth===844&&window.innerHeight===390||window.innerWidth===926&&window.innerHeight===428||window.innerWidth===932&&window.innerHeight===430||M||L||A||$||O||N||G||X?"2px":"16px",fontSize:l&&window.innerWidth<=375&&window.innerHeight<=667||window.innerWidth===896&&window.innerHeight===414||window.innerWidth===844&&window.innerHeight===390||window.innerWidth===926&&window.innerHeight===428||window.innerWidth===932&&window.innerHeight===430?"18px":"24px"},children:["Your score: ",q," out of ",I]}),r.jsxs("p",{style:{...p.gmBodyM,color:"#10b981",marginTop:l&&window.innerWidth>window.innerHeight||window.innerWidth===896&&window.innerHeight===414||window.innerWidth===844&&window.innerHeight===390||window.innerWidth===926&&window.innerHeight===428||window.innerWidth===932&&window.innerHeight===430||M||L||A||$||O||N||G||X?"0px":"12px",marginBottom:l&&window.innerWidth>window.innerHeight||window.innerWidth===896&&window.innerHeight===414||window.innerWidth===844&&window.innerHeight===390||window.innerWidth===926&&window.innerHeight===428||window.innerWidth===932&&window.innerHeight===430||M||L||A||$||O||N||G||X?"2px":"16px",fontSize:l&&window.innerWidth<=375&&window.innerHeight<=667||window.innerWidth===896&&window.innerHeight===414||window.innerWidth===844&&window.innerHeight===390||window.innerWidth===926&&window.innerHeight===428||window.innerWidth===932&&window.innerHeight===430?"14px":"16px"},children:["Best score: ",de]}),r.jsxs("div",{style:{display:"flex",gap:l&&window.innerWidth>window.innerHeight||l&&window.innerWidth<=375&&window.innerHeight<=667||window.innerWidth===896&&window.innerHeight===414||window.innerWidth===844&&window.innerHeight===390||window.innerWidth===926&&window.innerHeight===428||window.innerWidth===932&&window.innerHeight===430?"6px":"12px",marginTop:l&&window.innerWidth>window.innerHeight||l&&window.innerWidth<=375&&window.innerHeight<=667||window.innerWidth===896&&window.innerHeight===414||window.innerWidth===844&&window.innerHeight===390||window.innerWidth===926&&window.innerHeight===428||window.innerWidth===932&&window.innerHeight===430?"2px":window.innerWidth===1366&&window.innerHeight===766||window.innerWidth===1366&&window.innerHeight===768||window.innerWidth===1280&&window.innerHeight===720||window.innerWidth===1440&&window.innerHeight===900||ze?"12px":"24px"},children:[r.jsx("button",{onClick:()=>{te(),E("start"),setTimeout(()=>{b("getready"),we(null),Y(!1)},800)},style:{...p.gmButton,...x("medium")},children:"🔁 Play again"}),r.jsx("button",{onClick:()=>{E("click"),b("select"),J(null),ue(null),K([]),P(0),se([]),Y(!1)},style:{...p.gmButton,...x("medium")},children:"⬅️ Exit"})]})]}),be=!l&&S,it=s.useMemo(()=>{if(l&&window.innerWidth>window.innerHeight||window.innerHeight<700||!be)return null;const e=d||(typeof window<"u"&&window.origin?`${window.origin}/cloud/speakid/games/magic%20sentence/logo`:"/cloud/speakid/games/magic%20sentence/logo");return r.jsx("div",{style:{...p.gmLogoFixed,position:"absolute",top:16,left:16,zIndex:30},children:r.jsxs("picture",{children:[r.jsx("source",{srcSet:`${e}.svg`,type:"image/svg+xml"}),r.jsx("img",{src:`${e}.png`,alt:"SPEAKID Logo",style:p.gmLogoImg,loading:"lazy"})]})})},[l,be,d]);return r.jsx("div",{ref:ie,style:{width:"100%",height:"100%",display:"flex",justifyContent:"center",alignItems:"center",background:"linear-gradient(to bottom, #fff8f8 0%, #f9fafb 100%)",transition:"background 0.3s ease",overflow:"hidden",position:"absolute",top:0,left:0,right:0,bottom:0},children:r.jsx("div",{style:{width:l?"100%":xe||1e3,height:l?"100%":xe||1e3,display:"flex",justifyContent:"center",alignItems:"center",overflow:"hidden",borderRadius:l?0:"20px",background:"linear-gradient(to bottom, #fff8f8 0%, #f9fafb 100%)",boxShadow:l?"none":"0 0 40px rgba(0,0,0,0.1)",margin:l?"0 auto":"unset",position:"relative",transform:`scale(${Ee})`},children:r.jsx("div",{style:{transform:"translateZ(0)",width:"100%",height:"100%",display:"flex",justifyContent:"center",alignItems:"center"},children:r.jsxs("div",{id:"magic-sentence-root",children:[it,y==="select"?Ze():null,y==="time"?_e():null,y==="type"?Qe():null,y==="getready"?et():null,y==="play"?tt():null,y==="results"?nt():null]})})})})}class dt extends s.Component{constructor(d){super(d),this.state={hasError:!1}}static getDerivedStateFromError(d){return{hasError:!0,error:d}}componentDidCatch(d,S){console.error("Game Error:",d,S),this.setState({error:d,errorInfo:S})}handleReset=()=>{this.setState({hasError:!1,error:void 0,errorInfo:void 0})};render(){return this.state.hasError?this.props.fallback?this.props.fallback:r.jsxs("div",{style:{display:"flex",flexDirection:"column",alignItems:"center",justifyContent:"center",minHeight:"100vh",padding:"20px",textAlign:"center",backgroundColor:"#fef2f2",color:"#dc2626",fontFamily:"system-ui, sans-serif"},children:[r.jsx("h1",{style:{fontSize:"24px",marginBottom:"16px"},children:"🚨 Oops! Something went wrong"}),r.jsx("p",{style:{fontSize:"16px",marginBottom:"24px",maxWidth:"500px"},children:"The game encountered an unexpected error. Don't worry, your progress is saved!"}),r.jsx("button",{onClick:this.handleReset,style:{padding:"12px 24px",fontSize:"16px",backgroundColor:"#dc2626",color:"white",border:"none",borderRadius:"8px",cursor:"pointer",transition:"background-color 0.2s"},onMouseOver:d=>d.currentTarget.style.backgroundColor="#b91c1c",onMouseOut:d=>d.currentTarget.style.backgroundColor="#dc2626",children:"🔄 Restart Game"}),typeof process<"u"&&process.env.NODE_ENV==="development"&&this.state.error&&r.jsxs("details",{style:{marginTop:"20px",textAlign:"left",maxWidth:"600px"},children:[r.jsx("summary",{style:{cursor:"pointer",fontSize:"14px"},children:"Technical Details (Development Only)"}),r.jsxs("pre",{style:{backgroundColor:"#f3f4f6",padding:"12px",borderRadius:"4px",fontSize:"12px",overflow:"auto",marginTop:"8px"},children:[this.state.error.toString(),this.state.errorInfo?.componentStack]})]})]}):this.props.children}}exports.ErrorBoundary=dt;exports.Game=Te;exports.announceToScreenReader=z;exports.createAriaLabel=Ie;exports.default=Te;exports.handleKeyDown=Ce;exports.useValidation=He;
|
|
60
|
+
`;const d=document.getElementById("magic-sentence-reset");d&&d.remove(),document.head.appendChild(g)},at=g=>[...g].sort(()=>Math.random()-.5);function Te(g={}){const{logoUrl:d,showLogo:S=!0}=g,ie=s.useRef(null),{validateAllSentences:re,errors:v}=He(),H=()=>l||window.innerWidth<768,f=()=>l||window.innerWidth<768||window.innerWidth>=320&&window.innerWidth<=932&&window.innerHeight>=390&&window.innerHeight<=932,x=(e="medium")=>{if(!f())return{padding:"12px 24px",fontSize:"16px",minWidth:"auto"};switch(e){case"small":return{padding:"4px 6px",fontSize:"9px",minWidth:"40px"};case"medium":return{padding:"5px 8px",fontSize:"10px",minWidth:"50px"};case"large":return{padding:"6px 10px",fontSize:"11px",minWidth:"60px"}}};s.useEffect(()=>(st(),()=>{document.documentElement.style.overflow="",document.body.style.overflow="";const e=document.getElementById("magic-sentence-reset");e&&e.remove()}),[]);const[y,b]=s.useState("select"),[I,J]=s.useState(null),[ce,ue]=s.useState(null),[C,K]=s.useState([]),[T,he]=s.useState(0),[oe,pe]=s.useState([]),[W,se]=s.useState([]),[F,ge]=s.useState(20),[q,P]=s.useState(0),[lt,we]=s.useState(null),[B,D]=s.useState(null),[c,Y]=s.useState(!1),[fe,ae]=s.useState(!1),[de,je]=s.useState(Number(localStorage.getItem("magicSentenceBest"))||0),V=s.useRef(null),De=s.useRef(null),me=s.useRef(0),[m,R]=s.useState({list:null,id:null,side:null}),[l,Re]=s.useState(!1),[Ee,Z]=s.useState(1),[xe,_]=s.useState(null),[ze,Pe]=s.useState(!1),[M,Be]=s.useState(!1),[L,Me]=s.useState(!1),[A,Le]=s.useState(!1),[$,Ae]=s.useState(!1),[O,$e]=s.useState(!1),[N,Oe]=s.useState(!1),[G,Ne]=s.useState(!1),[X,Ge]=s.useState(!1),[ct,Xe]=s.useState(!1),[ut,Fe]=s.useState(!1);s.useEffect(()=>{const e=()=>{const n=window.innerWidth,t=window.innerHeight,i=n<768||n===926&&t===428||n===932&&t===430,o=t<700,h=n/t>1.8,w=n===768&&t===1024,a=n===1024&&t===768,u=n===820&&t===1180,j=n===1180&&t===820,k=n===540&&t===720,ne=n===720&&t===540,Se=n===1024&&t===1366,We=n===1366&&t===1024,ke=n>=1200&&t>=600&&!i;Pe(ke),Be(w),Me(a),Le(u),Ae(j),$e(k),Oe(ne),Ne(Se),Ge(We),Fe(h);const rt=i&&n>t||i||t<700||h||n===1366&&t===766||n===1366&&t===768||n===1280&&t===720||n===1440&&t===900||w||a||u||j||k||ne||Se||We||ke;if(Xe(rt),Re(i),i)_(null),Z(1);else if(o)_(null),Z(1);else if(h){const le=Math.min(1e3,Math.min(n,t)*.9);_(le),Z(.85)}else{const le=Math.min(1e3,Math.min(n,t)*.9);_(le),Z(1)}};return e(),window.addEventListener("resize",e),()=>window.removeEventListener("resize",e)},[]);const Q=(e,n,t,i)=>{if(c)return;let o=[...oe],h=[...W];const w=e==="bank"?o:h,a=n==="bank"?o:h,u=w.findIndex(ne=>ne.id===t);if(u===-1)return;const[j]=w.splice(u,1);let k=i;e===n&&k!==null&&k!==void 0&&k>u&&(k=k-1),k==null||k<0||k>a.length?a.push(j):a.splice(k,0,j),e==="bank"?o=w:h=w,n==="bank"?o=a:h=a,pe(o),se(h)},U=(e,n,t)=>{if(e.preventDefault(),c){R({list:null,id:null,side:null});return}const i=e.dataTransfer.getData("application/x-token")||(()=>{const o=e.dataTransfer.getData("text/plain");if(!o)return"";const h=oe.some(u=>u.id===o),w=W.some(u=>u.id===o),a=h?"bank":w?"selected":null;return a?JSON.stringify({from:a,id:o}):""})();if(i){try{const o=JSON.parse(i);if(!o||!o.id||!o.from)return;Q(o.from,n,o.id,t)}catch{}R({list:null,id:null,side:null})}},qe=e=>{J(e),De.current=e,K(Array(e).fill("")),b("time")},Ve=e=>{ue(e),b("type")},Ue=(e,n)=>{if(n.length>41||n&&!/^[a-zA-Z0-9\s.,!?;:'"-]*$/.test(n))return;const i=[...C];i[e]=n,K(i);const o=re(i);o.isValid||console.warn("Validation errors:",o.errors)},Je=e=>e.trim().replace(/\s+/g," "),ye=e=>e<=3?20:e<=5?18:e<=7?16:e<=9?14:12,Ke=()=>{C.some(n=>n.trim().length===0)||(K(n=>n.map(t=>Je(t))),P(0),he(0),me.current=0,we(null),b("getready"))};s.useEffect(()=>{if(y==="getready"){const e=setTimeout(()=>ee(0),3e3);return()=>clearTimeout(e)}},[y]);const ee=e=>{const n=C[e];if(!n)return;const i=at(n.trim().split(/\s+/).filter(Boolean)).map((o,h)=>({id:`${Date.now()}-${e}-${h}-${Math.random().toString(36).slice(2)}`,text:o}));pe(i),se([]),he(e),me.current=e,ge(ce||20),D(null),Y(!1),ae(!1),b("play")};s.useEffect(()=>{if(y==="play"&&!c)if(V.current!==null&&window.clearTimeout(V.current),F>0)V.current=window.setTimeout(()=>ge(e=>e-1),1e3);else{Y(!0);const e=C[T];if(!e){D(null);return}const n=e.trim().split(/\s+/),t=W.map(a=>a.text),i=n.filter(a=>!t.includes(a)).length,o=t.filter(a=>!n.includes(a)).length,h=n.filter((a,u)=>t.includes(a)?t[u]!==a:!1).length,w=i+o+h;w===0?(D("correct"),fe||(ae(!0),P(a=>a+1)),E("correct"),z("Correct! Well done!")):w===1?(D("almost"),P(a=>a+.5),E("half"),z("Almost correct! Just one mistake.")):(D("wrong"),E("wrong"),z("Not quite right. Keep trying!"))}return()=>{V.current!==null&&window.clearTimeout(V.current)}},[y,F,c,C,T,W,fe]);const Ye=(e=!0)=>{if(e){if(c){T+1<(I||0)?ee(T+1):(b("results"),setTimeout(()=>te(),600));return}const n=C[T];if(!n){T+1<(I||0)?ee(T+1):(b("results"),setTimeout(()=>te(),600));return}const t=n.trim().split(/\s+/),i=W.map(u=>u.text),o=t.filter(u=>!i.includes(u)).length,h=i.filter(u=>!t.includes(u)).length,w=t.filter((u,j)=>i.includes(u)?i[j]!==u:!1).length,a=o+h+w;a===0?(P(u=>u+1),D("correct"),ae(!0),E("correct"),z("Correct! Well done!")):a===1?(P(u=>u+.5),D("almost"),E("half"),z("Almost correct! Just one mistake.")):(D("wrong"),E("wrong"),z("Not quite right. Keep trying!")),T+1<(I||0)?setTimeout(()=>ee(T+1),800):setTimeout(()=>{b("results"),setTimeout(()=>te(),600)},800)}};s.useEffect(()=>{y==="results"&&q>de&&(je(q),localStorage.setItem("magicSentenceBest",String(q)))},[y,q,de]);const E=e=>{const n=new(window.AudioContext||window.webkitAudioContext),t=n.createOscillator(),i=n.createGain();switch(t.connect(i),i.connect(n.destination),e){case"start":t.frequency.value=500;break;case"click":t.frequency.value=800;break;case"correct":t.frequency.value=1e3;break;case"half":t.frequency.value=700;break;case"wrong":t.frequency.value=200;break}i.gain.setValueAtTime(.1,n.currentTime),t.start(),t.stop(n.currentTime+.2)},te=()=>{const n=Date.now()+2500,t=["#ec4c44","#f7c948","#6fcf97","#56ccf2","#bb6bd9"],i=document.createElement("canvas"),o=i.getContext("2d");i.width=window.innerWidth,i.height=window.innerHeight,i.style.position="fixed",i.style.top="0",i.style.left="0",i.style.pointerEvents="none",document.body.appendChild(i);const h=Array.from({length:100}).map(()=>({x:Math.random()*i.width,y:Math.random()*i.height-i.height,size:6+Math.random()*6,color:t[Math.floor(Math.random()*t.length)],speed:2+Math.random()*4,tilt:Math.random()*2*Math.PI})),w=()=>{o.clearRect(0,0,i.width,i.height),h.forEach(a=>{o.fillStyle=a.color,o.beginPath(),o.ellipse(a.x,a.y,a.size,a.size/2,a.tilt,0,2*Math.PI),o.fill(),a.y+=a.speed,a.x+=Math.sin(a.tilt)}),Date.now()<n?requestAnimationFrame(w):document.body.removeChild(i)};w()},Ze=()=>r.jsxs("div",{style:p.gmCenterScreen,children:[r.jsx("h1",{style:p.gmHeadline1,children:"MAGIC SENTENCE"}),r.jsx("p",{style:p.gmBodyM,children:"Select number of rounds"}),r.jsx("div",{style:{display:"flex",gap:f()?"8px":"16px",justifyContent:"center"},children:[3,4,5].map(e=>r.jsxs("button",{onClick:()=>qe(e),style:{...p.gmButton,...x("medium")},children:[e," ROUNDS"]},e))})]}),_e=()=>r.jsxs("div",{style:p.gmCenterScreen,children:[r.jsx("h1",{style:p.gmHeadline1,children:"MAGIC SENTENCE"}),r.jsx("p",{style:p.gmBodyM,children:"Select time per round"}),r.jsx("div",{style:{display:"flex",gap:f()?"8px":"16px",justifyContent:"center"},children:[15,20,30].map(e=>r.jsxs("button",{onClick:()=>Ve(e),style:{...p.gmButton,...x("medium")},children:[e,"s"]},e))})]}),Qe=()=>r.jsxs("div",{style:p.gmCenterScreen,children:[r.jsxs("h2",{style:{...p.gmBodyM,marginBottom:"0px"},children:["Type down ",I," sentence",I&&I>1?"s":""," for your student"]}),r.jsx("p",{style:{...p.gmBodyS,marginBottom:"16px",marginTop:"0px",color:"#6b7280"},children:"Maximum 41 characters per sentence"}),r.jsx("div",{style:{display:"flex",flexDirection:"column",gap:12,width:"auto",minWidth:"fit-content",maxWidth:"600px"},children:C.map((e,n)=>r.jsx("input",{value:e,placeholder:`Sentence ${n+1}`,onChange:t=>Ue(n,t.target.value),style:{...p.gmInput,padding:f()?"8px 12px":"12px 16px",fontSize:f()?"14px":"16px",width:"100%",textAlign:"center"}},n))}),r.jsx("button",{onClick:Ke,disabled:C.some(e=>e.trim().length===0),style:{...p.gmButton,marginTop:30,background:C.some(e=>e.trim().length===0)?"#ccc":"#ec4c44",cursor:C.some(e=>e.trim().length===0)?"not-allowed":"pointer",...x("large")},children:"PLAY"})]}),et=()=>r.jsxs("div",{style:p.gmReadyWrapper,children:[r.jsx("h1",{style:{...p.gmHeadline1,color:"#ec4c44"},children:"GET READY"}),r.jsx("div",{style:p.gmHourglass,children:"⏳"})]}),tt=()=>r.jsxs("div",{style:p.gmGameLayout,children:[r.jsxs("h2",{style:{marginBottom:f()?"5px":"10px",fontSize:f()?"16px":"20px"},children:["Round ",T+1,"/",I," — ",c?"TIME'S UP!":`Time: ${F}s`]}),r.jsx("div",{style:{width:"60%",height:f()?"8px":"14px",borderRadius:8,background:"#eee",overflow:"hidden",marginBottom:f()?"10px":"20px"},children:r.jsx("div",{style:{height:"100%",width:`${F/(ce||20)*100}%`,background:F<=5?"#ec4c44":"#4caf50",transition:"width 1s linear"}})}),r.jsx("div",{onDragOver:e=>e.preventDefault(),onDrop:e=>U(e,"bank",null),style:{display:"flex",flexWrap:H()?"wrap":"nowrap",gap:l||window.innerWidth<768?"6px":"10px",justifyContent:"center",marginBottom:l||window.innerWidth<768?"15px":"30px",padding:l||window.innerWidth<768?"5px":"10px",width:"100%",boxSizing:"border-box"},children:oe.map((e,n)=>r.jsx("div",{draggable:!c,role:"button",tabIndex:c?-1:0,"aria-label":c?`Word: ${e.text} (time expired)`:Ie("Drag word",e.text,"to build sentence"),onDragStart:t=>{if(c){t.preventDefault();return}t.dataTransfer.setData("application/x-token",JSON.stringify({from:"bank",id:e.id})),t.dataTransfer.setData("text/plain",e.id),z(`Dragging word: ${e.text}`)},onKeyDown:t=>{c||Ce(t,()=>Q("bank","selected",e.id,null))},onDragOver:t=>t.preventDefault(),onDrop:t=>{const i=t.currentTarget.getBoundingClientRect(),o=i.left+i.width/2,h=t.clientX>o?n+1:n;R({list:null,id:null,side:null}),t.stopPropagation(),U(t,"bank",h)},onDragEnter:t=>{if(c)return;const i=t.currentTarget.getBoundingClientRect(),o=i.left+i.width/2;R({list:"bank",id:e.id,side:t.clientX>o?"right":"left"})},onDragLeave:()=>R({list:null,id:null,side:null}),onClick:()=>{c||Q("bank","selected",e.id,null)},style:{padding:l||window.innerWidth<768?"6px 10px":"10px 16px",borderRadius:l||window.innerWidth<768?"6px":"10px",border:"1px solid #ccc",background:c?"#f0f0f0":"#f9f9f9",cursor:c?"not-allowed":m.list==="bank"&&m.id===e.id?"grabbing":"grab",fontSize:l||window.innerWidth<768?"12px":"18px",...m.list==="bank"&&m.id===e.id&&m.side==="left"?{borderLeft:"3px solid #3b82f6"}:{},...m.list==="bank"&&m.id===e.id&&m.side==="right"?{borderRight:"3px solid #3b82f6"}:{},flexShrink:0,flexBasis:"auto",opacity:c?.6:1,transition:"opacity 0.3s ease, transform 0.2s ease",...m.list==="bank"&&m.id===e.id?{transform:"scale(1.05)",boxShadow:"0 2px 8px rgba(59, 130, 246, 0.3)"}:{}},children:e.text},e.id))}),r.jsx("div",{onDragOver:e=>e.preventDefault(),onDrop:e=>{const n=e.currentTarget.getBoundingClientRect(),t=Array.from(e.currentTarget.children);if(t.length===0){U(e,"selected",0);return}let i=W.length,o=1/0;t.forEach((h,w)=>{const a=h.getBoundingClientRect(),u=a.left+a.width/2,j=Math.abs(e.clientX-u);j<o&&(o=j,i=e.clientX<u?w:w+1)}),e.clientX>n.right-30&&(i=W.length),e.clientX<n.left+30&&(i=0),U(e,"selected",i)},style:{minHeight:l||window.innerWidth<768?"50px":"70px",width:"auto",maxWidth:"none",minWidth:"245px",border:B==="correct"?"2px dashed #4caf50":B==="almost"?"2px dashed #ff9800":B==="wrong"?"2px dashed #f44336":"2px dashed #ccc",borderRadius:l||window.innerWidth<768?"8px":"12px",padding:l||window.innerWidth<768?"8px":"12px",display:"flex",flexWrap:H()?"wrap":"nowrap",alignItems:"center",justifyContent:"center",fontSize:`${ye(W.length)}px`,background:B==="correct"?"#e8f5e8":B==="almost"?"#fff3e0":B==="wrong"?"#ffebee":"#fafafa",overflowX:H()?"hidden":"auto",whiteSpace:H()?"normal":"nowrap"},children:W.map((e,n)=>r.jsx("span",{draggable:!c,onDragStart:t=>{if(c){t.preventDefault();return}t.dataTransfer.setData("application/x-token",JSON.stringify({from:"selected",id:e.id})),t.dataTransfer.setData("text/plain",e.id)},onDragOver:t=>t.preventDefault(),onDrop:t=>{const i=t.currentTarget.getBoundingClientRect(),o=i.left+i.width/2,h=i.width*.25,w=t.clientX<o-h?n:t.clientX>o+h||t.clientX>o?n+1:n;R({list:null,id:null,side:null}),t.stopPropagation(),U(t,"selected",w)},onDragEnter:t=>{if(c)return;const i=t.currentTarget.getBoundingClientRect(),o=i.left+i.width/2;R({list:"selected",id:e.id,side:t.clientX>o?"right":"left"})},onDragLeave:()=>R({list:null,id:null,side:null}),onClick:()=>{c||Q("selected","bank",e.id,null)},title:c?"Time expired":"Click to remove back to bank",style:{padding:f()?"4px 6px":"6px 10px",margin:f()?"2px":"4px",borderRadius:f()?"4px":"8px",background:c?"#f0f0f0":"#ffe9e7",border:c?"1px solid #ccc":"1px solid #ec4c44",...m.list==="selected"&&m.id===e.id&&m.side==="left"?{borderLeft:"3px solid #3b82f6"}:{},...m.list==="selected"&&m.id===e.id&&m.side==="right"?{borderRight:"3px solid #3b82f6"}:{},cursor:c?"not-allowed":m.list==="selected"&&m.id===e.id?"grabbing":"grab",userSelect:"none",fontSize:`${ye(W.length)}px`,fontFamily:'"Roboto", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif',whiteSpace:"nowrap",opacity:c?.6:1,transition:"opacity 0.3s ease, transform 0.2s ease",...m.list==="selected"&&m.id===e.id?{transform:"scale(1.05)",boxShadow:"0 2px 8px rgba(59, 130, 246, 0.3)"}:{}},children:e.text},e.id))}),r.jsx("button",{onClick:()=>Ye(!0),disabled:!c&&W.length===0,style:{marginTop:f()?"15px":"30px",fontSize:f()?"14px":"20px",padding:f()?"6px 12px":"10px 24px",borderRadius:f()?"8px":"12px",background:c||W.length>0?"#ec4c44":"#ccc",color:"white",border:"none",cursor:c||W.length>0?"pointer":"not-allowed"},children:"NEXT"})]}),nt=()=>r.jsxs("div",{style:p.gmCenterScreen,children:[r.jsx("h1",{style:{...p.gmHeadline1,marginTop:(l&&window.innerWidth>window.innerHeight||window.innerWidth===896&&window.innerHeight===414||window.innerWidth===844&&window.innerHeight===390||window.innerWidth===926&&window.innerHeight===428||window.innerWidth===932&&window.innerHeight===430||M||L||A||$||O||N||G||X,"0px"),marginBottom:l&&window.innerWidth>window.innerHeight||window.innerWidth===896&&window.innerHeight===414||window.innerWidth===844&&window.innerHeight===390||window.innerWidth===926&&window.innerHeight===428||window.innerWidth===932&&window.innerHeight===430||M||L||A||$||O||N||G||X?"2px":"10px",fontSize:l&&window.innerWidth<=375&&window.innerHeight<=667||window.innerWidth===896&&window.innerHeight===414||window.innerWidth===844&&window.innerHeight===390||window.innerWidth===926&&window.innerHeight===428||window.innerWidth===932&&window.innerHeight===430?"32px":"clamp(28px, 4vw, 40px)"},children:"Game Over 🎯"}),r.jsxs("h2",{style:{...p.gmHeadline2,marginTop:(l&&window.innerWidth>window.innerHeight||window.innerWidth===896&&window.innerHeight===414||window.innerWidth===844&&window.innerHeight===390||window.innerWidth===926&&window.innerHeight===428||window.innerWidth===932&&window.innerHeight===430||M||L||A||$||O||N||G||X,"0px"),marginBottom:l&&window.innerWidth>window.innerHeight||window.innerWidth===896&&window.innerHeight===414||window.innerWidth===844&&window.innerHeight===390||window.innerWidth===926&&window.innerHeight===428||window.innerWidth===932&&window.innerHeight===430||M||L||A||$||O||N||G||X?"2px":"16px",fontSize:l&&window.innerWidth<=375&&window.innerHeight<=667||window.innerWidth===896&&window.innerHeight===414||window.innerWidth===844&&window.innerHeight===390||window.innerWidth===926&&window.innerHeight===428||window.innerWidth===932&&window.innerHeight===430?"18px":"24px"},children:["Your score: ",q," out of ",I]}),r.jsxs("p",{style:{...p.gmBodyM,color:"#10b981",marginTop:l&&window.innerWidth>window.innerHeight||window.innerWidth===896&&window.innerHeight===414||window.innerWidth===844&&window.innerHeight===390||window.innerWidth===926&&window.innerHeight===428||window.innerWidth===932&&window.innerHeight===430||M||L||A||$||O||N||G||X?"0px":"12px",marginBottom:l&&window.innerWidth>window.innerHeight||window.innerWidth===896&&window.innerHeight===414||window.innerWidth===844&&window.innerHeight===390||window.innerWidth===926&&window.innerHeight===428||window.innerWidth===932&&window.innerHeight===430||M||L||A||$||O||N||G||X?"2px":"16px",fontSize:l&&window.innerWidth<=375&&window.innerHeight<=667||window.innerWidth===896&&window.innerHeight===414||window.innerWidth===844&&window.innerHeight===390||window.innerWidth===926&&window.innerHeight===428||window.innerWidth===932&&window.innerHeight===430?"14px":"16px"},children:["Best score: ",de]}),r.jsxs("div",{style:{display:"flex",gap:l&&window.innerWidth>window.innerHeight||l&&window.innerWidth<=375&&window.innerHeight<=667||window.innerWidth===896&&window.innerHeight===414||window.innerWidth===844&&window.innerHeight===390||window.innerWidth===926&&window.innerHeight===428||window.innerWidth===932&&window.innerHeight===430?"6px":"12px",marginTop:l&&window.innerWidth>window.innerHeight||l&&window.innerWidth<=375&&window.innerHeight<=667||window.innerWidth===896&&window.innerHeight===414||window.innerWidth===844&&window.innerHeight===390||window.innerWidth===926&&window.innerHeight===428||window.innerWidth===932&&window.innerHeight===430?"2px":window.innerWidth===1366&&window.innerHeight===766||window.innerWidth===1366&&window.innerHeight===768||window.innerWidth===1280&&window.innerHeight===720||window.innerWidth===1440&&window.innerHeight===900||ze?"12px":"24px"},children:[r.jsx("button",{onClick:()=>{te(),E("start"),setTimeout(()=>{b("getready"),we(null),Y(!1)},800)},style:{...p.gmButton,...x("medium")},children:"🔁 Play again"}),r.jsx("button",{onClick:()=>{E("click"),b("select"),J(null),ue(null),K([]),P(0),se([]),Y(!1)},style:{...p.gmButton,...x("medium")},children:"⬅️ Exit"})]})]}),be=!l&&S,it=s.useMemo(()=>{if(l&&window.innerWidth>window.innerHeight||window.innerHeight<700||!be)return null;const e=d||(typeof window<"u"&&window.origin?`${window.origin}/cloud/speakid/games/magic%20sentence/logo`:"/cloud/speakid/games/magic%20sentence/logo");return r.jsx("div",{style:{...p.gmLogoFixed,position:"absolute",top:16,left:16,zIndex:30},children:r.jsxs("picture",{children:[r.jsx("source",{srcSet:`${e}.svg`,type:"image/svg+xml"}),r.jsx("img",{src:`${e}.png`,alt:"SPEAKID Logo",style:p.gmLogoImg,loading:"lazy"})]})})},[l,be,d]);return r.jsx("div",{ref:ie,style:{width:"100%",height:"100%",display:"flex",justifyContent:"center",alignItems:"center",background:"linear-gradient(to bottom, #fff8f8 0%, #f9fafb 100%)",transition:"background 0.3s ease",overflow:"hidden",position:"absolute",top:0,left:0,right:0,bottom:0},children:r.jsx("div",{style:{width:l?"100%":xe||1e3,height:l?"100%":xe||1e3,display:"flex",justifyContent:"center",alignItems:"center",overflow:"hidden",borderRadius:l?0:"20px",background:"linear-gradient(to bottom, #fff8f8 0%, #f9fafb 100%)",boxShadow:l?"none":"0 0 40px rgba(0,0,0,0.1)",margin:l?"0 auto":"unset",position:"relative",transform:`scale(${Ee})`},children:r.jsx("div",{style:{transform:"translateZ(0)",width:"100%",height:"100%",display:"flex",justifyContent:"center",alignItems:"center"},children:r.jsxs("div",{id:"magic-sentence-root",children:[it,y==="select"?Ze():null,y==="time"?_e():null,y==="type"?Qe():null,y==="getready"?et():null,y==="play"?tt():null,y==="results"?nt():null]})})})})}class dt extends s.Component{constructor(d){super(d),this.state={hasError:!1}}static getDerivedStateFromError(d){return{hasError:!0,error:d}}componentDidCatch(d,S){console.error("Game Error:",d,S),this.setState({error:d,errorInfo:S})}handleReset=()=>{this.setState({hasError:!1,error:void 0,errorInfo:void 0})};render(){return this.state.hasError?this.props.fallback?this.props.fallback:r.jsxs("div",{style:{display:"flex",flexDirection:"column",alignItems:"center",justifyContent:"center",minHeight:"100vh",padding:"20px",textAlign:"center",backgroundColor:"#fef2f2",color:"#dc2626",fontFamily:"system-ui, sans-serif"},children:[r.jsx("h1",{style:{fontSize:"24px",marginBottom:"16px"},children:"🚨 Oops! Something went wrong"}),r.jsx("p",{style:{fontSize:"16px",marginBottom:"24px",maxWidth:"500px"},children:"The game encountered an unexpected error. Don't worry, your progress is saved!"}),r.jsx("button",{onClick:this.handleReset,style:{padding:"12px 24px",fontSize:"16px",backgroundColor:"#dc2626",color:"white",border:"none",borderRadius:"8px",cursor:"pointer",transition:"background-color 0.2s"},onMouseOver:d=>d.currentTarget.style.backgroundColor="#b91c1c",onMouseOut:d=>d.currentTarget.style.backgroundColor="#dc2626",children:"🔄 Restart Game"}),typeof process<"u"&&process.env.NODE_ENV==="development"&&this.state.error&&r.jsxs("details",{style:{marginTop:"20px",textAlign:"left",maxWidth:"600px"},children:[r.jsx("summary",{style:{cursor:"pointer",fontSize:"14px"},children:"Technical Details (Development Only)"}),r.jsxs("pre",{style:{backgroundColor:"#f3f4f6",padding:"12px",borderRadius:"4px",fontSize:"12px",overflow:"auto",marginTop:"8px"},children:[this.state.error.toString(),this.state.errorInfo?.componentStack]})]})]}):this.props.children}}exports.ErrorBoundary=dt;exports.Game=Te;exports.announceToScreenReader=z;exports.createAriaLabel=Ie;exports.default=Te;exports.handleKeyDown=Ce;exports.useValidation=He;
|
|
61
61
|
//# sourceMappingURL=speakid-build-a-sentence.cjs.js.map
|