jsgbc-ui/dist/jsgbc-ui.js

A GameBoy Color UI used in jsGBC

!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define("jsgbc-ui",[],t):"object"==typeof exports?exports["jsgbc-ui"]=t():e["jsgbc-ui"]=t()}(self,(function(){return(()=>{"use strict";var e={d:(t,n)=>{for(var s in n)e.o(n,s)&&!e.o(t,s)&&Object.defineProperty(t,s,{enumerable:!0,get:n[s]})},o:(e,t)=>Object.prototype.hasOwnProperty.call(e,t),r:e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})}},t={};e.r(t),e.d(t,{default:()=>d});const n=require("events");class s extends n.EventEmitter{constructor(e){super(),this.element=e,this.element.classList.add("jsgbc-ui"),this.loadingSlotElement=this.element.querySelector("[slot='loading']"),this.loadingSlotElement&&(this.loadingSlotElement.classList.add("jsgbc-ui-loading-slot"),this.element.removeChild(this.loadingSlotElement)),this.lcdSlotElement=this.element.querySelector("[slot='lcd']"),this.lcdSlotElement&&(this.lcdSlotElement.classList.add("jsgbc-ui-lcd-slot"),this.element.removeChild(this.lcdSlotElement)),this.createElements(),this.setLoading(!1)}createElements(){const e=this.innerElement=document.createElement("div");e.classList.add("jsgbc-ui-inner"),this.element.appendChild(e);const t=document.createElement("div");t.classList.add("jsgbc-ui-body"),e.appendChild(t);const n=document.createElement("div");n.classList.add("jsgbc-ui-screen-frame"),t.appendChild(n);const s=document.createElement("div");s.classList.add("jsgbc-ui-screen"),n.appendChild(s);const d=this.loadingElement=document.createElement("div");d.classList.add("jsgbc-ui-loading"),s.appendChild(d),this.loadingSlotElement&&d.appendChild(this.loadingSlotElement);const l=this.lcdElement=document.createElement("div");l.classList.add("jsgbc-ui-lcd"),s.appendChild(l),this.lcdSlotElement&&l.appendChild(this.lcdSlotElement);const i=document.createElement("div");i.classList.add("jsgbc-ui-screen-frame-bottom"),t.appendChild(i);const c=document.createElement("div");c.classList.add("jsgbc-ui-screen-frame-end"),t.appendChild(c);const a=document.createElement("div");a.classList.add("jsgbc-ui-middle"),t.appendChild(a);const o=this.createDPadElement();a.appendChild(o);const m=document.createElement("div");m.classList.add("jsgbc-ui-buttons-right"),a.appendChild(m);const r=this.createRoundButtonElement("A");m.appendChild(r);const u=this.createRoundButtonElement("B");m.appendChild(u);const p=document.createElement("div");p.classList.add("jsgbc-ui-bottom"),t.appendChild(p);const h=this.createLongButtonElement("Select");h.classList.add("jsgbc-ui-select"),p.appendChild(h);const E=this.createLongButtonElement("Start");E.classList.add("jsgbc-ui-start"),p.appendChild(E);const b=document.createElement("div");b.classList.add("jsgbc-ui-body-end"),e.appendChild(b)}createLongButtonElement(e){const t=document.createElement("div"),n=this.createButtonElement(e);t.appendChild(n);const s=document.createElement("div");return s.classList.add("jsgbc-ui-bottom-label"),s.textContent=e,t.appendChild(s),t}createRoundButtonElement(e){const t=document.createElement("div"),n=this.createButtonElement(e);t.appendChild(n);const s=document.createElement("div");return s.classList.add("jsgbc-ui-button-label"),s.textContent=e,n.appendChild(s),t}createDPadElement(){const e=document.createElement("div");e.classList.add("jsgbc-ui-dpad");const t=this.createButtonElement("Up");t.classList.add("jsgbc-ui-dpad-button"),e.appendChild(t);const n=document.createElement("div");n.classList.add("jsgbc-ui-dpad-middle"),e.appendChild(n);const s=this.createButtonElement("Left");s.classList.add("jsgbc-ui-dpad-button"),n.appendChild(s);const d=document.createElement("div");d.classList.add("jsgbc-ui-dpad-empty"),n.appendChild(d);const l=this.createButtonElement("Right");l.classList.add("jsgbc-ui-dpad-button"),n.appendChild(l);const i=this.createButtonElement("Down");return i.classList.add("jsgbc-ui-dpad-button"),e.appendChild(i),e}createButtonElement(e){const t=document.createElement("div");return t.classList.add("jsgbc-ui-button","jsgbc-ui-button-"+e.toLowerCase()),t.addEventListener("pointerdown",(t=>{t.preventDefault(),t.stopPropagation(),this.emit("ButtonDown",e)})),t.addEventListener("pointerup",(t=>{t.preventDefault(),t.stopPropagation(),this.emit("ButtonUp",e)})),t}setLoading(e){e?(this.loadingElement.style.display="flex",this.lcdElement.style.display="none",this.lcdSlotElement.style.display="none"):(this.loadingElement.style.display="none",this.lcdElement.style.display="flex",this.lcdSlotElement.style.display="flex")}setFullscreen(e){const t="jsgbc-ui-fullscreen",n=this.innerElement.classList.contains(t);e&&!n?this.innerElement.classList.add(t):!e&&n&&this.innerElement.classList.remove(t)}}const d=s;return t})()}));