Minor UI improvements

frontend/src/homepage.rs

@@ -16,11 +16,18 @@ pub fn homepage(get_notification: ReadSignal<u8>) -> impl leptos::IntoView {
         },
     );
 
+    let pending_display = move || demo_data.get().map(|d| d.pending).filter(|p| p.len() > 0).map(|pending| {
+        view! {
+            <p>{pending.len()} demos are pending/waiting for analysis</p>
+        }
+    });
+
     view! {
         <div>
             <div>
                 <h2>Demos</h2>
             </div>
+            { pending_display }
             <DemoList demos=demo_data />
         </div>
     }
@@ -90,11 +97,33 @@ fn demo_list_entry(demo: common::BaseDemoInfo, idx: usize) -> impl leptos::IntoV
             grid-template-columns: auto;
             grid-template-rows: auto auto;
         }
+
+        .won {
+            color: #00aa00;
+        }
+        .lost {
+            color: #aa0000;
+        }
     };
 
+    let (player_score, enemy_score) = if demo.player_team == 2 {
+        (demo.team2_score, demo.team3_score)
+    } else {
+        (demo.team3_score, demo.team2_score)
+    };
+    let won = move || player_score > enemy_score;
+    let lost = move || enemy_score > player_score;
+    let tie = move || player_score == enemy_score;
+
     view! {
         class=style,
-            <span class="score" style=format!("grid-row: {};", idx + 1)>{demo.team2_score}:{demo.team3_score}</span>
+            <span 
+                class="score" 
+                style=format!("grid-row: {};", idx + 1)
+                class:won=won
+                class:lost=lost
+                class:tie=tie
+            >{demo.team2_score}:{demo.team3_score}</span>
             <div class="date" style=format!("grid-row: {};", idx + 1)>
                 <span>{demo.uploaded_at.format("%Y-%m-%d").to_string()}</span>
                 <span>{demo.uploaded_at.format("%H-%M-%S").to_string()}</span>

frontend/src/lib.rs

@@ -47,6 +47,67 @@ pub fn upload_demo(
         .shown {
             display: block;
         }
+
+
+        .lds-ellipsis,
+        .lds-ellipsis div {
+            box-sizing: border-box;
+        }
+        .lds-ellipsis {
+            display: inline-block;
+            position: relative;
+            width: 60px;
+            height: 20px;
+        }
+        .lds-ellipsis div {
+            position: absolute;
+            top: 7px;
+            width: 6px;
+            height: 6px;
+            border-radius: 50%;
+            background: currentColor;
+            animation-timing-function: cubic-bezier(0, 1, 1, 0);
+        }
+        .lds-ellipsis div:nth-child(1) {
+            left: 8px;
+            animation: lds-ellipsis1 0.6s infinite;
+        }
+        .lds-ellipsis div:nth-child(2) {
+            left: 8px;
+            animation: lds-ellipsis2 0.6s infinite;
+        }
+        .lds-ellipsis div:nth-child(3) {
+            left: 28px;
+            animation: lds-ellipsis2 0.6s infinite;
+        }
+        .lds-ellipsis div:nth-child(4) {
+            left: 48px;
+            animation: lds-ellipsis3 0.6s infinite;
+        }
+        @keyframes lds-ellipsis1 {
+            0% {
+                transform: scale(0);
+            }
+            100% {
+                transform: scale(1);
+            }
+        }
+        @keyframes lds-ellipsis3 {
+            0% {
+                transform: scale(1);
+            }
+            100% {
+                transform: scale(0);
+            }
+        }
+        @keyframes lds-ellipsis2 {
+            0% {
+                transform: translate(0, 0);
+            }
+            100% {
+                transform: translate(20px, 0);
+            }
+        }
     };
 
     let uploading = RwSignal::new(false);
@@ -86,10 +147,13 @@ pub fn upload_demo(
                 Close
             </button>
 
-            <p 
+            <div
                 class:shown=move || uploading.get()
                 class:hidden=move || !uploading.get()
-            >Uploading...</p>
+            >
+                <span>Uploading</span>
+                <div class="lds-ellipsis"><div></div><div></div><div></div><div></div></div>
+            </div>
         </div>
     }
 }