brouillard de guerre

This commit is contained in:
Didictateur 2025-11-24 23:30:25 +01:00
parent f0ec311155
commit 36dc3f8d20
3 changed files with 173 additions and 52 deletions

View file

@ -4,6 +4,18 @@
<meta charset="utf-8" />
<title>ChessNut - Partie</title>
<link rel="stylesheet" href="/styles/style.css">
<style>
/* veil overlay for brouillard effect */
.square { position: relative; }
.square .veil {
position: absolute;
left: 0; top: 0; right: 0; bottom: 0;
background: rgba(255,255,255,0.95);
pointer-events: auto; /* block interactions so veiled squares are not clickable */
z-index: 50;
cursor: default;
}
</style>
</head>
<body>
<!-- Game over modal (hidden by default). Shown when server emits game:over -->
@ -71,6 +83,7 @@
// current boardState cached locally
let currentBoardState = null;
let myMines = [];
let currentVeiledSquares = [];
let pendingCard = null; // when set, next square click is used as card target
// safe logger: prefer on-page log if present, otherwise console
@ -166,6 +179,8 @@
boardEl.style.width = side + 'px';
boardEl.style.height = side + 'px';
}
// store veiled squares list for brouillard effect (if provided by server)
try{ currentVeiledSquares = Array.isArray(data.veiledSquares) ? data.veiledSquares : (data.boardState && data.boardState.veiledSquares) || []; }catch(_){ currentVeiledSquares = []; }
if(data.boardState) {
renderBoardFromState(data.boardState);
updateTurnBanner(data.boardState);
@ -529,6 +544,11 @@
if(!to) return;
const target = boardEl.querySelector(`.square[data-square="${to}"]`);
if(!target) return;
// do not show legal-move markers on squares that are veiled/hidden
try{
if(Array.isArray(currentVeiledSquares) && currentVeiledSquares.indexOf(to) !== -1) return;
if(target.classList && target.classList.contains('veiled')) return;
}catch(_){ }
const marker = document.createElement('div');
marker.className = 'move-marker';
// store metadata if needed later
@ -546,6 +566,11 @@
if(!to) return;
const target = boardEl.querySelector(`.square[data-square="${to}"]`);
if(!target) return;
// do not show remote move markers on veiled/hidden squares
try{
if(Array.isArray(currentVeiledSquares) && currentVeiledSquares.indexOf(to) !== -1) return;
if(target.classList && target.classList.contains('veiled')) return;
}catch(_){ }
const marker = document.createElement('div');
marker.className = 'move-marker';
marker.dataset.from = m.from || '';
@ -596,6 +621,17 @@
const square = sqEl.getAttribute('data-square');
if(!square) return;
// Do not allow interacting with veiled/hidden squares.
// `currentVeiledSquares` is populated from server `room:update` and
// we also add a `.veiled` class during rendering as a fallback.
try{
if(Array.isArray(currentVeiledSquares) && currentVeiledSquares.indexOf(square) !== -1){
log('clicked veiled square, ignoring');
return;
}
if(sqEl.classList && sqEl.classList.contains('veiled')){ log('clicked veiled square (DOM class), ignoring'); return; }
}catch(_){ }
// If we're in a pending card-targeting mode, handle target selection and do NOT attempt moves
if(pendingCard){
const req = pendingCard.requireType; // 'empty' | 'owned' | 'owned_pawn' | 'enemy' | 'own_then_enemy' | 'enemy_queen'
@ -783,6 +819,31 @@
});
// render any mines owned by this player
try{ renderMines(); }catch(e){ }
// render veils for brouillard effect (if any)
try{
// remove existing veils
const allSq = boardEl.querySelectorAll('.square');
allSq.forEach(sqEl => {
const v = sqEl.querySelector('.veil'); if(v) v.remove();
// also remove prior veiled marker class
try{ sqEl.classList.remove('veiled'); }catch(_){ }
});
if(Array.isArray(currentVeiledSquares) && currentVeiledSquares.length){
currentVeiledSquares.forEach(sq => {
const el = boardEl.querySelector(`.square[data-square="${sq}"]`);
if(!el) return;
const veil = document.createElement('div'); veil.className = 'veil';
el.appendChild(veil);
// add a class to hide piece images as a fallback in case z-index/stacking causes overlay issues
try{
el.classList.add('veiled');
// remove any move markers that may have been added previously on this square
const prevMarkers = el.querySelectorAll('.move-marker');
prevMarkers.forEach(m => m.remove());
}catch(_){ }
});
}
}catch(_){ }
}
// draw mine icons on squares for mines owned by this client

View file

