Skip to content

Commit b1bd4f0

Browse files
DxsSucukDxsSucuk
committed
Svelte 5
1 parent 0217153 commit b1bd4f0

37 files changed

+1192
-603
lines changed

‎Frontend/package-lock.json‎

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

‎Frontend/package.json‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -12,12 +12,12 @@
1212
"devDependencies": {
1313
"@sveltejs/adapter-auto": "^3.0.0",
1414
"@sveltejs/adapter-netlify": "^4.0.0",
15-
"@sveltejs/kit": "^2.0.0",
16-
"svelte": "^4.0.0",
15+
"@sveltejs/kit": "^2.5.27",
16+
"svelte": "^5.0.0",
1717
"svelte-check": "^4.0.0",
1818
"tslib": "^2.4.1",
19-
"typescript": "^5.0.0",
20-
"vite": "^5.0.0"
19+
"typescript": "^5.5.0",
20+
"vite": "^5.4.4"
2121
},
2222
"type": "module",
2323
"dependencies": {

‎Frontend/src/lib/components/channelPicker.svelte‎

Lines changed: 22 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,26 @@
11
<script lang="ts">
2+
import { createBubbler } from 'svelte/legacy';
3+
4+
const bubble = createBubbler();
25
import { currentChannels, type Channel } from "$lib/scripts/servers";
36
import { onDestroy, onMount } from "svelte";
47
import { fade, scale } from "svelte/transition";
58
6-
export let current: Channel;
7-
export let message: string;
8-
export let type: string = "TEXT";
9-
export let zIndex: number = 100;
10-
export let callback: (id: Channel | undefined) => void;
9+
interface Props {
10+
current: Channel;
11+
message: string;
12+
type?: string;
13+
zIndex?: number;
14+
callback: (id: Channel | undefined) => void;
15+
}
16+
17+
let {
18+
current,
19+
message,
20+
type = "TEXT",
21+
zIndex = 100,
22+
callback
23+
}: Props = $props();
1124
1225
let channels: Channel[] = []
1326
let sub = currentChannels.subscribe((entities) => {
@@ -30,23 +43,23 @@
3043

3144
<div class="header">
3245
<h2>{message}</h2>
33-
<span on:click={close} on:keydown class="material-icons icon-medium clickable hover-primary">close</span>
46+
<span onclick={close} onkeydown={bubble('keydown')} class="material-icons icon-medium clickable hover-primary">close</span>
3447
</div>
3548

3649
<div class="content">
3750
<div class="channels">
3851
{#each channels as channel}
39-
<div on:click={() => callback(channel)} on:keydown
52+
<div onclick={() => callback(channel)} onkeydown={bubble('keydown')}
4053
class="channel clickable {current.id == channel.id ? 'selected' : ''}">
4154
<span class="material-icons icon-primary icon-small">{channel.type == "TEXT" ? "tag" : channel.type == "CATEGORY" ? "folder" : "graphic_eq"}</span>
4255
<div class="name">{channel.name}</div>
4356
</div>
4457
{/each}
45-
<div on:click={() => callback({
58+
<div onclick={() => callback({
4659
id: "-1",
4760
name: "hi",
4861
type: "TEXT"
49-
})} on:keydown
62+
})} onkeydown={bubble('keydown')}
5063
class="channel clickable {current.id == null ? 'selected' : ''}">
5164
<span class="material-icons icon-primary icon-small">close</span>
5265
<div class="name">None</div>

‎Frontend/src/lib/components/confirmPopup.svelte‎

Lines changed: 19 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,22 @@
11
<script lang="ts">
2+
import { createBubbler } from 'svelte/legacy';
3+
4+
const bubble = createBubbler();
25
import { fade, scale } from "svelte/transition";
36
4-
export let title: string;
5-
export let content: string;
6-
export let zIndex: number = 100;
7-
export let close: (confirmed: boolean) => void;
7+
interface Props {
8+
title: string;
9+
content: string;
10+
zIndex?: number;
11+
close: (confirmed: boolean) => void;
12+
}
13+
14+
let {
15+
title,
16+
content,
17+
zIndex = 100,
18+
close
19+
}: Props = $props();
820
921
</script>
1022

@@ -13,7 +25,7 @@
1325

1426
<div class="header">
1527
<h2 class="text-large">{title}</h2>
16-
<span on:click={() => close(false)} on:keydown class="material-icons icon-medium clickable hover-primary">close</span>
28+
<span onclick={() => close(false)} onkeydown={bubble('keydown')} class="material-icons icon-medium clickable hover-primary">close</span>
1729
</div>
1830

1931
<div class="content text-small">
@@ -23,8 +35,8 @@
2335
</div>
2436

2537
<div class="buttons">
26-
<button class="text-medium" on:click={() => close(true)}>Yes</button>
27-
<button class="text-medium" on:click={() => close(false)}>No</button>
38+
<button class="text-medium" onclick={() => close(true)}>Yes</button>
39+
<button class="text-medium" onclick={() => close(false)}>No</button>
2840
</div>
2941
</div>
3042
</div>

‎Frontend/src/lib/components/data_popup/channelValue.svelte‎

Lines changed: 13 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,21 @@
11
<script lang="ts">
2+
import { createBubbler } from 'svelte/legacy';
3+
4+
const bubble = createBubbler();
25
import type { Channel } from "$lib/scripts/servers";
36
import ChannelPicker from "../channelPicker.svelte";
47
5-
export let current: Channel = {
8+
interface Props {
9+
current?: Channel;
10+
callback: (value: Channel) => void;
11+
picking?: boolean;
12+
}
13+
14+
let { current = $bindable({
615
id: null,
716
name: null,
817
type: "TEXT"
9-
};
10-
export let callback: (value: Channel) => void;
11-
export let picking = false;
18+
}), callback, picking = $bindable(false) }: Props = $props();
1219
1320
</script>
1421

@@ -31,9 +38,9 @@
3138
}} />
3239
{/if}
3340

34-
<div class="chip chip-hover clickable" on:click={() => {
41+
<div class="chip chip-hover clickable" onclick={() => {
3542
picking = true;
36-
}} on:keydown>
43+
}} onkeydown={bubble('keydown')}>
3744
{#if current.id != null}
3845
<span class="material-icons icon-primary">tag</span>
3946
<p class="text-small">{current.name}</p>

‎Frontend/src/lib/components/data_popup/dataPopup.svelte‎

Lines changed: 29 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,7 @@
11
<script lang="ts">
2+
import { createBubbler } from 'svelte/legacy';
3+
4+
const bubble = createBubbler();
25
import { fade, scale } from "svelte/transition";
36
import type { DataType } from "./popup";
47
import { onMount } from "svelte";
@@ -8,18 +11,31 @@
811
import IntValue from "./intValue.svelte";
912
import SelectorValue from "./selectorValue.svelte";
1013
11-
export let title: string;
12-
export let zIndex = 50;
1314
14-
let content: DataType<any>[] = [];
15-
export let builder: () => DataType<any>[];
16-
17-
export let action1: string | undefined = undefined;
18-
export let action1Handler: ((data: DataType<any>[]) => void) | undefined = undefined;
19-
export let action2: string | undefined = undefined;
20-
export let action2Handler: ((data: DataType<any>[]) => void) | undefined = undefined;
15+
let content: DataType<any>[] = $state([]);
16+
17+
18+
interface Props {
19+
title: string;
20+
zIndex?: number;
21+
builder: () => DataType<any>[];
22+
action1?: string | undefined;
23+
action1Handler?: ((data: DataType<any>[]) => void) | undefined;
24+
action2?: string | undefined;
25+
action2Handler?: ((data: DataType<any>[]) => void) | undefined;
26+
close: () => void;
27+
}
2128
22-
export let close: () => void;
29+
let {
30+
title,
31+
zIndex = 50,
32+
builder,
33+
action1 = undefined,
34+
action1Handler = undefined,
35+
action2 = undefined,
36+
action2Handler = undefined,
37+
close
38+
}: Props = $props();
2339
2440
onMount(() => {
2541
content = builder();
@@ -32,7 +48,7 @@
3248

3349
<div class="header">
3450
<h2>{title}</h2>
35-
<span on:click={close} on:keydown class="material-icons icon-medium clickable hover-primary">close</span>
51+
<span onclick={close} onkeydown={bubble('keydown')} class="material-icons icon-medium clickable hover-primary">close</span>
3652
</div>
3753

3854
<div class="content">
@@ -60,10 +76,10 @@
6076

6177
<div class="buttons default-margin">
6278
{#if action1 != undefined}
63-
<button class="text-medium" on:click={() => (action1Handler ?? (() => {}))(content)} on:keydown>{action1}</button>
79+
<button class="text-medium" onclick={() => (action1Handler ?? (() => {}))(content)} onkeydown={bubble('keydown')}>{action1}</button>
6480
{/if}
6581
{#if action2 != undefined}
66-
<button class="text-medium" on:click={() => (action2Handler ?? (() => {}))(content)} on:keydown>{action2}</button>
82+
<button class="text-medium" onclick={() => (action2Handler ?? (() => {}))(content)} onkeydown={bubble('keydown')}>{action2}</button>
6783
{/if}
6884
</div>
6985
</div>

‎Frontend/src/lib/components/data_popup/intValue.svelte‎

Lines changed: 21 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,30 @@
11
<script lang="ts">
2+
import { createBubbler } from 'svelte/legacy';
23
3-
export let current: number | null = null;
4-
export let callback: (value: number | null) => void;
5-
export let picking = false;
6-
export let unit = "";
4+
const bubble = createBubbler();
75
8-
let writing: string;
6+
interface Props {
7+
current?: number | null;
8+
callback: (value: number | null) => void;
9+
picking?: boolean;
10+
unit?: string;
11+
}
12+
13+
let {
14+
current = $bindable(null),
15+
callback,
16+
picking = $bindable(false),
17+
unit = ""
18+
}: Props = $props();
19+
20+
let writing: string = $state();
921
1022
</script>
1123

1224
{#if picking}
1325
<div class="flex">
1426
<input bind:value={writing} placeholder="Any integer" />
15-
<span class="material-icons button icon-primary icon-button better-hover" on:click={() => {
27+
<span class="material-icons button icon-primary icon-button better-hover" onclick={() => {
1628
picking = false;
1729
try {
1830
current = parseInt(writing);
@@ -23,13 +35,13 @@
2335
current = null;
2436
}
2537
callback(current);
26-
}} on:keydown>check</span>
38+
}} onkeydown={bubble('keydown')}>check</span>
2739
</div>
2840
{:else}
29-
<div class="chip chip-hover clickable" on:click={() => {
41+
<div class="chip chip-hover clickable" onclick={() => {
3042
picking = true;
3143
writing = current == null ? "" : current.toString();
32-
}} on:keydown>
44+
}} onkeydown={bubble('keydown')}>
3345
{#if current == null}
3446
<span class="material-icons icon-primary">close</span>
3547
<p class="text-small">Nothing</p>

‎Frontend/src/lib/components/data_popup/roleValue.svelte‎

Lines changed: 12 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,17 @@
11
<script lang="ts">
2+
import { createBubbler } from 'svelte/legacy';
3+
4+
const bubble = createBubbler();
25
import type { Role } from "$lib/scripts/servers";
36
import RolePicker from "../rolePicker.svelte";
47
5-
export let current: Role | null = null;
6-
export let callback: (value: Role | null) => void;
7-
export let picking = false;
8+
interface Props {
9+
current?: Role | null;
10+
callback: (value: Role | null) => void;
11+
picking?: boolean;
12+
}
13+
14+
let { current = $bindable(null), callback, picking = $bindable(false) }: Props = $props();
815
916
</script>
1017

@@ -16,9 +23,9 @@
1623
}} />
1724
{/if}
1825

19-
<div class="chip chip-hover clickable" on:click={() => {
26+
<div class="chip chip-hover clickable" onclick={() => {
2027
picking = true;
21-
}} on:keydown>
28+
}} onkeydown={bubble('keydown')}>
2229
{#if current != null}
2330
<span class="material-icons" style={"color: #" + current.color.toString(16) + ";"}>military_tech</span>
2431
<p class="text-small">{current?.name}</p>

‎Frontend/src/lib/components/data_popup/selectorValue.svelte‎

Lines changed: 18 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,22 @@
11
<script lang="ts">
2+
import { createBubbler } from 'svelte/legacy';
3+
4+
const bubble = createBubbler();
25
import StringPicker from "../stringPicker.svelte";
36
4-
export let current: string | null = null;
5-
export let strings: string[] = []
6-
export let callback: (value: string | null) => void;
7-
export let picking = false;
7+
interface Props {
8+
current?: string | null;
9+
strings?: string[];
10+
callback: (value: string | null) => void;
11+
picking?: boolean;
12+
}
13+
14+
let {
15+
current = $bindable(null),
16+
strings = [],
17+
callback,
18+
picking = $bindable(false)
19+
}: Props = $props();
820
921
</script>
1022

@@ -21,9 +33,9 @@
2133
}} />
2234
{/if}
2335

24-
<div class="chip chip-hover clickable" on:click={() => {
36+
<div class="chip chip-hover clickable" onclick={() => {
2537
picking = true;
26-
}} on:keydown>
38+
}} onkeydown={bubble('keydown')}>
2739
{#if current != null}
2840
<p class="text-small">{strings.filter((value, _) => value.split(":")[0] == current)[0].split(":")[1]}</p>
2941
{:else}

0 commit comments

Comments
 (0)