Add HUD Message integration

src/css/user-notify.css

@@ -0,0 +1,96 @@
+/* 
+  Chrome injected CSS is at the user level and not the author level like FF so !important is needed b/c the 
+  page CSS will have priority otherwise
+*/
+.huntersHornMessageView--mhct_success {
+  border-image-source: url("chrome-extension://__MSG_@@extension_id__/images/sandwich-board-success.png") !important;
+}
+.huntersHornMessageView--mhct_warning {
+  border-image-source: url("chrome-extension://__MSG_@@extension_id__/images/sandwich-board-warning.png") !important;
+}
+.huntersHornMessageView--mhct_error {
+  border-image-source: url("chrome-extension://__MSG_@@extension_id__/images/sandwich-board-error.png") !important;
+}
+
+.huntersHornMessageView--mhct_success
+  .huntersHornMessageView__content::before,
+.huntersHornMessageView--mhct_warning
+  .huntersHornMessageView__content::before,
+.huntersHornMessageView--mhct_error .huntersHornMessageView__content::before {
+  background-image: url("chrome-extension://__MSG_@@extension_id__/images/icon64.png") !important;
+}
+
+@-moz-document url-prefix() {
+  .huntersHornMessageView--mhct_success {
+    border-image-source: url("moz-extension://__MSG_@@extension_id__/images/sandwich-board-success.png") !important;
+  }
+  .huntersHornMessageView--mhct_warning {
+    border-image-source: url("moz-extension://__MSG_@@extension_id__/images/sandwich-board-warning.png") !important;
+  }
+  .huntersHornMessageView--mhct_error {
+    border-image-source: url("moz-extension://__MSG_@@extension_id__/images/sandwich-board-error.png") !important;
+  }
+
+  .huntersHornMessageView--mhct_success
+    .huntersHornMessageView__content::before,
+  .huntersHornMessageView--mhct_warning
+    .huntersHornMessageView__content::before,
+  .huntersHornMessageView--mhct_error .huntersHornMessageView__content::before {
+    background-image: url("moz-extension://__MSG_@@extension_id__/images/icon64.png") !important;
+  }
+}
+
+.huntersHornMessageView--mhct_success .huntersHornMessageView__content:before,
+.huntersHornMessageView--mhct_warning .huntersHornMessageView__content:before,
+.huntersHornMessageView--mhct_error .huntersHornMessageView__content:before {
+  content: "";
+  display: block;
+  width: 63px;
+  height: 40px;
+  background-repeat: no-repeat;
+  background-position: 50% 50%;
+  background-size: contain;
+}
+
+.mhct-msg-display {
+  box-shadow: 0px 1px 3px -1px black;
+  font-size: larger;
+  opacity: 0%;
+  padding: 1em;
+  pointer-events: none;
+  position: fixed;
+  text-align: center;
+  transition: all 0.4s;
+  z-index: 100;
+}
+
+.mhct-msg-display.mhct-banner {
+  font-weight: 600;
+  top: 0;
+  width: 100%;
+}
+
+.mhct-msg-display.mhct-toast {
+  border-radius: 10px;
+  font-weight: 400;
+  bottom: 10px;
+  right: 10px;
+  width: auto;
+}
+
+.mhct-msg-display--active {
+  opacity: 1;
+}
+
+.mhct-msg-display.mhct-success {
+  background: lightgreen;
+  border: 1px solid green;
+}
+.mhct-msg-display.mhct-error {
+  background: pink;
+  border: 1px solid red;
+}
+.mhct-msg-display.mhct-warning {
+  background: gold;
+  border: 1px solid darkgoldenrod;
+}

src/manifest.json

