Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

169
Views
How do i fix a "claim" button that displays for the Loser and Winner when it should only be for the Winner

I have 1v1 browser games on my website & I'm trying to make a button show up for the winner & not show up for the loser.

HTML for Button:

<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 Used to define Winner:

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');
}

If i add

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

Under the "function endGame" Takes the issue out Temporarily, When the player who WON claims there prize and returns to lobby it then prompts the Loser with the claim Prize button.. Hence why its a temporary fix. Any direction Helps.

about 4 years ago · Juan Pablo Isaza
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!