Skip to content

Commit

Permalink
Svelte 5
Browse files Browse the repository at this point in the history
  • Loading branch information
@DxsSucuk
DxsSucuk committed Oct 23, 2024
1 parent 0217153 commit b1bd4f0
Show file tree
Hide file tree
Showing 37 changed files with 1,192 additions and 603 deletions.
974 changes: 637 additions & 337 deletions Frontend/package-lock.json
View file

Large diffs are not rendered by default.

8 changes: 4 additions & 4 deletions Frontend/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,12 +12,12 @@
"devDependencies": {
"@sveltejs/adapter-auto": "^3.0.0",
"@sveltejs/adapter-netlify": "^4.0.0",
"@sveltejs/kit": "^2.0.0",
"svelte": "^4.0.0",
"@sveltejs/kit": "^2.5.27",
"svelte": "^5.0.0",
"svelte-check": "^4.0.0",
"tslib": "^2.4.1",
"typescript": "^5.0.0",
"vite": "^5.0.0"
"typescript": "^5.5.0",
"vite": "^5.4.4"
},
"type": "module",
"dependencies": {
Expand Down
31 changes: 22 additions & 9 deletions Frontend/src/lib/components/channelPicker.svelte
View file
Original file line number Diff line number Diff line change
@@ -1,13 +1,26 @@
<script lang="ts">
import { createBubbler } from 'svelte/legacy';
const bubble = createBubbler();
import { currentChannels, type Channel } from "$lib/scripts/servers";
import { onDestroy, onMount } from "svelte";
import { fade, scale } from "svelte/transition";
export let current: Channel;
export let message: string;
export let type: string = "TEXT";
export let zIndex: number = 100;
export let callback: (id: Channel | undefined) => void;
interface Props {
current: Channel;
message: string;
type?: string;
zIndex?: number;
callback: (id: Channel | undefined) => void;
}
let {
current,
message,
type = "TEXT",
zIndex = 100,
callback
}: Props = $props();
let channels: Channel[] = []
let sub = currentChannels.subscribe((entities) => {
Expand All @@ -30,23 +43,23 @@

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

<div class="content">
<div class="channels">
{#each channels as channel}
<div on:click={() => callback(channel)} on:keydown
<div onclick={() => callback(channel)} onkeydown={bubble('keydown')}
class="channel clickable {current.id == channel.id ? 'selected' : ''}">
<span class="material-icons icon-primary icon-small">{channel.type == "TEXT" ? "tag" : channel.type == "CATEGORY" ? "folder" : "graphic_eq"}</span>
<div class="name">{channel.name}</div>
</div>
{/each}
<div on:click={() => callback({
<div onclick={() => callback({
id: "-1",
name: "hi",
type: "TEXT"
})} on:keydown
})} onkeydown={bubble('keydown')}
class="channel clickable {current.id == null ? 'selected' : ''}">
<span class="material-icons icon-primary icon-small">close</span>
<div class="name">None</div>
Expand Down
26 changes: 19 additions & 7 deletions Frontend/src/lib/components/confirmPopup.svelte
View file
Original file line number Diff line number Diff line change
@@ -1,10 +1,22 @@
<script lang="ts">
import { createBubbler } from 'svelte/legacy';
const bubble = createBubbler();
import { fade, scale } from "svelte/transition";
export let title: string;
export let content: string;
export let zIndex: number = 100;
export let close: (confirmed: boolean) => void;
interface Props {
title: string;
content: string;
zIndex?: number;
close: (confirmed: boolean) => void;
}
let {
title,
content,
zIndex = 100,
close
}: Props = $props();
</script>

Expand All @@ -13,7 +25,7 @@

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

<div class="content text-small">
Expand All @@ -23,8 +35,8 @@
</div>

<div class="buttons">
<button class="text-medium" on:click={() => close(true)}>Yes</button>
<button class="text-medium" on:click={() => close(false)}>No</button>
<button class="text-medium" onclick={() => close(true)}>Yes</button>
<button class="text-medium" onclick={() => close(false)}>No</button>
</div>
</div>
</div>
Expand Down
19 changes: 13 additions & 6 deletions Frontend/src/lib/components/data_popup/channelValue.svelte
View file
Original file line number Diff line number Diff line change
@@ -1,14 +1,21 @@
<script lang="ts">
import { createBubbler } from 'svelte/legacy';
const bubble = createBubbler();
import type { Channel } from "$lib/scripts/servers";
import ChannelPicker from "../channelPicker.svelte";
export let current: Channel = {
interface Props {
current?: Channel;
callback: (value: Channel) => void;
picking?: boolean;
}
let { current = $bindable({
id: null,
name: null,
type: "TEXT"
};
export let callback: (value: Channel) => void;
export let picking = false;
}), callback, picking = $bindable(false) }: Props = $props();
</script>

Expand All @@ -31,9 +38,9 @@
}} />
{/if}

<div class="chip chip-hover clickable" on:click={() => {
<div class="chip chip-hover clickable" onclick={() => {
picking = true;
}} on:keydown>
}} onkeydown={bubble('keydown')}>
{#if current.id != null}
<span class="material-icons icon-primary">tag</span>
<p class="text-small">{current.name}</p>
Expand Down
42 changes: 29 additions & 13 deletions Frontend/src/lib/components/data_popup/dataPopup.svelte
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,7 @@
<script lang="ts">
import { createBubbler } from 'svelte/legacy';
const bubble = createBubbler();
import { fade, scale } from "svelte/transition";
import type { DataType } from "./popup";
import { onMount } from "svelte";
Expand All @@ -8,18 +11,31 @@
import IntValue from "./intValue.svelte";
import SelectorValue from "./selectorValue.svelte";
export let title: string;
export let zIndex = 50;
let content: DataType<any>[] = [];
export let builder: () => DataType<any>[];
export let action1: string | undefined = undefined;
export let action1Handler: ((data: DataType<any>[]) => void) | undefined = undefined;
export let action2: string | undefined = undefined;
export let action2Handler: ((data: DataType<any>[]) => void) | undefined = undefined;
let content: DataType<any>[] = $state([]);
interface Props {
title: string;
zIndex?: number;
builder: () => DataType<any>[];
action1?: string | undefined;
action1Handler?: ((data: DataType<any>[]) => void) | undefined;
action2?: string | undefined;
action2Handler?: ((data: DataType<any>[]) => void) | undefined;
close: () => void;
}
export let close: () => void;
let {
title,
zIndex = 50,
builder,
action1 = undefined,
action1Handler = undefined,
action2 = undefined,
action2Handler = undefined,
close
}: Props = $props();
onMount(() => {
content = builder();
Expand All @@ -32,7 +48,7 @@

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

<div class="content">
Expand Down Expand Up @@ -60,10 +76,10 @@

<div class="buttons default-margin">
{#if action1 != undefined}
<button class="text-medium" on:click={() => (action1Handler ?? (() => {}))(content)} on:keydown>{action1}</button>
<button class="text-medium" onclick={() => (action1Handler ?? (() => {}))(content)} onkeydown={bubble('keydown')}>{action1}</button>
{/if}
{#if action2 != undefined}
<button class="text-medium" on:click={() => (action2Handler ?? (() => {}))(content)} on:keydown>{action2}</button>
<button class="text-medium" onclick={() => (action2Handler ?? (() => {}))(content)} onkeydown={bubble('keydown')}>{action2}</button>
{/if}
</div>
</div>
Expand Down
30 changes: 21 additions & 9 deletions Frontend/src/lib/components/data_popup/intValue.svelte
View file
Original file line number Diff line number Diff line change
@@ -1,18 +1,30 @@
<script lang="ts">
import { createBubbler } from 'svelte/legacy';
export let current: number | null = null;
export let callback: (value: number | null) => void;
export let picking = false;
export let unit = "";
const bubble = createBubbler();
let writing: string;
interface Props {
current?: number | null;
callback: (value: number | null) => void;
picking?: boolean;
unit?: string;
}
let {
current = $bindable(null),
callback,
picking = $bindable(false),
unit = ""
}: Props = $props();
let writing: string = $state();
</script>

{#if picking}
<div class="flex">
<input bind:value={writing} placeholder="Any integer" />
<span class="material-icons button icon-primary icon-button better-hover" on:click={() => {
<span class="material-icons button icon-primary icon-button better-hover" onclick={() => {
picking = false;
try {
current = parseInt(writing);
Expand All @@ -23,13 +35,13 @@
current = null;
}
callback(current);
}} on:keydown>check</span>
}} onkeydown={bubble('keydown')}>check</span>
</div>
{:else}
<div class="chip chip-hover clickable" on:click={() => {
<div class="chip chip-hover clickable" onclick={() => {
picking = true;
writing = current == null ? "" : current.toString();
}} on:keydown>
}} onkeydown={bubble('keydown')}>
{#if current == null}
<span class="material-icons icon-primary">close</span>
<p class="text-small">Nothing</p>
Expand Down
17 changes: 12 additions & 5 deletions Frontend/src/lib/components/data_popup/roleValue.svelte
View file
Original file line number Diff line number Diff line change
@@ -1,10 +1,17 @@
<script lang="ts">
import { createBubbler } from 'svelte/legacy';
const bubble = createBubbler();
import type { Role } from "$lib/scripts/servers";
import RolePicker from "../rolePicker.svelte";
export let current: Role | null = null;
export let callback: (value: Role | null) => void;
export let picking = false;
interface Props {
current?: Role | null;
callback: (value: Role | null) => void;
picking?: boolean;
}
let { current = $bindable(null), callback, picking = $bindable(false) }: Props = $props();
</script>

Expand All @@ -16,9 +23,9 @@
}} />
{/if}

<div class="chip chip-hover clickable" on:click={() => {
<div class="chip chip-hover clickable" onclick={() => {
picking = true;
}} on:keydown>
}} onkeydown={bubble('keydown')}>
{#if current != null}
<span class="material-icons" style={"color: #" + current.color.toString(16) + ";"}>military_tech</span>
<p class="text-small">{current?.name}</p>
Expand Down
24 changes: 18 additions & 6 deletions Frontend/src/lib/components/data_popup/selectorValue.svelte
View file
Original file line number Diff line number Diff line change
@@ -1,10 +1,22 @@
<script lang="ts">
import { createBubbler } from 'svelte/legacy';
const bubble = createBubbler();
import StringPicker from "../stringPicker.svelte";
export let current: string | null = null;
export let strings: string[] = []
export let callback: (value: string | null) => void;
export let picking = false;
interface Props {
current?: string | null;
strings?: string[];
callback: (value: string | null) => void;
picking?: boolean;
}
let {
current = $bindable(null),
strings = [],
callback,
picking = $bindable(false)
}: Props = $props();
</script>

Expand All @@ -21,9 +33,9 @@
}} />
{/if}

<div class="chip chip-hover clickable" on:click={() => {
<div class="chip chip-hover clickable" onclick={() => {
picking = true;
}} on:keydown>
}} onkeydown={bubble('keydown')}>
{#if current != null}
<p class="text-small">{strings.filter((value, _) => value.split(":")[0] == current)[0].split(":")[1]}</p>
{:else}
Expand Down
Loading

0 comments on commit b1bd4f0

Please sign in to comment.