ui.jsannotatedui.jssource187 lines · 4.9 KB · raw
1export function showUi() {
2    document.getElementById("loading-text").remove();
3    document.getElementById("header-text").classList.remove("hidden");
4    document.getElementById("jgenesis").classList.remove("hidden");
5    document.getElementById("footer").hidden = false;
6}
7
8/**
9 * @param fullscreen {boolean}
10 */
11export function setFullscreen(fullscreen) {
12    document.querySelectorAll(".hide-fullscreen").forEach((element) => {
13        element.hidden = fullscreen;
14    });
15}
16
17export function focusCanvas() {
18    document.querySelector("canvas").focus();
19}
20
21const configIds = ["smsgg-config", "genesis-config", "snes-config", "gba-config"];
22
23/**
24 * @param id {string}
25 */
26function hideAllConfigsExcept(id) {
27    for (const configId of configIds) {
28        document.getElementById(configId).hidden = configId !== id;
29    }
30
31    document.getElementById("supported-files-info").hidden = true;
32    document.getElementById("input-config").hidden = false;
33}
34
35/**
36 * @param inputNames {string[]}
37 * @param inputKeys {string[]}
38 */
39function renderInputs(inputNames, inputKeys) {
40    const listNode = document.createElement("ul");
41
42    for (const [i, name] of inputNames.entries()) {
43        const key = inputKeys[i];
44
45        const span = document.createElement("span");
46        span.innerText = `${name}: `;
47
48        const button = document.createElement("input");
49        button.classList.add("input-configure");
50        button.setAttribute("name", "input-configure");
51        button.setAttribute("type", "button");
52        button.setAttribute("value", key);
53        button.setAttribute("data-name", name);
54
55        if (window.inputClickListener) {
56            button.addEventListener("click", window.inputClickListener);
57        }
58
59        const listItem = document.createElement("li");
60        listItem.appendChild(span);
61        listItem.appendChild(button);
62        listNode.appendChild(listItem);
63    }
64
65    const controls = document.getElementById("controls");
66    controls.innerHTML = "";
67    controls.appendChild(listNode);
68}
69
70/**
71 * @param inputNames {string[]}
72 * @param inputKeys {string[]}
73 */
74export function showSmsGgConfig(inputNames, inputKeys) {
75    hideAllConfigsExcept("smsgg-config");
76    renderInputs(inputNames, inputKeys);
77}
78
79/**
80 * @param inputNames {string[]}
81 * @param inputKeys {string[]}
82 */
83export function showGenesisConfig(inputNames, inputKeys) {
84    hideAllConfigsExcept("genesis-config");
85    renderInputs(inputNames, inputKeys);
86}
87
88/**
89 * @param inputNames {string[]}
90 * @param inputKeys {string[]}
91 */
92export function showSnesConfig(inputNames, inputKeys) {
93    hideAllConfigsExcept("snes-config");
94    renderInputs(inputNames, inputKeys);
95}
96
97/**
98 * @param inputNames {string[]}
99 * @param inputKeys {string[]}
100 */
101export function showGbaConfig(inputNames, inputKeys) {
102    hideAllConfigsExcept("gba-config");
103    renderInputs(inputNames, inputKeys);
104}
105
106/**
107 * @param visible {boolean}
108 */
109export function setCursorVisible(visible) {
110    let canvas = document.querySelector("canvas");
111    if (visible) {
112        canvas.classList.remove("cursor-hidden");
113    } else {
114        canvas.classList.add("cursor-hidden");
115    }
116}
117
118/**
119 * @param romTitle {string}
120 */
121export function setRomTitle(romTitle) {
122    document.getElementById("jgenesis-rom-title").innerText = romTitle;
123}
124
125/**
126 * @param saveUiEnabled {boolean}
127 */
128export function setSaveUiEnabled(saveUiEnabled) {
129    let saveButtons = document.getElementsByClassName("save-button");
130    if (saveUiEnabled) {
131        for (let i = 0; i < saveButtons.length; i++) {
132            saveButtons[i].removeAttribute("disabled");
133        }
134    } else {
135        for (let i = 0; i < saveButtons.length; i++) {
136            saveButtons[i].setAttribute("disabled", "");
137        }
138    }
139}
140
141export function beforeInputConfigure() {
142    for (const element of document.getElementsByClassName("input-configure")) {
143        element.disabled = true;
144    }
145
146    document.getElementById("jgenesis-wasm").classList.add("darken");
147}
148
149/**
150 * @param name {string}
151 * @param key {string}
152 */
153export function afterInputConfigure(name, key) {
154    for (const element of document.getElementsByClassName("input-configure")) {
155        element.disabled = false;
156
157        if (element.getAttribute("data-name") === name) {
158            element.setAttribute("value", key);
159        }
160    }
161
162    document.getElementById("jgenesis-wasm").classList.remove("darken");
163}
164
165export function showWebGpuUnsupportedMessage() {
166    document.getElementById("loading-text").innerHTML = (
167        '<p><a href="https://webgpu.org/">WebGPU</a> browser support is required</p>' +
168        '<p>An older version that uses WebGL is available <a href="https://jsgroth.dev/jgenesis-webgl/">here</a></p>'
169    );
170}
171
172/**
173 * @param key {string}
174 * @return {string | null}
175 */
176export function localStorageGet(key) {
177    return localStorage.getItem(key);
178}
179
180/**
181 * @param key {string}
182 * @param value {string}
183 */
184export function localStorageSet(key, value) {
185    localStorage.setItem(key, value);
186}
187