Skip to content

Commit 35c16f2

Browse files
Volte6Volte6
authored
Web layout (#240)
# Changes * Makes website more compatible with mobile * Move webclient connect button to center of screen * Fixes a websocket panic when client disconnects before logging in
1 parent c236161 commit 35c16f2

File tree

6 files changed

+110
-52
lines changed

6 files changed

+110
-52
lines changed

‎_datafiles/html/public/_footer.html‎

Lines changed: 16 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,20 @@
11
{{define "footer"}}
2-
</div>
2+
</div>
33

4-
<footer>
5-
<p>Powered by <b>GoMud</b> - Available free at
6-
<a target="_blank" href="http://github.com/Volte6/GoMud">
7-
github.com/Volte6/GoMud
8-
</a>
9-
</p>
10-
</footer>
11-
</body>
4+
<footer>
5+
<p>Powered by <b>GoMud</b> - Available free at
6+
<a target="_blank" href="http://github.com/Volte6/GoMud">
7+
github.com/Volte6/GoMud
8+
</a>
9+
</p>
10+
</footer>
11+
12+
<script>
13+
function toggleMenu() {
14+
const navContainer = document.querySelector('.nav-container');
15+
navContainer.style.display = navContainer.style.display === 'flex' ? 'none' : 'flex';
16+
}
17+
</script>
18+
</body>
1219
</html>
1320
{{end}}

‎_datafiles/html/public/_header.html‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,11 @@
1313
<div>
1414
<a class="gomud-btn" href="/">GoMud</a>
1515
</div>
16+
<div class="nav-toggle" onclick="toggleMenu()">
17+
<div></div>
18+
<div></div>
19+
<div></div>
20+
</div>
1621
</header>
1722

1823
<nav>

‎_datafiles/html/public/index.html‎

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
11
{{template "header" .}}
2-
<div class="play-button">
3-
<a href="/webclient">
4-
<img src="/static/public/images/btn_play.png" alt="Play" />
5-
</a>
6-
</div>
7-
<p>&nbsp;</p>
8-
<div class="underlay" style="width:600px;text-align:center;">
9-
<h3>Telnet Port{{ if gt (len .TelnetPort) 1 }}s{{end}}: {{ join .TelnetPort ", " }}</h3>
10-
</div>
2+
<div class="play-button">
3+
<a href="/webclient">
4+
<img src="/static/public/images/btn_play.png" alt="Play" />
5+
</a>
6+
</div>
7+
<p>&nbsp;</p>
8+
<div class="underlay">
9+
<h3>Telnet Port{{ if gt (len .TelnetPort) 1 }}s{{end}}: {{ join .TelnetPort ", " }}</h3>
10+
</div>
1111
{{template "footer" .}}

‎_datafiles/html/public/webclient.html‎

Lines changed: 32 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -47,16 +47,31 @@
4747
color: white;
4848
border-radius: 0px 5px 5px 0px;
4949
}
50+
#command-input:focus {
51+
outline: none;
52+
}
53+
54+
/* FLOATING CONNECT BUTTON IN THE CENTER */
5055
#connect-button {
51-
padding: 10px 20px;
52-
font-size: 16px;
56+
position: absolute;
57+
/* Center in viewport */
58+
top: 50%;
59+
left: 50%;
60+
transform: translate(-50%, -50%);
61+
z-index: 9999;
62+
63+
/* Larger styling */
64+
padding: 20px 40px;
65+
font-size: 20px;
66+
5367
background-color: #555;
5468
color: white;
5569
border: none;
5670
cursor: pointer;
57-
margin-left: 10px;
58-
animation: pulse 1s infinite alternate;
5971
border-radius: 5px;
72+
73+
/* Keep the original pulsing effect */
74+
animation: pulse 1s infinite alternate;
6075
}
6176
#connect-button:disabled {
6277
color: #888;
@@ -76,10 +91,6 @@
7691
}
7792
}
7893

79-
#command-input:focus {
80-
outline: none;
81-
}
82-
8394
/* Sound icon in top-right corner */
8495
#menu-icon {
8596
position: absolute;
@@ -147,6 +158,7 @@
147158
transform: scale(1.2);
148159
cursor: pointer;
149160
}
161+
150162
</style>
151163

152164
<link rel="stylesheet" href="/static/public/css/xterm.css" />
@@ -176,9 +188,12 @@ <h3>Volume Controls</h3>
176188
<div id="main-container">
177189
<div id="terminal"></div>
178190
</div>
191+
192+
<!-- CONNECT BUTTON FLOATED IN CENTER -->
193+
<button id="connect-button">Connect</button>
194+
179195
<div id="input-area">
180196
<input type="text" id="command-input" placeholder="Enter command...">
181-
<button id="connect-button">Connect</button>
182197
</div>
183198

