Small overview page QoL improvements (#260)

* Pass claimed player to OverviewPage if logged in

When logged in, make the player claimed by the logged in user available
to the demonlist overview page. Explicitly do not require a verified
claim.

Signed-off-by: stadust <43299462+stadust@users.noreply.github.com>

* refactor: make demon_panel a method instead of free standing function

This way it's easier to access the claimed player.

Signed-off-by: stadust <43299462+stadust@users.noreply.github.com>

* ui: overhaul publisher byline on demon overview page

- Stop it being italic
- Add a "published by" text
- make name a statsviewer link

Signed-off-by: stadust <43299462+stadust@users.noreply.github.com>

* demonlist-page: add score to overview page

Add the minimal possible score (for meeting list%) and total possible
score to the overview page.

Signed-off-by: stadust <43299462+stadust@users.noreply.github.com>

* fix: have Demon::score return 0 if progress < requirement

Signed-off-by: stadust <43299462+stadust@users.noreply.github.com>

* demonlist-pages: display claimed player's progress on overview

Similar to what demonlist+ is doing, display the progress of the player
claimed by the logged in user on the right hand side.

Signed-off-by: stadust <43299462+stadust@users.noreply.github.com>

* demonlist-pages: make beaten demons light green on overview page

Signed-off-by: stadust <43299462+stadust@users.noreply.github.com>

* fix: remove some leftover css from the ad days

Signed-off-by: stadust <43299462+stadust@users.noreply.github.com>

* demonlist-pages: do not display progress on overviewpage on mobile

It just doesnt fit width-wise

Signed-off-by: stadust <43299462+stadust@users.noreply.github.com>

---------

Signed-off-by: stadust <43299462+stadust@users.noreply.github.com>

Author: stadust

pointercrate-core-pages/static/css/ui.css

@@ -493,6 +493,10 @@ p.error {
   .viewer {
     flex-wrap: wrap;
   }
+  
+  .no-mobile {
+    display: none
+  }
 }
 
 .stats-container {

pointercrate-demonlist-api/src/pages.rs

@@ -24,10 +24,15 @@ use pointercrate_integrate::gd::GeometryDashConnector;
 use pointercrate_user::User;
 use rand::Rng;
 use rocket::{futures::StreamExt, http::CookieJar};
+use sqlx::PgConnection;
+use pointercrate_demonlist::player::claim::PlayerClaim;
+use pointercrate_demonlist::player::{FullPlayer, Player};
+use pointercrate_user::auth::{NonMutating};
+use pointercrate_user_api::auth::Auth;
 
 #[rocket::get("/?<timemachine>&<submitter>")]
 pub async fn overview(
-    pool: &State<PointercratePool>, timemachine: Option<bool>, submitter: Option<bool>, cookies: &CookieJar<'_>,
+    pool: &State<PointercratePool>, timemachine: Option<bool>, submitter: Option<bool>, cookies: &CookieJar<'_>, auth: Option<Auth<NonMutating>>
 ) -> Result<Page> {
     // A few months before pointercrate first went live - definitely the oldest data we have
     let beginning_of_time = NaiveDate::from_ymd_opt(2017, 1, 4).unwrap().and_hms_opt(0, 0, 0).unwrap();
@@ -77,9 +82,20 @@ pub async fn overview(
         demonlist,
         time_machine: tardis,
         submitter_initially_visible: submitter.unwrap_or(false),
+        claimed_player: match auth {
+            Some(auth) => claimed_full_player(auth.user.user(), &mut connection).await,
+            None => None
+        }
     }))
 }
 
