change serverlist to use detail tag

prep for onhover description

3 files changed, 50 insertions, 81 deletions

diff --git a/public/index.html b/public/index.html
index 27f40a8..f0ec2af 100644
--- a/public/index.html
+++ b/public/index.html
@@ -136,27 +136,13 @@
         </div>
       </noscript>
       <ul class="serverlist">
-        <li id="server-2" onmouseover="setServ(-2)">
-          <p>Singleplayer (beta)</p>
-          <a class="button" href="client.html?mode=replay">Try</a>
-        </li>
+        <details name="servers">
+          <summary><p>Singleplayer</p>
+            <a class="button" href="client.html?mode=replay">Join</a></summary>
+          <p>This is your computer</p>
+        </details>
       </ul>
       <ul class="serverlist" id="masterlist"></ul>
-      <ul class="serverlist">
-        <li id="server-1" onmouseover="setServ(-1)">
-          <p>Localhost</p>
-          <a
-            class="button"
-            href="client.html?mode=watch&connect=ws://127.0.0.1:50001"
-            >Watch</a
-          >
-          <a
-            class="button"
-            href="client.html?mode=join&connect=ws://127.0.0.1:50001"
-            >Join</a
-          >
-        </li>
-      </ul>
       <div id="info_container">
         <p id="serverinfo">Masterserver version - ...</p>
         <p id="clientinfo">Client version - ...</p>
diff --git a/webAO/master.ts b/webAO/master.ts
index 87c7525..fbddaa3 100644
--- a/webAO/master.ts
+++ b/webAO/master.ts
@@ -1,11 +1,5 @@
 import { safeTags } from "./encoding";
 
-declare global {
-  interface Window {
-    setServ: (ID: number) => void;
-  }
-}
-
 interface AOServer {
   name: string;
   description: string;
@@ -27,22 +21,13 @@ const protocol = window.location.protocol;
 const serverlist_cache_key = "masterlist";
 
 const servers: AOServer[] = [];
-servers[-2] = {
-  name: "Singleplayer",
-  description: "Build cases, try out new things",
-  ip: "127.0.0.1",
-  players: 0,
-  online: "Singleplayer",
-  port: 50001,
-} as AOServer;
-
 servers[-1] = {
   name: "Localhost",
   description: "This is your computer on port 50001",
   ip: "127.0.0.1",
   players: 0,
   online: "Localhost",
-  port: 50001,
+  ws_port: 50001,
 } as AOServer;
 
 function main() {
@@ -50,6 +35,8 @@ function main() {
     processServerlist(serverlist);
   });
 
+  addServer(servers[-1]);
+
   processClientVersion(clientVersion);
 
   getMasterVersion().then((masterVersion) => {
@@ -59,17 +46,6 @@ function main() {
 
 main();
 
-export function setServ(ID: number) {
-  const server = servers[ID];
-  const onlineStr = server.online;
-  document.getElementById("serverdescription_content").innerHTML =
-    `<b>${onlineStr}</b><br>`;
-  document
-    .getElementById("serverdescription_content")
-    .appendChild(document.createTextNode(server.description));
-}
-window.setServ = setServ;
-
 // Fetches the serverlist from the masterserver
 // Returns a properly typed list of servers
 async function getServerlist(): Promise<AOServer[]> {
@@ -164,41 +140,48 @@ function constructClientURL(protocol: string): string {
   return clientURL.href;
 }
 
-function processServerlist(serverlist: AOServer[]) {
-  for (let i = 0; i < serverlist.length; i++) {
-    const server = serverlist[i];
-    let ws_port = 0;
-    let ws_protocol = "";
-    let http_protocol = "";
-
-    if (server.ws_port) {
-      ws_port = server.ws_port;
-      ws_protocol = "ws";
-      http_protocol = "http";
-    }
-    if (server.wss_port && !window.navigator.userAgent.includes("Nintendo")) {
-      ws_port = server.wss_port;
-      ws_protocol = "wss";
-      http_protocol = "https";
-    }
+function addServer(server: AOServer) {
+  let ws_port = 0;
+  let ws_protocol = "";
+  let http_protocol = "";
 
-    if (ws_port === 0 || ws_protocol === "" || http_protocol === "") {
-      console.warn(`Server ${server.name} has no websocket port, skipping`);
-      continue;
-    }
+  if (server.ws_port) {
+    ws_port = server.ws_port;
+    ws_protocol = "ws";
+    http_protocol = "http";
+  }
+  if (server.wss_port && !window.navigator.userAgent.includes("Nintendo")) {
+    ws_port = server.wss_port;
+    ws_protocol = "wss";
+    http_protocol = "https";
+  }
+
+  if (ws_port === 0 || ws_protocol === "" || http_protocol === "") {
+    console.warn(`Server ${server.name} has no websocket port, skipping`);
+    return;
+  }
+
+  const clientURL = constructClientURL(http_protocol);
+  const connect = `${ws_protocol}://${server.ip}:${ws_port}`;
+  const serverName = server.name;
+  const fullClientWatchURL = `${clientURL}?mode=watch&connect=${connect}&serverName=${serverName}`;
+  const fullClientJoinURL = `${clientURL}?mode=join&connect=${connect}&serverName=${serverName}`;
+
+  servers.push(server);
 
-    const clientURL = constructClientURL(http_protocol);
-    const connect = `${ws_protocol}://${server.ip}:${ws_port}`;
-    const serverName = server.name;
-    const fullClientWatchURL = `${clientURL}?mode=watch&connect=${connect}&serverName=${serverName}`;
-    const fullClientJoinURL = `${clientURL}?mode=join&connect=${connect}&serverName=${serverName}`;
+  document.getElementById("masterlist").innerHTML +=
+    `<details name="servers">` +
+    `<summary><p>${safeTags(server.name)} (${server.players})</p>` +
+    `<a class="button" href="${fullClientJoinURL}" target="_blank">Join</a>` +
+    `<a class="button" href="${fullClientWatchURL}" target="_blank">Watch</a></summary>` +
+    `<p>${safeTags(server.description)}</p>` +
+    `</details>`
 
-    servers.push(server);
+}
 
-    document.getElementById("masterlist").innerHTML +=
-      `<li id="server${i}" onmouseover="setServ(${i})"><p>${safeTags(server.name)} (${server.players})</p>` +
-      `<a class="button" href="${fullClientWatchURL}" target="_blank">Watch</a>` +
-      `<a class="button" href="${fullClientJoinURL}" target="_blank">Join</a></li>`;
+function processServerlist(serverlist: AOServer[]) {
+  for (let i = 0; i < serverlist.length; i++) {
+    addServer(serverlist[i]);
   }
 }
 
diff --git a/webAO/styles/master.css b/webAO/styles/master.css
index 3f73294..a893f6e 100644
--- a/webAO/styles/master.css
+++ b/webAO/styles/master.css
@@ -92,7 +92,7 @@
   margin: auto;
 }
 
-.serverlist li {
+.serverlist details {
   position: relative;
   right: 0;
   background-color: #fff;
@@ -110,16 +110,16 @@
   cursor: default;
 }
 
-.serverlist li:hover {
+.serverlist details:hover {
   background-color: #ffff6b;
   border-color: #efad21;
 }
 
-.serverlist li p {
+.serverlist details p {
   display: inline-block !important;
 }
 
-.serverlist li a {
+.serverlist details a {
   float: right;
 }