• Create Project
  • Search for People
  • Play Skillsrank
  • Saved Favorites
  • Community Friends
  • Activity Log
  • Developer Console
  • Programming Help
  • Advanced Topics
  • Internal API
  • WebScript Guide
  • What's Popular
  • Search by Tags
    •  
    Source: site.view [edit]
    Function name: home
    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>
    <script type="text/javascript">

        var gQData = null;        // Question Data
        var gUData = null;        // User Data

        // 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=/";
        }


        // 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 to call the web service
        // Data returned as a json object
        async function fetchWebService(url) {
           try {
             // Make the network request
             const response = await fetch(url);

             // Check if the request was successful
             if (!response.ok) {
                throw new Error(`HTTP error! status: ${response.status}`);
             }

             // Get the response
             const data = await response.text();

             // Return the data
             return  JSON.parse(data);
           } catch (error) {
              console.error('Error fetching data: ', error);
           }
        }





        var round = 0;
        var total = 0;
        var today;
        var yesterday;
        var todayCookie;
        var yesterdayCookie;
        var sssession = "";


        function updateUserData() {
           console.log("userdata: " + JSON.stringify(gUData));

           fetchWebService("https://sports-streak.com/site/updateSessionData:" + sssession + "," + today + "," + round.toString() + "," + total.toString()).then(data => {
              console.log("UpdateSessionData: " + JSON.stringify(data));
           });
        }



        // Call the API to get a player comparison question, using today's date and the round number.
        // Updates the key items on the page to display the question.
        function getSportsQuestion() {
            document.getElementById("today").innerText = "Today: " + round;
            document.getElementById("total").innerText = "Total: " + total;           

            // Call the function and handle the response
            fetchWebService("/webl/WubHub_DoIt?cmdline=sportstreak.api:" + today + "," + round.toString()).then(data => {
               // The variable 'data' now holds the response from the web service              
                
               document.getElementById("question").innerText = (round+1).toString() + ". " + data.preQuestion + data.stat + "?";
               document.getElementById("p1Name").innerText = data.p1Name;
               document.getElementById("p1Image").src = data.p1Image;
               document.getElementById("p2Name").innerText = data.p2Name;
               document.getElementById("p2Image").src = data.p2Image;

               // Copy the data to a global variable so other functions can easily access
               gQData = JSON.parse(JSON.stringify(data));

             });
        }



        // aOrB: which player is the answer for the question
        // If the user is right, the streak continues
        // Update the display
        function checkAnswer(aOrB) {

           document.getElementById("stat").innerText = gQData.stat + ":";
           document.getElementById("p1Details").innerText = gQData.p1Name + " (" + gQData.p1Stat + ")";
           document.getElementById("p2Details").innerText = gQData.p2Name + " (" + gQData.p2Stat + ")";

           if ((aOrB == gQData.whoWon) || (gQData.whoWon == "0")) {
              document.getElementById("result").innerText = "Correct!"
              round = round + 1;
              total = total + 1;
              getSportsQuestion();
           } else {
              document.getElementById("result").innerText = "Today's streak is finished.";
              document.getElementById("p1Details").href = gQData.p1Ref;
              document.getElementById("p2Details").href = gQData.p2Ref;
  
              // Clear all the player displays
              document.getElementById("question").innerHTML = "";
              document.getElementById("p1Image").src = "";
              document.getElementById("p2Image").src = "";
              document.getElementById("p1Image").style.display = 'none';
              document.getElementById("p2Image").style.display = 'none';
              document.getElementById("p1Name").style.display = 'none';
              document.getElementById("p2Name").style.display = 'none';
              document.getElementById("shareBtn").style.display = 'inline-block';     


              setCookie("ss" + today, btoa('{ "round":' + round + ', "total": ' + total + " }"), 90);
              if (gUData != null) {
                  updateUserData();
              }
           }
        }

        // Loads the cookies from today and yesterday.  If yesterday exists, starts total count from then.
        // If today already exists, don't allow playing game, just display a message.
        function onLoad() {
           round = 0;
           total = 0;

           sssession = getCookie("sssession");

           if (sssession != "") {
              fetchWebService("https://sports-streak.com/site/getSessionData:" + sssession).then(data => {
 
                 // Copy the user data to a global variable so other functions can easily access
                 gUData = JSON.parse(JSON.stringify(data));

                 if ('name' in data) {
                    document.getElementById("login").innerText = data.name;
                    console.log("Logged in: " + JSON.stringify(data));
                 } else {
                   console.log("Login not found: " + sssession);
                 }
              });
           }

           today = formatDate(new Date());   // as formatted string  eg 11/31/2023
           yesterday = formatDate(new Date(new Date().getTime() - 86400000));

           yesterdayCookie = getCookie("ss" + yesterday);
           if (yesterdayCookie != "")
              yesterdayCookie = JSON.parse( atob( yesterdayCookie ) );
           else {
              yesterdayCookie = {}
           }

           if ("total" in yesterdayCookie) {
              total = yesterdayCookie.total
           }

           todayCookie = getCookie("ss" + today);
           if (todayCookie != "")
              todayCookie = JSON.parse( atob( todayCookie ) );
           else {
              todayCookie = {}
           }

           // If we already played today, update screen but don't allow play
           if ("total" in todayCookie) {
              round = todayCookie.round;
              total = todayCookie.total;

              document.getElementById("p1Name").style.display = 'none';
              document.getElementById("p2Name").style.display = 'none';
              document.getElementById("result").innerText = "On " + today + ", you got " + round + " questions right, bringing your total streak to " + total;
              document.getElementById("today").innerText = "Today: " + round;
              document.getElementById("total").innerText = "Total: " + total;      
              document.getElementById("shareBtn").style.display = 'inline-block';     

           } 
           else {
              // hide the share button until the game is finished, then start the game...
              document.getElementById("shareBtn").style.display = 'none';
              getSportsQuestion()
           }           
        }

        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!");
           }
        }

    </script>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        header, footer {
            background-color: #f4f4f4;
            text-align: center;
            padding: 5px 0;
        }
        main {
            padding: 10px;
            text-align: center;
        }
        .login {
           display: flex;
           justify-content: flex-end;
        }
        .question p {
            font-size: 1.2em;
        }
        .options {
            display: flex;
            justify-content: space-around;
            margin: 10px 0;
        }
        .option {
            text-align: center;
        }
        .streak {
            text-align: center;
            font-size: 1.5em;
            margin: 12px 0;
        }
        .result {
            font-size: 2em;
            margin: 20px 0;
        }
        .option img {
            width: 100px;
            height: auto;
        }
        .feedback {
            margin-top: 20px;
        }
        .pButton {
            padding: 10px;
            margin: 10px;
            background-color: #007bff;
            color: white;
            border: none;
            cursor: pointer;
        }
        button {
            padding: 10px;
            margin: 10px;
            background-color: #007bff;
            color: white;
            border: none;
            cursor: pointer;
            font-size: 1.2em;
        }
        #stat {
            font-weight: bold;
        }
        button:hover {
            background-color: #0056b3;
        }
        footer p {
            font-size: 0.8em;
        }
    </style>
