Footer & HUD Controls Refactor

🛠️ Devlog — Footer & HUD Controls Refactor

Version: v0.0.9-patch

Date: 2026-08-10

Author: Weired Codes

Tags: ui mobile hud layout fix

---

🇮🇳 हिंदी विवरण

क्या बदला?

इस पैच में Footer और HUD Controls को canvas के अंदर से निकालकर screen के bottom पर एक स्थायी fixed bar में रखा गया है।

पहले #ui-footer और #hud-controls दोनों #gameContainer के अंदर position: absolute पर थे — इससे mobile पर canvas के साथ scale होने की वजह से वे बहुत छोटे और अजीब दिखते थे।

अब ये दोनों canvas से पूरी तरह अलग, screen bottom पर fixed हैं — scale से प्रभावित नहीं होते।

---

परिवर्तन सूची

फ़ाइल	परिवर्तन
index.html	#ui-footer को #gameContainer से बाहर, #touch-controls के बाद body-level पर रखा
index.html	#hud-controls (volume slider, mute, help, gyro) को #ui-footer के अंदर move किया
index.html	#gameContainer से पुराने #hud-controls और #ui-footer के HTML blocks हटाए
style.css	#ui-footer → position: fixed; bottom: 0; height: 34px; z-index: 80
style.css	#hud-controls → position: fixed हटाया, margin-left: auto से footer में right-align किया
style.css	#touch-controls → margin-bottom: 34px जोड़ा ताकि footer से overlap न हो
style.css	#touch-controls → align-items: center; flex: 1 — full available space use करे
style.css	.touch-cluster → flex: 1 जोड़ा — तीनों clusters बराबर space में spread हों
style.css	.touch-cluster-left → justify-content: flex-start
style.css	.touch-cluster-right → justify-content: flex-end

---

क्यों ज़रूरी था?

• Mobile पर #gameContainer scale होता है (scaleGame() से) — उसके अंदर के absolute elements भी scale हो जाते थे, जिससे footer और controls बहुत छोटे दिखते थे।
• Touch controls और footer overlap कर रहे थे।
• HUD controls canvas के ऊपर position: fixed पर थे — footer के बाहर, जो visually inconsistent था।

---

पहले और बाद

स्थिति	पहले	बाद
Footer position	#gameContainer के अंदर, position: absolute	Body-level, position: fixed; bottom: 0
HUD controls	Canvas के ऊपर fixed, अलग	Footer के अंदर, right-aligned
Touch controls overlap	Footer से overlap होते थे	margin-bottom: 34px से clear
Touch clusters spacing	space-between पर cramped	flex: 1 से full width में spread
Mobile scale effect	Footer भी canvas के साथ shrink होता था	Scale से पूरी तरह independent

---

🇬🇧 English Summary

What changed?

The #ui-footer and #hud-controls (volume slider, mute, help, gyro buttons) have been moved out of the game canvas and into a fixed bottom bar at the screen level.

Previously both elements lived inside #gameContainer with position: absolute, which caused them to shrink along with the canvas on mobile due to scaleGame() scaling. They were also overlapping with the touch controls.

Now the footer is a scale-independent, fixed bottom bar — always readable and accessible regardless of canvas scale.

Key fixes

• Footer is now position: fixed; bottom: 0; z-index: 80 — always on screen bottom.
• HUD controls sit inside the footer, right-aligned via margin-left: auto.
• Touch controls have margin-bottom: 34px to clear the footer.
• Touch clusters use flex: 1 for even distribution across full width.
• iPhone safe-area (env(safe-area-inset-bottom)) respected in footer padding.

---

📁 Files Changed

index.html
style.css

---

Developed by Weired Codes — मोक्ष, एक आध्यात्मिक खेल।