feat: added player list api

src/app/api/list/players/route.ts

@@ -0,0 +1,11 @@
+import { NextRequest, NextResponse } from 'next/server';
+import listPlayers from '../../../../core/blitz/listPlayers';
+
+export async function GET(request: NextRequest) {
+  const search = request.nextUrl.searchParams.get('search');
+  const limitParam = request.nextUrl.searchParams.get('limit');
+  const limit = limitParam ? parseInt(limitParam) : undefined;
+  const players = search ? await listPlayers(search, limit) : [];
+
+  return NextResponse.json(players);
+}

src/app/layout.tsx

@@ -1,7 +1,10 @@
+import { config } from 'dotenv';
 import { Roboto_Flex } from 'next/font/google';
 import { ReactNode } from 'react';
 import Navbar from '../components/Navbar';
 
+config();
+
 interface RootLayoutProps {
   children: ReactNode;
 }

src/app/tools/session/page.tsx

@@ -1,16 +1,44 @@
 'use client';
 
 import { CopyIcon, ListBulletIcon, ReloadIcon } from '@radix-ui/react-icons';
+import { debounce } from 'lodash';
+import { ChangeEvent, useRef } from 'react';
 import { Button } from '../../../components/Button';
 import PageWrapper from '../../../components/PageWrapper';
 import { SearchBar } from '../../../components/SearchBar';
+import { AccountListWithServer } from '../../../core/blitz/listPlayers';
 import * as styles from './page.css';
 
 export default function Page() {
+  const input = useRef<HTMLInputElement>(null);
+  const handleChange = debounce(
+    async (event: ChangeEvent<HTMLInputElement>) => {
+      if (event.target.value) {
+        const players = await fetch(
+          `/api/list/players?search=${event.target.value}`,
+        ).then((response) => response.json() as Promise<AccountListWithServer>);
+
+        console.log(
+          players
+            .map((player) => `${player.region} - ${player.nickname}`)
+            .join('\n'),
+        );
+      } else {
+        // TODO
+      }
+    },
+    500,
+  );
+
   return (
     <PageWrapper>
       <div className={styles.toolBar}>
-        <SearchBar style={{ flex: 1 }} placeholder="Search for a player..." />
+        <SearchBar
+          ref={input}
+          onChange={handleChange}
+          style={{ flex: 1 }}
+          placeholder="Search for a player..."
+        />
 
         <div style={{ display: 'flex', gap: 8 }}>
           <Button className={styles.button} color="dangerous">

src/core/blitz/listPlayers.ts

@@ -1,10 +1,14 @@
 import { Region } from '../../constants/regions';
-import { Account, AccountList } from '../../types/accountList';
 import { secrets } from '../node/secrets';
 import getWargamingResponse from './getWargamingResponse';
 
+interface Account {
+  nickname: string;
+  account_id: number;
+}
+type AccountList = Account[];
 export type AccountListWithServer = (Account & {
-  server: 'com' | 'eu' | 'asia';
+  region: Region;
 })[];
 
 export const usernamePattern = /^[a-zA-Z0-9_]{3,24}$/;
@@ -25,7 +29,7 @@ export default async function listPlayers(search: string, limit = 9) {
             value &&
             value.map((account) => ({
               ...account,
-              server: 'com' as Region,
+              region: 'com' as Region,
             })),
         ),
         getWargamingResponse<AccountList>(
@@ -35,7 +39,7 @@ export default async function listPlayers(search: string, limit = 9) {
             value &&
             value.map((account) => ({
               ...account,
-              server: 'eu' as Region,
+              region: 'eu' as Region,
             })),
         ),
         getWargamingResponse<AccountList>(
@@ -45,14 +49,14 @@ export default async function listPlayers(search: string, limit = 9) {
             value &&
             value.map((account) => ({
               ...account,
-              server: 'asia' as Region,
+              region: 'asia' as Region,
             })),
         ),
       ])
     )
       .filter(Boolean)
-      .flat();
+      .flat() as AccountListWithServer;
   } else {
-    return [];
+    return [] as AccountListWithServer;
   }
 }

src/core/discord/autocompleteUsername.ts

@@ -19,8 +19,8 @@ export default async function autocompleteUsername(
         ? players.map(
             (player) =>
               ({
-                name: `${player.nickname} (${REGION_NAMES[player.server]})`,
-                value: `${player.server}/${player.account_id}`,
+                name: `${player.nickname} (${REGION_NAMES[player.region]})`,
+                value: `${player.region}/${player.account_id}`,
               }) satisfies ApplicationCommandOptionChoiceData<string>,
           )
         : [],

src/core/discord/resolvePlayerFromCommand.ts

@@ -39,7 +39,7 @@ export default async function resolvePlayerFromCommand(
 
     if (accounts[0]) {
       return {
-        region: accounts[0].server,
+        region: accounts[0].region,
         id: accounts[0].account_id,
       } satisfies ResolvedPlayer;
     } else {

src/types/accountList.ts

@@ -1,6 +0,0 @@
-export interface Account {
-  nickname: string;
-  account_id: number;
-}
-
-export type AccountList = Account[];