143 lines
5.5 KiB
HTML
143 lines
5.5 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Olympic Guessing Game</title>
|
|
<link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
|
|
<style>
|
|
div.entry {
|
|
padding: 0.4em 1em;
|
|
margin: 0.2em;
|
|
background-color: hsla(var(--gradient_hue), 100%, 50%, 0.2);
|
|
border-radius: 0.8em;
|
|
display: flex;
|
|
gap: 1em;
|
|
|
|
}
|
|
img.image {
|
|
height: 3em;
|
|
width: 4.5em;
|
|
object-fit: cover;
|
|
border: 0.1em solid white;
|
|
border-radius: 0.5em;
|
|
}
|
|
p.country_name {
|
|
width: 7em;
|
|
margin-top: auto;
|
|
margin-bottom: auto;
|
|
margin-left: 0px;
|
|
margin-right: 0px;
|
|
padding: 0px;
|
|
height: 100%;
|
|
box-sizing: border-box;
|
|
}
|
|
a.athlete {
|
|
margin: auto;
|
|
margin-left: 0px;
|
|
padding: 0px;
|
|
height: 100%;
|
|
box-sizing: border-box;
|
|
color: white;
|
|
}
|
|
button.state {
|
|
background-color: hsla(var(--gradient_hue), 100%, 50%, 0.1);
|
|
border: 0.2em solid hsl(var(--gradient_hue), 100%, 50%);
|
|
border-radius: 0.8em;
|
|
color: white;
|
|
padding: 0.5em;
|
|
margin: 0.6em 0px;
|
|
}
|
|
</style>
|
|
<script>
|
|
|
|
let lastAnswer = "";
|
|
|
|
function fetchDiscipline() {
|
|
fetch('/get_random_discipline')
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
const participantsList = document.getElementById('participants-list');
|
|
participantsList.innerHTML = '';
|
|
data.participants.forEach(participant => {
|
|
const entry = document.createElement('div');
|
|
|
|
const img = document.createElement('img');
|
|
img.src = participant.country_img_url;
|
|
img.setAttribute("class", "image");
|
|
entry.appendChild(img);
|
|
|
|
const p = document.createElement('p');
|
|
p.textContent = participant.country_name;
|
|
p.setAttribute("class", "country_name");
|
|
entry.appendChild(p);
|
|
|
|
if (participant.athlete_name) {
|
|
const athlete = document.createElement('a');
|
|
athlete.textContent = participant.athlete_name;
|
|
athlete.setAttribute("class", "athlete");
|
|
athlete.style.display = "None";
|
|
athlete.setAttribute("href", participant.athlete_meta_url);
|
|
athlete.setAttribute("target", "_blank");
|
|
entry.appendChild(athlete);
|
|
img.setAttribute('athlete_img', participant.athlete_img_url)
|
|
}
|
|
|
|
entry.setAttribute("class", "entry");
|
|
participantsList.appendChild(entry);
|
|
});
|
|
|
|
try { // if it is a team sport
|
|
const athletes = document.getElementsByClassName("athlete");
|
|
atletes.forEach(athlete => athlete.style.display = 'None');
|
|
} catch { }
|
|
|
|
|
|
document.getElementById('reveal').style.display = 'none';
|
|
document.getElementById('reveal').textContent = data.answer;
|
|
document.getElementById('reveal-wrapper').style.display = 'none';
|
|
document.getElementById('reveal-button').style.display = 'block';
|
|
document.getElementById('next-button').style.display = 'none';
|
|
|
|
var root = document.querySelector(':root')
|
|
var r_int = (Math.floor(Math.random() * 250) + 145) % 360
|
|
root.style.setProperty('--gradient_hue', r_int);
|
|
root.style.setProperty('--gradient_hue2', (r_int + 20 ) % 360 );
|
|
});
|
|
}
|
|
|
|
function revealAnswer() {
|
|
document.getElementById('reveal').style.display = 'block';
|
|
document.getElementById('reveal-wrapper').style.display = 'block';
|
|
|
|
// Now show the athletes' names if available
|
|
const participantsList = document.getElementById('participants-list');
|
|
Array.from(participantsList.children).forEach(entry => {
|
|
const athlete = entry.querySelector('a.athlete');
|
|
if (athlete) {
|
|
const img = entry.querySelector('img');
|
|
img.setAttribute("src", img.getAttribute("athlete_img"));
|
|
athlete.style.display = "Block";
|
|
}
|
|
});
|
|
|
|
document.getElementById('reveal-button').style.display = 'none';
|
|
document.getElementById('next-button').style.display = 'block';
|
|
}
|
|
|
|
window.onload = fetchDiscipline;
|
|
</script>
|
|
</head>
|
|
<body>
|
|
<h1 style="margin: 0.1em auto;">Guess the Olympic Discipline</h1>
|
|
<div id="participants-list">
|
|
<!-- Participants -->
|
|
</div>
|
|
<button class="state" id="reveal-button" onclick="revealAnswer()">Reveal Answer</button>
|
|
<button class="state" id="next-button" style="display:none;" onclick="fetchDiscipline()">Next</button>
|
|
<blockquote id="reveal-wrapper" style="display:none;">
|
|
<p id="reveal" style="display:none;"></p>
|
|
</blockquote>
|
|
</body>
|
|
</html>
|