<!DOCTYPE html>
<html lang="it">
  <head>
    <meta charset="UTF-8" />
    <title>TRACK RESULTS - TFstream</title>
  </head>
  <body>
    <p class="name" id="nameOne"></p>
    <p class="club" id="clubOne"></p>
    <p class="mark" id="markOne"></p>

    <p class="name" id="nameTwo"></p>
    <p class="club" id="clubTwo"></p>
    <p class="mark" id="markTwo"></p>
    
    <p class="name" id="nameThree"></p>
    <p class="club" id="clubThree"></p>
    <p class="mark" id="markThree"></p>
    
    <p class="name" id="nameFour"></p>
    <p class="club" id="clubFour"></p>
    <p class="mark" id="markFour"></p>
    
    <p class="name" id="nameFive"></p>
    <p class="club" id="clubFive"></p>
    <p class="mark" id="markFive"></p>
    
    <p class="name" id="nameSix"></p>
    <p class="club" id="clubSix"></p>
    <p class="mark" id="markSix"></p>

    <p class="name" id="nameSeven"></p>
    <p class="club" id="clubSeven"></p>
    <p class="mark" id="markSeven"></p>

    <p class="name" id="nameEight"></p>
    <p class="club" id="clubEight"></p>
    <p class="mark" id="markEight"></p>
    
    <script>
      const socket = new WebSocket("ws://192.168.1.75:8880");

      socket.addEventListener("message", (event) => {
        let jsonData = JSON.parse(event.data);

        const  markOne = document.getElementById("markOne")
        const  markTwo = document.getElementById("markTwo")
        const  markThree = document.getElementById("markThree")
        const  markFour = document.getElementById("markFour")
        const  markFive = document.getElementById("markFive")
        const  markSix = document.getElementById("markSix")
        const  markSeven = document.getElementById("markSeven")
        const  markEight = document.getElementById("markEight")

        if (jsonData.command == "resultsComponents") {

          if(jsonData.markOne.length >= 6) {markOne.style.fontSize = "23px", markOne.style.paddingTop = "11px"} else {markOne.style.fontSize = "30px", markOne.style.paddingTop = "0px"}
          if(jsonData.markTwo.length >= 6) {markTwo.style.fontSize = "23px", markTwo.style.paddingTop = "61px"} else {markTwo.style.fontSize = "30px", markTwo.style.paddingTop = "50px"}
          if(jsonData.markThree.length >= 6) {markThree.style.fontSize = "23px", markThree.style.paddingTop = "111px"} else {markThree.style.fontSize = "30px", markThree.style.paddingTop = "100px"}
          if(jsonData.markFour.length >= 6) {markFour.style.fontSize = "23px", markFour.style.paddingTop = "161px"} else {markFour.style.fontSize = "30px", markFour.style.paddingTop = "150px"}
          if(jsonData.markFive.length >= 6) {markFive.style.fontSize = "23px", markFive.style.paddingTop = "211px"} else {markFive.style.fontSize = "30px", markFive.style.paddingTop = "200px"}
          if(jsonData.markSix.length >= 6) {markSix.style.fontSize = "23px", markSix.style.paddingTop = "261px"} else {markSix.style.fontSize = "30px", markSix.style.paddingTop = "250px"}
          if(jsonData.markSeven.length >= 6) {markSeven.style.fontSize = "23px", markSeven.style.paddingTop = "311px"} else {markSeven.style.fontSize = "30px", markSeven.style.paddingTop = "300px"}
          if(jsonData.markEight.length >= 6) {markEight.style.fontSize = "23px", markEight.style.paddingTop = "361px"} else {markEight.style.fontSize = "30px", markEight.style.paddingTop = "350px"}

          document.getElementById("nameOne").textContent = jsonData.nameOne;
          document.getElementById("clubOne").textContent = jsonData.clubOne;
          document.getElementById("markOne").textContent = jsonData.markOne;

          if(jsonData.nameTwo !== ".") {
          document.getElementById("nameTwo").textContent = jsonData.nameTwo;} else {document.getElementById("nameTwo").textContent = "";}
          document.getElementById("clubTwo").textContent = jsonData.clubTwo;
          document.getElementById("markTwo").textContent = jsonData.markTwo;

          if(jsonData.nameThree !== ".") {
          document.getElementById("nameThree").textContent = jsonData.nameThree;} else {document.getElementById("nameThree").textContent = "";}
          document.getElementById("clubThree").textContent = jsonData.clubThree;
          document.getElementById("markThree").textContent = jsonData.markThree;

          if(jsonData.nameFour !== ".") {
          document.getElementById("nameFour").textContent = jsonData.nameFour;} else {document.getElementById("nameFour").textContent = "";}
          document.getElementById("clubFour").textContent = jsonData.clubFour;
          document.getElementById("markFour").textContent = jsonData.markFour;

          if(jsonData.nameFive !== ".") {
          document.getElementById("nameFive").textContent = jsonData.nameFive;} else {document.getElementById("nameFive").textContent = "";}
          document.getElementById("clubFive").textContent = jsonData.clubFive;
          document.getElementById("markFive").textContent = jsonData.markFive;

          if(jsonData.nameSix !== ".") {
          document.getElementById("nameSix").textContent = jsonData.nameSix;} else {document.getElementById("nameSix").textContent = "";}
          document.getElementById("clubSix").textContent = jsonData.clubSix;
          document.getElementById("markSix").textContent = jsonData.markSix;

          if(jsonData.nameSeven !== ".") {
          document.getElementById("nameSeven").textContent = jsonData.nameSeven;} else {document.getElementById("nameSeven").textContent = "";}
          document.getElementById("clubSeven").textContent = jsonData.clubSeven;
          document.getElementById("markSeven").textContent = jsonData.markSeven;

          if(jsonData.nameEight !== ".") {
          document.getElementById("nameEight").textContent = jsonData.nameEight;} else {document.getElementById("nameEight").textContent = "";}
          document.getElementById("clubEight").textContent = jsonData.clubEight;
          document.getElementById("markEight").textContent = jsonData.markEight;
          
        } else if (jsonData.command == "startlistComponents") {

          document.getElementById("nameOne").textContent = jsonData.nameOne;
          document.getElementById("clubOne").textContent = jsonData.clubOne;

          document.getElementById("nameTwo").textContent = jsonData.nameTwo;
          document.getElementById("clubTwo").textContent = jsonData.clubTwo;

          document.getElementById("nameThree").textContent = jsonData.nameThree;
          document.getElementById("clubThree").textContent = jsonData.clubThree;

          document.getElementById("nameFour").textContent = jsonData.nameFour;
          document.getElementById("clubFour").textContent = jsonData.clubFour;

          document.getElementById("nameFive").textContent = jsonData.nameFive;
          document.getElementById("clubFive").textContent = jsonData.clubFive;

          document.getElementById("nameSix").textContent = jsonData.nameSix;
          document.getElementById("clubSix").textContent = jsonData.clubSix;

          document.getElementById("nameSeven").textContent = jsonData.nameSeven;
          document.getElementById("clubSeven").textContent = jsonData.clubSeven;

          document.getElementById("nameEight").textContent = jsonData.nameEight;
          document.getElementById("clubEight").textContent = jsonData.clubEight;



        } else {return}
      });
    </script>
    <style>
      p {
        position: absolute;
        font-family: "Ubuntu", sans-serif;
        font-weight: 400;

      }
      .mark{
        font-weight: 700;
        padding-left: 685px ;
        font-style: normal;
        font-size: 30px;
      }
      .name{
        font-weight: 700;
        color: white;
        font-style: normal;
        font-size: 30px;
      }
      .club{
        padding-left: 260px;
        font-weight: 300;
        color: white;
        font-style: normal;
        font-size: 20px;
      }

      #nameTwo{
        padding-top: 50px;
      }
      #nameThree{
        padding-top: 100px;
      }
      #nameFour{
        padding-top: 150px;
      }
      #nameFive{
        padding-top: 200px;
      }
      #nameSix{
        padding-top: 250px;
      }
      #nameSeven{
        padding-top: 300px;
      }
      #nameEight{
        padding-top: 350px;
      }

      #clubOne{
        padding-top: 15px;
      }
      #clubTwo{
        padding-top: 65px;
      }
      #clubThree{
        padding-top: 115px;
      }
      #clubFour{
        padding-top: 165px;
      }
      #clubFive{
        padding-top: 215px;
      }
      #clubSix{
        padding-top: 265px;
      }
      #clubSeven{
        padding-top: 315px;
      }
      #clubEight{
        padding-top: 365px;
      }

      #markTwo{
        padding-top: 50px;
      }
      #markThree{
        padding-top: 100px;
      }
      #markFour{
        padding-top: 150px;
      }
      #markFive{
        padding-top: 200px;
      }
      #markSix{
        padding-top: 250px;
      }
      #markSeven{
        padding-top: 300px;
      }
      #markEight{
        padding-top: 350px;
      }
    </style>
  </body>
</html>
