index.php

<?php
  session_start();
  define('XP__NEEDED','100');
  $rows = '';

  //unset($_SESSION['id_user']);

  if (isset($_COOKIE["PHPSESSID"]) && isset($_SESSION['id_user'])) {
    if ($_SERVER["REQUEST_METHOD"] == "POST") {
      try {
        require_once('db_functions.php');
        $user_info = getUserInfo($_SESSION['id_user']);
        $xp_current = $_POST['xp_current'];

        foreach ($user_info as $data) {
          $user_level = $data['level'];
          $xp_all = $data['xp_all'];
          $xp_needed = $data['xp_needed'];
        }

        if ($xp_current >= $xp_needed) {
          $user_level += 1;
          setUserInfo('level', $user_level, $_SESSION['id_user']);

          $xp_all += $xp_current;
          setUserInfo('xp_all', $xp_all, $_SESSION['id_user']);

          $xp_current -= $xp_needed;
          setUserInfo('xp_current', $xp_current, $_SESSION['id_user']);

          $xp_needed = (XP__NEEDED * $user_level) + XP__NEEDED;
          setUserInfo('xp_needed', $xp_needed, $_SESSION['id_user']);
        }

        $user_info = getUserInfo($_SESSION['id_user']);
        $rows = showUserInfo($user_info);
      } catch (Exception $e) {
        echo $e->getMessage();
      }
    }
  } else {
    // Symulacja zalogowania się użytkownika do Twojego systemu
    // Uzytkownik zalogował się za pomocą formularza - prawidłowo
    $_SESSION['id_user'] = 1;

    try {
      require_once('db_functions.php');
      $user_info = getUserInfo($_SESSION['id_user']);
      $rows = showUserInfo($user_info);
    } catch (Exception $e) {
      echo $e->getMessage();
    }
  }
?>

<!-- Demo -->
<!DOCTYPE html>
<html>
  <head lang="pl">
    <meta charset="utf-8">

    <style>
      :root {
        --board-width: 20vw;
      }
      * {
        box-sizing: border-box;
      }
      thead tr {
        background-color: gray;
        color: white;
        font: 1em monospace;
      }
      thead th {
        padding: 0.5em;
      }
      tbody td {
        padding: 0.2em;
        text-align: center;
      }
      .game-board {
        width: var(--board-width);
        margin-top: 2em;
        padding: 0.2em;
        font: 1.1em monospace;
      }
      .game-board .playground {
        font: 0.8em bold monospace;
        padding: 0.2em;
        color: green;
        text-align: center;
      }
      .game-board .play-time {
        font-size: 4.1em;
      }
      .game-board button {
        width:  var(--board-width);
        cursor: pointer;
        box-shadow: 2px 2px 1px grey;
        font: 1.2em monospace;
        font-variant: small-caps;
      }
      .game-board button:active {
        transform: translateY(1px);
        box-shadow: none;
      }
    </style>
  </head>
  <body>
    <table>
      <thead>
        <tr><th colspan="5">Dane z bazy danych</th></tr>
        <tr>
            <th>Użytkownik</th>
            <th>Poziom</th>
            <th>Punkty zdobyte</th>
            <th>Punkty obecne</th>
            <th>Punkty następny poziom</th>
        </tr>
      </thead>
      <tbody>
        <?php echo $rows; ?>
      </tbody>
    </table>
    <div class="game-board">
        <div>Punkty: <span id="user_points"></span></div>
        <div id="playground" class="playground play-time">0</div>
        <div><button id="play">Graj</button></div>
    </div>
    <form id="form" action="index.php" method="post">
        <input type="hidden" id="xp_current" name="xp_current" value="">
    </form>

    <script>
      const xp_current_db = document.getElementById('xp_current_db'),
            xp_needed = document.getElementById('xp_needed'),
            user_points = document.getElementById('user_points'),
            playground = document.getElementById('playground'),
            button_play = document.getElementById('play');

      const XP__NEEDED = xp_needed.textContent * 1;

      (setUserPoints = function(points = null) {
        if (points == null) {
          user_points.textContent = xp_current_db.textContent;
        } else {
          let calculate_user_points = user_points.textContent * 1;
          calculate_user_points += points;
          user_points.textContent = calculate_user_points;

          if (calculate_user_points >= XP__NEEDED) {
            button_play.disabled = true;
            setTimeout(function() {
              playground.classList.remove('play-time');
              playground.innerHTML = 'Gratulacje !<br>Przechodzisz na następny poziom.';

              setTimeout(sendData, 2000, calculate_user_points);
            }, 2000);
          }
        }
      }).call(this)

      button_play.addEventListener('click', () => {
        const min = 1;
        const max = XP__NEEDED;
        const result = Math.floor(Math.random() * (max - min + 1) ) + min;
        playground.textContent = result;
        setUserPoints(result);
      })

      function sendData(points) {
        const form = document.getElementById('form');
        const input_xp_current = document.getElementById('xp_current');
        input_xp_current.value = points;
        form.submit();
       }
    </script>
    </body>
</html>