Implement UI visibility toggle functionality

Added UI elements for visibility control and functionality to hide/show UI components.
This commit is contained in:
james3126
2026-02-14 01:40:00 +00:00
committed by GitHub
parent 55827a230b
commit 53612b397d
+17
View File
@@ -69,6 +69,8 @@
.morph-map:hover{background:rgba(74,222,128,0.2);border-color:#4ade80}
.morph-map.mapped{background:rgba(74,222,128,0.2);border-color:#4ade80;font-weight:600}
.morph-auto{font-size:9px;padding:2px 6px;border-radius:3px;background:rgba(74,222,128,0.15);color:#4ade80;border:1px solid rgba(74,222,128,0.25)}
.hide-ui-elements{top:60px;left:20px}
.hidden{display:none}
</style>
</head>
<body>
@@ -83,6 +85,11 @@
<div class="sub">Keyboard: Always Active</div>
</div>
<div class="hp always-visible hide-ui-elements">
<div class="ht">UI Element Visibility</div>
<button class="cb" id="ui-hide">Hide UI</button>
</div>
<div class="hp sensitivity-panel">
<div class="ht">Sensitivity</div>
<div class="sr"><span style="min-width:45px">Head</span><button class="sb" id="hs-d"></button><span class="sv" id="hs-v">1.0</span><button class="sb" id="hs-u">+</button></div>
@@ -895,6 +902,16 @@ $('cam-reset').onclick=function(){
else animCam(new THREE.Vector3(0,0.3,0),3.5);
};
// ═══════════════════════════════════════════════════════
// UI HIDE / SHOW
// ═══════════════════════════════════════════════════════
$('ui-hide').onclick=function(){
const elements=document.querySelectorAll('.hp:not(.always-visible)');
const isHidden = [...elements].every(el => el.classList.contains('hidden'));
elements.forEach(el => {el.classList.toggle('hidden')});
$('ui-hide').textContent = isHidden ? 'Hide UI' : 'Show UI';
};
// ═══════════════════════════════════════════════════════
// GAMEPAD
// ═══════════════════════════════════════════════════════