@@ -25,14 +25,15 @@
     "content_scripts": [{
         "all_frames" : true,
         "matches": ["*://www.mousehuntgame.com/*"],
+        "css": ["css/user-notify.css"],
         "js": ["scripts/content.js"]
     }],
 
     "web_accessible_resources": [
         "scripts/main.js",
         "third_party/tsitu/*",
         "third_party/potatosalad/*",
-        "images/icon128.png"
+        "images/*"
     ],
 
     "background": {

src/options.html

@@ -30,14 +30,24 @@
             <div class="panel panel-default">
                 <div class="panel-body text-left">
                     <label class="full_width">
-                        Display success messages
+                        Message Display
+                        <div class="switch pull-right">
+                            <select id="message_display" class="pull-right">
+                                <option value="hud">HUD</option>
+                                <option value="banner">Banner</option>
+                                <option value="toast">Toast</option>
+                            </select>
+                        </div>
+                    </label>
+                    <label class="full_width">
+                        • Success messages
                         <div class="switch pull-right">
                             <input type="checkbox" id="success_messages" class="pull-right" checked>
                             <span class="slider round"></span>
                         </div>
                     </label>
                     <label class="full_width">
-                        Display error messages
+                        • Error messages
                         <div class="switch pull-right">
                             <input type="checkbox" id="error_messages" class="pull-right" checked>
                             <span class="slider round"></span>

src/scripts/background.js

@@ -26,6 +26,7 @@ setInterval(() => check_settings(icon_timer_find_open_mh_tab), 1000);
 function check_settings(callback) {
     chrome.storage.sync.get({
         // DEFAULTS
+        message_display: 'hud',
         success_messages: true,
         error_messages: true,
         icon_timer: true,

src/scripts/content.js

@@ -1,35 +1,34 @@
-import {HornHud} from './util/HornHud';
+import {HornHud} from './util/hornHud';
 
 (function () {
 if (document.body == null) {
     return;
 }
+
 // Pass version # from manifest to injected script
 const extension_version = document.createElement("input");
 extension_version.setAttribute("id", "mhhh_version");
 extension_version.setAttribute("type", "hidden");
 extension_version.setAttribute("value", chrome.runtime.getManifest().version);
 document.body.appendChild(extension_version);
 
-// Add flash message div
-const mhhh_flash_message_div = document.createElement("div");
-mhhh_flash_message_div.setAttribute("id", "mhhh_flash_message_div");
-mhhh_flash_message_div.setAttribute(
-    "style",
-    "display:none;" +
-    "z-index:100;" +
-    "position:fixed;" +
-    "top: 0;" +
-    "background-color: white;" +
-    "padding: 1em;" +
-    "font-size: larger;" +
-    "width: 100%;" +
-    "text-align: center;" +
-    "box-shadow: 0px 1px 4px 0px black;" +
-    "opacity: 95%;" +
-    "pointer-events: none;" +
-    "font-weight: 600;");
-document.body.appendChild(mhhh_flash_message_div);
+async function createMessageDiv() {
+    const settings = await getSettings();
+    switch (settings.message_display) {
+        case 'hud': {
+            HornHud.init();
+            break;
+        }
+        case 'toast':
+        case 'banner': {
+            const mhctMsg = document.createElement('div');
+            mhctMsg.classList.add('mhct-msg-display', `mhct-${settings.message_display}`);
+            document.body.appendChild(mhctMsg);
+            break;
+        }
+    }
+}
+createMessageDiv();
 
 async function showDarkMode() {
     const settings = await new Promise((resolve) => {
@@ -143,6 +142,8 @@ window.addEventListener("message",
             chrome.runtime.sendMessage({"log": data});
         } else if (data.mhct_finish_load === 1) {
             showTsituLoader();
+        } else if (data.mhct_display_message === 1) {
+            displayFlashMessage(data.type, data.message);
         }
     },
     false
@@ -156,6 +157,7 @@ window.addEventListener("message",
         return new Promise((resolve) => {
             chrome.storage.sync.get({
                 // DEFAULTS
+                message_display: 'hud',
                 success_messages: true,
                 error_messages: true,
                 debug_logging: false,
@@ -202,4 +204,34 @@ window.addEventListener("message",
         }
     }
 
+    /**
+     * Display the given message in an appropriately colored pop-up flash message.
+     * @param {"error"|"warning"|"success"} type The type of message being displayed, which controls the color and duration.
+     * @param {string} message The message content to display.
+     */
+    async function displayFlashMessage(type, message) {
+
+        const settings = await getSettings();
+        if ((type === 'success' && !settings.success_messages) ||
+            (type !== 'success' && !settings.error_messages)
+        ) {
+            return;
+        }
+
+        if (settings.message_display === 'hud') {
+            await HornHud.showMessage(message, type);
+        } else {
+            const mhctMsg = document.querySelector('.mhct-msg-display');
+            if (mhctMsg == null) {
+                return;
+            }
+
+            mhctMsg.textContent = `MHCT Helper: ${message}`;
+            mhctMsg.classList.add('mhct-msg-display--active', `mhct-${type}`);
+
+            setTimeout(() => {
+                mhctMsg.classList.remove('mhct-msg-display--active', `mhct-${type}`);
+            }, 1500 + 2000 * (type !== "success"));
+        }
+    }
 }());

src/scripts/main.js

@@ -2,8 +2,8 @@
 import {IntakeRejectionEngine} from "./hunt-filter/engine";
 import {ConsoleLogger, LogLevel} from './util/logger';
 import {getUnixTimestamp} from "./util/time";
+import {HornHud} from './util/hornHud';
 import {parseHgInt} from "./util/number";
-import {HornHud} from './util/HornHud';
 import * as successHandlers from './modules/ajax-handlers';
 import * as detailers from './modules/details';
 import * as stagers from './modules/stages';
@@ -164,10 +164,10 @@ import * as detailingFuncs from './modules/details/legacy';
             if (ev.data.mhct_message === 'crownSubmissionStatus') {
                 const counts = ev.data.submitted;
                 if (counts) {
-                    displayFlashMessage(ev.data.settings, "success",
+                    showFlashMessage("success",
                         `Submitted ${counts} crowns for ${$('span[class*="titleBar-name"]').text()}.`);
                 } else if (counts != null) {
-                    displayFlashMessage(ev.data.settings, "error", "There was an issue submitting crowns on the backend.");
+                    showFlashMessage("error", "There was an issue submitting crowns on the backend.");
                 } else {
                     logger.debug('Skipped submission (already sent).');
                 }
@@ -258,38 +258,10 @@ import * as detailingFuncs from './modules/details/legacy';
      * @param {string} message The message content to display.
      */
     function showFlashMessage(type, message) {
-        getSettings(settings => displayFlashMessage(settings, type, message));
-    }
-
-    /**
-     * Display the given message in an appropriately colored pop-up flash message.
-     * @param {Object <string, any>} settings The user's extension settings
-     * @param {"error"|"warning"|"success"} type The type of message being displayed, which controls the color and duration.
-     * @param {string} message The message content to display.
-     */
-    function displayFlashMessage(settings, type, message) {
-        if ((type === 'success' && !settings.success_messages)
-            || (type !== 'success' && !settings.error_messages)) {
-            return;
-        }
-        const mhhh_flash_message_div = $('#mhhh_flash_message_div');
-        mhhh_flash_message_div.text("MHCT Helper: " + message);
-
-        mhhh_flash_message_div.css('left', 'calc(50% - ' + (mhhh_flash_message_div.width() / 2) + 'px)');
-
-        if (type === 'success') {
-            mhhh_flash_message_div.css('background', 'lightgreen');
-            mhhh_flash_message_div.css('border', '1px solid green');
-        } else if (type === 'error') {
-            mhhh_flash_message_div.css('background', 'pink');
-            mhhh_flash_message_div.css('border', '1px solid red');
-        } else { // warning
-            mhhh_flash_message_div.css('background', 'gold');
-            mhhh_flash_message_div.css('border', '1px solid darkgoldenrod');
-        }
-
-        mhhh_flash_message_div.fadeIn(() => {
-            setTimeout(() => $('#mhhh_flash_message_div').fadeOut(), 1500 + 2000 * (type !== "success"));
+        window.postMessage({
+            mhct_display_message: 1,
+            type,
+            message,
         });
     }
 

src/scripts/options.js

@@ -1,5 +1,6 @@
 // JS script available only within the embedded options.html page
 const mhhhOptions = [
+    {name: 'message_display',            p: 'value',   default: 'hud'},
     {name: 'success_messages',           p: 'checked', default: true},
     {name: 'error_messages',             p: 'checked', default: true},
     {name: 'debug_logging',              p: 'checked', default: false},
@@ -89,4 +90,4 @@ const evaluateOptionsPageDarkMode = () => {
 
     if (document.querySelector('#dark_mode').checked === true) bodyEl?.classList.add('dark-mode');
     else bodyEl?.classList.remove('dark-mode');
-};
+};