Username output:

Hello,

Can someone tell me how to output usernames in code?

Example:

If I use this code, it tells me how many people are already registered:

({$total_users|number_format})

add the php file   

/* ================= ONLINE USERS ================= */
$online_users = $db->query("
  SELECT user_firstname
  FROM users
  WHERE user_is_online = 1
  ORDER BY RAND()
  LIMIT 6
")->fetch_all(MYSQLI_ASSOC);

$smarty->assign('online_users', $online_users);
$smarty->assign('online_count', count($online_users));

/* ================= TOTAL USERS ================= */
$total_users = $db->query("
  SELECT COUNT(*) AS total
  FROM users
")->fetch_assoc()['total'];

$smarty->assign('total_users', $total_users);

tpl  

{* ================= USERS COUNTER + ONLINE USERS ================= *}

<div class="mt-4 text-white hero-fade-slide delay-4 position-relative users-viral-block">

  <h3 class="fw-bold mb-1" id="user-counter">
    {$total_users|number_format}
  </h3>
  <p class="mb-1 opacity-75">Users already joined</p>

  <div class="mt-2">
    <span class="fw-semibold" id="online-counter">
      {$online_count}
    </span>
    <span class="opacity-75">online now</span>
  </div>

  <div id="online-names" class="small mt-1 opacity-75">
    {foreach $online_users as $user}
      <span class="me-2 online-name">
        {$user.user_firstname}
      </span>
    {/foreach}
  </div>

</div>

cs//

/* ================= VIRAL USERS BLOCK ================= */

.users-viral-block {
  max-width: 420px;
}

.users-viral-block h3 {
  letter-spacing: -0.5px;
}

.online-name {
  transition: opacity .4s ease, font-weight .4s ease;
  cursor: default;
}

.viral-popup {
  position: absolute;
  font-weight: 600;
  color: #00ffcc;
  pointer-events: none;
  transition: all 1s ease-out;
}

Javascript:

<script>
document.addEventListener("DOMContentLoaded", function() {

  /* ================= TOTAL USERS VIRAL COUNTER ================= */

  var counterEl = document.getElementById("user-counter");
  var currentUsers = {$total_users};

  function animateCounter(amount) {
    var start = currentUsers;
    var end = currentUsers + amount;
    var duration = 800;
    var startTime = null;

    function step(ts) {
      if (!startTime) startTime = ts;
      var progress = Math.min((ts - startTime) / duration, 1);
      var value = Math.floor(start + (end - start) * progress);
      counterEl.textContent = value.toLocaleString();
      if (progress < 1) requestAnimationFrame(step);
    }

    requestAnimationFrame(step);
    currentUsers = end;
  }

  function showViralPopup(amount) {
    var popup = document.createElement("div");
    popup.className = "viral-popup";
    popup.textContent = "+" + amount;
    popup.style.top = (Math.random() * 40) + "%";
    popup.style.left = (Math.random() * 60 + 20) + "%";
    popup.style.opacity = "1";

    counterEl.parentElement.appendChild(popup);

    setTimeout(() => {
      popup.style.top = (parseFloat(popup.style.top) - 20) + "%";
      popup.style.opacity = "0";
    }, 50);

    setTimeout(() => popup.remove(), 1000);
  }

  setInterval(function() {
    var increment = Math.floor(Math.random() * 3 + 1);
    animateCounter(increment);
    showViralPopup(increment);
  }, 4000);

  /* ================= ONLINE USER NAME ROTATION ================= */

  var names = document.querySelectorAll(".online-name");
  var i = 0;

  if (names.length > 0) {
    setInterval(function() {
      names.forEach(n => {
        n.style.opacity = "0.4";
        n.style.fontWeight = "400";
      });

      names[i].style.opacity = "1";
      names[i].style.fontWeight = "600";

      i = (i + 1) % names.length;
    }, 2500);
  }

});
</script>

Wow, thank you so much!

How can I display my current membership level? For example, I'm in the Gold group, and I want it to say:

Sleep, you are in the Gold group. You need Group A.