implemented player search clientside

web/src/gql/gql.ts

@@ -14,6 +14,7 @@ import type { TypedDocumentNode as DocumentNode } from '@graphql-typed-document-
  * Learn more about it here: https://the-guild.dev/graphql/codegen/plugins/presets/preset-client#reducing-bundle-size
  */
 const documents = {
+    "\n    query searchPlayer($query: String!) {\n      players(query: $query) {\n        ID\n        name\n      }\n    }\n  ": types.SearchPlayerDocument,
     "\n        query getGame($gameID: ID!) {\n            game(id: $gameID) {\n                added\n                overtime\n                score\n                author {\n                    ID\n                    name\n                }\n                team0player0 {\n                    ID\n                    name\n                    history(game: $gameID) {\n                        startElo\n                        delta\n                    }\n                }\n                team0player1 {\n                    ID\n                    name\n                    history(game: $gameID) {\n                        startElo\n                        delta\n                    }\n                }\n                team1player0 {\n                    ID\n                    name\n                    history(game: $gameID) {\n                        startElo\n                        delta\n                    }\n                }\n                team1player1 {\n                    ID\n                    name\n                    history(game: $gameID) {\n                        startElo\n                        delta\n                    }\n                }\n            }\n        }\n    ": types.GetGameDocument,
     "\n        query getPlayer($playerID: ID!) {\n            player(id: $playerID) {\n                ID\n                name\n                elo\n                history {\n                    delta\n                    endElo\n                    game {\n                        id\n                    }\n                }\n            }\n        }\n    ": types.GetPlayerDocument,
 };
@@ -32,6 +33,10 @@ const documents = {
  */
 export function graphql(source: string): unknown;
 
+/**
+ * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
+ */
+export function graphql(source: "\n    query searchPlayer($query: String!) {\n      players(query: $query) {\n        ID\n        name\n      }\n    }\n  "): (typeof documents)["\n    query searchPlayer($query: String!) {\n      players(query: $query) {\n        ID\n        name\n      }\n    }\n  "];
 /**
  * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
  */

web/src/gql/graphql.ts

@@ -70,7 +70,7 @@ export type Query = {
   /** Get player by ID */
   player?: Maybe<Player>;
   /** Get all players */
-  players: Array<Maybe<Player>>;
+  players: Array<Player>;
 };
 
 
@@ -88,6 +88,18 @@ export type QueryPlayerArgs = {
   id: Scalars['ID']['input'];
 };
 
+
+export type QueryPlayersArgs = {
+  query?: InputMaybe<Scalars['String']['input']>;
+};
+
+export type SearchPlayerQueryVariables = Exact<{
+  query: Scalars['String']['input'];
+}>;
+
+
+export type SearchPlayerQuery = { __typename?: 'Query', players: Array<{ __typename?: 'Player', ID: string, name: string }> };
+
 export type GetGameQueryVariables = Exact<{
   gameID: Scalars['ID']['input'];
 }>;
@@ -103,5 +115,6 @@ export type GetPlayerQueryVariables = Exact<{
 export type GetPlayerQuery = { __typename?: 'Query', player?: { __typename?: 'Player', ID: string, name: string, elo: number, history: Array<{ __typename?: 'GameResult', delta: number, endElo: number, game: { __typename?: 'Game', id: string } } | null> } | null };
 
 
+export const SearchPlayerDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"query","name":{"kind":"Name","value":"searchPlayer"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"query"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"String"}}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"players"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"query"},"value":{"kind":"Variable","name":{"kind":"Name","value":"query"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"ID"}},{"kind":"Field","name":{"kind":"Name","value":"name"}}]}}]}}]} as unknown as DocumentNode<SearchPlayerQuery, SearchPlayerQueryVariables>;
 export const GetGameDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"query","name":{"kind":"Name","value":"getGame"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"gameID"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"ID"}}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"game"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"id"},"value":{"kind":"Variable","name":{"kind":"Name","value":"gameID"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"added"}},{"kind":"Field","name":{"kind":"Name","value":"overtime"}},{"kind":"Field","name":{"kind":"Name","value":"score"}},{"kind":"Field","name":{"kind":"Name","value":"author"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"ID"}},{"kind":"Field","name":{"kind":"Name","value":"name"}}]}},{"kind":"Field","name":{"kind":"Name","value":"team0player0"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"ID"}},{"kind":"Field","name":{"kind":"Name","value":"name"}},{"kind":"Field","name":{"kind":"Name","value":"history"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"game"},"value":{"kind":"Variable","name":{"kind":"Name","value":"gameID"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"startElo"}},{"kind":"Field","name":{"kind":"Name","value":"delta"}}]}}]}},{"kind":"Field","name":{"kind":"Name","value":"team0player1"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"ID"}},{"kind":"Field","name":{"kind":"Name","value":"name"}},{"kind":"Field","name":{"kind":"Name","value":"history"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"game"},"value":{"kind":"Variable","name":{"kind":"Name","value":"gameID"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"startElo"}},{"kind":"Field","name":{"kind":"Name","value":"delta"}}]}}]}},{"kind":"Field","name":{"kind":"Name","value":"team1player0"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"ID"}},{"kind":"Field","name":{"kind":"Name","value":"name"}},{"kind":"Field","name":{"kind":"Name","value":"history"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"game"},"value":{"kind":"Variable","name":{"kind":"Name","value":"gameID"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"startElo"}},{"kind":"Field","name":{"kind":"Name","value":"delta"}}]}}]}},{"kind":"Field","name":{"kind":"Name","value":"team1player1"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"ID"}},{"kind":"Field","name":{"kind":"Name","value":"name"}},{"kind":"Field","name":{"kind":"Name","value":"history"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"game"},"value":{"kind":"Variable","name":{"kind":"Name","value":"gameID"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"startElo"}},{"kind":"Field","name":{"kind":"Name","value":"delta"}}]}}]}}]}}]}}]} as unknown as DocumentNode<GetGameQuery, GetGameQueryVariables>;
 export const GetPlayerDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"query","name":{"kind":"Name","value":"getPlayer"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"playerID"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"ID"}}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"player"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"id"},"value":{"kind":"Variable","name":{"kind":"Name","value":"playerID"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"ID"}},{"kind":"Field","name":{"kind":"Name","value":"name"}},{"kind":"Field","name":{"kind":"Name","value":"elo"}},{"kind":"Field","name":{"kind":"Name","value":"history"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"delta"}},{"kind":"Field","name":{"kind":"Name","value":"endElo"}},{"kind":"Field","name":{"kind":"Name","value":"game"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}}]}}]}}]}}]}}]} as unknown as DocumentNode<GetPlayerQuery, GetPlayerQueryVariables>;

