players from query

script/api.ts

@@ -9,7 +9,7 @@ export interface SteamUser {
 }
 
 export class Api {
-    private base: string;
+    private readonly base: string;
 
     constructor(base: string) {
         this.base = base;
@@ -36,6 +36,20 @@ export class Api {
             return [];
         }
 
-        return await this.request('users/search', {query}) as SteamUser[];
+        const players = await this.request('users/search', {query}) as SteamUser[];
+        for (let player of players) {
+            localStorage.setItem(`player.${player.steamid}`, JSON.stringify(player));
+        }
+        return players
+    }
+
+    async getPlayer(id: string | number): Promise<SteamUser> {
+        const cached = localStorage.getItem(`player.${id}`);
+        if (cached) {
+            return JSON.parse(cached);
+        }
+        const player = await this.request(`users/${id}`, {}) as SteamUser;
+        localStorage.setItem(`player.${id}`, JSON.stringify(player));
+        return player;
     }
 }

script/demo_list.js

@@ -1,7 +1,7 @@
 import {render} from "solid-js/web";
 import {ready} from "./ready";
 import {FilterBar} from "./filterbar"
-import {Api} from "./api";
+import {Api, SteamId} from "./api";
 
 let lastFilter = {
     mode: "",
@@ -9,21 +9,30 @@ let lastFilter = {
     players: []
 };
 
-ready(() => {
+ready(async () => {
     const filterBar = document.getElementById('filter-bar');
     const maps = filterBar.dataset.maps.split(",");
     const apiBase = filterBar.dataset.apiBase;
     const api = new Api(apiBase);
     const demoListBody = document.querySelector('.demolist tbody');
     const searchParams = new URLSearchParams(window.location.search);
+    const steamIds = (searchParams.get("players") || "").split(",").filter(id => id);
+    console.log(steamIds);
+    let players = [];
+
+    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") || "",
-        players: (searchParams.get("players") || "").split(",")
+        players,
     };
 
-    render(() => <FilterBar maps={maps} api={api} initialFilter={lastFilter} onChange={onFilter.bind(null, api, demoListBody)}/>, filterBar);
+    render(() => <FilterBar maps={maps} api={api} initialFilter={lastFilter}
+                            onChange={onFilter.bind(null, api, demoListBody)}/>, filterBar);
 });
 
 const filterEq = (a, b) => {

script/filterbar.tsx

@@ -50,7 +50,7 @@ export const FilterBar = ({maps, api, onChange, initialFilter}: FilterBarProps)
                 map: "",
             });
         }}/>
-        <Select class="players" onChange={players => setFilterSet({
+        <Select class="players" initialValue={initialFilter.players} onChange={players => setFilterSet({
             ...filterSet(),
             players
         })} multiple placeholder="All Players" format={playerFormat} {...playerOptions} />