diff --git a/client/app.js b/client/app.js index a42cc49..3f3ad1f 100644 --- a/client/app.js +++ b/client/app.js @@ -3138,6 +3138,24 @@ class GolfGame { `+${moreCount} more`; } this.activeRulesBar.classList.remove('hidden'); + + // Update mobile rules indicator + const mobileRulesBtn = document.getElementById('mobile-rules-btn'); + const mobileRulesIcon = document.getElementById('mobile-rules-icon'); + const mobileRulesContent = document.getElementById('mobile-rules-content'); + if (mobileRulesBtn && mobileRulesIcon && mobileRulesContent) { + const isHouseRules = rules.length > 0; + mobileRulesIcon.textContent = isHouseRules ? '!' : 'S'; + mobileRulesBtn.classList.toggle('house-rules', isHouseRules); + + if (!isHouseRules) { + mobileRulesContent.innerHTML = '
Standard Rules
'; + } else { + const tagHtml = (unrankedTag ? 'Unranked' : '') + + rules.map(renderTag).join(''); + mobileRulesContent.innerHTML = `
${tagHtml}
`; + } + } } // V3_14: Map display names to rule keys diff --git a/client/index.html b/client/index.html index 07495e0..9b4bf5c 100644 --- a/client/index.html +++ b/client/index.html @@ -406,9 +406,16 @@ + +
+

Active Rules

+
+
+
Hole 1/9
+ diff --git a/client/style.css b/client/style.css index 71199ef..cfdaddb 100644 --- a/client/style.css +++ b/client/style.css @@ -5464,6 +5464,59 @@ body.mobile-portrait #mobile-bottom-bar .mobile-bar-btn.active { box-shadow: 0 2px 12px rgba(244, 164, 96, 0.4); } +/* --- Mobile: Rules indicator button --- */ +body.mobile-portrait #mobile-bottom-bar .mobile-rules-btn { + padding: 4px 9px; + font-size: 0.77rem; + font-weight: 700; + min-width: unset; + background: rgba(255, 255, 255, 0.1); + border: 1px solid rgba(255, 255, 255, 0.15); + color: rgba(255, 255, 255, 0.7); +} + +body.mobile-portrait #mobile-bottom-bar .mobile-rules-btn.house-rules { + background: rgba(244, 164, 96, 0.25); + border-color: rgba(244, 164, 96, 0.4); + color: #f4a460; +} + +/* --- Mobile: Rules drawer content --- */ +#rules-drawer { + display: none; +} + +body.mobile-portrait #rules-drawer { + display: block; +} + +body.mobile-portrait .rules-drawer-panel .mobile-rules-content-list { + display: flex; + flex-wrap: wrap; + gap: 6px; + margin-top: 8px; +} + +body.mobile-portrait .rules-drawer-panel .rule-tag { + background: rgba(244, 164, 96, 0.3); + color: #f4a460; + padding: 4px 10px; + border-radius: 4px; + font-size: 0.8rem; + font-weight: 600; +} + +body.mobile-portrait .rules-drawer-panel .rule-tag.standard { + background: rgba(255, 255, 255, 0.15); + color: rgba(255, 255, 255, 0.7); +} + +body.mobile-portrait .rules-drawer-panel .rule-tag.unranked { + background: rgba(220, 80, 80, 0.3); + color: #f08080; + border: 1px solid rgba(220, 80, 80, 0.4); +} + /* --- Mobile: Non-game screens --- */ body.mobile-portrait #lobby-screen { padding: 55px 12px 15px;