Hugging Face's logo

Spaces:
huggingface-projects
/
stable-diffusion-multiplayer
Runtime error

App Files Community
44
radames commited on
Commit
536b6c6
·
1 Parent(s): a987284

rooms menu

Browse files
Files changed (6) hide show
  1. frontend/src/lib/Buttons/PPButton.svelte +1 -1
  2. frontend/src/lib/Buttons/RoomsSelector.svelte +55 -0
  3. frontend/src/lib/Icons/People.svelte +22 -0
  4. frontend/src/lib/Icons/Pin.svelte +10 -0
  5. frontend/src/lib/Icons/Room.svelte +16 -0
  6. frontend/src/lib/Menu.svelte +3 -1
frontend/src/lib/Buttons/PPButton.svelte CHANGED
@@ -24,6 +24,6 @@
24
  @apply disabled:opacity-50 dark:bg-white dark:text-black bg-black text-white rounded-2xl text-xs shadow-sm focus:outline-none focus:border-gray-400;
25
  } */
26
  .button-paint {
27
- @apply text-base font-mono bg-violet-100 text-violet-900 min-w-[25ch] flex justify-center items-center disabled:opacity-50 dark:bg-white dark:text-black rounded-2xl px-3 py-1 shadow-sm focus:outline-none focus:border-gray-400;
28
  }
29
  </style>
 
24
  @apply disabled:opacity-50 dark:bg-white dark:text-black bg-black text-white rounded-2xl text-xs shadow-sm focus:outline-none focus:border-gray-400;
25
  } */
26
  .button-paint {
27
+ @apply text-sm font-mono bg-violet-100 text-violet-900 min-w-[25ch] flex justify-center items-center disabled:opacity-50 dark:bg-white dark:text-black rounded-2xl px-3 py-1 shadow-sm focus:outline-none focus:border-gray-400;
28
  }
29
  </style>
