From a1194a6f78ba5f76af04e5ee6199b31b0d0440a1 Mon Sep 17 00:00:00 2001 From: pj90 Date: Sat, 8 Aug 2026 21:53:04 +0530 Subject: [PATCH] Scaled Hud --- index.html | 11 +++++------ src/main.js | 20 ++++++++++++++------ style.css | 39 +++++++++++++++++++-------------------- 3 files changed, 38 insertions(+), 32 deletions(-) diff --git a/index.html b/index.html index 70b097d..bb807fb 100644 --- a/index.html +++ b/index.html @@ -35,11 +35,8 @@ - -
- - -
+ +
🌿 0
@@ -67,8 +64,10 @@
☀️
🤲
-
+
+ +
diff --git a/src/main.js b/src/main.js index fae53ea..778560b 100644 --- a/src/main.js +++ b/src/main.js @@ -306,15 +306,23 @@ function debounce(func, delay) { function scaleGame() { // visualViewport.height URL-bar को exclude करता है (mobile Chrome/Safari) const availH = window.visualViewport?.height ?? window.innerHeight; - // HUD की natural height include करें — total content height से scale निकालें + // HUD अब scale-independent है — canvas को बचा हुआ height मिलता है const hudEl = document.getElementById('ui-overlay'); const hudH = hudEl ? hudEl.offsetHeight : 0; - const totalH = 680 + hudH; // canvas (680) + HUD — दोनों #moksha-outer में हैं - const s = Math.min(window.innerWidth / 600, availH / totalH) * 0.90; - // transform #gameContainer पर नहीं — #moksha-outer पर (HUD + canvas एक साथ scale) + const canvasH = 680; + // touch controls की height भी घटाएँ — canvas उनके ऊपर fit हो + const touchEl = document.getElementById('touch-controls'); + const touchH = (touchEl && touchEl.style.display !== 'none') + ? touchEl.offsetHeight : 0; + const s = Math.min(window.innerWidth / 600, (availH - hudH - touchH) / canvasH) * 0.90; const outerEl = document.getElementById('moksha-outer'); - if (outerEl) outerEl.style.transform = `scale(${s})`; - isScaleGameDone = true; // AudioManager readiness coordination + if (outerEl) { + outerEl.style.transform = `scale(${s})`; + outerEl.style.marginBottom = `${canvasH * (s - 1)}px`; // dead space collapse + } + // पुराना inline transform clear करें — अब #moksha-outer scale करता है + if (UI.container) UI.container.style.transform = ''; + isScaleGameDone = true; AM?.notifyReadiness?.(); } scaleGame(); diff --git a/style.css b/style.css index cfa9d44..8b32283 100644 --- a/style.css +++ b/style.css @@ -25,9 +25,10 @@ body { display: flex; flex-direction: column; align-items: center; - transform-origin: center center; + transform-origin: top center; will-change: transform; flex-shrink: 0; + overflow: hidden; /* scifi-scan-sweep जैसे absolute elements बाहर न जाएँ */ } /* ====================== GAME CONTAINER ====================== */ @@ -115,17 +116,18 @@ canvas { /* ====================== HUD / UI OVERLAY ====================== */ #ui-overlay { - position: relative; /* अब absolute नहीं — normal flow में है */ - width: 600px; /* gameContainer की width से match */ + position: relative; + width: 100%; /* पूरी viewport width — scale-independent */ + max-width: 100vw; box-sizing: border-box; height: auto; - background: rgba(6, 6, 10, 0.92); - border: 1px solid rgba(255, 136, 0, 0.3); /* gameContainer border से visual connect */ - border-bottom: none; /* canvas top-border से seamless join */ - padding: 6px 16px 8px 16px; + background: rgba(6, 6, 10, 0.95); + border-bottom: 1px solid rgba(255, 136, 0, 0.4); + padding: 10px 20px 12px 20px; /* बड़ा padding — space है तो use करें */ display: flex; flex-direction: column; justify-content: space-evenly; + gap: 6px; /* rows के बीच space */ z-index: 7; } #ui-footer { @@ -206,7 +208,7 @@ button.hud-icon-btn:hover { /* हर stat-row अब केंद्र-संरेखित, flex-wrap के साथ (एक ही परिभाषा — DRY) */ .stat-row { display: flex; - gap: 9px; + gap: 10px; align-items: center; justify-content: center; width: 100%; @@ -230,18 +232,18 @@ button.hud-icon-btn:hover { .stat-line { font-family: 'Orbitron', sans-serif; - font-size: 11.5px; + font-size: 13px; /* बड़ा font — HUD अब पूरी width पर है */ font-weight: 700; letter-spacing: 0.5px; - padding: 5px 9px 4px 11px; + padding: 6px 11px 5px 13px; /* थोड़ा बड़ा padding */ line-height: 1; - border-radius: 3px; + border-radius: 4px; display: inline-flex; align-items: center; justify-content: center; transition: transform 0.15s ease, border-color 0.15s ease; will-change: transform; - box-shadow: inset 2px 0 0 0 currentColor; /* sci-fi tech-readout accent-bar */ + box-shadow: inset 2px 0 0 0 currentColor; } /* ── HUD stat-line per-element colors ── @@ -690,24 +692,21 @@ button.hud-icon-btn:hover { /* ====================== TOUCH CONTROLS (mobile only) ====================== */ #touch-controls { - position: fixed; - bottom: 0; + position: relative; /* normal flow में — canvas के नीचे रहेगा */ display: none; /* JS से touch device detect होने पर flex बनेगा */ - will-change: opacity; /* GPU layer — compositor thread पर रखें */ - left: 0; + will-change: opacity; width: 100%; padding: 8px 10px; padding-bottom: calc(8px + env(safe-area-inset-bottom)); /* iPhone notch */ - background: rgba(0, 0, 0, 0.45); - backdrop-filter: blur(6px); - -webkit-backdrop-filter: blur(6px); + background: transparent; box-sizing: border-box; justify-content: space-between; align-items: flex-end; - z-index: 10; /* ui-overlay(7) के ऊपर, overlays(15+) के नीचे */ + z-index: 10; pointer-events: none; /* container transparent — buttons पर auto */ user-select: none; -webkit-user-select: none; + flex-shrink: 0; /* scale से छोटा न हो */ } /* ── Clusters ── */