Untitled Snippet

function vqs_leaderboard_assets() {

    wp_enqueue_style(

        'vqs-leaderboard-css',

        get_stylesheet_directory_uri() . '/vqs-leaderboard.css',

        [],

        '1.0'

    );

    wp_enqueue_script(

        'vqs-leaderboard-js',

        get_stylesheet_directory_uri() . '/vqs-leaderboard.js',

        [],

        '1.0',

        true

    );

}

add_action('wp_enqueue_scripts', 'vqs_leaderboard_assets');

function vqs_leaderboard_shortcode() {

    ob_start(); ?>

<div class="container" id="vqs-leaderboard">

  <h1 class="title">Monthly Leaderboard Race</h1>

  <div class="sub-head">Top players — live updated</div>

  <div class="timer">

    <div id="countdown">

      <span id="days">00</span>d

      <span id="hours">00</span>h

      <span id="mins">00</span>m

      <span id="secs">00</span>s

    </div>

  </div>

  <div class="podium">

    <div class="podium-card left">

      <div class="emblem" id="emblem-2">S</div>

      <div class="rank">#2</div>

      <div class="wagered" id="wager-2">$0.00</div>

      <div class="reward" id="reward-2">$0.00</div>

    </div>

    <div class="podium-card center">

      <div class="emblem" id="emblem-1">S</div>

      <div class="rank">#1</div>

      <div class="wagered" id="wager-1">$0.00</div>

      <div class="reward" id="reward-1">$0.00</div>

    </div>

    <div class="podium-card right">

      <div class="emblem" id="emblem-3">S</div>

      <div class="rank">#3</div>

      <div class="wagered" id="wager-3">$0.00</div>

      <div class="reward" id="reward-3">$0.00</div>

    </div>

  </div>

  <div id="leaderboard-list">

    <div id="list-rows">Loading…</div>

  </div>

</div>

<?php

    return ob_get_clean();

}

add_shortcode('vqs_leaderboard', 'vqs_leaderboard_shortcode');