speakid-build-a-sentence 1.0.0 → 1.0.2
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/README.md +5 -4
- package/dist/Game.d.ts +1 -1
- package/dist/Game.d.ts.map +1 -1
- package/dist/components/ErrorBoundary.d.ts +1 -1
- package/dist/index.d.ts +4 -1
- package/dist/index.d.ts.map +1 -1
- package/dist/speakid-build-a-sentence.es.js +449 -449
- package/dist/speakid-build-a-sentence.es.js.map +1 -1
- package/dist/speakid-build-a-sentence.umd.js +6 -6
- package/dist/speakid-build-a-sentence.umd.js.map +1 -1
- package/package.json +3 -3
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
(function(
|
|
1
|
+
(function(T,d){typeof exports=="object"&&typeof module<"u"?d(exports,require("react")):typeof define=="function"&&define.amd?define(["exports","react"],d):(T=typeof globalThis<"u"?globalThis:T||self,d(T.SpeakidBuildASentence={},T.React))})(this,(function(T,d){"use strict";var he={exports:{}},se={};/**
|
|
2
2
|
* @license React
|
|
3
3
|
* react-jsx-runtime.production.js
|
|
4
4
|
*
|
|
@@ -6,7 +6,7 @@
|
|
|
6
6
|
*
|
|
7
7
|
* This source code is licensed under the MIT license found in the
|
|
8
8
|
* LICENSE file in the root directory of this source tree.
|
|
9
|
-
*/var
|
|
9
|
+
*/var Ee;function _e(){if(Ee)return se;Ee=1;var f=Symbol.for("react.transitional.element"),c=Symbol.for("react.fragment");function v(j,W,w){var H=null;if(w!==void 0&&(H=""+w),W.key!==void 0&&(H=""+W.key),"key"in W){w={};for(var R in W)R!=="key"&&(w[R]=W[R])}else w=W;return W=w.ref,{$$typeof:f,type:j,key:H,ref:W!==void 0?W:null,props:w}}return se.Fragment=c,se.jsx=v,se.jsxs=v,se}var ae={};/**
|
|
10
10
|
* @license React
|
|
11
11
|
* react-jsx-runtime.development.js
|
|
12
12
|
*
|
|
@@ -14,12 +14,12 @@
|
|
|
14
14
|
*
|
|
15
15
|
* This source code is licensed under the MIT license found in the
|
|
16
16
|
* LICENSE file in the root directory of this source tree.
|
|
17
|
-
*/var
|
|
17
|
+
*/var Te;function Oe(){return Te||(Te=1,process.env.NODE_ENV!=="production"&&(function(){function f(e){if(e==null)return null;if(typeof e=="function")return e.$$typeof===Z?null:e.displayName||e.name||null;if(typeof e=="string")return e;switch(e){case E:return"Fragment";case O:return"Profiler";case V:return"StrictMode";case P:return"Suspense";case ce:return"SuspenseList";case Y:return"Activity"}if(typeof e=="object")switch(typeof e.tag=="number"&&console.error("Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."),e.$$typeof){case ge:return"Portal";case le:return e.displayName||"Context";case me:return(e._context.displayName||"Context")+".Consumer";case we:var a=e.render;return e=e.displayName,e||(e=a.displayName||a.name||"",e=e!==""?"ForwardRef("+e+")":"ForwardRef"),e;case L:return a=e.displayName||null,a!==null?a:f(e.type)||"Memo";case X:a=e._payload,e=e._init;try{return f(e(a))}catch{}}return null}function c(e){return""+e}function v(e){try{c(e);var a=!1}catch{a=!0}if(a){a=console;var r=a.error,b=typeof Symbol=="function"&&Symbol.toStringTag&&e[Symbol.toStringTag]||e.constructor.name||"Object";return r.call(a,"The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",b),c(e)}}function j(e){if(e===E)return"<>";if(typeof e=="object"&&e!==null&&e.$$typeof===X)return"<...>";try{var a=f(e);return a?"<"+a+">":"<...>"}catch{return"<...>"}}function W(){var e=xe.A;return e===null?null:e.getOwner()}function w(){return Error("react-stack-top-frame")}function H(e){if(ue.call(e,"key")){var a=Object.getOwnPropertyDescriptor(e,"key").get;if(a&&a.isReactWarning)return!1}return e.key!==void 0}function R(e,a){function r(){u||(u=!0,console.error("%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://react.dev/link/special-props)",a))}r.isReactWarning=!0,Object.defineProperty(e,"key",{get:r,configurable:!0})}function h(){var e=f(this.type);return U[e]||(U[e]=!0,console.error("Accessing element.ref was removed in React 19. ref is now a regular prop. It will be removed from the JSX Element type in a future release.")),e=this.props.ref,e!==void 0?e:null}function _(e,a,r,b,pe,J){var x=r.ref;return e={$$typeof:de,type:e,key:a,props:r,_owner:b},(x!==void 0?x:null)!==null?Object.defineProperty(e,"ref",{enumerable:!1,get:h}):Object.defineProperty(e,"ref",{enumerable:!1,value:null}),e._store={},Object.defineProperty(e._store,"validated",{configurable:!1,enumerable:!1,writable:!0,value:0}),Object.defineProperty(e,"_debugInfo",{configurable:!1,enumerable:!1,writable:!0,value:null}),Object.defineProperty(e,"_debugStack",{configurable:!1,enumerable:!1,writable:!0,value:pe}),Object.defineProperty(e,"_debugTask",{configurable:!1,enumerable:!1,writable:!0,value:J}),Object.freeze&&(Object.freeze(e.props),Object.freeze(e)),e}function y(e,a,r,b,pe,J){var x=a.children;if(x!==void 0)if(b)if(B(x)){for(b=0;b<x.length;b++)I(x[b]);Object.freeze&&Object.freeze(x)}else console.error("React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead.");else I(x);if(ue.call(a,"key")){x=f(e);var z=Object.keys(a).filter(function(ve){return ve!=="key"});b=0<z.length?"{key: someKey, "+z.join(": ..., ")+": ...}":"{key: someKey}",N[x+b]||(z=0<z.length?"{"+z.join(": ..., ")+": ...}":"{}",console.error(`A props object containing a "key" prop is being spread into JSX:
|
|
18
18
|
let props = %s;
|
|
19
19
|
<%s {...props} />
|
|
20
20
|
React keys must be passed directly to JSX without using spread:
|
|
21
21
|
let props = %s;
|
|
22
|
-
<%s key={someKey} {...props} />`,
|
|
22
|
+
<%s key={someKey} {...props} />`,b,x,z,x),N[x+b]=!0)}if(x=null,r!==void 0&&(v(r),x=""+r),H(a)&&(v(a.key),x=""+a.key),"key"in a){r={};for(var fe in a)fe!=="key"&&(r[fe]=a[fe])}else r=a;return x&&R(r,typeof e=="function"?e.displayName||e.name||"Unknown":e),_(e,x,r,W(),pe,J)}function I(e){C(e)?e._store&&(e._store.validated=1):typeof e=="object"&&e!==null&&e.$$typeof===X&&(e._payload.status==="fulfilled"?C(e._payload.value)&&e._payload.value._store&&(e._payload.value._store.validated=1):e._store&&(e._store.validated=1))}function C(e){return typeof e=="object"&&e!==null&&e.$$typeof===de}var G=d,de=Symbol.for("react.transitional.element"),ge=Symbol.for("react.portal"),E=Symbol.for("react.fragment"),V=Symbol.for("react.strict_mode"),O=Symbol.for("react.profiler"),me=Symbol.for("react.consumer"),le=Symbol.for("react.context"),we=Symbol.for("react.forward_ref"),P=Symbol.for("react.suspense"),ce=Symbol.for("react.suspense_list"),L=Symbol.for("react.memo"),X=Symbol.for("react.lazy"),Y=Symbol.for("react.activity"),Z=Symbol.for("react.client.reference"),xe=G.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE,ue=Object.prototype.hasOwnProperty,B=Array.isArray,D=console.createTask?console.createTask:function(){return null};G={react_stack_bottom_frame:function(e){return e()}};var u,U={},Q=G.react_stack_bottom_frame.bind(G,w)(),ye=D(j(w)),N={};ae.Fragment=E,ae.jsx=function(e,a,r){var b=1e4>xe.recentlyCreatedOwnerStacks++;return y(e,a,r,!1,b?Error("react-stack-top-frame"):Q,b?D(j(e)):ye)},ae.jsxs=function(e,a,r){var b=1e4>xe.recentlyCreatedOwnerStacks++;return y(e,a,r,!0,b?Error("react-stack-top-frame"):Q,b?D(j(e)):ye)}})()),ae}var je;function ze(){return je||(je=1,process.env.NODE_ENV==="production"?he.exports=_e():he.exports=Oe()),he.exports}var s=ze();const Me=`
|
|
23
23
|
@keyframes magic-sentence-spin {
|
|
24
24
|
from { transform: rotate(0deg); }
|
|
25
25
|
to { transform: rotate(360deg); }
|
|
@@ -52,7 +52,7 @@ React keys must be passed directly to JSX without using spread:
|
|
|
52
52
|
0%, 100% { box-shadow: 0 0 5px rgba(76, 175, 80, 0.5); }
|
|
53
53
|
50% { box-shadow: 0 0 20px rgba(76, 175, 80, 0.8), 0 0 30px rgba(76, 175, 80, 0.6); }
|
|
54
54
|
}
|
|
55
|
-
`;if(typeof document<"u"&&!document.getElementById("magic-sentence-keyframes")){const
|
|
55
|
+
`;if(typeof document<"u"&&!document.getElementById("magic-sentence-keyframes")){const f=document.createElement("style");f.id="magic-sentence-keyframes",f.innerHTML=Me,document.head.appendChild(f)}const Ie={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"}},g={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",backgroundImage:"url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAwIiBoZWlnaHQ9IjQwIiB2aWV3Qm94PSIwIDAgMTAwIDQwIiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgo8dGV4dCB4PSI1MCIgeT0iMjUiIGZvbnQtZmFtaWx5PSJBcmlhbCwgc2Fucy1zZXJpZiIgZm9udC1zaXplPSIyMCIgZm9udC13ZWlnaHQ9ImJvbGQiIGZpbGw9IiNlYzRjNDQiIHRleHQtYW5jaG9yPSJtaWRkbGUiPlNQRUFLSUQ8L3RleHQ+Cjwvc3ZnPgo=')",backgroundSize:"contain",backgroundRepeat:"no-repeat",backgroundPosition:"center",transform:"translateZ(0)",backfaceVisibility:"hidden",WebkitFontSmoothing:"antialiased",objectFit:"contain",imageRendering:"auto"},gmReadyWrapper:{display:"flex",flexDirection:"column",alignItems:"center",justifyContent:"center",height:"60%",gap:"16px"},gmHourglass:{fontSize:"42px",...Ie.spin},...Ie},Pe=()=>{const[f,c]=d.useState([]),v=d.useCallback((w,H,R)=>{const h=[];w.trim()||h.push({type:"empty",message:"Sentence cannot be empty"}),w.length>41&&h.push({type:"length",message:`Sentence is too long (${w.length}/41 characters)`}),w&&!/^[a-zA-Z0-9\s.,!?;:'"-]*$/.test(w)&&h.push({type:"characters",message:"Only Latin characters, numbers, spaces and punctuation are allowed"});const y=R.findIndex((I,C)=>C!==H&&I.toLowerCase().trim()===w.toLowerCase().trim());return y!==-1&&h.push({type:"duplicate",message:`Duplicate sentence (same as sentence ${y+1})`}),c(h),{isValid:h.length===0,errors:h}},[]),j=d.useCallback(w=>{const H=[];return w.forEach((R,h)=>{const _=v(R,h,w);H.push(..._.errors.map(y=>({...y,message:`Sentence ${h+1}: ${y.message}`})))}),{isValid:H.length===0,errors:H}},[v]),W=d.useCallback(()=>{c([])},[]);return{errors:f,validateSentence:v,validateAllSentences:j,clearErrors:W}},He=(f,c,v)=>c&&v?`${f} word "${c}" ${v}`:c?`${f} word "${c}"`:f,Ce=(f,c,v=["Enter"," "])=>{v.includes(f.key)&&(f.preventDefault(),c())},M=f=>{const c=document.createElement("div");c.setAttribute("aria-live","polite"),c.setAttribute("aria-atomic","true"),c.style.position="absolute",c.style.left="-10000px",c.style.width="1px",c.style.height="1px",c.style.overflow="hidden",document.body.appendChild(c),c.textContent=f,setTimeout(()=>{document.body.removeChild(c)},1e3)},Le=()=>{const f=document.createElement("style");f.textContent=`
|
|
56
56
|
#magic-sentence-root, #magic-sentence-root * {
|
|
57
57
|
box-sizing: border-box;
|
|
58
58
|
font-family: "Geist", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
|
|
@@ -78,5 +78,5 @@ React keys must be passed directly to JSX without using spread:
|
|
|
78
78
|
height: 100% !important;
|
|
79
79
|
overflow: hidden !important;
|
|
80
80
|
}
|
|
81
|
-
`,document.head.appendChild(p)},Be=p=>[...p].sort(()=>Math.random()-.5);function He({logoUrl:p,showLogo:l=!0,baseURL:m}={}){const _=a.useRef(null),{validateAllSentences:R,errors:y}=je(),E=()=>i||window.innerWidth<768,f=()=>i||window.innerWidth<768||window.innerWidth>=320&&window.innerWidth<=932&&window.innerHeight>=390&&window.innerHeight<=932,v=(t="medium")=>{if(!f())return{padding:"12px 24px",fontSize:"16px",minWidth:"auto"};switch(t){case"small":return{padding:"4px 6px",fontSize:"9px",minWidth:"40px"};case"medium":return{padding:"5px 8px",fontSize:"10px",minWidth:"50px"};case"large":return{padding:"6px 10px",fontSize:"11px",minWidth:"60px"}}};a.useEffect(()=>(Me(),()=>{document.body.style.overflow=""}),[]);const[k,W]=a.useState("select"),[H,X]=a.useState(null),[U,ce]=a.useState(null),[C,N]=a.useState([]),[D,ge]=a.useState(0),[ue,me]=a.useState([]),[P,pe]=a.useState([]),[L,we]=a.useState(20),[O,Q]=a.useState(0),[Ce,K]=a.useState(null),[z,M]=a.useState(null),[c,Z]=a.useState(!1),[q,xe]=a.useState(Number(localStorage.getItem("magicSentenceBest"))||0),F=a.useRef(null),[j,e]=a.useState({list:null,index:null,side:null}),[i,g]=a.useState(!1),[S,G]=a.useState(1),[$,w]=a.useState(null),[Y,fe]=a.useState(!1),[J,Le]=a.useState(!1),[ee,Fe]=a.useState(!1),[te,Ge]=a.useState(!1),[ne,Ye]=a.useState(!1),[ie,Je]=a.useState(!1),[re,Ve]=a.useState(!1),[oe,Xe]=a.useState(!1),[se,Ue]=a.useState(!1);a.useEffect(()=>{const t=()=>{const r=window.innerWidth,n=window.innerHeight,o=r<768||r===926&&n===428||r===932&&n===430,d=n<700,b=r===768&&n===1024,T=r===1024&&n===768,u=r===820&&n===1180,x=r===1180&&n===820,ae=r===540&&n===720,A=r===720&&n===540,ke=r===1024&&n===1366,dt=r===1366&&n===1024,lt=r>=1200&&n>=600&&!o;if(fe(lt),Le(b),Fe(T),Ge(u),Ye(x),Je(ae),Ve(A),Xe(ke),Ue(dt),g(o),o)w(null),G(1);else if(d)w(null),G(1);else{const ct=Math.min(1e3,Math.min(r,n)*.9);w(ct),G(1)}};return t(),window.addEventListener("resize",t),()=>window.removeEventListener("resize",t)},[]);const ye=(t,r,n,o)=>{if(c)return;let d=[...ue],b=[...P];const T=t==="bank"?d:b,u=r==="bank"?d:b,x=T.findIndex(ke=>ke.id===n);if(x===-1)return;const[ae]=T.splice(x,1);let A=o;t===r&&A!==null&&A!==void 0&&A>x&&(A=A-1),A==null||A<0||A>u.length?u.push(ae):u.splice(A,0,ae),t==="bank"?d=T:b=T,r==="bank"?d=u:b=u,me(d),pe(b)},be=(t,r,n)=>{if(t.preventDefault(),c){e({list:null,index:null,side:null});return}const o=t.dataTransfer.getData("application/x-token")||(()=>{const d=t.dataTransfer.getData("text/plain");if(!d)return"";const b=ue.some(x=>x.id===d),T=P.some(x=>x.id===d),u=b?"bank":T?"selected":null;return u?JSON.stringify({from:u,id:d}):""})();if(o){try{const d=JSON.parse(o);if(!d||!d.id||!d.from)return;ye(d.from,r,d.id,n)}catch{}e({list:null,index:null,side:null})}},Ze=t=>{X(t),N(Array(t).fill("")),W("time")},Qe=t=>{ce(t),W("type")},Ke=(t,r)=>{if(r.length>41||r&&!/^[a-zA-Z0-9\s.,!?;:'"-]*$/.test(r))return;const o=[...C];o[t]=r,N(o);const d=R(o);d.isValid||console.warn("Validation errors:",d.errors)},qe=t=>t.trim().replace(/\s+/g," "),Ae=t=>t<=3?20:t<=5?18:t<=7?16:t<=9?14:12,$e=()=>{C.some(r=>r.trim().length===0)||(N(r=>r.map(n=>qe(n))),Q(0),ge(0),K(null),W("getready"))};a.useEffect(()=>{if(k==="getready"){const t=setTimeout(()=>Se(0),3e3);return()=>clearTimeout(t)}},[k]);const Se=t=>{const r=C[t];if(!r)return;const o=Be(r.trim().split(/\s+/).filter(Boolean)).map((d,b)=>({id:`${Date.now()}-${t}-${b}-${Math.random().toString(36).slice(2)}`,text:d}));me(o),pe([]),ge(t),we(U||20),M(null),Z(!1),W("play")};a.useEffect(()=>{if(k==="play"&&!c)if(F.current!==null&&window.clearTimeout(F.current),L>0)F.current=window.setTimeout(()=>we(t=>t-1),1e3);else{Z(!0);const r=C[D].trim().split(/\s+/),n=P.map(u=>u.text),o=r.filter(u=>!n.includes(u)).length,d=n.filter(u=>!r.includes(u)).length,b=r.filter((u,x)=>u!==n[x]).length,T=o+d+b;T===0?(M("correct"),V("correct"),B("Correct! Well done!")):T===1?(M("almost"),V("half"),B("Almost correct! Just one mistake.")):(M("wrong"),V("wrong"),B("Not quite right. Keep trying!"))}return()=>{F.current!==null&&window.clearTimeout(F.current)}},[k,L,c,C,D,P]);const et=(t=!0)=>{if(c&&t){D+1<(H||0)?Se(D+1):(W("results"),setTimeout(()=>ve(),600));return}if(t&&!c){const n=C[D].trim().split(/\s+/),o=P.map(x=>x.text),d=n.filter(x=>!o.includes(x)).length,b=o.filter(x=>!n.includes(x)).length,T=n.filter((x,ae)=>x!==o[ae]).length,u=d+b+T;u===0&&L>0?(Q(x=>x+1),M("correct"),V("correct"),B("Correct! Well done!")):u===1?(Q(x=>x+.5),M("almost"),V("half"),B("Almost correct! Just one mistake.")):(M("wrong"),V("wrong"),B("Not quite right. Keep trying!")),D+1<(H||0)?setTimeout(()=>Se(D+1),800):(W("results"),setTimeout(()=>ve(),600))}};a.useEffect(()=>{k==="results"&&O>q&&(xe(O),localStorage.setItem("magicSentenceBest",String(O)))},[k,O,q]);const V=t=>{const r=new(window.AudioContext||window.webkitAudioContext),n=r.createOscillator(),o=r.createGain();switch(n.connect(o),o.connect(r.destination),t){case"start":n.frequency.value=500;break;case"click":n.frequency.value=800;break;case"correct":n.frequency.value=1e3;break;case"half":n.frequency.value=700;break;case"wrong":n.frequency.value=200;break}o.gain.setValueAtTime(.1,r.currentTime),n.start(),n.stop(r.currentTime+.2)},ve=()=>{const r=Date.now()+2500,n=["#ec4c44","#f7c948","#6fcf97","#56ccf2","#bb6bd9"],o=document.createElement("canvas"),d=o.getContext("2d");o.width=window.innerWidth,o.height=window.innerHeight,o.style.position="fixed",o.style.top="0",o.style.left="0",o.style.pointerEvents="none",document.body.appendChild(o);const b=Array.from({length:100}).map(()=>({x:Math.random()*o.width,y:Math.random()*o.height-o.height,size:6+Math.random()*6,color:n[Math.floor(Math.random()*n.length)],speed:2+Math.random()*4,tilt:Math.random()*2*Math.PI})),T=()=>{d.clearRect(0,0,o.width,o.height),b.forEach(u=>{d.fillStyle=u.color,d.beginPath(),d.ellipse(u.x,u.y,u.size,u.size/2,u.tilt,0,2*Math.PI),d.fill(),u.y+=u.speed,u.x+=Math.sin(u.tilt)}),Date.now()<r?requestAnimationFrame(T):document.body.removeChild(o)};T()},tt=()=>s.jsxs("div",{style:h.gmCenterScreen,children:[s.jsx("h1",{style:h.gmHeadline1,children:"MAGIC SENTENCE"}),s.jsx("p",{style:h.gmBodyM,children:"Select number of rounds"}),s.jsx("div",{style:{display:"flex",gap:f()?"8px":"16px",justifyContent:"center"},children:[3,4,5].map(t=>s.jsxs("button",{onClick:()=>Ze(t),style:{...h.gmButton,...v("medium")},children:[t," ROUNDS"]},t))})]}),nt=()=>s.jsxs("div",{style:h.gmCenterScreen,children:[s.jsx("h1",{style:h.gmHeadline1,children:"MAGIC SENTENCE"}),s.jsx("p",{style:h.gmBodyM,children:"Select time per round"}),s.jsx("div",{style:{display:"flex",gap:f()?"8px":"16px",justifyContent:"center"},children:[15,20,30].map(t=>s.jsxs("button",{onClick:()=>Qe(t),style:{...h.gmButton,...v("medium")},children:[t,"s"]},t))})]}),it=()=>s.jsxs("div",{style:h.gmCenterScreen,children:[s.jsxs("h2",{style:{...h.gmBodyM,marginBottom:"0px"},children:["Type down ",H," sentence",H&&H>1?"s":""," for your student"]}),s.jsx("p",{style:{...h.gmBodyS,marginBottom:"16px",marginTop:"0px",color:"#6b7280"},children:"Maximum 41 characters per sentence"}),s.jsx("div",{style:{display:"flex",flexDirection:"column",gap:12,width:"auto",minWidth:"fit-content",maxWidth:"600px"},children:C.map((t,r)=>s.jsx("input",{value:t,placeholder:`Sentence ${r+1}`,onChange:n=>Ke(r,n.target.value),style:{...h.gmInput,padding:f()?"8px 12px":"12px 16px",fontSize:f()?"14px":"16px",width:"100%",textAlign:"center"}},r))}),s.jsx("button",{onClick:$e,disabled:C.some(t=>t.trim().length===0),style:{...h.gmButton,marginTop:30,background:C.some(t=>t.trim().length===0)?"#ccc":"#ec4c44",cursor:C.some(t=>t.trim().length===0)?"not-allowed":"pointer",...v("large")},children:"PLAY"})]}),rt=()=>s.jsxs("div",{style:h.gmReadyWrapper,children:[s.jsx("h1",{style:{...h.gmHeadline1,fontSize:f()?"36px":"72px",color:"#ec4c44",marginBottom:"20px",animation:"pulse 1s ease-in-out infinite"},children:"GET READY"}),s.jsx("div",{style:h.gmHourglass,children:"⏳"})]}),ot=()=>s.jsxs("div",{style:h.gmGameLayout,children:[s.jsxs("h2",{style:{marginBottom:f()?"5px":"10px",fontSize:f()?"16px":"20px"},children:["Round ",D+1,"/",H," — ",c?"TIME'S UP!":`Time: ${L}s`]}),s.jsx("div",{style:{width:"60%",height:f()?"8px":"14px",borderRadius:8,background:"#eee",overflow:"hidden",marginBottom:f()?"10px":"20px"},children:s.jsx("div",{style:{height:"100%",width:`${L/(U||20)*100}%`,background:L<=5?"#ec4c44":"#4caf50",transition:"width 1s linear"}})}),s.jsx("div",{onDragOver:t=>t.preventDefault(),onDrop:t=>be(t,"bank",null),style:{display:"flex",flexWrap:E()?"wrap":"nowrap",gap:i||window.innerWidth<768?"6px":"10px",justifyContent:"center",marginBottom:i||window.innerWidth<768?"15px":"30px",padding:i||window.innerWidth<768?"5px":"10px",width:"100%",boxSizing:"border-box"},children:ue.map((t,r)=>s.jsx("div",{draggable:!c,role:"button",tabIndex:c?-1:0,"aria-label":c?`Word: ${t.text} (time expired)`:Ie("Drag word",t.text,"to build sentence"),onDragStart:n=>{if(c){n.preventDefault();return}n.dataTransfer.setData("application/x-token",JSON.stringify({from:"bank",id:t.id})),n.dataTransfer.setData("text/plain",t.id),B(`Dragging word: ${t.text}`)},onKeyDown:n=>{c||Pe(n,()=>ye("bank","selected",t.id,null))},onDragOver:n=>n.preventDefault(),onDrop:n=>{const o=n.currentTarget.getBoundingClientRect(),d=o.left+o.width/2,b=n.clientX>d?r+1:r;e({list:null,index:null,side:null}),n.stopPropagation(),be(n,"bank",b)},onDragEnter:n=>{if(c)return;const o=n.currentTarget.getBoundingClientRect(),d=o.left+o.width/2;e({list:"bank",index:r,side:n.clientX>d?"right":"left"})},onDragLeave:()=>e({list:null,index:null,side:null}),onClick:()=>{c||ye("bank","selected",t.id,null)},style:{padding:i||window.innerWidth<768?"6px 10px":"10px 16px",borderRadius:i||window.innerWidth<768?"6px":"10px",border:"1px solid #ccc",background:c?"#f0f0f0":"#f9f9f9",cursor:c?"not-allowed":"pointer",fontSize:i||window.innerWidth<768?"12px":"18px",borderLeft:j.list==="bank"&&j.index===r&&j.side==="left"?"3px solid #3b82f6":"1px solid #ccc",borderRight:j.list==="bank"&&j.index===r&&j.side==="right"?"3px solid #3b82f6":"1px solid #ccc",flexShrink:0,flexBasis:"auto",opacity:c?.6:1,transition:"opacity 0.3s ease"},children:t.text},t.id))}),s.jsx("div",{onDragOver:t=>t.preventDefault(),onDrop:t=>be(t,"selected",null),style:{minHeight:i||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:i||window.innerWidth<768?"8px":"12px",padding:i||window.innerWidth<768?"8px":"12px",display:"flex",flexWrap:E()?"wrap":"nowrap",alignItems:"center",justifyContent:"center",fontSize:`${Ae(P.length)}px`,background:z==="correct"?"#e8f5e8":z==="almost"?"#fff3e0":z==="wrong"?"#ffebee":"#fafafa",overflowX:E()?"hidden":"auto",whiteSpace:E()?"normal":"nowrap"},children:P.map((t,r)=>s.jsx("span",{draggable:!c,onDragStart:n=>{if(c){n.preventDefault();return}n.dataTransfer.setData("application/x-token",JSON.stringify({from:"selected",id:t.id})),n.dataTransfer.setData("text/plain",t.id)},onDragOver:n=>n.preventDefault(),onDrop:n=>{const o=n.currentTarget.getBoundingClientRect(),d=o.left+o.width/2,b=n.clientX>d?r+1:r;e({list:null,index:null,side:null}),n.stopPropagation(),be(n,"selected",b)},onDragEnter:n=>{if(c)return;const o=n.currentTarget.getBoundingClientRect(),d=o.left+o.width/2;e({list:"selected",index:r,side:n.clientX>d?"right":"left"})},onDragLeave:()=>e({list:null,index:null,side:null}),onClick:()=>{c||ye("selected","bank",t.id,null)},title:c?"Time expired":"Click to remove back to bank",style:{padding:f()?"4px 6px":"6px 10px",margin:f()?"2px":"4px",borderRadius:f()?"4px":"8px",background:c?"#f0f0f0":"#ffe9e7",border:c?"1px solid #ccc":"1px solid #ec4c44",borderLeft:j.list==="selected"&&j.index===r&&j.side==="left"?"3px solid #3b82f6":void 0,borderRight:j.list==="selected"&&j.index===r&&j.side==="right"?"3px solid #3b82f6":void 0,cursor:c?"not-allowed":"pointer",userSelect:"none",fontSize:`${Ae(P.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:t.text},t.id))}),s.jsx("button",{onClick:()=>et(!0),disabled:!c&&P.length===0,style:{marginTop:f()?"15px":"30px",fontSize:f()?"14px":"20px",padding:f()?"6px 12px":"10px 24px",borderRadius:f()?"8px":"12px",background:c||P.length>0?"#ec4c44":"#ccc",color:"white",border:"none",cursor:c||P.length>0?"pointer":"not-allowed"},children:"NEXT"})]}),st=()=>s.jsxs("div",{style:h.gmCenterScreen,children:[s.jsx("h1",{style:{...h.gmHeadline1,marginTop:(i&&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||J||ee||te||ne||ie||re||oe||se,"0px"),marginBottom:i&&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||J||ee||te||ne||ie||re||oe||se?"2px":"10px",fontSize:i&&window.innerWidth<=375&&window.innerHeight<=667||window.innerWidth===896&&window.innerHeight===414||window.innerWidth===844&&window.innerHeight===390||window.innerWidth===926&&window.innerHeight===428||window.innerWidth===932&&window.innerHeight===430?"32px":"clamp(28px, 4vw, 40px)"},children:"Game Over 🎯"}),s.jsxs("h2",{style:{...h.gmHeadline2,marginTop:(i&&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||J||ee||te||ne||ie||re||oe||se,"0px"),marginBottom:i&&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||J||ee||te||ne||ie||re||oe||se?"2px":"16px",fontSize:i&&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: ",O," out of ",H]}),s.jsxs("p",{style:{...h.gmBodyM,color:"#10b981",marginTop:i&&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||J||ee||te||ne||ie||re||oe||se?"0px":"12px",marginBottom:i&&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||J||ee||te||ne||ie||re||oe||se?"2px":"16px",fontSize:i&&window.innerWidth<=375&&window.innerHeight<=667||window.innerWidth===896&&window.innerHeight===414||window.innerWidth===844&&window.innerHeight===390||window.innerWidth===926&&window.innerHeight===428||window.innerWidth===932&&window.innerHeight===430?"14px":"16px"},children:["Best score: ",q]}),s.jsxs("div",{style:{display:"flex",gap:i&&window.innerWidth>window.innerHeight||i&&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:i&&window.innerWidth>window.innerHeight||i&&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||Y?"12px":"24px"},children:[s.jsx("button",{onClick:()=>{ve(),V("start"),setTimeout(()=>{W("getready"),K(null),Z(!1)},800)},style:{...h.gmButton,...v("medium")},children:"🔁 Play again"}),s.jsx("button",{onClick:()=>{V("click"),W("select"),X(null),ce(null),N([]),Q(0),pe([]),Z(!1)},style:{...h.gmButton,...v("medium")},children:"⬅️ Exit"})]})]}),at=a.useMemo(()=>{let t=p;return!t&&m&&(t=`${m.endsWith("/")?m.slice(0,-1):m}/logo.svg`),s.jsx("div",{style:{...h.gmLogoFixed,display:!l||i&&window.innerWidth>window.innerHeight||window.innerHeight<700?"none":"block"},children:t?s.jsx("img",{src:t,alt:"SPEAKID Logo",style:h.gmLogoImg,loading:"lazy"}):s.jsx("div",{style:h.gmLogoImg,children:"SPEAKID"})})},[i,l,p,m]);return s.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:s.jsx("div",{style:{width:i?"100%":$||1e3,height:i?"100%":$||1e3,display:"flex",justifyContent:"center",alignItems:"center",overflow:"hidden",borderRadius:i?0:"20px",background:"linear-gradient(to bottom, #fff8f8 0%, #f9fafb 100%)",boxShadow:i?"none":"0 0 40px rgba(0,0,0,0.1)",margin:i?"0 auto":"unset",position:"relative"},children:s.jsx("div",{style:{transform:"none",width:"100%",height:"100%",display:"flex",justifyContent:"center",alignItems:"center"},children:s.jsxs("div",{id:"magic-sentence-root",children:[!i&&at,k==="select"&&tt(),k==="time"&&nt(),k==="type"&&it(),k==="getready"&&rt(),k==="play"&&ot(),k==="results"&&st()]})})})})}class Ne extends a.Component{constructor(l){super(l),this.state={hasError:!1}}static getDerivedStateFromError(l){return{hasError:!0,error:l}}componentDidCatch(l,m){console.error("Game Error:",l,m),this.setState({error:l,errorInfo:m})}handleReset=()=>{this.setState({hasError:!1,error:void 0,errorInfo:void 0})};render(){return this.state.hasError?this.props.fallback?this.props.fallback:s.jsxs("div",{style:{display:"flex",flexDirection:"column",alignItems:"center",justifyContent:"center",minHeight:"100vh",padding:"20px",textAlign:"center",backgroundColor:"#fef2f2",color:"#dc2626",fontFamily:"system-ui, sans-serif"},children:[s.jsx("h1",{style:{fontSize:"24px",marginBottom:"16px"},children:"🚨 Oops! Something went wrong"}),s.jsx("p",{style:{fontSize:"16px",marginBottom:"24px",maxWidth:"500px"},children:"The game encountered an unexpected error. Don't worry, your progress is saved!"}),s.jsx("button",{onClick:this.handleReset,style:{padding:"12px 24px",fontSize:"16px",backgroundColor:"#dc2626",color:"white",border:"none",borderRadius:"8px",cursor:"pointer",transition:"background-color 0.2s"},onMouseOver: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&&s.jsxs("details",{style:{marginTop:"20px",textAlign:"left",maxWidth:"600px"},children:[s.jsx("summary",{style:{cursor:"pointer",fontSize:"14px"},children:"Technical Details (Development Only)"}),s.jsxs("pre",{style:{backgroundColor:"#f3f4f6",padding:"12px",borderRadius:"4px",fontSize:"12px",overflow:"auto",marginTop:"8px"},children:[this.state.error.toString(),this.state.errorInfo?.componentStack]})]})]}):this.props.children}}I.ErrorBoundary=Ne,I.Game=He,I.announceToScreenReader=B,I.createAriaLabel=Ie,I.default=He,I.handleKeyDown=Pe,I.useValidation=je,Object.defineProperties(I,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})}));
|
|
81
|
+
`,document.head.appendChild(f)},Be=f=>[...f].sort(()=>Math.random()-.5);function Ae(f={}){const{logoUrl:c,showLogo:v=!0,baseURL:j}=f,W=d.useRef(null),{validateAllSentences:w,errors:H}=Pe(),R=()=>r||window.innerWidth<768,h=()=>r||window.innerWidth<768||window.innerWidth>=320&&window.innerWidth<=932&&window.innerHeight>=390&&window.innerHeight<=932,_=(t="medium")=>{if(!h())return{padding:"12px 24px",fontSize:"16px",minWidth:"auto"};switch(t){case"small":return{padding:"4px 6px",fontSize:"9px",minWidth:"40px"};case"medium":return{padding:"5px 8px",fontSize:"10px",minWidth:"50px"};case"large":return{padding:"6px 10px",fontSize:"11px",minWidth:"60px"}}};d.useEffect(()=>(Le(),()=>{document.body.style.overflow=""}),[]);const[y,I]=d.useState("select"),[C,G]=d.useState(null),[de,ge]=d.useState(null),[E,V]=d.useState([]),[O,me]=d.useState(0),[le,we]=d.useState([]),[P,ce]=d.useState([]),[L,X]=d.useState(20),[Y,Z]=d.useState(0),[xe,ue]=d.useState(null),[B,D]=d.useState(null),[u,U]=d.useState(!1),[Q,ye]=d.useState(Number(localStorage.getItem("magicSentenceBest"))||0),N=d.useRef(null),[e,a]=d.useState({list:null,index:null,side:null}),[r,b]=d.useState(!1),[pe,J]=d.useState(1),[x,z]=d.useState(null),[fe,ve]=d.useState(!1),[K,Fe]=d.useState(!1),[q,Ge]=d.useState(!1),[$,Ye]=d.useState(!1),[ee,Ue]=d.useState(!1),[te,Je]=d.useState(!1),[ne,Ve]=d.useState(!1),[ie,Xe]=d.useState(!1),[re,Ze]=d.useState(!1);d.useEffect(()=>{const t=()=>{const i=window.innerWidth,n=window.innerHeight,o=i<768||i===926&&n===428||i===932&&n===430,l=n<700,S=i===768&&n===1024,k=i===1024&&n===768,p=i===820&&n===1180,m=i===1180&&n===820,oe=i===540&&n===720,A=i===720&&n===540,Re=i===1024&&n===1366,lt=i===1366&&n===1024,ct=i>=1200&&n>=600&&!o;if(ve(ct),Fe(S),Ge(k),Ye(p),Ue(m),Je(oe),Ve(A),Xe(Re),Ze(lt),b(o),o)z(null),J(1);else if(l)z(null),J(1);else{const ut=Math.min(1e3,Math.min(i,n)*.9);z(ut),J(1)}};return t(),window.addEventListener("resize",t),()=>window.removeEventListener("resize",t)},[]);const be=(t,i,n,o)=>{if(u)return;let l=[...le],S=[...P];const k=t==="bank"?l:S,p=i==="bank"?l:S,m=k.findIndex(Re=>Re.id===n);if(m===-1)return;const[oe]=k.splice(m,1);let A=o;t===i&&A!==null&&A!==void 0&&A>m&&(A=A-1),A==null||A<0||A>p.length?p.push(oe):p.splice(A,0,oe),t==="bank"?l=k:S=k,i==="bank"?l=p:S=p,we(l),ce(S)},Se=(t,i,n)=>{if(t.preventDefault(),u){a({list:null,index:null,side:null});return}const o=t.dataTransfer.getData("application/x-token")||(()=>{const l=t.dataTransfer.getData("text/plain");if(!l)return"";const S=le.some(m=>m.id===l),k=P.some(m=>m.id===l),p=S?"bank":k?"selected":null;return p?JSON.stringify({from:p,id:l}):""})();if(o){try{const l=JSON.parse(o);if(!l||!l.id||!l.from)return;be(l.from,i,l.id,n)}catch{}a({list:null,index:null,side:null})}},Qe=t=>{G(t),V(Array(t).fill("")),I("time")},Ke=t=>{ge(t),I("type")},qe=(t,i)=>{if(i.length>41||i&&!/^[a-zA-Z0-9\s.,!?;:'"-]*$/.test(i))return;const o=[...E];o[t]=i,V(o);const l=w(o);l.isValid||console.warn("Validation errors:",l.errors)},$e=t=>t.trim().replace(/\s+/g," "),De=t=>t<=3?20:t<=5?18:t<=7?16:t<=9?14:12,et=()=>{E.some(i=>i.trim().length===0)||(V(i=>i.map(n=>$e(n))),Z(0),me(0),ue(null),I("getready"))};d.useEffect(()=>{if(y==="getready"){const t=setTimeout(()=>ke(0),3e3);return()=>clearTimeout(t)}},[y]);const ke=t=>{const i=E[t];if(!i)return;const o=Be(i.trim().split(/\s+/).filter(Boolean)).map((l,S)=>({id:`${Date.now()}-${t}-${S}-${Math.random().toString(36).slice(2)}`,text:l}));we(o),ce([]),me(t),X(de||20),D(null),U(!1),I("play")};d.useEffect(()=>{if(y==="play"&&!u)if(N.current!==null&&window.clearTimeout(N.current),L>0)N.current=window.setTimeout(()=>X(t=>t-1),1e3);else{U(!0);const i=E[O].trim().split(/\s+/),n=P.map(p=>p.text),o=i.filter(p=>!n.includes(p)).length,l=n.filter(p=>!i.includes(p)).length,S=i.filter((p,m)=>p!==n[m]).length,k=o+l+S;k===0?(D("correct"),F("correct"),M("Correct! Well done!")):k===1?(D("almost"),F("half"),M("Almost correct! Just one mistake.")):(D("wrong"),F("wrong"),M("Not quite right. Keep trying!"))}return()=>{N.current!==null&&window.clearTimeout(N.current)}},[y,L,u,E,O,P]);const tt=(t=!0)=>{if(u&&t){O+1<(C||0)?ke(O+1):(I("results"),setTimeout(()=>We(),600));return}if(t&&!u){const n=E[O].trim().split(/\s+/),o=P.map(m=>m.text),l=n.filter(m=>!o.includes(m)).length,S=o.filter(m=>!n.includes(m)).length,k=n.filter((m,oe)=>m!==o[oe]).length,p=l+S+k;p===0&&L>0?(Z(m=>m+1),D("correct"),F("correct"),M("Correct! Well done!")):p===1?(Z(m=>m+.5),D("almost"),F("half"),M("Almost correct! Just one mistake.")):(D("wrong"),F("wrong"),M("Not quite right. Keep trying!")),O+1<(C||0)?setTimeout(()=>ke(O+1),800):(I("results"),setTimeout(()=>We(),600))}};d.useEffect(()=>{y==="results"&&Y>Q&&(ye(Y),localStorage.setItem("magicSentenceBest",String(Y)))},[y,Y,Q]);const F=t=>{const i=new(window.AudioContext||window.webkitAudioContext),n=i.createOscillator(),o=i.createGain();switch(n.connect(o),o.connect(i.destination),t){case"start":n.frequency.value=500;break;case"click":n.frequency.value=800;break;case"correct":n.frequency.value=1e3;break;case"half":n.frequency.value=700;break;case"wrong":n.frequency.value=200;break}o.gain.setValueAtTime(.1,i.currentTime),n.start(),n.stop(i.currentTime+.2)},We=()=>{const i=Date.now()+2500,n=["#ec4c44","#f7c948","#6fcf97","#56ccf2","#bb6bd9"],o=document.createElement("canvas"),l=o.getContext("2d");o.width=window.innerWidth,o.height=window.innerHeight,o.style.position="fixed",o.style.top="0",o.style.left="0",o.style.pointerEvents="none",document.body.appendChild(o);const S=Array.from({length:100}).map(()=>({x:Math.random()*o.width,y:Math.random()*o.height-o.height,size:6+Math.random()*6,color:n[Math.floor(Math.random()*n.length)],speed:2+Math.random()*4,tilt:Math.random()*2*Math.PI})),k=()=>{l.clearRect(0,0,o.width,o.height),S.forEach(p=>{l.fillStyle=p.color,l.beginPath(),l.ellipse(p.x,p.y,p.size,p.size/2,p.tilt,0,2*Math.PI),l.fill(),p.y+=p.speed,p.x+=Math.sin(p.tilt)}),Date.now()<i?requestAnimationFrame(k):document.body.removeChild(o)};k()},nt=()=>s.jsxs("div",{style:g.gmCenterScreen,children:[s.jsx("h1",{style:g.gmHeadline1,children:"MAGIC SENTENCE"}),s.jsx("p",{style:g.gmBodyM,children:"Select number of rounds"}),s.jsx("div",{style:{display:"flex",gap:h()?"8px":"16px",justifyContent:"center"},children:[3,4,5].map(t=>s.jsxs("button",{onClick:()=>Qe(t),style:{...g.gmButton,..._("medium")},children:[t," ROUNDS"]},t))})]}),it=()=>s.jsxs("div",{style:g.gmCenterScreen,children:[s.jsx("h1",{style:g.gmHeadline1,children:"MAGIC SENTENCE"}),s.jsx("p",{style:g.gmBodyM,children:"Select time per round"}),s.jsx("div",{style:{display:"flex",gap:h()?"8px":"16px",justifyContent:"center"},children:[15,20,30].map(t=>s.jsxs("button",{onClick:()=>Ke(t),style:{...g.gmButton,..._("medium")},children:[t,"s"]},t))})]}),rt=()=>s.jsxs("div",{style:g.gmCenterScreen,children:[s.jsxs("h2",{style:{...g.gmBodyM,marginBottom:"0px"},children:["Type down ",C," sentence",C&&C>1?"s":""," for your student"]}),s.jsx("p",{style:{...g.gmBodyS,marginBottom:"16px",marginTop:"0px",color:"#6b7280"},children:"Maximum 41 characters per sentence"}),s.jsx("div",{style:{display:"flex",flexDirection:"column",gap:12,width:"auto",minWidth:"fit-content",maxWidth:"600px"},children:E.map((t,i)=>s.jsx("input",{value:t,placeholder:`Sentence ${i+1}`,onChange:n=>qe(i,n.target.value),style:{...g.gmInput,padding:h()?"8px 12px":"12px 16px",fontSize:h()?"14px":"16px",width:"100%",textAlign:"center"}},i))}),s.jsx("button",{onClick:et,disabled:E.some(t=>t.trim().length===0),style:{...g.gmButton,marginTop:30,background:E.some(t=>t.trim().length===0)?"#ccc":"#ec4c44",cursor:E.some(t=>t.trim().length===0)?"not-allowed":"pointer",..._("large")},children:"PLAY"})]}),ot=()=>s.jsxs("div",{style:g.gmReadyWrapper,children:[s.jsx("h1",{style:{...g.gmHeadline1,fontSize:h()?"36px":"72px",color:"#ec4c44",marginBottom:"20px",animation:"pulse 1s ease-in-out infinite"},children:"GET READY"}),s.jsx("div",{style:g.gmHourglass,children:"⏳"})]}),st=()=>s.jsxs("div",{style:g.gmGameLayout,children:[s.jsxs("h2",{style:{marginBottom:h()?"5px":"10px",fontSize:h()?"16px":"20px"},children:["Round ",O+1,"/",C," — ",u?"TIME'S UP!":`Time: ${L}s`]}),s.jsx("div",{style:{width:"60%",height:h()?"8px":"14px",borderRadius:8,background:"#eee",overflow:"hidden",marginBottom:h()?"10px":"20px"},children:s.jsx("div",{style:{height:"100%",width:`${L/(de||20)*100}%`,background:L<=5?"#ec4c44":"#4caf50",transition:"width 1s linear"}})}),s.jsx("div",{onDragOver:t=>t.preventDefault(),onDrop:t=>Se(t,"bank",null),style:{display:"flex",flexWrap:R()?"wrap":"nowrap",gap:r||window.innerWidth<768?"6px":"10px",justifyContent:"center",marginBottom:r||window.innerWidth<768?"15px":"30px",padding:r||window.innerWidth<768?"5px":"10px",width:"100%",boxSizing:"border-box"},children:le.map((t,i)=>s.jsx("div",{draggable:!u,role:"button",tabIndex:u?-1:0,"aria-label":u?`Word: ${t.text} (time expired)`:He("Drag word",t.text,"to build sentence"),onDragStart:n=>{if(u){n.preventDefault();return}n.dataTransfer.setData("application/x-token",JSON.stringify({from:"bank",id:t.id})),n.dataTransfer.setData("text/plain",t.id),M(`Dragging word: ${t.text}`)},onKeyDown:n=>{u||Ce(n,()=>be("bank","selected",t.id,null))},onDragOver:n=>n.preventDefault(),onDrop:n=>{const o=n.currentTarget.getBoundingClientRect(),l=o.left+o.width/2,S=n.clientX>l?i+1:i;a({list:null,index:null,side:null}),n.stopPropagation(),Se(n,"bank",S)},onDragEnter:n=>{if(u)return;const o=n.currentTarget.getBoundingClientRect(),l=o.left+o.width/2;a({list:"bank",index:i,side:n.clientX>l?"right":"left"})},onDragLeave:()=>a({list:null,index:null,side:null}),onClick:()=>{u||be("bank","selected",t.id,null)},style:{padding:r||window.innerWidth<768?"6px 10px":"10px 16px",borderRadius:r||window.innerWidth<768?"6px":"10px",border:"1px solid #ccc",background:u?"#f0f0f0":"#f9f9f9",cursor:u?"not-allowed":"pointer",fontSize:r||window.innerWidth<768?"12px":"18px",borderLeft:e.list==="bank"&&e.index===i&&e.side==="left"?"3px solid #3b82f6":"1px solid #ccc",borderRight:e.list==="bank"&&e.index===i&&e.side==="right"?"3px solid #3b82f6":"1px solid #ccc",flexShrink:0,flexBasis:"auto",opacity:u?.6:1,transition:"opacity 0.3s ease"},children:t.text},t.id))}),s.jsx("div",{onDragOver:t=>t.preventDefault(),onDrop:t=>Se(t,"selected",null),style:{minHeight:r||window.innerWidth<768?"50px":"70px",width:"auto",maxWidth:"none",minWidth:"245px",border:B==="correct"?"2px dashed #4caf50":B==="almost"?"2px dashed #ff9800":B==="wrong"?"2px dashed #f44336":"2px dashed #ccc",borderRadius:r||window.innerWidth<768?"8px":"12px",padding:r||window.innerWidth<768?"8px":"12px",display:"flex",flexWrap:R()?"wrap":"nowrap",alignItems:"center",justifyContent:"center",fontSize:`${De(P.length)}px`,background:B==="correct"?"#e8f5e8":B==="almost"?"#fff3e0":B==="wrong"?"#ffebee":"#fafafa",overflowX:R()?"hidden":"auto",whiteSpace:R()?"normal":"nowrap"},children:P.map((t,i)=>s.jsx("span",{draggable:!u,onDragStart:n=>{if(u){n.preventDefault();return}n.dataTransfer.setData("application/x-token",JSON.stringify({from:"selected",id:t.id})),n.dataTransfer.setData("text/plain",t.id)},onDragOver:n=>n.preventDefault(),onDrop:n=>{const o=n.currentTarget.getBoundingClientRect(),l=o.left+o.width/2,S=n.clientX>l?i+1:i;a({list:null,index:null,side:null}),n.stopPropagation(),Se(n,"selected",S)},onDragEnter:n=>{if(u)return;const o=n.currentTarget.getBoundingClientRect(),l=o.left+o.width/2;a({list:"selected",index:i,side:n.clientX>l?"right":"left"})},onDragLeave:()=>a({list:null,index:null,side:null}),onClick:()=>{u||be("selected","bank",t.id,null)},title:u?"Time expired":"Click to remove back to bank",style:{padding:h()?"4px 6px":"6px 10px",margin:h()?"2px":"4px",borderRadius:h()?"4px":"8px",background:u?"#f0f0f0":"#ffe9e7",border:u?"1px solid #ccc":"1px solid #ec4c44",borderLeft:e.list==="selected"&&e.index===i&&e.side==="left"?"3px solid #3b82f6":void 0,borderRight:e.list==="selected"&&e.index===i&&e.side==="right"?"3px solid #3b82f6":void 0,cursor:u?"not-allowed":"pointer",userSelect:"none",fontSize:`${De(P.length)}px`,fontFamily:'"Roboto", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif',whiteSpace:"nowrap",opacity:u?.6:1,transition:"opacity 0.3s ease"},children:t.text},t.id))}),s.jsx("button",{onClick:()=>tt(!0),disabled:!u&&P.length===0,style:{marginTop:h()?"15px":"30px",fontSize:h()?"14px":"20px",padding:h()?"6px 12px":"10px 24px",borderRadius:h()?"8px":"12px",background:u||P.length>0?"#ec4c44":"#ccc",color:"white",border:"none",cursor:u||P.length>0?"pointer":"not-allowed"},children:"NEXT"})]}),at=()=>s.jsxs("div",{style:g.gmCenterScreen,children:[s.jsx("h1",{style:{...g.gmHeadline1,marginTop:(r&&window.innerWidth>window.innerHeight||window.innerWidth===896&&window.innerHeight===414||window.innerWidth===844&&window.innerHeight===390||window.innerWidth===926&&window.innerHeight===428||window.innerWidth===932&&window.innerHeight===430||K||q||$||ee||te||ne||ie||re,"0px"),marginBottom:r&&window.innerWidth>window.innerHeight||window.innerWidth===896&&window.innerHeight===414||window.innerWidth===844&&window.innerHeight===390||window.innerWidth===926&&window.innerHeight===428||window.innerWidth===932&&window.innerHeight===430||K||q||$||ee||te||ne||ie||re?"2px":"10px",fontSize:r&&window.innerWidth<=375&&window.innerHeight<=667||window.innerWidth===896&&window.innerHeight===414||window.innerWidth===844&&window.innerHeight===390||window.innerWidth===926&&window.innerHeight===428||window.innerWidth===932&&window.innerHeight===430?"32px":"clamp(28px, 4vw, 40px)"},children:"Game Over 🎯"}),s.jsxs("h2",{style:{...g.gmHeadline2,marginTop:(r&&window.innerWidth>window.innerHeight||window.innerWidth===896&&window.innerHeight===414||window.innerWidth===844&&window.innerHeight===390||window.innerWidth===926&&window.innerHeight===428||window.innerWidth===932&&window.innerHeight===430||K||q||$||ee||te||ne||ie||re,"0px"),marginBottom:r&&window.innerWidth>window.innerHeight||window.innerWidth===896&&window.innerHeight===414||window.innerWidth===844&&window.innerHeight===390||window.innerWidth===926&&window.innerHeight===428||window.innerWidth===932&&window.innerHeight===430||K||q||$||ee||te||ne||ie||re?"2px":"16px",fontSize:r&&window.innerWidth<=375&&window.innerHeight<=667||window.innerWidth===896&&window.innerHeight===414||window.innerWidth===844&&window.innerHeight===390||window.innerWidth===926&&window.innerHeight===428||window.innerWidth===932&&window.innerHeight===430?"18px":"24px"},children:["Your score: ",Y," out of ",C]}),s.jsxs("p",{style:{...g.gmBodyM,color:"#10b981",marginTop:r&&window.innerWidth>window.innerHeight||window.innerWidth===896&&window.innerHeight===414||window.innerWidth===844&&window.innerHeight===390||window.innerWidth===926&&window.innerHeight===428||window.innerWidth===932&&window.innerHeight===430||K||q||$||ee||te||ne||ie||re?"0px":"12px",marginBottom:r&&window.innerWidth>window.innerHeight||window.innerWidth===896&&window.innerHeight===414||window.innerWidth===844&&window.innerHeight===390||window.innerWidth===926&&window.innerHeight===428||window.innerWidth===932&&window.innerHeight===430||K||q||$||ee||te||ne||ie||re?"2px":"16px",fontSize:r&&window.innerWidth<=375&&window.innerHeight<=667||window.innerWidth===896&&window.innerHeight===414||window.innerWidth===844&&window.innerHeight===390||window.innerWidth===926&&window.innerHeight===428||window.innerWidth===932&&window.innerHeight===430?"14px":"16px"},children:["Best score: ",Q]}),s.jsxs("div",{style:{display:"flex",gap:r&&window.innerWidth>window.innerHeight||r&&window.innerWidth<=375&&window.innerHeight<=667||window.innerWidth===896&&window.innerHeight===414||window.innerWidth===844&&window.innerHeight===390||window.innerWidth===926&&window.innerHeight===428||window.innerWidth===932&&window.innerHeight===430?"6px":"12px",marginTop:r&&window.innerWidth>window.innerHeight||r&&window.innerWidth<=375&&window.innerHeight<=667||window.innerWidth===896&&window.innerHeight===414||window.innerWidth===844&&window.innerHeight===390||window.innerWidth===926&&window.innerHeight===428||window.innerWidth===932&&window.innerHeight===430?"2px":window.innerWidth===1366&&window.innerHeight===766||window.innerWidth===1366&&window.innerHeight===768||window.innerWidth===1280&&window.innerHeight===720||window.innerWidth===1440&&window.innerHeight===900||fe?"12px":"24px"},children:[s.jsx("button",{onClick:()=>{We(),F("start"),setTimeout(()=>{I("getready"),ue(null),U(!1)},800)},style:{...g.gmButton,..._("medium")},children:"🔁 Play again"}),s.jsx("button",{onClick:()=>{F("click"),I("select"),G(null),ge(null),V([]),Z(0),ce([]),U(!1)},style:{...g.gmButton,..._("medium")},children:"⬅️ Exit"})]})]}),dt=d.useMemo(()=>{let t=c;return!t&&j&&(t=`${j.endsWith("/")?j.slice(0,-1):j}/logo.svg`),s.jsx("div",{style:{...g.gmLogoFixed,display:!v||r&&window.innerWidth>window.innerHeight||window.innerHeight<700?"none":"block"},children:t?s.jsx("img",{src:t,alt:"SPEAKID Logo",style:g.gmLogoImg,loading:"lazy"}):s.jsx("div",{style:g.gmLogoImg,children:"SPEAKID"})})},[r,v,c,j]);return s.jsx("div",{ref:W,style:{width:"100%",height:"100%",display:"flex",justifyContent:"center",alignItems:"center",background:"linear-gradient(to bottom, #fff8f8 0%, #f9fafb 100%)",transition:"background 0.3s ease",overflow:"hidden",position:"absolute",top:0,left:0,right:0,bottom:0},children:s.jsx("div",{style:{width:r?"100%":x||1e3,height:r?"100%":x||1e3,display:"flex",justifyContent:"center",alignItems:"center",overflow:"hidden",borderRadius:r?0:"20px",background:"linear-gradient(to bottom, #fff8f8 0%, #f9fafb 100%)",boxShadow:r?"none":"0 0 40px rgba(0,0,0,0.1)",margin:r?"0 auto":"unset",position:"relative"},children:s.jsx("div",{style:{transform:"none",width:"100%",height:"100%",display:"flex",justifyContent:"center",alignItems:"center"},children:s.jsxs("div",{id:"magic-sentence-root",children:[!r&&dt,y==="select"&&nt(),y==="time"&&it(),y==="type"&&rt(),y==="getready"&&ot(),y==="play"&&st(),y==="results"&&at()]})})})})}class Ne extends d.Component{constructor(c){super(c),this.state={hasError:!1}}static getDerivedStateFromError(c){return{hasError:!0,error:c}}componentDidCatch(c,v){console.error("Game Error:",c,v),this.setState({error:c,errorInfo:v})}handleReset=()=>{this.setState({hasError:!1,error:void 0,errorInfo:void 0})};render(){return this.state.hasError?this.props.fallback?this.props.fallback:s.jsxs("div",{style:{display:"flex",flexDirection:"column",alignItems:"center",justifyContent:"center",minHeight:"100vh",padding:"20px",textAlign:"center",backgroundColor:"#fef2f2",color:"#dc2626",fontFamily:"system-ui, sans-serif"},children:[s.jsx("h1",{style:{fontSize:"24px",marginBottom:"16px"},children:"🚨 Oops! Something went wrong"}),s.jsx("p",{style:{fontSize:"16px",marginBottom:"24px",maxWidth:"500px"},children:"The game encountered an unexpected error. Don't worry, your progress is saved!"}),s.jsx("button",{onClick:this.handleReset,style:{padding:"12px 24px",fontSize:"16px",backgroundColor:"#dc2626",color:"white",border:"none",borderRadius:"8px",cursor:"pointer",transition:"background-color 0.2s"},onMouseOver:c=>c.currentTarget.style.backgroundColor="#b91c1c",onMouseOut:c=>c.currentTarget.style.backgroundColor="#dc2626",children:"🔄 Restart Game"}),typeof process<"u"&&process.env.NODE_ENV==="development"&&this.state.error&&s.jsxs("details",{style:{marginTop:"20px",textAlign:"left",maxWidth:"600px"},children:[s.jsx("summary",{style:{cursor:"pointer",fontSize:"14px"},children:"Technical Details (Development Only)"}),s.jsxs("pre",{style:{backgroundColor:"#f3f4f6",padding:"12px",borderRadius:"4px",fontSize:"12px",overflow:"auto",marginTop:"8px"},children:[this.state.error.toString(),this.state.errorInfo?.componentStack]})]})]}):this.props.children}}T.ErrorBoundary=Ne,T.Game=Ae,T.announceToScreenReader=M,T.createAriaLabel=He,T.default=Ae,T.handleKeyDown=Ce,T.useValidation=Pe,Object.defineProperties(T,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})}));
|
|
82
82
|
//# sourceMappingURL=speakid-build-a-sentence.umd.js.map
|