Add filter for challenge categories

1 files changed, 89 insertions, 46 deletions

diff --git a/hosted/challenges.html b/hosted/challenges.html
index 34c1ab5..e42d7f0 100644
--- a/hosted/challenges.html
+++ b/hosted/challenges.html
@@ -5,50 +5,68 @@
         <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/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>
+        <style type="text/css">
+            body {
+                overflow-y: scroll;
+            }
+        </style>
     </head>
-    <script id="body-template" type="text/x-handlebars-template">
-        <div class="container">
-            <div class="alert alert-secondary" role="alert">
-                <strong>Please note:</strong> All flags are case-sensitive and look like <samp>CIRCUS{IS_REALLY_C00L}</samp>.
-            </div>
-            {{#each challenges}}
-                <div class="card {{#if foundFlag}}border-success{{/if}}" style="margin-bottom: 20px">
-                    <div class="card-header">
+    <script id="nav-template" type="text/x-handlebars-template">
+        <ul class="nav nav-pills" id="navigation-pills">
+            <li class="nav-item">
+                <a class="nav-link active" href="#" onclick="filterChallenges()" circus-category="ALL">
+                    All
+                </a>
+            </li>
+            {{#each categories as |count name|}}
+                <li class="nav-item">
+                    <a class="nav-link" href="#" onclick="filterChallenges('{{ name }}')" circus-category="{{ name }}">
                         {{ name }}
-                        <span class="badge badge-light">
-                            {{ category }}
-                        </span>
-                    </div>
-                    <div class="card-body">
-                        <p>
-                            {{{ description }}}
-                        </p>
-                        {{#if ContainsLaunchable}}
-                            {{#if IPAddress}}
-                                <p class="text-primary">
-                                    Container running IPv4: <kbd>{{IPAddress}}</kbd>
-                                </p>
-                                <button class="btn btn-primary" onclick="stopContainer('{{ name }}');$(this).prop('disabled', true)">Stop Container</button>
-                            {{else}}
-                                <button class="btn btn-primary" onclick="startContainer('{{ name }}');$(this).prop('disabled', true)">Launch Container</button>
-                            {{/if}}
-                        {{/if}}
-                        <hr>
-                        {{#if foundFlag}}
-                            <p class="text-success">Flag found!</p>
+                        <span class="badge badge-light">{{ count }}</span>
+                    </a>
+                </li>
+            {{/each}}
+        </ul>
+    </script>
+    <script id="challenge-template" type="text/x-handlebars-template">
+        <div id="challenge-container">
+        {{#each challenges}}
+            <div class="card {{#if foundFlag}}border-success{{/if}}" style="margin-bottom: 20px" circus-category="{{ category }}">
+                <div class="card-header">
+                    {{ name }}
+                    <span class="badge badge-light">
+                        {{ category }}
+                    </span>
+                </div>
+                <div class="card-body">
+                    <p>
+                        {{{ description }}}
+                    </p>
+                    {{#if ContainsLaunchable}}
+                        {{#if IPAddress}}
+                            <p class="text-primary">
+                                Container running IPv4: <kbd>{{IPAddress}}</kbd>
+                            </p>
+                            <button class="btn btn-primary" onclick="stopContainer('{{ name }}');$(this).prop('disabled', true)">Stop Container</button>
                         {{else}}
-                            <form class="input-group mb-3" onsubmit="event.preventDefault();submitThis(this);">
-                                <input type="hidden" name="challengeName" value="{{ name }}">
-                                <input type="text" class="form-control" aria-label="Flag" aria-describedby="button-submit" name="flag">
-                                <div class="input-group-append">
-                                    <button class="btn btn-outline-primary" type="submit" id="button-submit">Submit flag</button>
-                                </div>
-                            </form>
+                            <button class="btn btn-primary" onclick="startContainer('{{ name }}');$(this).prop('disabled', true)">Launch Container</button>
                         {{/if}}
-                    </div>
+                    {{/if}}
+                    <hr>
+                    {{#if foundFlag}}
+                        <p class="text-success">Flag found!</p>
+                    {{else}}
+                        <form class="input-group mb-3" onsubmit="event.preventDefault();submitThis(this);">
+                            <input type="hidden" name="challengeName" value="{{ name }}">
+                            <input type="text" class="form-control" aria-label="Flag" aria-describedby="button-submit" name="flag">
+                            <div class="input-group-append">
+                                <button class="btn btn-outline-primary" type="submit" id="button-submit">Submit flag</button>
+                            </div>
+                        </form>
+                    {{/if}}
                 </div>
-            {{/each}}
-        </div>
+            </div>
+        {{/each}}
     </script>
     <body>
         <nav class="navbar navbar-expand-md navbar-dark bg-dark mb-4">
@@ -70,22 +88,33 @@
                 </form>
             </div>
         </nav>
-        <main class="container" role="main" id="challenge-list">
-            <div class="alert alert-info" role="alert">
-                Loading challenges...
+        <main class="container" role="main">
+            <div id="nav-list">
+
+            </div>
+            <br>
+            <div id="challenge-list">
+                <div class="alert alert-info" role="alert">
+                    Loading challenges...
+                </div>
             </div>
         </main>
     </body>
     <script type="text/javascript">
-        var template = Handlebars.compile($("#body-template").html());
+        var navTemplate = Handlebars.compile($("#nav-template").html());
+        var challengeTemplate = Handlebars.compile($("#challenge-template").html());
+        var renderedNav = false;
 
         function loadChallengesAndRender() {
             $.ajax({
                 url: "/api/getChallenges",
                 success: function(result) {
-                    $("#challenge-list").html(
-                        template(jQuery.parseJSON(result))
-                    );
+                    if(!renderedNav) {
+                        $("#nav-list").html(navTemplate(jQuery.parseJSON(result)));
+                        renderedNav = true;
+                    }
+                    $("#challenge-list").html(challengeTemplate(jQuery.parseJSON(result)));
+                    filterChallenges($('#navigation-pills > li > a.active').attr("circus-category"));
                 }
             });
         }
@@ -126,6 +155,20 @@
             });
         }
 
+        function filterChallenges(category) {
+            $("#navigation-pills > li > a").removeClass("active");
+
+            if(category && category != "ALL") {
+                $("#challenge-container > div").hide();
+                $("#challenge-container > div[circus-category=" + category + "]").show();
+                $("#navigation-pills > li > a[circus-category=" + category + "]").addClass("active");
+            } else {
+                // Show ALL
+                $("#challenge-container > div").show();
+                $("#navigation-pills > li > a[circus-category=ALL]").addClass("active");
+            }
+        }
+
         $(document).ready(function() {
             loadChallengesAndRender();
         });