speakid-build-a-sentence 1.0.4 → 1.0.5

package/dist/speakid-build-a-sentence.umd.js

@@ -78,5 +78,5 @@ React keys must be passed directly to JSX without using spread:
       height: 100% !important;
       overflow: hidden !important;
     }
-  `,document.head.appendChild(f)},Le=f=>[...f].sort(()=>Math.random()-.5);function Be(f={}){const{logoUrl:c,showLogo:v=!0,baseURL:T}=f,W=d.useRef(null),{validateAllSentences:w,errors:H}=Pe(),R=()=>r||window.innerWidth<768,g=()=>r||window.innerWidth<768||window.innerWidth>=320&&window.innerWidth<=932&&window.innerHeight>=390&&window.innerHeight<=932,_=(t="medium")=>{if(!g())return{padding:"12px 24px",fontSize:"16px",minWidth:"auto"};switch(t){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"}}};d.useEffect(()=>(Me(),()=>{document.body.style.overflow=""}),[]);const[y,j]=d.useState("select"),[C,G]=d.useState(null),[de,he]=d.useState(null),[E,V]=d.useState([]),[O,me]=d.useState(0),[le,we]=d.useState([]),[I,ce]=d.useState([]),[L,X]=d.useState(20),[Y,Z]=d.useState(0),[xe,ue]=d.useState(null),[B,D]=d.useState(null),[u,U]=d.useState(!1),[Q,ye]=d.useState(Number(localStorage.getItem("magicSentenceBest"))||0),N=d.useRef(null),[e,a]=d.useState({list:null,index:null,side:null}),[r,b]=d.useState(!1),[pe,J]=d.useState(1),[x,z]=d.useState(null),[fe,ve]=d.useState(!1),[K,Fe]=d.useState(!1),[q,Ge]=d.useState(!1),[$,Ye]=d.useState(!1),[ee,Ue]=d.useState(!1),[te,Je]=d.useState(!1),[ne,Ve]=d.useState(!1),[ie,Xe]=d.useState(!1),[re,Ze]=d.useState(!1);d.useEffect(()=>{const t=()=>{const i=window.innerWidth,n=window.innerHeight,o=i<768||i===926&&n===428||i===932&&n===430,l=n<700,S=i===768&&n===1024,k=i===1024&&n===768,p=i===820&&n===1180,m=i===1180&&n===820,oe=i===540&&n===720,A=i===720&&n===540,Re=i===1024&&n===1366,lt=i===1366&&n===1024,ct=i>=1200&&n>=600&&!o;if(ve(ct),Fe(S),Ge(k),Ye(p),Ue(m),Je(oe),Ve(A),Xe(Re),Ze(lt),b(o),o)z(null),J(1);else if(l)z(null),J(1);else{const ut=Math.min(1e3,Math.min(i,n)*.9);z(ut),J(1)}};return t(),window.addEventListener("resize",t),()=>window.removeEventListener("resize",t)},[]);const be=(t,i,n,o)=>{if(u)return;let l=[...le],S=[...I];const k=t==="bank"?l:S,p=i==="bank"?l:S,m=k.findIndex(Re=>Re.id===n);if(m===-1)return;const[oe]=k.splice(m,1);let A=o;t===i&&A!==null&&A!==void 0&&A>m&&(A=A-1),A==null||A<0||A>p.length?p.push(oe):p.splice(A,0,oe),t==="bank"?l=k:S=k,i==="bank"?l=p:S=p,we(l),ce(S)},Se=(t,i,n)=>{if(t.preventDefault(),u){a({list:null,index:null,side:null});return}const o=t.dataTransfer.getData("application/x-token")||(()=>{const l=t.dataTransfer.getData("text/plain");if(!l)return"";const S=le.some(m=>m.id===l),k=I.some(m=>m.id===l),p=S?"bank":k?"selected":null;return p?JSON.stringify({from:p,id:l}):""})();if(o){try{const l=JSON.parse(o);if(!l||!l.id||!l.from)return;be(l.from,i,l.id,n)}catch{}a({list:null,index:null,side:null})}},Qe=t=>{G(t),V(Array(t).fill("")),j("time")},Ke=t=>{he(t),j("type")},qe=(t,i)=>{if(i.length>41||i&&!/^[a-zA-Z0-9\s.,!?;:'"-]*$/.test(i))return;const o=[...E];o[t]=i,V(o);const l=w(o);l.isValid||console.warn("Validation errors:",l.errors)},$e=t=>t.trim().replace(/\s+/g," "),Ae=t=>t<=3?20:t<=5?18:t<=7?16:t<=9?14:12,et=()=>{E.some(i=>i.trim().length===0)||(V(i=>i.map(n=>$e(n))),Z(0),me(0),ue(null),j("getready"))};d.useEffect(()=>{if(y==="getready"){const t=setTimeout(()=>ke(0),3e3);return()=>clearTimeout(t)}},[y]);const ke=t=>{const i=E[t];if(!i)return;const o=Le(i.trim().split(/\s+/).filter(Boolean)).map((l,S)=>({id:`${Date.now()}-${t}-${S}-${Math.random().toString(36).slice(2)}`,text:l}));we(o),ce([]),me(t),X(de||20),D(null),U(!1),j("play")};d.useEffect(()=>{if(y==="play"&&!u)if(N.current!==null&&window.clearTimeout(N.current),L>0)N.current=window.setTimeout(()=>X(t=>t-1),1e3);else{U(!0);const i=E[O].trim().split(/\s+/),n=I.map(p=>p.text),o=i.filter(p=>!n.includes(p)).length,l=n.filter(p=>!i.includes(p)).length,S=i.filter((p,m)=>p!==n[m]).length,k=o+l+S;k===0?(D("correct"),F("correct"),M("Correct! Well done!")):k===1?(D("almost"),F("half"),M("Almost correct! Just one mistake.")):(D("wrong"),F("wrong"),M("Not quite right. Keep trying!"))}return()=>{N.current!==null&&window.clearTimeout(N.current)}},[y,L,u,E,O,I]);const tt=(t=!0)=>{if(u&&t){O+1<(C||0)?ke(O+1):(j("results"),setTimeout(()=>We(),600));return}if(t&&!u){const n=E[O].trim().split(/\s+/),o=I.map(m=>m.text),l=n.filter(m=>!o.includes(m)).length,S=o.filter(m=>!n.includes(m)).length,k=n.filter((m,oe)=>m!==o[oe]).length,p=l+S+k;p===0&&L>0?(Z(m=>m+1),D("correct"),F("correct"),M("Correct! Well done!")):p===1?(Z(m=>m+.5),D("almost"),F("half"),M("Almost correct! Just one mistake.")):(D("wrong"),F("wrong"),M("Not quite right. Keep trying!")),O+1<(C||0)?setTimeout(()=>ke(O+1),800):(j("results"),setTimeout(()=>We(),600))}};d.useEffect(()=>{y==="results"&&Y>Q&&(ye(Y),localStorage.setItem("magicSentenceBest",String(Y)))},[y,Y,Q]);const F=t=>{const i=new(window.AudioContext||window.webkitAudioContext),n=i.createOscillator(),o=i.createGain();switch(n.connect(o),o.connect(i.destination),t){case"start":n.frequency.value=500;break;case"click":n.frequency.value=800;break;case"correct":n.frequency.value=1e3;break;case"half":n.frequency.value=700;break;case"wrong":n.frequency.value=200;break}o.gain.setValueAtTime(.1,i.currentTime),n.start(),n.stop(i.currentTime+.2)},We=()=>{const i=Date.now()+2500,n=["#ec4c44","#f7c948","#6fcf97","#56ccf2","#bb6bd9"],o=document.createElement("canvas"),l=o.getContext("2d");o.width=window.innerWidth,o.height=window.innerHeight,o.style.position="fixed",o.style.top="0",o.style.left="0",o.style.pointerEvents="none",document.body.appendChild(o);const S=Array.from({length:100}).map(()=>({x:Math.random()*o.width,y:Math.random()*o.height-o.height,size:6+Math.random()*6,color:n[Math.floor(Math.random()*n.length)],speed:2+Math.random()*4,tilt:Math.random()*2*Math.PI})),k=()=>{l.clearRect(0,0,o.width,o.height),S.forEach(p=>{l.fillStyle=p.color,l.beginPath(),l.ellipse(p.x,p.y,p.size,p.size/2,p.tilt,0,2*Math.PI),l.fill(),p.y+=p.speed,p.x+=Math.sin(p.tilt)}),Date.now()<i?requestAnimationFrame(k):document.body.removeChild(o)};k()},nt=()=>s.jsxs("div",{style:h.gmCenterScreen,children:[s.jsx("h1",{style:h.gmHeadline1,children:"MAGIC SENTENCE"}),s.jsx("p",{style:h.gmBodyM,children:"Select number of rounds"}),s.jsx("div",{style:{display:"flex",gap:g()?"8px":"16px",justifyContent:"center"},children:[3,4,5].map(t=>s.jsxs("button",{onClick:()=>Qe(t),style:{...h.gmButton,..._("medium")},children:[t," ROUNDS"]},t))})]}),it=()=>s.jsxs("div",{style:h.gmCenterScreen,children:[s.jsx("h1",{style:h.gmHeadline1,children:"MAGIC SENTENCE"}),s.jsx("p",{style:h.gmBodyM,children:"Select time per round"}),s.jsx("div",{style:{display:"flex",gap:g()?"8px":"16px",justifyContent:"center"},children:[15,20,30].map(t=>s.jsxs("button",{onClick:()=>Ke(t),style:{...h.gmButton,..._("medium")},children:[t,"s"]},t))})]}),rt=()=>s.jsxs("div",{style:h.gmCenterScreen,children:[s.jsxs("h2",{style:{...h.gmBodyM,marginBottom:"0px"},children:["Type down ",C," sentence",C&&C>1?"s":""," for your student"]}),s.jsx("p",{style:{...h.gmBodyS,marginBottom:"16px",marginTop:"0px",color:"#6b7280"},children:"Maximum 41 characters per sentence"}),s.jsx("div",{style:{display:"flex",flexDirection:"column",gap:12,width:"auto",minWidth:"fit-content",maxWidth:"600px"},children:E.map((t,i)=>s.jsx("input",{value:t,placeholder:`Sentence ${i+1}`,onChange:n=>qe(i,n.target.value),style:{...h.gmInput,padding:g()?"8px 12px":"12px 16px",fontSize:g()?"14px":"16px",width:"100%",textAlign:"center"}},i))}),s.jsx("button",{onClick:et,disabled:E.some(t=>t.trim().length===0),style:{...h.gmButton,marginTop:30,background:E.some(t=>t.trim().length===0)?"#ccc":"#ec4c44",cursor:E.some(t=>t.trim().length===0)?"not-allowed":"pointer",..._("large")},children:"PLAY"})]}),ot=()=>s.jsxs("div",{style:h.gmReadyWrapper,children:[s.jsx("h1",{style:{...h.gmHeadline1,fontSize:g()?"36px":"72px",color:"#ec4c44",marginBottom:"20px",animation:"pulse 1s ease-in-out infinite"},children:"GET READY"}),s.jsx("div",{style:h.gmHourglass,children:"⏳"})]}),st=()=>s.jsxs("div",{style:h.gmGameLayout,children:[s.jsxs("h2",{style:{marginBottom:g()?"5px":"10px",fontSize:g()?"16px":"20px"},children:["Round ",O+1,"/",C," — ",u?"TIME'S UP!":`Time: ${L}s`]}),s.jsx("div",{style:{width:"60%",height:g()?"8px":"14px",borderRadius:8,background:"#eee",overflow:"hidden",marginBottom:g()?"10px":"20px"},children:s.jsx("div",{style:{height:"100%",width:`${L/(de||20)*100}%`,background:L<=5?"#ec4c44":"#4caf50",transition:"width 1s linear"}})}),s.jsx("div",{onDragOver:t=>t.preventDefault(),onDrop:t=>Se(t,"bank",null),style:{display:"flex",flexWrap:R()?"wrap":"nowrap",gap:r||window.innerWidth<768?"6px":"10px",justifyContent:"center",marginBottom:r||window.innerWidth<768?"15px":"30px",padding:r||window.innerWidth<768?"5px":"10px",width:"100%",boxSizing:"border-box"},children:le.map((t,i)=>s.jsx("div",{draggable:!u,role:"button",tabIndex:u?-1:0,"aria-label":u?`Word: ${t.text} (time expired)`:He("Drag word",t.text,"to build sentence"),onDragStart:n=>{if(u){n.preventDefault();return}n.dataTransfer.setData("application/x-token",JSON.stringify({from:"bank",id:t.id})),n.dataTransfer.setData("text/plain",t.id),M(`Dragging word: ${t.text}`)},onKeyDown:n=>{u||Ce(n,()=>be("bank","selected",t.id,null))},onDragOver:n=>n.preventDefault(),onDrop:n=>{const o=n.currentTarget.getBoundingClientRect(),l=o.left+o.width/2,S=n.clientX>l?i+1:i;a({list:null,index:null,side:null}),n.stopPropagation(),Se(n,"bank",S)},onDragEnter:n=>{if(u)return;const o=n.currentTarget.getBoundingClientRect(),l=o.left+o.width/2;a({list:"bank",index:i,side:n.clientX>l?"right":"left"})},onDragLeave:()=>a({list:null,index:null,side:null}),onClick:()=>{u||be("bank","selected",t.id,null)},style:{padding:r||window.innerWidth<768?"6px 10px":"10px 16px",borderRadius:r||window.innerWidth<768?"6px":"10px",border:"1px solid #ccc",background:u?"#f0f0f0":"#f9f9f9",cursor:u?"not-allowed":"pointer",fontSize:r||window.innerWidth<768?"12px":"18px",borderLeft:e.list==="bank"&&e.index===i&&e.side==="left"?"3px solid #3b82f6":"1px solid #ccc",borderRight:e.list==="bank"&&e.index===i&&e.side==="right"?"3px solid #3b82f6":"1px solid #ccc",flexShrink:0,flexBasis:"auto",opacity:u?.6:1,transition:"opacity 0.3s ease"},children:t.text},t.id))}),s.jsx("div",{onDragOver:t=>t.preventDefault(),onDrop:t=>Se(t,"selected",null),style:{minHeight:r||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:r||window.innerWidth<768?"8px":"12px",padding:r||window.innerWidth<768?"8px":"12px",display:"flex",flexWrap:R()?"wrap":"nowrap",alignItems:"center",justifyContent:"center",fontSize:`${Ae(I.length)}px`,background:B==="correct"?"#e8f5e8":B==="almost"?"#fff3e0":B==="wrong"?"#ffebee":"#fafafa",overflowX:R()?"hidden":"auto",whiteSpace:R()?"normal":"nowrap"},children:I.map((t,i)=>s.jsx("span",{draggable:!u,onDragStart:n=>{if(u){n.preventDefault();return}n.dataTransfer.setData("application/x-token",JSON.stringify({from:"selected",id:t.id})),n.dataTransfer.setData("text/plain",t.id)},onDragOver:n=>n.preventDefault(),onDrop:n=>{const o=n.currentTarget.getBoundingClientRect(),l=o.left+o.width/2,S=n.clientX>l?i+1:i;a({list:null,index:null,side:null}),n.stopPropagation(),Se(n,"selected",S)},onDragEnter:n=>{if(u)return;const o=n.currentTarget.getBoundingClientRect(),l=o.left+o.width/2;a({list:"selected",index:i,side:n.clientX>l?"right":"left"})},onDragLeave:()=>a({list:null,index:null,side:null}),onClick:()=>{u||be("selected","bank",t.id,null)},title:u?"Time expired":"Click to remove back to bank",style:{padding:g()?"4px 6px":"6px 10px",margin:g()?"2px":"4px",borderRadius:g()?"4px":"8px",background:u?"#f0f0f0":"#ffe9e7",border:u?"1px solid #ccc":"1px solid #ec4c44",borderLeft:e.list==="selected"&&e.index===i&&e.side==="left"?"3px solid #3b82f6":void 0,borderRight:e.list==="selected"&&e.index===i&&e.side==="right"?"3px solid #3b82f6":void 0,cursor:u?"not-allowed":"pointer",userSelect:"none",fontSize:`${Ae(I.length)}px`,fontFamily:'"Roboto", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif',whiteSpace:"nowrap",opacity:u?.6:1,transition:"opacity 0.3s ease"},children:t.text},t.id))}),s.jsx("button",{onClick:()=>tt(!0),disabled:!u&&I.length===0,style:{marginTop:g()?"15px":"30px",fontSize:g()?"14px":"20px",padding:g()?"6px 12px":"10px 24px",borderRadius:g()?"8px":"12px",background:u||I.length>0?"#ec4c44":"#ccc",color:"white",border:"none",cursor:u||I.length>0?"pointer":"not-allowed"},children:"NEXT"})]}),at=()=>s.jsxs("div",{style:h.gmCenterScreen,children:[s.jsx("h1",{style:{...h.gmHeadline1,marginTop:(r&&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||K||q||$||ee||te||ne||ie||re,"0px"),marginBottom:r&&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||K||q||$||ee||te||ne||ie||re?"2px":"10px",fontSize:r&&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 🎯"}),s.jsxs("h2",{style:{...h.gmHeadline2,marginTop:(r&&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||K||q||$||ee||te||ne||ie||re,"0px"),marginBottom:r&&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||K||q||$||ee||te||ne||ie||re?"2px":"16px",fontSize:r&&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: ",Y," out of ",C]}),s.jsxs("p",{style:{...h.gmBodyM,color:"#10b981",marginTop:r&&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||K||q||$||ee||te||ne||ie||re?"0px":"12px",marginBottom:r&&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||K||q||$||ee||te||ne||ie||re?"2px":"16px",fontSize:r&&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: ",Q]}),s.jsxs("div",{style:{display:"flex",gap:r&&window.innerWidth>window.innerHeight||r&&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:r&&window.innerWidth>window.innerHeight||r&&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||fe?"12px":"24px"},children:[s.jsx("button",{onClick:()=>{We(),F("start"),setTimeout(()=>{j("getready"),ue(null),U(!1)},800)},style:{...h.gmButton,..._("medium")},children:"🔁 Play again"}),s.jsx("button",{onClick:()=>{F("click"),j("select"),G(null),he(null),V([]),Z(0),ce([]),U(!1)},style:{...h.gmButton,..._("medium")},children:"⬅️ Exit"})]})]}),dt=d.useMemo(()=>{let t=c;return t||(T?t=`${T.endsWith("/")?T.slice(0,-1):T}/logo.svg`:t=`${window.origin}/browser/speakid/games/magic%20sentence/logo.svg`),s.jsx("div",{style:{...h.gmLogoFixed,display:!v||r&&window.innerWidth>window.innerHeight||window.innerHeight<700?"none":"block"},children:t?s.jsx("img",{src:t,alt:"SPEAKID Logo",style:h.gmLogoImg,loading:"lazy"}):s.jsx("div",{style:h.gmLogoImg,children:"SPEAKID"})})},[r,v,c,T]);return s.jsx("div",{ref:W,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:s.jsx("div",{style:{width:r?"100%":x||1e3,height:r?"100%":x||1e3,display:"flex",justifyContent:"center",alignItems:"center",overflow:"hidden",borderRadius:r?0:"20px",background:"linear-gradient(to bottom, #fff8f8 0%, #f9fafb 100%)",boxShadow:r?"none":"0 0 40px rgba(0,0,0,0.1)",margin:r?"0 auto":"unset",position:"relative"},children:s.jsx("div",{style:{transform:"none",width:"100%",height:"100%",display:"flex",justifyContent:"center",alignItems:"center"},children:s.jsxs("div",{id:"magic-sentence-root",children:[!r&&dt,y==="select"&&nt(),y==="time"&&it(),y==="type"&&rt(),y==="getready"&&ot(),y==="play"&&st(),y==="results"&&at()]})})})})}class Ne extends d.Component{constructor(c){super(c),this.state={hasError:!1}}static getDerivedStateFromError(c){return{hasError:!0,error:c}}componentDidCatch(c,v){console.error("Game Error:",c,v),this.setState({error:c,errorInfo:v})}handleReset=()=>{this.setState({hasError:!1,error:void 0,errorInfo:void 0})};render(){return this.state.hasError?this.props.fallback?this.props.fallback:s.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:[s.jsx("h1",{style:{fontSize:"24px",marginBottom:"16px"},children:"🚨 Oops! Something went wrong"}),s.jsx("p",{style:{fontSize:"16px",marginBottom:"24px",maxWidth:"500px"},children:"The game encountered an unexpected error. Don't worry, your progress is saved!"}),s.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:c=>c.currentTarget.style.backgroundColor="#b91c1c",onMouseOut:c=>c.currentTarget.style.backgroundColor="#dc2626",children:"🔄 Restart Game"}),typeof process<"u"&&process.env.NODE_ENV==="development"&&this.state.error&&s.jsxs("details",{style:{marginTop:"20px",textAlign:"left",maxWidth:"600px"},children:[s.jsx("summary",{style:{cursor:"pointer",fontSize:"14px"},children:"Technical Details (Development Only)"}),s.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}}P.ErrorBoundary=Ne,P.announceToScreenReader=M,P.createAriaLabel=He,P.default=Be,P.handleKeyDown=Ce,P.useValidation=Pe,Object.defineProperties(P,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})}));
+  `,document.head.appendChild(f)},Le=f=>[...f].sort(()=>Math.random()-.5);function Be(f={}){const{logoUrl:c,showLogo:v=!0,baseURL:T}=f,W=d.useRef(null),{validateAllSentences:w,errors:H}=Pe(),R=()=>r||window.innerWidth<768,g=()=>r||window.innerWidth<768||window.innerWidth>=320&&window.innerWidth<=932&&window.innerHeight>=390&&window.innerHeight<=932,_=(t="medium")=>{if(!g())return{padding:"12px 24px",fontSize:"16px",minWidth:"auto"};switch(t){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"}}};d.useEffect(()=>(Me(),()=>{document.body.style.overflow=""}),[]);const[y,j]=d.useState("select"),[C,G]=d.useState(null),[de,he]=d.useState(null),[E,V]=d.useState([]),[O,me]=d.useState(0),[le,we]=d.useState([]),[I,ce]=d.useState([]),[L,X]=d.useState(20),[Y,Z]=d.useState(0),[xe,ue]=d.useState(null),[B,D]=d.useState(null),[u,U]=d.useState(!1),[Q,ye]=d.useState(Number(localStorage.getItem("magicSentenceBest"))||0),N=d.useRef(null),[e,a]=d.useState({list:null,index:null,side:null}),[r,b]=d.useState(!1),[pe,J]=d.useState(1),[x,z]=d.useState(null),[fe,ve]=d.useState(!1),[K,Fe]=d.useState(!1),[q,Ge]=d.useState(!1),[$,Ye]=d.useState(!1),[ee,Ue]=d.useState(!1),[te,Je]=d.useState(!1),[ne,Ve]=d.useState(!1),[ie,Xe]=d.useState(!1),[re,Ze]=d.useState(!1);d.useEffect(()=>{const t=()=>{const i=window.innerWidth,n=window.innerHeight,o=i<768||i===926&&n===428||i===932&&n===430,l=n<700,S=i===768&&n===1024,k=i===1024&&n===768,p=i===820&&n===1180,m=i===1180&&n===820,oe=i===540&&n===720,A=i===720&&n===540,Re=i===1024&&n===1366,lt=i===1366&&n===1024,ct=i>=1200&&n>=600&&!o;if(ve(ct),Fe(S),Ge(k),Ye(p),Ue(m),Je(oe),Ve(A),Xe(Re),Ze(lt),b(o),o)z(null),J(1);else if(l)z(null),J(1);else{const ut=Math.min(1e3,Math.min(i,n)*.9);z(ut),J(1)}};return t(),window.addEventListener("resize",t),()=>window.removeEventListener("resize",t)},[]);const be=(t,i,n,o)=>{if(u)return;let l=[...le],S=[...I];const k=t==="bank"?l:S,p=i==="bank"?l:S,m=k.findIndex(Re=>Re.id===n);if(m===-1)return;const[oe]=k.splice(m,1);let A=o;t===i&&A!==null&&A!==void 0&&A>m&&(A=A-1),A==null||A<0||A>p.length?p.push(oe):p.splice(A,0,oe),t==="bank"?l=k:S=k,i==="bank"?l=p:S=p,we(l),ce(S)},Se=(t,i,n)=>{if(t.preventDefault(),u){a({list:null,index:null,side:null});return}const o=t.dataTransfer.getData("application/x-token")||(()=>{const l=t.dataTransfer.getData("text/plain");if(!l)return"";const S=le.some(m=>m.id===l),k=I.some(m=>m.id===l),p=S?"bank":k?"selected":null;return p?JSON.stringify({from:p,id:l}):""})();if(o){try{const l=JSON.parse(o);if(!l||!l.id||!l.from)return;be(l.from,i,l.id,n)}catch{}a({list:null,index:null,side:null})}},Qe=t=>{G(t),V(Array(t).fill("")),j("time")},Ke=t=>{he(t),j("type")},qe=(t,i)=>{if(i.length>41||i&&!/^[a-zA-Z0-9\s.,!?;:'"-]*$/.test(i))return;const o=[...E];o[t]=i,V(o);const l=w(o);l.isValid||console.warn("Validation errors:",l.errors)},$e=t=>t.trim().replace(/\s+/g," "),Ae=t=>t<=3?20:t<=5?18:t<=7?16:t<=9?14:12,et=()=>{E.some(i=>i.trim().length===0)||(V(i=>i.map(n=>$e(n))),Z(0),me(0),ue(null),j("getready"))};d.useEffect(()=>{if(y==="getready"){const t=setTimeout(()=>ke(0),3e3);return()=>clearTimeout(t)}},[y]);const ke=t=>{const i=E[t];if(!i)return;const o=Le(i.trim().split(/\s+/).filter(Boolean)).map((l,S)=>({id:`${Date.now()}-${t}-${S}-${Math.random().toString(36).slice(2)}`,text:l}));we(o),ce([]),me(t),X(de||20),D(null),U(!1),j("play")};d.useEffect(()=>{if(y==="play"&&!u)if(N.current!==null&&window.clearTimeout(N.current),L>0)N.current=window.setTimeout(()=>X(t=>t-1),1e3);else{U(!0);const i=E[O].trim().split(/\s+/),n=I.map(p=>p.text),o=i.filter(p=>!n.includes(p)).length,l=n.filter(p=>!i.includes(p)).length,S=i.filter((p,m)=>p!==n[m]).length,k=o+l+S;k===0?(D("correct"),F("correct"),M("Correct! Well done!")):k===1?(D("almost"),F("half"),M("Almost correct! Just one mistake.")):(D("wrong"),F("wrong"),M("Not quite right. Keep trying!"))}return()=>{N.current!==null&&window.clearTimeout(N.current)}},[y,L,u,E,O,I]);const tt=(t=!0)=>{if(u&&t){O+1<(C||0)?ke(O+1):(j("results"),setTimeout(()=>We(),600));return}if(t&&!u){const n=E[O].trim().split(/\s+/),o=I.map(m=>m.text),l=n.filter(m=>!o.includes(m)).length,S=o.filter(m=>!n.includes(m)).length,k=n.filter((m,oe)=>m!==o[oe]).length,p=l+S+k;p===0&&L>0?(Z(m=>m+1),D("correct"),F("correct"),M("Correct! Well done!")):p===1?(Z(m=>m+.5),D("almost"),F("half"),M("Almost correct! Just one mistake.")):(D("wrong"),F("wrong"),M("Not quite right. Keep trying!")),O+1<(C||0)?setTimeout(()=>ke(O+1),800):(j("results"),setTimeout(()=>We(),600))}};d.useEffect(()=>{y==="results"&&Y>Q&&(ye(Y),localStorage.setItem("magicSentenceBest",String(Y)))},[y,Y,Q]);const F=t=>{const i=new(window.AudioContext||window.webkitAudioContext),n=i.createOscillator(),o=i.createGain();switch(n.connect(o),o.connect(i.destination),t){case"start":n.frequency.value=500;break;case"click":n.frequency.value=800;break;case"correct":n.frequency.value=1e3;break;case"half":n.frequency.value=700;break;case"wrong":n.frequency.value=200;break}o.gain.setValueAtTime(.1,i.currentTime),n.start(),n.stop(i.currentTime+.2)},We=()=>{const i=Date.now()+2500,n=["#ec4c44","#f7c948","#6fcf97","#56ccf2","#bb6bd9"],o=document.createElement("canvas"),l=o.getContext("2d");o.width=window.innerWidth,o.height=window.innerHeight,o.style.position="fixed",o.style.top="0",o.style.left="0",o.style.pointerEvents="none",document.body.appendChild(o);const S=Array.from({length:100}).map(()=>({x:Math.random()*o.width,y:Math.random()*o.height-o.height,size:6+Math.random()*6,color:n[Math.floor(Math.random()*n.length)],speed:2+Math.random()*4,tilt:Math.random()*2*Math.PI})),k=()=>{l.clearRect(0,0,o.width,o.height),S.forEach(p=>{l.fillStyle=p.color,l.beginPath(),l.ellipse(p.x,p.y,p.size,p.size/2,p.tilt,0,2*Math.PI),l.fill(),p.y+=p.speed,p.x+=Math.sin(p.tilt)}),Date.now()<i?requestAnimationFrame(k):document.body.removeChild(o)};k()},nt=()=>s.jsxs("div",{style:h.gmCenterScreen,children:[s.jsx("h1",{style:h.gmHeadline1,children:"MAGIC SENTENCE"}),s.jsx("p",{style:h.gmBodyM,children:"Select number of rounds"}),s.jsx("div",{style:{display:"flex",gap:g()?"8px":"16px",justifyContent:"center"},children:[3,4,5].map(t=>s.jsxs("button",{onClick:()=>Qe(t),style:{...h.gmButton,..._("medium")},children:[t," ROUNDS"]},t))})]}),it=()=>s.jsxs("div",{style:h.gmCenterScreen,children:[s.jsx("h1",{style:h.gmHeadline1,children:"MAGIC SENTENCE"}),s.jsx("p",{style:h.gmBodyM,children:"Select time per round"}),s.jsx("div",{style:{display:"flex",gap:g()?"8px":"16px",justifyContent:"center"},children:[15,20,30].map(t=>s.jsxs("button",{onClick:()=>Ke(t),style:{...h.gmButton,..._("medium")},children:[t,"s"]},t))})]}),rt=()=>s.jsxs("div",{style:h.gmCenterScreen,children:[s.jsxs("h2",{style:{...h.gmBodyM,marginBottom:"0px"},children:["Type down ",C," sentence",C&&C>1?"s":""," for your student"]}),s.jsx("p",{style:{...h.gmBodyS,marginBottom:"16px",marginTop:"0px",color:"#6b7280"},children:"Maximum 41 characters per sentence"}),s.jsx("div",{style:{display:"flex",flexDirection:"column",gap:12,width:"auto",minWidth:"fit-content",maxWidth:"600px"},children:E.map((t,i)=>s.jsx("input",{value:t,placeholder:`Sentence ${i+1}`,onChange:n=>qe(i,n.target.value),style:{...h.gmInput,padding:g()?"8px 12px":"12px 16px",fontSize:g()?"14px":"16px",width:"100%",textAlign:"center"}},i))}),s.jsx("button",{onClick:et,disabled:E.some(t=>t.trim().length===0),style:{...h.gmButton,marginTop:30,background:E.some(t=>t.trim().length===0)?"#ccc":"#ec4c44",cursor:E.some(t=>t.trim().length===0)?"not-allowed":"pointer",..._("large")},children:"PLAY"})]}),ot=()=>s.jsxs("div",{style:h.gmReadyWrapper,children:[s.jsx("h1",{style:{...h.gmHeadline1,fontSize:g()?"36px":"72px",color:"#ec4c44",marginBottom:"20px",animation:"pulse 1s ease-in-out infinite"},children:"GET READY"}),s.jsx("div",{style:h.gmHourglass,children:"⏳"})]}),st=()=>s.jsxs("div",{style:h.gmGameLayout,children:[s.jsxs("h2",{style:{marginBottom:g()?"5px":"10px",fontSize:g()?"16px":"20px"},children:["Round ",O+1,"/",C," — ",u?"TIME'S UP!":`Time: ${L}s`]}),s.jsx("div",{style:{width:"60%",height:g()?"8px":"14px",borderRadius:8,background:"#eee",overflow:"hidden",marginBottom:g()?"10px":"20px"},children:s.jsx("div",{style:{height:"100%",width:`${L/(de||20)*100}%`,background:L<=5?"#ec4c44":"#4caf50",transition:"width 1s linear"}})}),s.jsx("div",{onDragOver:t=>t.preventDefault(),onDrop:t=>Se(t,"bank",null),style:{display:"flex",flexWrap:R()?"wrap":"nowrap",gap:r||window.innerWidth<768?"6px":"10px",justifyContent:"center",marginBottom:r||window.innerWidth<768?"15px":"30px",padding:r||window.innerWidth<768?"5px":"10px",width:"100%",boxSizing:"border-box"},children:le.map((t,i)=>s.jsx("div",{draggable:!u,role:"button",tabIndex:u?-1:0,"aria-label":u?`Word: ${t.text} (time expired)`:He("Drag word",t.text,"to build sentence"),onDragStart:n=>{if(u){n.preventDefault();return}n.dataTransfer.setData("application/x-token",JSON.stringify({from:"bank",id:t.id})),n.dataTransfer.setData("text/plain",t.id),M(`Dragging word: ${t.text}`)},onKeyDown:n=>{u||Ce(n,()=>be("bank","selected",t.id,null))},onDragOver:n=>n.preventDefault(),onDrop:n=>{const o=n.currentTarget.getBoundingClientRect(),l=o.left+o.width/2,S=n.clientX>l?i+1:i;a({list:null,index:null,side:null}),n.stopPropagation(),Se(n,"bank",S)},onDragEnter:n=>{if(u)return;const o=n.currentTarget.getBoundingClientRect(),l=o.left+o.width/2;a({list:"bank",index:i,side:n.clientX>l?"right":"left"})},onDragLeave:()=>a({list:null,index:null,side:null}),onClick:()=>{u||be("bank","selected",t.id,null)},style:{padding:r||window.innerWidth<768?"6px 10px":"10px 16px",borderRadius:r||window.innerWidth<768?"6px":"10px",border:"1px solid #ccc",background:u?"#f0f0f0":"#f9f9f9",cursor:u?"not-allowed":"pointer",fontSize:r||window.innerWidth<768?"12px":"18px",borderLeft:e.list==="bank"&&e.index===i&&e.side==="left"?"3px solid #3b82f6":"1px solid #ccc",borderRight:e.list==="bank"&&e.index===i&&e.side==="right"?"3px solid #3b82f6":"1px solid #ccc",flexShrink:0,flexBasis:"auto",opacity:u?.6:1,transition:"opacity 0.3s ease"},children:t.text},t.id))}),s.jsx("div",{onDragOver:t=>t.preventDefault(),onDrop:t=>Se(t,"selected",null),style:{minHeight:r||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:r||window.innerWidth<768?"8px":"12px",padding:r||window.innerWidth<768?"8px":"12px",display:"flex",flexWrap:R()?"wrap":"nowrap",alignItems:"center",justifyContent:"center",fontSize:`${Ae(I.length)}px`,background:B==="correct"?"#e8f5e8":B==="almost"?"#fff3e0":B==="wrong"?"#ffebee":"#fafafa",overflowX:R()?"hidden":"auto",whiteSpace:R()?"normal":"nowrap"},children:I.map((t,i)=>s.jsx("span",{draggable:!u,onDragStart:n=>{if(u){n.preventDefault();return}n.dataTransfer.setData("application/x-token",JSON.stringify({from:"selected",id:t.id})),n.dataTransfer.setData("text/plain",t.id)},onDragOver:n=>n.preventDefault(),onDrop:n=>{const o=n.currentTarget.getBoundingClientRect(),l=o.left+o.width/2,S=n.clientX>l?i+1:i;a({list:null,index:null,side:null}),n.stopPropagation(),Se(n,"selected",S)},onDragEnter:n=>{if(u)return;const o=n.currentTarget.getBoundingClientRect(),l=o.left+o.width/2;a({list:"selected",index:i,side:n.clientX>l?"right":"left"})},onDragLeave:()=>a({list:null,index:null,side:null}),onClick:()=>{u||be("selected","bank",t.id,null)},title:u?"Time expired":"Click to remove back to bank",style:{padding:g()?"4px 6px":"6px 10px",margin:g()?"2px":"4px",borderRadius:g()?"4px":"8px",background:u?"#f0f0f0":"#ffe9e7",border:u?"1px solid #ccc":"1px solid #ec4c44",borderLeft:e.list==="selected"&&e.index===i&&e.side==="left"?"3px solid #3b82f6":void 0,borderRight:e.list==="selected"&&e.index===i&&e.side==="right"?"3px solid #3b82f6":void 0,cursor:u?"not-allowed":"pointer",userSelect:"none",fontSize:`${Ae(I.length)}px`,fontFamily:'"Roboto", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif',whiteSpace:"nowrap",opacity:u?.6:1,transition:"opacity 0.3s ease"},children:t.text},t.id))}),s.jsx("button",{onClick:()=>tt(!0),disabled:!u&&I.length===0,style:{marginTop:g()?"15px":"30px",fontSize:g()?"14px":"20px",padding:g()?"6px 12px":"10px 24px",borderRadius:g()?"8px":"12px",background:u||I.length>0?"#ec4c44":"#ccc",color:"white",border:"none",cursor:u||I.length>0?"pointer":"not-allowed"},children:"NEXT"})]}),at=()=>s.jsxs("div",{style:h.gmCenterScreen,children:[s.jsx("h1",{style:{...h.gmHeadline1,marginTop:(r&&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||K||q||$||ee||te||ne||ie||re,"0px"),marginBottom:r&&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||K||q||$||ee||te||ne||ie||re?"2px":"10px",fontSize:r&&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 🎯"}),s.jsxs("h2",{style:{...h.gmHeadline2,marginTop:(r&&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||K||q||$||ee||te||ne||ie||re,"0px"),marginBottom:r&&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||K||q||$||ee||te||ne||ie||re?"2px":"16px",fontSize:r&&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: ",Y," out of ",C]}),s.jsxs("p",{style:{...h.gmBodyM,color:"#10b981",marginTop:r&&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||K||q||$||ee||te||ne||ie||re?"0px":"12px",marginBottom:r&&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||K||q||$||ee||te||ne||ie||re?"2px":"16px",fontSize:r&&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: ",Q]}),s.jsxs("div",{style:{display:"flex",gap:r&&window.innerWidth>window.innerHeight||r&&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:r&&window.innerWidth>window.innerHeight||r&&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||fe?"12px":"24px"},children:[s.jsx("button",{onClick:()=>{We(),F("start"),setTimeout(()=>{j("getready"),ue(null),U(!1)},800)},style:{...h.gmButton,..._("medium")},children:"🔁 Play again"}),s.jsx("button",{onClick:()=>{F("click"),j("select"),G(null),he(null),V([]),Z(0),ce([]),U(!1)},style:{...h.gmButton,..._("medium")},children:"⬅️ Exit"})]})]}),dt=d.useMemo(()=>{let t=c;return t||(T?t=`${T.endsWith("/")?T.slice(0,-1):T}/logo.svg`:typeof window<"u"&&window.origin&&(t=`${window.origin}/browser/speakid/games/magic%20sentence/logo.svg`)),s.jsx("div",{style:{...h.gmLogoFixed,display:!v||r&&window.innerWidth>window.innerHeight||window.innerHeight<700?"none":"block"},children:t?s.jsx("img",{src:t,alt:"SPEAKID Logo",style:h.gmLogoImg,loading:"lazy"}):s.jsx("div",{style:h.gmLogoImg,children:"SPEAKID"})})},[r,v,c,T]);return s.jsx("div",{ref:W,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:s.jsx("div",{style:{width:r?"100%":x||1e3,height:r?"100%":x||1e3,display:"flex",justifyContent:"center",alignItems:"center",overflow:"hidden",borderRadius:r?0:"20px",background:"linear-gradient(to bottom, #fff8f8 0%, #f9fafb 100%)",boxShadow:r?"none":"0 0 40px rgba(0,0,0,0.1)",margin:r?"0 auto":"unset",position:"relative"},children:s.jsx("div",{style:{transform:"none",width:"100%",height:"100%",display:"flex",justifyContent:"center",alignItems:"center"},children:s.jsxs("div",{id:"magic-sentence-root",children:[!r&&dt,y==="select"&&nt(),y==="time"&&it(),y==="type"&&rt(),y==="getready"&&ot(),y==="play"&&st(),y==="results"&&at()]})})})})}class Ne extends d.Component{constructor(c){super(c),this.state={hasError:!1}}static getDerivedStateFromError(c){return{hasError:!0,error:c}}componentDidCatch(c,v){console.error("Game Error:",c,v),this.setState({error:c,errorInfo:v})}handleReset=()=>{this.setState({hasError:!1,error:void 0,errorInfo:void 0})};render(){return this.state.hasError?this.props.fallback?this.props.fallback:s.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:[s.jsx("h1",{style:{fontSize:"24px",marginBottom:"16px"},children:"🚨 Oops! Something went wrong"}),s.jsx("p",{style:{fontSize:"16px",marginBottom:"24px",maxWidth:"500px"},children:"The game encountered an unexpected error. Don't worry, your progress is saved!"}),s.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:c=>c.currentTarget.style.backgroundColor="#b91c1c",onMouseOut:c=>c.currentTarget.style.backgroundColor="#dc2626",children:"🔄 Restart Game"}),typeof process<"u"&&process.env.NODE_ENV==="development"&&this.state.error&&s.jsxs("details",{style:{marginTop:"20px",textAlign:"left",maxWidth:"600px"},children:[s.jsx("summary",{style:{cursor:"pointer",fontSize:"14px"},children:"Technical Details (Development Only)"}),s.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}}P.ErrorBoundary=Ne,P.announceToScreenReader=M,P.createAriaLabel=He,P.default=Be,P.handleKeyDown=Ce,P.useValidation=Pe,Object.defineProperties(P,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})}));
 //# sourceMappingURL=speakid-build-a-sentence.umd.js.map