speakid-build-a-sentence 1.0.12 → 1.0.14
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/index.d.ts +3 -1
- package/dist/index.d.ts.map +1 -1
- package/dist/speakid-build-a-sentence.es.js +75 -74
- 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 +1 -1
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
(function(
|
|
1
|
+
(function(T,l){typeof exports=="object"&&typeof module<"u"?l(exports,require("react")):typeof define=="function"&&define.amd?define(["exports","react"],l):(T=typeof globalThis<"u"?globalThis:T||self,l(T.SpeakidBuildASentence={},T.React))})(this,(function(T,l){"use strict";var ge={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 Re;function
|
|
9
|
+
*/var Re;function Oe(){if(Re)return se;Re=1;var f=Symbol.for("react.transitional.element"),c=Symbol.for("react.fragment");function v(P,W,w){var H=null;if(w!==void 0&&(H=""+w),W.key!==void 0&&(H=""+W.key),"key"in W){w={};for(var E in W)E!=="key"&&(w[E]=W[E])}else w=W;return W=w.ref,{$$typeof:f,type:P,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 Te;function
|
|
17
|
+
*/var Te;function ze(){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 R:return"Fragment";case O:return"Profiler";case V:return"StrictMode";case I: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 he:return"Portal";case de: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 P(e){if(e===R)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 E(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 g(){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:le,type:e,key:a,props:r,_owner:b},(x!==void 0?x:null)!==null?Object.defineProperty(e,"ref",{enumerable:!1,get:g}):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(N(x)){for(b=0;b<x.length;b++)j(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 j(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}",B[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} />`,b,x,z,x),B[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&&E(r,typeof e=="function"?e.displayName||e.name||"Unknown":e),_(e,x,r,W(),pe,J)}function
|
|
22
|
+
<%s key={someKey} {...props} />`,b,x,z,x),B[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&&E(r,typeof e=="function"?e.displayName||e.name||"Unknown":e),_(e,x,r,W(),pe,J)}function j(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===le}var G=l,le=Symbol.for("react.transitional.element"),he=Symbol.for("react.portal"),R=Symbol.for("react.fragment"),V=Symbol.for("react.strict_mode"),O=Symbol.for("react.profiler"),me=Symbol.for("react.consumer"),de=Symbol.for("react.context"),we=Symbol.for("react.forward_ref"),I=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,N=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(P(w)),B={};ae.Fragment=R,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(P(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(P(e)):ye)}})()),ae}var je;function Me(){return je||(je=1,process.env.NODE_ENV==="production"?ge.exports=Oe():ge.exports=ze()),ge.exports}var s=Me();const Le=`
|
|
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 f=document.createElement("style");f.id="magic-sentence-keyframes",f.innerHTML=
|
|
55
|
+
`;if(typeof document<"u"&&!document.getElementById("magic-sentence-keyframes")){const f=document.createElement("style");f.id="magic-sentence-keyframes",f.innerHTML=Le,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"}},h={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]=l.useState([]),v=l.useCallback((w,H,E)=>{const g=[];w.trim()||g.push({type:"empty",message:"Sentence cannot be empty"}),w.length>41&&g.push({type:"length",message:`Sentence is too long (${w.length}/41 characters)`}),w&&!/^[a-zA-Z0-9\s.,!?;:'"-]*$/.test(w)&&g.push({type:"characters",message:"Only Latin characters, numbers, spaces and punctuation are allowed"});const y=E.findIndex((j,C)=>C!==H&&j.toLowerCase().trim()===w.toLowerCase().trim());return y!==-1&&g.push({type:"duplicate",message:`Duplicate sentence (same as sentence ${y+1})`}),c(g),{isValid:g.length===0,errors:g}},[]),P=l.useCallback(w=>{const H=[];return w.forEach((E,g)=>{const _=v(E,g,w);H.push(..._.errors.map(y=>({...y,message:`Sentence ${g+1}: ${y.message}`})))}),{isValid:H.length===0,errors:H}},[v]),W=l.useCallback(()=>{c([])},[]);return{errors:f,validateSentence:v,validateAllSentences:P,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)},Ne=()=>{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(f)},Ne=f=>[...f].sort(()=>Math.random()-.5);function Be(f={}){const{logoUrl:c,showLogo:v=!0,baseURL:P}=f,W=d.useRef(null),{validateAllSentences:w,errors:H}=Pe(),E=()=>r||window.innerWidth<768,g=()=>r||window.innerWidth<768||window.innerWidth>=320&&window.innerWidth<=932&&window.innerHeight>=390&&window.innerHeight<=932,_=(t="medium")=>{if(!g())return{padding:"12px 24px",fontSize:"16px",minWidth:"auto"};switch(t){case"small":return{padding:"4px 6px",fontSize:"9px",minWidth:"40px"};case"medium":return{padding:"5px 8px",fontSize:"10px",minWidth:"50px"};case"large":return{padding:"6px 10px",fontSize:"11px",minWidth:"60px"}}};d.useEffect(()=>(Le(),()=>{document.body.style.overflow=""}),[]);const[y,T]=d.useState("select"),[C,G]=d.useState(null),[de,he]=d.useState(null),[R,V]=d.useState([]),[O,me]=d.useState(0),[le,we]=d.useState([]),[j,ce]=d.useState([]),[L,X]=d.useState(20),[Y,Z]=d.useState(0),[xe,ue]=d.useState(null),[N,D]=d.useState(null),[u,U]=d.useState(!1),[Q,ye]=d.useState(Number(localStorage.getItem("magicSentenceBest"))||0),B=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,Ge]=d.useState(!1),[q,Ye]=d.useState(!1),[$,Ue]=d.useState(!1),[ee,Je]=d.useState(!1),[te,Ve]=d.useState(!1),[ne,Xe]=d.useState(!1),[ie,Ze]=d.useState(!1),[re,Qe]=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,Ee=i===1024&&n===1366,ct=i===1366&&n===1024,ut=i>=1200&&n>=600&&!o;if(ve(ut),Ge(S),Ye(k),Ue(p),Je(m),Ve(oe),Xe(A),Ze(Ee),Qe(ct),b(o),o)z(null),J(1);else if(l)z(null),J(1);else{const pt=Math.min(1e3,Math.min(i,n)*.9);z(pt),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=[...j];const k=t==="bank"?l:S,p=i==="bank"?l:S,m=k.findIndex(Ee=>Ee.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=j.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})}},Ke=t=>{G(t),V(Array(t).fill("")),T("time")},qe=t=>{he(t),T("type")},$e=(t,i)=>{if(i.length>41||i&&!/^[a-zA-Z0-9\s.,!?;:'"-]*$/.test(i))return;const o=[...R];o[t]=i,V(o);const l=w(o);l.isValid||console.warn("Validation errors:",l.errors)},et=t=>t.trim().replace(/\s+/g," "),Ae=t=>t<=3?20:t<=5?18:t<=7?16:t<=9?14:12,tt=()=>{R.some(i=>i.trim().length===0)||(V(i=>i.map(n=>et(n))),Z(0),me(0),ue(null),T("getready"))};d.useEffect(()=>{if(y==="getready"){const t=setTimeout(()=>ke(0),3e3);return()=>clearTimeout(t)}},[y]);const ke=t=>{const i=R[t];if(!i)return;const o=Ne(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),T("play")};d.useEffect(()=>{if(y==="play"&&!u)if(B.current!==null&&window.clearTimeout(B.current),L>0)B.current=window.setTimeout(()=>X(t=>t-1),1e3);else{U(!0);const i=R[O].trim().split(/\s+/),n=j.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()=>{B.current!==null&&window.clearTimeout(B.current)}},[y,L,u,R,O,j]);const nt=(t=!0)=>{if(u&&t){O+1<(C||0)?ke(O+1):(T("results"),setTimeout(()=>We(),600));return}if(t&&!u){const n=R[O].trim().split(/\s+/),o=j.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):(T("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()},it=()=>s.jsxs("div",{style:h.gmCenterScreen,children:[s.jsx("h1",{style:h.gmHeadline1,children:"MAGIC SENTENCE"}),s.jsx("p",{style:h.gmBodyM,children:"Select number of rounds"}),s.jsx("div",{style:{display:"flex",gap:g()?"8px":"16px",justifyContent:"center"},children:[3,4,5].map(t=>s.jsxs("button",{onClick:()=>Ke(t),style:{...h.gmButton,..._("medium")},children:[t," ROUNDS"]},t))})]}),rt=()=>s.jsxs("div",{style:h.gmCenterScreen,children:[s.jsx("h1",{style:h.gmHeadline1,children:"MAGIC SENTENCE"}),s.jsx("p",{style:h.gmBodyM,children:"Select time per round"}),s.jsx("div",{style:{display:"flex",gap:g()?"8px":"16px",justifyContent:"center"},children:[15,20,30].map(t=>s.jsxs("button",{onClick:()=>qe(t),style:{...h.gmButton,..._("medium")},children:[t,"s"]},t))})]}),ot=()=>s.jsxs("div",{style:h.gmCenterScreen,children:[s.jsxs("h2",{style:{...h.gmBodyM,marginBottom:"0px"},children:["Type down ",C," sentence",C&&C>1?"s":""," for your student"]}),s.jsx("p",{style:{...h.gmBodyS,marginBottom:"16px",marginTop:"0px",color:"#6b7280"},children:"Maximum 41 characters per sentence"}),s.jsx("div",{style:{display:"flex",flexDirection:"column",gap:12,width:"auto",minWidth:"fit-content",maxWidth:"600px"},children:R.map((t,i)=>s.jsx("input",{value:t,placeholder:`Sentence ${i+1}`,onChange:n=>$e(i,n.target.value),style:{...h.gmInput,padding:g()?"8px 12px":"12px 16px",fontSize:g()?"14px":"16px",width:"100%",textAlign:"center"}},i))}),s.jsx("button",{onClick:tt,disabled:R.some(t=>t.trim().length===0),style:{...h.gmButton,marginTop:30,background:R.some(t=>t.trim().length===0)?"#ccc":"#ec4c44",cursor:R.some(t=>t.trim().length===0)?"not-allowed":"pointer",..._("large")},children:"PLAY"})]}),st=()=>s.jsxs("div",{style:h.gmReadyWrapper,children:[s.jsx("h1",{style:{...h.gmHeadline1,fontSize:g()?"36px":"72px",color:"#ec4c44",marginBottom:"20px",animation:"pulse 1s ease-in-out infinite"},children:"GET READY"}),s.jsx("div",{style:h.gmHourglass,children:"⏳"})]}),at=()=>s.jsxs("div",{style:h.gmGameLayout,children:[s.jsxs("h2",{style:{marginBottom:g()?"5px":"10px",fontSize:g()?"16px":"20px"},children:["Round ",O+1,"/",C," — ",u?"TIME'S UP!":`Time: ${L}s`]}),s.jsx("div",{style:{width:"60%",height:g()?"8px":"14px",borderRadius:8,background:"#eee",overflow:"hidden",marginBottom:g()?"10px":"20px"},children:s.jsx("div",{style:{height:"100%",width:`${L/(de||20)*100}%`,background:L<=5?"#ec4c44":"#4caf50",transition:"width 1s linear"}})}),s.jsx("div",{onDragOver:t=>t.preventDefault(),onDrop:t=>Se(t,"bank",null),style:{display:"flex",flexWrap:E()?"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:N==="correct"?"2px dashed #4caf50":N==="almost"?"2px dashed #ff9800":N==="wrong"?"2px dashed #f44336":"2px dashed #ccc",borderRadius:r||window.innerWidth<768?"8px":"12px",padding:r||window.innerWidth<768?"8px":"12px",display:"flex",flexWrap:E()?"wrap":"nowrap",alignItems:"center",justifyContent:"center",fontSize:`${Ae(j.length)}px`,background:N==="correct"?"#e8f5e8":N==="almost"?"#fff3e0":N==="wrong"?"#ffebee":"#fafafa",overflowX:E()?"hidden":"auto",whiteSpace:E()?"normal":"nowrap"},children:j.map((t,i)=>s.jsx("span",{draggable:!u,onDragStart:n=>{if(u){n.preventDefault();return}n.dataTransfer.setData("application/x-token",JSON.stringify({from:"selected",id:t.id})),n.dataTransfer.setData("text/plain",t.id)},onDragOver:n=>n.preventDefault(),onDrop:n=>{const o=n.currentTarget.getBoundingClientRect(),l=o.left+o.width/2,S=n.clientX>l?i+1:i;a({list:null,index:null,side:null}),n.stopPropagation(),Se(n,"selected",S)},onDragEnter:n=>{if(u)return;const o=n.currentTarget.getBoundingClientRect(),l=o.left+o.width/2;a({list:"selected",index:i,side:n.clientX>l?"right":"left"})},onDragLeave:()=>a({list:null,index:null,side:null}),onClick:()=>{u||be("selected","bank",t.id,null)},title:u?"Time expired":"Click to remove back to bank",style:{padding:g()?"4px 6px":"6px 10px",margin:g()?"2px":"4px",borderRadius:g()?"4px":"8px",background:u?"#f0f0f0":"#ffe9e7",border:u?"1px solid #ccc":"1px solid #ec4c44",borderLeft:e.list==="selected"&&e.index===i&&e.side==="left"?"3px solid #3b82f6":void 0,borderRight:e.list==="selected"&&e.index===i&&e.side==="right"?"3px solid #3b82f6":void 0,cursor:u?"not-allowed":"pointer",userSelect:"none",fontSize:`${Ae(j.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:()=>nt(!0),disabled:!u&&j.length===0,style:{marginTop:g()?"15px":"30px",fontSize:g()?"14px":"20px",padding:g()?"6px 12px":"10px 24px",borderRadius:g()?"8px":"12px",background:u||j.length>0?"#ec4c44":"#ccc",color:"white",border:"none",cursor:u||j.length>0?"pointer":"not-allowed"},children:"NEXT"})]}),dt=()=>s.jsxs("div",{style:h.gmCenterScreen,children:[s.jsx("h1",{style:{...h.gmHeadline1,marginTop:(r&&window.innerWidth>window.innerHeight||window.innerWidth===896&&window.innerHeight===414||window.innerWidth===844&&window.innerHeight===390||window.innerWidth===926&&window.innerHeight===428||window.innerWidth===932&&window.innerHeight===430||K||q||$||ee||te||ne||ie||re,"0px"),marginBottom:r&&window.innerWidth>window.innerHeight||window.innerWidth===896&&window.innerHeight===414||window.innerWidth===844&&window.innerHeight===390||window.innerWidth===926&&window.innerHeight===428||window.innerWidth===932&&window.innerHeight===430||K||q||$||ee||te||ne||ie||re?"2px":"10px",fontSize:r&&window.innerWidth<=375&&window.innerHeight<=667||window.innerWidth===896&&window.innerHeight===414||window.innerWidth===844&&window.innerHeight===390||window.innerWidth===926&&window.innerHeight===428||window.innerWidth===932&&window.innerHeight===430?"32px":"clamp(28px, 4vw, 40px)"},children:"Game Over 🎯"}),s.jsxs("h2",{style:{...h.gmHeadline2,marginTop:(r&&window.innerWidth>window.innerHeight||window.innerWidth===896&&window.innerHeight===414||window.innerWidth===844&&window.innerHeight===390||window.innerWidth===926&&window.innerHeight===428||window.innerWidth===932&&window.innerHeight===430||K||q||$||ee||te||ne||ie||re,"0px"),marginBottom:r&&window.innerWidth>window.innerHeight||window.innerWidth===896&&window.innerHeight===414||window.innerWidth===844&&window.innerHeight===390||window.innerWidth===926&&window.innerHeight===428||window.innerWidth===932&&window.innerHeight===430||K||q||$||ee||te||ne||ie||re?"2px":"16px",fontSize:r&&window.innerWidth<=375&&window.innerHeight<=667||window.innerWidth===896&&window.innerHeight===414||window.innerWidth===844&&window.innerHeight===390||window.innerWidth===926&&window.innerHeight===428||window.innerWidth===932&&window.innerHeight===430?"18px":"24px"},children:["Your score: ",Y," out of ",C]}),s.jsxs("p",{style:{...h.gmBodyM,color:"#10b981",marginTop:r&&window.innerWidth>window.innerHeight||window.innerWidth===896&&window.innerHeight===414||window.innerWidth===844&&window.innerHeight===390||window.innerWidth===926&&window.innerHeight===428||window.innerWidth===932&&window.innerHeight===430||K||q||$||ee||te||ne||ie||re?"0px":"12px",marginBottom:r&&window.innerWidth>window.innerHeight||window.innerWidth===896&&window.innerHeight===414||window.innerWidth===844&&window.innerHeight===390||window.innerWidth===926&&window.innerHeight===428||window.innerWidth===932&&window.innerHeight===430||K||q||$||ee||te||ne||ie||re?"2px":"16px",fontSize:r&&window.innerWidth<=375&&window.innerHeight<=667||window.innerWidth===896&&window.innerHeight===414||window.innerWidth===844&&window.innerHeight===390||window.innerWidth===926&&window.innerHeight===428||window.innerWidth===932&&window.innerHeight===430?"14px":"16px"},children:["Best score: ",Q]}),s.jsxs("div",{style:{display:"flex",gap:r&&window.innerWidth>window.innerHeight||r&&window.innerWidth<=375&&window.innerHeight<=667||window.innerWidth===896&&window.innerHeight===414||window.innerWidth===844&&window.innerHeight===390||window.innerWidth===926&&window.innerHeight===428||window.innerWidth===932&&window.innerHeight===430?"6px":"12px",marginTop:r&&window.innerWidth>window.innerHeight||r&&window.innerWidth<=375&&window.innerHeight<=667||window.innerWidth===896&&window.innerHeight===414||window.innerWidth===844&&window.innerHeight===390||window.innerWidth===926&&window.innerHeight===428||window.innerWidth===932&&window.innerHeight===430?"2px":window.innerWidth===1366&&window.innerHeight===766||window.innerWidth===1366&&window.innerHeight===768||window.innerWidth===1280&&window.innerHeight===720||window.innerWidth===1440&&window.innerHeight===900||fe?"12px":"24px"},children:[s.jsx("button",{onClick:()=>{We(),F("start"),setTimeout(()=>{T("getready"),ue(null),U(!1)},800)},style:{...h.gmButton,..._("medium")},children:"🔁 Play again"}),s.jsx("button",{onClick:()=>{F("click"),T("select"),G(null),he(null),V([]),Z(0),ce([]),U(!1)},style:{...h.gmButton,..._("medium")},children:"⬅️ Exit"})]})]}),De=c||(P?`${P.endsWith("/")?P.slice(0,-1):P}/logo.svg`:typeof window<"u"&&window.origin?`${window.origin}/browser/speakid/games/magic%20sentence/logo.svg`:null),lt=!r&&v&&!(window.innerWidth>window.innerHeight)&&window.innerHeight>=700;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:[lt&&s.jsx("div",{style:{...h.gmLogoFixed,display:"block"},children:De?s.jsx("img",{src:De,alt:"SPEAKID Logo",style:h.gmLogoImg,loading:"lazy"}):s.jsx("div",{style:h.gmLogoImg,children:"SPEAKID"})}),y==="select"&&it(),y==="time"&&rt(),y==="type"&&ot(),y==="getready"&&st(),y==="play"&&at(),y==="results"&&dt()]})})})})}class Fe 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}}I.ErrorBoundary=Fe,I.announceToScreenReader=M,I.createAriaLabel=He,I.default=Be,I.handleKeyDown=Ce,I.useValidation=Pe,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:P}=f,W=l.useRef(null),{validateAllSentences:w,errors:H}=Pe(),E=()=>r||window.innerWidth<768,g=()=>r||window.innerWidth<768||window.innerWidth>=320&&window.innerWidth<=932&&window.innerHeight>=390&&window.innerHeight<=932,_=(t="medium")=>{if(!g())return{padding:"12px 24px",fontSize:"16px",minWidth:"auto"};switch(t){case"small":return{padding:"4px 6px",fontSize:"9px",minWidth:"40px"};case"medium":return{padding:"5px 8px",fontSize:"10px",minWidth:"50px"};case"large":return{padding:"6px 10px",fontSize:"11px",minWidth:"60px"}}};l.useEffect(()=>(Ne(),()=>{document.body.style.overflow=""}),[]);const[y,j]=l.useState("select"),[C,G]=l.useState(null),[le,he]=l.useState(null),[R,V]=l.useState([]),[O,me]=l.useState(0),[de,we]=l.useState([]),[I,ce]=l.useState([]),[L,X]=l.useState(20),[Y,Z]=l.useState(0),[xe,ue]=l.useState(null),[N,D]=l.useState(null),[u,U]=l.useState(!1),[Q,ye]=l.useState(Number(localStorage.getItem("magicSentenceBest"))||0),B=l.useRef(null),[e,a]=l.useState({list:null,index:null,side:null}),[r,b]=l.useState(!1),[pe,J]=l.useState(1),[x,z]=l.useState(null),[fe,ve]=l.useState(!1),[K,Ge]=l.useState(!1),[q,Ye]=l.useState(!1),[$,Ue]=l.useState(!1),[ee,Je]=l.useState(!1),[te,Ve]=l.useState(!1),[ne,Xe]=l.useState(!1),[ie,Ze]=l.useState(!1),[re,Qe]=l.useState(!1);l.useEffect(()=>{const t=()=>{const i=window.innerWidth,n=window.innerHeight,o=i<768||i===926&&n===428||i===932&&n===430,d=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,Ee=i===1024&&n===1366,ct=i===1366&&n===1024,ut=i>=1200&&n>=600&&!o;if(ve(ut),Ge(S),Ye(k),Ue(p),Je(m),Ve(oe),Xe(A),Ze(Ee),Qe(ct),b(o),o)z(null),J(1);else if(d)z(null),J(1);else{const pt=Math.min(1e3,Math.min(i,n)*.9);z(pt),J(1)}};return t(),window.addEventListener("resize",t),()=>window.removeEventListener("resize",t)},[]);const be=(t,i,n,o)=>{if(u)return;let d=[...de],S=[...I];const k=t==="bank"?d:S,p=i==="bank"?d:S,m=k.findIndex(Ee=>Ee.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"?d=k:S=k,i==="bank"?d=p:S=p,we(d),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 d=t.dataTransfer.getData("text/plain");if(!d)return"";const S=de.some(m=>m.id===d),k=I.some(m=>m.id===d),p=S?"bank":k?"selected":null;return p?JSON.stringify({from:p,id:d}):""})();if(o){try{const d=JSON.parse(o);if(!d||!d.id||!d.from)return;be(d.from,i,d.id,n)}catch{}a({list:null,index:null,side:null})}},Ke=t=>{G(t),V(Array(t).fill("")),j("time")},qe=t=>{he(t),j("type")},$e=(t,i)=>{if(i.length>41||i&&!/^[a-zA-Z0-9\s.,!?;:'"-]*$/.test(i))return;const o=[...R];o[t]=i,V(o);const d=w(o);d.isValid||console.warn("Validation errors:",d.errors)},et=t=>t.trim().replace(/\s+/g," "),De=t=>t<=3?20:t<=5?18:t<=7?16:t<=9?14:12,tt=()=>{R.some(i=>i.trim().length===0)||(V(i=>i.map(n=>et(n))),Z(0),me(0),ue(null),j("getready"))};l.useEffect(()=>{if(y==="getready"){const t=setTimeout(()=>ke(0),3e3);return()=>clearTimeout(t)}},[y]);const ke=t=>{const i=R[t];if(!i)return;const o=Be(i.trim().split(/\s+/).filter(Boolean)).map((d,S)=>({id:`${Date.now()}-${t}-${S}-${Math.random().toString(36).slice(2)}`,text:d}));we(o),ce([]),me(t),X(le||20),D(null),U(!1),j("play")};l.useEffect(()=>{if(y==="play"&&!u)if(B.current!==null&&window.clearTimeout(B.current),L>0)B.current=window.setTimeout(()=>X(t=>t-1),1e3);else{U(!0);const i=R[O].trim().split(/\s+/),n=I.map(p=>p.text),o=i.filter(p=>!n.includes(p)).length,d=n.filter(p=>!i.includes(p)).length,S=i.filter((p,m)=>p!==n[m]).length,k=o+d+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()=>{B.current!==null&&window.clearTimeout(B.current)}},[y,L,u,R,O,I]);const nt=(t=!0)=>{if(u&&t){O+1<(C||0)?ke(O+1):(j("results"),setTimeout(()=>We(),600));return}if(t&&!u){const n=R[O].trim().split(/\s+/),o=I.map(m=>m.text),d=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=d+S+k;p===0&&L>0?(Z(m=>m+1),D("correct"),F("correct"),M("Correct! Well done!")):p===1?(Z(m=>m+.5),D("almost"),F("half"),M("Almost correct! Just one mistake.")):(D("wrong"),F("wrong"),M("Not quite right. Keep trying!")),O+1<(C||0)?setTimeout(()=>ke(O+1),800):(j("results"),setTimeout(()=>We(),600))}};l.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"),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 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=()=>{d.clearRect(0,0,o.width,o.height),S.forEach(p=>{d.fillStyle=p.color,d.beginPath(),d.ellipse(p.x,p.y,p.size,p.size/2,p.tilt,0,2*Math.PI),d.fill(),p.y+=p.speed,p.x+=Math.sin(p.tilt)}),Date.now()<i?requestAnimationFrame(k):document.body.removeChild(o)};k()},it=()=>s.jsxs("div",{style:h.gmCenterScreen,children:[s.jsx("h1",{style:h.gmHeadline1,children:"MAGIC SENTENCE"}),s.jsx("p",{style:h.gmBodyM,children:"Select number of rounds"}),s.jsx("div",{style:{display:"flex",gap:g()?"8px":"16px",justifyContent:"center"},children:[3,4,5].map(t=>s.jsxs("button",{onClick:()=>Ke(t),style:{...h.gmButton,..._("medium")},children:[t," ROUNDS"]},t))})]}),rt=()=>s.jsxs("div",{style:h.gmCenterScreen,children:[s.jsx("h1",{style:h.gmHeadline1,children:"MAGIC SENTENCE"}),s.jsx("p",{style:h.gmBodyM,children:"Select time per round"}),s.jsx("div",{style:{display:"flex",gap:g()?"8px":"16px",justifyContent:"center"},children:[15,20,30].map(t=>s.jsxs("button",{onClick:()=>qe(t),style:{...h.gmButton,..._("medium")},children:[t,"s"]},t))})]}),ot=()=>s.jsxs("div",{style:h.gmCenterScreen,children:[s.jsxs("h2",{style:{...h.gmBodyM,marginBottom:"0px"},children:["Type down ",C," sentence",C&&C>1?"s":""," for your student"]}),s.jsx("p",{style:{...h.gmBodyS,marginBottom:"16px",marginTop:"0px",color:"#6b7280"},children:"Maximum 41 characters per sentence"}),s.jsx("div",{style:{display:"flex",flexDirection:"column",gap:12,width:"auto",minWidth:"fit-content",maxWidth:"600px"},children:R.map((t,i)=>s.jsx("input",{value:t,placeholder:`Sentence ${i+1}`,onChange:n=>$e(i,n.target.value),style:{...h.gmInput,padding:g()?"8px 12px":"12px 16px",fontSize:g()?"14px":"16px",width:"100%",textAlign:"center"}},i))}),s.jsx("button",{onClick:tt,disabled:R.some(t=>t.trim().length===0),style:{...h.gmButton,marginTop:30,background:R.some(t=>t.trim().length===0)?"#ccc":"#ec4c44",cursor:R.some(t=>t.trim().length===0)?"not-allowed":"pointer",..._("large")},children:"PLAY"})]}),st=()=>s.jsxs("div",{style:h.gmReadyWrapper,children:[s.jsx("h1",{style:{...h.gmHeadline1,fontSize:g()?"36px":"72px",color:"#ec4c44",marginBottom:"20px",animation:"pulse 1s ease-in-out infinite"},children:"GET READY"}),s.jsx("div",{style:h.gmHourglass,children:"⏳"})]}),at=()=>s.jsxs("div",{style:h.gmGameLayout,children:[s.jsxs("h2",{style:{marginBottom:g()?"5px":"10px",fontSize:g()?"16px":"20px"},children:["Round ",O+1,"/",C," — ",u?"TIME'S UP!":`Time: ${L}s`]}),s.jsx("div",{style:{width:"60%",height:g()?"8px":"14px",borderRadius:8,background:"#eee",overflow:"hidden",marginBottom:g()?"10px":"20px"},children:s.jsx("div",{style:{height:"100%",width:`${L/(le||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:E()?"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:de.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(),d=o.left+o.width/2,S=n.clientX>d?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(),d=o.left+o.width/2;a({list:"bank",index:i,side:n.clientX>d?"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:N==="correct"?"2px dashed #4caf50":N==="almost"?"2px dashed #ff9800":N==="wrong"?"2px dashed #f44336":"2px dashed #ccc",borderRadius:r||window.innerWidth<768?"8px":"12px",padding:r||window.innerWidth<768?"8px":"12px",display:"flex",flexWrap:E()?"wrap":"nowrap",alignItems:"center",justifyContent:"center",fontSize:`${De(I.length)}px`,background:N==="correct"?"#e8f5e8":N==="almost"?"#fff3e0":N==="wrong"?"#ffebee":"#fafafa",overflowX:E()?"hidden":"auto",whiteSpace:E()?"normal":"nowrap"},children:I.map((t,i)=>s.jsx("span",{draggable:!u,onDragStart:n=>{if(u){n.preventDefault();return}n.dataTransfer.setData("application/x-token",JSON.stringify({from:"selected",id:t.id})),n.dataTransfer.setData("text/plain",t.id)},onDragOver:n=>n.preventDefault(),onDrop:n=>{const o=n.currentTarget.getBoundingClientRect(),d=o.left+o.width/2,S=n.clientX>d?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(),d=o.left+o.width/2;a({list:"selected",index:i,side:n.clientX>d?"right":"left"})},onDragLeave:()=>a({list:null,index:null,side:null}),onClick:()=>{u||be("selected","bank",t.id,null)},title:u?"Time expired":"Click to remove back to bank",style:{padding:g()?"4px 6px":"6px 10px",margin:g()?"2px":"4px",borderRadius:g()?"4px":"8px",background:u?"#f0f0f0":"#ffe9e7",border:u?"1px solid #ccc":"1px solid #ec4c44",borderLeft:e.list==="selected"&&e.index===i&&e.side==="left"?"3px solid #3b82f6":void 0,borderRight:e.list==="selected"&&e.index===i&&e.side==="right"?"3px solid #3b82f6":void 0,cursor:u?"not-allowed":"pointer",userSelect:"none",fontSize:`${De(I.length)}px`,fontFamily:'"Roboto", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif',whiteSpace:"nowrap",opacity:u?.6:1,transition:"opacity 0.3s ease"},children:t.text},t.id))}),s.jsx("button",{onClick:()=>nt(!0),disabled:!u&&I.length===0,style:{marginTop:g()?"15px":"30px",fontSize:g()?"14px":"20px",padding:g()?"6px 12px":"10px 24px",borderRadius:g()?"8px":"12px",background:u||I.length>0?"#ec4c44":"#ccc",color:"white",border:"none",cursor:u||I.length>0?"pointer":"not-allowed"},children:"NEXT"})]}),lt=()=>s.jsxs("div",{style:h.gmCenterScreen,children:[s.jsx("h1",{style:{...h.gmHeadline1,marginTop:(r&&window.innerWidth>window.innerHeight||window.innerWidth===896&&window.innerHeight===414||window.innerWidth===844&&window.innerHeight===390||window.innerWidth===926&&window.innerHeight===428||window.innerWidth===932&&window.innerHeight===430||K||q||$||ee||te||ne||ie||re,"0px"),marginBottom:r&&window.innerWidth>window.innerHeight||window.innerWidth===896&&window.innerHeight===414||window.innerWidth===844&&window.innerHeight===390||window.innerWidth===926&&window.innerHeight===428||window.innerWidth===932&&window.innerHeight===430||K||q||$||ee||te||ne||ie||re?"2px":"10px",fontSize:r&&window.innerWidth<=375&&window.innerHeight<=667||window.innerWidth===896&&window.innerHeight===414||window.innerWidth===844&&window.innerHeight===390||window.innerWidth===926&&window.innerHeight===428||window.innerWidth===932&&window.innerHeight===430?"32px":"clamp(28px, 4vw, 40px)"},children:"Game Over 🎯"}),s.jsxs("h2",{style:{...h.gmHeadline2,marginTop:(r&&window.innerWidth>window.innerHeight||window.innerWidth===896&&window.innerHeight===414||window.innerWidth===844&&window.innerHeight===390||window.innerWidth===926&&window.innerHeight===428||window.innerWidth===932&&window.innerHeight===430||K||q||$||ee||te||ne||ie||re,"0px"),marginBottom:r&&window.innerWidth>window.innerHeight||window.innerWidth===896&&window.innerHeight===414||window.innerWidth===844&&window.innerHeight===390||window.innerWidth===926&&window.innerHeight===428||window.innerWidth===932&&window.innerHeight===430||K||q||$||ee||te||ne||ie||re?"2px":"16px",fontSize:r&&window.innerWidth<=375&&window.innerHeight<=667||window.innerWidth===896&&window.innerHeight===414||window.innerWidth===844&&window.innerHeight===390||window.innerWidth===926&&window.innerHeight===428||window.innerWidth===932&&window.innerHeight===430?"18px":"24px"},children:["Your score: ",Y," out of ",C]}),s.jsxs("p",{style:{...h.gmBodyM,color:"#10b981",marginTop:r&&window.innerWidth>window.innerHeight||window.innerWidth===896&&window.innerHeight===414||window.innerWidth===844&&window.innerHeight===390||window.innerWidth===926&&window.innerHeight===428||window.innerWidth===932&&window.innerHeight===430||K||q||$||ee||te||ne||ie||re?"0px":"12px",marginBottom:r&&window.innerWidth>window.innerHeight||window.innerWidth===896&&window.innerHeight===414||window.innerWidth===844&&window.innerHeight===390||window.innerWidth===926&&window.innerHeight===428||window.innerWidth===932&&window.innerHeight===430||K||q||$||ee||te||ne||ie||re?"2px":"16px",fontSize:r&&window.innerWidth<=375&&window.innerHeight<=667||window.innerWidth===896&&window.innerHeight===414||window.innerWidth===844&&window.innerHeight===390||window.innerWidth===926&&window.innerHeight===428||window.innerWidth===932&&window.innerHeight===430?"14px":"16px"},children:["Best score: ",Q]}),s.jsxs("div",{style:{display:"flex",gap:r&&window.innerWidth>window.innerHeight||r&&window.innerWidth<=375&&window.innerHeight<=667||window.innerWidth===896&&window.innerHeight===414||window.innerWidth===844&&window.innerHeight===390||window.innerWidth===926&&window.innerHeight===428||window.innerWidth===932&&window.innerHeight===430?"6px":"12px",marginTop:r&&window.innerWidth>window.innerHeight||r&&window.innerWidth<=375&&window.innerHeight<=667||window.innerWidth===896&&window.innerHeight===414||window.innerWidth===844&&window.innerHeight===390||window.innerWidth===926&&window.innerHeight===428||window.innerWidth===932&&window.innerHeight===430?"2px":window.innerWidth===1366&&window.innerHeight===766||window.innerWidth===1366&&window.innerHeight===768||window.innerWidth===1280&&window.innerHeight===720||window.innerWidth===1440&&window.innerHeight===900||fe?"12px":"24px"},children:[s.jsx("button",{onClick:()=>{We(),F("start"),setTimeout(()=>{j("getready"),ue(null),U(!1)},800)},style:{...h.gmButton,..._("medium")},children:"🔁 Play again"}),s.jsx("button",{onClick:()=>{F("click"),j("select"),G(null),he(null),V([]),Z(0),ce([]),U(!1)},style:{...h.gmButton,..._("medium")},children:"⬅️ Exit"})]})]}),_e=c||(P?`${P.endsWith("/")?P.slice(0,-1):P}/logo.svg`:typeof window<"u"&&window.origin?`${window.origin}/browser/speakid/games/magic%20sentence/logo.svg`:null),dt=!r&&v&&!(window.innerWidth>window.innerHeight)&&window.innerHeight>=700;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:[dt?s.jsx("div",{style:{...h.gmLogoFixed,display:"block"},children:_e?s.jsx("img",{src:_e,alt:"SPEAKID Logo",style:h.gmLogoImg,loading:"lazy"}):s.jsx("div",{style:h.gmLogoImg,children:"SPEAKID"})}):null,y==="select"?it():null,y==="time"?rt():null,y==="type"?ot():null,y==="getready"?st():null,y==="play"?at():null,y==="results"?lt():null]})})})})}class Fe extends l.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=Fe,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
|