Welcome screen feature

src/app.css

@@ -120,6 +120,14 @@ strong {
     @apply rounded-md p-1 text-lg font-medium hover:bg-white/3;
 }
 
+.input-basic {
+    @apply rounded-md bg-zinc-900 p-2;
+}
+
+.link {
+    @apply font-bold underline;
+}
+
 .tippy-box[data-theme~="dph"] {
     background-color: var(--color-zinc-700);
     font-family: "Lexend", sans-serif;

src/lib/components/TopUI.svelte

@@ -8,7 +8,7 @@
     import IconUpload from "~icons/tabler/upload";
     import IconSettings from "~icons/tabler/settings";
 
-    const { editor }: { editor: Editor | undefined } = $props();
+    let { editor, welcomeScreenVisible = $bindable() }: { editor: Editor | undefined, welcomeScreenVisible: boolean } = $props();
 
     let snapshots = $state<object[]>([]);
     let importText: string = $state("");
@@ -34,10 +34,10 @@
 </script>
 
 <div class="flex w-full items-center bg-zinc-950 text-sm text-zinc-300" style="font-family: Lexend">
-    <div class="flex items-center px-3 py-2 hover:bg-white/3">
+    <button class="flex items-center px-3 py-2 hover:bg-white/3" onclick={() => welcomeScreenVisible = true}>
         <img src="/dph.svg" class="size-5" alt="logo" height="20" width="20" />
         <span class="nomob ml-2 font-semibold">Minecraft Text Editor</span>
-    </div>
+    </button>
     <button
         class="flex items-center space-x-[0.45rem] px-[0.6rem] py-2 hover:bg-white/3"
         onclick={importDialog?.open}>

src/lib/components/WelcomeScreen.svelte

@@ -0,0 +1,105 @@
+<script lang="ts">
+    import IconImport from "~icons/tabler/upload";
+    import IconGradient from "~icons/tabler/contrast-2";
+    import IconLore from "~icons/tabler/swords";
+    import IconCode from "~icons/tabler/code";
+    import IconClose from "~icons/tabler/X"
+    import { onMount } from "svelte";
+    import { welcomeScreenFormat } from "$lib/globals";
+
+    let { visible = $bindable(false) }: { visible: boolean } = $props()
+
+    function handleKeydown(event: KeyboardEvent) {
+        if (event.key === "Escape" && visible) {
+            visible = false;
+        }
+    }
+
+    onMount(() => {
+        let seenWelcome = localStorage.getItem("seen_welcome")
+        if (seenWelcome && seenWelcome == welcomeScreenFormat) {
+            visible = false
+        } else {
+            visible = true
+            localStorage.setItem("seen_welcome", welcomeScreenFormat);
+        }
+    })
+</script>
+
+<svelte:window onkeydown={handleKeydown} />
+
+{#if visible}
+<div class="absolute">
+    <div
+        class="fixed top-0 left-0 z-40 flex h-screen w-screen flex-col items-center overflow-auto bg-black/65 text-zinc-100"
+        style="font-family: Lexend">
+        <div
+            aria-hidden="true"
+            onclick={() => visible = false}
+            class="fixed top-0 left-0 z-40 h-screen w-screen bg-transparent"
+            tabindex="-1">
+        </div>
+        <div
+            class="z-50 w-[95%] md:w-[50%] 2xl:w-[40%] m-auto py-4">
+            <div class="flex items-center rounded-t-lg bg-zinc-900 p-2 text-xl">
+                <img src="/dph.svg" class="h-8 ml-1 " alt="logo" />  
+                <span class="text-lg font-black m-2 bg-linear-to-r from-red-500 to-yellow-500 bg-clip-text text-transparent">Minecraft Text Editor</span>
+                <div class="grow"></div>
+                <button aria-label="close" class="p-2 hover:bg-black/15 rounded-md" onclick={() => visible = false}><IconClose /></button>
+            </div>
+            <div class="rounded-b-lg px-4 pb-4 flex flex-col space-y-1 bg-zinc-900">
+                <h1 class="font-black">Welcome! </h1>
+                <p class="text-zinc-300 text-sm">With this tool, you can easily generate text components for Minecraft datapacks, tellraw commands, and more. Here's what makes us unique:</p>
+
+                <div class="grid grid-cols-1 lg:grid-cols-2 gap-2 mt-2">
+
+                    <div class="flex items-center space-x-2 bg-green-500/20 text-zinc-200 rounded-md border-green-500 p-2 border-2 shadow-xl drop-shadow-lg">
+                        <IconImport class="w-[7.5%] lg:w-1/10" />
+                        <div class="flex flex-col space-y-1 my-1 w-[92.5%] lg:w-9/10">
+                            <span class="uppercase text-xs text-green-500 font-bold">Import</span>
+                            <span class="text-sm text-green-100">Import text components from any version into the editor.</span>
+                        </div>
+                    </div>
+
+                    <div class="flex items-center space-x-2 bg-rose-500/20 text-zinc-200 rounded-md border-rose-500 p-2 border-2 shadow-xl drop-shadow-lg">
+                        <IconGradient class="w-[7.5%] lg:w-1/10" />
+                        <div class="flex flex-col space-y-1 my-1 w-[92.5%] lg:w-9/10">
+                            <span class="uppercase text-xs text-rose-500 font-bold">Gradient</span>
+                            <span class="text-sm text-rose-100">Add gradients to text, while keeping styles and interactivity.</span>
+                        </div>
+                    </div>
+
+                    <div class="flex items-center space-x-2 bg-blue-500/20 text-zinc-200 rounded-md border-blue-500 p-2 border-2 shadow-xl drop-shadow-lg">
+                        <IconLore class="w-[7.5%] lg:w-1/10" />
+                        <div class="flex flex-col space-y-1 my-1 w-[92.5%] lg:w-9/10">
+                            <span class="uppercase text-xs text-blue-500 font-bold">Lore output</span>
+                            <span class="text-sm text-blue-100">Get an output correctly formatted for item lore components.</span>
+                        </div>
+                    </div>
+
+                    <div class="flex items-center space-x-2 bg-zinc-800 text-zinc-200 rounded-md border-zinc-500 p-2 border-2 shadow-xl drop-shadow-lg">
+                        <IconCode class="w-[7.5%] lg:w-1/10" />
+                        <div class="flex flex-col space-y-1 my-1 w-[92.5%] lg:w-9/10">
+                            <span class="uppercase text-xs text-zinc-500 font-bold">Open source</span>
+                            <span class="text-sm">All the code is public, and we maintain and update it regularly.</span>
+                        </div>
+                    </div>
+                </div>
+
+                <p class="text-sm text-zinc-400 mt-2"><b class="text-zinc-300">Feedback?</b> We are a small team and would love to hear any feedback you have! Let us know what you think on our <a href="https://discord.datapackhub.net/" class="link">Discord server</a>.</p>
+
+                <p class="text-sm text-zinc-400 mt-1"><b class="text-zinc-300">Bugs?</b> Report them on our <a href="https://discord.datapackhub.net/" class="link">Discord server</a>, or create an issue on <a href="https://github.com/Datapack-Hub/text/issues" class="link">Github</a>.</p>
+
+                <p class="text-zinc-500 text-xs mt-2">This site is maintained by Datapack Hub, and is <b>not</b> endorsed by Mojang Studios.</p>
+
+                <noscript>
+                    <div class="rounded-md border-2 border-red-500 bg-red-500/20 px-3 py-2 mt-2 text-rose-200">
+                        <h1 class="font-bold text-white">This website requires JavaScript to work.</h1>
+                        <p class="text-sm">Please enable Javascript access in your site settings, then refresh the page. If you still see this notice, try a different browser, or ask for help in our <a href="https://discord.datapackhub.net/">Discord server</a>.</p>
+                    </div>
+                </noscript>
+            </div>
+        </div>
+    </div>
+</div>
+{/if}

src/lib/components/modals/ClickEventModal.svelte

@@ -11,7 +11,7 @@
 
 <Modal title="Click Event" bind:this={clickEventDialog} key="T">
     <p>Event Type</p>
-    <select bind:value={clickEventType} class="rounded-md bg-zinc-900 p-2">
+    <select bind:value={clickEventType} class="input-basic">
         <option value="open_url">Open URL</option>
         <option value="run_command">Run Command</option>
         <option value="suggest_command">Suggest Command</option>
@@ -32,37 +32,37 @@
         <p class="mt-2">Command:</p>
         <input
             type="text"
-            class="rounded-md bg-zinc-900 p-2"
+            class="input-basic"
             placeholder="/give @s apple"
             bind:value={clickEventValue} />
         <p class="text-zinc-400">Note: the player must have permission to run the command!</p>
     {:else if clickEventType == "suggest_command"}
         <p class="mt-2">Command:</p>
         <input
             type="text"
-            class="rounded-md bg-zinc-900 p-2"
+            class="input-basic"
             placeholder="/give @s apple"
             bind:value={clickEventValue} />
         <p class="text-zinc-400">Note: the player must have permission to run the command!</p>
     {:else if clickEventType == "copy_to_clipboard"}
         <p class="mt-2">Text to copy:</p>
         <input
             type="text"
-            class="rounded-md bg-zinc-900 p-2"
+            class="input-basic"
             placeholder="I love the Wuppertal Suspension Railway"
             bind:value={clickEventValue} />
     {:else if clickEventType == "change_page"}
         <p class="mt-2">Page to go to:</p>
         <input
             type="number"
-            class="rounded-md bg-zinc-900 p-2"
+            class="input-basic"
             placeholder="32"
             bind:value={clickEventValue} />
     {:else if clickEventType == "open_dialog"}
         <p class="mt-2">Dialog ID:</p>
         <input
             type="text"
-            class="rounded-md bg-zinc-900 p-2"
+            class="input-basic"
             placeholder="namespace:example_dialog"
             bind:value={clickEventValue} />
     {/if}

src/lib/components/modals/CustomSourceModal.svelte

@@ -122,7 +122,7 @@
             {/if}
         </div>
     {:else}
-        <select bind:value={customType} class="rounded-md bg-zinc-900 p-2">
+        <select bind:value={customType} class="input-basic">
             <option value="translate">Translate Key</option>
             <option value="score">Score Value</option>
             <option value="nbt">NBT Value</option>
@@ -136,14 +136,14 @@
         <p class="mt-2">Translate Key</p>
         <input
             type="text"
-            class="rounded-md bg-zinc-900 p-2"
+            class="input-basic"
             placeholder="item.minecraft.beef"
             bind:value={customValues.translate.key} />
 
         <p class="mt-2">Fallback</p>
         <input
             type="text"
-            class="rounded-md bg-zinc-900 p-2"
+            class="input-basic"
             placeholder="This text is shown if the key does not exist"
             bind:value={customValues.translate.fallback} />
 
@@ -198,13 +198,13 @@
         <p class="mt-2">Objective</p>
         <input
             type="text"
-            class="rounded-md bg-zinc-900 p-2"
+            class="input-basic"
             placeholder="money"
             bind:value={customValues.score.objective} />
         <p class="mt-2">Player, Fake Player, or Entity</p>
         <input
             type="text"
-            class="rounded-md bg-zinc-900 p-2"
+            class="input-basic"
             placeholder="@s"
             bind:value={customValues.score.name} />
 
@@ -225,7 +225,7 @@
         </button>
     {:else if customType === "nbt"}
         <p class="mt-2">NBT Source type</p>
-        <select bind:value={customValues.nbt.sourceType} class="rounded-md bg-zinc-900 p-2">
+        <select bind:value={customValues.nbt.sourceType} class="input-basic">
             <option value="storage">Storage</option>
             <option value="block">Block</option>
             <option value="entity">Entity</option>
@@ -234,14 +234,14 @@
             <p class="mt-2">Storage ID</p>
             <input
                 type="text"
-                class="rounded-md bg-zinc-900 p-2"
+                class="input-basic"
                 placeholder="example:storage"
                 bind:value={customValues.nbt.storage} />
 
             <p class="mt-2">NBT path</p>
             <input
                 type="text"
-                class="rounded-md bg-zinc-900 p-2"
+                class="input-basic"
                 placeholder="Items[0].id"
                 bind:value={customValues.nbt.path} />
 
@@ -270,14 +270,14 @@
             <p class="mt-2">Entity</p>
             <input
                 type="text"
-                class="rounded-md bg-zinc-900 p-2"
+                class="input-basic"
                 placeholder="@e[type=villager,limit=1,sort=nearest]"
                 bind:value={customValues.nbt.entity} />
 
             <p class="mt-2">NBT path</p>
             <input
                 type="text"
-                class="rounded-md bg-zinc-900 p-2"
+                class="input-basic"
                 placeholder="Items[0].id"
                 bind:value={customValues.nbt.path} />
 
@@ -306,14 +306,14 @@
             <p class="mt-2">Block</p>
             <input
                 type="text"
-                class="rounded-md bg-zinc-900 p-2"
+                class="input-basic"
                 placeholder="~ ~ ~"
                 bind:value={customValues.nbt.block} />
 
             <p class="mt-2">NBT path</p>
             <input
                 type="text"
-                class="rounded-md bg-zinc-900 p-2"
+                class="input-basic"
                 placeholder="Items[0].id"
                 bind:value={customValues.nbt.path} />
 
@@ -343,7 +343,7 @@
         <p class="mt-2">Keybind</p>
         <input
             type="text"
-            class="rounded-md bg-zinc-900 p-2"
+            class="input-basic"
             placeholder="key.jump"
             bind:value={customValues.keybind.key} />
         <button
@@ -358,7 +358,7 @@
         <p class="mt-2">Selector</p>
         <input
             type="text"
-            class="rounded-md bg-zinc-900 p-2"
+            class="input-basic"
             placeholder="@p[tag=something]"
             bind:value={customValues.selector.selector} />
         <button
@@ -375,7 +375,7 @@
         </button>
     {:else if customType === "object"}
         <p class="mt-2">Object Type</p>
-        <select bind:value={customValues.object.object} class="rounded-md bg-zinc-900 p-2">
+        <select bind:value={customValues.object.object} class="input-basic">
             <option value="atlas">Atlas (sprite)</option>
             <option value="player">Player Head</option>
         </select>
@@ -393,7 +393,7 @@
             <p class="mt-2">Sprite</p>
             <input
                 type="text"
-                class="rounded-md bg-zinc-900 p-2"
+                class="input-basic"
                 bind:value={customValues.object.sprite} />
 
             <button
@@ -415,7 +415,7 @@
             <p class="mt-2">Username</p>
             <input
                 type="text"
-                class="rounded-md bg-zinc-900 p-2"
+                class="input-basic"
                 bind:value={customValues.object.player.name} />
 
             <div class="mt-2 flex items-center space-x-2">

src/lib/components/modals/FontPickerModal.svelte

@@ -99,7 +99,7 @@
         <p class="my-2">Or, if you want to use a custom font without importing it, enter the ID:</p>
         <input
             type="text"
-            class="rounded-md bg-zinc-900 p-2"
+            class="input-basic"
             placeholder="namespace:id"
             bind:value={fontName} />
 

src/lib/components/modals/FontUploadModal.svelte

@@ -96,7 +96,7 @@
         <p>
             Enter font identifier <span class="font-mono text-white/60">(namespace:font_name)</span>
         </p>
-        <input type="text" class="rounded-md bg-zinc-900 p-2" bind:value={identifier} />
+        <input type="text" class="input-basic" bind:value={identifier} />
         <button onclick={addToFontLUT} class="btn"> Add font </button>
     {/if}
 </Modal>

src/lib/components/modals/topbar/SettingsModal.svelte

@@ -55,7 +55,7 @@
             <select
                 name="fontSize"
                 bind:value={$appSettings.fontSize}
-                class="rounded-md bg-zinc-900 p-2">
+                class="input-basic">
                 <option value={0}>Small</option>
                 <option value={1}>Default</option>
                 <option value={2}>Large</option>

src/lib/globals.ts

@@ -0,0 +1 @@
+export const welcomeScreenFormat = "1";