</head>


<body onload="onLoad()">
    <header>
        <section class="options">
           <div class="option"></div>
           <div class="option">
              <a id="login" class="login" href="https://sports-streak.com/site/login">Login</a>
           </div>
        </section>
            <div id="title">
                <img width=250 src="https://sports-streak.com/images/ss-logo.png">
            </div>
        <section class="options">
            <div class="option">
               <p id="today" class="streak">Today: </p>
            </div>
            <div class="option">
               <p id="total" class="streak">Total: </p>
            </div>
        </section>
    </header>
    <main>
        <section class="question">
            <p id="question"></p>
        </section>
        <section class="options">
            <div class="option">
                <img id="p1Image"><br>
                <a class="pButton"  onclick="checkAnswer('1')" id="p1Name">Player1</a>
            </div>
            <div class="option">
                <img id="p2Image"></img><br>
                <a class="pButton" onclick="checkAnswer('2')" id="p2Name">Player2</a>
            </div>
        </section>
        <section class="feedback">
            <p class="result" id="result"></p>
            <p class="stat" id="stat"><p>
               <a target="_blank" id="p1Details"></a><br>
               <a target="_blank" id="p2Details"></a>
        </section>
        <section class="feedback">
            <button id="shareBtn" onclick="share()">Share</button>
        </section>
    </main>
    <footer>
        <p>Game Instructions: Choose the correct answer to the question.
               Keep your streak going as long as you can.  Come back tomorrow
               to keep adding to your total streak (skipping a day resets it to 0).</p>
        <p>Copyright (c) 2024 by 52 Productions, Inc.  All rights reserved.</p>
    </footer>
</body>
</html>