Add Chat Message Prefix for Detection (#5)

* Add Chat Message Prefix for Detection

* Add Cancel Ready Button if Owner

* Update cancel button to always add and check conditions

* Update README.md 📖

README.md

@@ -1,7 +1,7 @@
-[![Chrome Web Store Version](https://img.shields.io/chrome-web-store/v/anlkpnbhiiojmedlkchcdmigkdccnmcn?label=chrome&logo=googlechrome)](https://chromewebstore.google.com/detail/playdrift-extension/anlkpnbhiiojmedlkchcdmigkdccnmcn)
-[![Mozilla Add-on Version](https://img.shields.io/amo/v/playdrift-extension?label=firefox&logo=firefox)](https://addons.mozilla.org/addon/playdrift-extension)
 [![Chrome Web Store Users](https://img.shields.io/chrome-web-store/users/anlkpnbhiiojmedlkchcdmigkdccnmcn?logo=google&logoColor=white&label=google%20users)](https://chromewebstore.google.com/detail/playdrift-extension/anlkpnbhiiojmedlkchcdmigkdccnmcn)
 [![Mozilla Add-on Users](https://img.shields.io/amo/users/playdrift-extension?logo=mozilla&label=mozilla%20users)](https://addons.mozilla.org/addon/playdrift-extension)
+[![Chrome Web Store Version](https://img.shields.io/chrome-web-store/v/anlkpnbhiiojmedlkchcdmigkdccnmcn?label=chrome&logo=googlechrome)](https://chromewebstore.google.com/detail/playdrift-extension/anlkpnbhiiojmedlkchcdmigkdccnmcn)
+[![Mozilla Add-on Version](https://img.shields.io/amo/v/playdrift-extension?label=firefox&logo=firefox)](https://addons.mozilla.org/addon/playdrift-extension)
 [![GitHub Release Version](https://img.shields.io/github/v/release/cssnr/playdrift-extension?logo=github)](https://github.com/cssnr/playdrift-extension/releases/latest)
 [![Manifest Version](https://img.shields.io/github/manifest-json/v/cssnr/playdrift-extension?filename=manifest.json&logo=json&label=manifest)](https://github.com/cssnr/playdrift-extension/blob/master/manifest.json)
 [![Build](https://github.com/cssnr/playdrift-extension/actions/workflows/build.yaml/badge.svg)](https://github.com/cssnr/playdrift-extension/actions/workflows/build.yaml)
@@ -18,6 +18,8 @@ for some of the most useful features.
 *   [Features](#features)
     -   [Upcoming Features](#upcoming-features-and-ideas)
 *   [Problems Solved](#problems-solved)
+*   [Frequently Asked Questions](#frequently-asked-questions)
+*   [Known Issues](#known-issues)
 *   [Configuration](#configuration)
 *   [Browser Console](#browser-console)
 *   [Development](#development)
@@ -66,6 +68,7 @@ All **Chromium** Based Browsers can install the extension from the
 *   Auto Kick Users Below Set Total Games Played
 *   Ban User Feature that Automatically Kicks User in Future
 *   Send Customizable Message on Game Start and Stats at End
+*   Add Cancel Ready Button if you are the Room Owner
 *   Auto Update Game Options Dialog on Room Creation
 *   Auto Continue Through the Game Stats at End of Game
 *   Close Profiles by Clicking Anywhere Outside the Profile
@@ -111,6 +114,20 @@ any domino they want on the first round of 4 and hold on to the 6/6 since they p
 > **Solution:** These bots can't win more than 1/3 games and all have a win rate around 35%. The feature to Auto Kick players 
 > below a set win rate (recommended at 40%) will kick almost all the bots, plus a couple humans that only win 1/3 games.
 
+# Frequently Asked Questions
+
+### Where do the stats come from?
+
+The stats come from your PlayDrift profile. See [Browser Console](#browser-console) for more information.
+
+> [!TIP]
+> **Don't see your question here?**
+> Ask one on the [Q&A Discussion](https://github.com/cssnr/playdrift-extension/discussions/new?category=q-a).
+
+# Known Issues
+
+*   The Mouse Over Icon Stats do not properly update when a room changes positions on the home page
+
 # Configuration
 
 You can pin the Addon by clicking the `Puzzle Piece`, find the Web Extension icon, then;  
@@ -123,7 +140,18 @@ You may also access the Options and Home page from a Right Click if Enabled in O
 
 # Browser Console
 
-You can view user profiles manually in your browser console using the following methods.
+You can view user profiles manually in your browser or console using the following methods.
+
+### Browser
+
+First, get the user ID by clicking on their profile and extracting it from the URL in the address bar.  
+Example: https://dominoes.playdrift.com/?profile=fdb82ace-7826-45b1-922b-416d4e9ded9d  
+The ID is the part after the ?profile=  
+Example: `fdb82ace-7826-45b1-922b-416d4e9ded9d`
+
+Second, use the above ID with the following URL:  
+https://api-v2.playdrift.com/api/profile/trpc/profile.get?input={"id":"fdb82ace-7826-45b1-922b-416d4e9ded9d","game":"dominoes"}  
+_Note: You need to replace the ID in the above URL with the one from the First step._
 
 ### Console
 
@@ -138,16 +166,6 @@ Make sure you are at `https://dominoes.playdrift.com/` and logged in before proc
 *   From there you should see the `result`. Click on the small `>` Arrow to expand it. Click the next `>` Arrow on data.
 *   Once fully expanded, you should see the profile. Then you can select any other response to view those profiles.
 
-### Browser
-
-First, get the user ID by clicking on their profile and extracting it from the URL in the address bar.  
-Example: https://dominoes.playdrift.com/?profile=fdb82ace-7826-45b1-922b-416d4e9ded9d  
-The ID is the part after the ?profile=  
-Example: `fdb82ace-7826-45b1-922b-416d4e9ded9d`  
-
-Second, use the above ID with the following URL:  
-https://api-v2.playdrift.com/api/profile/trpc/profile.get?input={"id":"fdb82ace-7826-45b1-922b-416d4e9ded9d","game":"dominoes"}
-
 # Development
 
 **Quick Start**

manifest.json

@@ -3,7 +3,7 @@
   "description": "PlayDrift Web Extension.",
   "homepage_url": "https://github.com/cssnr/playdrift-extension",
   "author": "Shane",
-  "version": "0.4.1",
+  "version": "0.4.2",
   "manifest_version": 3,
   "commands": {
     "_execute_action": {

src/html/options.html

@@ -142,6 +142,15 @@ <h6 class="mt-3 ms-2 text-body-secondary"><i class="fa-solid fa-house me-2"></i>
                 </span>
             </label>
         </div>
+        <div class="form-check form-switch">
+            <input class="form-check-input" id="addCancelReadyBtn" type="checkbox" role="switch">
+            <label class="form-check-label text-success-emphasis" for="addCancelReadyBtn" aria-describedby="addCancelReadyBtnHelp">
+                Add Cancel Ready Button if Owner
+                <span data-bs-toggle="tooltip" data-bs-title="Add Cancel Ready Button if Owner.">
+                    <i class="fa-solid fa-circle-info ms-1"></i>
+                </span>
+            </label>
+        </div>
         <div class="form-check form-switch">
             <input class="form-check-input" id="autoUpdateOptions" type="checkbox" role="switch">
             <label class="form-check-label text-success-emphasis" for="autoUpdateOptions" aria-describedby="autoUpdateOptionsHelp">

src/js/content-script.js

@@ -299,15 +299,13 @@ async function processRoom(room) {
         'options',
         'profile',
     ])
-    const parent = document.querySelector('div[data-testid="room"]')
-    // console.debug('parent:', parent)
-    if (options.autoUpdateOptions) {
-        const root = parent?.querySelector(
-            '.MuiPaper-root.MuiPaper-elevation.MuiPaper-rounded'
-        )
-        // console.debug('root:', root)
-        root?.querySelector('button')?.click()
+    // TODO: Safe to re-run this because it checks for existence before creating
+
+    if (options.addCancelReadyBtn) {
+        await addCancelReadyBtn()
     }
+    // const parent = document.querySelector('div[data-testid="room"]')
+    // console.debug('parent:', parent)
     const aside = document.querySelector('aside')
     console.debug('aside:', aside)
     if (!aside) {
@@ -324,6 +322,15 @@ async function processRoom(room) {
     console.debug(`Process Room: ${room}`)
     await sse1(room)
 
+    if (options.autoUpdateOptions) {
+        // const root = parent?.querySelector(
+        //     '.MuiPaper-root.MuiPaper-elevation.MuiPaper-rounded'
+        // )
+        // // console.debug('root:', root)
+        // root?.querySelector('button')?.click()
+        clickUpdateOptions()
+    }
+
     if (roomState[currentRoom]) {
         if (roomState[currentRoom].kicked?.includes(profile.id)) {
             processYouKicked()
@@ -345,6 +352,51 @@ async function processRoom(room) {
     // app.querySelectorAll('div[data-id].MuiPaper-root.MuiPaper-elevation.MuiPaper-rounded')
 }
 
+async function addCancelReadyBtn() {
+    console.debug('addCancelReadyBtn')
+    const cancelBtn = document.getElementById('ready-cancel-button')
+    if (cancelBtn) {
+        // console.debug('Cancel Button Already Added')
+        return
+    }
+    const { profile } = await chrome.storage.sync.get(['profile'])
+    if (!roomState[currentRoom]) {
+        // console.debug('No Room State')
+        return
+    }
+    if (roomState[currentRoom].pids[0] !== profile.id) {
+        // console.debug('Skipping Cancel Button, Not Room Owner')
+        return
+    }
+    const homeHeader = document.querySelector('div[data-testid="home-header"]')
+    const ready = homeHeader?.querySelector('button')
+    if (!ready) {
+        // console.debug('return on no ready button')
+        return
+    }
+    console.log('ready', ready)
+    const btn = ready.cloneNode(true)
+    btn.id = 'ready-cancel-button'
+    console.log('btn', btn)
+    btn.textContent = 'Cancel'
+    // btn.classList.add('MuiButton-containedError')
+    btn.style.backgroundColor = '#e57373'
+    btn.addEventListener('click', clickUpdateOptions)
+    ready.parentElement.insertBefore(btn, ready.nextSibling)
+}
+
+/**
+ * Click Update Game Options Button
+ * @function clickUpdateOptions
+ */
+function clickUpdateOptions() {
+    const parent = document.querySelector('div[data-testid="room"]')
+    const root = parent?.querySelector(
+        '.MuiPaper-root.MuiPaper-elevation.MuiPaper-rounded'
+    )
+    root?.querySelector('button')?.click()
+}
+
 /**
  * Process Game Handler
  * TODO: Refactor this function to check source3 connection
@@ -423,6 +475,10 @@ async function sse1(room) {
             if (options.sendSelfOnJoin) {
                 setTimeout(sendPlayerStats, 250, profile.id)
             }
+            if (options.addCancelReadyBtn) {
+                setTimeout(addCancelReadyBtn, 250)
+                // await addCancelReadyBtn()
+            }
         }
     })
 }
@@ -826,9 +882,11 @@ async function newChatMessage(msg) {
     const message = msg.json.message
     const pid = msg.json.cid
 
+    if (message.startsWith('Auto: ')) {
+        return console.debug('Ignoring Auto Message')
+    }
     if (message.startsWith('Joined the game.')) {
-        console.debug('Join Events Moved to SSE Handler!')
-        return
+        return console.debug('Join Events Moved to SSE Handler!')
     }
 
     const { options, profile } = await chrome.storage.sync.get([
@@ -904,7 +962,7 @@ async function userJoinRoom(pid, rid = currentRoom) {
     if (owner) {
         if (options.autoKickBanned && banned.includes(pid)) {
             await kickPlayer(pid)
-            await sendChatMessage(`Auto Kicked Banned User: ${player.username}`)
+            await sendChatMessage(`Kicked Banned User: ${player.username}`)
             return
         }
         if (
@@ -914,7 +972,7 @@ async function userJoinRoom(pid, rid = currentRoom) {
         ) {
             await kickPlayer(pid)
             const ss = `${player.username} ${player.stats.won}/${player.stats.lost} (${player.stats.wl_percent}%)`
-            await sendChatMessage(`Auto Kicked Low Total Game Player: ${ss}`)
+            await sendChatMessage(`Kicked Low Total Game Player: ${ss}`)
             return
         }
         if (
@@ -923,7 +981,7 @@ async function userJoinRoom(pid, rid = currentRoom) {
         ) {
             await kickPlayer(pid)
             const ss = `${player.username} ${player.stats.won}/${player.stats.lost} (${player.stats.wl_percent}%)`
-            await sendChatMessage(`Auto Kicked Low Win Rate Player: ${ss}`)
+            await sendChatMessage(`Kicked Low Win Rate Player: ${ss}`)
             return
         }
     }
@@ -1253,7 +1311,7 @@ function calStats(profile) {
     const games_lost = parseInt(profile.games_lost)
     const wl_percent =
         parseInt((games_won / (games_won + games_lost)) * 100) || 0
-    const text = `${profile.username} Rating: ${rating} - W/L: ${games_won.toLocaleString()} / ${games_lost.toLocaleString()} (${wl_percent}%)`
+    const text = `${profile.username} (${rating}) W/L: ${games_won.toLocaleString()} / ${games_lost.toLocaleString()} (${wl_percent}%)`
     return {
         rating,
         games_won,
@@ -1584,6 +1642,7 @@ async function kickPlayer(pid) {
 async function sendChatMessage(message) {
     const tid = roomState[currentRoom]?.tid
     console.debug('sendChatMessage:', currentRoom, tid, message)
+    message = `Auto: ${message}`
     if (!tid) {
         return sendChatMessageLegacy(message)
     }

src/js/service-worker.js

@@ -23,6 +23,7 @@ const defaultOptions = {
     sendPlayerLeft: false,
     sendTeamsChanged: false,
     stickyTeams: false,
+    addCancelReadyBtn: false,
     autoUpdateOptions: false,
     autoContinueGameEnd: false,
     autoKickBanned: false,