Lots of rewrite

package.json

@@ -31,6 +31,7 @@
     "vite": "^5.4.8"
   },
   "dependencies": {
+    "@castlenine/svelte-qrcode": "^2.2.0",
     "@directus/sdk": "^17.0.1",
     "@microsoft/signalr": "^8.0.7",
     "@typhonjs-fvtt/runtime": "^0.1.3",

src/applications/configApplication.js

@@ -1,6 +1,5 @@
 import { SvelteApplication } from "@typhonjs-fvtt/runtime/svelte/application";
 import ConfigUI from "../svelte/ConfigUI.svelte";
-import { settings } from "../utils/settings.js";
 
 /** @extends SvelteApplication */
 export class ConfigApplication extends SvelteApplication {
@@ -20,9 +19,6 @@ export class ConfigApplication extends SvelteApplication {
         class: ConfigUI,
         target: document.body,
         intro: true,
-        props: {
-          settings: settings,
-        },
       },
     });
   }

src/applications/loginApplication.js

@@ -0,0 +1,18 @@
+import { SvelteApplication } from "@typhonjs-fvtt/runtime/svelte/application";
+import LoginUI from "../svelte/LoginUI.svelte";
+
+export default class LoginApplication extends SvelteApplication {
+  static get defaultOptions() {
+    return foundry.utils.mergeObject(super.defaultOptions, {
+      classes: ["login-dialog"],
+      id: "login-application",
+      title: "Ethereal Plane Login",
+      width: 400,
+      height: 435,
+      svelte: {
+        class: LoginUI,
+        target: document.body,
+      },
+    });
+  }
+}

src/index.js

@@ -1,9 +1,9 @@
-import PollApplication from "./applications/pollApplication.js";
 import { registerHanlders } from "./handlers";
 import {
   getSetting,
+  registerMenus,
   setSetting,
-  settings,
+  registerSettings,
   showNotifications,
 } from "./utils/settings.js";
 import { registerOverlay } from "./utils/overlay.js";
@@ -33,19 +33,22 @@ function buildButtons(buttons) {
     name: "openPolls",
     title: "Open Polls",
     toggle: true,
-    onClick: () => openPolls(pollsButton),
+    onClick: async () => await openPolls(pollsButton),
   };
   buttonGroup?.tools.push(pollsButton);
 }
 
 /** @param {SceneControlTool} button
  * @returns {void}
  */
