Tengo juegos de navegador 1v1 en mi sitio web y estoy tratando de hacer que un botón aparezca para el ganador y no para el perdedor.

HTML para botón:

 <div class="modal__overlay close-disable" data-modal="end-screen"> <div class="modal"> <h2 class="modal__title" data-ending-text>The game has ended!</h2> <div class="modal__info flex flex-center"> <span> Wager: <%= locals.game.wager %></span> <img src="<%= locals.game.cryptoImg %>" class="modal__crypto-icon" alt="" /> </div> <button class="button button--secondary button--small modal__button" data-button="claim" > Claim Prize </button>

JS utilizado para definir Ganador:

 clumsyBirdSocket.on('game-finished', () => { isGameOver = true; endGame(); }) clumsyBirdSocket.on('opponent-left', () => { isGameOver = true; showEndScreen(); }); // HTML selectors const statusText = document.querySelector('[data-status-text]') const endingText = document.querySelector('[data-ending-text]'); const endScreenModal = document.querySelector('[data-modal="end-screen"]'); // global variables let isGameOver = false; let isPlayerDead = false; let gameStarted = false; let scores = { player: 0, opponent: 0 } function endGame() { if(!isGameOver) return; let text; if(scores.player > scores.opponent) { text = TEXTS.win; } else if(scores.player < scores.opponent) { text = TEXTS.lose; document.getElementById("claim").style.display="none"; } else { text = TEXTS.draw; } text += `<br> Scores: ${scores.player} - ${scores.opponent}`; showEndScreen(text); } function showEndScreen(text = TEXTS.opponentForfeited) { endingText.innerHTML = text; statusText.innerText = ""; statusText.classList.remove('text-waiting'); endScreenModal.classList.add('active'); }

si agrego

 document.getElementById("claim").style.display="none"

Bajo la "function endGame" el problema temporalmente, cuando el jugador que GANÓ reclama el premio y regresa al lobby, le indica al perdedor con el botón reclamar premio. Por lo tanto, es una solución temporal. Cualquier dirección Ayuda.