Adrien/ChessNut
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

première carte jouée

Browse source
This commit is contained in:
Didictateur 2025-11-22 16:29:18 +01:00
parent 82dc0c4222
commit 32bbf5b0d0
2 changed files with 86 additions and 24 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

88
public/game.html
View file

@ -433,38 +433,78 @@
}
// render player's own hand and public counts for others
// New: render as horizontal 'pokemon-style' cards side-by-side
function renderHands(handsOwn, handCounts){
const handsEl = document.getElementById('hands');
if(!handsEl) return;
handsEl.innerHTML = '';
// show our own hand
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');
title.style.fontWeight = '700';
title.style.marginBottom = '6px';
title.textContent = 'Votre main';
wrap.appendChild(title);
const list = document.createElement('div');
list.style.display = 'flex';
list.style.flexDirection = 'column';
list.style.gap = '6px';
(handsOwn || []).slice(0,5).forEach(c => {
const cardEl = document.createElement('div');
cardEl.className = 'card-item';
const img = document.createElement('div');
img.className = 'card-art';
img.textContent = 'Illustration';
const meta = document.createElement('div');
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);
title.className = 'pokemon-hand-title';
header.appendChild(title);
// show public counts for other players (small badges)
const countsWrap = document.createElement('div');
countsWrap.className = 'pokemon-hand-counts';
Object.entries(handCounts||{}).forEach(([pid, cnt])=>{
if(pid === myPlayerId) return;
const b = document.createElement('div');
b.className = 'opponent-count';
b.textContent = `${pid}: ${cnt}`;
countsWrap.appendChild(b);
});
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);
}

22
public/styles/style.css
View file

@ -130,3 +130,25 @@ button:hover{transform:translateY(-3px);transition:all 180ms ease}
.card-title{font-weight:700;color:#0b1220}
.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}
}