Add user info to profile page.

server/src/manager/data.rs

@@ -917,20 +917,25 @@ pub async fn thread_system(mut app:App, bus:Bus<protocol::QRPacket>)
 
                 let mut response = PacketUserProfileResponse::new();
                 
-                if let Some(uid) = app.user_handle.get(&request.handle.to_lowercase().as_bytes()).cloned() {
+                // Get user information
+                if if let Some(uid) = app.user_handle.get(&request.handle.to_lowercase().as_bytes()).cloned() {
                     response.status = STATUS_OK;
 
                     if let Some(user) = app.get_user_by_id(uid) {
                         response.handle = user.handle.clone();
                         response.is_online = user.connection.is_some();
                     }
+
+                    true
                 } else {
+                    // User not found
                     response.status = STATUS_ERROR;
-                };
+                    false
-
+                } {
-                // Get user sessions
+                    // Get profile information
-                if response.status == STATUS_OK {
+                    // ...
 
+                    // Fetch game history
                     let mut filter = SessionFilter::new();
                     filter.count = 30;
                     filter.player = [Some(request.handle.to_lowercase()), None];

www/css/ui.css

@@ -77,7 +77,6 @@ main table.list td:last-child>button.highlight {
 main table.list td:last-child>button:hover{
     background-color:#303030;
 }
-
 main table.list td>canvas {
     display: block;
     position: relative;
@@ -86,6 +85,52 @@ main table.list td>canvas {
     margin: 0 -1.5rem 0 -1.5rem;
 }
 
+
+main table.info{
+    width:100%;
+    border-collapse:collapse;
+}
+main table.info tr{
+    height:2.5rem;
+    font-size: 1.08rem;
+    background-color:#242424;
+}
+main table.info th{
+    width:1px;
+    padding:0 2rem 0 2rem;
+
+    text-align:center;
+    font-size:1.2rem;
+    font-weight:bold;
+
+    white-space:nowrap;
+    background-color:#383838;
+    color:#f0f0f0;
+    border-bottom:1px solid #404040;
+}
+main table.info td{
+    width:1px;
+    height:100%;
+    padding:0 2rem 0 2rem;
+
+    text-align:center;
+
+    white-space:nowrap;
+    background-color:inherit;
+    color:#f0f0f0;
+    border-right: 1px solid #282828;
+}
+main table.info td:last-child, main table.info th:last-child{
+    width:auto;
+    padding:0;
+    text-align:left;
+}
+main table.info td:last-child{
+    background-color: #282828;
+    border:0;
+}
+
+
 main div.turn-slider-padding{
     display:block;
     position:relative;

www/js/scene.js

@@ -774,13 +774,25 @@ const SCENES = {
             header.appendChild(title);
             MAIN.appendChild(header);
 
-            let table_stats = document.createElement("table");
+            let rank = UI.text("Unranked");
+            let games_played = 0;
+
+            for(let i = 0; i < this.history.length; ++i) {
+                if(this.history[i].is_complete != 0) { games_played += 1; }
+            }
+
+            let table_stats = UI.table(
+                [ "Rank", "Games", "" ],
+                [[ rank, UI.text(games_played.toString()), UI.text("") ]],
+            );
+            table_stats.setAttribute("class", "info");
+
+            MAIN.appendChild(table_stats);
 
             let container_history = document.createElement("section");
             container_history.setAttribute("class", "history");
 
             let table_history = document.createElement("table");
-            table_history.setAttribute("id", "history");
             table_history.setAttribute("class", "list session");
             table_history.appendChild(UI.session_table_history(this.history));