Minor UI improvements

backend/src/api/demos.rs

@@ -44,12 +44,17 @@ async fn list(
             crate::schema::demo_teams::table
                 .on(crate::schema::demos::dsl::demo_id.eq(crate::schema::demo_teams::dsl::demo_id)),
         )
+        .inner_join(
+            crate::schema::demo_players::table
+                .on(crate::schema::demos::dsl::demo_id.eq(crate::schema::demo_players::dsl::demo_id))
+        )
         .select((
             crate::models::Demo::as_select(),
             crate::models::DemoInfo::as_select(),
             crate::models::DemoTeam::as_select(),
+            crate::models::DemoPlayer::as_select(),
         ))
-        .filter(crate::schema::demos::dsl::steam_id.eq(steam_id.to_string()));
+        .filter(crate::schema::demos::dsl::steam_id.eq(steam_id.to_string()).and(crate::schema::demo_players::dsl::steam_id.eq(steam_id.to_string())));
     let pending_query = crate::schema::demos::dsl::demos
         .inner_join(crate::schema::processing_status::table.on(
             crate::schema::demos::dsl::demo_id.eq(crate::schema::processing_status::dsl::demo_id),
@@ -72,6 +77,7 @@ async fn list(
                     crate::models::Demo,
                     crate::models::DemoInfo,
                     crate::models::DemoTeam,
+                    crate::models::DemoPlayer,
                 )> = done_query.load(con).await?;
 
                 let pending_results: Vec<(crate::models::Demo)> = pending_query.load(con).await?;
@@ -83,7 +89,7 @@ async fn list(
         .unwrap();
 
     let mut demos = std::collections::HashMap::new();
-    for (demo, info, team) in results.into_iter() {
+    for (demo, info, team, player) in results.into_iter() {
         let entry = demos
             .entry(demo.demo_id.clone())
             .or_insert(common::BaseDemoInfo {
@@ -92,6 +98,7 @@ async fn list(
                 uploaded_at: demo.uploaded_at,
                 team2_score: 0,
                 team3_score: 0,
+                player_team: player.team,
             });
 
         if team.team == 2 {

common/src/lib.rs

@@ -11,6 +11,7 @@ pub struct BaseDemoInfo {
     pub uploaded_at: chrono::naive::NaiveDateTime,
     pub team2_score: i16,
     pub team3_score: i16,
+    pub player_team: i16,
 }
 
 #[derive(Debug, Clone, PartialEq, Eq, serde::Serialize, serde::Deserialize)]

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>
     }
 }