web/src/lib/PlayerSearch.svelte

@@ -0,0 +1,26 @@
+<script lang="ts">
+  import { graphql } from "../gql";
+  import Search from "./Search.svelte";
+  import { request } from "graphql-request";
+
+  const doc = graphql(`
+    query searchPlayer($query: String!) {
+      players(query: $query) {
+        ID
+        name
+      }
+    }
+  `);
+
+  let suggestions: string[] = $state([]);
+
+  function findSuggestions(input: string) {
+    request(window.location.origin + "/graphql", doc, {
+      query: input,
+    }).then((result) => {
+      suggestions = result.players.map((e) => e.name);
+    });
+  }
+</script>
+
+<Search placeholder="Search player" onSuggest={findSuggestions} {suggestions} />

web/src/lib/Search.svelte

@@ -2,18 +2,17 @@
   let {
     placeholder = "Search",
     onSearch = () => {},
-    onSuggest = () => {
+    onSuggest = () => {},
-      return [];
+    suggestions = [],
-    },
   }: {
     placeholder?: string;
     onSearch?: (input: string) => void;
-    onSuggest?: (input: string) => string[];
+    onSuggest?: (input: string) => void;
+    suggestions?: string[];
   } = $props();
 
   let inputText = $state("");
   let showSuggestions = $derived(inputText != "");
-  let suggestions = $state(["One", "Two", "Three"]);
 </script>
 
 <div class="relative w-full">
@@ -26,7 +25,9 @@
       onSearch(inputText);
     }}
     oninput={() => {
-      suggestions = onSuggest(inputText);
+      if (inputText != ""){
+        onSuggest(inputText);
+      }
     }}
   />
 

web/src/pages/Front.svelte

@@ -1,18 +1,13 @@
 <script lang="ts">
   import LastGameCard from "../lib/LastGameCard.svelte";
+  import PlayerSearch from "../lib/PlayerSearch.svelte";
   import TopPlayerCard from "../lib/TopPlayerCard.svelte";
-  import Search from "../lib/Search.svelte";
 </script>
 
 <div class="flex justify-center">
   <div class="flex flex-col w-3/4">
     <div class="mb-7 mt-3">
-      <Search
+      <PlayerSearch />
-        placeholder="Search player"
-        onSuggest={(s) => {
-          return ["One", "Two", s];
-        }}
-      />
     </div>
     <div class="mb-7">
       <h1 class="heading">Top players</h1>