radames commited on
Commit
5ba6620
1 Parent(s): 8ebf51a

menu with rooms hook

Browse files
frontend/src/lib/Buttons/RoomsSelector.svelte CHANGED
@@ -1,22 +1,22 @@
1
  <script lang="ts">
2
  import { page } from '$app/stores';
3
-
4
  import Room from '$lib/Icons/Room.svelte';
5
  import Pin from '$lib/Icons/Pin.svelte';
6
  import People from '$lib/Icons/People.svelte';
7
  import { onMount } from 'svelte';
8
- import { PUBLIC_API_BASE } from '$env/static/public';
9
- import type { RoomResponse } from '$lib/types';
10
  import { selectedRoomID } from '$lib/store';
11
  import { MAX_CAPACITY } from '$lib/constants';
 
 
 
12
  export let isLoading = false;
13
  let boxEl: HTMLElement;
14
 
15
- let rooms: RoomResponse[] = [];
16
 
17
  let collapsed = true;
18
- $: selectedRoom = rooms.find((room) => room.room_id === $selectedRoomID);
19
- $: loadingRooms = rooms.length > 0;
20
 
21
  function clickHandler(event: Event) {
22
  if (!boxEl.contains(event.target as Node)) {
@@ -24,18 +24,12 @@
24
  }
25
  }
26
  onMount(() => {
27
- refreshRooms();
28
  window.addEventListener('pointerdown', clickHandler, true);
29
- const interval = setInterval(refreshRooms, 3000);
30
  return () => {
31
  window.removeEventListener('pointerdown', clickHandler, true);
32
- clearInterval(interval);
33
  };
34
  });
35
 
