<script lang="typescript">
    import { connectionManager } from "../../Connexion/ConnectionManager";
    import type { World } from "../../Connexion/World";

    let worlds : Promise<World[]> = connectionManager.getWorlds();

    function worldRoomId(world: World) {
        return world.roomId;
    }    
    
    function worldRoomName(world: World) {
        return world.roomId.replace(window.location.origin + "/", "");
    }

    function worldPlayer(world: World) {
        return world.player;
    }

</script>

<div class="customize-main">
    {#await worlds then data}
    <table class="nes-table is-bordered is-dark">
        {#each data as world}
        <tr>
            <td><a href="{worldRoomId(world)}">{worldRoomName(world)}</a></td>
            <td>{worldPlayer(world)}</td>
        </tr>
        {/each}
    </table>
    {/await}
</div>

<style lang="scss">
    div.customize-main {
        table.nes-table {
            width: 100%;
        }
    }
</style>