speakid-build-a-sentence 1.0.18 → 1.0.19
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 +0 -1
- package/dist/Game.d.ts.map +1 -1
- package/dist/Game.styles.d.ts.map +1 -1
- package/dist/speakid-build-a-sentence.cjs.js +3 -3
- package/dist/speakid-build-a-sentence.cjs.js.map +1 -1
- package/dist/speakid-build-a-sentence.es.js +259 -249
- package/dist/speakid-build-a-sentence.es.js.map +1 -1
- package/package.json +1 -1
package/dist/Game.d.ts
CHANGED
package/dist/Game.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Game.d.ts","sourceRoot":"","sources":["../src/Game.tsx"],"names":[],"mappings":"AA2DA,MAAM,WAAW,SAAS;IACxB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"Game.d.ts","sourceRoot":"","sources":["../src/Game.tsx"],"names":[],"mappings":"AA2DA,MAAM,WAAW,SAAS;IACxB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,iBAAS,aAAa,CAAC,KAAK,GAAE,SAAc,2CA89B3C;AAED,eAAe,aAAa,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Game.styles.d.ts","sourceRoot":"","sources":["../src/Game.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAoEtC,eAAO,MAAM,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,aAAa,
|
|
1
|
+
{"version":3,"file":"Game.styles.d.ts","sourceRoot":"","sources":["../src/Game.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAoEtC,eAAO,MAAM,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,aAAa,CAuNhD,CAAC"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const o=require("react/jsx-runtime"),s=require("react"),
|
|
1
|
+
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const o=require("react/jsx-runtime"),s=require("react"),Ue=`
|
|
2
2
|
@keyframes magic-sentence-spin {
|
|
3
3
|
from { transform: rotate(0deg); }
|
|
4
4
|
to { transform: rotate(360deg); }
|
|
@@ -31,7 +31,7 @@
|
|
|
31
31
|
0%, 100% { box-shadow: 0 0 5px rgba(76, 175, 80, 0.5); }
|
|
32
32
|
50% { box-shadow: 0 0 20px rgba(76, 175, 80, 0.8), 0 0 30px rgba(76, 175, 80, 0.6); }
|
|
33
33
|
}
|
|
34
|
-
`;if(typeof document<"u"&&!document.getElementById("magic-sentence-keyframes")){const
|
|
34
|
+
`;if(typeof document<"u"&&!document.getElementById("magic-sentence-keyframes")){const g=document.createElement("style");g.id="magic-sentence-keyframes",g.innerHTML=Ue,document.head.appendChild(g)}const fe={spin:{animation:"magic-sentence-spin 1.4s linear infinite"},pulse:{animation:"magic-sentence-pulse 0.6s ease-in-out"},shake:{animation:"magic-sentence-shake 0.4s ease-in-out"},slideIn:{animation:"magic-sentence-slideIn 0.3s ease-out"},bounce:{animation:"magic-sentence-bounce 0.6s ease-in-out"},glow:{animation:"magic-sentence-glow 1s ease-in-out infinite"}},p={gmCenterScreen:{position:"relative",zIndex:1,minHeight:"100%",width:"100%",display:"flex",flexDirection:"column",justifyContent:"center",alignItems:"center",textAlign:"center",color:"#1f2937",padding:"24px 16px",boxSizing:"border-box",transform:"translateY(20px)"},gmHeadline1:{fontWeight:700,fontSize:"clamp(28px, 4vw, 40px)",lineHeight:"110%"},gmHeadline2:{fontWeight:600,fontSize:"24px",lineHeight:"120%"},gmBodyM:{fontWeight:400,fontSize:"16px",lineHeight:"140%"},gmBodyS:{fontWeight:400,fontSize:"14px",lineHeight:"140%",color:"#6b7280"},gmButton:{fontFamily:'"Geist", system-ui, -apple-system, "Segoe UI", Roboto, Arial, "Noto Sans"',fontWeight:600,fontSize:"16px",padding:"10px 16px",borderRadius:"12px",border:"1px solid #e5e7eb",background:"#ec4c44",color:"#ffffff",cursor:"pointer",boxShadow:"0 6px 18px rgba(236, 76, 68, .18)",transition:"transform .06s ease, box-shadow .2s ease, background .2s ease, opacity .2s ease"},gmGameLayout:{position:"relative",width:"100%",maxWidth:"none",minHeight:"100%",display:"flex",flexDirection:"column",alignItems:"center",justifyContent:"center",textAlign:"center",color:"#1f2937",padding:"16px 8px",margin:"0 auto"},gmInput:{padding:"6px 10px",borderRadius:"6px",border:"1px solid #ccc",fontSize:"16px",fontFamily:'"Geist", system-ui',width:"160px"},gmLogoFixed:{position:"absolute",top:"16px",left:"16px",width:"120px",zIndex:30,pointerEvents:"none",background:"transparent",transform:"none",willChange:"auto"},gmLogoImg:{height:"clamp(28px, 5vw, 40px)",width:"auto",background:"transparent",objectFit:"contain",imageRendering:"auto",transform:"translateZ(0)",backfaceVisibility:"hidden",WebkitFontSmoothing:"antialiased",display:"block"},gmLogoFallback:{height:"clamp(28px, 5vw, 40px)",width:"auto",background:"transparent",backgroundImage:"url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAwIiBoZWlnaHQ9IjQwIiB2aWV3Qm94PSIwIDAgMTAwIDQwIiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgo8dGV4dCB4PSI1MCIgeT0iMjUiIGZvbnQtZmFtaWx5PSJBcmlhbCwgc2Fucy1zZXJpZiIgZm9udC1zaXplPSIyMCIgZm9udC13ZWlnaHQ9ImJvbGQiIGZpbGw9IiNlYzRjNDQiIHRleHQtYW5jaG9yPSJtaWRkbGUiPlNQRUFLSUQ8L3RleHQ+Cjwvc3ZnPgo=')",backgroundSize:"contain",backgroundRepeat:"no-repeat",backgroundPosition:"center",transform:"translateZ(0)",backfaceVisibility:"hidden",WebkitFontSmoothing:"antialiased",display:"block"},gmReadyWrapper:{display:"flex",flexDirection:"column",alignItems:"center",justifyContent:"center",height:"60%",gap:"16px"},gmHourglass:{fontSize:"42px",...fe.spin},...fe},xe=()=>{const[g,a]=s.useState([]),b=s.useCallback((k,H,w)=>{const m=[];k.trim()||m.push({type:"empty",message:"Sentence cannot be empty"}),k.length>41&&m.push({type:"length",message:`Sentence is too long (${k.length}/41 characters)`}),k&&!/^[a-zA-Z0-9\s.,!?;:'"-]*$/.test(k)&&m.push({type:"characters",message:"Only Latin characters, numbers, spaces and punctuation are allowed"});const y=w.findIndex((C,V)=>V!==H&&C.toLowerCase().trim()===k.toLowerCase().trim());return y!==-1&&m.push({type:"duplicate",message:`Duplicate sentence (same as sentence ${y+1})`}),a(m),{isValid:m.length===0,errors:m}},[]),K=s.useCallback(k=>{const H=[];return k.forEach((w,m)=>{const x=b(w,m,k);H.push(...x.errors.map(y=>({...y,message:`Sentence ${m+1}: ${y.message}`})))}),{isValid:H.length===0,errors:H}},[b]),_=s.useCallback(()=>{a([])},[]);return{errors:g,validateSentence:b,validateAllSentences:K,clearErrors:_}},ye=(g,a,b)=>a&&b?`${g} word "${a}" ${b}`:a?`${g} word "${a}"`:g,be=(g,a,b=["Enter"," "])=>{b.includes(g.key)&&(g.preventDefault(),a())},P=g=>{const a=document.createElement("div");a.setAttribute("aria-live","polite"),a.setAttribute("aria-atomic","true"),a.style.position="absolute",a.style.left="-10000px",a.style.width="1px",a.style.height="1px",a.style.overflow="hidden",document.body.appendChild(a),a.textContent=g,setTimeout(()=>{document.body.removeChild(a)},1e3)},Ye=()=>{const g=document.createElement("style");g.id="magic-sentence-reset";const a=document.getElementById("magic-sentence-reset");a&&a.remove(),g.textContent=`
|
|
35
35
|
#magic-sentence-root, #magic-sentence-root * {
|
|
36
36
|
box-sizing: border-box;
|
|
37
37
|
font-family: "Geist", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
|
|
@@ -57,5 +57,5 @@
|
|
|
57
57
|
height: 100% !important;
|
|
58
58
|
overflow: hidden !important;
|
|
59
59
|
}
|
|
60
|
-
`,document.head.appendChild(u)},_e=u=>[...u].sort(()=>Math.random()-.5);function We(u={}){const{logoUrl:a,showLogo:x=!0,baseURL:E}=u,_=s.useRef(null),{validateAllSentences:S,errors:z}=ye(),I=()=>l||window.innerWidth<768,g=()=>l||window.innerWidth<768||window.innerWidth>=320&&window.innerWidth<=932&&window.innerHeight>=390&&window.innerHeight<=932,C=(e="medium")=>{if(!g())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(()=>(Ke(),()=>{document.documentElement.style.overflow="",document.body.style.overflow="";const e=document.getElementById("magic-sentence-reset");e&&e.remove()}),[]);const[m,v]=s.useState("select"),[H,le]=s.useState(null),[ce,ge]=s.useState(null),[k,U]=s.useState([]),[j,pe]=s.useState(0),[ee,ue]=s.useState([]),[W,ne]=s.useState([]),[B,he]=s.useState(20),[X,V]=s.useState(0),[nn,we]=s.useState(null),[M,R]=s.useState(null),[c,q]=s.useState(!1),[te,ve]=s.useState(Number(localStorage.getItem("magicSentenceBest"))||0),J=s.useRef(null),[y,D]=s.useState({list:null,index:null,side:null}),[l,ke]=s.useState(!1),[tn,ie]=s.useState(1),[me,oe]=s.useState(null),[He,Ie]=s.useState(!1),[L,Ce]=s.useState(!1),[A,je]=s.useState(!1),[$,De]=s.useState(!1),[G,Te]=s.useState(!1),[N,Pe]=s.useState(!1),[O,Re]=s.useState(!1),[F,Ee]=s.useState(!1),[Z,ze]=s.useState(!1);s.useEffect(()=>{const e=()=>{const t=window.innerWidth,n=window.innerHeight,i=t<768||t===926&&n===428||t===932&&n===430,r=n<700,w=t===768&&n===1024,f=t===1024&&n===768,d=t===820&&n===1180,h=t===1180&&n===820,Q=t===540&&n===720,b=t===720&&n===540,de=t===1024&&n===1366,Ue=t===1366&&n===1024,Ve=t>=1200&&n>=600&&!i;if(Ie(Ve),Ce(w),je(f),De(d),Te(h),Pe(Q),Re(b),Ee(de),ze(Ue),ke(i),i)oe(null),ie(1);else if(r)oe(null),ie(1);else{const qe=Math.min(1e3,Math.min(t,n)*.9);oe(qe),ie(1)}};return e(),window.addEventListener("resize",e),()=>window.removeEventListener("resize",e)},[]);const Y=(e,t,n,i)=>{if(c)return;let r=[...ee],w=[...W];const f=e==="bank"?r:w,d=t==="bank"?r:w,h=f.findIndex(de=>de.id===n);if(h===-1)return;const[Q]=f.splice(h,1);let b=i;e===t&&b!==null&&b!==void 0&&b>h&&(b=b-1),b==null||b<0||b>d.length?d.push(Q):d.splice(b,0,Q),e==="bank"?r=f:w=f,t==="bank"?r=d:w=d,ue(r),ne(w)},K=(e,t,n)=>{if(e.preventDefault(),c){D({list:null,index:null,side:null});return}const i=e.dataTransfer.getData("application/x-token")||(()=>{const r=e.dataTransfer.getData("text/plain");if(!r)return"";const w=ee.some(h=>h.id===r),f=W.some(h=>h.id===r),d=w?"bank":f?"selected":null;return d?JSON.stringify({from:d,id:r}):""})();if(i){try{const r=JSON.parse(i);if(!r||!r.id||!r.from)return;Y(r.from,t,r.id,n)}catch{}D({list:null,index:null,side:null})}},Be=e=>{le(e),U(Array(e).fill("")),v("time")},Me=e=>{ge(e),v("type")},Le=(e,t)=>{if(t.length>41||t&&!/^[a-zA-Z0-9\s.,!?;:'"-]*$/.test(t))return;const i=[...k];i[e]=t,U(i);const r=S(i);r.isValid||console.warn("Validation errors:",r.errors)},Ae=e=>e.trim().replace(/\s+/g," "),fe=e=>e<=3?20:e<=5?18:e<=7?16:e<=9?14:12,$e=()=>{k.some(t=>t.trim().length===0)||(U(t=>t.map(n=>Ae(n))),V(0),pe(0),we(null),v("getready"))};s.useEffect(()=>{if(m==="getready"){const e=setTimeout(()=>re(0),3e3);return()=>clearTimeout(e)}},[m]);const re=e=>{const t=k[e];if(!t)return;const i=_e(t.trim().split(/\s+/).filter(Boolean)).map((r,w)=>({id:`${Date.now()}-${e}-${w}-${Math.random().toString(36).slice(2)}`,text:r}));ue(i),ne([]),pe(e),he(ce||20),R(null),q(!1),v("play")};s.useEffect(()=>{if(m==="play"&&!c)if(J.current!==null&&window.clearTimeout(J.current),B>0)J.current=window.setTimeout(()=>he(e=>e-1),1e3);else{q(!0);const t=k[j].trim().split(/\s+/),n=W.map(d=>d.text),i=t.filter(d=>!n.includes(d)).length,r=n.filter(d=>!t.includes(d)).length,w=t.filter((d,h)=>d!==n[h]).length,f=i+r+w;f===0?(R("correct"),T("correct"),P("Correct! Well done!")):f===1?(R("almost"),T("half"),P("Almost correct! Just one mistake.")):(R("wrong"),T("wrong"),P("Not quite right. Keep trying!"))}return()=>{J.current!==null&&window.clearTimeout(J.current)}},[m,B,c,k,j,W]);const Ge=(e=!0)=>{if(c&&e){j+1<(H||0)?re(j+1):(v("results"),setTimeout(()=>se(),600));return}if(e&&!c){const n=k[j].trim().split(/\s+/),i=W.map(h=>h.text),r=n.filter(h=>!i.includes(h)).length,w=i.filter(h=>!n.includes(h)).length,f=n.filter((h,Q)=>h!==i[Q]).length,d=r+w+f;d===0&&B>0?(V(h=>h+1),R("correct"),T("correct"),P("Correct! Well done!")):d===1?(V(h=>h+.5),R("almost"),T("half"),P("Almost correct! Just one mistake.")):(R("wrong"),T("wrong"),P("Not quite right. Keep trying!")),j+1<(H||0)?setTimeout(()=>re(j+1),800):(v("results"),setTimeout(()=>se(),600))}};s.useEffect(()=>{m==="results"&&X>te&&(ve(X),localStorage.setItem("magicSentenceBest",String(X)))},[m,X,te]);const T=e=>{const t=new(window.AudioContext||window.webkitAudioContext),n=t.createOscillator(),i=t.createGain();switch(n.connect(i),i.connect(t.destination),e){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}i.gain.setValueAtTime(.1,t.currentTime),n.start(),n.stop(t.currentTime+.2)},se=()=>{const t=Date.now()+2500,n=["#ec4c44","#f7c948","#6fcf97","#56ccf2","#bb6bd9"],i=document.createElement("canvas"),r=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 w=Array.from({length:100}).map(()=>({x:Math.random()*i.width,y:Math.random()*i.height-i.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})),f=()=>{r.clearRect(0,0,i.width,i.height),w.forEach(d=>{r.fillStyle=d.color,r.beginPath(),r.ellipse(d.x,d.y,d.size,d.size/2,d.tilt,0,2*Math.PI),r.fill(),d.y+=d.speed,d.x+=Math.sin(d.tilt)}),Date.now()<t?requestAnimationFrame(f):document.body.removeChild(i)};f()},Ne=()=>o.jsxs("div",{style:p.gmCenterScreen,children:[o.jsx("h1",{style:p.gmHeadline1,children:"MAGIC SENTENCE"}),o.jsx("p",{style:p.gmBodyM,children:"Select number of rounds"}),o.jsx("div",{style:{display:"flex",gap:g()?"8px":"16px",justifyContent:"center"},children:[3,4,5].map(e=>o.jsxs("button",{onClick:()=>Be(e),style:{...p.gmButton,...C("medium")},children:[e," ROUNDS"]},e))})]}),Oe=()=>o.jsxs("div",{style:p.gmCenterScreen,children:[o.jsx("h1",{style:p.gmHeadline1,children:"MAGIC SENTENCE"}),o.jsx("p",{style:p.gmBodyM,children:"Select time per round"}),o.jsx("div",{style:{display:"flex",gap:g()?"8px":"16px",justifyContent:"center"},children:[15,20,30].map(e=>o.jsxs("button",{onClick:()=>Me(e),style:{...p.gmButton,...C("medium")},children:[e,"s"]},e))})]}),Fe=()=>o.jsxs("div",{style:p.gmCenterScreen,children:[o.jsxs("h2",{style:{...p.gmBodyM,marginBottom:"0px"},children:["Type down ",H," sentence",H&&H>1?"s":""," for your student"]}),o.jsx("p",{style:{...p.gmBodyS,marginBottom:"16px",marginTop:"0px",color:"#6b7280"},children:"Maximum 41 characters per sentence"}),o.jsx("div",{style:{display:"flex",flexDirection:"column",gap:12,width:"auto",minWidth:"fit-content",maxWidth:"600px"},children:k.map((e,t)=>o.jsx("input",{value:e,placeholder:`Sentence ${t+1}`,onChange:n=>Le(t,n.target.value),style:{...p.gmInput,padding:g()?"8px 12px":"12px 16px",fontSize:g()?"14px":"16px",width:"100%",textAlign:"center"}},t))}),o.jsx("button",{onClick:$e,disabled:k.some(e=>e.trim().length===0),style:{...p.gmButton,marginTop:30,background:k.some(e=>e.trim().length===0)?"#ccc":"#ec4c44",cursor:k.some(e=>e.trim().length===0)?"not-allowed":"pointer",...C("large")},children:"PLAY"})]}),Ze=()=>o.jsxs("div",{style:p.gmReadyWrapper,children:[o.jsx("h1",{style:{...p.gmHeadline1,color:"#ec4c44"},children:"GET READY"}),o.jsx("div",{style:p.gmHourglass,children:"⏳"})]}),Qe=()=>o.jsxs("div",{style:p.gmGameLayout,children:[o.jsxs("h2",{style:{marginBottom:g()?"5px":"10px",fontSize:g()?"16px":"20px"},children:["Round ",j+1,"/",H," — ",c?"TIME'S UP!":`Time: ${B}s`]}),o.jsx("div",{style:{width:"60%",height:g()?"8px":"14px",borderRadius:8,background:"#eee",overflow:"hidden",marginBottom:g()?"10px":"20px"},children:o.jsx("div",{style:{height:"100%",width:`${B/(ce||20)*100}%`,background:B<=5?"#ec4c44":"#4caf50",transition:"width 1s linear"}})}),o.jsx("div",{onDragOver:e=>e.preventDefault(),onDrop:e=>K(e,"bank",null),style:{display:"flex",flexWrap:I()?"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:ee.map((e,t)=>o.jsx("div",{draggable:!c,role:"button",tabIndex:c?-1:0,"aria-label":c?`Word: ${e.text} (time expired)`:be("Drag word",e.text,"to build sentence"),onDragStart:n=>{if(c){n.preventDefault();return}n.dataTransfer.setData("application/x-token",JSON.stringify({from:"bank",id:e.id})),n.dataTransfer.setData("text/plain",e.id),P(`Dragging word: ${e.text}`)},onKeyDown:n=>{c||Se(n,()=>Y("bank","selected",e.id,null))},onDragOver:n=>n.preventDefault(),onDrop:n=>{const i=n.currentTarget.getBoundingClientRect(),r=i.left+i.width/2,w=n.clientX>r?t+1:t;D({list:null,index:null,side:null}),n.stopPropagation(),K(n,"bank",w)},onDragEnter:n=>{if(c)return;const i=n.currentTarget.getBoundingClientRect(),r=i.left+i.width/2;D({list:"bank",index:t,side:n.clientX>r?"right":"left"})},onDragLeave:()=>D({list:null,index:null,side:null}),onClick:()=>{c||Y("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":"pointer",fontSize:l||window.innerWidth<768?"12px":"18px",borderLeft:y.list==="bank"&&y.index===t&&y.side==="left"?"3px solid #3b82f6":"1px solid #ccc",borderRight:y.list==="bank"&&y.index===t&&y.side==="right"?"3px solid #3b82f6":"1px solid #ccc",flexShrink:0,flexBasis:"auto",opacity:c?.6:1,transition:"opacity 0.3s ease"},children:e.text},e.id))}),o.jsx("div",{onDragOver:e=>e.preventDefault(),onDrop:e=>K(e,"selected",null),style:{minHeight:l||window.innerWidth<768?"50px":"70px",width:"auto",maxWidth:"none",minWidth:"245px",border:M==="correct"?"2px dashed #4caf50":M==="almost"?"2px dashed #ff9800":M==="wrong"?"2px dashed #f44336":"2px dashed #ccc",borderRadius:l||window.innerWidth<768?"8px":"12px",padding:l||window.innerWidth<768?"8px":"12px",display:"flex",flexWrap:I()?"wrap":"nowrap",alignItems:"center",justifyContent:"center",fontSize:`${fe(W.length)}px`,background:M==="correct"?"#e8f5e8":M==="almost"?"#fff3e0":M==="wrong"?"#ffebee":"#fafafa",overflowX:I()?"hidden":"auto",whiteSpace:I()?"normal":"nowrap"},children:W.map((e,t)=>o.jsx("span",{draggable:!c,onDragStart:n=>{if(c){n.preventDefault();return}n.dataTransfer.setData("application/x-token",JSON.stringify({from:"selected",id:e.id})),n.dataTransfer.setData("text/plain",e.id)},onDragOver:n=>n.preventDefault(),onDrop:n=>{const i=n.currentTarget.getBoundingClientRect(),r=i.left+i.width/2,w=n.clientX>r?t+1:t;D({list:null,index:null,side:null}),n.stopPropagation(),K(n,"selected",w)},onDragEnter:n=>{if(c)return;const i=n.currentTarget.getBoundingClientRect(),r=i.left+i.width/2;D({list:"selected",index:t,side:n.clientX>r?"right":"left"})},onDragLeave:()=>D({list:null,index:null,side:null}),onClick:()=>{c||Y("selected","bank",e.id,null)},title:c?"Time expired":"Click to remove back to bank",style:{padding:g()?"4px 6px":"6px 10px",margin:g()?"2px":"4px",borderRadius:g()?"4px":"8px",background:c?"#f0f0f0":"#ffe9e7",border:c?"1px solid #ccc":"1px solid #ec4c44",borderLeft:y.list==="selected"&&y.index===t&&y.side==="left"?"3px solid #3b82f6":void 0,borderRight:y.list==="selected"&&y.index===t&&y.side==="right"?"3px solid #3b82f6":void 0,cursor:c?"not-allowed":"pointer",userSelect:"none",fontSize:`${fe(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"},children:e.text},e.id))}),o.jsx("button",{onClick:()=>Ge(!0),disabled:!c&&W.length===0,style:{marginTop:g()?"15px":"30px",fontSize:g()?"14px":"20px",padding:g()?"6px 12px":"10px 24px",borderRadius:g()?"8px":"12px",background:c||W.length>0?"#ec4c44":"#ccc",color:"white",border:"none",cursor:c||W.length>0?"pointer":"not-allowed"},children:"NEXT"})]}),Xe=()=>o.jsxs("div",{style:p.gmCenterScreen,children:[o.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||L||A||$||G||N||O||F||Z,"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||L||A||$||G||N||O||F||Z?"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 🎯"}),o.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||L||A||$||G||N||O||F||Z,"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||L||A||$||G||N||O||F||Z?"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: ",X," out of ",H]}),o.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||L||A||$||G||N||O||F||Z?"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||L||A||$||G||N||O||F||Z?"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: ",te]}),o.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||He?"12px":"24px"},children:[o.jsx("button",{onClick:()=>{se(),T("start"),setTimeout(()=>{v("getready"),we(null),q(!1)},800)},style:{...p.gmButton,...C("medium")},children:"🔁 Play again"}),o.jsx("button",{onClick:()=>{T("click"),v("select"),le(null),ge(null),U([]),V(0),ne([]),q(!1)},style:{...p.gmButton,...C("medium")},children:"⬅️ Exit"})]})]}),ae=a||(E?`${E.endsWith("/")?E.slice(0,-1):E}/logo.svg`:typeof window<"u"&&window.origin?`${window.origin}/browser/speakid/games/magic%20sentence/logo.svg`:null),Je=!l&&x&&!(window.innerWidth>window.innerHeight)&&window.innerHeight>=700;return o.jsx("div",{ref:_,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:o.jsxs("div",{style:{width:l?"100%":me||1e3,height:l?"100%":me||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"},children:[!l&&Je&&o.jsx("div",{style:{...p.gmLogoFixed,position:"absolute",top:16,left:16,zIndex:30},children:ae?o.jsxs("picture",{children:[o.jsx("source",{srcSet:ae,type:"image/svg+xml"}),o.jsx("img",{src:ae.replace(".svg",".png"),alt:"SPEAKID Logo",style:p.gmLogoImg,loading:"lazy"})]}):o.jsx("div",{style:p.gmLogoImg,children:"SPEAKID"})}),o.jsx("div",{style:{transform:"none",width:"100%",height:"100%",display:"flex",justifyContent:"center",alignItems:"center"},children:o.jsxs("div",{id:"magic-sentence-root",children:[m==="select"?Ne():null,m==="time"?Oe():null,m==="type"?Fe():null,m==="getready"?Ze():null,m==="play"?Qe():null,m==="results"?Xe():null]})})]})})}class en extends s.Component{constructor(a){super(a),this.state={hasError:!1}}static getDerivedStateFromError(a){return{hasError:!0,error:a}}componentDidCatch(a,x){console.error("Game Error:",a,x),this.setState({error:a,errorInfo:x})}handleReset=()=>{this.setState({hasError:!1,error:void 0,errorInfo:void 0})};render(){return this.state.hasError?this.props.fallback?this.props.fallback:o.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:[o.jsx("h1",{style:{fontSize:"24px",marginBottom:"16px"},children:"🚨 Oops! Something went wrong"}),o.jsx("p",{style:{fontSize:"16px",marginBottom:"24px",maxWidth:"500px"},children:"The game encountered an unexpected error. Don't worry, your progress is saved!"}),o.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:a=>a.currentTarget.style.backgroundColor="#b91c1c",onMouseOut:a=>a.currentTarget.style.backgroundColor="#dc2626",children:"🔄 Restart Game"}),typeof process<"u"&&process.env.NODE_ENV==="development"&&this.state.error&&o.jsxs("details",{style:{marginTop:"20px",textAlign:"left",maxWidth:"600px"},children:[o.jsx("summary",{style:{cursor:"pointer",fontSize:"14px"},children:"Technical Details (Development Only)"}),o.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=en;exports.Game=We;exports.announceToScreenReader=P;exports.createAriaLabel=be;exports.default=We;exports.handleKeyDown=Se;exports.useValidation=ye;
|
|
60
|
+
`,document.head.appendChild(g)},Ke=g=>[...g].sort(()=>Math.random()-.5);function Se(g={}){const{logoUrl:a,showLogo:b=!0}=g,K=s.useRef(null),{validateAllSentences:_,errors:k}=xe(),H=()=>c||window.innerWidth<768,w=()=>c||window.innerWidth<768||window.innerWidth>=320&&window.innerWidth<=932&&window.innerHeight>=390&&window.innerHeight<=932,m=(e="medium")=>{if(!w())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(()=>(Ye(),()=>{document.documentElement.style.overflow="",document.body.style.overflow="";const e=document.getElementById("magic-sentence-reset");e&&e.remove()}),[]);const[x,y]=s.useState("select"),[C,V]=s.useState(null),[le,ce]=s.useState(null),[I,X]=s.useState([]),[j,pe]=s.useState(0),[ee,ge]=s.useState([]),[v,ne]=s.useState([]),[E,ue]=s.useState(20),[Z,J]=s.useState(0),[en,he]=s.useState(null),[z,R]=s.useState(null),[l,q]=s.useState(!1),[te,We]=s.useState(Number(localStorage.getItem("magicSentenceBest"))||0),Q=s.useRef(null),[S,D]=s.useState({list:null,index:null,side:null}),[c,ve]=s.useState(!1),[nn,ie]=s.useState(1),[we,oe]=s.useState(null),[ke,He]=s.useState(!1),[B,Ie]=s.useState(!1),[M,Ce]=s.useState(!1),[L,je]=s.useState(!1),[A,De]=s.useState(!1),[G,Te]=s.useState(!1),[$,Pe]=s.useState(!1),[N,Re]=s.useState(!1),[O,Ee]=s.useState(!1);s.useEffect(()=>{const e=()=>{const t=window.innerWidth,n=window.innerHeight,i=t<768||t===926&&n===428||t===932&&n===430,r=n<700,h=t===768&&n===1024,f=t===1024&&n===768,d=t===820&&n===1180,u=t===1180&&n===820,F=t===540&&n===720,W=t===720&&n===540,de=t===1024&&n===1366,Xe=t===1366&&n===1024,Je=t>=1200&&n>=600&&!i;if(He(Je),Ie(h),Ce(f),je(d),De(u),Te(F),Pe(W),Re(de),Ee(Xe),ve(i),i)oe(null),ie(1);else if(r)oe(null),ie(1);else{const qe=Math.min(1e3,Math.min(t,n)*.9);oe(qe),ie(1)}};return e(),window.addEventListener("resize",e),()=>window.removeEventListener("resize",e)},[]);const U=(e,t,n,i)=>{if(l)return;let r=[...ee],h=[...v];const f=e==="bank"?r:h,d=t==="bank"?r:h,u=f.findIndex(de=>de.id===n);if(u===-1)return;const[F]=f.splice(u,1);let W=i;e===t&&W!==null&&W!==void 0&&W>u&&(W=W-1),W==null||W<0||W>d.length?d.push(F):d.splice(W,0,F),e==="bank"?r=f:h=f,t==="bank"?r=d:h=d,ge(r),ne(h)},Y=(e,t,n)=>{if(e.preventDefault(),l){D({list:null,index:null,side:null});return}const i=e.dataTransfer.getData("application/x-token")||(()=>{const r=e.dataTransfer.getData("text/plain");if(!r)return"";const h=ee.some(u=>u.id===r),f=v.some(u=>u.id===r),d=h?"bank":f?"selected":null;return d?JSON.stringify({from:d,id:r}):""})();if(i){try{const r=JSON.parse(i);if(!r||!r.id||!r.from)return;U(r.from,t,r.id,n)}catch{}D({list:null,index:null,side:null})}},ze=e=>{V(e),X(Array(e).fill("")),y("time")},Be=e=>{ce(e),y("type")},Me=(e,t)=>{if(t.length>41||t&&!/^[a-zA-Z0-9\s.,!?;:'"-]*$/.test(t))return;const i=[...I];i[e]=t,X(i);const r=_(i);r.isValid||console.warn("Validation errors:",r.errors)},Le=e=>e.trim().replace(/\s+/g," "),me=e=>e<=3?20:e<=5?18:e<=7?16:e<=9?14:12,Ae=()=>{I.some(t=>t.trim().length===0)||(X(t=>t.map(n=>Le(n))),J(0),pe(0),he(null),y("getready"))};s.useEffect(()=>{if(x==="getready"){const e=setTimeout(()=>re(0),3e3);return()=>clearTimeout(e)}},[x]);const re=e=>{const t=I[e];if(!t)return;const i=Ke(t.trim().split(/\s+/).filter(Boolean)).map((r,h)=>({id:`${Date.now()}-${e}-${h}-${Math.random().toString(36).slice(2)}`,text:r}));ge(i),ne([]),pe(e),ue(le||20),R(null),q(!1),y("play")};s.useEffect(()=>{if(x==="play"&&!l)if(Q.current!==null&&window.clearTimeout(Q.current),E>0)Q.current=window.setTimeout(()=>ue(e=>e-1),1e3);else{q(!0);const t=I[j].trim().split(/\s+/),n=v.map(d=>d.text),i=t.filter(d=>!n.includes(d)).length,r=n.filter(d=>!t.includes(d)).length,h=t.filter((d,u)=>d!==n[u]).length,f=i+r+h;f===0?(R("correct"),T("correct"),P("Correct! Well done!")):f===1?(R("almost"),T("half"),P("Almost correct! Just one mistake.")):(R("wrong"),T("wrong"),P("Not quite right. Keep trying!"))}return()=>{Q.current!==null&&window.clearTimeout(Q.current)}},[x,E,l,I,j,v]);const Ge=(e=!0)=>{if(l&&e){j+1<(C||0)?re(j+1):(y("results"),setTimeout(()=>se(),600));return}if(e&&!l){const n=I[j].trim().split(/\s+/),i=v.map(u=>u.text),r=n.filter(u=>!i.includes(u)).length,h=i.filter(u=>!n.includes(u)).length,f=n.filter((u,F)=>u!==i[F]).length,d=r+h+f;d===0&&E>0?(J(u=>u+1),R("correct"),T("correct"),P("Correct! Well done!")):d===1?(J(u=>u+.5),R("almost"),T("half"),P("Almost correct! Just one mistake.")):(R("wrong"),T("wrong"),P("Not quite right. Keep trying!")),j+1<(C||0)?setTimeout(()=>re(j+1),800):(y("results"),setTimeout(()=>se(),600))}};s.useEffect(()=>{x==="results"&&Z>te&&(We(Z),localStorage.setItem("magicSentenceBest",String(Z)))},[x,Z,te]);const T=e=>{const t=new(window.AudioContext||window.webkitAudioContext),n=t.createOscillator(),i=t.createGain();switch(n.connect(i),i.connect(t.destination),e){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}i.gain.setValueAtTime(.1,t.currentTime),n.start(),n.stop(t.currentTime+.2)},se=()=>{const t=Date.now()+2500,n=["#ec4c44","#f7c948","#6fcf97","#56ccf2","#bb6bd9"],i=document.createElement("canvas"),r=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:n[Math.floor(Math.random()*n.length)],speed:2+Math.random()*4,tilt:Math.random()*2*Math.PI})),f=()=>{r.clearRect(0,0,i.width,i.height),h.forEach(d=>{r.fillStyle=d.color,r.beginPath(),r.ellipse(d.x,d.y,d.size,d.size/2,d.tilt,0,2*Math.PI),r.fill(),d.y+=d.speed,d.x+=Math.sin(d.tilt)}),Date.now()<t?requestAnimationFrame(f):document.body.removeChild(i)};f()},$e=()=>o.jsxs("div",{style:p.gmCenterScreen,children:[o.jsx("h1",{style:p.gmHeadline1,children:"MAGIC SENTENCE"}),o.jsx("p",{style:p.gmBodyM,children:"Select number of rounds"}),o.jsx("div",{style:{display:"flex",gap:w()?"8px":"16px",justifyContent:"center"},children:[3,4,5].map(e=>o.jsxs("button",{onClick:()=>ze(e),style:{...p.gmButton,...m("medium")},children:[e," ROUNDS"]},e))})]}),Ne=()=>o.jsxs("div",{style:p.gmCenterScreen,children:[o.jsx("h1",{style:p.gmHeadline1,children:"MAGIC SENTENCE"}),o.jsx("p",{style:p.gmBodyM,children:"Select time per round"}),o.jsx("div",{style:{display:"flex",gap:w()?"8px":"16px",justifyContent:"center"},children:[15,20,30].map(e=>o.jsxs("button",{onClick:()=>Be(e),style:{...p.gmButton,...m("medium")},children:[e,"s"]},e))})]}),Oe=()=>o.jsxs("div",{style:p.gmCenterScreen,children:[o.jsxs("h2",{style:{...p.gmBodyM,marginBottom:"0px"},children:["Type down ",C," sentence",C&&C>1?"s":""," for your student"]}),o.jsx("p",{style:{...p.gmBodyS,marginBottom:"16px",marginTop:"0px",color:"#6b7280"},children:"Maximum 41 characters per sentence"}),o.jsx("div",{style:{display:"flex",flexDirection:"column",gap:12,width:"auto",minWidth:"fit-content",maxWidth:"600px"},children:I.map((e,t)=>o.jsx("input",{value:e,placeholder:`Sentence ${t+1}`,onChange:n=>Me(t,n.target.value),style:{...p.gmInput,padding:w()?"8px 12px":"12px 16px",fontSize:w()?"14px":"16px",width:"100%",textAlign:"center"}},t))}),o.jsx("button",{onClick:Ae,disabled:I.some(e=>e.trim().length===0),style:{...p.gmButton,marginTop:30,background:I.some(e=>e.trim().length===0)?"#ccc":"#ec4c44",cursor:I.some(e=>e.trim().length===0)?"not-allowed":"pointer",...m("large")},children:"PLAY"})]}),Fe=()=>o.jsxs("div",{style:p.gmReadyWrapper,children:[o.jsx("h1",{style:{...p.gmHeadline1,color:"#ec4c44"},children:"GET READY"}),o.jsx("div",{style:p.gmHourglass,children:"⏳"})]}),Ze=()=>o.jsxs("div",{style:p.gmGameLayout,children:[o.jsxs("h2",{style:{marginBottom:w()?"5px":"10px",fontSize:w()?"16px":"20px"},children:["Round ",j+1,"/",C," — ",l?"TIME'S UP!":`Time: ${E}s`]}),o.jsx("div",{style:{width:"60%",height:w()?"8px":"14px",borderRadius:8,background:"#eee",overflow:"hidden",marginBottom:w()?"10px":"20px"},children:o.jsx("div",{style:{height:"100%",width:`${E/(le||20)*100}%`,background:E<=5?"#ec4c44":"#4caf50",transition:"width 1s linear"}})}),o.jsx("div",{onDragOver:e=>e.preventDefault(),onDrop:e=>Y(e,"bank",null),style:{display:"flex",flexWrap:H()?"wrap":"nowrap",gap:c||window.innerWidth<768?"6px":"10px",justifyContent:"center",marginBottom:c||window.innerWidth<768?"15px":"30px",padding:c||window.innerWidth<768?"5px":"10px",width:"100%",boxSizing:"border-box"},children:ee.map((e,t)=>o.jsx("div",{draggable:!l,role:"button",tabIndex:l?-1:0,"aria-label":l?`Word: ${e.text} (time expired)`:ye("Drag word",e.text,"to build sentence"),onDragStart:n=>{if(l){n.preventDefault();return}n.dataTransfer.setData("application/x-token",JSON.stringify({from:"bank",id:e.id})),n.dataTransfer.setData("text/plain",e.id),P(`Dragging word: ${e.text}`)},onKeyDown:n=>{l||be(n,()=>U("bank","selected",e.id,null))},onDragOver:n=>n.preventDefault(),onDrop:n=>{const i=n.currentTarget.getBoundingClientRect(),r=i.left+i.width/2,h=n.clientX>r?t+1:t;D({list:null,index:null,side:null}),n.stopPropagation(),Y(n,"bank",h)},onDragEnter:n=>{if(l)return;const i=n.currentTarget.getBoundingClientRect(),r=i.left+i.width/2;D({list:"bank",index:t,side:n.clientX>r?"right":"left"})},onDragLeave:()=>D({list:null,index:null,side:null}),onClick:()=>{l||U("bank","selected",e.id,null)},style:{padding:c||window.innerWidth<768?"6px 10px":"10px 16px",borderRadius:c||window.innerWidth<768?"6px":"10px",border:"1px solid #ccc",background:l?"#f0f0f0":"#f9f9f9",cursor:l?"not-allowed":"pointer",fontSize:c||window.innerWidth<768?"12px":"18px",borderLeft:S.list==="bank"&&S.index===t&&S.side==="left"?"3px solid #3b82f6":"1px solid #ccc",borderRight:S.list==="bank"&&S.index===t&&S.side==="right"?"3px solid #3b82f6":"1px solid #ccc",flexShrink:0,flexBasis:"auto",opacity:l?.6:1,transition:"opacity 0.3s ease"},children:e.text},e.id))}),o.jsx("div",{onDragOver:e=>e.preventDefault(),onDrop:e=>Y(e,"selected",null),style:{minHeight:c||window.innerWidth<768?"50px":"70px",width:"auto",maxWidth:"none",minWidth:"245px",border:z==="correct"?"2px dashed #4caf50":z==="almost"?"2px dashed #ff9800":z==="wrong"?"2px dashed #f44336":"2px dashed #ccc",borderRadius:c||window.innerWidth<768?"8px":"12px",padding:c||window.innerWidth<768?"8px":"12px",display:"flex",flexWrap:H()?"wrap":"nowrap",alignItems:"center",justifyContent:"center",fontSize:`${me(v.length)}px`,background:z==="correct"?"#e8f5e8":z==="almost"?"#fff3e0":z==="wrong"?"#ffebee":"#fafafa",overflowX:H()?"hidden":"auto",whiteSpace:H()?"normal":"nowrap"},children:v.map((e,t)=>o.jsx("span",{draggable:!l,onDragStart:n=>{if(l){n.preventDefault();return}n.dataTransfer.setData("application/x-token",JSON.stringify({from:"selected",id:e.id})),n.dataTransfer.setData("text/plain",e.id)},onDragOver:n=>n.preventDefault(),onDrop:n=>{const i=n.currentTarget.getBoundingClientRect(),r=i.left+i.width/2,h=n.clientX>r?t+1:t;D({list:null,index:null,side:null}),n.stopPropagation(),Y(n,"selected",h)},onDragEnter:n=>{if(l)return;const i=n.currentTarget.getBoundingClientRect(),r=i.left+i.width/2;D({list:"selected",index:t,side:n.clientX>r?"right":"left"})},onDragLeave:()=>D({list:null,index:null,side:null}),onClick:()=>{l||U("selected","bank",e.id,null)},title:l?"Time expired":"Click to remove back to bank",style:{padding:w()?"4px 6px":"6px 10px",margin:w()?"2px":"4px",borderRadius:w()?"4px":"8px",background:l?"#f0f0f0":"#ffe9e7",border:l?"1px solid #ccc":"1px solid #ec4c44",borderLeft:S.list==="selected"&&S.index===t&&S.side==="left"?"3px solid #3b82f6":void 0,borderRight:S.list==="selected"&&S.index===t&&S.side==="right"?"3px solid #3b82f6":void 0,cursor:l?"not-allowed":"pointer",userSelect:"none",fontSize:`${me(v.length)}px`,fontFamily:'"Roboto", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif',whiteSpace:"nowrap",opacity:l?.6:1,transition:"opacity 0.3s ease"},children:e.text},e.id))}),o.jsx("button",{onClick:()=>Ge(!0),disabled:!l&&v.length===0,style:{marginTop:w()?"15px":"30px",fontSize:w()?"14px":"20px",padding:w()?"6px 12px":"10px 24px",borderRadius:w()?"8px":"12px",background:l||v.length>0?"#ec4c44":"#ccc",color:"white",border:"none",cursor:l||v.length>0?"pointer":"not-allowed"},children:"NEXT"})]}),Qe=()=>o.jsxs("div",{style:p.gmCenterScreen,children:[o.jsx("h1",{style:{...p.gmHeadline1,marginTop:(c&&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||B||M||L||A||G||$||N||O,"0px"),marginBottom:c&&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||B||M||L||A||G||$||N||O?"2px":"10px",fontSize:c&&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 🎯"}),o.jsxs("h2",{style:{...p.gmHeadline2,marginTop:(c&&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||B||M||L||A||G||$||N||O,"0px"),marginBottom:c&&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||B||M||L||A||G||$||N||O?"2px":"16px",fontSize:c&&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: ",Z," out of ",C]}),o.jsxs("p",{style:{...p.gmBodyM,color:"#10b981",marginTop:c&&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||B||M||L||A||G||$||N||O?"0px":"12px",marginBottom:c&&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||B||M||L||A||G||$||N||O?"2px":"16px",fontSize:c&&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: ",te]}),o.jsxs("div",{style:{display:"flex",gap:c&&window.innerWidth>window.innerHeight||c&&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:c&&window.innerWidth>window.innerHeight||c&&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||ke?"12px":"24px"},children:[o.jsx("button",{onClick:()=>{se(),T("start"),setTimeout(()=>{y("getready"),he(null),q(!1)},800)},style:{...p.gmButton,...m("medium")},children:"🔁 Play again"}),o.jsx("button",{onClick:()=>{T("click"),y("select"),V(null),ce(null),X([]),J(0),ne([]),q(!1)},style:{...p.gmButton,...m("medium")},children:"⬅️ Exit"})]})]}),ae=a||(typeof window<"u"&&window.origin?`${window.origin}/cloud/speakid/games/magic%20sentence/logo.svg`:null),Ve=!c&&b;return o.jsx("div",{ref:K,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:o.jsxs("div",{style:{width:c?"100%":we||1e3,height:c?"100%":we||1e3,display:"flex",justifyContent:"center",alignItems:"center",overflow:"hidden",borderRadius:c?0:"20px",background:"linear-gradient(to bottom, #fff8f8 0%, #f9fafb 100%)",boxShadow:c?"none":"0 0 40px rgba(0,0,0,0.1)",margin:c?"0 auto":"unset",position:"relative"},children:[Ve?o.jsx("div",{style:{...p.gmLogoFixed,position:"absolute",top:16,left:16,zIndex:30},children:ae?o.jsxs("picture",{children:[o.jsx("source",{srcSet:ae,type:"image/svg+xml"}),o.jsx("img",{src:ae.replace(".svg",".png"),alt:"SPEAKID Logo",style:p.gmLogoImg,loading:"lazy"})]}):o.jsx("div",{style:p.gmLogoFallback,children:"SPEAKID"})}):null,o.jsx("div",{style:{transform:"none",width:"100%",height:"100%",display:"flex",justifyContent:"center",alignItems:"center"},children:o.jsxs("div",{id:"magic-sentence-root",children:[x==="select"?$e():null,x==="time"?Ne():null,x==="type"?Oe():null,x==="getready"?Fe():null,x==="play"?Ze():null,x==="results"?Qe():null]})})]})})}class _e extends s.Component{constructor(a){super(a),this.state={hasError:!1}}static getDerivedStateFromError(a){return{hasError:!0,error:a}}componentDidCatch(a,b){console.error("Game Error:",a,b),this.setState({error:a,errorInfo:b})}handleReset=()=>{this.setState({hasError:!1,error:void 0,errorInfo:void 0})};render(){return this.state.hasError?this.props.fallback?this.props.fallback:o.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:[o.jsx("h1",{style:{fontSize:"24px",marginBottom:"16px"},children:"🚨 Oops! Something went wrong"}),o.jsx("p",{style:{fontSize:"16px",marginBottom:"24px",maxWidth:"500px"},children:"The game encountered an unexpected error. Don't worry, your progress is saved!"}),o.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:a=>a.currentTarget.style.backgroundColor="#b91c1c",onMouseOut:a=>a.currentTarget.style.backgroundColor="#dc2626",children:"🔄 Restart Game"}),typeof process<"u"&&process.env.NODE_ENV==="development"&&this.state.error&&o.jsxs("details",{style:{marginTop:"20px",textAlign:"left",maxWidth:"600px"},children:[o.jsx("summary",{style:{cursor:"pointer",fontSize:"14px"},children:"Technical Details (Development Only)"}),o.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=_e;exports.Game=Se;exports.announceToScreenReader=P;exports.createAriaLabel=ye;exports.default=Se;exports.handleKeyDown=be;exports.useValidation=xe;
|
|
61
61
|
//# sourceMappingURL=speakid-build-a-sentence.cjs.js.map
|