|
1 | 1 | <script lang="ts"> |
2 | 2 | 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"; |
6 | 3 | 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"; |
7 | 7 | let { |
8 | 8 | outputDialog = $bindable(), |
9 | 9 | outputVersion = $bindable(), |
10 | 10 | editor, |
11 | 11 | recentlyCopied, |
12 | | - indent, |
13 | | - indentSize, |
14 | 12 | shouldOptimise = true, |
15 | 13 | } = $props(); |
| 14 | +
|
| 15 | + let exportAsJSON = $state(false); |
| 16 | +
|
| 17 | + function exportThing(exportAsJSON: boolean) { |
| 18 | + if (!exportAsJSON) { |
| 19 | + return convert( |
| 20 | + editor.getJSON(), |
| 21 | + "item_lore", |
| 22 | + outputVersion, |
| 23 | + shouldOptimise, |
| 24 | + ); |
| 25 | + } |
| 26 | + return translateJSON(editor.getJSON(), { |
| 27 | + exportType: "item_lore", |
| 28 | + exportVersion: outputVersion, |
| 29 | + optimise: shouldOptimise, |
| 30 | + }); |
| 31 | + } |
16 | 32 | </script> |
17 | 33 |
|
18 | 34 | <Modal title="More output formats" bind:this={outputDialog} big key="E"> |
|
21 | 37 | <option value="new">1.21.5+</option> |
22 | 38 | <option value="old">Before 1.21.5</option> |
23 | 39 | </select> |
24 | | - <div class="mt-2 flex w-full flex-col"> |
25 | | - <p>For tellraw commands (send to chat):</p> |
| 40 | + <div class="flex w-full flex-col"> |
| 41 | + {#if outputVersion == "new"} |
| 42 | + <div class="flex items-center space-x-2 mt-1"> |
| 43 | + <CheckBox bind:value={exportAsJSON} label="json" /> |
| 44 | + <span>Toggle JSON mode (for use in json files)</span> |
| 45 | + </div> |
| 46 | + {/if} |
| 47 | + |
| 48 | + <p class="mt-2">As {outputVersion == "new" ? " " : "JSON "}text components:</p> |
26 | 49 | <div class="flex items-start space-x-3 rounded-lg bg-zinc-950 p-3"> |
27 | 50 | <button |
28 | 51 | class="rounded-md p-1 text-lg font-medium hover:bg-zinc-900 active:bg-white/10" |
29 | 52 | onclick={() => { |
30 | 53 | navigator.clipboard.writeText( |
31 | | - "/tellraw @s " + |
32 | | - convert( |
33 | | - editor.getJSON(), |
34 | | - "standard", |
35 | | - outputVersion, |
36 | | - shouldOptimise, |
37 | | - ), |
| 54 | + convert( |
| 55 | + editor.getJSON(), |
| 56 | + "standard", |
| 57 | + outputVersion, |
| 58 | + shouldOptimise, |
| 59 | + exportAsJSON |
| 60 | + ), |
38 | 61 | ); |
39 | 62 | recentlyCopied = true; |
40 | 63 | setTimeout(() => (recentlyCopied = false), 2000); |
41 | 64 | }}> |
42 | 65 | <IconCopy /> |
43 | 66 | </button> |
44 | | - <code class="inline-block max-h-56 w-full overflow-auto" |
45 | | - >/tellraw @s {editor |
46 | | - ? convert(editor.getJSON(), "standard", outputVersion, shouldOptimise) |
| 67 | + <code class="inline-block max-h-56 w-full overflow-auto"> |
| 68 | + {editor |
| 69 | + ? convert(editor.getJSON(), "standard", outputVersion, shouldOptimise, exportAsJSON) |
47 | 70 | : "Loading..."} |
48 | 71 | </code> |
49 | 72 | </div> |
|
54 | 77 | class="rounded-md p-1 text-lg font-medium hover:bg-zinc-900 active:bg-white/10" |
55 | 78 | onclick={() => { |
56 | 79 | navigator.clipboard.writeText( |
57 | | - `[lore=${convert(editor.getJSON(), "item_lore", outputVersion, shouldOptimise)}]`, |
| 80 | + `[lore=${convert(editor.getJSON(), "item_lore", outputVersion, shouldOptimise, exportAsJSON)}]`, |
58 | 81 | ); |
59 | 82 | recentlyCopied = true; |
60 | 83 | setTimeout(() => (recentlyCopied = false), 2000); |
61 | 84 | }}> |
62 | 85 | <IconCopy /> |
63 | 86 | </button> |
64 | | - {#if outputVersion == "new"} |
65 | 87 | <code class="inline-block max-h-56 w-full overflow-auto" |
66 | | - >[lore={editor |
| 88 | + ><span class="text-white/35">[lore=</span>{editor |
67 | 89 | ? convert( |
68 | | - editor.getJSON(), |
69 | | - "item_lore", |
70 | | - outputVersion, |
71 | | - shouldOptimise, |
72 | | - ) |
73 | | - : "Loading..."}] |
74 | | - </code> |
75 | | - {:else} |
76 | | - <code class="inline-block max-h-56 w-full overflow-auto" |
77 | | - >[lore={editor |
78 | | - ? `'${translateJSON(editor.getJSON(), { |
79 | | - exportType: "item_lore", |
80 | | - exportVersion: outputVersion, |
81 | | - optimise: shouldOptimise, |
82 | | - })}` |
83 | | - : "Loading..."}] |
| 90 | + editor.getJSON(), |
| 91 | + "item_lore", |
| 92 | + outputVersion, |
| 93 | + shouldOptimise, |
| 94 | + exportAsJSON |
| 95 | + ) |
| 96 | + : "Loading..."}<span class="text-white/35">]</span> |
84 | 97 | </code> |
85 | | - {/if} |
86 | 98 | </div> |
87 | 99 |
|
88 | 100 | <p class="mt-2">As a MOTD:</p> |
|
103 | 115 | </code> |
104 | 116 | </div> |
105 | 117 |
|
106 | | - <p class="mt-2">As JSON:</p> |
| 118 | + <!-- <p class="mt-2">As JSON:</p> |
107 | 119 | <div class="flex items-start space-x-3 rounded-lg bg-zinc-950 p-3"> |
108 | 120 | <button |
109 | 121 | class="rounded-md p-1 text-lg font-medium hover:bg-zinc-900 active:bg-white/10" |
|
154 | 166 | min="1" |
155 | 167 | bind:value={indentSize} |
156 | 168 | class="w-fit rounded-md bg-zinc-900 p-2" /> |
157 | | - {/if} |
| 169 | + {/if} --> |
158 | 170 | </div> |
159 | 171 | </Modal> |
0 commit comments