<script lang="ts">
  import { onMount } from "svelte";
  import { Client } from "$lib/client.svelte.ts";
  import { BinaryStreamReader } from "$lib/binary/readerStream";

  let name = $state("none");
  let client: Client = undefined as any;
  let players = $derived(client?.players ?? []);
  async function a() {
    client = await Client.connect();
    console.log(client);
  }

  onMount(a);
</script>

<div>
  I am <input type="text" maxlength="32" list="connectedPlayers" />
</div>
<datalist>
  {#each players as player}
    <option>{player.name}</option>
  {/each}
</datalist>
<div>
  Connected players - {players.length}<br />
  {#each players as player}
    <pre class="name">{player.name}</pre>
  {/each}
</div>

<style>
  .name {
    font-style: italic;
  }
</style>
