Skip to content

Commit

Permalink
FINALLY fixes timer
Browse files Browse the repository at this point in the history
THANK YOU TO SEAN MY GOAT

Co-authored-by: Sean Zhao <[email protected]>
  • Loading branch information
JasonLovesDoggo and Cqctxs committed Dec 5, 2023
1 parent ffae7bf commit cba5686
Show file tree
Hide file tree
Showing 2 changed files with 139 additions and 137 deletions.
105 changes: 54 additions & 51 deletions core/static/core/countdown.js
Original file line number Diff line number Diff line change
@@ -1,66 +1,69 @@
const e = document.getElementById("countdown")
const countdown = document.getElementById("countdown")
const eTextPre = document.getElementById("countdown-text-pre")
const eTextPost = document.getElementById("countdown-text-post")

function assertClass(classList, className, contains) {
if (contains) {
if (!classList.contains(className)) classList.add(className)
} else {
if (classList.contains(className)) classList.remove(className)
}
function updateColours(classList, className, contains) {
if (contains) {
if (!classList.contains(className)) classList.add(className)
} else {
if (classList.contains(className)) classList.remove(className)
}
}

const newCalculateTime = (start, end, startsPre, startsPost, endsPre, endsPost, ended) => () => {
/*
starts: before start
ends: after start before end (during)
ended: after end
const sanitizeStart = (text) => text.startsWith('__') ? '' : text;
const sanitizeEnd = (text) => text.startsWith('__') ? '' : text;

const newCalculateTime = (start, end, beforeStartPre, beforeStartPost, endsPre, endsPost, endedPre, endedPost) => () => {
/*
beforeStart: before start
ends: after start before end (during)
ended: after end
*/
let started = false
let finished = false
let d = Math.floor((end - Date.now()) / 1000)
//console.log("Initial d:", d);
if (d < 0) {
d = Math.floor((start - Date.now()) / 1000);
finished = d < 0
started = true
}
*/
let started = false
let finished = false
let tillStart = Math.floor((start - Date.now()) / 1000)
let tillEnd = Math.floor((end - Date.now()) / 1000);
//console.log("Initial display:", display);
if (tillStart < 0) { // has started
started = true
}
if (tillEnd < 0) { // has ended
finished = true
}
let display = started ? tillEnd : tillStart
if (display < 0 && finished) {
display = Math.abs(display)
}
/*console.log("End:", end);
console.log("Start:", start);
console.log("Now:", Date.now());
console.log("d:", d);*/
const day = Math.floor(d / 86400)
const hour = Math.floor((d - day * 86400) / 3600)
const minute = Math.floor((d - day * 86400 - hour * 3600) / 60)
const second = d % 60
let s = ''
if (day == 1) s += '1 day, '
else if (day == 0) {}
else {
s += `${day} days, `
}
s += ('0' + hour).slice(-2) + ':'
s += ('0' + minute).slice(-2) + ':'
s += ('0' + second).slice(-2)
e.innerText = s
if (d > 0) {
assertClass(e.classList, "soon-very1", d < 60*5 && d >= 60)
assertClass(e.classList, "soon-very2", d < 60 && d >= 10)
assertClass(e.classList, "soon-very3", d < 10)
}
assertClass(e.classList, "ending-5m", display < 60*5 && display >= 60)
assertClass(e.classList, "ending-1m", display < 60 && display >= 10)
assertClass(e.classList, "ending-10s", display < 10)
// TODO: js i18n
startsPre = startsPre.startsWith('__') ? '' : startsPre
startsPost = startsPost.startsWith('__') ? '' : startsPost
endsPre = endsPre.endsWith('__') ? '' : endsPre
endsPost = endsPost.endsWith('__') ? '' : endsPost
eTextPre.innerText = started ? startsPre : (finished ? ended : endsPre)
eTextPost.innerText = started ? startsPost : (finished ? ended : endsPost)
const day = Math.floor(display / 86400)
const hour = Math.floor((display - day * 86400) / 3600)
const minute = Math.floor((display - day * 86400 - hour * 3600) / 60)
const second = display % 60
let s = ''
if (day === 1) {
s += '1 day, '
} else if (day === 0) {
} else {
s += `${day} days, `
}
s += ('0' + hour).slice(-2) + ':'
s += ('0' + minute).slice(-2) + ':'
s += ('0' + second).slice(-2)
console.log("s:", s);
countdown.innerText = s
if (display > 0) { // before the end
updateColours(countdown.classList, "ending-5m", display < 60 * 5 && display >= 60)
updateColours(countdown.classList, "ending-1m", display < 60 && display >= 10)
updateColours(countdown.classList, "ending-10s", display < 10)
}
// TODO: js i18n
eTextPre.innerText = started ? (finished ? endedPre : sanitizeEnd(endsPre)) : sanitizeStart(beforeStartPre)
eTextPost.innerText = started ? (finished ? endedPost : sanitizeEnd(endsPost)) : sanitizeStart(beforeStartPost)
}

export default newCalculateTime
171 changes: 85 additions & 86 deletions core/templates/core/base.html
Original file line number Diff line number Diff line change
Expand Up @@ -3,130 +3,129 @@
{% load base %}
<!DOCTYPE html>
<html lang="{{ get_current_language }}">
<head>
<title>{% block title %}{% endblock %}</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="{% static 'core/base.css' %}" />
<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=Work+Sans:wght@400;500;700&display=swap" rel="stylesheet">
<link href="{% static 'fontawesomefree/css/fontawesome.css' %}" rel="stylesheet" type="text/css">
<link href="{% static 'fontawesomefree/css/solid.css' %}" rel="stylesheet" type="text/css">
{% if START_BEFORE or END_BEFORE %}
<script type="module">
<head>
<title>{% block title %}{% endblock %}</title>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<link rel="stylesheet" href="{% static 'core/base.css' %}"/>
<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=Work+Sans:wght@400;500;700&display=swap" rel="stylesheet">
<link href="{% static 'fontawesomefree/css/fontawesome.css' %}" rel="stylesheet" type="text/css">
<link href="{% static 'fontawesomefree/css/solid.css' %}" rel="stylesheet" type="text/css">
<script type="module">
import newCalculateTime from "{% static 'core/countdown.js' %}"

const calculateTime = newCalculateTime(
{{ START.timestamp }} * 1000,
{{ END.timestamp }} * 1000,
"{% translate 'starts in' %}",
"{% translate '' %}",
"{% translate 'Only' %}",
"{% translate 'remaining' %}",
"{% translate 'scavenger hunt ended!' %}",
const calculateTime = newCalculateTime(
{{ START.timestamp }} * 1000,
{{ END.timestamp }} * 1000,
"{{ hunt.name }} {% translate "starts in" %}", {# starts pre #}
"{% translate '' %}", {# starts post #}
"{% translate 'Only' %}", {# ends pre #}
"{% translate 'remaining' %}", {# ends post #}
"{{ hunt.name }} {% translate 'ended' %}", {# ended pre #}
"{% translate 'ago' %}", {# ended post #}
)

calculateTime()
calculateTime()

setInterval(calculateTime, 1000)
</script>
{% endif %}
{% block head_end %}{% endblock %}
</head>
<body>
<div style="margin: 0; padding: 0; height: 10rem;"></div>
<object class="deco27" style="height: 10rem;" data="{% static 'core/overcast.svg' %}" type="image/svg+xml" role="presentation"></object>
<object class="deco27" style="max-height: 10rem;" data="{% static 'core/banner.svg' %}" type="image/svg+xml" role="presentation"></object>
<header>
{% comment %} TODO: consider merging header and title {% endcomment %}
{% if messages %}
<ul class="messages">
{% for message in messages %}
<li{% if message.tags %} class="{{ message.tags }}"{% endif %}>
{% if message.level == DEFAULT_MESSAGE_LEVELS.DEBUG %}
Debug:
{% elif message.level == DEFAULT_MESSAGE_LEVELS.INFO %}
Info:
{% elif message.level == DEFAULT_MESSAGE_LEVELS.SUCCESS %}
Success:
{% elif message.level == DEFAULT_MESSAGE_LEVELS.WARNING %}
Warning:
{% elif message.level == DEFAULT_MESSAGE_LEVELS.ERROR %}
<img src="{% static 'core/animal_buta_shock.png' %}" class="imgicon" alt="error" />
Error:
{% endif %}
{{ message }}
</li>
{% endfor %}
</ul>
{% endif %}
</header>
<div style="flex-grow: 1.8;"></div>
<main>
<h1>{% block header %}{% endblock %}</h1>
{% block body %}{% endblock %}
</main>
<div style="flex-grow: 1;"></div>
{% if START_BEFORE or END_BEFORE %}
<nav id="countdown-header">
<span id="countdown-text-pre"></span>
<span id="countdown"></span>
<span id="countdown-text-post"></span>
</nav>
setInterval(calculateTime, 1000)
</script>
{% block head_end %}{% endblock %}
</head>
<body>
<div style="margin: 0; padding: 0; height: 10rem;"></div>
<object class="deco27" style="height: 10rem;" data="{% static 'core/overcast.svg' %}" type="image/svg+xml"
role="presentation"></object>
<object class="deco27" style="max-height: 10rem;" data="{% static 'core/banner.svg' %}" type="image/svg+xml"
role="presentation"></object>
<header>
{% comment %} TODO: consider merging header and title {% endcomment %}
{% if messages %}
<ul class="messages">
{% for message in messages %}
<li{% if message.tags %} class="{{ message.tags }}"{% endif %}>
{% if message.level == DEFAULT_MESSAGE_LEVELS.DEBUG %}
Debug:
{% elif message.level == DEFAULT_MESSAGE_LEVELS.INFO %}
Info:
{% elif message.level == DEFAULT_MESSAGE_LEVELS.SUCCESS %}
Success:
{% elif message.level == DEFAULT_MESSAGE_LEVELS.WARNING %}
Warning:
{% elif message.level == DEFAULT_MESSAGE_LEVELS.ERROR %}
<img src="{% static 'core/animal_buta_shock.png' %}" class="imgicon" alt="error"/>
Error:
{% endif %}
{{ message }}
</li>
{% endfor %}
</ul>
{% endif %}
{% comment %} NOTE: (below) workaround for fixed positon {% endcomment %}
<div class="main-header" style="visibility: hidden;">
<div class="identity">
</header>
<div style="flex-grow: 1.8;"></div>
<main>
<h1>{% block header %}{% endblock %}</h1>
{% block body %}{% endblock %}
</main>
<div style="flex-grow: 1;"></div>
<nav id="countdown-header">
<span id="countdown-text-pre"></span>
<span id="countdown"></span>
<span id="countdown-text-post"></span>
</nav>
{% comment %} NOTE: (below) workaround for fixed position {% endcomment %}
<div class="main-header" style="visibility: hidden;">
<div class="identity">
{% if request.user.in_team %}
<span class="team-name">bodge</span>
<span class="team-name">bodge</span>
{% endif %}
<span class="username">bodge</span>
</div>
</div>
<nav id="main-header" class="main-header">
<div class="identity">
</div>
<nav id="main-header" class="main-header">
<div class="identity">
{% if request.user.in_team %}
{% if not request.user.team.solo %}
<span class="team-name">{{ request.user.team.name }}</span>
{% else %}
<span class="team-name">solo</span>
{% endif %}
{% if not request.user.team.solo %}
<span class="team-name">{{ request.user.team.name }}</span>
{% else %}
<span class="team-name">solo</span>
{% endif %}
{% endif %}
<span class="username">{{ request.user.username }}</span>
</div>
{% comment %} TODO: fa-light {% endcomment %}
<span class="actions">
</div>
{% comment %} TODO: fa-light {% endcomment %}
<span class="actions">
<a href="{% url 'index' %}">
<i class="fa-solid fa-house" aria-hidden="true"></i>
<span class="icon-alt">
{% translate "Home" %}
</span>
</a>
{% if request.user.is_staff %}
<a href="/admin">
<a href="/admin">
<i class="fa-solid fa-hammer" aria-hidden="true"></i>
<span class="icon-alt">
{% translate "Admin" %}
</span>
</a>
{% endif %}
{% if request.user.is_authenticated %}
<a href="{% url 'qr_current' %}" class="noicon">{% translate "current" %}</a>
<a href="{% url 'account_logout' %}">
<a href="{% url 'qr_current' %}" class="noicon">{% translate "current" %}</a>
<a href="{% url 'account_logout' %}">
<i class="fa-solid fa-right-from-bracket" aria-hidden="true"></i>
<span class="icon-alt">
{% translate "Logout" %}
</span>
</a>
{% else %}
<a href="{% url 'oauth_login' %}">
<a href="{% url 'oauth_login' %}">
<i class="fa-solid fa-right-to-bracket" aria-hidden="true"></i>
<span class="icon-alt">
{% translate "Login" %}
</span>
</a>
{% endif %}
</span>
</nav>
</body>
</nav>
</body>
</html>

0 comments on commit cba5686

Please sign in to comment.