+async fn claimed_full_player(user: &User, connection: &mut PgConnection) -> Option<FullPlayer> {
+    let claim = PlayerClaim::by_user(user.id, connection).await.ok().flatten()?;
+    let player = Player::by_id(claim.player.id, connection).await.ok()?;
+
+    player.upgrade(connection).await.ok()
+}
+
 #[rocket::get("/permalink/<demon_id>")]
 pub async fn demon_permalink(demon_id: i32, pool: &State<PointercratePool>) -> Result<Redirect> {
     let mut connection = pool.connection().await?;

pointercrate-demonlist-pages/src/overview.rs

@@ -12,44 +12,14 @@ use pointercrate_demonlist::{
     config as list_config,
     demon::{Demon, TimeShiftedDemon},
 };
+use pointercrate_demonlist::player::FullPlayer;
 
 pub struct OverviewPage {
     pub team: Team,
     pub demonlist: Vec<Demon>,
     pub time_machine: Tardis,
     pub submitter_initially_visible: bool,
-}
-
-fn demon_panel(demon: &Demon, current_position: Option<i16>) -> Markup {
-    let video_link = demon.video.as_deref().unwrap_or("https://www.youtube.com/watch?v=dQw4w9WgXcQ");
-    html! {
-         section.panel.fade style="overflow:hidden" {
-             div.flex style = "align-items: center" {
-                 a.thumb."ratio-16-9"."js-delay-css" href = (video_link) style = "position: relative" data-property = "background-image" data-property-value = {"url('" (demon.thumbnail) "')"} {}
-                 div style = "padding-left: 15px" {
-                     h2 style = "text-align: left; margin-bottom: 0px" {
-                         a href = {"/demonlist/permalink/" (demon.base.id) "/"} {
-                             "#" (demon.base.position) (PreEscaped(" &#8211; ")) (demon.base.name)
-                         }
-                     }
-                     h3 style = "text-align: left" {
-                         i {
-                             (demon.publisher.name)
-                         }
-                         @if let Some(current_position) = current_position {
-                             br;
-                             @if current_position > list_config::extended_list_size() {
-                                 "Currently Legacy"
-                             }
-                             @else {
-                                 "Currently #"(current_position)
-                             }
-                         }
-                     }
-                 }
-             }
-         }
-    }
+    pub claimed_player: Option<FullPlayer>
 }
 
 impl From<OverviewPage> for PageFragment {
@@ -131,14 +101,14 @@ impl OverviewPage {
                         Tardis::Activated { demons, ..} => {
                             @for TimeShiftedDemon {current_demon, position_now} in demons {
                                 @if current_demon.base.position <= list_config::extended_list_size() {
-                                    (demon_panel(current_demon, Some(*position_now)))
+                                    (self.demon_panel(current_demon, Some(*position_now)))
                                 }
                             }
                         },
                         _ => {
                             @for demon in &self.demonlist {
                                 @if demon.base.position <= list_config::extended_list_size() {
-                                    (demon_panel(demon, None))
+                                    (self.demon_panel(demon, None))
                                 }
                             }
                         }
@@ -155,4 +125,59 @@ impl OverviewPage {
             }
         }
     }
+
+    fn demon_panel(&self, demon: &Demon, current_position: Option<i16>) -> Markup {
+        let video_link = demon.video.as_deref().unwrap_or("https://www.youtube.com/watch?v=dQw4w9WgXcQ");
+
+        let progress = self.claimed_player.as_ref().and_then(|player| {
+            if player.verified.iter().any(|d| d.id == demon.base.id) {
+                Some(100)
+            }  else {
+                player.records.iter().find(|r| r.demon.id == demon.base.id).map(|r| r.progress)
+            }
+        }).unwrap_or_default();
+
+        let total_score = format!("{:.2}", demon.score(100));
+        let progress_score = format!("{:.2}", demon.score(progress));
+        let minimal_score = format!("{:.2}", demon.score(demon.requirement));
+
+        let bg_color = if progress == 100 { "#ddffdd;"} else {"white"};
+        
+        html! {
+             section.panel.fade style={"overflow:hidden; background:"(bg_color)} {
+                 div.flex style = "align-items: center" {
+                     a.thumb."ratio-16-9"."js-delay-css" href = (video_link) style = "position: relative" data-property = "background-image" data-property-value = {"url('" (demon.thumbnail) "')"} {}
+                     div style = "padding-left: 15px" {
+                         h2 style = "text-align: left; margin-bottom: 0px" {
+                             a href = {"/demonlist/permalink/" (demon.base.id) "/"} {
+                                 "#" (demon.base.position) (PreEscaped(" &#8211; ")) (demon.base.name)
+                             }
+                         }
+                         h3 style = "text-align: left" {
+                             "published by " a.underdotted href = {"/demonlist/statsviewer?player="(demon.publisher.id)} {(demon.publisher.name)}
+                         }
+                        div style="text-align: left; font-size: 0.8em" {
+                            @if let Some(current_position) = current_position {
+                                 @if current_position > list_config::extended_list_size() {
+                                     "Currently Legacy"
+                                 }
+                                 @else {
+                                     "Currently #"(current_position)
+                                 }
+                            }
+                            @else {
+                                (minimal_score) " (" (demon.requirement) "%) — " (total_score) " (100%) points"
+                            }
+                        }
+                     }
+                    @if self.claimed_player.is_some() {
+                        div.flex.col.no-mobile style = "font-weight: bold; text-align: right" {
+                            span style = "font-size: 300%" { (progress) "%" }
+                            span style = "font-size: 0.8em"{ (progress_score) " points"}
+                        }
+                    }
+                 }
+             }
+        }
+    }
 }

pointercrate-demonlist-pages/static/css/demonlist.css

@@ -67,16 +67,6 @@ tr:nth-child(even) {
   font-weight: normal;
 }
 
-#outofboundsad {
-  width: 200px;
-}
-
-@media (max-width: 1359px) {
-  #outofboundsad {
-    display: none;
-  }
-}
-
 @media (max-width: 1071px) {
   #rules,
   #discord {

pointercrate-demonlist/src/demon/mod.rs

@@ -218,6 +218,10 @@ impl Demon {
     }
 
     pub fn score(&self, progress: i16) -> f64 {
+        if progress < self.requirement {
+            return 0.0
+        }
+        
         let position = self.base.position;
 
         let beaten_score = match position {