- results are grouped by nickname

composer.json

@@ -1,6 +1,5 @@
 {
   "require": {
-    "rakibtg/sleekdb": "2.15",
+    "rakibtg/sleekdb": "2.15"
-    "ext-json": "*"
   }
 }

js/gamemgr.js

@@ -227,7 +227,51 @@ function list_results_by_game(game) {
             return Number(b["testid"]) - Number(a["testid"])
         }); // sort records by ID
 
+        let results_by_nickname = {};
         results.forEach((record) => {
+            let nickname = record["nickname"];
+            if (!results_by_nickname.hasOwnProperty(nickname)) {
+                results_by_nickname[nickname] = [];
+            }
+            results_by_nickname[nickname].push(record);
+        });
+
+        let nicknames = Object.keys(results_by_nickname);
+
+        // mark best of the results
+        nicknames.forEach((nickname) => {
+            let result_group = results_by_nickname[nickname];
+            let best_entry = null;
+            let best_percentage = -1.0;
+            result_group.forEach((result) => {
+                result["best"] = false;
+                if (result["state"] === "concluded") {
+                    let percentage = result["summary"]["correct_answer_n"] / result["summary"]["challenge_n"];
+                    if ((best_entry === null) || (percentage >= best_percentage)) {
+                        best_percentage = percentage;
+                        best_entry = result;
+                    }
+                }
+            });
+            if (best_entry !== null) {
+                best_entry["best"] = true;
+            }
+        });
+
+        // print the grouped results
+        nicknames.forEach((nickname) => {
+            let result_group = results_by_nickname[nickname];
+
+            let test_group_box = document.createElement("section");
+            test_group_box.classList.add("summary-group")
+
+            let nickname_box = document.createElement("section");
+            nickname_box.classList.add("summary-nickname-box");
+            nickname_box.innerText = nickname;
+
+            test_group_box.append(nickname_box);
+
+            result_group.forEach((record) => {
                 if (record["state"] !== "concluded") {
                     return;
                 }
@@ -235,9 +279,9 @@ function list_results_by_game(game) {
                 let test_summary_record = document.createElement("section");
                 test_summary_record.classList.add("test-summary-record");
 
-            let sequence_number_sec = document.createElement("section");
+                // let sequence_number_sec = document.createElement("section");
-            sequence_number_sec.classList.add("summary-name-id-block");
+                // sequence_number_sec.classList.add("summary-name-id-block");
-            sequence_number_sec.innerText = record["nickname"] + "#" + n;
+                // sequence_number_sec.innerText = record["nickname"] + "#" + n;
                 let duration_sec = document.createElement("section");
                 duration_sec.classList.add("summary-duration");
                 let start_time = unix_time_to_human_readable(record["start_time"]);
@@ -251,11 +295,23 @@ function list_results_by_game(game) {
                 let r = Math.floor((summary["correct_answer_n"] / summary["challenge_n"]) * 100);
                 percentage.innerHTML = `${r}%`;
 
-            test_summary_record.append(sequence_number_sec, duration_sec, percentage);
+                test_summary_record.append(duration_sec, percentage);
-            rd.appendChild(test_summary_record);
+
+                if (record["best"]) {
+                    let best_badge = document.createElement("section");
+                    best_badge.classList.add("summary-best-badge");
+                    best_badge.innerText = "LEGJOBB";
+                    test_summary_record.append(best_badge);
+                }
+
+                test_group_box.appendChild(test_summary_record);
 
                 n--;
 
+            });
+
+            rd.append(test_group_box);
+
         });
         show("results_viewer_window");
     });

style/quizmaster_area.css

@@ -62,20 +62,35 @@ section.window-inner tr td:first-of-type {
     text-align: right !important;
 }
 
-.summary-name-id-block {
+.summary-nickname-box {
     display: inline-block;
     position: relative;
     background-color: #176767;
     color: whitesmoke;
     padding: 0.5em;
-    height: 3.5em;
-    top: -1.1em;
     box-shadow: 5px 0 #d3e5e5;
     min-width: 12em;
+    margin: 0.5em 0;
+    width: 90%;
 }
 
 .test-summary-record {
     min-width: 25em;
     height: 3.5em;
     overflow: clip;
+    margin-left: 2em;
+}
+
+.summary-group {
+    margin: 0.5em 0;
+}
+
+.summary-best-badge {
+    position: absolute;
+    display: block;
+    font-size: 0.8em;
+    top: 0;
+    right: 0;
+    padding: 0.2em;
+    color: #671b17;
 }