making sure button to report is only visible if current match hasnt started not if it doesnt exist or oalready startyed

Author: redbackspider77

app.js

@@ -102,6 +102,10 @@ async function afterSignIn(user) {
       const url = new URL(userData.currentGameUrl)
       const gameId = url.pathname.slice(1);
       document.getElementById("userGame").src = `https://lichess.org/embed/${gameId}?theme=auto&bg=auto&move=last`;
+
+      if (!checkIfFirstMove(gameId)) {
+      document.getElementById("reportButton").style.display = "block";
+      } // display report button only if match hasn't started
     }
 
     loadLeaderboard();

index.html

@@ -24,13 +24,13 @@ <h1>Welcome to the Year 8 Chess Tournament</h1>
 
     <div id="game-panel" style="display:none; text-align: center;">
       <h2>Your Current Game</h2>
-      <a id="game-link" href="#" target="_blank">Join Game</a><br><br>
+      <a id="game-link" href="#" target="_blank"><button>Join Game</button></a><br><br>
       <div class="iframe-wrapper">
         <div class="iframe-loader"></div>
         <iframe id="userGame" src="" onload="hideIframeLoader(this)"></iframe>
       </div>      
       <br>
-      <button onclick="reportTroll()">Report Opponent</button>
+      <button id="reportButton" style="display:none;" onclick="reportTroll()">Report Opponent</button>
     </div>  
 
     <h2>Leaderboard</h2>