-function openPolls(button) {
-  if (!polls) polls = new PollApplication(button);
-  //@ts-ignore
-  if (!polls.rendered) polls.render(true);
-  else polls.close();
+async function openPolls(button) {
+  if (!polls) {
+    const PollApplication = (await import("./applications/pollApplication.js"))
+      .default;
+    polls = new PollApplication(button);
+  }
+  if (!polls?.rendered) polls?.render(true);
+  else polls?.close();
 }
 
 Hooks.once("ready", async () => {
@@ -62,7 +65,8 @@ Hooks.once("ready", async () => {
 
 Hooks.on("getSceneControlButtons", buildButtons);
 
-Hooks.on("init", () => settings.init());
+Hooks.on("init", () => registerSettings());
+Hooks.once("ready", () => registerMenus());
 
 Hooks.on("obsUtilsInit", registerOverlay);
 

src/server/chat_api.js

@@ -1,5 +1,3 @@
-import * as signalR from "@microsoft/signalr";
-
 /** @type {signalR.HubConnection} */
 let connection;
 
@@ -26,6 +24,7 @@ export async function initChatAPI(
   handleChatMessageReceived,
   baseURL,
 ) {
+  const signalR = await import("@microsoft/signalr");
   connection = new signalR.HubConnectionBuilder()
     .withUrl(baseURL + "api/v2/hubs/chat", {
       accessTokenFactory: () => accessToken,

src/server/connectionManager.js

@@ -1,4 +1,4 @@
-import { getSetting, settings } from "../utils/settings.js";
+import { getSetting, getStore } from "../utils/settings.js";
 import { Modes } from "../utils/const.js";
 import { PatreonConnector } from "./patreon.js";
 import { LocalServer } from "./localserver.js";
@@ -18,7 +18,7 @@ class ConnectionManager {
   messageListeners = undefined;
 
   constructor() {
-    settings.getStore("mode")?.subscribe((mode) => {
+    getStore("mode")?.subscribe((mode) => {
       this.onChangeMode(mode);
     });
     this.messageListeners = [];

src/server/patreon.js

@@ -39,8 +39,9 @@ export class PatreonConnector {
     });
   }
 
-  connect() {
-    connectClient().then();
+  async connect() {
+    await this.logout();
+    await connectClient();
   }
 
   /** @returns {Promise<void>} */
@@ -163,28 +164,23 @@ export class PatreonConnector {
       verification_uri_complete: uri,
       user_code,
     } = await patreonLogin();
-    let d = new Dialog({
-      title: "Device Code",
-      content: `The login Device Code is ${user_code}. <br> Either manually enter it or press open to open the login dialog. Pressing any button will close this window, please note down the code beforehand.`,
-      buttons: {
-        open: {
-          label: "Open",
-          callback: () =>
-            window.open(
-              uri,
-              "_blank",
-              "location=yes,height=570,width=520,scrollbars=yes,status=yes",
-            ),
+    const LoginApplication = (
+      await import("../applications/loginApplication.js")
+    ).default;
+    let d = new LoginApplication({
+      svelte: {
+        props: {
+          user_code: user_code,
+          uri: uri,
         },
-        close: { label: "Close" },
       },
-      default: "two",
     });
     d.render(true);
     const { access_token, refresh_token } =
       await waitForPatreonVerification(device_code);
     await setSetting("authentication-token", access_token);
     await setSetting("refresh-token", refresh_token);
+    Hooks.callAll("ethereal-plane.patreon-logged-in");
     await this.init();
   }
 

src/server/poll_api.js

@@ -1,5 +1,3 @@
-import * as signalR from "@microsoft/signalr";
-
 /**
  * @type {import('@microsoft/signalr').HubConnection}
  */
@@ -25,6 +23,7 @@ let connection = null;
  * @return {Promise} - A Promise representing the connection start operation.
  */
 export async function initPollAPI(bearerToken, pollUpdateCallback, baseUrl) {
+  const signalR = await import("@microsoft/signalr");
   connection = new signalR.HubConnectionBuilder()
     .withUrl(`${baseUrl}api/v2/hubs/polls`, {
       accessTokenFactory: () => bearerToken,

src/svelte/ChatCommandConfigUI.svelte

@@ -1,16 +1,13 @@
 <svelte:options accessors="{true}" />
 
 <script>
-  import { setSetting, settings } from "../utils/settings.js";
+  import { setSetting, getStore } from "../utils/settings.js";
   import ChatCommandConfig from "./components/ChatCommandConfig.svelte";
   import { ApplicationShell } from "@typhonjs-fvtt/runtime/svelte/component/core";
   import { ChatCommand } from "../utils/chatCommands.js";
   import { getContext } from "svelte";
 
-  /**
-   * @type {SvelteStore<ChatCommand[]>}
-   */
-  const commands = settings.getStore("chat-commands");
+  const commands = getStore("chat-commands");
   export let elementRoot = void 0;
 
   function add() {

src/svelte/ConfigUI.svelte

@@ -4,21 +4,21 @@
   import { ApplicationShell } from "@typhonjs-fvtt/runtime/svelte/component/core";
   import { localize } from "@typhonjs-fvtt/runtime/svelte/helper";
   import { Modes } from "../utils/const.js";
+  import { getStore } from "../utils/settings.js";
   import CollapsibleSection from "./components/CollapsibleSection.svelte";
   import PatreonConfig from "./components/PatreonConfig.svelte";
   import InfoBox from "./components/InfoBox.svelte";
   import { tooltip } from "@svelte-plugins/tooltips";
 
-  export let settings = void 0;
-  const mode = settings.getStore("mode");
+  const mode = getStore("mode");
   const modes = Object.values(Modes);
-  const serverUrl = settings.getStore("server-url");
-  const sendRollsToChat = settings.getStore("send-rolls-to-chat");
-  const chatMessageTemplate = settings.getStore("chat-message-template");
-  const pollsEnabled = settings.getStore("polls-enabled");
-  const moduleEnabled = settings.getStore("enabled");
-  const allowSocket = settings.getStore("allow-socket");
-  const allowAPI = settings.getStore("allow-api");
+  const serverUrl = getStore("server-url");
+  const sendRollsToChat = getStore("send-rolls-to-chat");
+  const chatMessageTemplate = getStore("chat-message-template");
+  const pollsEnabled = getStore("polls-enabled");
+  const moduleEnabled = getStore("enabled");
+  const allowSocket = getStore("allow-socket");
+  const allowAPI = getStore("allow-api");
 
   export let elementRoot = void 0;
 </script>
@@ -80,7 +80,7 @@
     </CollapsibleSection>
     {#if $mode === Modes.patreon || $mode === Modes.localchat}
       <CollapsibleSection collapsed="{false}" title="Patreon">
-        <PatreonConfig settings="{settings}" />
+        <PatreonConfig />
       </CollapsibleSection>
     {/if}
 

src/svelte/LoginUI.svelte

@@ -0,0 +1,80 @@
+<svelte:options accessors="{true}" />
+
+<script>
+  import { ApplicationShell } from "@typhonjs-fvtt/runtime/svelte/component/core";
+  import { QRCode } from "@castlenine/svelte-qrcode";
+  import { getContext, onDestroy } from "svelte";
+
+  export let user_code;
+  export let uri;
+  export let elementRoot = void 0;
+
+  const hook = Hooks.on("ethereal-plane.patreon-logged-in", close);
+
+  const context = getContext("#external");
+
+  async function close() {
+    context.application.close();
+  }
+
+  onDestroy(() => {
+    Hooks.off("ethereal-plane.patreon-logged-in", hook);
+  });
+</script>
+
+<ApplicationShell bind:elementRoot="{elementRoot}">
+  <main>
+    <div class="text">
+      <span>
+        The login Device Code is <code class="user-code">{user_code}</code>.
+      </span>
+      <span>
+        Either press "Open" to open a log-in dialog directly, copy it and send
+        it to another device, or scan the QR code.
+      </span>
+      <span>
+        This window will automatically close when the login is complete.
+      </span>
+    </div>
+    <div class="QR">
+      <QRCode data="{uri}" />
+    </div>
+    <div class="buttons">
+      <button
+        on:click="{() => {
+          window.open(
+            uri,
+            '_blank',
+            'location=yes,height=570,width=520,scrollbars=yes,status=yes',
+          );
+        }}"
+      >
+        Open
+      </button>
+      <button> Copy </button>
+      <button> Cancel </button>
+    </div>
+  </main>
+</ApplicationShell>
+
+<style lang="stylus">
+  .user-code 
+    background-color black
+    padding-left 2px
+    padding-right 2px
+    color white
+    border-radius 4px
+    
+  .text
+    display flex
+    flex-direction column
+    gap 6px
+  
+  .buttons
+    padding-top 4px
+    display flex
+    
+  .QR
+    display flex
+    justify-content center
+</style>