Skip to content

Commit 4be6972

Browse files
committed
Simple users page
1 parent 2092597 commit 4be6972

File tree

11 files changed

+761
-528
lines changed

11 files changed

+761
-528
lines changed

package-lock.json

Lines changed: 0 additions & 15 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

src/main/web/App.svelte

Lines changed: 76 additions & 74 deletions
Original file line numberDiff line numberDiff line change
@@ -1,74 +1,76 @@
1-
<script lang="ts">
2-
import Header from "./lib/Header.svelte";
3-
import Footer from "./lib/Footer.svelte";
4-
import ConsoleTab from "./lib/tabs/ConsoleTab/ConsoleTab.svelte";
5-
import SettingsTab from "./lib/tabs/SettingsTab/SettingsTab.svelte";
6-
import PlayersTab from "./lib/tabs/PlayersTab/PlayersTab.svelte";
7-
import Login from "./lib/Login.svelte";
8-
import ToastSystem from "./scripts/toastSystem";
9-
import icon from "./assets/icon_clearbg.png";
10-
import "./styles/tailwind.css";
11-
import "./styles/style.scss";
12-
import UsersTab from "./lib/tabs/UsersTab/UsersTab.svelte";
13-
14-
window.addEventListener("load", async () => {
15-
// ? remove loading screen
16-
document.querySelector<HTMLDivElement>(".loading")!.style.display = "none";
17-
});
18-
</script>
19-
20-
<Footer />
21-
22-
{#if window.location.pathname === "/BadConnection"}
23-
<main class="h-screen content-center">
24-
<div class="flex justify-center">
25-
<a href="/"><img src={icon} alt="icon" /></a>
26-
<div class="ml-[20px] flex flex-col content-center justify-center font-['Nunito'] text-[20px]">
27-
<h1>Oh no!</h1>
28-
<h1>It seems like you have a bad connection to the server.</h1>
29-
<h1>Try to refresh the page or check your internet connection.</h1>
30-
<h1>Good luck!</h1>
31-
</div>
32-
</div>
33-
</main>
34-
{:else}
35-
<Header />
36-
37-
<main class="align-center absolute flex w-screen justify-center">
38-
<div class="tabs h-full w-full">
39-
<ConsoleTab />
40-
<SettingsTab />
41-
<PlayersTab />
42-
<UsersTab />
43-
</div>
44-
</main>
45-
46-
<Login />
47-
48-
<div class="toast-notifications" bind:this={ToastSystem.notification}></div>
49-
50-
<style lang="scss">
51-
@use "./styles/variables";
52-
@use "./styles/disabled";
53-
54-
main {
55-
height: variables.$container-height;
56-
top: variables.$header-height;
57-
58-
.tabs > div {
59-
width: 100%;
60-
height: 100%;
61-
62-
.tab-container {
63-
display: flex;
64-
align-items: center;
65-
justify-content: center;
66-
color: var(--main-text-color);
67-
transition: color 0.3s ease;
68-
top: 0;
69-
height: variables.$container-height;
70-
}
71-
}
72-
}
73-
</style>
74-
{/if}
1+
<script lang="ts">
2+
import Header from "./lib/Header.svelte";
3+
import Footer from "./lib/Footer.svelte";
4+
import ConsoleTab from "./lib/tabs/ConsoleTab/ConsoleTab.svelte";
5+
import SettingsTab from "./lib/tabs/SettingsTab/SettingsTab.svelte";
6+
import PlayersTab from "./lib/tabs/PlayersTab/PlayersTab.svelte";
7+
import UsersTab from "./lib/tabs/UsersTab/UsersTab.svelte";
8+
import Login from "./lib/Login.svelte";
9+
import Constants from "./scripts/constants";
10+
import ToastSystem from "./scripts/toastSystem";
11+
import icon from "./assets/icon_clearbg.png";
12+
import "./styles/tailwind.css";
13+
import "./styles/style.scss";
14+
15+
window.addEventListener("load", async () => {
16+
// ? remove loading screen
17+
document.querySelector<HTMLDivElement>(".loading")!.style.display = "none";
18+
});
19+
20+
</script>
21+
22+
<Footer />
23+
24+
{#if window.location.href === Constants.PAGE_BAD_CONNECTION_URL}
25+
<main class="h-screen content-center">
26+
<div class="flex justify-center">
27+
<a href="/"><img src={icon} alt="icon" /></a>
28+
<div class="ml-[20px] flex flex-col content-center justify-center font-['Nunito'] text-[20px]">
29+
<h1>Oh no!</h1>
30+
<h1>It seems like you have a bad connection to the server.</h1>
31+
<h1>Try to refresh the page or check your internet connection.</h1>
32+
<h1>Good luck!</h1>
33+
</div>
34+
</div>
35+
</main>
36+
{:else}
37+
<Header />
38+
39+
<main class="align-center absolute flex w-screen justify-center">
40+
<div class="tabs h-full w-full">
41+
<ConsoleTab />
42+
<SettingsTab />
43+
<PlayersTab />
44+
<UsersTab />
45+
</div>
46+
</main>
47+
48+
<Login />
49+
50+
<div class="toast-notifications" bind:this={ToastSystem.notification}></div>
51+
52+
<style lang="scss">
53+
@use "./styles/variables";
54+
@use "./styles/disabled";
55+
56+
main {
57+
height: variables.$container-height;
58+
top: variables.$header-height;
59+
60+
.tabs > div {
61+
width: 100%;
62+
height: 100%;
63+
64+
.tab-container {
65+
display: flex;
66+
align-items: center;
67+
justify-content: center;
68+
color: var(--main-text-color);
69+
transition: color 0.3s ease;
70+
top: 0;
71+
height: variables.$container-height;
72+
}
73+
}
74+
}
75+
</style>
76+
{/if}
Lines changed: 15 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,15 @@
1-
<script lang="ts">
2-
import ConsoleWindow from "./ConsoleWindow.svelte";
3-
import StatsWindow from "./StatsWindow.svelte";
4-
import registerHot from "../../../scripts/devMode";
5-
6-
registerHot(import.meta.hot);
7-
</script>
8-
9-
<div id="console-tab" style="display: block; /* DEFAULT TAB */">
10-
<!-- ! DEFAULT TAB -->
11-
<div class="tab-container flex-col">
12-
<h1 class="flex content-center justify-center text-[36px]">Console</h1>
13-
<div class="flex h-full w-full justify-center">
14-
<StatsWindow />
15-
<ConsoleWindow />
16-
</div>
17-
</div>
18-
</div>
1+
<script lang="ts">
2+
import ConsoleWindow from "./ConsoleWindow.svelte";
3+
import StatsWindow from "./StatsWindow.svelte";
4+
</script>
5+
6+
<div id="console-tab" style="display: block; /* DEFAULT TAB */">
7+
<!-- ! DEFAULT TAB -->
8+
<div class="tab-container flex-col">
9+
<h1 class="flex content-center justify-center text-[36px]">Console</h1>
10+
<div class="flex h-full w-full justify-center">
11+
<StatsWindow />
12+
<ConsoleWindow />
13+
</div>
14+
</div>
15+
</div>

0 commit comments

Comments
 (0)