From 480dfe6a0a89350cc909ad23471117e1d74f9177 Mon Sep 17 00:00:00 2001
From: Jason White <jason.white@owasp.org>
Date: Fri, 5 May 2017 13:12:01 -0400
Subject: [PATCH] scoreboard v 0.1 we'll say

---
 .../src/main/resources/static/css/main.css    | 44 +++++++++++++++++++
 .../js/goatApp/templates/scoreboard.html      | 17 +++++--
 .../static/js/goatApp/view/ScoreboardView.js  | 10 ++---
 .../main/resources/templates/scoreboard.html  |  7 ++-
 4 files changed, 69 insertions(+), 9 deletions(-)

diff --git a/webgoat-container/src/main/resources/static/css/main.css b/webgoat-container/src/main/resources/static/css/main.css
index adb6f6825..01558e568 100644
--- a/webgoat-container/src/main/resources/static/css/main.css
+++ b/webgoat-container/src/main/resources/static/css/main.css
@@ -1094,3 +1094,47 @@ span.show-next-page, span.show-prev-page {
 .col-md-8 {
     width: 95% !important
 }
+
+/* scoreboard */
+div.scoreboard-title {
+    font-size:xx-large;
+}
+
+.scoreboard-table tr {
+}
+
+div.scoreboard-username {
+    background-color: #222;
+    color: aliceblue;
+    padding: 4px;
+    padding-left:8px;
+    font-size: x-large;
+    border-radius:6px;
+}
+
+th.username {
+    padding-bottom: 6px;
+}
+
+td.user-flags {
+    padding-left: 8px;
+    padding-bottom: 6px;
+}
+
+div.captured-flag {
+    border-radius: 6px;
+    background-color: #444;
+    color: white;
+    padding: 4px;
+    font-size: x-large;
+    display: inline-block;
+}
+
+.scoreboard-page {
+    background-color: #e0dfdc;
+    padding: 20px;
+}
+
+.fa-flag {
+    color:red
+}
\ No newline at end of file
diff --git a/webgoat-container/src/main/resources/static/js/goatApp/templates/scoreboard.html b/webgoat-container/src/main/resources/static/js/goatApp/templates/scoreboard.html
index c2eeb520b..5bbeac6a3 100644
--- a/webgoat-container/src/main/resources/static/js/goatApp/templates/scoreboard.html
+++ b/webgoat-container/src/main/resources/static/js/goatApp/templates/scoreboard.html
@@ -1,4 +1,15 @@
-<table>
-    <! -- iterate for header rows -->
-    <!--
+<div class="scoreboard-title">WebGoat Challenge</div>
+<table class="scoreboard-table">
+    <% _.each(rankings, function(userRanking) { %>
+    <tr>
+        <th class="username"> <div class="scoreboard-username"><%= userRanking.username %> </div></th>
+        <td class="user-flags"> <% _.each(userRanking.flagsCaptured, function(flag) { %>
+
+             <div class="captured-flag">
+                 <i class="fa fa-flag" aria-hidden="true"></i>
+                 <%=flag%> </div>
+            <% }); %>
+        </td>
+    </tr>
+    <% }); %>
 </table>
\ No newline at end of file
diff --git a/webgoat-container/src/main/resources/static/js/goatApp/view/ScoreboardView.js b/webgoat-container/src/main/resources/static/js/goatApp/view/ScoreboardView.js
index 09ed711f4..4dd93606c 100644
--- a/webgoat-container/src/main/resources/static/js/goatApp/view/ScoreboardView.js
+++ b/webgoat-container/src/main/resources/static/js/goatApp/view/ScoreboardView.js
@@ -12,16 +12,16 @@ function($,
 		el:'#scoreboard',
 
 		initialize: function() {
-		    template:ScoreboardTemplate,
-			this.collection = new FlagsCollection();
-			this.listenTo(this.collection,'reset',this.render)
-			this.collection.fetch({reset:true});
+		    this.template = ScoreboardTemplate,
+		    this.collection = new FlagsCollection();
+		    this.listenTo(this.collection,'reset',this.render)
+		    this.collection.fetch({reset:true});
 		},
 
 		render: function() {
 			//this.$el.html('test');
 			var t = _.template(this.template);
-            this.$el.html(t({'flags':this.collection.toJSON()}));
+            this.$el.html(t({'rankings':this.collection.toJSON()}));
 			//TODO: add template (table) to iterate over ...
 			//this.collection.toJSON(); << put that in the template data
 			//TODO: set up next poll here with listenToOnce
diff --git a/webgoat-container/src/main/resources/templates/scoreboard.html b/webgoat-container/src/main/resources/templates/scoreboard.html
index 856f56c5f..1e9d0a674 100644
--- a/webgoat-container/src/main/resources/templates/scoreboard.html
+++ b/webgoat-container/src/main/resources/templates/scoreboard.html
@@ -20,10 +20,15 @@
 
     <!-- Require.js used to load js asynchronously -->
     <script src="js/libs/require.min.js" data-main="js/scoreboard.js"/>
+    <!-- main css -->
+    <link rel="stylesheet" type="text/css" th:href="@{/css/main.css}"/>
+    <link rel="stylesheet" type="text/css" th:href="@{/plugins/bootstrap/css/bootstrap.min.css}"/>
+    <link rel="stylesheet" type="text/css" th:href="@{/css/font-awesome.min.css}"/>
+
     <meta http-equiv="Content-Type" content="text/id; charset=ISO-8859-1"/>
     <title>WebGoat</title>
 </head>
-<body>
+<body class="scoreboard-page">
 
 <div id="scoreboard-wrapper">
     <div id="scoreboard">