Display current team score on the website

4 files changed, 46 insertions, 3 deletions

diff --git a/hosted/access.html b/hosted/access.html
index 11e1fe5..2279fc9 100644
--- a/hosted/access.html
+++ b/hosted/access.html
@@ -6,6 +6,7 @@
         <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.11/handlebars.min.js"></script>
         <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
         <script type="text/javascript" src="/files/logout.js"></script>
+        <script type="text/javascript" src="/files/stats.js"></script>
         <style type="text/css">
             body {
                 overflow-y: scroll;
@@ -30,7 +31,16 @@
                         <a class="nav-link" href="/challenges">Challenges</a>
                     </li>
                 </ul>
-                <button class="btn btn-outline-danger my-2 my-sm-0" onclick="logoutThenRedirect()">Logout</button>
+                <div class="btn-toolbar" role="toolbar">
+                    <div class="btn-group mr-2" role="group">
+                        <button type="button" class="btn btn-primary">
+                            <span class="badge badge-light" id="_teamScore">0</span> Points
+                        </button>
+                    </div>
+                    <div class="btn-group mr-2" role="group">
+                        <button class="btn btn-outline-danger my-2 my-sm-0" onclick="logoutThenRedirect()">Logout</button>
+                    </div>
+                </div>
             </div>
         </nav>
         <main class="container" role="main">
diff --git a/hosted/challenges.html b/hosted/challenges.html
index 6267ab7..d3766fe 100644
--- a/hosted/challenges.html
+++ b/hosted/challenges.html
@@ -6,6 +6,7 @@
         <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.11/handlebars.min.js"></script>
         <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
         <script type="text/javascript" src="/files/logout.js"></script>
+        <script type="text/javascript" src="/files/stats.js"></script>
         <style type="text/css">
             body {
                 overflow-y: scroll;
@@ -90,7 +91,16 @@
                         <a class="nav-link" href="/challenges">Challenges</a>
                     </li>
                 </ul>
-                <button class="btn btn-outline-danger my-2 my-sm-0" onclick="logoutThenRedirect()">Logout</button>
+                <div class="btn-toolbar" role="toolbar">
+                    <div class="btn-group mr-2" role="group">
+                        <button type="button" class="btn btn-primary">
+                            <span class="badge badge-light" id="_teamScore">0</span> Points
+                        </button>
+                    </div>
+                    <div class="btn-group mr-2" role="group">
+                        <button class="btn btn-outline-danger my-2 my-sm-0" onclick="logoutThenRedirect()">Logout</button>
+                    </div>
+                </div>
             </div>
         </nav>
         <main class="container" role="main">
@@ -137,6 +147,7 @@
                 if(result["correctFlag"] == "true") {
                     // yay!
                     loadChallengesAndRender();
+                    loadStatsAndRender();
                 } else {
                     // nay!
                     flagObject.addClass("alert-danger").blur();
diff --git a/hosted/index.html b/hosted/index.html
index 3b72d95..f3625e8 100644
--- a/hosted/index.html
+++ b/hosted/index.html
@@ -5,6 +5,7 @@
         <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
         <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
         <script type="text/javascript" src="/files/logout.js"></script>
+        <script type="text/javascript" src="/files/stats.js"></script>
     </head>
     <body>
         <nav class="navbar navbar-expand-md navbar-dark bg-dark mb-4">
@@ -24,7 +25,16 @@
                         <a class="nav-link" href="/challenges">Challenges</a>
                     </li>
                 </ul>
-                <button class="btn btn-outline-danger my-2 my-sm-0" onclick="logoutThenRedirect()">Logout</button>
+                <div class="btn-toolbar" role="toolbar">
+                    <div class="btn-group mr-2" role="group">
+                        <button type="button" class="btn btn-primary">
+                            <span class="badge badge-light" id="_teamScore">0</span> Points
+                        </button>
+                    </div>
+                    <div class="btn-group mr-2" role="group">
+                        <button class="btn btn-outline-danger my-2 my-sm-0" onclick="logoutThenRedirect()">Logout</button>
+                    </div>
+                </div>
             </div>
         </nav>
         <main class="container" role="main">
diff --git a/hosted/stats.js b/hosted/stats.js
new file mode 100644
index 0000000..f82368f
--- /dev/null
+++ b/hosted/stats.js
@@ -0,0 +1,12 @@
+function loadStatsAndRender() {
+    $.get("/api/getStats").done(function(data) {
+        var result = jQuery.parseJSON(data);
+        $("#_teamScore").text(result["score"]);
+        // Re-run in 10s
+        setTimeout(function(){loadStatsAndRender();}, 10000);
+    });
+}
+
+$(document).ready(function() {
+    loadStatsAndRender();
+});
\ No newline at end of file