t

app/artifact/client.tsx

@@ -12,6 +12,7 @@ import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
 import { ScrollArea, ScrollBar } from "@/components/ui/scroll-area";
 import { getCharacters } from "@/lib/api";
+import { comms } from "@/lib/comms";
 import { uidRegex } from "@/lib/const";
 import type { characters } from "@/lib/db/schema";
 import { cn } from "@/lib/utils";
@@ -176,3 +177,11 @@ export async function ClearCookie() {
   cookieStore.delete("sid");
   return "";
 }
+
+export function WarningDialog() {
+  const [manual, setManual] = comms.var("manual");
+
+  comms.event("beforeSubmit", () => {
+    manual;
+  });
+}

app/page.tsx

@@ -19,7 +19,7 @@ export default function Home() {
   return (
     <PageTransition>
       <div className="relative h-svh w-full overflow-hidden flex items-center justify-center">
-        <div className="max-w-[85rem] w-full mx-auto px-4 sm:px-6 py-6">
+        <div className="max-w-340 w-full mx-auto px-4 sm:px-6 py-6">
           <Card className="max-w-lg w-full mx-auto pt-0">
             <Image
               src={Banner}

app/terminated/page.tsx

@@ -0,0 +1,46 @@
+export default function TerminatedPage() {
+  return (
+    <div className="h-full w-full flex items-center justify-center gap-2 flex-col bg-[#8225] backdrop-hue-rotate-60 backdrop-blur-md">
+      <span className="text-2xl font-bold">
+        Offline. Not broken, just fuckin finished.
+      </span>
+      <span className="text-center text-muted-foreground max-w-5xl">
+        ก็เอาเถอะมันถึงเวลาจริงๆแล้ว กูพยายามทนมาหลายรอบมาก
+        แต่ครั้งนี้แม่งไม่เหลือแรงจะทนอีกแล้ว กูทำของพวกนี้ฟรี ไม่ได้ขอเงิน ไม่ได้ขอชื่อเสียง
+        กูแค่อยากให้มันดีขึ้นเพราะทุกครั้งที่เห็นของเดิมมันห่วยจนอยากปิดตาเอง กูเป็นคนออกแบบ UI
+        กูเลยรู้ดีว่ามันไม่โอเค แต่พอกูลงมือแก้ คนที่ได้ประโยชน์กลับมาบ่น มาว่า ทำไมต้องเปลี่ยน
+        ทำไมต้องยุ่ง ทั้งที่ตัวเองแม่งไม่ช่วยสักอย่าง ไม่แตะโค้ด ไม่ตรวจอะไรเลย มีแต่เสียงบ่น
+        กูไม่ได้อยากเป็นฮีโร่แต่ก็ไม่ได้อยากเป็นตัวตลกที่ต้องมาทนกับพวกไม่เห็นค่ากันแบบนี้
+        <br />
+        <br />
+        อยู่ดีๆก็อยากจะเอาไปใช้ ทั้งที่ไม่ได้บอกสักคำ บอกกูตอนกำลัง deploy ว่า “มันไม่ทำงาน”
+        แล้วจะให้กูทำยังไงในสิบห้านาที นายรู้ไหมระบบนี้มันไม่ใช่เว็บเด็กเล่น
+        แต่มันคือสถาปัตยกรรมเต็มรูปแบบที่ต้องมีเวลาจัดการ ไม่ใช่นึกอยากจะใช้ก็ใช้
+        แล้วพอกูอ่านข้อความยังไม่ถึงสิบวินาทีก็โทรมาซ้ำ บ่นเรื่องคนดูจะบ่นอีกที กูแม่งไม่เข้าใจจริงๆ
+        คนดูจริงๆเขาไม่แคร์หรอกว่าจะเลือกตัวละครเองหรือระบบช่วย เขาอ่านคำว่า
+        “เลือกตัวละครของคุณ” กับ error message ยังไม่ออก แล้วนายจะมานั่งเถียงเรื่อง UI
+        ไปทำไม
+        <br />
+        <br />
+        กูเคยบอกให้เพิ่มเวลาตอนกดยอมรับกติกา จะได้กันพวกรีบกดข้าม แต่ก็ยังโดนค้านอีกว่า
+        “คนดูจะบ่น” นายจะตามใจคนดูไปถึงขั้นไหน จะไปเลี้ยงข้าวเขาด้วยไหม หรือจะไปล้างจานให้ด้วย
+        กูไม่ได้อยากทะเลาะแต่พวกนายทำให้กูรู้สึกว่าทุกอย่างที่พูดไม่มีค่าเลย
+        กูพูดอะไรไปก็โดนมองว่าชอบเถียง ทั้งที่กูคือคนที่ลงแรงที่สุด
+        กูเห็นมันพังทีละจุดแล้วไม่มีใครสนใจ กูไม่ได้ต้องการคำชมด้วยซ้ำ
+        แค่ให้รู้ว่ากูทำเพราะอยากให้มันดี
+        <br />
+        <br />
+        แต่ไม่เลย พวกนายเห็นกูเป็นคนบ่นตลอดเวลา เห็นแต่ความผิดพลาด เห็นแต่สิ่งที่ไม่ตรงใจ
+        แล้วก็มารุมใส่ กูเลยไม่อยากอยู่ต่อแล้ว มันไม่เหลือที่ให้หายใจอีก กูเคยรักโปรเจกต์นี้มาก
+        แต่มันค่อยๆกลายเป็นสิ่งที่กูเกลียดไปทุกวัน กูไม่อยากเปิด Discord
+        แล้วเห็นข้อความใหม่ที่มีแต่การบ่น การกดดัน การไม่เข้าใจ
+        กูไม่อยากต้องคอยอธิบายทุกอย่างให้คนที่ไม่อยากเข้าใจจริงๆ
+        <br />
+        <br />
+        จะบอกว่ายอมแพ้ก็ได้ กูไม่แคร์แล้ว ปิดมันเถอะ ให้มันจบไปกับความพยายามทั้งหมดนั่นแหละ
+        กูเหนื่อยจนไม่รู้จะเรียกว่าเสียใจหรือแค่หมดแรงดี ขอบใจถ้านายเคยอยู่ตรงนี้ ถึงมันจะพัง
+        ถึงมันจะถูกมองว่า “ไม่ได้เรื่อง” สำหรับกูมันเคยเป็นสิ่งที่ดีที่สุดที่กูเคยทำ และตอนนี้มันก็จบแล้ว
+      </span>
+    </div>
+  );
+}

lib/comms.tsx

@@ -1,17 +1,31 @@
 "use client";
 
-import { createContext, useState } from "react";
+import { createContext, use, useEffect, useRef, useState } from "react";
 
 type WebsiteComms = Partial<{ manual: boolean }>;
 
+type WebsiteSignals = { beforeSubmit: undefined } & WebsiteComms;
+
 type WebsiteCommsMutator = {
   get<K extends keyof WebsiteComms>(key: K): WebsiteComms[K];
   set<K extends keyof WebsiteComms>(key: K, value: WebsiteComms[K]): void;
+  on<K extends keyof WebsiteSignals>(
+    key: K,
+    listener: (value: WebsiteSignals[K]) => void,
+  ): () => void;
+  off<K extends keyof WebsiteSignals>(
+    key: K,
+    listener: (value: WebsiteSignals[K]) => void,
+  ): void;
+  emit<K extends keyof WebsiteSignals>(key: K, value: WebsiteSignals[K]): void;
 };
 
 export const CommsContext = createContext<WebsiteCommsMutator>({
   get: () => undefined,
   set: () => undefined,
+  on: () => () => undefined,
+  off: () => undefined,
+  emit: () => undefined,
 });
 
 export default function CommsProvider({
@@ -20,14 +34,64 @@ export default function CommsProvider({
   children: React.ReactNode;
 }) {
   const [store, setStore] = useState<WebsiteComms>({});
+  const listeners = useRef<{
+    [K in keyof WebsiteSignals]?: Array<(value: WebsiteSignals[K]) => void>;
+  }>({});
   return (
     <CommsContext
       value={{
         get: (k) => store[k],
-        set: (k, v) => setStore((x) => ({ ...x, [k]: v })),
+        set: (k, v) => {
+          setStore((x) => ({ ...x, [k]: v }));
+          (listeners.current[k] || []).map((l) => l(v));
+        },
+        on: (k, listener) => {
+          // @ts-expect-error
+          listeners.current[k] = [...(listeners.current[k] || []), listener];
+
+          return () => {
+            // @ts-expect-error
+            listeners.current[k] = listeners.current[k]?.filter(
+              (l) => l !== listener,
+            );
+          };
+        },
+        off: (k, listener) => {
+          // @ts-expect-error
+          listeners.current[k] = (listeners.current[k] || []).filter(
+            (l) => l !== listener,
+          );
+        },
+        emit: (k, value) => {
+          (listeners.current[k] || []).map((l) => l(value));
+        },
       }}
     >
       {children}
     </CommsContext>
   );
 }
+
+export const comms = {
+  var(name: keyof WebsiteComms) {
+    const comms = use(CommsContext);
+    const [state, setState] = useState(comms.get(name));
+    useEffect(() => {
+      function listener(value: WebsiteComms[typeof name]) {
+        setState(value);
+      }
+      return comms.on(name, listener);
+    }, [comms, name]);
+
+    return [state, comms.set.bind(comms, name)] as const;
+  },
+  event<K extends keyof WebsiteSignals>(
+    key: K,
+    listener: (ev: WebsiteSignals[K]) => void,
+  ) {
+    const comms = use(CommsContext);
+    useEffect(() => {
+      return comms.on(key, listener);
+    }, [comms, key, listener]);
+  },
+};