Commit 96ebe555 authored by Mahmoud Aglan's avatar Mahmoud Aglan

fix(ludo): responsive layout for small phones

- Board max 360px, constrained by container
- Dice 50x50, roll button smaller padding
- Panels 6px padding
- Fits on 360x640 screens
Co-Authored-By: 's avatarClaude Opus 4.6 <noreply@anthropic.com>
parent d33a8aea
...@@ -48,19 +48,19 @@ export function mountGame(el, params) { ...@@ -48,19 +48,19 @@ export function mountGame(el, params) {
el.innerHTML = ` el.innerHTML = `
<div style="display:flex;flex-direction:column;height:100%;background:#1a1a2e;"> <div style="display:flex;flex-direction:column;height:100%;background:#1a1a2e;">
<div style="display:flex;justify-content:space-between;padding:8px 12px;background:#0f0f1e;"> <div style="display:flex;justify-content:space-between;padding:6px 12px;background:#0f0f1e;">
<div class="pp" id="pp-1" style="--pc:${COLORS[1]};"><div class="pp-dot"></div><span>${PLAYER_NAMES[1]}</span></div> <div class="pp" id="pp-1" style="--pc:${COLORS[1]};"><div class="pp-dot"></div><span>${PLAYER_NAMES[1]}</span></div>
<div class="pp" id="pp-0" style="--pc:${COLORS[0]};"><div class="pp-dot"></div><span>${PLAYER_NAMES[0]}</span></div> <div class="pp" id="pp-0" style="--pc:${COLORS[0]};"><div class="pp-dot"></div><span>${PLAYER_NAMES[0]}</span></div>
</div> </div>
<div id="ludo-wrap" style="flex:1;display:flex;align-items:center;justify-content:center;padding:4px;min-height:0;"></div> <div id="ludo-wrap" style="flex:1;display:flex;align-items:center;justify-content:center;padding:4px;min-height:0;"></div>
<div style="display:flex;justify-content:space-between;padding:8px 12px;background:#0f0f1e;"> <div style="display:flex;justify-content:space-between;padding:6px 12px;background:#0f0f1e;">
<div class="pp" id="pp-2" style="--pc:${COLORS[2]};"><div class="pp-dot"></div><span>${PLAYER_NAMES[2]}</span></div> <div class="pp" id="pp-2" style="--pc:${COLORS[2]};"><div class="pp-dot"></div><span>${PLAYER_NAMES[2]}</span></div>
<div class="pp" id="pp-3" style="--pc:${COLORS[3]};"><div class="pp-dot"></div><span>${PLAYER_NAMES[3]}</span></div> <div class="pp" id="pp-3" style="--pc:${COLORS[3]};"><div class="pp-dot"></div><span>${PLAYER_NAMES[3]}</span></div>
</div> </div>
<div id="dice-area" style="display:flex;align-items:center;gap:16px;padding:14px 16px;background:#0f0f1e;border-top:1px solid rgba(255,255,255,0.06);justify-content:center;"> <div id="dice-area" style="display:flex;align-items:center;gap:12px;padding:10px 16px;background:#0f0f1e;border-top:1px solid rgba(255,255,255,0.06);justify-content:center;">
<div id="dice-box" style="width:62px;height:62px;background:#f8fafc;border-radius:12px;display:grid;grid-template:repeat(3,1fr)/repeat(3,1fr);padding:8px;box-shadow:0 4px 14px rgba(0,0,0,0.4),inset 0 1px 0 rgba(255,255,255,0.8);transition:transform 0.15s cubic-bezier(0.34,1.56,0.64,1);"> <div id="dice-box" style="width:50px;height:50px;background:#f8fafc;border-radius:10px;display:grid;grid-template:repeat(3,1fr)/repeat(3,1fr);padding:6px;box-shadow:0 3px 10px rgba(0,0,0,0.4),inset 0 1px 0 rgba(255,255,255,0.8);transition:transform 0.15s cubic-bezier(0.34,1.56,0.64,1);">
</div> </div>
<button class="btn btn-primary" id="roll-btn" style="font-size:16px;padding:16px 40px;min-height:56px;letter-spacing:0.5px;">ارمِ النرد</button> <button class="btn btn-primary" id="roll-btn" style="font-size:15px;padding:12px 32px;min-height:48px;">ارمِ النرد</button>
</div> </div>
</div> </div>
<style> <style>
...@@ -73,10 +73,12 @@ export function mountGame(el, params) { ...@@ -73,10 +73,12 @@ export function mountGame(el, params) {
`; `;
const wrap = el.querySelector('#ludo-wrap'); const wrap = el.querySelector('#ludo-wrap');
boardSize = Math.min(wrap.clientWidth || 370, wrap.clientHeight || 370, 380); const availableH = wrap.clientHeight || 300;
const availableW = wrap.clientWidth || 360;
boardSize = Math.min(availableW - 8, availableH - 8, 360);
cellSize = boardSize / 15; cellSize = boardSize / 15;
const { canvas: c, ctx: cx } = createCanvas(wrap, boardSize, boardSize); const { canvas: c, ctx: cx } = createCanvas(wrap, boardSize, boardSize);
c.style.cssText = 'border-radius:6px;box-shadow:0 4px 16px rgba(0,0,0,0.4);'; c.style.cssText = 'border-radius:6px;box-shadow:0 4px 16px rgba(0,0,0,0.4);max-width:100%;max-height:100%;';
canvas = c; ctx = cx; canvas = c; ctx = cx;
renderDiceFace(el.querySelector('#dice-box'), 1); renderDiceFace(el.querySelector('#dice-box'), 1);
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment