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