푸터 및 HUD 컨트롤 리팩터

🛠️ 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

Enter fullscreen mode Exit fullscreen mode

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