Web layout

_datafiles/html/public/_footer.html

@@ -1,13 +1,20 @@
 {{define "footer"}}
-  </div>
+    </div>
 
-  <footer>
-    <p>Powered by <b>GoMud</b> - Available free at 
-      <a target="_blank" href="http://github.com/Volte6/GoMud">
-        github.com/Volte6/GoMud
-      </a>
-    </p>
-  </footer>
-</body>
+    <footer>
+      <p>Powered by <b>GoMud</b> - Available free at 
+        <a target="_blank" href="http://github.com/Volte6/GoMud">
+          github.com/Volte6/GoMud
+        </a>
+      </p>
+    </footer>
+
+    <script>
+      function toggleMenu() {
+        const navContainer = document.querySelector('.nav-container');
+        navContainer.style.display = navContainer.style.display === 'flex' ? 'none' : 'flex';
+      }
+    </script>
+  </body>
 </html>
 {{end}}

_datafiles/html/public/_header.html

@@ -13,6 +13,11 @@
     <div>
       <a class="gomud-btn" href="/">GoMud</a>
     </div>
+    <div class="nav-toggle" onclick="toggleMenu()">
+      <div></div>
+      <div></div>
+      <div></div>
+    </div>
   </header>
 
   <nav>

_datafiles/html/public/index.html

@@ -1,11 +1,11 @@
 {{template "header" .}}
-<div class="play-button">
-  <a href="/webclient">
-    <img src="/static/public/images/btn_play.png" alt="Play" />
-  </a>
-</div>
-<p>&nbsp;</p>
-<div class="underlay" style="width:600px;text-align:center;">
-  <h3>Telnet Port{{ if gt (len .TelnetPort) 1 }}s{{end}}: {{ join .TelnetPort ", " }}</h3>
-</div>
+  <div class="play-button">
+    <a href="/webclient">
+      <img src="/static/public/images/btn_play.png" alt="Play" />
+    </a>
+  </div>
+  <p>&nbsp;</p>
+  <div class="underlay">
+    <h3>Telnet Port{{ if gt (len .TelnetPort) 1 }}s{{end}}: {{ join .TelnetPort ", " }}</h3>
+  </div>
 {{template "footer" .}}

_datafiles/html/public/webclient.html

@@ -47,16 +47,31 @@
             color: white;
             border-radius: 0px 5px 5px 0px;
         }
+        #command-input:focus {
+            outline: none;
+        }
+
+        /* FLOATING CONNECT BUTTON IN THE CENTER */
         #connect-button {
-            padding: 10px 20px;
-            font-size: 16px;
+            position: absolute;
+            /* Center in viewport */
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+            z-index: 9999;
+
+            /* Larger styling */
+            padding: 20px 40px;
+            font-size: 20px;
+
             background-color: #555;
             color: white;
             border: none;
             cursor: pointer;
-            margin-left: 10px;
-            animation: pulse 1s infinite alternate;
             border-radius: 5px;
+
+            /* Keep the original pulsing effect */
+            animation: pulse 1s infinite alternate;
         }
         #connect-button:disabled {
             color: #888;
@@ -76,10 +91,6 @@
             }
         }
 
-        #command-input:focus {
-            outline: none;
-        }
-
         /* Sound icon in top-right corner */
         #menu-icon {
             position: absolute;
@@ -147,6 +158,7 @@
             transform: scale(1.2);
             cursor: pointer;
         }
+
     </style>
 
     <link rel="stylesheet" href="/static/public/css/xterm.css" />
@@ -176,9 +188,12 @@ <h3>Volume Controls</h3>
     <div id="main-container">
         <div id="terminal"></div>
     </div>
+
+    <!-- CONNECT BUTTON FLOATED IN CENTER -->
+    <button id="connect-button">Connect</button>
+
     <div id="input-area">
         <input type="text" id="command-input" placeholder="Enter command...">
-        <button id="connect-button">Connect</button>
     </div>
 
     <script>
