<!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>
    <p id="name"></p>
    <p id="club"></p>

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

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

        if (jsonData.command == "LJ") {
          document.getElementById("name").textContent = jsonData.name;
          document.getElementById("club").textContent = jsonData.club;
        } else {
          return;
        }
      });
    </script>
    <style>
      #name {
        color: white;
        font-family: "Ubuntu", sans-serif;
        font-weight: 700;
        font-style: normal;
        font-size: 80px;
        position: absolute;
        padding-top: 0;
        padding-left: 20px;
      }
      #club {
        color: white;
        font-family: "Ubuntu", sans-serif;
        font-weight: 400;
        font-style: normal;
        font-size: 50px;
        position: absolute;
        padding-top: 120px;
        padding-left: 0;
      }
    </style>
  </body>
</html>