frontend/src/lib/Buttons/RoomsSelector.svelte ADDED
@@ -0,0 +1,55 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <script lang="ts">
2
+ import Room from '$lib/Icons/Room.svelte';
3
+ import Pin from '$lib/Icons/Pin.svelte';
4
+ import People from '$lib/Icons/People.svelte';
5
+
6
+ export let isLoading = false;
7
+
8
+ let rooms = [
9
+ { label: 'room 1', total: 11, capacity: 20 },
10
+ { label: 'room 2', total: 11, capacity: 20 },
11
+ { label: 'room 3', total: 11, capacity: 20 },
12
+ { label: 'room 4', total: 11, capacity: 20 },
13
+ { label: 'room 5', total: 11, capacity: 20 }
14
+ ];
15
+
16
+ let selectedRoom = 0;
17
+ </script>
18
+
19
+ <button on:click disabled={isLoading} class="button-paint" title="New Paint Frame" />
20
+
21
+ <ul class="font-mono font-medium tracking-tight bg-violet-100">
22
+ <li class="grid-row gap-2">
23
+ <Room />
24
+ <span> room </span>
25
+ <People />
26
+ <span> players </span>
27
+ </li>
28
+ {#each rooms as room, i}
29
+ <li class="grid-row gap-2">
30
+ <span>
31
+ {#if i === selectedRoom}
32
+ <Pin />
33
+ {/if}
34
+ </span>
35
+ <span> {room.label} </span>
36
+ <span />
37
+ <span>{room.total} / {room.capacity}</span>
38
+ </li>
39
+ {/each}
40
+ </ul>
41
+
42
+ <style lang="postcss" scoped>
43
+ /* .button {
44
+ @apply disabled:opacity-50 dark:bg-white dark:text-black bg-black text-white rounded-2xl text-xs shadow-sm focus:outline-none focus:border-gray-400;
45
+ } */
46
+ .button-paint {
47
+ @apply text-sm font-mono bg-violet-100 text-violet-900 min-w-[25ch] flex justify-center items-center disabled:opacity-50 dark:bg-white dark:text-black rounded-2xl px-3 py-1 shadow-sm focus:outline-none focus:border-gray-400;
48
+ }
49
+ .grid-row {
50
+ display: grid;
51
+ grid-template-columns: 0.5fr 2fr 0.5fr 2fr;
52
+ align-items: center;
53
+ justify-items: flex-start;
54
+ }
55
+ </style>
frontend/src/lib/Icons/People.svelte ADDED
@@ -0,0 +1,22 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <script lang="ts">
2
+ export let classList = '';
3
+ </script>
4
+
5
+ <svg class={classList} height="15" viewBox="0 0 9 7" fill="none" xmlns="http://www.w3.org/2000/svg">
6
+ <path
7
+ fill-rule="evenodd"
8
+ clip-rule="evenodd"
9
+ d="M6.41113 3.73486C6.97158 4.11531 7.3643 4.63076 7.3643 5.31801V6.54526H8.59155C8.81654 6.54526 9.00063 6.36118 9.00063 6.13618V5.31801C9.00063 4.42621 7.5402 3.8985 6.41113 3.73486Z"
10
+ fill="#DBAD37"
11
+ />
12
+ <path
13
+ d="M3.27305 3.27266C4.17677 3.27266 4.90938 2.54005 4.90938 1.63633C4.90938 0.732611 4.17677 0 3.27305 0C2.36933 0 1.63672 0.732611 1.63672 1.63633C1.63672 2.54005 2.36933 3.27266 3.27305 3.27266Z"
14
+ fill="#DBAD37"
15
+ />
16
+ <path
17
+ fill-rule="evenodd"
18
+ clip-rule="evenodd"
19
+ d="M5.72716 3.27266C6.63124 3.27266 7.36349 2.54041 7.36349 1.63633C7.36349 0.732258 6.63124 0 5.72716 0C5.53489 0 5.3549 0.0409082 5.18308 0.0981798C5.53511 0.533533 5.72715 1.07646 5.72715 1.63633C5.72715 2.1962 5.53511 2.73913 5.18308 3.17448C5.3549 3.23176 5.53489 3.27266 5.72716 3.27266ZM3.27266 3.68175C2.18041 3.68175 0 4.22992 0 5.31808V6.13624C0 6.36124 0.184087 6.54533 0.409083 6.54533H6.13625C6.36124 6.54533 6.54533 6.36124 6.54533 6.13624V5.31808C6.54533 4.22992 4.36492 3.68175 3.27266 3.68175Z"
20
+ fill="#DBAD37"
21
+ />
22
+ </svg>
frontend/src/lib/Icons/Pin.svelte ADDED
@@ -0,0 +1,10 @@
 
 
 
 
 
 
 
 
 
 
 
1
+ <script lang="ts">
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"
9
+ />
10
+ </svg>
frontend/src/lib/Icons/Room.svelte ADDED
@@ -0,0 +1,16 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <script lang="ts">
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"
9
+ y="3.05566"
10
+ width="2.88889"
11
+ height="2.88889"
12
+ rx="0.5"
13
+ fill="#2F6DCB"
14
+ stroke="#2F6DCB"
15
+ />
16
+ </svg>
frontend/src/lib/Menu.svelte CHANGED
@@ -1,6 +1,7 @@
1
  <script lang="ts">
2
  import { onMount, createEventDispatcher } from 'svelte';
3
  import PPButton from '$lib/Buttons/PPButton.svelte';
 
4
  const dispatch = createEventDispatcher();
5
  export let isLoading = false;
6
  const onKeyup = (e: KeyboardEvent) => {
@@ -16,6 +17,7 @@
16
  });
17
  </script>
18
 
19
- <div class="grid grid-cols-1 gap-3 w-max mx-auto">
20
  <PPButton {isLoading} on:click={() => dispatch('prompt')} />
 
21
  </div>
 
1
  <script lang="ts">
2
  import { onMount, createEventDispatcher } from 'svelte';
3
  import PPButton from '$lib/Buttons/PPButton.svelte';
4
+ import RoomsSelector from './Buttons/RoomsSelector.svelte';
5
  const dispatch = createEventDispatcher();
6
  export let isLoading = false;
7
  const onKeyup = (e: KeyboardEvent) => {
 
17
  });
18
  </script>
19
 
20
+ <div class="grid grid-cols-1 gap-1 w-max mx-auto">
21
  <PPButton {isLoading} on:click={() => dispatch('prompt')} />
22
+ <RoomsSelector {isLoading} />
23
  </div>