@@ -289,6 +304,11 @@ <h3>Volume Controls</h3>
             socket.onopen = function() {
                 term.writeln("Connected to the server!");
                 term.clear();
+
+                // Hide the button when connected
+                connectButton.style.display = 'none';
+
+                // We also disable it right away to prevent double-click confusion
                 connectButton.disabled = true;
                 textInput.focus();
             };
@@ -393,7 +413,10 @@ <h3>Volume Controls</h3>
                 } else {
                     term.writeln("Connection died");
                 }
+                // Show the button again when disconnected
+                connectButton.style.display = 'block';
                 connectButton.disabled = false;
+
                 if (textInput.type === "password") {
                     textInput.value = '';
                     textInput.type = "text";

_datafiles/html/static/public/css/gomud.css

@@ -28,16 +28,13 @@ header {
   color: #c9e2db;
   background-color: #6c7682;
   border: 2px solid #c9e2db;
-  position: relative;
   text-transform: uppercase;
   letter-spacing: 2px;
-  border-radius: 0;
   transition: all 0.2s ease; 
 }
 
 .gomud-btn:hover {
   box-shadow: 6px 6px 0px 0px #80a5a9;
-  background-color: #6c7682;
   color: #80a5a9;
 }
 
@@ -59,7 +56,6 @@ nav {
 .nav-container a {
   color: #c9e2db;
   text-decoration: none;
-  transition: transform 0.2s ease, color 0.2s ease;
   padding: 8px 16px;
   border-radius: 4px;
   background-color: rgba(255, 255, 255, 0.1);
@@ -69,7 +65,39 @@ nav {
 .nav-container a:hover {
   color: #80a5a9;
   background-color: rgba(255, 255, 255, 0.2);
-  transform: scale(1.1);
+}
+
+/* Mobile Navigation */
+.nav-toggle {
+  display: none;
+  flex-direction: column;
+  cursor: pointer;
+}
+
+.nav-toggle div {
+  width: 30px;
+  height: 4px;
+  background: #c9e2db;
+  margin: 5px;
+}
+
+@media (max-width: 768px) {
+  .nav-container {
+    display: none;
+    flex-direction: column;
+    text-align: center;
+    gap: 1rem;
+    padding: 12px 0;
+  }
+
+  .nav-container a {
+    display: block;
+    padding: 12px;
+  }
+
+  .nav-toggle {
+    display: flex;
+  }
 }
 
 .content-container {
@@ -78,37 +106,32 @@ nav {
   flex-direction: column;
   justify-content: center;
   align-items: center;
-  overflow: hidden;
+  padding: 20px;
 }
 
-.overlay {
-  width: 80%;
+.overlay, .underlay {
+  width: 90%;
   max-width: 1200px;
-  height: 800px;
-  overflow-y: auto;
   background-color: rgba(0, 0, 0, 0.7);
   padding: 20px;
   border-radius: 8px;
-
+  text-align: center;
 }
 
-.overlay.play-button {
-  text-align: center;
+.overlay {
+  height: auto;
+  max-height: 800px;
+  overflow-y: auto;
 }
 
 .underlay {
-  width: 80%;
-  max-width: 1200px;
-  height: 200px;
-  overflow-y: auto;
-  background-color: rgba(0, 0, 0, 0.7);
-  padding: 20px;
-  border-radius: 8px;
-
+  height: auto;
+  max-height: 200px;
 }
 
-.play-button img:hover {
-  transform: scale(1.1);
+.play-button img {
+  width: 100%;
+  max-width: 300px;
 }
 
 footer {

main.go

@@ -597,11 +597,11 @@ func HandleWebSocketConnection(conn *websocket.Conn) {
 
 		if err != nil {
 
-			userObject.EventLog.Add(`conn`, `Disconnected`)
-
 			// If failed to read from the connection, switch to zombie state
 			if userObject != nil {
 
+				userObject.EventLog.Add(`conn`, `Disconnected`)
+
 				if c.ZombieSeconds > 0 {
 
 					connDetails.SetState(connections.Zombie)