184199
<script>
@@ -289,6 +304,11 @@ <h3>Volume Controls</h3>
289304
socket.onopen = function() {
290305
term.writeln("Connected to the server!");
291306
term.clear();
307+
308+
// Hide the button when connected
309+
connectButton.style.display = 'none';
310+
311+
// We also disable it right away to prevent double-click confusion
292312
connectButton.disabled = true;
293313
textInput.focus();
294314
};
@@ -393,7 +413,10 @@ <h3>Volume Controls</h3>
393413
} else {
394414
term.writeln("Connection died");
395415
}
416+
// Show the button again when disconnected
417+
connectButton.style.display = 'block';
396418
connectButton.disabled = false;
419+
397420
if (textInput.type === "password") {
398421
textInput.value = '';
399422
textInput.type = "text";

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

Lines changed: 46 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -28,16 +28,13 @@ header {
2828
color: #c9e2db;
2929
background-color: #6c7682;
3030
border: 2px solid #c9e2db;
31-
position: relative;
3231
text-transform: uppercase;
3332
letter-spacing: 2px;
34-
border-radius: 0;
3533
transition: all 0.2s ease;
3634
}
3735

3836
.gomud-btn:hover {
3937
box-shadow: 6px 6px 0px 0px #80a5a9;
40-
background-color: #6c7682;
4138
color: #80a5a9;
4239
}
4340

@@ -59,7 +56,6 @@ nav {
5956
.nav-container a {
6057
color: #c9e2db;
6158
text-decoration: none;
62-
transition: transform 0.2s ease, color 0.2s ease;
6359
padding: 8px 16px;
6460
border-radius: 4px;
6561
background-color: rgba(255, 255, 255, 0.1);
@@ -69,7 +65,39 @@ nav {
6965
.nav-container a:hover {
7066
color: #80a5a9;
7167
background-color: rgba(255, 255, 255, 0.2);
72-
transform: scale(1.1);
68+
}
69+
70+
/* Mobile Navigation */
71+
.nav-toggle {
72+
display: none;
73+
flex-direction: column;
74+
cursor: pointer;
75+
}
76+
77+
.nav-toggle div {
78+
width: 30px;
79+
height: 4px;
80+
background: #c9e2db;
81+
margin: 5px;
82+
}
83+
84+
@media (max-width: 768px) {
85+
.nav-container {
86+
display: none;
87+
flex-direction: column;
88+
text-align: center;
89+
gap: 1rem;
90+
padding: 12px 0;
91+
}
92+
93+
.nav-container a {
94+
display: block;
95+
padding: 12px;
96+
}
97+
98+
.nav-toggle {
99+
display: flex;
100+
}
73101
}
74102

75103
.content-container {
@@ -78,37 +106,32 @@ nav {
78106
flex-direction: column;
79107
justify-content: center;
80108
align-items: center;
81-
overflow: hidden;
109+
padding: 20px;
82110
}
83111

84-
.overlay {
85-
width: 80%;
112+
.overlay, .underlay {
113+
width: 90%;
86114
max-width: 1200px;
87-
height: 800px;
88-
overflow-y: auto;
89115
background-color: rgba(0, 0, 0, 0.7);
90116
padding: 20px;
91117
border-radius: 8px;
92-
118+
text-align: center;
93119
}
94120

95-
.overlay.play-button {
96-
text-align: center;
121+
.overlay {
122+
height: auto;
123+
max-height: 800px;
124+
overflow-y: auto;
97125
}
98126

99127
.underlay {
100-
width: 80%;
101-
max-width: 1200px;
102-
height: 200px;
103-
overflow-y: auto;
104-
background-color: rgba(0, 0, 0, 0.7);
105-
padding: 20px;
106-
border-radius: 8px;
107-
128+
height: auto;
129+
max-height: 200px;
108130
}
109131

110-
.play-button img:hover {
111-
transform: scale(1.1);
132+
.play-button img {
133+
width: 100%;
134+
max-width: 300px;
112135
}
113136

114137
footer {

‎main.go‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -597,11 +597,11 @@ func HandleWebSocketConnection(conn *websocket.Conn) {
597597

598598
if err != nil {
599599

600-
userObject.EventLog.Add(`conn`, `Disconnected`)
601-
602600
// If failed to read from the connection, switch to zombie state
603601
if userObject != nil {
604602

603+
userObject.EventLog.Add(`conn`, `Disconnected`)
604+
605605
if c.ZombieSeconds > 0 {
606606

607607
connDetails.SetState(connections.Zombie)

0 commit comments

Comments
 (0)