Skip to content

Commit acd9c3b

Browse files
HoodieRocksHoodieRocks
committed
checkbox component, darker export template, export as json button
1 parent 91be960 commit acd9c3b

File tree

5 files changed

+78
-66
lines changed

5 files changed

+78
-66
lines changed

‎src/app.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
<link rel="shortcut icon" href="/favicon.ico" />
88
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
99
<meta name="apple-mobile-web-app-title" content="Text Editor" />
10-
<link rel="manifest" href="/site.webmanifest"/>
10+
<link rel="manifest" href="/site.webmanifest" />
1111
<link
1212
rel="preload"
1313
as="font"

‎src/lib/components/CheckBox.svelte‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
<script lang="ts">
2+
import IconTick from "~icons/tabler/check";
3+
4+
let { value = $bindable(), label }: { value: boolean; label: string } =
5+
$props();
6+
</script>
7+
8+
<div class="mt-2 flex items-center gap-2">
9+
<button
10+
name={label}
11+
class="flex aspect-square size-8 flex-col items-center rounded-md bg-zinc-900"
12+
onclick={() => (value = !value)}>
13+
{#if value}
14+
<IconTick class="m-auto text-lg" />
15+
{/if}
16+
</button>
17+
</div>

‎src/lib/components/modals/CustomSourceModal.svelte‎

Lines changed: 5 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
11
<script lang="ts">
22
import Modal from "$lib/components/Modal.svelte";
3-
import IconTick from "~icons/tabler/check";
3+
import type { ExternalSources } from "$lib/types";
44
import IconScore from "~icons/tabler/123";
55
import IconSelector from "~icons/tabler/at";
66
import IconNBT from "~icons/tabler/braces";
77
import IconKeybind from "~icons/tabler/keyboard";
88
import IconTranslate from "~icons/tabler/language";
9-
import type { ExternalSources } from "$lib/types";
9+
import CheckBox from "../CheckBox.svelte";
1010
import MiniEditor from "../MiniEditor.svelte";
1111
1212
let {
@@ -214,14 +214,7 @@
214214
bind:value={customValues.nbt.path} />
215215

216216
<div class="mt-2 flex items-center space-x-2">
217-
<button
218-
class="flex aspect-square size-8 flex-col items-center rounded-md bg-zinc-900"
219-
onclick={() =>
220-
(customValues.nbt.interpret = !customValues.nbt.interpret)}>
221-
{#if customValues.nbt.interpret}
222-
<IconTick class="m-auto text-lg" />
223-
{/if}
224-
</button>
217+
<CheckBox bind:value={customValues.nbt.interpret} label="interpret" />
225218
<label for="interpret"
226219
>Interpret (parse nbt value as a text component)</label>
227220
</div>
@@ -258,14 +251,7 @@
258251
bind:value={customValues.nbt.path} />
259252

260253
<div class="mt-2 flex items-center space-x-2">
261-
<button
262-
class="flex aspect-square size-8 flex-col items-center rounded-md bg-zinc-900"
263-
onclick={() =>
264-
(customValues.nbt.interpret = !customValues.nbt.interpret)}>
265-
{#if customValues.nbt.interpret}
266-
<IconTick class="m-auto text-lg" />
267-
{/if}
268-
</button>
254+
<CheckBox bind:value={customValues.nbt.interpret} label="interpret" />
269255
<label for="interpret"
270256
>Interpret (parse nbt value as a text component)</label>
271257
</div>
@@ -302,14 +288,7 @@
302288
bind:value={customValues.nbt.path} />
303289

304290
<div class="mt-2 flex items-center space-x-2">
305-
<button
306-
class="flex aspect-square size-8 flex-col items-center rounded-md bg-zinc-900"
307-
onclick={() =>
308-
(customValues.nbt.interpret = !customValues.nbt.interpret)}>
309-
{#if customValues.nbt.interpret}
310-
<IconTick class="m-auto text-lg" />
311-
{/if}
312-
</button>
291+
<CheckBox bind:value={customValues.nbt.interpret} label="interpret" />
313292
<label for="interpret"
314293
>Interpret (parse nbt value as a text component)</label>
315294
</div>

‎src/lib/components/modals/ExportModal.svelte‎

Lines changed: 32 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
<script lang="ts">
22
import Modal from "$lib/components/Modal.svelte";
3-
import IconCopy from "~icons/tabler/copy";
4-
import IconTick from "~icons/tabler/check";
5-
import { translateJSON, convert } from "$lib/text/nbt_or_json";
63
import { translateMOTD } from "$lib/text/motd";
4+
import { convert, translateJSON } from "$lib/text/nbt_or_json";
5+
import IconCopy from "~icons/tabler/copy";
6+
import CheckBox from "../CheckBox.svelte";
77
let {
88
outputDialog = $bindable(),
99
outputVersion = $bindable(),
@@ -13,6 +13,24 @@
1313
indentSize,
1414
shouldOptimise = true,
1515
} = $props();
16+
17+
let exportAsJSON = $state(false);
18+
19+
function exportThing(exportAsJSON: boolean) {
20+
if (!exportAsJSON) {
21+
return convert(
22+
editor.getJSON(),
23+
"item_lore",
24+
outputVersion,
25+
shouldOptimise,
26+
);
27+
}
28+
return translateJSON(editor.getJSON(), {
29+
exportType: "item_lore",
30+
exportVersion: outputVersion,
31+
optimise: shouldOptimise,
32+
});
33+
}
1634
</script>
1735

1836
<Modal title="More output formats" bind:this={outputDialog} big key="E">
@@ -42,7 +60,8 @@
4260
<IconCopy />
4361
</button>
4462
<code class="inline-block max-h-56 w-full overflow-auto"
45-
>/tellraw @s {editor
63+
><span class="text-white/60">/tellraw @s</span>
64+
{editor
4665
? convert(editor.getJSON(), "standard", outputVersion, shouldOptimise)
4766
: "Loading..."}
4867
</code>
@@ -63,24 +82,21 @@
6382
</button>
6483
{#if outputVersion == "new"}
6584
<code class="inline-block max-h-56 w-full overflow-auto"
66-
>[lore={editor
67-
? convert(
68-
editor.getJSON(),
69-
"item_lore",
70-
outputVersion,
71-
shouldOptimise,
72-
)
73-
: "Loading..."}]
85+
><span class="text-white/60">[lore=</span>{editor
86+
? exportThing(exportAsJSON)
87+
: "Loading..."}<span class="text-white/60">]</span>
7488
</code>
89+
<CheckBox bind:value={exportAsJSON} label="json" />
90+
<label for="json">Export as JSON</label>
7591
{:else}
7692
<code class="inline-block max-h-56 w-full overflow-auto"
77-
>[lore={editor
93+
><span class="text-white/60">[lore=</span>{editor
7894
? `'${translateJSON(editor.getJSON(), {
7995
exportType: "item_lore",
8096
exportVersion: outputVersion,
8197
optimise: shouldOptimise,
8298
})}`
83-
: "Loading..."}]
99+
: "Loading..."}'<span class="text-white/60">]</span>
84100
</code>
85101
{/if}
86102
</div>
@@ -103,7 +119,7 @@
103119
</code>
104120
</div>
105121

106-
<p class="mt-2">As JSON:</p>
122+
<!-- <p class="mt-2">As JSON:</p>
107123
<div class="flex items-start space-x-3 rounded-lg bg-zinc-950 p-3">
108124
<button
109125
class="rounded-md p-1 text-lg font-medium hover:bg-zinc-900 active:bg-white/10"
@@ -154,6 +170,6 @@
154170
min="1"
155171
bind:value={indentSize}
156172
class="w-fit rounded-md bg-zinc-900 p-2" />
157-
{/if}
173+
{/if} -->
158174
</div>
159175
</Modal>

‎static/site.webmanifest‎

Lines changed: 23 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,24 @@
11
{
2-
"$schema": "https://json.schemastore.org/web-manifest-combined.json",
3-
"name": "Datapack Hub Text Editor",
4-
"short_name": "Text Editor",
5-
"icons": [
6-
{
7-
"src": "/web-app-manifest-192x192.png",
8-
"sizes": "192x192",
9-
"type": "image/png",
10-
"purpose": "maskable"
11-
},
12-
{
13-
"src": "/web-app-manifest-512x512.png",
14-
"sizes": "512x512",
15-
"type": "image/png",
16-
"purpose": "maskable"
17-
}
18-
],
19-
"start_url": ".",
20-
"description": "Minecraft Tellraw Editor for Java Edition. Create colored Minecraft /tellraw, /title, and items with our easy to use editor (especially for datapacks).",
21-
"theme_color": "#ff631a",
22-
"background_color": "#27272a",
23-
"display": "standalone"
24-
}
2+
"$schema": "https://json.schemastore.org/web-manifest-combined.json",
3+
"name": "Datapack Hub Text Editor",
4+
"short_name": "Text Editor",
5+
"icons": [
6+
{
7+
"src": "/web-app-manifest-192x192.png",
8+
"sizes": "192x192",
9+
"type": "image/png",
10+
"purpose": "maskable"
11+
},
12+
{
13+
"src": "/web-app-manifest-512x512.png",
14+
"sizes": "512x512",
15+
"type": "image/png",
16+
"purpose": "maskable"
17+
}
18+
],
19+
"start_url": ".",
20+
"description": "Minecraft Tellraw Editor for Java Edition. Create colored Minecraft /tellraw, /title, and items with our easy to use editor (especially for datapacks).",
21+
"theme_color": "#ff631a",
22+
"background_color": "#27272a",
23+
"display": "standalone"
24+
}

0 commit comments

Comments
 (0)