<!DOCTYPE html>
<html lang="it">
  <head>
    <meta charset="UTF-8" />
    <title>LONG JUMP COMPONENTS - TFstream</title>
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link
      href="https://fonts.googleapis.com/css2?family=Ubuntu:ital,wght@0,300;0,400;0,700;1,400&display=swap"
      rel="stylesheet"
    />
  </head>
  <body>
    <div class="div">
      <p class="item" id="1"></p>
      <p class="item" id="2"></p>
      <p class="item" id="3"></p>
      <p class="item" id="4"></p>
      <p class="item" id="5"></p>
      <p class="item" id="6"></p>
    </div>

    <style>
      .div {
        height: 100px;
        display: flex; /* At /* Dispone  /* Spazia uniformemente gli elementi */
        gap: 1px;
        justify-content: space-between; /* Spazio tra gli elementi */
        padding: 0px; /* Spazio interno del container */
      }

      /* Stile per gli elementi */
      .item {
        position: relative; /* Per gestire il posizionamento assoluto */
        display: flex; /* Attiva il layout flexbox per centrare */
        align-items: center; /* Centra verticalmente gli elementi */
        justify-content: center; /* Centra orizzontalmente gli elementi */
        flex: 1; /* Gli elementi occupano la stessa larghezza */
        padding: 10px; /* Spazio interno degli elementi */
        text-align: center;
      }

      p {
        color: white;
        font-family: "Ubuntu", sans-serif;
        font-weight: 400;
        font-style: normal;
        font-size: 60px;
        margin: 0;
      }
      .item img {
        max-height: 100%; /* Altezza massima dell'immagine */
        max-width: 100%; /* Larghezza massima dell'immagine */
        position: absolute; /* Posizionamento assoluto per l'immagine */
        top: 50%; /* Sposta l'immagine verso il centro verticale */
        transform: translateY(-50%); /* Corregge il posizionamento verticale */
      }
    </style>

    <script>
      const socket = new WebSocket("ws://192.168.1.75:8880");

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

        if (jsonData.command == "TJ") {
          console.log("ricevuto")
          if (jsonData.nextName == "") {
            return;
          } else if (jsonData.nextResults[0].res == "") {

            document.getElementById("1").innerHTML =
              '<img src="https://i.ibb.co/TcC0v10/loading.gif" alt="GIF"  width="150">';
            document.getElementById("2").textContent = "";
            document.getElementById("3").textContent = "";
            document.getElementById("4").textContent = "";
            document.getElementById("5").textContent = "";
            document.getElementById("6").textContent = "";

          } else if (jsonData.nextResults[1].res == "") {

            if (jsonData.nextResults[0].res == "0") {
              document.getElementById("1").style.color = "#930800";
              document.getElementById("1").textContent = "X";
            } else {
              document.getElementById("1").style.color = "white";
              document.getElementById("1").textContent =
                jsonData.nextResults[0].res;
            }
            document.getElementById("2").innerHTML =
              '<img src="https://i.ibb.co/TcC0v10/loading.gif" alt="GIF" width="150">';
            document.getElementById("3").textContent = "";
            document.getElementById("4").textContent = "";
            document.getElementById("5").textContent = "";
            document.getElementById("6").textContent = "";

          } else if (jsonData.nextResults[2].res == "") {

            if (jsonData.nextResults[0].res == "0") {
              document.getElementById("1").style.color = "#930800";
              document.getElementById("1").textContent = "X";
            } else {
              document.getElementById("1").style.color = "white";
              document.getElementById("1").textContent =
                jsonData.nextResults[0].res;
            }
            if (jsonData.nextResults[1].res == "0") {
              document.getElementById("2").style.color = "#930800";
              document.getElementById("2").textContent = "X";
            } else {
              document.getElementById("2").style.color = "white";
              document.getElementById("2").textContent =
                jsonData.nextResults[1].res;
            }
            document.getElementById("3").innerHTML =
              '<img src="https://i.ibb.co/TcC0v10/loading.gif" alt="GIF" width="150">';
            document.getElementById("4").textContent = "";
            document.getElementById("5").textContent = "";
            document.getElementById("6").textContent = "";

          } else if (jsonData.nextResults[3].res == "") {
            if (jsonData.nextResults[0].res == "0") {
              document.getElementById("1").style.color = "#930800";
              document.getElementById("1").textContent = "X";
            } else {
              document.getElementById("1").style.color = "white";
              document.getElementById("1").textContent =
                jsonData.nextResults[0].res;
            }
            if (jsonData.nextResults[1].res == "0") {
              document.getElementById("2").style.color = "#930800";
              document.getElementById("2").textContent = "X";
            } else {
              document.getElementById("2").style.color = "white";
              document.getElementById("2").textContent =
                jsonData.nextResults[1].res;
            }
            if (jsonData.nextResults[2].res == "0") {
              document.getElementById("3").style.color = "#930800";
              document.getElementById("3").textContent = "X";
            } else {
              document.getElementById("3").style.color = "white";
              document.getElementById("3").textContent =
                jsonData.nextResults[2].res;
            }
            document.getElementById("4").innerHTML =
              '<img src="https://i.ibb.co/TcC0v10/loading.gif" alt="GIF" width="150">';
            document.getElementById("5").textContent = "";
            document.getElementById("6").textContent = "";
          } else if (jsonData.nextResults[4].res == "") {
            if (jsonData.nextResults[0].res == "0") {
              document.getElementById("1").style.color = "#930800";
              document.getElementById("1").textContent = "X";
            } else {
              document.getElementById("1").style.color = "white";
              document.getElementById("1").textContent =
                jsonData.nextResults[0].res;
            }
            if (jsonData.nextResults[1].res == "0") {
              document.getElementById("2").style.color = "#930800";
              document.getElementById("2").textContent = "X";
            } else {
              document.getElementById("2").style.color = "white";
              document.getElementById("2").textContent =
                jsonData.nextResults[1].res;
            }
            if (jsonData.nextResults[2].res == "0") {
              document.getElementById("3").style.color = "#930800";
              document.getElementById("3").textContent = "X";
            } else {
              document.getElementById("3").style.color = "white";
              document.getElementById("3").textContent =
                jsonData.nextResults[2].res;
            }
            if (jsonData.nextResults[3].res == "0") {
              document.getElementById("4").style.color = "#930800";
              document.getElementById("4").textContent = "X";
            } else {
              document.getElementById("4").style.color = "white";
              document.getElementById("4").textContent =
                jsonData.nextResults[3].res;
            }
            document.getElementById("5").innerHTML =
              '<img src="https://i.ibb.co/TcC0v10/loading.gif" alt="GIF" width="150">';
            document.getElementById("6").textContent = "";
          } else if (jsonData.nextResults[5].res == "") {
            if (jsonData.nextResults[0].res == "0") {
              document.getElementById("1").style.color = "#930800";
              document.getElementById("1").textContent = "X";
            } else {
              document.getElementById("1").style.color = "white";
              document.getElementById("1").textContent =
                jsonData.nextResults[0].res;
            }
            if (jsonData.nextResults[1].res == "0") {
              document.getElementById("2").style.color = "#930800";
              document.getElementById("2").textContent = "X";
            } else {
              document.getElementById("2").style.color = "white";
              document.getElementById("2").textContent =
                jsonData.nextResults[1].res;
            }
            if (jsonData.nextResults[2].res == "0") {
              document.getElementById("3").style.color = "#930800";
              document.getElementById("3").textContent = "X";
            } else {
              document.getElementById("3").style.color = "white";
              document.getElementById("3").textContent =
                jsonData.nextResults[2].res;
            }
            if (jsonData.nextResults[3].res == "0") {
              document.getElementById("4").style.color = "#930800";
              document.getElementById("4").textContent = "X";
            } else {
              document.getElementById("4").style.color = "white";
              document.getElementById("4").textContent =
                jsonData.nextResults[3].res;
            }
            if (jsonData.nextResults[4].res == "0") {
              document.getElementById("5").style.color = "#930800";
              document.getElementById("5").textContent = "X";
            } else {
              document.getElementById("5").style.color = "white";
              document.getElementById("5").textContent =
                jsonData.nextResults[4].res;
            }
            document.getElementById("6").innerHTML =
              '<img src="https://i.ibb.co/TcC0v10/loading.gif" alt="GIF" width="150">';
          } else {
            if (jsonData.nextResults[0].res == "0") {
              document.getElementById("1").style.color = "#930800";
              document.getElementById("1").textContent = "X";
            } else {
              document.getElementById("1").style.color = "white";
              document.getElementById("1").textContent =
                jsonData.nextResults[0].res;
            }
            if (jsonData.nextResults[1].res == "0") {
              document.getElementById("2").style.color = "#930800";
              document.getElementById("2").textContent = "X";
            } else {
              document.getElementById("2").style.color = "white";
              document.getElementById("2").textContent =
                jsonData.nextResults[1].res;
            }
            if (jsonData.nextResults[2].res == "0") {
              document.getElementById("3").style.color = "#930800";
              document.getElementById("3").textContent = "X";
            } else {
              document.getElementById("3").style.color = "white";
              document.getElementById("3").textContent =
                jsonData.nextResults[2].res;
            }
            if (jsonData.nextResults[3].res == "0") {
              document.getElementById("4").style.color = "#930800";
              document.getElementById("4").textContent = "X";
            } else {
              document.getElementById("4").style.color = "white";
              document.getElementById("4").textContent =
                jsonData.nextResults[3].res;
            }
            if (jsonData.nextResults[4].res == "0") {
              document.getElementById("5").style.color = "#930800";
              document.getElementById("5").textContent = "X";
            } else {
              document.getElementById("5").style.color = "white";
              document.getElementById("5").textContent =
                jsonData.nextResults[4].res;
            }
            if (jsonData.nextResults[5].res == "0") {
              document.getElementById("6").style.color = "#930800";
              document.getElementById("6").textContent = "X";
            } else {
              document.getElementById("6").style.color = "white";
              document.getElementById("6").textContent =
                jsonData.nextResults[5].res;
            }
          }
        } else {
          return;
        }
      });
    </script>

  </body>
</html>
