Add announcement modal & link to wordin

src/App.svelte

@@ -17,6 +17,7 @@
   import Modal from "./lib/Modal.svelte"
   import { data, modalViewed, settings } from "./lib/store"
   import AlertModal from "./lib/AlertModal.svelte"
+  import AnnouncementModal from "./lib/AnnouncementModal.svelte"
   import { layouts } from "./lib/layouts"
 
   const url = "https://thwordle.vercel.app"
@@ -439,6 +440,27 @@
       }}
     />
   {/if}
+
+  <AnnouncementModal onClose={() => {}}>
+    <h3
+      class="text-base leading-6 font-medium text-gray-900 dark:text-white"
+      id="announcement-modal-title"
+    >
+      ประกาศ
+    </h3>
+    <div class="mt-2">
+      <p class="text-sm text-gray-500 dark:text-gray-300">
+        <!-- Add your announcement content here -->
+        เปิดตัวเกมใหม่
+        <a
+          href="https://word.in.th"
+          target="_blank"
+          rel="noopener noreferrer"
+          class="underline text-blue-600">เวิดดิ้น</a
+        > ลองไปเล่นกันได้เลย!
+      </p>
+    </div>
+  </AnnouncementModal>
 </main>
 
 <style>

src/lib/AnnouncementModal.svelte

@@ -0,0 +1,71 @@
+<script lang="ts">
+  import { onMount } from "svelte"
+
+  // Version constant - change this to show the modal again to all users
+  export const ANNOUNCEMENT_VERSION = "20251116-200151"
+
+  const STORAGE_KEY = "thwordle-announcement-version"
+
+  export let onClose = () => {}
+
+  let showModal = false
+
+  onMount(() => {
+    // Check if user has seen this version
+    const storedVersion = localStorage.getItem(STORAGE_KEY)
+    if (storedVersion !== ANNOUNCEMENT_VERSION) {
+      showModal = true
+    }
+  })
+
+  function handleClose() {
+    // Store the current version when modal is closed
+    localStorage.setItem(STORAGE_KEY, ANNOUNCEMENT_VERSION)
+    showModal = false
+    onClose()
+  }
+</script>
+
+{#if showModal}
+  <div
+    class="fixed z-10 inset-0 overflow-y-auto"
+    aria-labelledby="announcement-modal-title"
+    role="dialog"
+    aria-modal="true"
+  >
+    <div
+      class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0"
+    >
+      <div
+        class="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity"
+        aria-hidden="true"
+        on:click={handleClose}
+      />
+
+      <span class="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true"
+        >&#8203;</span
+      >
+
+      <div
+        class="inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full"
+        on:click|stopPropagation
+      >
+        <div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4 dark:bg-slate-800">
+          <div class="mt-3 text-center sm:mt-0 sm:text-left dark:text-white">
+            <slot />
+          </div>
+
+          <div class="mt-4 flex flex-row-reverse">
+            <button
+              type="button"
+              class="inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-gray-400 text-base font-medium text-white hover:bg-gray-500 focus:outline-none focus:ring-2 focus:ring-offset-2 dark:ring-offset-black focus:ring-gray-300 sm:ml-3 sm:text-sm"
+              on:click={handleClose}
+            >
+              ปิด
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+{/if}

src/lib/Navbar.svelte

@@ -67,8 +67,18 @@
         <span class="text-teal-800 text-xs relative top-3 right-12 px-1 rounded">Special</span>
       {/if}
     </h1>
-    <div class="hidden md:block">
-      <span class="flex gap-3 justify-center h-full dark:text-white">
+    <div class="hidden lg:block">
+      <span class="flex gap-3 justify-center h-full dark:text-white items-center">
+        <a
+          href="https://word.in.th"
+          target="_blank"
+          rel="noopener noreferrer"
+          class="text-red-400 hover:text-red-700 relative mr-8"
+          ><span
+            class="absolute -top-2 -right-10 bg-yellow-300 text-yellow-800 text-[10px] font-bold px-2 py-0.5 rounded-full"
+            >NEW!</span
+          > เวิดดิ้น
+        </a>
         {#if training || special}
           <button
             class="text-red-400"
@@ -103,7 +113,7 @@
         <button on:click={() => (settingModal = true)}>ตั้งค่า</button>
       </span>
     </div>
-    <div class="block md:hidden">
+    <div class="block lg:hidden">
       <div class="relative" bind:this={menu}>
         <div>
           <button
@@ -144,6 +154,18 @@
                   }}>Special</button
                 >
               {/if}
+              <a
+                href="https://word.in.th"
+                target="_blank"
+                rel="noopener noreferrer"
+                class="block px-4 py-2 hover:bg-gray-200 hover:text-red-700 w-full text-center text-red-400 relative"
+              >
+                <span
+                  class="absolute -top-2 right-10 bg-yellow-300 text-yellow-800 text-[10px] font-bold px-2 py-0.5 rounded-full"
+                  >NEW!</span
+                >
+                เวิดดิ้น
+              </a>
               <button
                 class="block px-4 py-2 hover:bg-gray-200 hover:text-black w-full"
                 on:click={() => (statsModal = true)}>สถิติ</button