Collaborama About Help Contact Anonymous [login] Source: site.view [edit] Function name: home2 Arguments: Description: Page type: html Render function: Module: sportstreak Page source: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Sports Streak</title> <style> body { margin: 0; padding: 0; font-family: Arial, sans-serif; display: flex; flex-direction: column; /* stack items vertically */ justify-content: center; /* Center horizontally */ align-items: center; /* Center vertically */ height: 100vh; background: #000; /* fallback color */ } .main-container { display: flex; flex-direction: column; /* stack items vertically */ align-items: center; /* Center items horizontally */ } .background-wrapper { width: 400px; /* fixed width for the background image */ height: 800px; /* fixed height of the background image */ background: url('/images/ss-instructions.jpg') no-repeat top center; background-size: cover; position: relative; margin-bottom: 20px; /* space between background and download buttons */ } .container { text-align: center; width: 80%; max-width: 300px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); margin-top: 0px; /* initial margin-top value */ } .play-button { background: #FFD700; border: none; border-radius: 50px; /* significantly rounded corners */ padding: 36px 100px; /* larger padding */ font-size: 36px; /* larger font size */ font-weight: bold; /* make the font bold */ cursor: pointer; margin-bottom: 20px; display: none; } .image-container-wrapper { display: none; /* initially hide the wrapper */ } .image-container { width: 130px; height: 185px; top: 130px; background-color: #fff; /* for visualization */ border: 1px solid #000; display: inline-block; position: absolute; cursor: pointer; /* Make the container look clickable */ } #img-player1 { left: 30px; /* position 30px from the left */ top: 525px; display: none; } #img-player2 { right: 30px; /* position 30px from the right */ top: 525px; display: none; } .label { display: none; margin-top: 5px; font-weight: bold; color: #FFF; } .question { font-size: 24px; margin-bottom: 120px; position: absolute; width: 100%; color: #FFF; top: 0px; /* move the question to the same position as the play button */ } .scores { position: absolute; top: 290px; /* initial position from the top */ font-size: 48px; /* bigger font size */ background: #fff; /* white background */ color: #000; /* black font color */ border-radius: 5px; } #today { left: 18px; /* position from the left */ padding: 5px 10px; /* reduced vertical padding */ } #total { right: 18px; /* position from the right */ padding: 5px 10px; /* reduced vertical padding */ } #timer { left: 170px; /* position from the right */ font-weight: bold; font-size: 64px; padding: 0px 10px; } .download-buttons { display: flex; justify-content: center; align-items: center; margin-top: 20px; } .download-buttons img { width: 120px; margin: 0 10px; /* space between the buttons */ } .top-message, .bottom-message { position: absolute; width: 100%; text-align: center; font-size: 30px; /* large text size */ color: #FFF; /* white text color */ display: none; padding: 0 20px; /* horizontal padding for bigger spacing */ box-sizing: border-box; } .top-message { top: 250px; /* position 200px from the top */ } .bottom-message { top: 450px; /* position 600px from the top */ } .hidden { display: none; } #videoPane { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); background-color: rgba(0, 0, 0, 0.8); padding: 20px; border-radius: 10px; z-index: 1000; } </style> </head> <body> <script src="https://cdn.jsdelivr.net/npm/annyang@2.6.1/dist/annyang.min.js"></script> <div class="main-container"> <div class="background-wrapper" id="background-wrapper"> <div class="container" id="main-container"> <button class="play-button" id="play-button" style="position: absolute; left: 4px; top: 5px;" onclick="switchBackground('game','true')">PLAY</button> <button class="play-button" id="share-button" style="position: absolute; left: 4px; top: 190px;" onclick="share()">SHARE</button> <button class="play-button" id="next-button" style="position: absolute; left: 4px; top: 225px; padding: 0px 100px;" >NEXT</button> <div class="image-container-wrapper" id="image-container-wrapper"> <div class="question" id="question">WHO IS YOUR FAVORITE PLAYER</div> </div> </div> <div class="image-container" id="img-player1" onclick="playerClicked('1')"></div> <div class="image-container" id="img-player2" onclick="playerClicked('2')"></div> <div class="label" id="p1Name" style="position: absolute; left: 30px; top: 740px;">Player 1</div> <div class="label" id="p2Name" style="position: absolute; right: 30px; top: 740px;">Player 2</div> <div id="today" class="scores">0 0</div> <div id="timer" class="scores">1 0</div> <div id="total" class="scores">0 0</div> <div id="videoPane" class="hidden"> <video id="video" width="600" controls> <source id="videoSource" src="/images/swish.mp4" type="video/mp4"> Your browser does not support the video tag. </video> </div> <div class="top-message" id="topmsg">Top</div> <div class="bottom-message" id="bottommsg">Bottom</div> </div> <div class="download-buttons"> <a href="#"><img src="/images/google-button.png" alt="Google Play" onclick="clearToday()"></a> <a href="#"><img src="/images/apple-button.png" alt="App Store"></a> </div> </div> <script> var round = 0; var total = 10; var whoWon = ''; var dt = ''; var p1Name = ''; var p2Name = ''; var p1Stat = 0; var p2Stat = 0; var stat = ''; var timeLeft = 10; var countdown; var currentListener = null; var ttsMsg = ''; var today; var yesterday; var todayCookie; var yesterdayCookie; var sssession = ""; const timerElement = document.getElementById('timer'); const videoPane = document.getElementById('videoPane'); const video = document.getElementById('video'); const videoSource = document.getElementById('videoSource'); const rightMessages = [ "Right!", "Correct!", "Yup!", "Swish!", "Nailed it!" ]; const wrongMessages = [ "Bonk!", "Sorry.", "Fail.", "Airball!", "Oops!" ]; // Function to get a random message from the array function getRandomMessage(messages) { const randomIndex = Math.floor(Math.random() * messages.length); return messages[randomIndex]; } function tts(text) { const utterance = new SpeechSynthesisUtterance(text); utterance.lang = 'en-US'; window.speechSynthesis.speak(utterance); } function getScoreString(num) { let ones = num % 10; let tens = Math.floor(num / 10); tens = tens % 10; return tens + " " + ones; } // Function to get the value of a specific cookie by name // If none found, returns "" function getCookie(name) { let cookieArray = document.cookie.split(';'); for(let i = 0; i < cookieArray.length; i++) { let cookie = cookieArray[i]; while (cookie.charAt(0) == ' ') { cookie = cookie.substring(1); } if (cookie.indexOf(name + '=') == 0) { return cookie.substring(name.length + 1, cookie.length); } } return ""; } // Function to set a cookie function setCookie(name, value, expiryDays) { let date = new Date(); date.setTime(date.getTime() + (expiryDays*24*60*60*1000)); let expires = "expires=" + date.toUTCString(); document.cookie = name + "=" + value + ";" + expires + ";path=/"; } function deleteCookie(name) { document.cookie = name + '=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;'; } // Return just the date, in format 12/31/2023 function formatDate(date) { let year = date.getFullYear(); let month = date.getMonth() + 1; // getMonth() is zero-indexed let day = date.getDate(); return `${month.toString().padStart(2, '0')}/${day.toString().padStart(2, '0')}/${year}`; } function copyStringToClipboard(str) { // Create a new text area var textArea = document.createElement("textarea"); textArea.value = str; // Make sure it's not visible textArea.style.position = 'fixed'; textArea.style.left = '-9999px'; textArea.style.top = '-9999px'; document.body.appendChild(textArea); textArea.focus(); textArea.select(); var ret = true; // Copy the text try { document.execCommand('copy'); } catch (err) { console.error('Unable to copy to clipboard', err); ret = false; } // Remove the text area document.body.removeChild(textArea); return ret; } // Copies the link to a clipboard to share function share() { let url = "http://sports-streak.com/dispatch-share.html?redirect=" + btoa('{ "round":' + round + ', "total": ' + total + ', "date": "' + today + '" }'); if (copyStringToClipboard(url)) { alert("A link was copied to your clipboard that you can share with friends to show off your great score!"); } } function updateScores() { document.getElementById('today').textContent = getScoreString(round); document.getElementById('total').textContent = getScoreString(total); } function handleClick(wonRound) { if (wonRound) { switchBackground('game', 'false'); } else { switchBackground('end', 'false'); } } function showVideo(videoName) { // Change the source of the video videoSource.src = videoName; // Update this with the new video file path // Load the new video video.load(); // Show the video pane videoPane.classList.remove('hidden'); // Play the video video.play(); // Add multiple event listeners for robustness const closeVideoPane = () => { videoPane.classList.add('hidden'); video.currentTime = 0; // Reset video time if (ttsMsg != '') { tts(ttsMsg); ttsMsg = ''; } }; video.addEventListener('ended', closeVideoPane); video.addEventListener('pause', () => { if (video.currentTime === video.duration) { closeVideoPane(); } }); // For iPhone specific handling, close the pane on 'timeupdate' if the video has ended video.addEventListener('timeupdate', () => { if (video.currentTime >= video.duration) { closeVideoPane(); } }); } async function nextQuestion() { updateScores(); try { var url = 'https://sports-streak.com/site/api'; if (dt != '') { url = url + ":" + dt + "," + round } const response = await fetch(url); if (!response.ok) { throw new Error('Network response was not ok'); } const data = await response.json(); console.log(data); document.getElementById('question').textContent = data.preQuestion + " " + data.stat + "?"; document.getElementById('img-player1').innerHTML = "<img width='130' height='184' src='" + data.p1Image + "'>"; document.getElementById('img-player2').innerHTML = "<img width='130' height='184' src='" + data.p2Image + "'>"; document.getElementById('p1Name').innerHTML = data.p1Name; document.getElementById('p2Name').innerHTML = data.p2Name; whoWon = data.whoWon; dt = data.date; p1Name = data.p1Name; p2Name = data.p2Name; p1Stat = data.p1Stat; p2Stat = data.p2Stat; stat = data.stat; timeLeft = 10; countdown = setInterval(() => { if (timeLeft <= 1) { clearInterval(countdown); timerElement.textContent = getScoreString(0); handleClick(false); } else { if (timeLeft < 5) timerElement.style.color = "#FF0000"; else timerElement.style.color = "#000000"; timeLeft--; timerElement.textContent = getScoreString(timeLeft); } }, 1000); // Process the data as needed } catch (error) { console.error('There has been a problem with your fetch operation:', error); } } function switchBackground(scene, wonRound) { // Remove the previous listener if it exists if (currentListener) { document.getElementById('question').removeEventListener('click', currentListener); document.getElementById('next-button').removeEventListener('click', currentListener); currentListener = null; } if (scene == "game") { document.getElementById('timer').style.display = 'block'; document.getElementById('background-wrapper').style.backgroundImage = "url('http://sports-streak.com/images/ss-game.jpg')"; document.getElementById('play-button').style.display = 'none'; document.getElementById('share-button').style.display = 'none'; document.getElementById('next-button').style.display = 'none'; document.getElementById('img-player1').style.display = 'block'; document.getElementById('img-player2').style.display = 'block'; document.getElementById('p1Name').style.display = 'block'; document.getElementById('p2Name').style.display = 'block'; document.getElementById('today').style.top = '49px'; document.getElementById('timer').style.top = '43px'; document.getElementById('total').style.top = '49px'; document.getElementById('image-container-wrapper').style.display = 'block'; nextQuestion(); } if (scene == "results") { clearInterval(countdown); if (wonRound) { showVideo("/images/swish.mp4"); } else { showVideo("/images/clunk.mp4"); } var msg = ""; document.getElementById('background-wrapper').style.backgroundImage = "url('http://sports-streak.com/images/ss-results.jpg')"; document.getElementById('question').style.display = 'none'; document.getElementById('share-button').style.display = 'none'; document.getElementById('next-button').style.display = 'block'; document.getElementById('question').style.cursor = 'pointer'; if (wonRound) { round = round + 1; total = total + 1; updateScores(); msg = getRandomMessage(rightMessages); } else { if (timeLeft > 0) msg = getRandomMessage(wrongMessages); else msg = "Time Expired."; // remember today's score setCookie("ss" + today, btoa('{ "round":' + round + ', "total": ' + total + " }"), 90); }; let stats = ttsMsg = msg + " " + stat + ": " + p1Name + " " + p1Stat + ". " + p2Name + " " + p2Stat + "."; document.getElementById('question').innerHTML = "<p>" + msg + "</p><p>" + stat + ":" + "</p>" + p1Name + ": " + p1Stat + "<br>" + p2Name + ": " + p2Stat; document.getElementById('question').style.display = 'block'; document.getElementById('img-player1').style.display = 'none'; document.getElementById('img-player2').style.display = 'none'; document.getElementById('p1Name').style.display = 'none'; document.getElementById('p2Name').style.display = 'none'; // Define the new listener currentListener = function() { handleClick(wonRound); }; // Add the new listener document.getElementById('question').addEventListener('click', currentListener); document.getElementById('next-button').addEventListener('click', currentListener); } if (scene == "end") { document.getElementById('background-wrapper').style.backgroundImage = "url('http://sports-streak.com/images/ss-end.jpg')"; document.getElementById('play-button').style.display = 'none'; document.getElementById('share-button').style.display = 'block'; document.getElementById('next-button').style.display = 'none'; document.getElementById('img-player1').style.display = 'none'; document.getElementById('img-player2').style.display = 'none'; document.getElementById('p1Name').style.display = 'none'; document.getElementById('p2Name').style.display = 'none'; document.getElementById('today').style.top = '49px'; document.getElementById('timer').style.top = '43px'; document.getElementById('total').style.top = '49px'; document.getElementById('image-container-wrapper').style.display = 'block'; document.getElementById('question').style.display = 'none'; document.getElementById('topmsg').style.display = 'block'; document.getElementById('bottommsg').style.display = 'block'; document.getElementById('topmsg').innerHTML = "<p><p>Nailed a " + round + "-point streak today, soaring to a total of " + total + "!"; document.getElementById('bottommsg').innerHTML = "Swing by tomorrow to up your game..."; } } function playerClicked(player) { var won = (player == whoWon || whoWon == "0"); switchBackground("results", won) } </script> </body> </html>