share button

Author: ZeWaka

src/app/App.tsx

@@ -45,14 +45,26 @@ export function App() {
             DM Playground
           </h1>
         </div>
-        <button
-          type="button"
-          aria-label="Settings"
-          onClick={() => setShowSettings(true)}
-          className="rounded-md border border-slate-700 bg-slate-900/80 px-2 py-1 text-sm font-semibold text-slate-200 hover:border-slate-500"
-        >
-          ⚙️
-        </button>
+        <div className="flex items-center gap-2">
+          <button
+            type="button"
+            aria-label="Share"
+            onClick={() =>
+              window.dispatchEvent(new CustomEvent('requestShare'))
+            }
+            className="rounded-md border border-slate-700 bg-slate-900/80 px-2 py-1 text-sm font-semibold text-slate-200 hover:border-slate-500"
+          >
+            🔗 Share Code
+          </button>
+          <button
+            type="button"
+            aria-label="Settings"
+            onClick={() => setShowSettings(true)}
+            className="rounded-md border border-slate-700 bg-slate-900/80 px-2 py-1 text-sm font-semibold text-slate-200 hover:border-slate-500"
+          >
+            ⚙️
+          </button>
+        </div>
       </header>
       <div className="flex-1 min-h-0">
         <ErrorBoundary>

src/app/panels/EditorPanel.tsx

@@ -7,23 +7,21 @@ import { useTheme } from '../theme/useTheme'
 
 const DEFAULT_CODE = `/world/New()\n  world.log << "meow";\n  ..()\n  eval("")\n  shutdown()\n`
 
-const wrapTemplate = (code: string) => `// DM Playground\n\n${code}\n`
-
 const getSeededCode = () => {
   const params = new URLSearchParams(window.location.search)
   const encoded = params.get('code')
   if (encoded) {
     try {
-      return wrapTemplate(Base64.decode(encoded))
+      return Base64.decode(encoded)
     } catch {
-      return wrapTemplate(DEFAULT_CODE)
+      return DEFAULT_CODE
     }
   }
-  return wrapTemplate(DEFAULT_CODE)
+  return DEFAULT_CODE
 }
 
 export function EditorPanel() {
-  const [value, setValue] = useState(() => getSeededCode())
+  const [currentCode, setCurrentCode] = useState(() => getSeededCode())
   const [, setStatus] = useState<'running' | 'idle'>('idle')
   const [activeByond, setActiveByond] = useState<string | null>(() =>
     byondService.getActiveVersion()
@@ -49,18 +47,40 @@ export function EditorPanel() {
     return () => byondService.removeEventListener('active', handleActive)
   }, [])
 
+  useEffect(() => {
+    const handleRequestShare = async () => {
+      const encoded = Base64.encode(currentCode)
+      const url = `${window.location.origin}${window.location.pathname}?code=${encodeURIComponent(
+        encoded
+      )}`
+      try {
+        await navigator.clipboard.writeText(url)
+        window.alert('Share link copied to clipboard')
+      } catch {
+        window.prompt('Copy this link', url)
+      }
+    }
+
+    window.addEventListener('requestShare', handleRequestShare as EventListener)
+    return () =>
+      window.removeEventListener(
+        'requestShare',
+        handleRequestShare as EventListener
+      )
+  }, [currentCode])
+
   const handleRun = () => {
     if (!activeByond) {
       return
     }
-    void executorService.executeImmediate(value)
+    void executorService.executeImmediate(currentCode)
   }
 
   return (
     <div className="flex h-full min-h-0 flex-col gap-3">
       <Editor
-        value={value}
-        onChange={setValue}
+        value={currentCode}
+        onChange={setCurrentCode}
         onRun={handleRun}
         themeId={themeId}
       />