adjusted key setter function to use the keybind interface and added prep settings

src/settings.ts

@@ -18,30 +18,52 @@ document.querySelector('#content').innerHTML = `<h1>Gauntlet Settings</h1>
 </tr>
 </tbody>
 </table>
-</fieldset>`;
+</fieldset>
+<fieldset>
+<legend>Prepping</legend>
+<table>
+<tbody>
+<tr>
+<td><label for="prep-password">Password</label></td>
+<td><input type="text" id="prep-password"></td>
+<td><input type="button" class="button" id="set-prep-password" value="Set"></td>
+</tr>
+<tr>
+<td><label for="switchers">Switchers</label></td>
+<td><textarea id="switchers"></textarea></td>
+<td><input type="button" class="button" id="set-switchers" value="Set"></td>
+</tr>
+</tbody>
+</table>
+</fieldset>
+`;
 
-async function addKeySetter(functionName: string, displayName?: string)
+/**
+ * Create a text field and corresponding button for setting the key of a function.
+ * @param keybind   the keybind to set
+ */
+async function addKeySetter(keybind: Keybind)
 {
-    if (displayName === undefined)
-        displayName = pretty(functionName);
+    if (keybind.displayName === null)
+        keybind.displayName = pretty(keybind.functionName);
     const setKeyInput: HTMLInputElement = document.createElement('input');
     setKeyInput.type = 'button';
     setKeyInput.value = 'Set';
     setKeyInput.classList.add('button');
     setKeyInput.addEventListener('click', async (e: MouseEvent): Promise<void> =>
     {
-        console.log(`Setting ${functionName}`);
-        const key: string = (document.querySelector(`#${functionName}-key`) as HTMLInputElement).value
+        console.log(`Setting ${keybind.functionName}`);
+        const key: string = (document.querySelector(`#${keybind.functionName}-key`) as HTMLInputElement).value
             .toUpperCase();
-        await setStorageValue(functionName, key);
+        await setStorageValue(keybind.functionName, key);
     });
 
     const tr: HTMLTableRowElement = document.createElement('tr');
     const td1: HTMLTableDataCellElement = document.createElement('td');
-    td1.innerHTML += `<label>${displayName}</label>`;
+    td1.innerHTML += `<label>${keybind.displayName}</label>`;
     const td2: HTMLTableDataCellElement = document.createElement('td');
     td2.innerHTML +=
-        `<input type="text" id="${functionName}-key" value="${await getStorageValue(functionName) || '?'}">`;
+        `<input type="text" id="${keybind.functionName}-key" value="${await getStorageValue(keybind.functionName) || '?'}">`;
     const td3: HTMLTableDataCellElement = document.createElement('td');
     td3.appendChild(setKeyInput);
     tr.appendChild(td1);
@@ -50,23 +72,37 @@ async function addKeySetter(functionName: string, displayName?: string)
     document.querySelector('#keys').appendChild(tr);
 }
 
+async function setJumpPoint(e: MouseEvent): Promise<void>
+{
+    const jumpPoint: string =
+        canonicalize((document.querySelector('#jump-point') as HTMLInputElement).value);
+    await setStorageValue('jp', jumpPoint);
+}
+
+async function setPassword(e: MouseEvent): Promise<void>
+{
+    const password: string = (document.querySelector('#prep-password') as HTMLInputElement).value;
+    await setStorageValue('password', password);
+}
+
+async function setSwitchers(e: MouseEvent): Promise<void>
+{
+    let switchers: string[] =
+        (document.querySelector('#switchers') as HTMLTextAreaElement).value.split('\n');
+    for (let i = 0; i < switchers.length; i++)
+        switchers[i] = canonicalize(switchers[i]);
+    await setStorageValue('switchers', switchers);
+}
+
 (async () =>
 {
     // Set up the keybind setting form
-    for (let i = 0; i < keybinds.length; i++) {
-        if (keybinds[i].displayName)
-            await addKeySetter(keybinds[i].functionName, keybinds[i].displayName);
-        else
-            await addKeySetter(keybinds[i].functionName);
-    }
+    for (let i = 0; i < keybinds.length; i++)
+        await addKeySetter(keybinds[i]);
 
     // Other settings
     (document.querySelector('#jump-point') as HTMLInputElement).value = await getStorageValue('jp');
-    document.querySelector('#set-jump-point')
-        .addEventListener('click', async (e: MouseEvent): Promise<void> =>
-    {
-        const jumpPoint: string =
-            canonicalize((document.querySelector('#jump-point') as HTMLInputElement).value);
-        await setStorageValue('jp', jumpPoint);
-    });
+    document.querySelector('#set-jump-point').addEventListener('click', setJumpPoint);
+    document.querySelector('#set-prep-password').addEventListener('click', setPassword);
+    document.querySelector('#set-switchers').addEventListener('click', setSwitchers);
 })();