@ -92,6 +92,11 @@ a:hover{text-decoration:underline}
pointer-events:none; z-index:2; image-rendering: -webkit-optimize-contrast;
}
/* When a square is veiled by brouillard, hide its piece images to ensure full concealment
This is a robust fallback in case stacking context / transform interactions make an overlay
not fully cover the image. Hiding the image guarantees the piece is not visible. */
.square.veiled img, .square.veiled .piece{ visibility: hidden !important; opacity: 0 !important; }
/* highlighted/selected square when a player selects a piece */
.square.selected{
outline: 3px solid rgba(245,158,11,0.95); /* amber */

107
server.js
View file

@ -80,6 +80,33 @@ function sendRoomUpdate(room){
// attach visible squares for this recipient (fog of war)
try{
payload.visibleSquares = Array.from(visibleSquaresForPlayer(room, p.id) || []);
// attach veiled squares if a brouillard effect targets this recipient
try{
const brouillards = (room.activeCardEffects || []).filter(e => e && e.type === 'brouillard');
if(brouillards && brouillards.length){
// If any brouillard is active in the room, veil the board for ALL players,
// but exclude the recipient's visible squares (their pieces + adjacent squares).
const state = room.boardState || {};
const width = state.width || 8;
const height = state.height || 8;
const all = [];
for(let yy = 0; yy < height; yy++){
for(let xx = 0; xx < width; xx++){
all.push(String.fromCharCode('a'.charCodeAt(0) + xx) + (yy+1));
}
}
// compute the set of squares that the recipient can see (their pieces + adjacent squares)
let visibleSet = new Set();
try{
const vs = visibleSquaresForPlayer(room, p.id) || new Set();
visibleSet = new Set(Array.from(vs));
}catch(_){ visibleSet = new Set(); }
// veiled squares are all minus visibleSet (so own pieces and their neighbors remain visible)
payload.veiledSquares = all.filter(sq => !visibleSet.has(sq));
} else {
payload.veiledSquares = [];
}
}catch(_){ payload.veiledSquares = []; }
// attach any mines owned by this recipient (mines are hidden from other players)
try{
const mines = (room.activeCardEffects || []).filter(e => e.type === 'mine' && e.playerId === p.id).map(e => e.square);
@ -225,7 +252,7 @@ function buildDefaultDeck(){
['folie','La pièce sélectionnée peut maintenant faire les déplacements du fou en plus'],
['fortification','La pièce sélectionnée peut maintenant faire les déplacements de la tour en plus'],
["l'anneau","Le plateau devient un anneau pendant un tour"],
// ['brouillard de guerre','Les joueur ne peuvent voir que au alentour de leurs pièces pendant 4 tours'],
['brouillard de guerre','Les joueur ne peuvent voir que au alentour de leurs pièces pendant 4 tours'],
// ['changer la pièce à capturer','Le joueur choisie la nouvelle pièce jouant le rôle de roi sans la révéler'],
// ['trou de ver','Deux cases du plateau deviennent maintenant la même'],
['jouer deux fois','Le joueur peut déplacer deux pièces'],
@ -471,17 +498,7 @@ function computeLegalMoves(room, square){
return null;
}
// filter moves according to brouillard (fog of war) if it is active for the owner of this piece
function filterMovesByFog(moves){
try{
const owner = ownerPlayer;
if(!owner) return moves;
const hasBrouillard = (room.activeCardEffects || []).some(e => e.type === 'brouillard' && e.playerId === owner.id);
if(!hasBrouillard) return moves;
const vis = visibleSquaresForPlayer(room, owner.id);
return (moves || []).filter(m => vis.has(m.to));
}catch(e){ return moves; }
}
// brouillard (fog of war) removed — moves are not filtered by fog
// helper to add diagonal sliding moves when a piece has been "folié"
function addFolieMoves(){
@ -571,7 +588,7 @@ function computeLegalMoves(room, square){
if(occ && occ.color !== color) moves.push({ from: square, to: tsq });
});
addAdoubementMoves(); addFolieMoves(); addFortificationMoves();
return filterMovesByFog(moves);
return moves;
}
if(type === 'N'){
@ -584,7 +601,7 @@ function computeLegalMoves(room, square){
if(!occ || occ.color !== color) moves.push({ from: square, to: tsq });
});
addAdoubementMoves(); addFolieMoves(); addFortificationMoves();
return filterMovesByFog(moves);
return moves;
}
if(type === 'B' || type === 'Q' || type === 'R'){
@ -658,7 +675,7 @@ function computeLegalMoves(room, square){
}
});
addAdoubementMoves(); addFolieMoves(); addFortificationMoves();
return filterMovesByFog(moves);
return moves;
}
if(type === 'K'){
@ -671,11 +688,11 @@ function computeLegalMoves(room, square){
if(!occ || occ.color !== color) moves.push({ from: square, to: tsq });
}
addAdoubementMoves(); addFolieMoves();
return filterMovesByFog(moves);
return moves;
}
addAdoubementMoves(); addFolieMoves(); addFortificationMoves();
return filterMovesByFog(moves);
return moves;
}
function startingBoardState8(){
@ -894,14 +911,16 @@ io.on('connection', (socket) => {
const legal = computeLegalMoves(room, from) || [];
const ok = legal.some(m => m.to === to);
if(!ok) return cb && cb({ error: 'illegal move' });
// additionally, do not allow moving into a fogged square if brouillard is active for this player
// If any brouillard is active in the room, disallow moving onto squares that the player cannot see
try{
const hasBrouillardForPlayer = (room.activeCardEffects || []).some(e => e.type === 'brouillard' && e.playerId === senderId);
if(hasBrouillardForPlayer){
const vis = visibleSquaresForPlayer(room, senderId);
if(!vis.has(to)) return cb && cb({ error: 'destination not visible (fog of war)' });
const hasBrouillard = (room.activeCardEffects || []).some(e => e && e.type === 'brouillard');
if(hasBrouillard){
const visible = visibleSquaresForPlayer(room, senderId) || new Set();
if(!visible.has(to)){
return cb && cb({ error: 'destination_not_visible' });
}
}catch(e){ /* ignore */ }
}
}catch(_){ }
// apply move: remove any piece on target (capture)
const targetIndex = pieces.findIndex(p => p.square === to);
@ -1047,6 +1066,31 @@ io.on('connection', (socket) => {
// advance board version
board.version = (board.version || 0) + 1;
// Update brouillard play counters: if any brouillard is active, increment the move count for the moving player.
try{
room.activeCardEffects = room.activeCardEffects || [];
for(let ei = room.activeCardEffects.length - 1; ei >= 0; ei--){
const ev = room.activeCardEffects[ei];
if(!ev || ev.type !== 'brouillard') continue;
try{
ev.playCounts = ev.playCounts || {};
ev.playCounts[senderId] = (ev.playCounts[senderId] || 0) + 1;
try{ io.to(room.id).emit('card:effect:updated', { roomId: room.id, effect: ev }); }catch(_){ }
// expire the brouillard when ALL players have reached the threshold of plays
const threshold = 2;
const players = room.players || [];
let allReached = true;
for(const pl of players){ if(!pl || !pl.id) continue; if((ev.playCounts[pl.id] || 0) < threshold){ allReached = false; break; } }
if(allReached){
try{ room.activeCardEffects.splice(ei,1); }catch(_){ }
try{ io.to(room.id).emit('card:effect:removed', { roomId: room.id, effectId: ev.id, type: ev.type, playerId: ev.playerId }); }catch(_){ }
// broadcast updated room state so clients remove veils
try{ sendRoomUpdate(room); }catch(_){ }
}
}catch(_){ }
}
}catch(e){ console.error('brouillard playcount update error', e); }
// Check victory (king capture) before further turn bookkeeping. If game ended, broadcast move and game:over and return.
try{
const end = checkAndHandleVictory(room);
@ -2166,7 +2210,6 @@ io.on('connection', (socket) => {
played.payload = Object.assign({}, payload, { applied: 'invisible', appliedTo: target });
}catch(e){ console.error('invisible effect error', e); }
}
// brouillard de guerre: target a player so their board is fogged (they only see adjacent squares)
else if(cardId === 'brouillard_de_guerre' || (typeof cardId === 'string' && cardId.indexOf('brouillard') !== -1)){
try{
const board = room.boardState;
@ -2182,9 +2225,21 @@ io.on('connection', (socket) => {
try{ room.hands = room.hands || {}; room.hands[senderId] = room.hands[senderId] || []; if(removed) room.hands[senderId].push(removed); room.discard = room.discard || []; for(let i = room.discard.length-1;i>=0;i--){ if(room.discard[i] && room.discard[i].id === (removed && removed.id)){ room.discard.splice(i,1); break; } } }catch(e){}
return cb && cb({ error: 'no valid target player' });
}
// record brouillard effect for target player
// compute list of all squares (each square veiled individually)
const width = board.width || 8;
const height = board.height || 8;
const all = [];
for(let yy = 0; yy < height; yy++){
for(let xx = 0; xx < width; xx++){
all.push(String.fromCharCode('a'.charCodeAt(0) + xx) + (yy+1));
}
}
// record brouillard effect for target player with veiledSquares
room.activeCardEffects = room.activeCardEffects || [];
const effect = { id: played.id, type: 'brouillard', playerId: targetPlayer.id, ts: Date.now(), remainingTurns: (payload && payload.turns) || 4 };
// initialize playCounts so we can expire brouillard after each player played N times
const playCounts = {};
try{ (room.players || []).forEach(pl => { if(pl && pl.id) playCounts[pl.id] = 0; }); }catch(_){ }
const effect = { id: played.id, type: 'brouillard', playerId: targetPlayer.id, ts: Date.now(), remainingTurns: (payload && payload.turns) || 4, veiledSquares: all, playCounts };
room.activeCardEffects.push(effect);
try{ io.to(room.id).emit('card:effect:applied', { roomId: room.id, effect }); }catch(_){ }
played.payload = Object.assign({}, payload, { applied: 'brouillard', appliedToPlayer: targetPlayer.id });