diff --git a/client.html b/client.html index 08b9cf1..15b0622 100644 --- a/client.html +++ b/client.html @@ -50,15 +50,22 @@ font-family: monospace; color: #fff; } - #status { + #top-left-stack { position: fixed; top: 10px; left: 10px; + z-index: 10; + display: flex; + flex-direction: column; + align-items: flex-start; + gap: 6px; + max-width: 220px; + } + #status { background: rgba(0,0,0,0.7); padding: 6px 12px; border-radius: 4px; font-size: 13px; - z-index: 10; } #hint { position: fixed; @@ -85,15 +92,30 @@ } #idle-warning.visible { display: block; } - #brightness-control { + #bottom-left-stack { position: fixed; - bottom: 40px; + bottom: 10px; left: 10px; + z-index: 10; + display: flex; + flex-direction: column; + align-items: flex-start; + gap: 8px; + max-width: 260px; + } + #disclaimer-text { + color: #ccc; + font-size: 10px; + line-height: 1.4; + background: rgba(0,0,0,0.6); + padding: 6px 10px; + border-radius: 4px; + } + #brightness-control { background: rgba(0,0,0,0.7); padding: 8px 12px; border-radius: 4px; font-size: 12px; - z-index: 10; display: flex; align-items: center; gap: 8px; @@ -107,14 +129,10 @@ } #sensitivity-control { - position: fixed; - bottom: 10px; - left: 10px; background: rgba(0,0,0,0.7); padding: 8px 12px; border-radius: 4px; font-size: 12px; - z-index: 10; display: flex; align-items: center; gap: 8px; @@ -127,9 +145,6 @@ cursor: pointer; } #sound-toggle { - position: fixed; - top: 10px; - right: 10px; background: rgba(0,0,0,0.7); color: #fff; border: 1px solid #444; @@ -138,15 +153,13 @@ font-size: 13px; font-family: monospace; cursor: pointer; - z-index: 10; } #sound-toggle:hover { background: rgba(40,40,40,0.85); } #sound-toggle.unmuted { color: #4fc; border-color: #4fc; } + #restart-group { display: none; flex-direction: column; gap: 4px; } + #restart-group.visible { display: flex; } #restart-game-btn { - position: fixed; - top: 36px; - left: 10px; background: rgba(120,20,20,0.75); color: #fff; border: 1px solid #a44; @@ -155,9 +168,16 @@ font-size: 13px; font-family: monospace; cursor: pointer; - z-index: 10; } #restart-game-btn:hover { background: rgba(160,30,30,0.9); } + #restart-hint { + color: #ccc; + font-size: 11px; + line-height: 1.3; + background: rgba(0,0,0,0.6); + padding: 4px 8px; + border-radius: 4px; + } #gameCanvas { width: 1280px; height: 720px; @@ -170,14 +190,10 @@ #gameCanvas.controlling { cursor: none; } #queue-panel { - position: fixed; - top: 68px; - left: 10px; background: rgba(0,0,0,0.75); padding: 10px 14px; border-radius: 4px; font-size: 12px; - z-index: 10; min-width: 180px; } #queue-panel h3 { font-size: 12px; color: #ffcc00; margin-bottom: 6px; } @@ -215,6 +231,8 @@ padding: 12px 16px; border-radius: 4px; max-width: 300px; + max-height: calc(100vh - 60px); + overflow-y: auto; font-size: 12px; z-index: 10; } @@ -224,23 +242,34 @@ -
Connecting...
- - -
- ☀️ 100% +
+
Connecting...
+ +
+ +

If the game appears frozen or isn't responding, press this button to restart it.

+
+
+

Controller

+
—
+
-
- 🖱️ 1.0x + +
+

+ Unloze is an independent, community-run project and is not affiliated with, endorsed by, or sponsored by Valve Corporation. + Counter-Strike, Counter-Strike: Source, and related logos are trademarks of Valve Corporation. +

+
+ ☀️ 100% +
+
+ 🖱️ 1.0x +
Idle — control will be released soon. Move your mouse to stay in control.
-
-

Controller

-
—
-
-

Switching player — please wait...

@@ -254,7 +283,7 @@

FAQ

Experience problems with controlling the client?

-

The best thing to always try is reloading your webpage or restarting the game.

+

The best thing to always try is reloading your webpage.

What is this?

@@ -275,6 +304,7 @@

Want to chat with us?

We have our own self hosted stoat instance: https://unloze.com/stoat/

+

Or join our Discord server: https://discord.com/invite/7SjyB8vzBv

Opening the in-game menu

@@ -283,7 +313,11 @@

Keybinds

v: crouch key currently

-

k: microphone key. Browser will ask for microphone permission on first use. but does not work currently.

+

k: activates the microphone. Currently not working.

+
+
+

Source code

+

This webclient is open source. You can find it on our Gitea instance: https://git.unloze.com/UNLOZE/webclient-css

@@ -329,6 +363,7 @@ const idleWarnEl = document.getElementById('idle-warning'); const soundToggleEl = document.getElementById('sound-toggle'); const restartGameBtn = document.getElementById('restart-game-btn'); + const restartGroup = document.getElementById('restart-group'); const brightnessSlider = document.getElementById('brightness-slider'); const brightnessValue = document.getElementById('brightness-value'); const sensitivitySlider = document.getElementById('sensitivity-slider'); @@ -492,7 +527,7 @@ canvas.requestPointerLock(); hintEl.textContent = 'Mouse captured — ESC to release'; resetIdleWarning(); - restartGameBtn.style.display = 'block'; + restartGroup.classList.add('visible'); } function exitControl() { @@ -504,7 +539,7 @@ stopMic(); if (idleWarnTimer) clearTimeout(idleWarnTimer); idleWarnEl.classList.remove('visible'); - restartGameBtn.style.display = 'none'; + restartGroup.classList.remove('visible'); if (document.pointerLockElement === canvas) document.exitPointerLock(); } @@ -823,10 +858,4 @@ connectSignaling(); -