mirror of
https://github.com/Xevion/trivia.git
synced 2025-12-09 14:08:58 -06:00
update client to duplicate original project layout, basic button toggle figured out
This commit is contained in:
Xevion
62
trivia/static/script.js
Normal file
62
trivia/static/script.js
Normal file
@@ -0,0 +1,62 @@
|
||||
// Client Constants
|
||||
const SCROLL_INTERVAL = 1500;
|
||||
const AUTOREFRESH_INTERVAL = 3000;
|
||||
|
||||
// Client Variables
|
||||
let AUTOSCROLL = false;
|
||||
let AUTOREFRESH = false;
|
||||
|
||||
// Client Timeouts
|
||||
let SCROLL_TIMEOUT;
|
||||
let REFRESH_TIMEOUT;
|
||||
|
||||
// Scroll table once.
|
||||
function ScrollOnce(autoscroll) {
|
||||
// If autoscroll has been disabled in between timer, this if statement will prevent it from executing.
|
||||
if (AUTOSCROLL)
|
||||
$(".team-row:first").appendTo("tbody")
|
||||
|
||||
// Restart autoscroll as needed.
|
||||
if (autoscroll && AUTOSCROLL) {
|
||||
setTimeout(function () {
|
||||
ScrollOnce(true)
|
||||
}, SCROLL_INTERVAL)
|
||||
}
|
||||
}
|
||||
|
||||
function ToggleAutoscroll() {
|
||||
AUTOSCROLL = !AUTOSCROLL;
|
||||
|
||||
if (AUTOSCROLL) {
|
||||
$(".js-scroll-row-start").hide();
|
||||
$(".js-scroll-row-stop").show();
|
||||
} else {
|
||||
$(".js-scroll-row-start").show();
|
||||
$(".js-scroll-row-stop").hide();
|
||||
}
|
||||
}
|
||||
|
||||
function ToggleAutorefresh() {
|
||||
AUTOREFRESH = !AUTOREFRESH;
|
||||
|
||||
if (AUTOREFRESH) {
|
||||
$(".js-refresh-start").hide();
|
||||
$(".js-refresh-stop").show();
|
||||
} else {
|
||||
$(".js-refresh-start").show();
|
||||
$(".js-refresh-stop").hide();
|
||||
}
|
||||
}
|
||||
|
||||
// Client Initialization
|
||||
$().ready(function () {
|
||||
// Setup all click functions
|
||||
$(".js-scroll-row-start").on("click", ToggleAutoscroll);
|
||||
$(".js-scroll-row-stop").on("click", ToggleAutoscroll);
|
||||
|
||||
$(".js-refresh-start").on("click", ToggleAutorefresh);
|
||||
$(".js-refresh-stop").on("click", ToggleAutorefresh).addClass("pointer");
|
||||
|
||||
ToggleAutoscroll()
|
||||
ToggleAutorefresh()
|
||||
})
|
||||
@@ -1,58 +1,60 @@
|
||||
table {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
html { overflow-y: scroll; }
|
||||
body { font-family: Calibri, Arial, sans-serif; margin: 0; padding: 0; position: relative; }
|
||||
* { box-sizing: border-box; }
|
||||
|
||||
.controls { float: right; font-size: 80%; padding-top: 0.25em; }
|
||||
.score-total { border-right: 1px dashed #333; font-weight: bold; }
|
||||
.score-team-name { position: relative; }
|
||||
.score-team-name span { left: 0; overflow: hidden; position: absolute; top: 0.25em; text-overflow: ellipsis; white-space: nowrap; width: 100%; }
|
||||
.score-team-name:before { content: " "; visibility: hidden; }
|
||||
|
||||
/* Projector View */
|
||||
.ui-content { font-size: 300%; padding: 0.25em 0; }
|
||||
tr[data-row-index="0"] td { border-top: 0.25em solid #000; }
|
||||
|
||||
.ui-header { background-color: #b51329; border-bottom: 2px solid #27233a; color: #fff; padding: 0.5em 1em; }
|
||||
.ui-content { padding: 0.5em 1em; }
|
||||
.ui-footer { }
|
||||
|
||||
.center { text-align: center; }
|
||||
.pointer { cursor: pointer; }
|
||||
.right { text-align: right; }
|
||||
.small-no-wrap { white-space: nowrap; width: 1%; }
|
||||
|
||||
.callout { border: 1px solid transparent; margin-bottom: 0.5em; padding: 0.5em; }
|
||||
.callout { background-color: #d9edf7; border-color: #bce8f1; color: #333; }
|
||||
.callout-danger { background-color: #fcc; border-color: #e55; }
|
||||
.callout-warning { background-color: #ffa; border-color: #e9e925; }
|
||||
.callout-success { background-color: #dfd; border-color: #5e5; }
|
||||
.callout-critical { background-color: #e68fe6; border-color: #cc2ecc; }
|
||||
|
||||
.table { margin-bottom: 0.5em; width: 100%; }
|
||||
.table td { border-top: 1px solid #ddd; padding: 0.25em 0.5em; vertical-align: middle; }
|
||||
.table thead td, .thead td { border-bottom: 2px solid #ddd; font-weight: bold; vertical-align: bottom; }
|
||||
.table-striped { }
|
||||
.table-striped > tbody > tr:nth-child(odd) { background-color: #f0f0f0; }
|
||||
.table-striped > tbody > tr.has-warning:nth-child(odd) { background-color: #faf2cc; border-color: #f8e5be; }
|
||||
.table-hover > tbody > tr:hover { background-color: #e0e0e0; } /* hover needs to come after striped so that striped rows have hover */
|
||||
.table-hover > tbody > tr.has-warning:hover, .table-hover > tbody > tr.has-warning-hover:hover { background-color: #f8edb5; border-color: #f6e79d; }
|
||||
|
||||
.ui-header {
|
||||
background-color: #b51329;
|
||||
border-bottom: 2px solid #27233a;
|
||||
color: #fff;
|
||||
padding: 0.5em 1em;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
.controls {
|
||||
float: right;
|
||||
font-size: 80%;
|
||||
padding-top: 0.25em;
|
||||
}
|
||||
|
||||
th, td {
|
||||
font-family: Calibri, serif;
|
||||
font-size: large;
|
||||
font-weight: bold;
|
||||
/*padding: 5px;*/
|
||||
text-align: left;
|
||||
.ui-content {
|
||||
padding: 0.5em 1em;
|
||||
}
|
||||
|
||||
thead {
|
||||
background-color: #333;
|
||||
color: #f6f6f6;
|
||||
}
|
||||
|
||||
tbody tr:nth-child(even) {
|
||||
background-color: #DDD;
|
||||
}
|
||||
|
||||
th {
|
||||
padding-left: 1rem;
|
||||
}
|
||||
|
||||
th, td {
|
||||
font-size: 300%;
|
||||
padding-left: 1rem;
|
||||
width: 1rem;
|
||||
}
|
||||
|
||||
.team-silent {
|
||||
font-style: italic;
|
||||
color: #676767;
|
||||
}
|
||||
|
||||
th, td > div {
|
||||
height: 10%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
th, td {
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
.topnav {
|
||||
overflow: hidden;
|
||||
.small-no-wrap {
|
||||
white-space: nowrap;
|
||||
width: 1%;
|
||||
}
|
||||
@@ -1,64 +1,62 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<link rel="stylesheet" type="text/css" href="../static/style.css"/>
|
||||
<meta charset="UTF-8">
|
||||
<title>Index</title>
|
||||
<link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
|
||||
<script src="https://code.jquery.com/jquery-3.5.1.min.js"
|
||||
integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
|
||||
<script>window.jQuery || document.write('<script src="{{
|
||||
<head>
|
||||
<link rel="stylesheet" type="text/css" href="../static/style.css"/>
|
||||
<meta charset="UTF-8">
|
||||
<title>EfTA Trivia Night Scores</title>
|
||||
<link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
|
||||
<script src="https://code.jquery.com/jquery-3.5.1.min.js"
|
||||
integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
|
||||
<script>window.jQuery || document.write('<script src="{{
|
||||
url_for('static', filename='jquery.js') }}">\x3C/script>')</script>
|
||||
</head>
|
||||
<body>
|
||||
<div class="topnav" style="height: 1.5rem; float: right">
|
||||
<a class="toggle-autoscroll">Disable Autoscroll</a>
|
||||
<a class="toggle-autorefresh">Enable Autorefresh</a>
|
||||
</div>
|
||||
<div>
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Rank</th>
|
||||
<th>ID</th>
|
||||
<th>Team Name</th>
|
||||
{% for i in range(scoreCount) %}
|
||||
<th>{{ i + 1 }}</th>
|
||||
{% endfor %}
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{% for team in teams %}
|
||||
<tr class="team-row">
|
||||
<td>{{ range(1, teams | length) | random }}</td>
|
||||
<td>{{ team.id }}</td>
|
||||
{% if team.name | length > 0 %}
|
||||
<td>{{ team.name }}</td>
|
||||
{% else %}
|
||||
<td class="team-silent">Team {{ team.id }}</td>
|
||||
{% endif %}
|
||||
{% for score in team.scores %}
|
||||
<td>{{ score }}</td>
|
||||
</head>
|
||||
<body>
|
||||
<header class="ui-header">
|
||||
<span class="ui-header-title">
|
||||
EfTA Trivia Night
|
||||
</span>
|
||||
<span class="controls pointer">
|
||||
<span class="js-scroll-row">Scroll</span>
|
||||
<span class="js-scroll-row-start">Start</span>
|
||||
<span class="js-scroll-row-stop">Stop</span>
|
||||
|
|
||||
<span class="js-refresh">Refresh</span>
|
||||
<span class="js-refresh-start">Start</span>
|
||||
<span class="js-refresh-stop">Stop</span>
|
||||
<span class="js-refresh-count"></span>
|
||||
</span>
|
||||
</header>
|
||||
<div class="ui-content">
|
||||
<table class="table table-hover table-striped">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Rank</th>
|
||||
<th>ID</th>
|
||||
<th>Team Name</th>
|
||||
{% for i in range(scoreCount) %}
|
||||
<th>{{ i + 1 }}</th>
|
||||
{% endfor %}
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="js-standings">
|
||||
{% for team in teams %}
|
||||
<tr class="ui-row" data-row-index="{{ team.id }}">
|
||||
<td>?</td>
|
||||
<td>{{ team.id }}</td>
|
||||
{% if team.name | length > 0 %}
|
||||
<td>{{ team.name }}</td>
|
||||
{% else %}
|
||||
<td class="ui-silent-row">Team {{ team.id }}</td>
|
||||
{% endif %}
|
||||
{% for score in team.scores %}
|
||||
<td>{{ score }}</td>
|
||||
{% endfor %}
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</body>
|
||||
<script>
|
||||
SCROLL_INTERVAL = 1500;
|
||||
|
||||
function ScrollOnce(autoscroll) {
|
||||
$(".team-row:first").appendTo("tbody")
|
||||
|
||||
if (autoscroll) {
|
||||
setTimeout(function () {
|
||||
ScrollOnce(true)
|
||||
}, SCROLL_INTERVAL)
|
||||
}
|
||||
}
|
||||
|
||||
ScrollOnce(true);
|
||||
</script>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<footer class="ui-footer"></footer>
|
||||
</body>
|
||||
<script src="{{ url_for('static', filename='script.js') }}"></script>
|
||||
</html>
|
||||
Reference in New Issue
Block a user