UNPKG

@gdquest/gd-school-mdx-components

Version:

Components specially made to work with GDSchool MDX lesson files.

134 lines (129 loc) 16.6 kB
import{useState as pe,useEffect as fe}from"react";import I from"prop-types";function q(e){var t,n,r="";if(typeof e=="string"||typeof e=="number")r+=e;else if(typeof e=="object")if(Array.isArray(e))for(t=0;t<e.length;t++)e[t]&&(n=q(e[t]))&&(r&&(r+=" "),r+=n);else for(t in e)e[t]&&(r&&(r+=" "),r+=t);return r}function R(){for(var e,t,n=0,r="";n<arguments.length;)(e=arguments[n++])&&(t=q(e))&&(r&&(r+=" "),r+=t);return r}import{css as C}from"@emotion/react";import{FontAwesomeIcon as W}from"@fortawesome/react-fontawesome";import{jsx as w,jsxs as ve}from"@emotion/react/jsx-runtime";function me({type:e,hidden:t,title:n,description:r}){let[c,a]=pe({isReady:!1});return fe(()=>{let o={...c};o.isReady=!0,a(o)},[]),ve("div",{className:R(["gd-school-mdx-component-callout",{"gd-school-mdx-component-callout--note":e==="note","gd-school-mdx-component-callout--info":e==="info","gd-school-mdx-component-callout--error":e==="error","gd-school-mdx-component-callout--question":e==="question","gd-school-mdx-component-callout--see-also":e==="see-also"}]),css:C` & { display: grid; grid-template-areas: "icon title" "icon description"; grid-template-columns: 50px minmax(0, 1fr); margin: var(--size-8) 0; padding: var(--size-4); border-radius: var(--radius-lg); background: linear-gradient( 0.123turn, var(--callout-background-color-start), var(--callout-background-color-end) ); gap: var(--size-4); color: var(--callout-content-color); box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.05); } &[hidden] { display: none; } `,hidden:t===!0,children:[w("div",{css:C` & { grid-area: icon; display: flex; align-items: start; justify-content: center; color: var(--callout-background-color); } `,children:c.isReady&&(e==="info"?w(W,{icon:["fas","lightbulb"],size:"2x"}):e==="question"?w(W,{icon:["fas","question"],size:"2x"}):e==="error"?w(W,{icon:["fas","bug"],size:"2x"}):e==="see-also"?w(W,{icon:["fas","eye"],size:"2x"}):w(W,{icon:["fas","note-sticky"],size:"2x"}))}),w("p",{css:C` && { grid-area: title; display: flex; align-items: center; justify-content: start; font-weight: bold; font-size: var(--size-4); margin: 0; } && code { display: inline-block; } `,children:w("span",{children:n??"NO TITLE GIVEN"})}),r!==""&&w("div",{css:C` & { grid-area: description; } & p:first-of-type { margin-top: 0; } `,children:r})]})}me.propTypes={children:I.oneOfType([I.node,I.arrayOf(I.node)]),type:I.string,hidden:I.bool,title:I.node,description:I.node};import X from"prop-types";import{Fragment as be,jsx as ge}from"@emotion/react/jsx-runtime";function ye({children:e}){return ge(be,{children:e})}ye.propTypes={children:X.oneOfType([X.node,X.arrayOf(X.node)])};import F from"prop-types";import{Fragment as we,jsx as xe}from"@emotion/react/jsx-runtime";function he({children:e}){return xe(we,{children:e})}he.propTypes={children:F.oneOfType([F.node,F.arrayOf(F.node)])};import V from"prop-types";import{Fragment as Se,jsx as Ee}from"@emotion/react/jsx-runtime";function Ie({children:e}){return Ee(Se,{children:e})}Ie.propTypes={children:V.oneOfType([V.node,V.arrayOf(V.node)])};import S from"prop-types";import{css as Oe}from"@emotion/react";import{Fragment as Re,jsx as O,jsxs as $}from"@emotion/react/jsx-runtime";function Ne({children:e,scene:t,type:n,title:r,description:c,goal:a,hints:o}){return $("section",{css:Oe` background-color: yellow; padding: 1em; `,children:[O("p",{children:r}),O("div",{children:c}),a!=null&&O("div",{children:a}),O("div",{children:e}),$("div",{children:["TODO: show the gdExercise here with the scene ",t," and the type"," ",n]}),o!=null&&O("div",{children:o.map(d=>O(Re,{children:O("div",{children:d})}))})]})}Ne.propTypes={children:S.node,scene:S.string.isRequired,type:S.string,title:S.node.isRequired,description:S.node.isRequired,goal:S.node,hints:S.arrayOf(S.node)};import{useState as Ce,useEffect as Xe}from"react";import M from"prop-types";import{css as Fe}from"@emotion/react";import{useState as We,useEffect as te,useRef as K}from"react";var re={exports:{}},G={};var ee;function Te(){if(ee)return G;ee=1;var e=Symbol.for("react.fragment");return G.Fragment=e,G.jsxDEV=void 0,G}re.exports=Te();var A=re.exports;globalThis&&globalThis.__awaiter;globalThis&&globalThis.__awaiter;function ke(e,{threshold:t=0,root:n=null,rootMargin:r="0%",freezeOnceVisible:c=!1}){let[a,o]=We(),d=a?.isIntersecting&&c,E=([y])=>{o(y)};return te(()=>{let y=e?.current;if(!window.IntersectionObserver||d||!y)return;let g={threshold:t,root:n,rootMargin:r},b=new IntersectionObserver(E,g);return b.observe(y),()=>b.disconnect()},[e?.current,JSON.stringify(t),n,r,d]),a}var Le="/loader.html";function ne(e){let{loader:t=new URL(Le,window.location.origin).href,dataPath:n,mainScene:r,openFiles:c=[],height:a,hideCode:o=!1,hideConsole:d=!1,hidePlayer:E=!1,hideTest:y=!1,snippet:g=""}=e,b=K(null),s=K(null),x=ke(s,{}),m=x?.isIntersecting===!0,i=new URL(t);i.searchParams.append("dataPath",n),i.searchParams.append("mainScene",r);for(let v of c){let l=()=>v.focus===!0?"focus":"nofocus";i.searchParams.append("open",[v.path,l(),v.override].filter(u=>u!=null).join(":"))}return o&&i.searchParams.append("hide","code"),d&&i.searchParams.append("hide","console"),E&&i.searchParams.append("hide","player"),y&&i.searchParams.append("hide","test"),g.length>0&&i.searchParams.append("snippet",g),te(()=>{var v;b.current!=null&&((v=b.current.contentWindow)==null||v.postMessage({from:"gd-exercise",type:"low-processor-usage-mode",value:!m}))},[m,b.current]),A.jsxDEV(A.Fragment,{children:A.jsxDEV("div",{className:"gdexercise-wrapper",ref:s,children:A.jsxDEV("iframe",{allow:"fullscreen",src:i.href,style:{height:a},ref:b},void 0,!1,{fileName:"/home/adamscott/dev/builds/gd-web/packages/gd-exercise-wrapper/src/components/GdExerciseWrapper.tsx",lineNumber:97,columnNumber:9},this)},void 0,!1,{fileName:"/home/adamscott/dev/builds/gd-web/packages/gd-exercise-wrapper/src/components/GdExerciseWrapper.tsx",lineNumber:96,columnNumber:7},this)},void 0,!1,{fileName:"/home/adamscott/dev/builds/gd-web/packages/gd-exercise-wrapper/src/components/GdExerciseWrapper.tsx",lineNumber:95,columnNumber:5},this)}import{jsx as P,jsxs as Ge}from"@emotion/react/jsx-runtime";function Ve({title:e,code:t,hidePlayer:n=!0}){let[r,c]=Ce({hasSharedArrayBufferSupport:!1});return Xe(()=>{let a={...r};a.hasSharedArrayBufferSupport=typeof window.SharedArrayBuffer<"u",c(a)},[]),Ge("div",{css:Fe` & { margin: var(--size-8) 0; } `,children:[e!=null&&P("h3",{children:e}),r.hasSharedArrayBufferSupport?P(ne,{loader:(()=>new URL("/gdexercise/loader.html",window.location.href).href)(),dataPath:(()=>new URL("/gdexercise/projects/snippet.zip",window.location.href).href)(),mainScene:"main.tscn",height:"500px",hidePlayer:n??!1,snippet:t}):P("pre",{children:P("code",{children:t})})]})}Ve.propTypes={title:M.string,code:M.string.isRequired,hidePlayer:M.bool};import j from"prop-types";import{Fragment as Pe,jsx as je}from"@emotion/react/jsx-runtime";function Ae({children:e}){return je(Pe,{children:e})}Ae.propTypes={children:j.oneOfType([j.node,j.arrayOf(j.node)])};import Z from"prop-types";import{Fragment as ze,jsx as _e}from"@emotion/react/jsx-runtime";function Ze({children:e}){return _e(ze,{children:e})}Ze.propTypes={children:Z.oneOfType([Z.node,Z.arrayOf(Z.node)])};import z from"prop-types";import{Fragment as Ye,jsx as Je}from"@emotion/react/jsx-runtime";function Be({children:e}){return Je(Ye,{children:e})}Be.propTypes={children:z.oneOfType([z.node,z.arrayOf(z.node)])};import _ from"prop-types";import{Fragment as Me,jsx as De}from"@emotion/react/jsx-runtime";function Qe({children:e}){return De(Me,{children:e})}Qe.propTypes={children:_.oneOfType([_.node,_.arrayOf(_.node)])};import T from"prop-types";import{Fragment as He,jsx as qe}from"@emotion/react/jsx-runtime";function Ue({children:e,correct:t=!1}){return qe(He,{children:e})}Ue.propTypes={children:T.oneOfType([T.node,T.arrayOf(T.node)]),correct:T.bool};import{useRef as ot,useState as st,useEffect as it}from"react";import p from"prop-types";import{css as h}from"@emotion/react";import{useEffect as oe,useState as wr,useRef as se,useCallback as xr,useLayoutEffect as Ir}from"react";var B=typeof window<"u",$e=e=>e!==null&&typeof e=="object"&&Object.prototype.hasOwnProperty.call(e,"current");var Ke=e=>typeof e=="string",et=()=>{};function tt(e){return $e(e)?e.current:e}var rt=B?window:void 0,Sr=B?window.document:void 0,Er=B?window.navigator:void 0;function ie(...e){let t=rt,n,r,c;Ke(e[0])?[n,r,c]=e:[t,n,r,c]=e;let a=se(r),o=se(et);return oe(()=>{a.current=r},[r]),oe(()=>{let d=tt(t);if(!(!B||!d))return d.addEventListener(n,a.current,c),o.current=()=>{d.removeEventListener(n,a.current,c)},o.current},[n,t,c]),o.current}import D from"prop-types";import{Fragment as nt,jsx as ae}from"@emotion/react/jsx-runtime";function U({children:e,onClick:t,disabled:n}){return ae(nt,{children:ae("button",{className:"gd-school-mdx-component-button",onClick:r=>t?.(r),disabled:n??!1,children:e})})}U.propTypes={children:D.node,onClick:D.func,disabled:D.bool};import{Fragment as le,jsx as f,jsxs as Y}from"@emotion/react/jsx-runtime";var ce=0;function at(){let e=ce;return ce+=1,e}function ct({hidden:e,randomize:t,multipleChoice:n,skip:r,onSubmit:c,title:a,explanation:o,options:d,onRightAnswer:E,onWrongAnswer:y}){t=t??!1,r=r??!1;let g=ot(null),b=`gd-school-mdx-component-question-options-${at().toString()}`,[s,x]=st({title:a??"NO TITLE GIVEN",explanation:o??"NO EXPLANATION GIVEN",options:(d??[]).map((l,u)=>({index:l.index??u,label:l.label,correct:l.correct??!1})),correctAnswer:null,submitted:!1,skip:r??!1,isReady:!1});ie(g,"questionupdate",()=>{}),it(()=>{if(g.current==null)return;let l={...s};t===!0&&(l.options=l.options.map(u=>({option:u,sort:Math.random()})).sort((u,N)=>u.sort-N.sort).map(({option:u})=>u)),l.isReady=!0,x(l)},[]);let m=l=>{let u={...s};if(u.submitted)return;let N=u.options?.find(L=>L?.correct===!0);N!=null&&(n===!0?i(u):u.correctAnswer=l.target.value===N.index.toString(),x(u))},i=l=>{let u=!1,N=document.getElementsByName(b);for(let L of Array.from(N)){for(let H of l.options)if(H.index?.toString()===L.value&&L.checked&&H.correct===!0){u=!0;break}if(u)break}l.correctAnswer=!u},v=()=>{g.current!=null&&(x({...s,submitted:!0}),c?.(s.correctAnswer),s.correctAnswer===!0?E?.():s.correctAnswer===!1&&y?.())};return f(le,{children:Y("div",{className:R("gd-school-mdx-component-question"),css:h` & { border: 1px solid var(--border); border-radius: var(--radius); margin: var(--size-16) 0; padding: var(--size-4); } &[hidden] { display: none; } `,ref:g,hidden:e??!1,children:[f("p",{css:h` && { font-size: var(--font-size-2); line-height: var(--font-lineheight-4); margin-top: 0; } `,children:f("span",{children:"Question"})}),f("p",{css:h``,children:s.title}),Y("fieldset",{css:h` display: grid; grid-template-areas: "entries" "submit"; grid-template-columns: auto; `,onChangeCapture:m,children:[f("div",{css:h` grid-area: entries; `,children:s.isReady&&s.options.map(l=>l==null?f(le,{}):Y("label",{css:h` display: grid; grid-template-areas: "input content"; grid-template-columns: 50px 1fr; `,children:[f("div",{css:h` grid-area: "input"; `,children:f("input",{type:n===!0?"checkbox":"radio",name:b,value:l.index,disabled:s.submitted||s.skip})}),f("span",{css:h` grid-area: content; `,children:f("span",{children:l.label})})]},l.index))}),f("div",{css:h` grid-area: submit; display: flex; align-items: center; justify-content: center; margin-top: var(--size-4); `,children:!s.submitted&&!s.skip&&s.isReady&&f(U,{onClick:v,disabled:s.correctAnswer===null,children:f("span",{children:"Submit"})})})]}),(s.submitted||s.skip)&&Y("div",{className:R(["gd-school-mdx-component-question-answer",{"gd-school-mdx-component-question-answer--correct":s.correctAnswer===!0,"gd-school-mdx-component-question-answer--incorrect":s.correctAnswer===!1}]),css:h` border-radius: var(--radius-lg); padding: var(--size-4); margin-top: var(--size-2); background: linear-gradient( 0.123turn, var(--question-answer-background-color-start), var(--question-answer-background-color-end) ); `,children:[!s.skip&&f("p",{css:h` && { margin: 0; font-weight: bold; } `,children:s.correctAnswer===!0?"Correct":"Incorrect"}),f("p",{children:s.explanation})]})]})})}ct.propTypes={children:p.node,randomize:p.bool,multipleChoice:p.bool,skip:p.bool,hidden:p.bool,title:p.node,options:p.arrayOf(p.shape({index:p.number,label:p.node.isRequired,correct:p.bool})),explanation:p.node,onSubmit:p.func,onRightAnswer:p.func,onWrongAnswer:p.func};import J from"prop-types";import{jsx as ut}from"@emotion/react/jsx-runtime";function lt({children:e}){return ut("small",{children:e})}lt.propTypes={children:J.oneOfType([J.node,J.arrayOf(J.node)])};import Q from"prop-types";import{Fragment as pt,jsx as ft}from"@emotion/react/jsx-runtime";function dt({children:e}){return ft(pt,{children:e})}dt.propTypes={children:Q.oneOfType([Q.node,Q.arrayOf(Q.node)])};import{Children as mt,isValidElement as vt,cloneElement as yt,useState as bt,useEffect as ue,useRef as gt}from"react";import k from"prop-types";import{Fragment as xt,jsx as de}from"@emotion/react/jsx-runtime";var ht=1;function wt({children:e,id:t,points:n,hidden:r,usePoints:c}){if(t==null||t.length===0)throw new Error("WithPoints id is null or empty");if(t.match(/^\s$/g)!=null)throw new Error("WithPoints id has whitespace in it");let a=n??ht,o=gt(null),[d,E]=bt({submitted:!1}),y=null;c!=null&&({registerAnswer:y}=c()),ue(()=>{if(o.current==null)return;let m=!1,i=o.current.previousElementSibling;for(;i!=null;){if(i instanceof HTMLElement&&i.dataset.exercise!=null){m=!0;break}i=i.previousElementSibling}if(!m){let v=o.current.nextElementSibling;for(;v!=null;)v instanceof HTMLElement&&(v.hidden=!0),v=v.nextElementSibling}},[]),ue(()=>{o.current!=null&&(o.current.dataset.exercise="",d.submitted?o.current.dataset.exerciseSubmitted="":delete o.current.dataset.exerciseSubmitted)},[d,o.current]);let g=()=>{let m={...d};if(m.submitted=!0,E(m),o.current==null)return;let i=o.current.nextElementSibling;for(;i!=null;){if(i instanceof HTMLElement&&(i.hidden=!1,i.dataset.exercise!=null)){i.dispatchEvent(new CustomEvent("exerciseupdate"));break}i=i.nextElementSibling}},b=()=>{y?.(t,a)},s=()=>{y?.(t,0)},x=mt.map(e,m=>vt(m)?yt(m,{onSubmit:g,onRightAnswer:b,onWrongAnswer:s}):m);return de("div",{ref:o,"data-exercise-id":t,hidden:r??!1,children:de(xt,{children:x})})}wt.propTypes={children:k.node.isRequired,id:k.string.isRequired,points:k.number,hidden:k.bool,usePoints:k.func};export{me as Callout,ye as Description,he as Explanation,Ie as GdExercise,Ne as GdLearnToCode,Ve as GdSnippet,Ae as Glossary,Ze as Goal,Be as Hints,Qe as Item,Ue as Option,ct as Question,lt as Small,dt as Title,wt as WithPoints}; /** * @license React * react-jsx-dev-runtime.production.min.js * * Copyright (c) Facebook, Inc. and its affiliates. * * This source code is licensed under the MIT license found in the * LICENSE file in the root directory of this source tree. */ /** * @license React * react-jsx-dev-runtime.development.js * * Copyright (c) Facebook, Inc. and its affiliates. * * This source code is licensed under the MIT license found in the * LICENSE file in the root directory of this source tree. */ //# sourceMappingURL=index.min.mjs.map