36
- async function refreshRooms() {
37
- rooms = await fetch(PUBLIC_API_BASE + '/rooms').then((res) => res.json());
38
- }
39
  function changeRoom(room: RoomResponse) {
40
  $selectedRoomID = room.room_id;
41
  collapsed = true;
@@ -62,7 +56,7 @@
62
  <People />
63
  <span> players </span>
64
  </li>
65
- {#each rooms as room}
66
  <li>
67
  <!-- svelte-ignore a11y-invalid-attribute -->
68
  <a
 
1
  <script lang="ts">
2
  import { page } from '$app/stores';
 
3
  import Room from '$lib/Icons/Room.svelte';
4
  import Pin from '$lib/Icons/Pin.svelte';
5
  import People from '$lib/Icons/People.svelte';
6
  import { onMount } from 'svelte';
 
 
7
  import { selectedRoomID } from '$lib/store';
8
  import { MAX_CAPACITY } from '$lib/constants';
9
+ import { useRooms } from '$lib/liveblocks';
10
+ import type { RoomResponse } from '$lib/types';
11
+
12
  export let isLoading = false;
13
  let boxEl: HTMLElement;
14
 
15
+ const rooms = useRooms();
16
 
17
  let collapsed = true;
18
+ $: selectedRoom = $rooms.find((room) => room.room_id === $selectedRoomID);
19
+ $: loadingRooms = $rooms.length > 0;
20
 
21
  function clickHandler(event: Event) {
22
  if (!boxEl.contains(event.target as Node)) {
 
24
  }
25
  }
26
  onMount(() => {
 
27
  window.addEventListener('pointerdown', clickHandler, true);
 
28
  return () => {
29
  window.removeEventListener('pointerdown', clickHandler, true);
 
30
  };
31
  });
32
 
 
 
 
33
  function changeRoom(room: RoomResponse) {
34
  $selectedRoomID = room.room_id;
35
  collapsed = true;
 
56
  <People />
57
  <span> players </span>
58
  </li>
59
+ {#each $rooms as room}
60
  <li>
61
  <!-- svelte-ignore a11y-invalid-attribute -->
62
  <a
frontend/src/lib/Icons/IconCommunity.svelte CHANGED
@@ -9,8 +9,8 @@
9
  aria-hidden="true"
10
  focusable="false"
11
  role="img"
12
- width="25"
13
- height="25"
14
  preserveAspectRatio="xMidYMid meet"
15
  viewBox="0 0 32 32"
16
  >
 
9
  aria-hidden="true"
10
  focusable="false"
11
  role="img"
12
+ width="1em"
13
+ height="1em"
14
  preserveAspectRatio="xMidYMid meet"
15
  viewBox="0 0 32 32"
16
  >
frontend/src/lib/Icons/Move.svelte CHANGED
@@ -4,8 +4,8 @@
4
 
5
  <svg
6
  class={classList}
7
- width="40"
8
- height="40"
9
  viewBox="0 0 11 11"
10
  fill="none"
11
  xmlns="http://www.w3.org/2000/svg"
 
4
 
5
  <svg
6
  class={classList}
7
+ width="1em"
8
+ height="1em"
9
  viewBox="0 0 11 11"
10
  fill="none"
11
  xmlns="http://www.w3.org/2000/svg"
frontend/src/lib/Icons/Pin.svelte CHANGED
@@ -2,7 +2,7 @@
2
  export let classList = '';
3
  </script>
4
 
5
- <svg class={classList} height="15" viewBox="0 0 7 9" fill="none" xmlns="http://www.w3.org/2000/svg">
6
  <path
7
  d="M3.5 4.58599C3.74063 4.58599 3.94669 4.4961 4.11819 4.31633C4.2894 4.13687 4.375 3.92102 4.375 3.66879C4.375 3.41656 4.2894 3.20056 4.11819 3.02079C3.94669 2.84132 3.74063 2.75159 3.5 2.75159C3.25937 2.75159 3.05346 2.84132 2.88225 3.02079C2.71075 3.20056 2.625 3.41656 2.625 3.66879C2.625 3.92102 2.71075 4.13687 2.88225 4.31633C3.05346 4.4961 3.25937 4.58599 3.5 4.58599ZM3.5 7.95669C4.38958 7.10064 5.04948 6.32285 5.47969 5.62334C5.9099 4.92413 6.125 4.30318 6.125 3.76051C6.125 2.92739 5.87154 2.24515 5.36462 1.71378C4.858 1.18273 4.23646 0.917197 3.5 0.917197C2.76354 0.917197 2.14185 1.18273 1.63494 1.71378C1.12831 2.24515 0.875 2.92739 0.875 3.76051C0.875 4.30318 1.0901 4.92413 1.52031 5.62334C1.95052 6.32285 2.61042 7.10064 3.5 7.95669ZM3.5 9C3.44167 9 3.38333 8.98853 3.325 8.9656C3.26667 8.94267 3.21562 8.9121 3.17188 8.87389C2.10729 7.8879 1.3125 6.97269 0.7875 6.12825C0.2625 5.28352 0 4.49427 0 3.76051C0 2.61401 0.351896 1.70064 1.05569 1.02038C1.75919 0.340127 2.57396 0 3.5 0C4.42604 0 5.24081 0.340127 5.94431 1.02038C6.6481 1.70064 7 2.61401 7 3.76051C7 4.49427 6.7375 5.28352 6.2125 6.12825C5.6875 6.97269 4.89271 7.8879 3.82812 8.87389C3.78438 8.9121 3.73333 8.94267 3.675 8.9656C3.61667 8.98853 3.55833 9 3.5 9Z"
8
  fill="#338D4C"
 
2
  export let classList = '';
3
  </script>
4
 
5
+ <svg class={classList} height="1em" viewBox="0 0 7 9" fill="none" xmlns="http://www.w3.org/2000/svg">
6
  <path
7
  d="M3.5 4.58599C3.74063 4.58599 3.94669 4.4961 4.11819 4.31633C4.2894 4.13687 4.375 3.92102 4.375 3.66879C4.375 3.41656 4.2894 3.20056 4.11819 3.02079C3.94669 2.84132 3.74063 2.75159 3.5 2.75159C3.25937 2.75159 3.05346 2.84132 2.88225 3.02079C2.71075 3.20056 2.625 3.41656 2.625 3.66879C2.625 3.92102 2.71075 4.13687 2.88225 4.31633C3.05346 4.4961 3.25937 4.58599 3.5 4.58599ZM3.5 7.95669C4.38958 7.10064 5.04948 6.32285 5.47969 5.62334C5.9099 4.92413 6.125 4.30318 6.125 3.76051C6.125 2.92739 5.87154 2.24515 5.36462 1.71378C4.858 1.18273 4.23646 0.917197 3.5 0.917197C2.76354 0.917197 2.14185 1.18273 1.63494 1.71378C1.12831 2.24515 0.875 2.92739 0.875 3.76051C0.875 4.30318 1.0901 4.92413 1.52031 5.62334C1.95052 6.32285 2.61042 7.10064 3.5 7.95669ZM3.5 9C3.44167 9 3.38333 8.98853 3.325 8.9656C3.26667 8.94267 3.21562 8.9121 3.17188 8.87389C2.10729 7.8879 1.3125 6.97269 0.7875 6.12825C0.2625 5.28352 0 4.49427 0 3.76051C0 2.61401 0.351896 1.70064 1.05569 1.02038C1.75919 0.340127 2.57396 0 3.5 0C4.42604 0 5.24081 0.340127 5.94431 1.02038C6.6481 1.70064 7 2.61401 7 3.76051C7 4.49427 6.7375 5.28352 6.2125 6.12825C5.6875 6.97269 4.89271 7.8879 3.82812 8.87389C3.78438 8.9121 3.73333 8.94267 3.675 8.9656C3.61667 8.98853 3.55833 9 3.5 9Z"
8
  fill="#338D4C"
frontend/src/lib/Icons/Room.svelte CHANGED
@@ -2,7 +2,7 @@
2
  export let classList = '';
3
  </script>
4
 
5
- <svg class={classList} height="15" viewBox="0 0 9 9" fill="none" xmlns="http://www.w3.org/2000/svg">
6
  <rect x="1" y="1" width="7" height="7" rx="1" stroke="#2F6DCB" />
7
  <rect
8
  x="3.05566"
 
2
  export let classList = '';
3
  </script>
4
 
5
+ <svg class={classList} height="1em" viewBox="0 0 9 9" fill="none" xmlns="http://www.w3.org/2000/svg">
6
  <rect x="1" y="1" width="7" height="7" rx="1" stroke="#2F6DCB" />
7
  <rect
8
  x="3.05566"
frontend/src/lib/Icons/Undo.svelte CHANGED
@@ -4,8 +4,7 @@
4
 
5
  <svg
6
  class={classList}
7
- width="40"
8
- height="29"
9
  viewBox="0 0 10 9"
10
  fill="none"
11
  xmlns="http://www.w3.org/2000/svg"
 
4
 
5
  <svg
6
  class={classList}
7
+ width="1em"
 
8
  viewBox="0 0 10 9"
9
  fill="none"
10
  xmlns="http://www.w3.org/2000/svg"
frontend/src/lib/Menu.svelte CHANGED
@@ -4,6 +4,9 @@
4
  import RoomsSelector from '$lib/Buttons/RoomsSelector.svelte';
5
  import AboutButton from '$lib/Buttons/AboutButton.svelte';
6
  import { toggleAbout } from '$lib/store';
 
 
 
7
 
8
  const dispatch = createEventDispatcher();
9
 
@@ -23,7 +26,12 @@
23
  </script>
24
 
25
  <div class="flex items-center justify-between px-12">
26
- <AboutButton on:click={() => ($toggleAbout = !$toggleAbout)} />
 
 
 
 
 
27
 
28
  <button
29
  on:click={() => dispatch('prompt')}
 
4
  import RoomsSelector from '$lib/Buttons/RoomsSelector.svelte';
5
  import AboutButton from '$lib/Buttons/AboutButton.svelte';
6
  import { toggleAbout } from '$lib/store';
7
+ // import { useBroadcastEvent } from '$lib/liveblocks';
8
+
9
+ // const broadcast = useBroadcastEvent();
10
 
11
  const dispatch = createEventDispatcher();
12
 
 
26
  </script>
27
 
28
  <div class="flex items-center justify-between px-12">
29
+ <AboutButton
30
+ on:click={() => {
31
+ $toggleAbout = !$toggleAbout;
32
+ // broadcast({ type: 'EMOJI', emoji: '🔥' });
33
+ }}
34
+ />
35
 
36
  <button
37
  on:click={() => dispatch('prompt')}
frontend/src/lib/types.ts CHANGED
@@ -39,4 +39,15 @@ export interface RoomResponse {
39
  id: number;
40
  room_id: string;
41
  users_count: number;
42
- }
 
 
 
 
 
 
 
 
 
 
 
 
39
  id: number;
40
  room_id: string;
41
  users_count: number;
42
+ }
43
+
44
+
45
+ export enum ConnectionStatus {
46
+ "closed" = "closed",
47
+ "authenticating" = "authenticating",
48
+ "unavailable" = "unavailable",
49
+ "failed" = "failed",
50
+ "open" = "open",
51
+ "connecting" = "connecting",
52
+ }
53
+ export type TConnectionStatus = keyof typeof ConnectionStatus