react-pico-8
Version:
Run PICO-8 game cartridges in React
2 lines (1 loc) • 11.2 kB
JavaScript
!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("react")):"function"==typeof define&&define.amd?define(["exports","react"],t):t((e||self).reactPico8={},e.react)}(this,function(e,t){function n(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var o=/*#__PURE__*/n(t);function l(){return l=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var o in n)Object.prototype.hasOwnProperty.call(n,o)&&(e[o]=n[o])}return e},l.apply(this,arguments)}var a={}.hasOwnProperty;function i(){for(var e=[],t=0;t<arguments.length;t++){var n=arguments[t];if(n){var o=typeof n;if("string"===o||"number"===o)e.push(this&&this[n]||n);else if(Array.isArray(n))e.push(i.apply(this,n));else if("object"===o)if(n.toString===Object.prototype.toString)for(var l in n)a.call(n,l)&&n[l]&&e.push(this&&this[l]||l);else e.push(n.toString())}}return e.join(" ")}const c=i.bind({box:"_NxiT3",pointer:"_E8iY9",normal:"_QQ9pY",icon:"_Um5ym","icon-carts":"_QFSPl","icon-controls":"_2WDg5","icon-fullscreen":"_1Y9RU","icon-pause":"_rYHhP","icon-reset":"_77A5W","icon-sound":"_WvuDh"});var r=e=>{let{usePointer:t,onClick:n,button:l,title:a,onTitle:i,on:r,...s}=e;const u=()=>"function"==typeof n,d=r?i:a||l;/*#__PURE__*/return o.default.createElement(e=>{let{children:l}=e;return u()?l:/*#__PURE__*/o.default.createElement("a",{className:c("box",{pointer:t,normal:!t}),role:"button",target:"_blank",rel:"noopener noreferrer",href:n,"aria-label":d},l)},null,/*#__PURE__*/o.default.createElement(e=>{let{children:l}=e;return u()?/*#__PURE__*/o.default.createElement("button",{className:c("box",{pointer:t,normal:!t}),onClick:u()?n:null,"aria-label":d},l):l},null,/*#__PURE__*/o.default.createElement("div",{className:c("icon",`icon-${l.toLowerCase()}`)})," ",l))};const s=i.bind({left:"_CBihP",right:"_aX-Dt",menu:"_8Gj9f","button-enabled":"_sRrb5",pointer:"_uSeRX",normal:"_6fvhd",mask:"_BUsHk","mask-selected":"_0BIBJ","icon-carts":"_xlXTt","icon-controls":"_9ESXJ","icon-fullscreen":"_9yD0Y","icon-pause0":"_nXbpl","icon-pause1":"_4Slq-","icon-reset":"_J7p3p","icon-sound0":"_CYPog","icon-sound":"_-naTm","icon-sound1":"_ZLgwy","icon-close":"_T-2mW"});var u=e=>{const t=e.button.toLowerCase()+(e.onTitle?e.on?"1":"0":"");if(e.hidden)return null;const n=e=>{const{disabled:t,onClick:n,...a}=e;return t?/*#__PURE__*/o.default.createElement("div",a,e.children):"function"==typeof e.onClick?/*#__PURE__*/o.default.createElement("div",l({onClick:n},a),e.children):/*#__PURE__*/o.default.createElement("a",l({role:"button",target:"_blank",rel:"noopener noreferrer",href:n},a),e.children)};/*#__PURE__*/return o.default.createElement(n,{disabled:e.disabled,title:e.on?e.onTitle:e.title,className:s("menu",{left:"left"===e.align,right:"right"===e.align,pointer:e.usePointer,normal:!e.usePointer})+" p8_menu_button",onClick:e.onClick},/*#__PURE__*/o.default.createElement("button",{disabled:e.disabled,className:s("mask",`icon-${t}`,{"mask-selected":e.selected,"button-enabled":!e.disabled})}))};const d=e=>/*#__PURE__*/o.default.createElement(e.legacyButtons?r:u,e),w=e=>/*#__PURE__*/o.default.createElement(d,l({},e,{button:"Reset",title:"Reset",onClick:e.reset})),f=e=>/*#__PURE__*/o.default.createElement(d,l({button:"Pause",onTitle:"Play",title:"Pause"},e,{onClick:e.pause,on:e.isPaused})),p=e=>/*#__PURE__*/o.default.createElement(d,l({button:"Fullscreen",title:"Go Fullscreen"},e,{onClick:e.fullscreen})),m=e=>/*#__PURE__*/o.default.createElement(d,l({button:"Sound",onTitle:"Mute",title:"Unmute"},e,{onClick:e.sound,on:!e.isMuted})),_=e=>/*#__PURE__*/o.default.createElement(d,l({},e,{button:"Carts",title:"More Carts",onClick:"http://www.lexaloffle.com/bbs/?cat=7&sub=2"})),h=e=>/*#__PURE__*/o.default.createElement(d,l({button:"Controls",title:"Controls"},e,{onClick:e.controls})),b=e=>/*#__PURE__*/o.default.createElement(o.default.Fragment,null,/*#__PURE__*/o.default.createElement(w,e),/*#__PURE__*/o.default.createElement(f,e),/*#__PURE__*/o.default.createElement(p,e),/*#__PURE__*/o.default.createElement(m,e),/*#__PURE__*/o.default.createElement(_,e),/*#__PURE__*/o.default.createElement(h,e)),g=e=>/*#__PURE__*/o.default.createElement(o.default.Fragment,null,/*#__PURE__*/o.default.createElement(h,e),/*#__PURE__*/o.default.createElement(f,e),/*#__PURE__*/o.default.createElement(m,e),/*#__PURE__*/o.default.createElement(p,e)),E=e=>/*#__PURE__*/o.default.createElement(e.legacyButtons?b:g,e);var v={box:"_qMiAj",img:"_CfVz3",center:"_rDVKx",pointer:"_zhnpw",normal:"_6jjhl"};const y=i.bind(v);var C=e=>{let{onClick:t,placeholder:n,usePointer:l,center:a,...i}=e;const c=n?`rgba(0, 0, 0, 0) url(${n}) no-repeat scroll 0% 0% / cover`:"#000";/*#__PURE__*/return o.default.createElement("button",{className:y("box",{center:a,pointer:l,normal:!l}),title:"Start Game",style:{background:c},onClick:t,type:"button"},/*#__PURE__*/o.default.createElement("div",{className:v.img}))};const k=e=>e.toUpperCase().charCodeAt(0),x=[k("\r"),k("\t"),k(" "),k("x"),k("z"),k("m"),k("r"),k("c"),k("v"),k("s"),k("f"),k("e"),k("d"),k("q"),k("w"),k("p")].concat([37,38,39,40]),P=e=>{x.indexOf(e.keyCode)>-1&&e.preventDefault()},S=i.bind({fullscreen:"_JcDUc",normal:"_BsPp-",canvas:"_kXWCq",none:"_GpXPA",center:"_JoK6F",margin:"_gAzLx"});var A=e=>/*#__PURE__*/o.default.createElement("div",{className:S({center:e.fullscreen||e.center,margin:e.center&&!e.legacyButtons&&!e.isFullscreen})},/*#__PURE__*/o.default.createElement("canvas",{className:S("canvas",{fullscreen:e.fullscreen,normal:!e.fullscreen,none:e.hasStarted&&e.hideCursor})+" emscripten",id:"canvas",onContextMenu:e=>e.preventDefault(),onKeyDown:P,tabIndex:"-1"}),e.children);const F=()=>{window.p8_autoplay=!1,window.pico8_state=[],window.pico8_buttons=[0,0,0,0,0,0,0,0],window.pico8_gamepads={count:0},window.pico8_mouse=[0,0,0],window.pico8_gpio=new Array(128),window.p8_touch_detected=!1,window.Module={canvas:document.getElementById("canvas")},window.p8_is_running=!1,window.p8_script&&document.body.removeChild(window.p8_script),window.p8_script=null,window.pico8_audio_context&&window.pico8_audio_context.close(),window.pico8_audio_context=null},B=e=>window.p8_touch_detected=!0,T=(e,t,n)=>{window.addEventListener(e,t,n)},N=(e,t,n)=>{window.removeEventListener(e,t,n)};var M={hide:"_wk9CD",none:"_fiZQI","mobile-header":"_ld3F6",stack:"_sOepT",inline:"_rNdOG",center:"_pcXQn"};const R=i.bind(M),q={autoPlay:!0,legacyButtons:!1,placeholder:"",hideCursor:!1,center:!1,blockKeys:!1,usePointer:!0,unpauseOnReset:!0};e.Carts=_,e.Controls=h,e.Fullscreen=p,e.Pause=f,e.Pico8=e=>{let{className:n,css:l,...a}=e;const i={...q,...a},[c,r]=t.useState(!0),[s,d]=t.useState(!1),w=e=>{d(e),e&&setTimeout(j,100)},[f,p]=t.useState(!0),[m,_]=t.useState(!1),[h,b]=t.useState(!1),g=()=>window.p8_run_cart(i.src);t.useEffect(()=>{var e,t,n;n=h&&i.blockKeys,N("keydown",e=P,t={passive:!1}),n&&T("keydown",e,t)});const v=()=>{s||w(!0)};t.useEffect(()=>{var e,t;return F(),window.addEventListener("touchstart",B,{passive:!0}),window.p8_create_audio_context=()=>{window.pico8_audio_context?window.pico8_audio_context.resume():(window.webAudioAPI=window.AudioContext||window.webkitAudioContext||window.mozAudioContext||window.oAudioContext||window.msAudioContext,window.webAudioAPI&&(window.pico8_audio_context=new webAudioAPI,window.pico8_audio_context&&(window.source_sfx=pico8_audio_context.createBufferSource(),window.source_sfx.buffer=pico8_audio_context.createBuffer(1,1,22050),window.source_sfx.connect(pico8_audio_context.destination),window.source_sfx.start(1,Math.min(window.source_sfx.buffer.duration,.25)))))},window.p8_close_cart=()=>{window.p8_is_running=!1,window.p8_touch_detected=!1,window.Module.pico8SetPaused(1)},window.p8_run_cart=e=>{window.p8_is_running||(window.p8_is_running=!0,window.p8_create_audio_context(),window.p8_script=document.createElement("script"),window.p8_script.type="application/javascript",window.p8_script.src=e,document.body.appendChild(window.p8_script),window.p8_touch_detected&&(window.location.hash="#playing",window.onhashchange=()=>{window.location.hash.search("playing")<0&&window.p8_close_cart()}))},i.autoPlay&&(()=>{const e=("undefined"!=typeof window&&(t=window.AudioContext||window.webkitAudioContext),t?new t:{});var t;e.onstatechange=()=>{"running"==e.state&&(r(!1),p(!1),b(!0),g(),e.close())}})(),T("keydown",k,{passive:!1}),T("touchstart",v,{passive:!0}),T("webkitfullscreenchange",e=y,t=!1),T("mozfullscreenchange",e,t),T("fullscreenchange",e,t),T("MSFullscreenChange",e,t),()=>{window.removeEventListener("touchstart",B,{passive:!0}),F(),N("keydown",k,{passive:!1}),N("touchstart",v,{passive:!0}),((e,t)=>{N("webkitfullscreenchange",e,t),N("mozfullscreenchange",e,t),N("fullscreenchange",e,t),N("MSFullscreenChange",e,t)})(y,!1),N("keydown",P,{passive:!1})}},[]);const y=e=>{(e=>{const t=[document.webkitIsFullScreen,document.mozFullScreen,document.msFullscreenElement,document.fullscreenElement];for(const e of t)if(!1===e)return void _(!1)})()},k=e=>{x.indexOf(e.keyCode)>-1&&S()},S=()=>{setTimeout(()=>p(!!window.pico8_state.is_paused),120)},O=()=>{r(!c),window.p8_create_audio_context(),window.Module.pico8ToggleSound()},j=()=>{var e;_(!0),(e=z.current).requestFullscreen?e.requestFullscreen():e.mozRequestFullScreen?e.mozRequestFullScreen():e.webkitRequestFullScreen?e.webkitRequestFullScreen(Element.ALLOW_KEYBOARD_INPUT):e.msRequestFullScreen&&e.msRequestFullScreen()},D=()=>{window.Module.pico8TogglePaused(),S()},z=t.useRef(),{usePointer:L,legacyButtons:I}=i,U=e=>{let t=i.children;return!t||t.length<=0?/*#__PURE__*/o.default.createElement(E,e):o.default.Children.map(t,t=>o.default.cloneElement(t,e))},X={usePointer:L,legacyButtons:I,isPaused:f,isMuted:c,pause:D,fullscreen:j,sound:O,controls:()=>{window.Module.pico8ToggleControlMenu(),S()},reset:()=>{f&&i.unpauseOnReset&&D(),setTimeout(window.Module.pico8Reset,20)}};/*#__PURE__*/return o.default.createElement("div",{css:l,className:n,style:i.style},/*#__PURE__*/o.default.createElement("canvas",{className:M.hide}),/*#__PURE__*/o.default.createElement("div",{id:"p8_container"},h?null:/*#__PURE__*/o.default.createElement(C,{center:i.center,placeholder:i.placeholder,onClick:()=>{h||(r(!1),p(!1),b(!0),g(),window.p8_create_audio_context())},usePointer:i.usePointer}),/*#__PURE__*/o.default.createElement("div",{ref:z,id:"p8_playarea",className:R({hide:!h,none:!h})},/*#__PURE__*/o.default.createElement("div",{id:"menu_buttons_touch",className:M["mobile-header"]},/*#__PURE__*/o.default.createElement(u,{align:"left",button:"Sound",onTitle:"Mute",title:"Unmute",on:!c,onClick:O,hidden:!s||!m}),/*#__PURE__*/o.default.createElement(u,{align:"right",button:"Close",title:"Close",onClick:()=>{b(!1),r(!1),p(!1),w(!1),window.p8_close_cart()},hidden:!s||!m})),/*#__PURE__*/o.default.createElement("div",null,/*#__PURE__*/o.default.createElement(A,{legacyButtons:i.legacyButtons,center:i.center,fullscreen:s&&m||m,hasStarted:h,hideCursor:i.hideCursor},s||m||!h?null:/*#__PURE__*/o.default.createElement("div",{className:R({stack:!i.legacyButtons,inline:i.legacyButtons,center:i.legacyButtons&&i.center})},/*#__PURE__*/o.default.createElement(U,X)))))))},e.Reset=w,e.Sound=m});