Merge v0.11.0 into master (#70)

* Restructure DMV code (#67)

* Merge shared code into common.js

* Refactor dmv/dispatchers into dispatch

* Refactor dmv into transform and store.js

* Refactor notifications.js into notify.js

* Remove 'how it works' from DEVELOPERS.md

Closes #66

* Add character name to commands (#69)

Closes #65

* Update emote block format

* Bump version to v0.11.0

* Update README formatting

Author: averycrespi

DEVELOPERS.md

@@ -64,43 +64,4 @@ Notes:
 
 - The test harness will create and activate a Python virtual environment in `tests/venv`.
 - Characters will be loaded from `tests/characters.json`.
-- Logs will be written to `tests/logs`.
-
-## How does the extension work?
-
-### Content and Background Scripts
-
-- `dmv.js`: Loaded on Dungeon Master's Vault. Responsible for managing buttons and creating commands.
-- `background.js`: Loaded in the background. Responsible for managing the command queue.
-- `roll20.js`: Loaded on Roll20. Responsible for running commands.
-
-### Queue-based Architecture
-
-VTT Bridge uses a queue-based architecture. Commands are created by `dmv.js`, relayed through `background.js`, then ran by `roll20.js`. This relay is necessary because content scripts cannot directly communicate.
-
-`roll20.js` polls `background.js` at regular intervals (e.g. every second) to ask for new commands. This implementation was chosen because the `activeTab` permission is required to send messages from background scripts to content scripts. We can avoid this permission by allowing the `roll20.js` content script to initiate the connection.
-
-### Walkthrough
-
-- The extension is loaded.
-  - `background.js` creates an empty command queue.
-  - `background.js` starts listening for messages.
-- The user opens a character sheet on Dungeon Master's Vault.
-  - `dmv.js` displays a welcome notification.
-  - `dmv.js` adds buttons and event listeners to the page.
-  - `dmv.js` starts listening for dispatched actions.
-- The user joins a Roll20 game.
-  - `roll20.js` displays a welcome notification.
-  - `roll20.js` sends a `clear` message to `background.js`.
-  - `background.js` receives the `clear` message and empties its queue.
-- The user clicks a button on Dungeon Master's Vault.
-  - `dmv.js` dispatches a `click` action with the class name, event, and data.
-  - `dmv.js` receives the `click` action.
-  - `dmv.js` parses the `click` action into a notification and a list of commands.
-  - `dmv.js` displays the notification.
-  - `dmv.js` sends an `enqueue` message (with the commands) to `background.js`.
-  - `background.js` receives the `enqueue` message and adds the commands to its queue.
-  - `roll20.js` sends a `dequeue` message to `background.js`.
-  - `background.js` receives the `dequeue` message and responds with all commands in its queue.
-  - `background.js` empties its queue.
-  - `roll20.js` receives the response and runs the commands.
+- Logs will be written to `tests/logs`.

README.md

@@ -69,7 +69,7 @@ Install the VTT Bridge extension for Firefox or Google Chrome.
     <img src="assets/chrome.png" alt="Chrome logo">
 </a>
 
-Open your Dungeon Master's Vault character sheet and click the <kbd>www</kbd> link. Launch your Roll 20 game in another tab.
+Open your Dungeon Master's Vault character sheet and click the <kbd>www</kbd> link. Launch your Roll20 game in another tab.
 
 ![www link](assets/www_link.png)
 
@@ -81,23 +81,23 @@ Click one of the buttons on your Dungeon Master's Vault character sheet. Your ro
 
 ## FAQ
 
-> Help, the buttons on Dungeon Master's Vault aren't working!
+**Help, the buttons on Dungeon Master's Vault aren't working!**
 
 Make sure that you clicked the `www` link in the top right. The URL should end with `?frame`.
 
-> Why does the extension need to "Access your data for www.dungeonmastersvault.com"?
+**Why does the extension need to "Access your data for www.dungeonmastersvault.com"?**
 
 VTT Bridge needs to create buttons, add event listeners, and show notifications.
 
-> Why does the extension need to "Access your data for app.roll20.net"?
+**Why does the extension need to "Access your data for app.roll20.net"?**
 
-VTT Bridge needs to run commands and show notifications.
+VTT Bridge needs to create chat messages and show notifications.
 
-> I found a bug! What should I do?
+**I found a bug! What should I do?**
 
 [Open an issue](https://github.com/averycrespi/vtt-bridge/issues/new/choose), select "Bug report", then complete the issue template.
 
-> I have an idea for a new feature! What should I do?
+**I have an idea for a new feature! What should I do?**
 
 [Open an issue](https://github.com/averycrespi/vtt-bridge/issues/new/choose), select "Feature request", then complete the issue template.
 

manifest.json

@@ -1,7 +1,7 @@
 {
   "manifest_version": 2,
   "name": "VTT Bridge",
-  "version": "0.10.0",
+  "version": "0.11.0",
   "description": "Connect Dungeon Master's Vault to Roll20.",
   "icons": {
     "48": "icons/48.png",

package.json

@@ -2,7 +2,7 @@
   "name": "vtt-bridge",
   "description": "Connect Dungeon Master's Vault to Roll20.",
   "author": "Avery Crespi",
-  "version": "0.10.0",
+  "version": "0.11.0",
   "license": "MIT",
   "dependencies": {
     "beedle": "^0.8.1",

src/callbacks.js

@@ -0,0 +1,42 @@
+export const classes = {
+  attackWithSpell: "vtt-attack-with-spell",
+  attackWithWeapon: "vtt-attack-with-weapon",
+  castSpell: "vtt-cast-spell",
+  rollAbilityScore: "vtt-roll-ability-score",
+  rollInitiative: "vtt-roll-initiative",
+  rollProficiency: "vtt-roll-proficiency",
+  rollSavingThrow: "vtt-roll-saving-throw",
+  rollSkill: "vtt-roll-skill",
+  rollWeaponDamage: "vtt-roll-weapon-damage",
+  useFeature: "vtt-use-feature",
+};
+
+export const messageType = { enqueue: 0, dequeue: 1, clear: 2 };
+
+/**
+ * Run a callback after an element loads.
+ */
+export const onElementLoad = (selector, callback) => onPredicate(() => !!document.querySelector(selector), callback);
+
+/**
+ * Run a callback after an element's child loads.
+ */
+export const onChildLoad = (element, selector, callback) =>
+  onPredicate(() => !!element.querySelector(selector), callback);
+
+/**
+ * Run a callback after a predicate is satisfied.
+ *
+ * Uses exponential backoff with limited attempts.
+ */
+const onPredicate = (predicate, callback, attempts = 10, timeout = 100) => {
+  if (predicate()) {
+    callback();
+  } else if (attempts <= 0) {
+    console.warn("Maximum number of attempts exceeded");
+  } else {
+    setTimeout(function () {
+      onPredicate(predicate, callback, attempts - 1, timeout * 2);
+    }, timeout);
+  }
+};

src/common.js

@@ -1,6 +1,4 @@
-import * as classes from "../classes";
-
-import { onElementLoad } from "../../callbacks";
+import { classes, onElementLoad } from "../common";
 
 export const addExpandSpellListeners = (store) => onElementLoad(".details-columns tr.spell", () => ready(store));
 

src/dmv/dispatchers/expandSpell.js renamed to src/dispatch/expandSpell.js

@@ -3,10 +3,12 @@ import { addRollSavingThrowListeners } from "./rollSavingThrow";
 import { addRollSkillListeners } from "./rollSkill";
 import { addSelectTabListeners } from "./selectTab";
 import { addToggleVisibilityListeners } from "./toggleVisibility";
-import { onElementLoad } from "../../callbacks";
+import { onElementLoad } from "../common";
+import { setCharacter } from "./setCharacter";
 
 export const addDispatchers = (store, callback) =>
   onElementLoad(".character-summary .class-name", () => {
+    setCharacter(store);
     addToggleVisibilityListeners(store);
     addSelectTabListeners(store);
     addRollAbilityScoreListeners(store);

src/dmv/dispatchers/index.js renamed to src/dispatch/index.js

@@ -1,6 +1,4 @@
-import * as classes from "../classes";
-
-import { onElementLoad } from "../../callbacks";
+import { classes, onElementLoad } from "../common";
 
 export const addRollAbilityScoreListeners = (store) =>
   onElementLoad(".ability-scores .ability-score-name", () => ready(store));

src/dmv/dispatchers/rollAbilityScore.js renamed to src/dispatch/rollAbilityScore.js

@@ -1,6 +1,4 @@
-import * as classes from "../classes";
-
-import { onElementLoad } from "../../callbacks";
+import { classes, onElementLoad } from "../common";
 
 export const addRollInitiativeListeners = (store) => onElementLoad(".initiative", () => ready(store));