Connect a computer: pick scripts with a row of toggle buttons (#197)

The three checkboxes, each with a hint line, pushed the command about
100px down. They're now one row of toggle buttons (aria-pressed, the
range buttons' active look) with each hint as the button's tooltip; the
installer still warns about a missing Adapter.

Co-authored-by: Maselkov <25772111+Maselkov@users.noreply.github.com>
Co-authored-by: Claude Opus 5.5 <noreply@anthropic.com>

Author: Maselkov

README.md

@@ -84,7 +84,7 @@ The full list, including the OpenComputers config settings, is under
    there until its script reports). Check the address in the command is
    one the Minecraft server can reach (**Use a different address** changes
    it), then paste the command into that computer (each one, if you use
-   several), after ticking the scripts that computer should run. It
+   several), after picking the scripts that computer should run. It
    installs them, checks that the computer can reach the server, starts
    them on every boot and reboots. If it can't reach it, see
    [Scripts can't reach the server](#scripts-cant-reach-the-server).

docs/CONTEXT.md

@@ -1647,9 +1647,11 @@ Connecting a computer: the Status dialog's "Connect a computer" builds
 one line, `wget ... gcm.lua && /tmp/gcm.lua install <scripts>
 --server=<url> --api-key=<key>` (OpenOS's shell chains with `&&`; checked
 in game), from `/api/admin/connect` (the API key and `PUBLIC_URL`; the
-page's own origin without it). The scripts are the ones ticked above it
-(`CONNECT_SCRIPTS` in agents.js, which a JS test holds to
-oc/manifest.lua's components; the ticks kept in localStorage); naming them
+page's own origin without it). The scripts are the ones switched on above it,
+a row of toggle buttons (`aria-pressed`) with each one's needed block as
+its tooltip, to keep the section short (`CONNECT_SCRIPTS` in agents.js,
+which a JS test holds to oc/manifest.lua's components; the choice kept in
+localStorage); naming them
 skips gcm's question for each. That gcm.lua comes from main, not a
 release, so installer changes reach new computers on merge. Install asks
 nothing else: it always enables the scripts and gcm_agent in rc and

docs/in-game.md

@@ -173,8 +173,9 @@ wget -f https://raw.githubusercontent.com/Maselkov/gtnh-craft-monitor/main/oc/gc
 
 **Settings (⚙) → Status → Connect a computer** on the web page shows
 both as one command, joined with `&&`, with this server's address and API
-key filled in, ready to copy. Tick the scripts this computer should run
-first (Crafts, Power, Network; the page remembers your choice), and the
+key filled in, ready to copy. First switch on the scripts this computer
+should run with the Crafts, Power and Network buttons above it (hover one
+to see which block it needs; the page remembers your choice), and the
 command names them, so the computer doesn't ask. Paste it into the
 computer with the middle mouse button or Insert.
 The address is the page's own unless `PUBLIC_URL` is set; if the

server/index.html

@@ -510,7 +510,7 @@ <h2>This base is private</h2>
         <div class="status-heading connect-heading">Connect a computer</div>
         <div class="connect-computer">
           <div class="modal-note">On an OpenComputers computer with an Internet Card, run this command: pick the scripts it installs, copy it and paste it into the computer with the middle mouse button or Insert.</div>
-          <div id="connectScripts" class="agent-settings connect-scripts"></div>
+          <div id="connectScripts" class="connect-scripts"></div>
           <div id="connectNoScripts" class="agent-line agent-command failed" style="display:none;">Pick at least one script to install.</div>
           <div id="connectAddress" hidden>
             <label class="modal-label" for="connectServerUrl">This server's address, as the Minecraft server reaches it</label>

server/static/app.css

@@ -1383,7 +1383,16 @@ body.private-locked #networkTab {
   margin-top: 16px;
 }
 .connect-scripts {
-  margin: 10px 0 0;
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 6px;
+  margin-top: 8px;
+  font-size: 13px;
+}
+.connect-scripts-label {
+  color: var(--muted);
+  margin-right: 2px;
 }
 .connect-command {
   display: flex;

server/static/js/agents.js

@@ -276,8 +276,8 @@ const GCM_URL = 'https://raw.githubusercontent.com/Maselkov/gtnh-craft-monitor/m
 const LOCAL_HOST = /^(localhost|127\.|10\.|192\.168\.|172\.(1[6-9]|2\d|3[01])\.)/;
 
 // The scripts the command installs, as oc/manifest.lua names them
-// (agents.test.js checks the two agree). Which are ticked is remembered
-// per browser.
+// (agents.test.js checks the two agree), as a row of toggle buttons; the
+// hint is each one's tooltip. Which are on is remembered per browser.
 export const CONNECT_SCRIPTS = [
   { name: 'craft', label: 'Crafts', hint: 'Crafts tab and crafting from the page. Needs an Adapter touching an ME controller or interface.' },
   { name: 'power', label: 'Power', hint: 'Power tab. Needs an Adapter touching a GregTech machine, e.g. the LSC.' },
@@ -313,10 +313,11 @@ export function connectCommand(serverUrl, apiKey, scripts = []) {
 }
 
 export function connectScriptsHtml(chosen) {
-  return CONNECT_SCRIPTS.map(s => `<label class="agent-setting">
-    <input type="checkbox" data-script="${s.name}"${chosen.includes(s.name) ? ' checked' : ''}>
-    <span>${escapeHtml(s.label)}<span class="agent-line">${escapeHtml(s.hint)}</span></span>
-  </label>`).join('');
+  return '<span class="connect-scripts-label">Install:</span>' + CONNECT_SCRIPTS.map((s) => {
+    const on = chosen.includes(s.name);
+    return `<button class="range-btn${on ? ' active' : ''}" data-action="toggle-connect-script"`
+      + ` data-script="${s.name}" aria-pressed="${on}" title="${escapeHtml(s.hint)}">${escapeHtml(s.label)}</button>`;
+  }).join('');
 }
 
 function savedConnectScripts() {
@@ -329,10 +330,13 @@ function savedConnectScripts() {
 }
 
 function chosenScripts() {
-  return [...document.querySelectorAll('#connectScripts input:checked')].map(box => box.dataset.script);
+  return [...document.querySelectorAll('#connectScripts [aria-pressed="true"]')].map(btn => btn.dataset.script);
 }
 
-function onConnectScriptsChange() {
+function toggleConnectScript(btn) {
+  const on = btn.getAttribute('aria-pressed') !== 'true';
+  btn.setAttribute('aria-pressed', String(on));
+  btn.classList.toggle('active', on);
   try {
     localStorage.setItem(CONNECT_SCRIPTS_KEY, JSON.stringify(chosenScripts()));
   } catch (e) { /* per-viewer nicety only */ }
@@ -537,11 +541,10 @@ export function setupAgentsActions() {
     'copy-connect': () => copyConnect(),
     'edit-connect-address': () => editConnectAddress(),
     'toggle-connect-key': () => { connectKeyShown = !connectKeyShown; renderConnect(); },
+    'toggle-connect-script': (el) => toggleConnectScript(el),
   });
   document.getElementById('connectServerUrl').addEventListener('input', renderConnect);
-  const scripts = document.getElementById('connectScripts');
-  scripts.innerHTML = connectScriptsHtml(savedConnectScripts());
-  scripts.addEventListener('change', onConnectScriptsChange);
+  document.getElementById('connectScripts').innerHTML = connectScriptsHtml(savedConnectScripts());
   for (const [key, id] of Object.entries(SETTING_TOGGLES)) {
     const box = document.getElementById(id);
     box.addEventListener('change', () => saveSetting(key, box));

server/tests/e2e/run.mjs

@@ -1927,9 +1927,11 @@ async function main() {
       && $('#connectCommand').textContent.startsWith('wget -f ')
       && $('#connectCommand').textContent.endsWith('/oc/gcm.lua /tmp/gcm.lua && ${install}' + location.origin + ' --api-key=' + '•'.repeat(12))
       && visible($('#connectLocalNote'))`);
-    // Unticked scripts drop out of the command; with none, nothing to copy.
+    // Scripts switched off drop out of the command; with none, nothing to copy.
     await click(`$('#connectScripts [data-script="power"]')`);
-    await waitFor('power unpicked', `$('#connectCommand').textContent.includes('/tmp/gcm.lua install craft network --server=')`);
+    await waitFor('power unpicked', `$('#connectCommand').textContent.includes('/tmp/gcm.lua install craft network --server=')
+      && $('#connectScripts [data-script="power"]').getAttribute('aria-pressed') === 'false'
+      && !$('#connectScripts [data-script="power"]').classList.contains('active')`);
     await click(`$('#connectScripts [data-script="craft"]')`);
     await click(`$('#connectScripts [data-script="network"]')`);
     await waitFor('none picked', `$('#connectCommand').textContent.includes('/tmp/gcm.lua install --server=')

server/tests/js/agents.test.js

@@ -131,11 +131,11 @@ test('connect scripts are the components oc/manifest.lua installs', () => {
   assert.deepEqual(CONNECT_SCRIPTS.map(s => s.name), names);
 });
 
-test('connect scripts render a box each, ticked as chosen', () => {
+test('connect scripts render a toggle button each, pressed as chosen, the hint as tooltip', () => {
   const html = connectScriptsHtml(['power']);
-  assert.equal((html.match(/type="checkbox"/g) || []).length, 3);
-  assert.match(html, /data-script="power" checked>/);
-  assert.match(html, /data-script="craft">/);
+  assert.equal((html.match(/data-action="toggle-connect-script"/g) || []).length, 3);
+  assert.match(html, /class="range-btn active"[^>]*data-script="power" aria-pressed="true" title="Power tab\. Needs an Adapter touching a GregTech machine/);
+  assert.match(html, /class="range-btn"[^>]*data-script="craft" aria-pressed="false"/);
 });
 
 test('local addresses are the ones OpenComputers blocks by default', () => {