snake: improve mobile control layout
Hunter
Wednesday, July 23rd, 2025 at 6:48 PM
68 }
69
70 .control-pad {
- display: inline-block;
- position: relative;
- width: 144px;
- height: 144px;
71 + display: inline-flex;
72 + flex-direction: column;
73 + gap: 0;
74 }
75
- .control-btn {
- position: absolute;
76 + .control-row {
77 + display: flex;
78 + gap: 0;
79 + }
80 +
81 + .control-cell {
82 width: 48px;
83 height: 48px;
84 + display: flex;
85 + align-items: center;
86 + justify-content: center;
87 + }
88 +
89 + .control-btn {
90 + width: 100%;
91 + height: 100%;
92 font-size: 48px;
93 cursor: pointer;
94 user-select: none;
95 touch-action: manipulation;
- line-height: 48px;
- text-align: center;
96 display: flex;
97 align-items: center;
98 justify-content: center;
99 + border: none;
100 + background: none;
101 + position: relative;
102 }
103
104 .control-btn:active {
105 opacity: 0.6;
106 }
107
- #upBtn { top: 0; left: 48px; }
- #downBtn { bottom: 0; left: 48px; }
- #leftBtn { top: 48px; left: 0; }
- #rightBtn { top: 48px; right: 0; }
- #centerBtn { top: 48px; left: 48px; display: none; }
108 + .control-btn.hidden {
109 + visibility: hidden;
110 + }
111 +
112 + .control-btn.show {
113 + visibility: visible;
114 + }
115
116 #mobileGameOver, #mobileStartHint {
117 font-size: 20px;
178
179 <div id="mobileControls">
180 <div class="control-pad">
- <div class="control-btn" id="upBtn">🔼</div>
- <div class="control-btn" id="leftBtn">◀️</div>
- <div class="control-btn" id="rightBtn">▶️</div>
- <div class="control-btn" id="downBtn">🔽</div>
- <div class="control-btn" id="centerBtn">🟢</div>
181 + <div class="control-row">
182 + <div class="control-cell"><div class="control-btn hidden"></div></div>
183 + <div class="control-cell"><button class="control-btn" id="upBtn">🔼</button></div>
184 + <div class="control-cell"><div class="control-btn hidden"></div></div>
185 + </div>
186 + <div class="control-row">
187 + <div class="control-cell"><button class="control-btn" id="leftBtn">◀️</button></div>
188 + <div class="control-cell"><button class="control-btn show" id="centerBtn">🟢</button></div>
189 + <div class="control-cell"><button class="control-btn" id="rightBtn">▶️</button></div>
190 + </div>
191 + <div class="control-row">
192 + <div class="control-cell"><div class="control-btn hidden"></div></div>
193 + <div class="control-cell"><button class="control-btn" id="downBtn">🔽</button></div>
194 + <div class="control-cell"><div class="control-btn hidden"></div></div>
195 + </div>
196 </div>
197 <div id="mobileGameOver"></div>
198 <div id="mobileStartHint">Press 🟢 to start!</div>
361 const centerBtn = document.getElementById('centerBtn');
362 const mobileGameOver = document.getElementById('mobileGameOver');
363 if (centerBtn) {
- centerBtn.textContent = '🆕';
- centerBtn.style.display = 'block';
364 + centerBtn.textContent = '🟢';
365 + centerBtn.classList.add('show');
366 + centerBtn.classList.remove('hidden');
367 }
368 if (mobileGameOver) {
- mobileGameOver.innerHTML = 'Game Over!<br>Press 🆕 to restart';
369 + mobileGameOver.innerHTML = 'Game Over!<br>Press 🟢 to restart';
370 mobileGameOver.style.display = 'block';
371 }
372
403 // Hide center button
404 const centerBtn = document.getElementById('centerBtn');
405 if (centerBtn) {
- centerBtn.style.display = 'none';
406 + centerBtn.classList.add('hidden');
407 + centerBtn.classList.remove('show');
408 }
409
410 updateBoard();
515 // Show initial start hints and button
516 document.getElementById('startHint').style.display = 'block';
517 document.getElementById('mobileStartHint').style.display = 'block';
- document.getElementById('centerBtn').style.display = 'block';
- document.getElementById('centerBtn').textContent = '🟢';
518 + const centerBtn = document.getElementById('centerBtn');
519 + centerBtn.classList.add('show');
520 + centerBtn.classList.remove('hidden');
521 + centerBtn.textContent = '🟢';
522 </script>
523 </body>
524 </html>