radames commited on
Commit
759b9dd
1 Parent(s): 6fe272e
frontend/src/app.html CHANGED
@@ -11,7 +11,7 @@
11
  </head>
12
  <!-- <body class="dark:bg-[rgb(11,15,25)] bg-white dark:text-white text-black"> -->
13
 
14
- <body>
15
  <div>%sveltekit.body%</div>
16
  </body>
17
 
 
11
  </head>
12
  <!-- <body class="dark:bg-[rgb(11,15,25)] bg-white dark:text-white text-black"> -->
13
 
14
+ <body class="bg-blue-200/20">
15
  <div>%sveltekit.body%</div>
16
  </body>
17
 
frontend/src/lib/About.svelte CHANGED
@@ -1,22 +1,14 @@
1
  <script lang="ts">
2
  import LiveBlocks from '$lib/Icons/LiveBlocks.svelte';
3
- import LoadingIcon from './Icons/LoadingIcon.svelte';
4
  export let classList = '';
5
- export let loading = false;
6
  </script>
7
 
8
  <!-- svelte-ignore a11y-click-events-have-key-events -->
9
  <div
10
  on:click
11
- class="fixed {classList} w-screen top-0 left-0 bottom-0 right-0 max-h-screen z-50 items-center justify-center bg-black text-white bg-opacity-90 px-3 overflow-y-scroll"
12
  >
13
  <div class="max-w-md">
14
- {#if loading}
15
- <div class="text-4xl text-white flex items-center mb-4">
16
- <LoadingIcon classList={'inline-block animate-spin p-1 mr-2'} />
17
- <h1 class="font-bold inline-block">Loading...</h1>
18
- </div>
19
- {/if}
20
  <h2 class="font-bold text-xl font-mono mb-8">Stable Difussion Multiplayer</h2>
21
  <p>
22
  Powered by Hugging Face face GPU Spaces <a
 
1
  <script lang="ts">
2
  import LiveBlocks from '$lib/Icons/LiveBlocks.svelte';
 
3
  export let classList = '';
 
4
  </script>
5
 
6
  <!-- svelte-ignore a11y-click-events-have-key-events -->
7
  <div
8
  on:click
9
+ class="fixed {classList} w-screen h-screen top-0 left-0 bottom-0 right-0 z-50 items-center justify-center bg-black text-white bg-opacity-90 px-3 overflow-y-scroll"
10
  >
11
  <div class="max-w-md">
 
 
 
 
 
 
12
  <h2 class="font-bold text-xl font-mono mb-8">Stable Difussion Multiplayer</h2>
13
  <p>
14
  Powered by Hugging Face face GPU Spaces <a
frontend/src/lib/PromptModal.svelte CHANGED
@@ -63,7 +63,7 @@
63
  </script>
64
 
65
  <form
66
- class="fixed w-screen top-0 left-0 bottom-0 right-0 max-h-screen z-50 flex items-center justify-center bg-black bg-opacity-80"
67
  on:submit|preventDefault|stopPropagation={onPrompt}
68
  >
69
  <div
 
63
  </script>
64
 
65
  <form
66
+ class="fixed w-screen top-0 left-0 bottom-0 right-0 h-screen z-50 flex items-center justify-center bg-black bg-opacity-80"
67
  on:submit|preventDefault|stopPropagation={onPrompt}
68
  >
69
  <div
frontend/src/routes/+page.svelte CHANGED
@@ -4,6 +4,7 @@
4
  import type { Client } from '@liveblocks/client';
5
  import LiveblocksProvider from '$lib/liveblocks/LiveblocksProvider.svelte';
6
  import RoomProvider from '$lib/liveblocks/RoomProvider.svelte';
 
7
  import App from '$lib/App.svelte';
8
  import About from '$lib/About.svelte';
9
  import { PUBLIC_API_BASE } from '$env/static/public';
@@ -55,13 +56,14 @@
55
  };
56
  </script>
57
 
58
- <About
59
- classList={$toggleAbout ? 'flex' : 'hidden'}
60
- on:click={() => ($toggleAbout = false)}
61
- {loading}
62
- />
63
 
64
- {#if !loading}
 
 
 
 
 
65
  <LiveblocksProvider {client}>
66
  {#if roomId}
67
  <RoomProvider id={roomId} {initialPresence}>
 
4
  import type { Client } from '@liveblocks/client';
5
  import LiveblocksProvider from '$lib/liveblocks/LiveblocksProvider.svelte';
6
  import RoomProvider from '$lib/liveblocks/RoomProvider.svelte';
7
+ import LoadingIcon from '$lib/Icons/LoadingIcon.svelte';
8
  import App from '$lib/App.svelte';
9
  import About from '$lib/About.svelte';
10
  import { PUBLIC_API_BASE } from '$env/static/public';
 
56
  };
57
  </script>
58
 
59
+ <About classList={$toggleAbout ? 'flex' : 'hidden'} on:click={() => ($toggleAbout = false)} />
 
 
 
 
60
 
61
+ {#if loading}
62
+ <div class="text-4xl text-black flex justify-center items-center mb-4 w-screen h-screen">
63
+ <LoadingIcon classList={'inline-block animate-spin p-1 mr-2'} />
64
+ <h1 class="font-bold inline-block">Loading...</h1>
65
+ </div>
66
+ {:else}
67
  <LiveblocksProvider {client}>
68
  {#if roomId}
69
  <RoomProvider id={roomId} {initialPresence}>