53 lines
1.4 KiB
Svelte
53 lines
1.4 KiB
Svelte
<script lang="ts">
|
|
import { getUserY, parseUser, type UserIdentifier } from "../doc";
|
|
import friends, { friendsData } from "./stores/friends";
|
|
import Friend from "./Amigxs/Friend.svelte";
|
|
|
|
export let myUser: UserIdentifier;
|
|
|
|
function add(
|
|
event: Event & { readonly submitter: HTMLElement } & {
|
|
currentTarget: EventTarget & HTMLFormElement;
|
|
}
|
|
) {
|
|
const idString: string = event.currentTarget.idd.value;
|
|
const id = parseUser(idString);
|
|
if ($friends.find((i) => i.room === id.room)) {
|
|
alert("ya agregaste a este ser!");
|
|
return;
|
|
}
|
|
$friends = [...$friends, id];
|
|
event.currentTarget.idd.value = "";
|
|
}
|
|
|
|
$: userY = getUserY(myUser);
|
|
$: userStore = userY.svelteStore;
|
|
const changeName = (name: string) => {
|
|
// TODO: no ideal
|
|
$userStore.name.delete(0, $userStore.name.length);
|
|
$userStore.name.insert(0, name);
|
|
};
|
|
|
|
$: id = `${myUser.room};${myUser.password}`;
|
|
const copiar = () => navigator.clipboard.writeText(id);
|
|
</script>
|
|
|
|
<button on:click={copiar}>copiar tu id</button>
|
|
<input
|
|
type="text"
|
|
value={$userStore.name.toString()}
|
|
on:input={(e) => changeName(e.currentTarget.value)}
|
|
placeholder="tu nombre"
|
|
/>
|
|
|
|
<form on:submit|preventDefault={add}>
|
|
<input name="idd" type="text" placeholder="id" />
|
|
<button>añadir</button>
|
|
</form>
|
|
|
|
<ul>
|
|
{#each $friendsData as friend}
|
|
<li><Friend friend={friend.userY} id={friend.id} /></li>
|
|
{/each}
|
|
</ul>
|