Allow sorting of the leaderboard.

hryanjones · Aug 11, 2019 · 6f2aae8 · 6f2aae8
1 parent 2c3eae1
commit 6f2aae8
Show file tree

Hide file tree

Showing 4 changed files with 98 additions and 14 deletions.
diff --git a/board.html b/board.html
@@ -30,9 +30,20 @@ <h2>Completion board for "{{difficulty}}" today</h2>
     <table v-if="leaders.length">
         <thead>
             <tr>
-                <th>name</th>
-                <th>total guesses</th>
-                <th>time</th>
+                <th 
+                    v-for="field in LEADER_HEADER_FIELDS"
+                    v-on:click="changeLeaderSort(field.key, field.sortKey)"
+                >
+                    <div class="leader-table-header-cell">
+                        <div>{{field.text}}</div>
+                        <div
+                            v-if="sortConfig.key === field.key"
+                            style="margin-left: 5px;"
+                        >
+                            {{sortConfig.direction === 'descending' ? '▾' : '▴'}}
+                        </div>
+                    </div>
+                </th>
             </tr>
         </thead>
         <tbody id="leaderboard">
@@ -72,10 +83,16 @@ <h2>Completion board for "{{difficulty}}" today</h2>
     new Vue({
         el: '#leaderboard-container',
         data: {
+            LEADER_HEADER_FIELDS,
             leaders: [],
             difficulty: 'normal',
             message: '',
             error: '',
+            sortConfig: {
+                key: 'numberOfGuesses',
+                sortKey: 'numberOfGuesses',
+                direction: 'ascending',
+            },
         },
         created() {
             this.getLeaders();
@@ -86,7 +103,8 @@ <h2>Completion board for "{{difficulty}}" today</h2>
                 const newDifficulty = e.target.value;
                 this.difficulty = newDifficulty;
                 this.getLeaders();
-            }
+            },
+            changeLeaderSort,
         },
     });
 </script>

diff --git a/index.css b/index.css
@@ -218,14 +218,19 @@ form {
 
 
 th {
-    text-align: left;
     border-bottom: 1px solid black;
     background-color: white;
 }
 
 thead, th {
     position: sticky;
     top: 0px;
+    cursor: pointer;
+}
+
+.leader-table-header-cell {
+    display: flex;
+    justify-content: space-between;
 }
 
 td {

diff --git a/index.html b/index.html
@@ -88,18 +88,23 @@ <h4 class="aww">
         <h2>Completion board for </h2>
 
         <table>
-            <thead>
-                <tr>
-                    <th>name</th>
-                    <th>total guesses</th>
-                    <th>time</th>
-                </tr>
-            </thead>
+        <thead>
+            <tr>
+                <th v-for="field in LEADER_HEADER_FIELDS" v-on:click="changeLeaderSort(field.key, field.sortKey)">
+                    <div class="leader-table-header-cell">
+                        <div>{{field.text}}</div>
+                        <div v-if="sortConfig.key === field.key" style="margin-left: 5px;">
+                            {{sortConfig.direction === 'descending' ? '▾' : '▴'}}
+                        </div>
+                    </div>
+                </th>
+            </tr>
+        </thead>
             <tbody id="leaderboard">
                 <tr v-for="leader in leaders">
                     <td>{{leader.name}}</td>
                     <td>{{leader.numberOfGuesses}}</td>
-                    <td>{{getFormattedTime(leader.time)}}</td>
+                    <td>{{leader.formattedTime}}</td>
                 </tr>
             </tbody>
         </table>

diff --git a/index.js b/index.js
@@ -20,18 +20,31 @@ let vueApp;
 
 const UNKNOWN_LEADERBOARD_ERROR = "Sorry, can't contact the leaderboard right now. Please try again in a little bit. (please contact @hryanjones if it persists)";
 
+const LEADER_HEADER_FIELDS = [
+    { text: 'name', key: 'name', sortKey: 'name' },
+    { text: '# guesses', key: 'numberOfGuesses', sortKey: 'numberOfGuesses' },
+    { text: 'time', key: 'formattedTime', sortKey: 'time' },
+];
+
 document.addEventListener('DOMContentLoaded', () => {
     if (getElement('container')) {
         vueApp = new Vue({
             el: '#container',
             data: {
+                LEADER_HEADER_FIELDS,
                 leaders: [],
+                sortConfig: {
+                    key: 'numberOfGuesses',
+                    sortKey: 'numberOfGuesses',
+                    direction: 'ascending',
+                },
             },
             methods: {
                 submitToLeaderboard,
                 reset() {
                     this.leaders = [];
-                }
+                },
+                changeLeaderSort,
             },
         });
     }
@@ -458,3 +471,46 @@ function sortByGuessesThenTime(leader1, leader2) {
     }
     return 0;
 }
+
+const OPPOSITE_SORT_DIRECTION = {
+    ascending: 'descending',
+    descending: 'ascending',
+};
+
+function changeLeaderSort(newKey, newSortKey) {
+    let {direction, key, sortKey} = this.sortConfig;
+    if (newKey === this.sortConfig.key) {
+        direction = OPPOSITE_SORT_DIRECTION[direction];
+    } else {
+        key = newKey;
+        sortKey = newSortKey || newKey;
+    }
+
+    this.sortConfig = { direction, key, sortKey };
+
+    this.leaders = sortLeaders(this.leaders, sortKey, direction);
+}
+
+function sortLeaders(leaders, sortKey, direction) {
+    return sortArrayByKey(leaders, sortKey, direction);
+}
+
+function sortArrayByKey(array, key, direction) {
+    const sorter = direction === 'descending' ? sortByKeyDesc : sortByKeyAsc;
+    array = array.slice(0);
+    return array.sort(sorter);
+
+    function sortByKeyAsc(first, second) {
+        if (first[key] > second[key]) {
+            return 1;
+        }
+        if (first[key] < second[key]) {
+            return -1;
+        }
+        return 0;
+    }
+
+    function sortByKeyDesc(first, second) {
+        return -1 * sortByKeyAsc(first, second);
+    }
+}