@mblinkov/whats-missing 20.0.7 → 20.0.8
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/whats-missing.cjs.js +20 -5
- package/dist/whats-missing.es.js +40 -25
- package/package.json +1 -1
- package/src/Game.tsx +20 -6
|
@@ -4,15 +4,30 @@
|
|
|
4
4
|
to { transform: rotate(360deg); }
|
|
5
5
|
}
|
|
6
6
|
`;if(typeof document<"u"&&!document.getElementById("spin-keyframes")){const r=document.createElement("style");r.id="spin-keyframes",r.innerHTML=ae,document.head.appendChild(r)}const le={animation:"spin 1.4s linear infinite"},s={gmCenterScreen:{position:"relative",zIndex:1,minHeight:"100vh",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%"},gmHeadline3:{fontWeight:600,fontSize:"18px",lineHeight:"130%"},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"},gmButtonActive:{background:"#333",color:"#fff"},gmGameLayout:{position:"relative",width:"100%",maxWidth:"600px",minHeight:"100vh",display:"flex",flexDirection:"column",alignItems:"center",justifyContent:"center",textAlign:"center",color:"#1f2937",padding:"16px 8px",margin:"0 auto"},gmGrid:{width:"100%",maxWidth:"calc(210px * 3 + 20px * 2)",margin:"0 auto",display:"grid",gridTemplateColumns:"repeat(3, 210px)",gridAutoRows:"210px",gap:"20px",justifyContent:"center"},gmCard:{border:"1px solid #e5e7eb",borderRadius:"16px",background:"#f9f9f9",aspectRatio:"1 / 1",display:"flex",alignItems:"center",justifyContent:"center",overflow:"hidden",transition:"transform .2s ease, box-shadow .2s ease, border-color .2s ease"},gmCorrect:{border:"2px solid #10b981",boxShadow:"0 0 18px rgba(16,185,129,.45)",background:"#ecfdf5"},gmWrong:{border:"2px solid #ec4c44",boxShadow:"0 0 18px rgba(236,76,68,.35)",background:"#fef2f2"},gmInput:{padding:"6px 10px",borderRadius:"6px",border:"1px solid #ccc",fontSize:"16px",fontFamily:'"Geist", system-ui',width:"160px"},gmTable:{marginTop:"20px",marginBottom:"32px",borderCollapse:"collapse",width:"100%",maxWidth:"520px",tableLayout:"fixed",textAlign:"center"},gmTableCell:{padding:"8px 12px",borderBottom:"1px solid #e5e7eb",whiteSpace:"nowrap",overflow:"hidden",textOverflow:"ellipsis"},gmLogoFixed:{position:"absolute",top:"16px",left:"24px",width:"120px",zIndex:10,pointerEvents:"none",background:"transparent",transform:"none",willChange:"auto"},gmLogoImg:{height:"clamp(28px, 5vw, 40px)",width:"auto",background:"transparent",objectFit:"contain",imageRendering:"auto",transform:"translateZ(0)",backfaceVisibility:"hidden",WebkitFontSmoothing:"antialiased"},gmHourglass:{fontSize:"42px",...le}},de=()=>{const r=document.createElement("style");r.textContent=`
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
7
|
+
html, body {
|
|
8
|
+
margin: 0;
|
|
9
|
+
padding: 0;
|
|
10
|
+
width: 100%;
|
|
11
|
+
height: 100%;
|
|
12
|
+
background: linear-gradient(to bottom, #fff8f8 0%, #f9fafb 100%) !important;
|
|
10
13
|
}
|
|
11
14
|
|
|
12
15
|
#whats-missing-root {
|
|
16
|
+
all: unset;
|
|
17
|
+
display: block;
|
|
18
|
+
width: 100vw;
|
|
19
|
+
min-height: 100vh;
|
|
20
|
+
margin: 0;
|
|
21
|
+
padding: 0;
|
|
22
|
+
background: linear-gradient(to bottom, #fff8f8 0%, #f9fafb 100%);
|
|
23
|
+
background-attachment: fixed;
|
|
13
24
|
color: #1f2937;
|
|
14
25
|
text-align: center;
|
|
15
|
-
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
#whats-missing-root, #whats-missing-root * {
|
|
29
|
+
box-sizing: border-box;
|
|
30
|
+
font-family: "Geist", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
|
|
16
31
|
}
|
|
17
32
|
|
|
18
33
|
#whats-missing-root img {
|
|
@@ -26,4 +41,4 @@
|
|
|
26
41
|
from { transform: rotate(0deg); }
|
|
27
42
|
to { transform: rotate(360deg); }
|
|
28
43
|
}
|
|
29
|
-
`,document.head.appendChild(r)},ce=(r,c)=>{const a=Array.from({length:r.length+1},()=>Array(c.length+1).fill(0));for(let o=0;o<=r.length;o++)a[o][0]=o;for(let o=0;o<=c.length;o++)a[0][o]=o;for(let o=1;o<=r.length;o++)for(let l=1;l<=c.length;l++)a[o][l]=r[o-1]===c[l-1]?a[o-1][l-1]:Math.min(a[o-1][l-1],a[o][l-1],a[o-1][l])+1;return a[r.length][c.length]};function me(){n.useEffect(()=>{de()},[]);const[r,c]=n.useState(null),[a,o]=n.useState([]),[l,_]=n.useState(4),[h,L]=n.useState(!1),[
|
|
44
|
+
`,document.head.appendChild(r)},ce=(r,c)=>{const a=Array.from({length:r.length+1},()=>Array(c.length+1).fill(0));for(let o=0;o<=r.length;o++)a[o][0]=o;for(let o=0;o<=c.length;o++)a[0][o]=o;for(let o=1;o<=r.length;o++)for(let l=1;l<=c.length;l++)a[o][l]=r[o-1]===c[l-1]?a[o-1][l-1]:Math.min(a[o-1][l-1],a[o][l-1],a[o-1][l])+1;return a[r.length][c.length]};function me(){n.useEffect(()=>{de()},[]);const[r,c]=n.useState(null),[a,o]=n.useState([]),[l,_]=n.useState(4),[h,L]=n.useState(!1),[x,W]=n.useState(1),[u,$]=n.useState(null),[m,y]=n.useState("ready"),[E,G]=n.useState(3),[k,C]=n.useState(7),[v,F]=n.useState(20),[K,T]=n.useState(0),[b,z]=n.useState(!1),[w,D]=n.useState(""),[p,R]=n.useState(!1),[I,q]=n.useState(!1),[P,f]=n.useState(null),[Z,A]=n.useState([]),[J,U]=n.useState([]),[j,Q]=n.useState(!1);n.useEffect(()=>{const t=()=>Q(window.innerWidth<768);return t(),window.addEventListener("resize",t),()=>window.removeEventListener("resize",t)},[]);const Y=t=>[...t].sort(()=>Math.random()-.5).slice(0,6),N=()=>{if(!r)return;const t=Y(B[r]);o(t),L(!0),z(!1),W(1),T(0),A([]),U([]),O(t,[],!0)},O=(t=a,i=J,g=!1)=>{const d=Y(t.length?t:B[r]);let S=Math.floor(Math.random()*d.length),H=d[S].name,V=0;for(;i.includes(H)&&V<20;)S=Math.floor(Math.random()*d.length),H=d[S].name,V++;o(d),$(S),U([...i,H]),R(!1),D(""),F(20),f(null),g?(y("ready"),G(3),C(7)):(y("memorize"),C(7))};n.useEffect(()=>{if(!(!h||b||p)){if(m==="ready")if(E<=0)y("memorize");else{const t=setTimeout(()=>G(i=>i-1),1e3);return()=>clearTimeout(t)}if(m==="memorize")if(k<=0)y("guess");else{const t=setTimeout(()=>C(i=>i-1),1e3);return()=>clearTimeout(t)}if(m==="guess"){if(v<=0){R(!0),f("wrong");const i=a[u].name;A(g=>[...g,{round:x,answer:w,correct:i,result:"wrong"}]);return}const t=setTimeout(()=>F(i=>i-1),1e3);return()=>clearTimeout(t)}}},[m,E,k,v,h,b,p,a,u,x,w]);const X=()=>{if(u===null||I)return;const t=a[u].name,i=w.toLowerCase().trim();let g="wrong";i===t?(T(d=>d+1),f("correct"),g="correct"):ce(i,t)===1?(T(d=>d+.5),f("almost"),g="almost"):(f("wrong"),g="wrong"),A(d=>[...d,{round:x,answer:i,correct:t,result:g}]),q(!0),setTimeout(()=>{q(!1),R(!0)},600)},ee=()=>x<l?(W(t=>t+1),O()):z(!0),te=()=>{L(!1),z(!1),c(null)},se=n.useMemo(()=>e.jsx("div",{style:s.gmLogoFixed,children:e.jsxs("picture",{children:[e.jsx("source",{srcSet:window.origin+"/cloud/speakid/games/whatsmissing/logo.svg",type:"image/svg+xml"}),e.jsx("img",{src:window.origin+"/cloud/speakid/games/whatsmissing/logo.png",alt:"SPEAKID Logo",style:s.gmLogoImg,loading:"lazy"})]})}),[]);return e.jsxs("div",{id:"whats-missing-root",children:[!j&&se,!r&&!h&&e.jsxs("div",{style:s.gmCenterScreen,children:[e.jsx("h1",{style:s.gmHeadline1,children:"WHAT'S MISSING?"}),e.jsx("p",{style:s.gmBodyM,children:"Select a theme:"}),e.jsx("div",{style:{display:"flex",gap:16},children:["animals","food","toys"].map(t=>e.jsx("button",{style:s.gmButton,onClick:()=>c(t),children:t==="animals"?"🐶 Animals":t==="food"?"🍎 Food":"🧸 Toys"},t))}),e.jsxs("div",{style:{marginTop:24},children:[e.jsx("p",{style:s.gmBodyS,children:"Choose number of rounds:"}),e.jsx("div",{style:{display:"flex",gap:12,marginTop:8},children:[3,4,5].map(t=>e.jsx("button",{style:{...s.gmButton,...l===t?s.gmButtonActive:{}},onClick:()=>_(t),children:t},t))})]})]}),r&&!h&&e.jsxs("div",{style:s.gmCenterScreen,children:[e.jsxs("h1",{style:s.gmHeadline1,children:["Theme selected: ",r]}),e.jsxs("p",{style:s.gmBodyM,children:["Rounds: ",l]}),e.jsx("button",{style:s.gmButton,onClick:N,children:"▶ Start game"})]}),b&&e.jsxs("div",{style:s.gmCenterScreen,children:[e.jsx("h1",{style:s.gmHeadline1,children:"Results"}),e.jsxs("h2",{style:s.gmHeadline3,children:["Your score: ",K," / ",l]}),e.jsxs("table",{style:s.gmTable,children:[e.jsx("thead",{children:e.jsxs("tr",{children:[e.jsx("th",{children:"Round"}),e.jsx("th",{children:"Your Answer"}),e.jsx("th",{children:"Correct"}),e.jsx("th",{children:"Result"})]})}),e.jsx("tbody",{children:Z.map((t,i)=>e.jsxs("tr",{children:[e.jsx("td",{style:s.gmTableCell,children:t.round}),e.jsx("td",{style:s.gmTableCell,children:t.answer||"—"}),e.jsx("td",{style:s.gmTableCell,children:t.correct}),e.jsx("td",{style:s.gmTableCell,children:t.result==="correct"?"✔ Correct":t.result==="almost"?"◐ Almost (0.5)":"✘ Wrong"})]},i))})]}),e.jsxs("div",{style:{display:"flex",gap:12,marginTop:24},children:[e.jsx("button",{style:s.gmButton,onClick:N,children:"🔁 Play again"}),e.jsx("button",{style:s.gmButton,onClick:te,children:"⬅️ Choose theme"})]})]}),h&&!b&&e.jsxs("div",{style:s.gmGameLayout,children:[e.jsxs("div",{style:{minHeight:160,display:"flex",flexDirection:"column",justifyContent:"center",alignItems:"center"},children:[m==="ready"&&e.jsxs(e.Fragment,{children:[e.jsx("h1",{style:{...s.gmHeadline1,color:"#ec4c44"},children:"GET READY"}),e.jsx("div",{style:s.gmHourglass,children:"⏳"})]}),m==="memorize"&&e.jsxs("p",{style:{...s.gmBodyM,color:"#10b981"},children:["MEMORIZE (",k,")"]}),m==="guess"&&!p&&e.jsxs("p",{style:s.gmBodyM,children:["⏳ Time left: ",v,"s"]})]}),m!=="ready"&&e.jsx("div",{style:{...s.gmGrid,gridTemplateColumns:j?"repeat(2, 1fr)":"repeat(3, 210px)",gridAutoRows:j?"150px":"210px",gap:j?"12px":"20px",justifyItems:"center",...window.innerWidth>2e3?{gridTemplateColumns:"repeat(3, 260px)",gridAutoRows:"260px",gap:"28px"}:{},...window.innerWidth>2560?{gridTemplateColumns:"repeat(3, 300px)",gridAutoRows:"300px",gap:"32px"}:{}},children:a.map((t,i)=>{const g=u===i&&m==="guess"&&!p;return e.jsx("div",{style:{...s.gmCard,...P==="correct"&&u===i?s.gmCorrect:{},...P==="wrong"&&u===i?s.gmWrong:{}},children:!g&&e.jsx("img",{src:t.src,alt:t.name,style:{width:"100%",height:"100%",objectFit:"cover"}})},i)})}),e.jsxs("div",{style:{marginTop:16,height:80},children:[m==="guess"&&!p&&e.jsxs("div",{children:[e.jsx("input",{type:"text",placeholder:"Type the missing word",value:w,onChange:t=>D(t.target.value),style:s.gmInput}),e.jsx("button",{style:{...s.gmButton,marginLeft:8},onClick:X,disabled:I,children:I?"...":"Check"})]}),p&&e.jsx("button",{style:s.gmButton,onClick:ee,children:"Next round"})]})]})]})}exports.Game=me;exports.themes=B;
|
package/dist/whats-missing.es.js
CHANGED
|
@@ -238,15 +238,30 @@ const ge = {
|
|
|
238
238
|
}, pe = () => {
|
|
239
239
|
const r = document.createElement("style");
|
|
240
240
|
r.textContent = `
|
|
241
|
-
|
|
242
|
-
|
|
243
|
-
|
|
241
|
+
html, body {
|
|
242
|
+
margin: 0;
|
|
243
|
+
padding: 0;
|
|
244
|
+
width: 100%;
|
|
245
|
+
height: 100%;
|
|
246
|
+
background: linear-gradient(to bottom, #fff8f8 0%, #f9fafb 100%) !important;
|
|
244
247
|
}
|
|
245
248
|
|
|
246
249
|
#whats-missing-root {
|
|
250
|
+
all: unset;
|
|
251
|
+
display: block;
|
|
252
|
+
width: 100vw;
|
|
253
|
+
min-height: 100vh;
|
|
254
|
+
margin: 0;
|
|
255
|
+
padding: 0;
|
|
256
|
+
background: linear-gradient(to bottom, #fff8f8 0%, #f9fafb 100%);
|
|
257
|
+
background-attachment: fixed;
|
|
247
258
|
color: #1f2937;
|
|
248
259
|
text-align: center;
|
|
249
|
-
|
|
260
|
+
}
|
|
261
|
+
|
|
262
|
+
#whats-missing-root, #whats-missing-root * {
|
|
263
|
+
box-sizing: border-box;
|
|
264
|
+
font-family: "Geist", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
|
|
250
265
|
}
|
|
251
266
|
|
|
252
267
|
#whats-missing-root img {
|
|
@@ -261,7 +276,7 @@ const ge = {
|
|
|
261
276
|
to { transform: rotate(360deg); }
|
|
262
277
|
}
|
|
263
278
|
`, document.head.appendChild(r);
|
|
264
|
-
},
|
|
279
|
+
}, he = (r, m) => {
|
|
265
280
|
const a = Array.from({ length: r.length + 1 }, () => Array(m.length + 1).fill(0));
|
|
266
281
|
for (let n = 0; n <= r.length; n++) a[n][0] = n;
|
|
267
282
|
for (let n = 0; n <= m.length; n++) a[0][n] = n;
|
|
@@ -274,7 +289,7 @@ function ye() {
|
|
|
274
289
|
L(() => {
|
|
275
290
|
pe();
|
|
276
291
|
}, []);
|
|
277
|
-
const [r, m] = l(null), [a, n] = l([]), [d, O] = l(4), [f, j] = l(!1), [x, E] = l(1), [
|
|
292
|
+
const [r, m] = l(null), [a, n] = l([]), [d, O] = l(4), [f, j] = l(!1), [x, E] = l(1), [h, Z] = l(null), [g, b] = l("ready"), [G, F] = l(3), [T, S] = l(7), [z, D] = l(20), [J, R] = l(0), [w, I] = l(!1), [k, U] = l(""), [u, A] = l(!1), [H, Y] = l(!1), [N, y] = l(null), [Q, M] = l([]), [X, P] = l([]), [C, ee] = l(!1);
|
|
278
293
|
L(() => {
|
|
279
294
|
const e = () => ee(window.innerWidth < 768);
|
|
280
295
|
return e(), window.addEventListener("resize", e), () => window.removeEventListener("resize", e);
|
|
@@ -285,13 +300,13 @@ function ye() {
|
|
|
285
300
|
n(e), j(!0), I(!1), E(1), R(0), M([]), P([]), $(e, [], !0);
|
|
286
301
|
}, $ = (e = a, i = X, p = !1) => {
|
|
287
302
|
const c = V(e.length ? e : K[r]);
|
|
288
|
-
let
|
|
303
|
+
let v = Math.floor(Math.random() * c.length), B = c[v].name, q = 0;
|
|
289
304
|
for (; i.includes(B) && q < 20; )
|
|
290
|
-
|
|
291
|
-
n(c), Z(
|
|
305
|
+
v = Math.floor(Math.random() * c.length), B = c[v].name, q++;
|
|
306
|
+
n(c), Z(v), P([...i, B]), A(!1), U(""), D(20), y(null), p ? (b("ready"), F(3), S(7)) : (b("memorize"), S(7));
|
|
292
307
|
};
|
|
293
308
|
L(() => {
|
|
294
|
-
if (!(!f || w ||
|
|
309
|
+
if (!(!f || w || u)) {
|
|
295
310
|
if (g === "ready")
|
|
296
311
|
if (G <= 0)
|
|
297
312
|
b("memorize");
|
|
@@ -300,7 +315,7 @@ function ye() {
|
|
|
300
315
|
return () => clearTimeout(e);
|
|
301
316
|
}
|
|
302
317
|
if (g === "memorize")
|
|
303
|
-
if (
|
|
318
|
+
if (T <= 0)
|
|
304
319
|
b("guess");
|
|
305
320
|
else {
|
|
306
321
|
const e = setTimeout(() => S((i) => i - 1), 1e3);
|
|
@@ -309,7 +324,7 @@ function ye() {
|
|
|
309
324
|
if (g === "guess") {
|
|
310
325
|
if (z <= 0) {
|
|
311
326
|
A(!0), y("wrong");
|
|
312
|
-
const i = a[
|
|
327
|
+
const i = a[h].name;
|
|
313
328
|
M((p) => [
|
|
314
329
|
...p,
|
|
315
330
|
{ round: x, answer: k, correct: i, result: "wrong" }
|
|
@@ -323,21 +338,21 @@ function ye() {
|
|
|
323
338
|
}, [
|
|
324
339
|
g,
|
|
325
340
|
G,
|
|
326
|
-
|
|
341
|
+
T,
|
|
327
342
|
z,
|
|
328
343
|
f,
|
|
329
344
|
w,
|
|
330
|
-
h,
|
|
331
|
-
a,
|
|
332
345
|
u,
|
|
346
|
+
a,
|
|
347
|
+
h,
|
|
333
348
|
x,
|
|
334
349
|
k
|
|
335
350
|
]);
|
|
336
351
|
const te = () => {
|
|
337
|
-
if (
|
|
338
|
-
const e = a[
|
|
352
|
+
if (h === null || H) return;
|
|
353
|
+
const e = a[h].name, i = k.toLowerCase().trim();
|
|
339
354
|
let p = "wrong";
|
|
340
|
-
i === e ? (R((c) => c + 1), y("correct"), p = "correct") :
|
|
355
|
+
i === e ? (R((c) => c + 1), y("correct"), p = "correct") : he(i, e) === 1 ? (R((c) => c + 0.5), y("almost"), p = "almost") : (y("wrong"), p = "wrong"), M((c) => [
|
|
341
356
|
...c,
|
|
342
357
|
{ round: x, answer: i, correct: e, result: p }
|
|
343
358
|
]), Y(!0), setTimeout(() => {
|
|
@@ -444,10 +459,10 @@ function ye() {
|
|
|
444
459
|
] }),
|
|
445
460
|
g === "memorize" && /* @__PURE__ */ s("p", { style: { ...t.gmBodyM, color: "#10b981" }, children: [
|
|
446
461
|
"MEMORIZE (",
|
|
447
|
-
|
|
462
|
+
T,
|
|
448
463
|
")"
|
|
449
464
|
] }),
|
|
450
|
-
g === "guess" && !
|
|
465
|
+
g === "guess" && !u && /* @__PURE__ */ s("p", { style: t.gmBodyM, children: [
|
|
451
466
|
"⏳ Time left: ",
|
|
452
467
|
z,
|
|
453
468
|
"s"
|
|
@@ -476,14 +491,14 @@ function ye() {
|
|
|
476
491
|
} : {}
|
|
477
492
|
},
|
|
478
493
|
children: a.map((e, i) => {
|
|
479
|
-
const p =
|
|
494
|
+
const p = h === i && g === "guess" && !u;
|
|
480
495
|
return /* @__PURE__ */ o(
|
|
481
496
|
"div",
|
|
482
497
|
{
|
|
483
498
|
style: {
|
|
484
499
|
...t.gmCard,
|
|
485
|
-
...N === "correct" &&
|
|
486
|
-
...N === "wrong" &&
|
|
500
|
+
...N === "correct" && h === i ? t.gmCorrect : {},
|
|
501
|
+
...N === "wrong" && h === i ? t.gmWrong : {}
|
|
487
502
|
},
|
|
488
503
|
children: !p && /* @__PURE__ */ o(
|
|
489
504
|
"img",
|
|
@@ -504,7 +519,7 @@ function ye() {
|
|
|
504
519
|
}
|
|
505
520
|
),
|
|
506
521
|
/* @__PURE__ */ s("div", { style: { marginTop: 16, height: 80 }, children: [
|
|
507
|
-
g === "guess" && !
|
|
522
|
+
g === "guess" && !u && /* @__PURE__ */ s("div", { children: [
|
|
508
523
|
/* @__PURE__ */ o(
|
|
509
524
|
"input",
|
|
510
525
|
{
|
|
@@ -525,7 +540,7 @@ function ye() {
|
|
|
525
540
|
}
|
|
526
541
|
)
|
|
527
542
|
] }),
|
|
528
|
-
|
|
543
|
+
u && /* @__PURE__ */ o("button", { style: t.gmButton, onClick: oe, children: "Next round" })
|
|
529
544
|
] })
|
|
530
545
|
] })
|
|
531
546
|
] });
|
package/package.json
CHANGED
package/src/Game.tsx
CHANGED
|
@@ -10,20 +10,34 @@ type RoundResult = {
|
|
|
10
10
|
correct: string;
|
|
11
11
|
result: "correct" | "almost" | "wrong";
|
|
12
12
|
};
|
|
13
|
-
|
|
14
|
-
// ✅ только изоляция, всё остальное без изменений
|
|
13
|
+
// ✅ Изоляция без потери адаптива и с фоном на всю страницу
|
|
15
14
|
const globalReset = () => {
|
|
16
15
|
const style = document.createElement("style");
|
|
17
16
|
style.textContent = `
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
17
|
+
html, body {
|
|
18
|
+
margin: 0;
|
|
19
|
+
padding: 0;
|
|
20
|
+
width: 100%;
|
|
21
|
+
height: 100%;
|
|
22
|
+
background: linear-gradient(to bottom, #fff8f8 0%, #f9fafb 100%) !important;
|
|
21
23
|
}
|
|
22
24
|
|
|
23
25
|
#whats-missing-root {
|
|
26
|
+
all: unset;
|
|
27
|
+
display: block;
|
|
28
|
+
width: 100vw;
|
|
29
|
+
min-height: 100vh;
|
|
30
|
+
margin: 0;
|
|
31
|
+
padding: 0;
|
|
32
|
+
background: linear-gradient(to bottom, #fff8f8 0%, #f9fafb 100%);
|
|
33
|
+
background-attachment: fixed;
|
|
24
34
|
color: #1f2937;
|
|
25
35
|
text-align: center;
|
|
26
|
-
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
#whats-missing-root, #whats-missing-root * {
|
|
39
|
+
box-sizing: border-box;
|
|
40
|
+
font-family: "Geist", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
|
|
27
41
|
}
|
|
28
42
|
|
|
29
43
|
#whats-missing-root img {
|