speakid-build-a-sentence 1.0.29 → 1.0.32
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 +1 -0
- package/dist/Game.d.ts.map +1 -1
- package/dist/Game.styles.d.ts +1 -0
- package/dist/Game.styles.d.ts.map +1 -1
- package/dist/components/ErrorBoundary.d.ts +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 +343 -314
- package/dist/speakid-build-a-sentence.es.js.map +1 -1
- package/package.json +1 -1
- /package/dist/{logo.png → logo2.png} +0 -0
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":"
|
|
1
|
+
{"version":3,"file":"Game.d.ts","sourceRoot":"","sources":["../src/Game.tsx"],"names":[],"mappings":"AA4FA,MAAM,WAAW,SAAS;IACxB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED,iBAAS,aAAa,CAAC,KAAK,GAAE,SAAc,2CAkrC3C;AAED,eAAe,aAAa,CAAC"}
|
package/dist/Game.styles.d.ts
CHANGED
|
@@ -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,CAmNhD,CAAC"}
|
|
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,CAmNhD,CAAC;AAGF,OAAO,EAAE,CAAC"}
|
|
@@ -13,7 +13,7 @@ export declare class ErrorBoundary extends Component<Props, State> {
|
|
|
13
13
|
static getDerivedStateFromError(error: Error): State;
|
|
14
14
|
componentDidCatch(error: Error, errorInfo: ErrorInfo): void;
|
|
15
15
|
handleReset: () => void;
|
|
16
|
-
render(): string | number | boolean |
|
|
16
|
+
render(): string | number | boolean | import("react/jsx-runtime").JSX.Element | Iterable<React.ReactNode> | null | undefined;
|
|
17
17
|
}
|
|
18
18
|
export {};
|
|
19
19
|
//# sourceMappingURL=ErrorBoundary.d.ts.map
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const o=require("react/jsx-runtime"),
|
|
1
|
+
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const o=require("react/jsx-runtime"),a=require("react"),pt=`
|
|
2
2
|
@keyframes 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("game-keyframes")){const
|
|
34
|
+
`;if(typeof document<"u"&&!document.getElementById("game-keyframes")){const p=document.createElement("style");p.id="game-keyframes",p.innerHTML=pt,document.head.appendChild(p)}const ke={spin:{animation:"spin 1.4s linear infinite"},pulse:{animation:"pulse 0.6s ease-in-out"},shake:{animation:"shake 0.4s ease-in-out"},slideIn:{animation:"slideIn 0.3s ease-out"},bounce:{animation:"bounce 0.6s ease-in-out"},glow:{animation:"glow 1s ease-in-out infinite"}},f={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:"auto",zIndex:30,pointerEvents:"none",background:"transparent",transform:"none",willChange:"auto"},gmLogoImg:{height:"28px",width:"auto",background:"transparent",objectFit:"contain",imageRendering:"auto",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",...ke.spin},...ke},Ie=()=>{const[p,i]=a.useState([]),h=a.useCallback((v,E,N)=>{const S=[];v.trim()||S.push({type:"empty",message:"Sentence cannot be empty"}),v.length>41&&S.push({type:"length",message:`Sentence is too long (${v.length}/41 characters)`}),v&&!/^[a-zA-Z0-9\s.,!?;:'"-]*$/.test(v)&&S.push({type:"characters",message:"Only Latin characters, numbers, spaces and punctuation are allowed"});const T=N.findIndex((te,ae)=>ae!==E&&te.toLowerCase().trim()===v.toLowerCase().trim());return T!==-1&&S.push({type:"duplicate",message:`Duplicate sentence (same as sentence ${T+1})`}),i(S),{isValid:S.length===0,errors:S}},[]),A=a.useCallback(v=>{const E=[];return v.forEach((N,S)=>{const y=h(N,S,v);E.push(...y.errors.map(T=>({...T,message:`Sentence ${S+1}: ${T.message}`})))}),{isValid:E.length===0,errors:E}},[h]),H=a.useCallback(()=>{i([])},[]);return{errors:p,validateSentence:h,validateAllSentences:A,clearErrors:H}},Ce=(p,i,h)=>i&&h?`${p} word "${i}" ${h}`:i?`${p} word "${i}"`:p,Te=(p,i,h=["Enter"," "])=>{h.includes(p.key)&&(p.preventDefault(),i())},W=p=>{const i=document.createElement("div");i.setAttribute("aria-live","polite"),i.setAttribute("aria-atomic","true"),i.style.position="absolute",i.style.left="-10000px",i.style.width="1px",i.style.height="1px",i.style.overflow="hidden",document.body.appendChild(i),i.textContent=p,setTimeout(()=>{document.body.removeChild(i)},1e3)},ft=()=>{const p=document.createElement("style");p.id="magic-sentence-reset",p.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
|
-
`;const l=document.getElementById("magic-sentence-reset");l&&l.remove(),document.head.appendChild(f)},pt=f=>[...f].sort(()=>Math.random()-.5);function Ce(f={}){const{logoUrl:l,showLogo:w=!0,screenHeight:W,screenWidth:A,gameCubeSize:v}=f,M=i.useRef(null),x=()=>A??(typeof window<"u"?window.innerWidth:1920),b=()=>W??(typeof window<"u"?window.innerHeight:1080),{validateAllSentences:J,errors:H}=ve(),$=()=>{const e=x();return!!(m||e<768||e>=768&&e<1300)},y=()=>{const e=x(),n=b();return m||e<768||e>=320&&e<=932&&n>=390&&n<=932},G=(e="medium")=>{if(!y())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"}}};i.useEffect(()=>(ut(),()=>{document.documentElement.style.overflow="",document.body.style.overflow="";const e=document.getElementById("magic-sentence-reset");e&&e.remove()}),[]);const[S,j]=i.useState("select"),[R,ie]=i.useState(null),[ae,le]=i.useState(null),[C,K]=i.useState([]),[T,ce]=i.useState(0),[te,de]=i.useState([]),[k,ne]=i.useState([]),[L,ue]=i.useState(20),[X,O]=i.useState(0),[mt,pe]=i.useState(null),[N,E]=i.useState(null),[c,Y]=i.useState(!1),[fe,se]=i.useState(!1),[re,Te]=i.useState(Number(localStorage.getItem("magicSentenceBest"))||0),F=i.useRef(null),De=i.useRef(null),me=i.useRef(0),[h,z]=i.useState({list:null,id:null,side:null}),[m,je]=i.useState(!1),[Re,q]=i.useState(1),[ge,V]=i.useState(null),[Ee,ze]=i.useState(!1),[Pe,Be]=i.useState(!1),[Me,Le]=i.useState(!1),[We,Ae]=i.useState(!1),[He,$e]=i.useState(!1),[Oe,Ne]=i.useState(!1),[Ge,Xe]=i.useState(!1),[Fe,qe]=i.useState(!1),[Ve,Ue]=i.useState(!1),[gt,Je]=i.useState(!1),[xt,Ke]=i.useState(!1);i.useEffect(()=>{const e=()=>{const n=x(),t=b(),s=n<768||n===926&&t===428||n===932&&t===430,r=t<700,u=n/t>1.8,g=n===768&&t===1024,a=n===1024&&t===768,d=n===820&&t===1180,D=n===1180&&t===820,I=n===540&&t===720,ee=n===720&&t===540,ye=n===1024&&t===1366,be=n===1366&&t===1024,Se=n>=1200&&t>=600&&!s;ze(Se),Be(g),Le(a),Ae(d),$e(D),Ne(I),Xe(ee),qe(ye),Ue(be),Ke(u);const ct=s&&n>t||s||t<700||u||n===1366&&t===766||n===1366&&t===768||n===1280&&t===720||n===1440&&t===900||g||a||d||D||I||ee||ye||be||Se;if(Je(ct),je(s),v!==void 0)V(v),q(1);else if(s)V(null),q(1);else if(r)V(null),q(1);else if(u){const oe=Math.min(1e3,Math.min(n,t)*.9);V(oe),q(.85)}else{const oe=Math.min(1e3,Math.min(n,t)*.9);V(oe),q(1)}};if(e(),A===void 0&&W===void 0)return window.addEventListener("resize",e),()=>window.removeEventListener("resize",e)},[A,W,v]);const Z=(e,n,t,s)=>{if(c)return;let r=[...te],u=[...k];const g=e==="bank"?r:u,a=n==="bank"?r:u,d=g.findIndex(ee=>ee.id===t);if(d===-1)return;const[D]=g.splice(d,1);let I=s;e===n&&I!==null&&I!==void 0&&I>d&&(I=I-1),I==null||I<0||I>a.length?a.push(D):a.splice(I,0,D),e==="bank"?r=g:u=g,n==="bank"?r=a:u=a,de(r),ne(u)},U=(e,n,t)=>{if(e.preventDefault(),c){z({list:null,id:null,side:null});return}const s=e.dataTransfer.getData("application/x-token")||(()=>{const r=e.dataTransfer.getData("text/plain");if(!r)return"";const u=te.some(d=>d.id===r),g=k.some(d=>d.id===r),a=u?"bank":g?"selected":null;return a?JSON.stringify({from:a,id:r}):""})();if(s){try{const r=JSON.parse(s);if(!r||!r.id||!r.from)return;Z(r.from,n,r.id,t)}catch{}z({list:null,id:null,side:null})}},Ye=e=>{ie(e),De.current=e,K(Array(e).fill("")),j("time")},Ze=e=>{le(e),j("type")},_e=(e,n)=>{if(n.length>41||n&&!/^[a-zA-Z0-9\s.,!?;:'"-]*$/.test(n))return;const s=[...C];s[e]=n,K(s);const r=J(s);r.isValid||console.warn("Validation errors:",r.errors)},Qe=e=>e.trim().replace(/\s+/g," "),xe=e=>{const n=x(),t=n>=768&&n<1300;return e<=3?t?18:20:e<=5?t?16:18:e<=7?t?14:16:e<=9?t?12:14:e<=12?t?10:12:t?9:10},et=()=>{C.some(n=>n.trim().length===0)||(K(n=>n.map(t=>Qe(t))),O(0),ce(0),me.current=0,pe(null),j("getready"))};i.useEffect(()=>{if(S==="getready"){const e=setTimeout(()=>_(0),3e3);return()=>clearTimeout(e)}},[S]);const _=e=>{const n=C[e];if(!n)return;const s=pt(n.trim().split(/\s+/).filter(Boolean)).map((r,u)=>({id:`${Date.now()}-${e}-${u}-${Math.random().toString(36).slice(2)}`,text:r}));de(s),ne([]),ce(e),me.current=e,ue(ae||20),E(null),Y(!1),se(!1),j("play")};i.useEffect(()=>(S==="play"&&!c&&(F.current!==null&&window.clearTimeout(F.current),L>0?F.current=window.setTimeout(()=>ue(e=>e-1),1e3):Y(!0)),()=>{F.current!==null&&window.clearTimeout(F.current)}),[S,L,c]),i.useEffect(()=>{if(S==="play"&&c&&L===0){const e=C[T];if(!e){E(null);return}const n=e.trim().split(/\s+/),t=k.map(a=>a.text),s=n.filter(a=>!t.includes(a)).length,r=t.filter(a=>!n.includes(a)).length,u=n.filter((a,d)=>t.includes(a)?t[d]!==a:!1).length,g=s+r+u;g===0?(E("correct"),fe||(se(!0),O(a=>a+1)),P("correct"),B("Correct! Well done!")):g===1?(E("almost"),O(a=>a+.5),P("half"),B("Almost correct! Just one mistake.")):(E("wrong"),P("wrong"),B("Not quite right. Keep trying!"))}},[S,c,L,C,T,k,fe]);const tt=(e=!0)=>{if(e){if(c){T+1<(R||0)?_(T+1):(j("results"),setTimeout(()=>Q(),600));return}const n=C[T];if(!n){T+1<(R||0)?_(T+1):(j("results"),setTimeout(()=>Q(),600));return}const t=n.trim().split(/\s+/),s=k.map(d=>d.text),r=t.filter(d=>!s.includes(d)).length,u=s.filter(d=>!t.includes(d)).length,g=t.filter((d,D)=>s.includes(d)?s[D]!==d:!1).length,a=r+u+g;a===0?(O(d=>d+1),E("correct"),se(!0),P("correct"),B("Correct! Well done!")):a===1?(O(d=>d+.5),E("almost"),P("half"),B("Almost correct! Just one mistake.")):(E("wrong"),P("wrong"),B("Not quite right. Keep trying!")),T+1<(R||0)?setTimeout(()=>_(T+1),800):setTimeout(()=>{j("results"),setTimeout(()=>Q(),600)},800)}};i.useEffect(()=>{S==="results"&&X>re&&(Te(X),localStorage.setItem("magicSentenceBest",String(X)))},[S,X,re]);const P=e=>{const n=new(window.AudioContext||window.webkitAudioContext),t=n.createOscillator(),s=n.createGain();switch(t.connect(s),s.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}s.gain.setValueAtTime(.1,n.currentTime),t.start(),t.stop(n.currentTime+.2)},Q=()=>{const n=Date.now()+2500,t=["#ec4c44","#f7c948","#6fcf97","#56ccf2","#bb6bd9"],s=document.createElement("canvas"),r=s.getContext("2d");s.width=x(),s.height=b(),s.style.position="fixed",s.style.top="0",s.style.left="0",s.style.pointerEvents="none",document.body.appendChild(s);const u=Array.from({length:100}).map(()=>({x:Math.random()*s.width,y:Math.random()*s.height-s.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})),g=()=>{r.clearRect(0,0,s.width,s.height),u.forEach(a=>{r.fillStyle=a.color,r.beginPath(),r.ellipse(a.x,a.y,a.size,a.size/2,a.tilt,0,2*Math.PI),r.fill(),a.y+=a.speed,a.x+=Math.sin(a.tilt)}),Date.now()<n?requestAnimationFrame(g):document.body.removeChild(s)};g()},nt=()=>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:y()?"8px":"16px",justifyContent:"center"},children:[3,4,5].map(e=>o.jsxs("button",{onClick:()=>Ye(e),style:{...p.gmButton,...G("medium")},children:[e," ROUNDS"]},e))})]}),st=()=>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:y()?"8px":"16px",justifyContent:"center"},children:[15,20,30].map(e=>o.jsxs("button",{onClick:()=>Ze(e),style:{...p.gmButton,...G("medium")},children:[e,"s"]},e))})]}),rt=()=>o.jsxs("div",{style:p.gmCenterScreen,children:[o.jsxs("h2",{style:{...p.gmBodyM,marginBottom:"0px"},children:["Type down ",R," sentence",R&&R>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:C.map((e,n)=>o.jsx("input",{value:e,placeholder:`Sentence ${n+1}`,onChange:t=>_e(n,t.target.value),style:{...p.gmInput,padding:y()?"8px 12px":"12px 16px",fontSize:y()?"14px":"16px",width:"100%",textAlign:"center"}},n))}),o.jsx("button",{onClick:et,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",...G("large")},children:"PLAY"})]}),ot=()=>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:"⏳"})]}),it=()=>o.jsxs("div",{style:p.gmGameLayout,children:[o.jsxs("h2",{style:{marginBottom:y()?"5px":"10px",fontSize:y()?"16px":"20px"},children:["Round ",T+1,"/",R," — ",c?"TIME'S UP!":`Time: ${L}s`]}),o.jsx("div",{style:{width:"60%",height:y()?"8px":"14px",borderRadius:8,background:"#eee",overflow:"hidden",marginBottom:y()?"10px":"20px"},children:o.jsx("div",{style:{height:"100%",width:`${L/(ae||20)*100}%`,background:L<=5?"#ec4c44":"#4caf50",transition:"width 1s linear"}})}),o.jsx("div",{onDragOver:e=>e.preventDefault(),onDrop:e=>U(e,"bank",null),style:{display:"flex",flexWrap:$()?"wrap":"nowrap",gap:m||x()<768?"6px":"10px",justifyContent:"center",marginBottom:m||x()<768?"15px":"30px",padding:m||x()<768?"5px":"10px",width:"100%",boxSizing:"border-box"},children:te.map((e,n)=>o.jsx("div",{draggable:!c,role:"button",tabIndex:c?-1:0,"aria-label":c?`Word: ${e.text} (time expired)`:ke("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),B(`Dragging word: ${e.text}`)},onKeyDown:t=>{c||Ie(t,()=>Z("bank","selected",e.id,null))},onDragOver:t=>t.preventDefault(),onDrop:t=>{const s=t.currentTarget.getBoundingClientRect(),r=s.left+s.width/2,u=t.clientX>r?n+1:n;z({list:null,id:null,side:null}),t.stopPropagation(),U(t,"bank",u)},onDragEnter:t=>{if(c)return;const s=t.currentTarget.getBoundingClientRect(),r=s.left+s.width/2;z({list:"bank",id:e.id,side:t.clientX>r?"right":"left"})},onDragLeave:()=>z({list:null,id:null,side:null}),onClick:()=>{c||Z("bank","selected",e.id,null)},style:{padding:m||x()<768?"6px 10px":"10px 16px",borderRadius:m||x()<768?"6px":"10px",border:"1px solid #ccc",background:c?"#f0f0f0":"#f9f9f9",cursor:c?"not-allowed":h.list==="bank"&&h.id===e.id?"grabbing":"grab",fontSize:(()=>{const t=x();return m||t<768?"12px":t>=768&&t<1300?"14px":"18px"})(),...h.list==="bank"&&h.id===e.id&&h.side==="left"?{borderLeft:"3px solid #3b82f6"}:{},...h.list==="bank"&&h.id===e.id&&h.side==="right"?{borderRight:"3px solid #3b82f6"}:{},flexShrink:0,flexBasis:"auto",opacity:c?.6:1,transition:"opacity 0.3s ease, transform 0.2s ease",...h.list==="bank"&&h.id===e.id?{transform:"scale(1.05)",boxShadow:"0 2px 8px rgba(59, 130, 246, 0.3)"}:{}},children:e.text},e.id))}),o.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 s=k.length,r=1/0;t.forEach((u,g)=>{const a=u.getBoundingClientRect(),d=a.left+a.width/2,D=Math.abs(e.clientX-d);D<r&&(r=D,s=e.clientX<d?g:g+1)}),e.clientX>n.right-30&&(s=k.length),e.clientX<n.left+30&&(s=0),U(e,"selected",s)},style:{minHeight:m||x()<768?"50px":"70px",width:"auto",maxWidth:"none",minWidth:"245px",border:N==="correct"?"2px dashed #4caf50":N==="almost"?"2px dashed #ff9800":N==="wrong"?"2px dashed #f44336":"2px dashed #ccc",borderRadius:m||x()<768?"8px":"12px",padding:m||x()<768?"8px":"12px",display:"flex",flexWrap:$()?"wrap":"nowrap",alignItems:"center",justifyContent:"center",fontSize:`${xe(k.length)}px`,background:N==="correct"?"#e8f5e8":N==="almost"?"#fff3e0":N==="wrong"?"#ffebee":"#fafafa",overflowX:$()?"hidden":"auto",whiteSpace:$()?"normal":"nowrap"},children:k.map((e,n)=>o.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 s=t.currentTarget.getBoundingClientRect(),r=s.left+s.width/2,u=s.width*.25,g=t.clientX<r-u?n:t.clientX>r+u||t.clientX>r?n+1:n;z({list:null,id:null,side:null}),t.stopPropagation(),U(t,"selected",g)},onDragEnter:t=>{if(c)return;const s=t.currentTarget.getBoundingClientRect(),r=s.left+s.width/2;z({list:"selected",id:e.id,side:t.clientX>r?"right":"left"})},onDragLeave:()=>z({list:null,id:null,side:null}),onClick:()=>{c||Z("selected","bank",e.id,null)},title:c?"Time expired":"Click to remove back to bank",style:{padding:y()?"4px 6px":"6px 10px",margin:y()?"2px":"4px",borderRadius:y()?"4px":"8px",background:c?"#f0f0f0":"#ffe9e7",border:c?"1px solid #ccc":"1px solid #ec4c44",...h.list==="selected"&&h.id===e.id&&h.side==="left"?{borderLeft:"3px solid #3b82f6"}:{},...h.list==="selected"&&h.id===e.id&&h.side==="right"?{borderRight:"3px solid #3b82f6"}:{},cursor:c?"not-allowed":h.list==="selected"&&h.id===e.id?"grabbing":"grab",userSelect:"none",fontSize:`${xe(k.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",...h.list==="selected"&&h.id===e.id?{transform:"scale(1.05)",boxShadow:"0 2px 8px rgba(59, 130, 246, 0.3)"}:{}},children:e.text},e.id))}),o.jsx("button",{onClick:()=>tt(!0),disabled:!c&&k.length===0,style:{marginTop:y()?"15px":"30px",fontSize:y()?"14px":"20px",padding:y()?"6px 12px":"10px 24px",borderRadius:y()?"8px":"12px",background:c||k.length>0?"#ec4c44":"#ccc",color:"white",border:"none",cursor:c||k.length>0?"pointer":"not-allowed"},children:"NEXT"})]}),at=()=>{const e=x(),n=b(),t=m&&e>n||e===896&&n===414||e===844&&n===390||e===926&&n===428||e===932&&n===430||Pe||Me||We||He||Oe||Ge||Fe||Ve,s=m&&e<=375&&n<=667||e===896&&n===414||e===844&&n===390||e===926&&n===428||e===932&&n===430,r=e===1366&&n===766||e===1366&&n===768||e===1280&&n===720||e===1440&&n===900;return o.jsxs("div",{style:p.gmCenterScreen,children:[o.jsx("h1",{style:{...p.gmHeadline1,marginTop:"0px",marginBottom:t?"2px":"10px",fontSize:s?"32px":"clamp(28px, 4vw, 40px)"},children:"Game Over 🎯"}),o.jsxs("h2",{style:{...p.gmHeadline2,marginTop:"0px",marginBottom:t?"2px":"16px",fontSize:s?"18px":"24px"},children:["Your score: ",X," out of ",R]}),o.jsxs("p",{style:{...p.gmBodyM,color:"#10b981",marginTop:t?"0px":"12px",marginBottom:t?"2px":"16px",fontSize:s?"14px":"16px"},children:["Best score: ",re]}),o.jsxs("div",{style:{display:"flex",gap:t||m&&e<=375&&n<=667?"6px":"12px",marginTop:t||m&&e<=375&&n<=667?"2px":r||Ee?"12px":"24px"},children:[o.jsx("button",{onClick:()=>{Q(),P("start"),setTimeout(()=>{j("getready"),pe(null),Y(!1)},800)},style:{...p.gmButton,...G("medium")},children:"🔁 Play again"}),o.jsx("button",{onClick:()=>{P("click"),j("select"),ie(null),le(null),K([]),O(0),ne([]),Y(!1)},style:{...p.gmButton,...G("medium")},children:"⬅️ Exit"})]})]})},he=!m&&w,lt=i.useMemo(()=>{const e=x(),n=b();if(m&&e>n||n<700||!he)return null;const t=l||(typeof window<"u"&&window.origin?`${window.origin}/cloud/speakid/games/magic%20sentence/logo`:"/cloud/speakid/games/magic%20sentence/logo");return o.jsx("div",{style:p.gmLogoFixed,children:o.jsx("img",{src:`${t}.svg`,alt:"SPEAKID Logo",style:p.gmLogoImg,loading:"lazy"})})},[m,he,l,A,W]);return o.jsx("div",{ref:M,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:m?"100%":ge||1e3,height:m?"100%":ge||1e3,display:"flex",justifyContent:"center",alignItems:"center",overflow:"hidden",borderRadius:m?0:"20px",background:"linear-gradient(to bottom, #fff8f8 0%, #f9fafb 100%)",boxShadow:m?"none":"0 0 40px rgba(0,0,0,0.1)",margin:m?"0 auto":"unset",position:"relative",transform:`scale(${Re})`},children:[lt,o.jsx("div",{style:{transform:"translateZ(0)",width:"100%",height:"100%",display:"flex",justifyContent:"center",alignItems:"center"},children:o.jsxs("div",{id:"magic-sentence-root",children:[S==="select"?nt():null,S==="time"?st():null,S==="type"?rt():null,S==="getready"?ot():null,S==="play"?it():null,S==="results"?at():null]})})]})})}class ft extends i.Component{constructor(l){super(l),this.state={hasError:!1}}static getDerivedStateFromError(l){return{hasError:!0,error:l}}componentDidCatch(l,w){console.error("Game Error:",l,w),this.setState({error:l,errorInfo:w})}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:l=>l.currentTarget.style.backgroundColor="#b91c1c",onMouseOut:l=>l.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=ft;exports.Game=Ce;exports.announceToScreenReader=B;exports.createAriaLabel=ke;exports.default=Ce;exports.handleKeyDown=Ie;exports.useValidation=ve;
|
|
60
|
+
`;const i=document.getElementById("magic-sentence-reset");i&&i.remove(),document.head.appendChild(p)};class mt{seed;constructor(i){this.seed=i}next(){return this.seed=(this.seed*1664525+1013904223)%2**32,this.seed/2**32}random(i=0,h=1){return i+this.next()*(h-i)}randomInt(i,h){return Math.floor(this.random(i,h))}}const gt=p=>p!==void 0?new mt(p):null,xt=(p,i)=>{const h=i||{next:()=>Math.random()};return[...p].sort(()=>h.next()-.5)};function De(p={}){const{logoUrl:i,showLogo:h=!0,screenHeight:A,screenWidth:H,gameCubeSize:v,seed:E}=p,N=a.useRef(null),S=a.useMemo(()=>gt(E),[E]),y=()=>H??(typeof window<"u"?window.innerWidth:1920),T=()=>A??(typeof window<"u"?window.innerHeight:1080),{validateAllSentences:te,errors:ae}=Ie(),J=()=>{const e=y();return!!(m||e<768||e>=768&&e<1300)},b=()=>{const e=y(),n=T();return m||e<768||e>=320&&e<=932&&n>=390&&n<=932},G=(e="medium")=>{if(!b())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"}}};a.useEffect(()=>(ft(),()=>{document.documentElement.style.overflow="",document.body.style.overflow="";const e=document.getElementById("magic-sentence-reset");e&&e.remove()}),[]);const[w,j]=a.useState("select"),[z,le]=a.useState(null),[ce,de]=a.useState(null),[D,K]=a.useState([]),[R,ue]=a.useState(0),[ne,pe]=a.useState([]),[k,se]=a.useState([]),[M,fe]=a.useState(20),[X,$]=a.useState(0),[yt,me]=a.useState(null),[O,P]=a.useState(null),[d,Y]=a.useState(!1),[ge,re]=a.useState(!1),[oe,Re]=a.useState(Number(localStorage.getItem("magicSentenceBest"))||0),F=a.useRef(null),je=a.useRef(null),xe=a.useRef(0),[x,B]=a.useState({list:null,id:null,side:null}),[m,Ee]=a.useState(!1),[ze,V]=a.useState(1),[he,q]=a.useState(null),[Pe,Be]=a.useState(!1),[Le,We]=a.useState(!1),[Me,Ae]=a.useState(!1),[He,$e]=a.useState(!1),[Oe,Ne]=a.useState(!1),[Ge,Xe]=a.useState(!1),[Fe,Ve]=a.useState(!1),[qe,Ue]=a.useState(!1),[Je,Ke]=a.useState(!1),[bt,Ye]=a.useState(!1),[St,Ze]=a.useState(!1);a.useEffect(()=>{const e=()=>{const n=y(),t=T(),s=n<768||n===926&&t===428||n===932&&t===430,r=t<700,u=n/t>1.8,g=n===768&&t===1024,c=n===1024&&t===768,l=n===820&&t===1180,C=n===1180&&t===820,I=n===540&&t===720,ee=n===720&&t===540,Se=n===1024&&t===1366,we=n===1366&&t===1024,ve=n>=1200&&t>=600&&!s;Be(ve),We(g),Ae(c),$e(l),Ne(C),Xe(I),Ve(ee),Ue(Se),Ke(we),Ze(u);const ut=s&&n>t||s||t<700||u||n===1366&&t===766||n===1366&&t===768||n===1280&&t===720||n===1440&&t===900||g||c||l||C||I||ee||Se||we||ve;if(Ye(ut),Ee(s),v!==void 0)q(v),V(1);else if(s)q(null),V(1);else if(r)q(null),V(1);else if(u){const ie=Math.min(1e3,Math.min(n,t)*.9);q(ie),V(.85)}else{const ie=Math.min(1e3,Math.min(n,t)*.9);q(ie),V(1)}};if(e(),H===void 0&&A===void 0)return window.addEventListener("resize",e),()=>window.removeEventListener("resize",e)},[H,A,v]);const Z=(e,n,t,s)=>{if(d)return;let r=[...ne],u=[...k];const g=e==="bank"?r:u,c=n==="bank"?r:u,l=g.findIndex(ee=>ee.id===t);if(l===-1)return;const[C]=g.splice(l,1);let I=s;e===n&&I!==null&&I!==void 0&&I>l&&(I=I-1),I==null||I<0||I>c.length?c.push(C):c.splice(I,0,C),e==="bank"?r=g:u=g,n==="bank"?r=c:u=c,pe(r),se(u)},U=(e,n,t)=>{if(e.preventDefault(),d){B({list:null,id:null,side:null});return}const s=e.dataTransfer.getData("application/x-token")||(()=>{const r=e.dataTransfer.getData("text/plain");if(!r)return"";const u=ne.some(l=>l.id===r),g=k.some(l=>l.id===r),c=u?"bank":g?"selected":null;return c?JSON.stringify({from:c,id:r}):""})();if(s){try{const r=JSON.parse(s);if(!r||!r.id||!r.from)return;Z(r.from,n,r.id,t)}catch{}B({list:null,id:null,side:null})}},_e=e=>{le(e),je.current=e,K(Array(e).fill("")),j("time")},Qe=e=>{de(e),j("type")},et=(e,n)=>{if(n.length>41||n&&!/^[a-zA-Z0-9\s.,!?;:'"-]*$/.test(n))return;const s=[...D];s[e]=n,K(s);const r=te(s);r.isValid||console.warn("Validation errors:",r.errors)},tt=e=>e.trim().replace(/\s+/g," "),ye=e=>{const n=y(),t=n>=768&&n<1300;return e<=3?t?18:20:e<=5?t?16:18:e<=7?t?14:16:e<=9?t?12:14:e<=12?t?10:12:t?9:10},nt=()=>{D.some(n=>n.trim().length===0)||(K(n=>n.map(t=>tt(t))),$(0),ue(0),xe.current=0,me(null),j("getready"))};a.useEffect(()=>{if(w==="getready"){const e=setTimeout(()=>_(0),3e3);return()=>clearTimeout(e)}},[w]);const _=e=>{const n=D[e];if(!n)return;const s=xt(n.trim().split(/\s+/).filter(Boolean),S).map((r,u)=>{const g=S?S.random().toString(36).slice(2):Math.random().toString(36).slice(2);return{id:`${Date.now()}-${e}-${u}-${g}`,text:r}});pe(s),se([]),ue(e),xe.current=e,fe(ce||20),P(null),Y(!1),re(!1),j("play")};a.useEffect(()=>(w==="play"&&!d&&(F.current!==null&&window.clearTimeout(F.current),M>0?F.current=window.setTimeout(()=>fe(e=>e-1),1e3):Y(!0)),()=>{F.current!==null&&window.clearTimeout(F.current)}),[w,M,d]),a.useEffect(()=>{if(w==="play"&&d&&M===0){const e=D[R];if(!e){P(null);return}const n=e.trim().split(/\s+/),t=k.map(c=>c.text),s=n.filter(c=>!t.includes(c)).length,r=t.filter(c=>!n.includes(c)).length,u=n.filter((c,l)=>t.includes(c)?t[l]!==c:!1).length,g=s+r+u;g===0?(P("correct"),ge||(re(!0),$(c=>c+1)),L("correct"),W("Correct! Well done!")):g===1?(P("almost"),$(c=>c+.5),L("half"),W("Almost correct! Just one mistake.")):(P("wrong"),L("wrong"),W("Not quite right. Keep trying!"))}},[w,d,M,D,R,k,ge]);const st=(e=!0)=>{if(e){if(d){R+1<(z||0)?_(R+1):(j("results"),setTimeout(()=>Q(),600));return}const n=D[R];if(!n){R+1<(z||0)?_(R+1):(j("results"),setTimeout(()=>Q(),600));return}const t=n.trim().split(/\s+/),s=k.map(l=>l.text),r=t.filter(l=>!s.includes(l)).length,u=s.filter(l=>!t.includes(l)).length,g=t.filter((l,C)=>s.includes(l)?s[C]!==l:!1).length,c=r+u+g;c===0?($(l=>l+1),P("correct"),re(!0),L("correct"),W("Correct! Well done!")):c===1?($(l=>l+.5),P("almost"),L("half"),W("Almost correct! Just one mistake.")):(P("wrong"),L("wrong"),W("Not quite right. Keep trying!")),R+1<(z||0)?setTimeout(()=>_(R+1),800):setTimeout(()=>{j("results"),setTimeout(()=>Q(),600)},800)}};a.useEffect(()=>{w==="results"&&X>oe&&(Re(X),localStorage.setItem("magicSentenceBest",String(X)))},[w,X,oe]);const L=e=>{const n=new(window.AudioContext||window.webkitAudioContext),t=n.createOscillator(),s=n.createGain();switch(t.connect(s),s.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}s.gain.setValueAtTime(.1,n.currentTime),t.start(),t.stop(n.currentTime+.2)},Q=()=>{const n=Date.now()+2500,t=["#ec4c44","#f7c948","#6fcf97","#56ccf2","#bb6bd9"],s=document.createElement("canvas"),r=s.getContext("2d");s.width=y(),s.height=T(),s.style.position="fixed",s.style.top="0",s.style.left="0",s.style.pointerEvents="none",document.body.appendChild(s);const u=S||{random:()=>Math.random(),randomInt:(l,C)=>Math.floor(Math.random()*(C-l)+l)},g=Array.from({length:100}).map(()=>({x:u.random(0,s.width),y:u.random(0,s.height)-s.height,size:6+u.random(0,6),color:t[u.randomInt(0,t.length)],speed:2+u.random(0,4),tilt:u.random(0,2*Math.PI)})),c=()=>{r.clearRect(0,0,s.width,s.height),g.forEach(l=>{r.fillStyle=l.color,r.beginPath(),r.ellipse(l.x,l.y,l.size,l.size/2,l.tilt,0,2*Math.PI),r.fill(),l.y+=l.speed,l.x+=Math.sin(l.tilt)}),Date.now()<n?requestAnimationFrame(c):document.body.removeChild(s)};c()},rt=()=>o.jsxs("div",{style:f.gmCenterScreen,children:[o.jsx("h1",{style:f.gmHeadline1,children:"MAGIC SENTENCE"}),o.jsx("p",{style:f.gmBodyM,children:"Select number of rounds"}),o.jsx("div",{style:{display:"flex",gap:b()?"8px":"16px",justifyContent:"center"},children:[3,4,5].map(e=>o.jsxs("button",{onClick:()=>_e(e),style:{...f.gmButton,...G("medium")},children:[e," ROUNDS"]},e))})]}),ot=()=>o.jsxs("div",{style:f.gmCenterScreen,children:[o.jsx("h1",{style:f.gmHeadline1,children:"MAGIC SENTENCE"}),o.jsx("p",{style:f.gmBodyM,children:"Select time per round"}),o.jsx("div",{style:{display:"flex",gap:b()?"8px":"16px",justifyContent:"center"},children:[15,20,30].map(e=>o.jsxs("button",{onClick:()=>Qe(e),style:{...f.gmButton,...G("medium")},children:[e,"s"]},e))})]}),it=()=>o.jsxs("div",{style:f.gmCenterScreen,children:[o.jsxs("h2",{style:{...f.gmBodyM,marginBottom:"0px"},children:["Type down ",z," sentence",z&&z>1?"s":""," for your student"]}),o.jsx("p",{style:{...f.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:D.map((e,n)=>o.jsx("input",{value:e,placeholder:`Sentence ${n+1}`,onChange:t=>et(n,t.target.value),style:{...f.gmInput,padding:b()?"8px 12px":"12px 16px",fontSize:b()?"14px":"16px",width:"100%",textAlign:"center"}},n))}),o.jsx("button",{onClick:nt,disabled:D.some(e=>e.trim().length===0),style:{...f.gmButton,marginTop:30,background:D.some(e=>e.trim().length===0)?"#ccc":"#ec4c44",cursor:D.some(e=>e.trim().length===0)?"not-allowed":"pointer",...G("large")},children:"PLAY"})]}),at=()=>o.jsxs("div",{style:f.gmReadyWrapper,children:[o.jsx("h1",{style:{...f.gmHeadline1,color:"#ec4c44"},children:"GET READY"}),o.jsx("div",{style:f.gmHourglass,children:"⏳"})]}),lt=()=>o.jsxs("div",{style:f.gmGameLayout,children:[o.jsxs("h2",{style:{marginBottom:b()?"5px":"10px",fontSize:b()?"16px":"20px"},children:["Round ",R+1,"/",z," — ",d?"TIME'S UP!":`Time: ${M}s`]}),o.jsx("div",{style:{width:"60%",height:b()?"8px":"14px",borderRadius:8,background:"#eee",overflow:"hidden",marginBottom:b()?"10px":"20px"},children:o.jsx("div",{style:{height:"100%",width:`${M/(ce||20)*100}%`,background:M<=5?"#ec4c44":"#4caf50",transition:"width 1s linear"}})}),o.jsx("div",{onDragOver:e=>e.preventDefault(),onDrop:e=>U(e,"bank",null),style:{display:"flex",flexWrap:J()?"wrap":"nowrap",gap:m||y()<768?"6px":"10px",justifyContent:"center",marginBottom:m||y()<768?"15px":"30px",padding:m||y()<768?"5px":"10px",width:"100%",boxSizing:"border-box"},children:ne.map((e,n)=>o.jsx("div",{draggable:!d,role:"button",tabIndex:d?-1:0,"aria-label":d?`Word: ${e.text} (time expired)`:Ce("Drag word",e.text,"to build sentence"),onDragStart:t=>{if(d){t.preventDefault();return}t.dataTransfer.setData("application/x-token",JSON.stringify({from:"bank",id:e.id})),t.dataTransfer.setData("text/plain",e.id),W(`Dragging word: ${e.text}`)},onKeyDown:t=>{d||Te(t,()=>Z("bank","selected",e.id,null))},onDragOver:t=>t.preventDefault(),onDrop:t=>{const s=t.currentTarget.getBoundingClientRect(),r=s.left+s.width/2,u=t.clientX>r?n+1:n;B({list:null,id:null,side:null}),t.stopPropagation(),U(t,"bank",u)},onDragEnter:t=>{if(d)return;const s=t.currentTarget.getBoundingClientRect(),r=s.left+s.width/2;B({list:"bank",id:e.id,side:t.clientX>r?"right":"left"})},onDragLeave:()=>B({list:null,id:null,side:null}),onClick:()=>{d||Z("bank","selected",e.id,null)},style:{padding:m||y()<768?"6px 10px":"10px 16px",borderRadius:m||y()<768?"6px":"10px",border:"1px solid #ccc",background:d?"#f0f0f0":"#f9f9f9",cursor:d?"not-allowed":x.list==="bank"&&x.id===e.id?"grabbing":"grab",fontSize:(()=>{const t=y();return m||t<768?"12px":t>=768&&t<1300?"14px":"18px"})(),...x.list==="bank"&&x.id===e.id&&x.side==="left"?{borderLeft:"3px solid #3b82f6"}:{},...x.list==="bank"&&x.id===e.id&&x.side==="right"?{borderRight:"3px solid #3b82f6"}:{},flexShrink:0,flexBasis:"auto",opacity:d?.6:1,transition:"opacity 0.3s ease, transform 0.2s ease",...x.list==="bank"&&x.id===e.id?{transform:"scale(1.05)",boxShadow:"0 2px 8px rgba(59, 130, 246, 0.3)"}:{}},children:e.text},e.id))}),o.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 s=k.length,r=1/0;t.forEach((u,g)=>{const c=u.getBoundingClientRect(),l=c.left+c.width/2,C=Math.abs(e.clientX-l);C<r&&(r=C,s=e.clientX<l?g:g+1)}),e.clientX>n.right-30&&(s=k.length),e.clientX<n.left+30&&(s=0),U(e,"selected",s)},style:{minHeight:m||y()<768?"50px":"70px",width:"auto",maxWidth:"none",minWidth:"245px",border:O==="correct"?"2px dashed #4caf50":O==="almost"?"2px dashed #ff9800":O==="wrong"?"2px dashed #f44336":"2px dashed #ccc",borderRadius:m||y()<768?"8px":"12px",padding:m||y()<768?"8px":"12px",display:"flex",flexWrap:J()?"wrap":"nowrap",alignItems:"center",justifyContent:"center",fontSize:`${ye(k.length)}px`,background:O==="correct"?"#e8f5e8":O==="almost"?"#fff3e0":O==="wrong"?"#ffebee":"#fafafa",overflowX:J()?"hidden":"auto",whiteSpace:J()?"normal":"nowrap"},children:k.map((e,n)=>o.jsx("span",{draggable:!d,onDragStart:t=>{if(d){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 s=t.currentTarget.getBoundingClientRect(),r=s.left+s.width/2,u=s.width*.25,g=t.clientX<r-u?n:t.clientX>r+u||t.clientX>r?n+1:n;B({list:null,id:null,side:null}),t.stopPropagation(),U(t,"selected",g)},onDragEnter:t=>{if(d)return;const s=t.currentTarget.getBoundingClientRect(),r=s.left+s.width/2;B({list:"selected",id:e.id,side:t.clientX>r?"right":"left"})},onDragLeave:()=>B({list:null,id:null,side:null}),onClick:()=>{d||Z("selected","bank",e.id,null)},title:d?"Time expired":"Click to remove back to bank",style:{padding:b()?"4px 6px":"6px 10px",margin:b()?"2px":"4px",borderRadius:b()?"4px":"8px",background:d?"#f0f0f0":"#ffe9e7",border:d?"1px solid #ccc":"1px solid #ec4c44",...x.list==="selected"&&x.id===e.id&&x.side==="left"?{borderLeft:"3px solid #3b82f6"}:{},...x.list==="selected"&&x.id===e.id&&x.side==="right"?{borderRight:"3px solid #3b82f6"}:{},cursor:d?"not-allowed":x.list==="selected"&&x.id===e.id?"grabbing":"grab",userSelect:"none",fontSize:`${ye(k.length)}px`,fontFamily:'"Roboto", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif',whiteSpace:"nowrap",opacity:d?.6:1,transition:"opacity 0.3s ease, transform 0.2s ease",...x.list==="selected"&&x.id===e.id?{transform:"scale(1.05)",boxShadow:"0 2px 8px rgba(59, 130, 246, 0.3)"}:{}},children:e.text},e.id))}),o.jsx("button",{onClick:()=>st(!0),disabled:!d&&k.length===0,style:{marginTop:b()?"15px":"30px",fontSize:b()?"14px":"20px",padding:b()?"6px 12px":"10px 24px",borderRadius:b()?"8px":"12px",background:d||k.length>0?"#ec4c44":"#ccc",color:"white",border:"none",cursor:d||k.length>0?"pointer":"not-allowed"},children:"NEXT"})]}),ct=()=>{const e=y(),n=T(),t=m&&e>n||e===896&&n===414||e===844&&n===390||e===926&&n===428||e===932&&n===430||Le||Me||He||Oe||Ge||Fe||qe||Je,s=m&&e<=375&&n<=667||e===896&&n===414||e===844&&n===390||e===926&&n===428||e===932&&n===430,r=e===1366&&n===766||e===1366&&n===768||e===1280&&n===720||e===1440&&n===900;return o.jsxs("div",{style:f.gmCenterScreen,children:[o.jsx("h1",{style:{...f.gmHeadline1,marginTop:"0px",marginBottom:t?"2px":"10px",fontSize:s?"32px":"clamp(28px, 4vw, 40px)"},children:"Game Over 🎯"}),o.jsxs("h2",{style:{...f.gmHeadline2,marginTop:"0px",marginBottom:t?"2px":"16px",fontSize:s?"18px":"24px"},children:["Your score: ",X," out of ",z]}),o.jsxs("p",{style:{...f.gmBodyM,color:"#10b981",marginTop:t?"0px":"12px",marginBottom:t?"2px":"16px",fontSize:s?"14px":"16px"},children:["Best score: ",oe]}),o.jsxs("div",{style:{display:"flex",gap:t||m&&e<=375&&n<=667?"6px":"12px",marginTop:t||m&&e<=375&&n<=667?"2px":r||Pe?"12px":"24px"},children:[o.jsx("button",{onClick:()=>{Q(),L("start"),setTimeout(()=>{j("getready"),me(null),Y(!1)},800)},style:{...f.gmButton,...G("medium")},children:"🔁 Play again"}),o.jsx("button",{onClick:()=>{L("click"),j("select"),le(null),de(null),K([]),$(0),se([]),Y(!1)},style:{...f.gmButton,...G("medium")},children:"⬅️ Exit"})]})]})},be=!m&&h,dt=a.useMemo(()=>{const e=y(),n=T(),t=e>=1200&&e<=1400;if(m&&e>n||n<700&&!t||!be)return null;const s=i||(typeof window<"u"&&window.origin?`${window.origin}/cloud/speakid/games/magic%20sentence/logo`:"/cloud/speakid/games/magic%20sentence/logo");return o.jsx("div",{style:f.gmLogoFixed,children:o.jsx("img",{src:`${s}.svg`,alt:"SPEAKID Logo",style:f.gmLogoImg,loading:"lazy"})})},[m,be,i,H,A]);return o.jsx("div",{ref:N,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:m?"100%":he||1e3,height:m?"100%":he||1e3,display:"flex",justifyContent:"center",alignItems:"center",overflow:"hidden",borderRadius:m?0:"20px",background:"linear-gradient(to bottom, #fff8f8 0%, #f9fafb 100%)",boxShadow:m?"none":"0 0 40px rgba(0,0,0,0.1)",margin:m?"0 auto":"unset",position:"relative",transform:`scale(${ze})`},children:[dt,o.jsx("div",{style:{transform:"translateZ(0)",width:"100%",height:"100%",display:"flex",justifyContent:"center",alignItems:"center"},children:o.jsxs("div",{id:"magic-sentence-root",children:[w==="select"?rt():null,w==="time"?ot():null,w==="type"?it():null,w==="getready"?at():null,w==="play"?lt():null,w==="results"?ct():null]})})]})})}class ht extends a.Component{constructor(i){super(i),this.state={hasError:!1}}static getDerivedStateFromError(i){return{hasError:!0,error:i}}componentDidCatch(i,h){console.error("Game Error:",i,h),this.setState({error:i,errorInfo:h})}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:i=>i.currentTarget.style.backgroundColor="#b91c1c",onMouseOut:i=>i.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=ht;exports.Game=De;exports.announceToScreenReader=W;exports.createAriaLabel=Ce;exports.default=De;exports.handleKeyDown=Te;exports.useValidation=Ie;
|
|
61
61
|
//# sourceMappingURL=speakid-build-a-sentence.cjs.js.map
|