Is this still working?

[mpentler]

I can't get this working with the latest CTFd. Says the variables are undefined for the start and end time and Jinja2 dies.

[alokmenghrajani]

I haven't tried with the latest CTFd. PR welcome if you are able to figure out a fix. Otherwise, we'll update this repo later this year if we end up using CTFd (we are also considering switching to something else).

[mpentler]

I’ll see what I can do. Not really an area I’m familiar with.

[miguelpduarte]

In the meantime, for anyone that finds this issue like I did I whipped up some javascript that can fill in for this plugin:

// Kind of stolen from downunderctf.com
const START = new Date(init.start * 1000);
const END = new Date(init.end * 1000);

const disp_phase = document.getElementById("countdown-phase");
const countdown_disp = document.getElementById("countdown");

const disp = {
    hour: countdown_disp.querySelector(".hour"),
    minute: countdown_disp.querySelector(".minute"),
    second: countdown_disp.querySelector(".second"),
}

let countdown_interval_id = null;

const countdown = () => {
    const NOW = new Date();
    let compareTo;

    if (NOW > END) {
    // We done! Ty for participating!
    disp_phase.textContent = "CTF is over! Thanks for participating!";
    compareTo = null;
    countdown_disp.remove();
    clearInterval(countdown_interval_id);
    return;
    } else if (NOW > START) {
    // We started boisss
    disp_phase.textContent = "Ending in...";
    compareTo = END;
    } else {
    // Still waiting for it to start! Hypeee!!1!
    disp_phase.textContent = "Starting in...";
    compareTo = START;
    }

    const diff = Math.floor((compareTo - NOW) / 1000);
    disp.hour.textContent = (Math.floor(diff / 3600)).toString().padStart(2, "0");
    disp.minute.textContent = (Math.floor(diff / 60) % 60).toString().padStart(2, "0");
    disp.second.textContent = (diff % 60).toString().padStart(2, "0");
};

countdown();
countdown_interval_id = setInterval(countdown, 1000);

This supposes the following HTML is present in the page in which this js is used:

<h3 id="countdown-phase">Ending in...</h3>
<div id="countdown">
    <span class="hour">00</span>
    <span class="minute">00</span>
    <span class="second">00</span>
</div>

You can add separators directly between those spans or do it in CSS like me (also have some tweaks I am using for styling but YMMV on those):

/* The important part */
#countdown > *:not(.second)::after {
    content: ":";
}

#countdown {
    font-size: 2em;
}

#countdown-phase {
    margin-top: 1.5rem;
}

If anyone finds this plugin and wants this functionality but can't get the plugin to work they should be able to use this since CTFd now exports init.start and init.end which use your CTFd configs. See this issue on that.

For anyone who finds this, feel free to use the snippets above and hack it all you want :slightly_smiling_face: