init

2024-08-16 19:28:51 +02:00
commit 9d75757fec
20 changed files with 287594 additions and 0 deletions
--- a/app/templates/index.html
+++ b/app/templates/index.html
@@ -0,0 +1,142 @@
+<!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>