première carte jouée
This commit is contained in:
Didictateur
parent
82dc0c4222
commit
32bbf5b0d0
2 changed files with 86 additions and 24 deletions
|
|
@ -433,38 +433,78 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
// render player's own hand and public counts for others
|
// render player's own hand and public counts for others
|
||||||
|
// New: render as horizontal 'pokemon-style' cards side-by-side
|
||||||
function renderHands(handsOwn, handCounts){
|
function renderHands(handsOwn, handCounts){
|
||||||
const handsEl = document.getElementById('hands');
|
const handsEl = document.getElementById('hands');
|
||||||
if(!handsEl) return;
|
if(!handsEl) return;
|
||||||
handsEl.innerHTML = '';
|
handsEl.innerHTML = '';
|
||||||
// show our own hand
|
|
||||||
const wrap = document.createElement('div');
|
const wrap = document.createElement('div');
|
||||||
wrap.className = 'player-hand';
|
wrap.className = 'player-hand pokemon-hand';
|
||||||
|
|
||||||
|
const header = document.createElement('div');
|
||||||
|
header.className = 'pokemon-hand-header';
|
||||||
const title = document.createElement('div');
|
const title = document.createElement('div');
|
||||||
title.style.fontWeight = '700';
|
|
||||||
title.style.marginBottom = '6px';
|
|
||||||
title.textContent = 'Votre main';
|
title.textContent = 'Votre main';
|
||||||
wrap.appendChild(title);
|
title.className = 'pokemon-hand-title';
|
||||||
const list = document.createElement('div');
|
header.appendChild(title);
|
||||||
list.style.display = 'flex';
|
|
||||||
list.style.flexDirection = 'column';
|
// show public counts for other players (small badges)
|
||||||
list.style.gap = '6px';
|
const countsWrap = document.createElement('div');
|
||||||
(handsOwn || []).slice(0,5).forEach(c => {
|
countsWrap.className = 'pokemon-hand-counts';
|
||||||
const cardEl = document.createElement('div');
|
Object.entries(handCounts||{}).forEach(([pid, cnt])=>{
|
||||||
cardEl.className = 'card-item';
|
if(pid === myPlayerId) return;
|
||||||
const img = document.createElement('div');
|
const b = document.createElement('div');
|
||||||
img.className = 'card-art';
|
b.className = 'opponent-count';
|
||||||
img.textContent = 'Illustration';
|
b.textContent = `${pid}: ${cnt}`;
|
||||||
const meta = document.createElement('div');
|
countsWrap.appendChild(b);
|
||||||
meta.className = 'card-meta';
|
|
||||||
const h = document.createElement('div'); h.className = 'card-title'; h.textContent = c.title || c.cardId || 'Carte';
|
|
||||||
const p = document.createElement('div'); p.className = 'card-desc'; p.textContent = c.description || '';
|
|
||||||
meta.appendChild(h); meta.appendChild(p);
|
|
||||||
cardEl.appendChild(img);
|
|
||||||
cardEl.appendChild(meta);
|
|
||||||
list.appendChild(cardEl);
|
|
||||||
});
|
});
|
||||||
wrap.appendChild(list);
|
header.appendChild(countsWrap);
|
||||||
|
wrap.appendChild(header);
|
||||||
|
|
||||||
|
const row = document.createElement('div');
|
||||||
|
row.className = 'cards-row';
|
||||||
|
|
||||||
|
(handsOwn || []).slice(0,10).forEach(c => {
|
||||||
|
const cardEl = document.createElement('div');
|
||||||
|
cardEl.className = 'pokemon-card';
|
||||||
|
cardEl.dataset.cardId = c.cardId || c.id || '';
|
||||||
|
cardEl.dataset.cardUuid = c.id || '';
|
||||||
|
|
||||||
|
const top = document.createElement('div'); top.className = 'pokemon-card-top';
|
||||||
|
const art = document.createElement('div'); art.className = 'pokemon-card-art';
|
||||||
|
art.textContent = '';
|
||||||
|
top.appendChild(art);
|
||||||
|
|
||||||
|
const mid = document.createElement('div'); mid.className = 'pokemon-card-mid';
|
||||||
|
const h = document.createElement('div'); h.className = 'pokemon-card-title'; h.textContent = c.title || c.cardId || 'Carte';
|
||||||
|
const p = document.createElement('div'); p.className = 'pokemon-card-desc'; p.textContent = c.description || '';
|
||||||
|
mid.appendChild(h); mid.appendChild(p);
|
||||||
|
|
||||||
|
const footer = document.createElement('div'); footer.className = 'pokemon-card-footer';
|
||||||
|
const playBtn = document.createElement('button'); playBtn.className = 'card-play-btn'; playBtn.textContent = 'Jouer';
|
||||||
|
footer.appendChild(playBtn);
|
||||||
|
|
||||||
|
cardEl.appendChild(top);
|
||||||
|
cardEl.appendChild(mid);
|
||||||
|
cardEl.appendChild(footer);
|
||||||
|
|
||||||
|
// clicking the whole card or the play button emits card:play
|
||||||
|
function emitPlay(){
|
||||||
|
if(!socket) return;
|
||||||
|
const cid = cardEl.dataset.cardId;
|
||||||
|
socket.emit('card:play', { roomId, playerId: myPlayerId, cardId: cid, payload: {} }, (resp)=>{
|
||||||
|
if(resp && resp.error){ log('card:play error', resp); alert(resp.error); }
|
||||||
|
else { log('card played', resp); }
|
||||||
|
});
|
||||||
|
}
|
||||||
|
cardEl.addEventListener('click', (ev)=>{ if(ev.target === playBtn) return; emitPlay(); });
|
||||||
|
playBtn.addEventListener('click', (ev)=>{ ev.stopPropagation(); emitPlay(); });
|
||||||
|
|
||||||
|
row.appendChild(cardEl);
|
||||||
|
});
|
||||||
|
|
||||||
|
wrap.appendChild(row);
|
||||||
handsEl.appendChild(wrap);
|
handsEl.appendChild(wrap);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -130,3 +130,25 @@ button:hover{transform:translateY(-3px);transition:all 180ms ease}
|
||||||
.card-title{font-weight:700;color:#0b1220}
|
.card-title{font-weight:700;color:#0b1220}
|
||||||
.card-desc{color:#475569;font-size:13px}
|
.card-desc{color:#475569;font-size:13px}
|
||||||
|
|
||||||
|
/* Pokemon-style horizontal card hand */
|
||||||
|
.pokemon-hand{padding:10px;border-radius:10px;background:linear-gradient(180deg,#ffffff,#fbfdff);border:1px solid rgba(11,18,32,0.04)}
|
||||||
|
.pokemon-hand-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
|
||||||
|
.pokemon-hand-title{font-weight:800}
|
||||||
|
.pokemon-hand-counts{display:flex;gap:6px;align-items:center}
|
||||||
|
.opponent-count{background:rgba(11,18,32,0.03);padding:4px 8px;border-radius:8px;font-size:12px}
|
||||||
|
.cards-row{display:flex;gap:12px;overflow-x:auto;padding-bottom:6px}
|
||||||
|
.pokemon-card{flex:0 0 180px;height:260px;border-radius:12px;background:linear-gradient(180deg,#fff,#f6f8ff);box-shadow:0 10px 24px rgba(11,18,32,0.06);border:1px solid rgba(11,18,32,0.04);display:flex;flex-direction:column;cursor:pointer}
|
||||||
|
.pokemon-card-top{flex:0 0 120px;padding:8px}
|
||||||
|
.pokemon-card-art{width:100%;height:100%;background:linear-gradient(135deg,#f0f9ff,#eef2ff);border-radius:8px;display:flex;align-items:center;justify-content:center;color:#475569;font-weight:700}
|
||||||
|
.pokemon-card-mid{padding:8px;flex:1 1 auto;display:flex;flex-direction:column;gap:6px}
|
||||||
|
.pokemon-card-title{font-weight:800;color:#0b1220}
|
||||||
|
.pokemon-card-desc{color:#475569;font-size:13px}
|
||||||
|
.pokemon-card-footer{padding:8px;border-top:1px solid rgba(11,18,32,0.02);display:flex;justify-content:flex-end}
|
||||||
|
.card-play-btn{background:linear-gradient(90deg,#3b82f6,#60a5fa);color:white;border:none;padding:6px 10px;border-radius:8px;cursor:pointer}
|
||||||
|
.card-play-btn:hover{transform:translateY(-2px)}
|
||||||
|
|
||||||
|
/* small responsive tweak */
|
||||||
|
@media (max-width:700px){
|
||||||
|
.pokemon-card{flex:0 0 140px;height:220px}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue