uploads/profiles

script/demo_list.js

@@ -6,7 +6,8 @@ import {Api, SteamId} from "./api";
 let lastFilter = {
     mode: "",
     map: "",
-    players: []
+    uploader: "",
+    players: [],
 };
 
 ready(async () => {
@@ -19,17 +20,26 @@ ready(async () => {
     const steamIds = (searchParams.get("players") || "").split(",").filter(id => id);
     let players = [];
 
+    if (window.location.href.includes("profiles/")) {
+        const [, profile] = window.location.href.split("profiles/");
+        steamIds.push(profile);
+    }
+
     if (steamIds.length) {
         players = await Promise.all(steamIds.map(steamId => api.getPlayer(steamId)));
-        console.log(players);
     }
 
     lastFilter = {
         mode: searchParams.get("mode") || "",
         map: searchParams.get("map") || "",
+        uploader: "",
         players,
     };
 
+    if (window.location.href.includes("uploads/")) {
+        [, lastFilter.uploader] = window.location.href.split("uploads/");
+    }
+
     render(() => <FilterBar maps={maps} api={api} initialFilter={lastFilter}
                             onChange={onFilter.bind(null, api, demoListBody)}/>, filterBar);
 });
@@ -37,6 +47,7 @@ ready(async () => {
 const filterEq = (a, b) => {
     return (a.mode || "") === (b.mode || "")
         && (a.map || "") === (b.map || "")
+        && (a.uploader || "") === (b.uploader || "")
         && a.players.length === b.players.length && b.players.every(player => a.players.includes(player))
 }
 
@@ -51,6 +62,9 @@ const onFilter = async (api, demoListBody, filter) => {
         mode: (filter.mode || "").toLowerCase(),
         map: filter.map || "",
     });
+    if (filter.uploader) {
+        queryParams.set("uploader", filter.uploader);
+    }
     const response = await fetch("/fragments/demo-list?" + queryParams);
     document.querySelector('.demolist tbody').innerHTML = await response.text();
 }

script/filterbar.tsx

@@ -65,4 +65,5 @@ export interface FilterSet {
     mode: string,
     map: string,
     players: SteamUser[],
+    uploader: string,
 }

src/data/demo.rs

@@ -370,16 +370,16 @@ impl GameMode {
 #[derive(Default, Debug, Deserialize)]
 pub struct Filter {
     #[serde(default)]
-    mode: GameMode,
+    pub mode: GameMode,
     #[serde(default)]
-    map: String,
+    pub map: String,
     #[serde(default)]
     #[serde(deserialize_with = "deserialize_array")]
-    players: Vec<SteamId>,
+    pub players: Vec<SteamId>,
     #[serde(default)]
-    before: Option<i32>,
+    pub before: Option<i32>,
     #[serde(default)]
-    uploader: Option<i32>,
+    pub uploader: Option<SteamId>,
 }
 
 fn deserialize_array<'de, D, T>(deserializer: D) -> Result<Vec<T>, D::Error>
@@ -420,7 +420,12 @@ impl Filter {
             query.and_where(Expr::col(Demos::Id).lt(*before));
         }
         if let Some(uploader) = &self.uploader {
-            query.and_where(Expr::col(Demos::Uploader).eq(*uploader));
+            query
+                .inner_join(
+                    Users::Table,
+                    Expr::col((Users::Table, Users::Id)).equals((Demos::Table, Demos::Uploader)),
+                )
+                .and_where(Expr::col(Users::SteamId).eq(uploader));
         }
         if !self.players.is_empty() && self.players.len() < 19 {
             let mut player = self.players.iter();

src/data/steam_id.rs

@@ -12,6 +12,7 @@ use std::str::FromStr;
 use steamid_ng::SteamID;
 
 #[derive(Clone, PartialEq, Eq, Hash, Serialize, Deserialize)]
+#[serde(untagged)]
 pub enum SteamId {
     Id(u64),
     Raw(Cow<'static, str>),
@@ -161,3 +162,9 @@ impl From<SteamId> for Value {
         Value::String(Some(Box::new(value.steamid64())))
     }
 }
+
+impl From<&SteamId> for Value {
+    fn from(value: &SteamId) -> Self {
+        Value::String(Some(Box::new(value.steamid64())))
+    }
+}

src/data/user.rs

@@ -1,5 +1,5 @@
 use crate::data::steam_id::SteamId;
-use crate::Result;
+use crate::{Error, Result};
 use rand::distributions::Alphanumeric;
 use rand::Rng;
 use reqwest::get;
@@ -60,6 +60,9 @@ impl User {
     }
 
     async fn fetch(steam_id: &SteamId) -> Result<Profile> {
+        let SteamId::Id(steam_id) = steam_id else {
+            return Err(Error::NotFound);
+        };
         let response = get(format!(
             "https://steamcommunity.com/profiles/{steam_id}?xml=1"
         ))

src/main.rs

@@ -16,9 +16,11 @@ use crate::data::user::User;
 use crate::fragments::demo_list::DemoList;
 use crate::pages::about::AboutPage;
 use crate::pages::api::ApiPage;
-use crate::pages::demo::DemoPage;
+use crate::pages::demo::{ClassIconsStyle, DemoPage};
 use crate::pages::index::{DemoListScript, Index};
+use crate::pages::profile::Profile;
 use crate::pages::upload::{UploadPage, UploadScript};
+use crate::pages::uploads::Uploads;
 use crate::pages::{render, GlobalStyle};
 use crate::session::{SessionData, COOKIE_NAME};
 use async_session::{MemoryStore, Session, SessionStore};
@@ -86,7 +88,13 @@ async fn main() -> Result<()> {
 
     let app = Router::new()
         .route("/", get(index))
+        .route("/uploads/:uploader", get(uploads))
+        .route("/profiles/:uploader", get(profiles))
         .route(GlobalStyle::route(), get(serve_asset::<GlobalStyle>))
+        .route(
+            ClassIconsStyle::route(),
+            get(serve_asset::<ClassIconsStyle>),
+        )
         .route(UploadScript::route(), get(serve_asset::<UploadScript>))
         .route(DemoListScript::route(), get(serve_asset::<DemoListScript>))
         .route(LogoPng::route(), get(serve_asset::<LogoPng>))
@@ -286,6 +294,58 @@ async fn demo_list(State(app): State<Arc<App>>, filter: Option<Query<Filter>>) -
     Ok(DemoList { demos: &demos }.render())
 }
 
+#[axum::debug_handler]
+async fn uploads(
+    State(app): State<Arc<App>>,
+    session: SessionData,
+    filter: Option<Query<Filter>>,
+    Path(uploader): Path<SteamId>,
+) -> Result<Markup> {
+    let mut filter = filter.map(|filter| filter.0).unwrap_or_default();
+    filter.uploader = Some(uploader.clone());
+
+    let demos = ListDemo::list(&app.connection, filter).await?;
+    let maps: Vec<_> = map_list(&app.connection).await?.collect();
+    let user = User::get(&app.connection, uploader)
+        .await
+        .map_err(|_| Error::NotFound)?;
+    Ok(render(
+        Uploads {
+            user,
+            demos: &demos,
+            maps: &maps,
+            api: &app.api,
+        },
+        session,
+    ))
+}
+
+#[axum::debug_handler]
+async fn profiles(
+    State(app): State<Arc<App>>,
+    session: SessionData,
+    filter: Option<Query<Filter>>,
+    Path(profile): Path<SteamId>,
+) -> Result<Markup> {
+    let mut filter = filter.map(|filter| filter.0).unwrap_or_default();
+    filter.players.push(profile.clone());
+
+    let demos = ListDemo::list(&app.connection, filter).await?;
+    let maps: Vec<_> = map_list(&app.connection).await?.collect();
+    let user = User::get(&app.connection, profile)
+        .await
+        .map_err(|_| Error::NotFound)?;
+    Ok(render(
+        Profile {
+            user,
+            demos: &demos,
+            maps: &maps,
+            api: &app.api,
+        },
+        session,
+    ))
+}
+
 async fn handler_404() -> impl IntoResponse {
     Error::NotFound
 }

src/pages/demo.rs

@@ -1,10 +1,15 @@
 use crate::data::demo::Demo;
 use crate::data::player::{Player, Team};
 use crate::pages::Page;
+use demostf_build::Asset;
 use itertools::{EitherOrBoth, Itertools};
 use maud::{html, Markup};
 use std::borrow::Cow;
 
+#[derive(Asset)]
+#[asset(source = "style/pages/class-icons.css", url = "/class-icons.css")]
+pub struct ClassIconsStyle;
+
 pub struct DemoPage {
     pub demo: Demo,
 }
@@ -15,6 +20,7 @@ impl Page for DemoPage {
     }
 
     fn render(&self) -> Markup {
+        let style_url = ClassIconsStyle::url();
         html! {
             h2 { (self.demo.server) " - " (self.demo.red) " vs " (self.demo.blu) }
             h3 { (self.demo.name) }
@@ -111,6 +117,7 @@ impl Page for DemoPage {
                     }
                 }
             }
+             link rel="stylesheet" type="text/css" href=(style_url);
         }
     }
 }

src/pages/index.rs

@@ -53,7 +53,7 @@ impl Page for Index<'_> {
     }
 }
 
-struct MapList<'a>(&'a [String]);
+pub struct MapList<'a>(pub &'a [String]);
 
 impl Render for MapList<'_> {
     fn render_to(&self, buffer: &mut String) {

src/pages/mod.rs

@@ -3,7 +3,9 @@ pub mod api;
 pub mod demo;
 pub mod index;
 mod plugin_section;
+pub mod profile;
 pub mod upload;
+pub mod uploads;
 
 use crate::session::SessionData;
 use demostf_build::Asset;
@@ -23,11 +25,12 @@ pub fn render<T: Page>(page: T, session: SessionData) -> Markup {
     let style_url = GlobalStyle::url();
     html! {
         (DOCTYPE)
-        html {
+        html lang = "en" {
             head {
+                meta name = "viewport" content = "initial-scale=1,width=device-width";
                 title { (page.title()) }
                 link rel="stylesheet" type="text/css" href=(style_url);
-                link rel="shortcut icon" type="image/svg+xml" href="images/logo.svg";
+                link rel="shortcut icon" type="image/svg+xml" href="/images/logo.svg";
             }
             body {
                 header {

src/pages/profile.rs

@@ -0,0 +1,56 @@
+use crate::data::demo::ListDemo;
+use crate::data::user::User;
+use crate::fragments::demo_list::DemoList;
+use crate::pages::index::{DemoListScript, MapList};
+use crate::pages::Page;
+use demostf_build::Asset;
+use maud::{html, Markup, Render};
+use std::borrow::Cow;
+
+pub struct Profile<'a> {
+    pub user: User,
+    pub demos: &'a [ListDemo],
+    pub maps: &'a [String],
+    pub api: &'a str,
+}
+
+impl<'a> Profile<'a> {
+    fn map_list(&self) -> impl Render + 'a {
+        MapList(&self.maps)
+    }
+    fn demo_list(&self) -> impl Render + 'a {
+        DemoList { demos: self.demos }
+    }
+}
+
+impl Page for Profile<'_> {
+    fn title(&self) -> Cow<'static, str> {
+        format!("Demos with {} - demos.tf", self.user.name).into()
+    }
+
+    fn render(&self) -> Markup {
+        let script = DemoListScript::url();
+        html! {
+            h1 {
+                "Demos with "
+                (self.user.name)
+            }
+            #filter-bar data-maps = (self.map_list()) data-api-base = (self.api) {}
+            table.demolist {
+                thead {
+                    tr {
+                        th .title { "Title" }
+                        th .format { "Format" }
+                        th .map { "Map" }
+                        th .duration { "Duration" }
+                        th .date { "Date" }
+                    }
+                }
+                tbody {
+                    (self.demo_list())
+                }
+            }
+            script defer src = (script) type = "text/javascript" {}
+        }
+    }
+}

src/pages/uploads.rs

@@ -0,0 +1,56 @@
+use crate::data::demo::ListDemo;
+use crate::data::user::User;
+use crate::fragments::demo_list::DemoList;
+use crate::pages::index::{DemoListScript, MapList};
+use crate::pages::Page;
+use demostf_build::Asset;
+use maud::{html, Markup, Render};
+use std::borrow::Cow;
+
+pub struct Uploads<'a> {
+    pub user: User,
+    pub demos: &'a [ListDemo],
+    pub maps: &'a [String],
+    pub api: &'a str,
+}
+
+impl<'a> Uploads<'a> {
+    fn map_list(&self) -> impl Render + 'a {
+        MapList(&self.maps)
+    }
+    fn demo_list(&self) -> impl Render + 'a {
+        DemoList { demos: self.demos }
+    }
+}
+
+impl Page for Uploads<'_> {
+    fn title(&self) -> Cow<'static, str> {
+        format!("Uploads by {} - demos.tf", self.user.name).into()
+    }
+
+    fn render(&self) -> Markup {
+        let script = DemoListScript::url();
+        html! {
+            h1 {
+                "Uploads by "
+                (self.user.name)
+            }
+            #filter-bar data-maps = (self.map_list()) data-api-base = (self.api) {}
+            table.demolist {
+                thead {
+                    tr {
+                        th .title { "Title" }
+                        th .format { "Format" }
+                        th .map { "Map" }
+                        th .duration { "Duration" }
+                        th .date { "Date" }
+                    }
+                }
+                tbody {
+                    (self.demo_list())
+                }
+            }
+            script defer src = (script) type = "text/javascript" {}
+        }
+    }
+}

style/filterbar.css

@@ -20,6 +20,8 @@
 
     & .solid-select-placeholder {
         color: var(--text-secondary);
+        text-overflow: ellipsis;
+        white-space: nowrap;
     }
 
     & .solid-select-option {
@@ -54,6 +56,7 @@
 
     & > .mode {
         width: 150px;
+        max-width: 20%;
 
         & .solid-select-control {
             border-right: none;
@@ -64,6 +67,7 @@
 
     & > .maps {
         width: 200px;
+        max-width: 20%;
 
         & .solid-select-control {
             border-right: none;
@@ -90,3 +94,33 @@
         background: transparent;
     }
 }
+
+@media (max-width: 450px) {
+    #filter-bar {
+        height: 105px;
+    }
+
+    .filter-bar {
+        flex-wrap: wrap;
+
+        & > .maps, & > .mode {
+            width: calc(100% - 30px);
+            max-width: calc(100% - 30px);
+        }
+
+        & > .maps, & > .mode {
+            .solid-select-control {
+                border-bottom: none;
+            }
+        }
+
+        & .reset {
+            border-right: var(--text-secondary) 1px solid;
+            border-bottom: none;
+        }
+
+        & .solid-select-control {
+            border-radius: 0;
+        }
+    }
+}

style/footer.css

@@ -1,5 +1,4 @@
 footer {
-    margin: 100px -31px -100px;
     text-align: center;
     line-height: 35px;
     vertical-align: middle;

style/header.css

@@ -1,3 +1,8 @@
+:root {
+    --icon-demos-tf: url('inline://images/logo.svg');
+    --icon-steam: url('inline://images/steam_login.svg');
+}
+
 header {
     width: 100%;
     white-space: nowrap;
@@ -11,7 +16,7 @@ header {
     text-transform: uppercase;
 
     & a, & a:visited {
-        color: var(--text-header);
+        color: var(--text-secondary);
         cursor: pointer;
         padding: .5em 1em;
         text-decoration: none;
@@ -20,7 +25,7 @@ header {
     }
 
     .main a {
-        background: url('inline://images/logo.svg') no-repeat 0;
+        background: var(--icon-demos-tf) no-repeat 0;
         background-size: 30px;
         padding-left: 35px;
         margin-left: 5px;
@@ -81,7 +86,7 @@ a.steam-login:before {
     height: inherit;
     width: 41px;
     background-size: 30px 30px;
-    background: rgba(255, 255, 255, 0.08) url('inline://images/steam_login.svg') no-repeat 0;
+    background: rgba(255, 255, 255, 0.08) var(--icon-steam) no-repeat 0;
     bottom: 0;
     left: 0;
     padding: 0;

style/pages/demo.css

@@ -1,5 +1,3 @@
-@import 'class-icons.css';
-
 table.chat, table.players {
     table-layout: fixed;
     width: 100%;

style/style.css

@@ -16,13 +16,12 @@
     --secondary-color: #444;
     --secondary-color-accent: #333;
     --text-primary: black;
-    --text-secondary: grey;
+    --text-secondary: #5d5d5d;
     --highlight-primary: #3e95e6;
     --highlight-secondary: #daecfa;
     --button-primary: #0078e7;
     --button-secondary: #e6e6e6;
     --button-critical: rgb(202, 60, 60);
-    --text-header: grey;
     --link-color: #0071b8;
     --link-color-visited: #004c8b;
 }
@@ -39,7 +38,6 @@
         --highlight-secondary: #448fbe;
         --button-primary: #2568ae;
         --button-secondary: #626262;
-        --text-header: #efefef;
         --link-color: #0093ed;
         --link-color-visited: #0063ff;
     }
@@ -60,13 +58,19 @@ body, html {
 .page {
     background-color: var(--primary-color);
     width: 100%;
-    min-height: 100%;
+    min-height: calc(100% - 60px);
     max-width: 1100px;
     margin-left: auto;
     margin-right: auto;
     padding: 40px 30px 100px;
 }
 
+@media (max-width: 700px) {
+    .page {
+        padding-top: 80px;
+    }
+}
+
 body {
     background-color: var(--secondary-color);
 }