Update tooltip text if no average accuracy

README.md

@@ -14,7 +14,8 @@ Use the icon in the top right corner to adjust the settings.
 
 - First three numbers are the wins/loses/draws of the player
 - Percentage in brackets is the average accuracy of the player
-    - Accuracy is only available on games which were reviewed
+    - Accuracy is only available on rated games which were reviewed
+    - Hover over the stats to see information how many games the average is based on
 
 ### Preview
 ![preview](images/preview.png)

manifest.json

@@ -3,7 +3,7 @@
   "description": "Shows Win/Lose/Draw and average accuracy for players on chess.com",
   "author": "thieleju",
   "manifest_version": 3,
-  "version": "2.3.2",
+  "version": "2.3.3",
   "permissions": ["activeTab", "scripting", "webRequest", "storage"],
   "action": {
     "default_locale": "en",

package.json

@@ -1,7 +1,7 @@
 {
   "name": "chess-com-insights",
   "private": true,
-  "version": "2.3.2",
+  "version": "2.3.3",
   "type": "module",
   "repository": {
     "type": "git",

src/modules/UiUpdater.ts

@@ -73,51 +73,64 @@ export class UiUpdater {
     return el
   }
 
-  //TODO optimize this function and document it
+  /**
+   * Adds a tooltip to a given HTML element when the mouse enters it.
+   *
+   * @param {HTMLElement} el - The HTML element to which the tooltip will be added.
+   * @param {"top" | "bottom"} side - The side of the element where the tooltip should appear.
+   * @param {Stats} stats - The statistics object containing accuracy and game data.
+   * @param {string} timeInterval - The time interval for which the accuracy is displayed.
+   * @returns {void}
+   */
   addTooltipToStatsElement(
     el: HTMLElement,
     side: "top" | "bottom",
     stats: Stats,
     timeInterval: string
   ): void {
+    // add event to stats element
     el.addEventListener("mouseenter", () => {
+      // create tooltip element
       const tooltip = document.createElement("div")
-      tooltip.classList.add("user-popover-component")
-      tooltip.classList.add("user-popover-popover")
-      tooltip.classList.add("user-username-component")
-      tooltip.classList.add("user-tagline-username")
+      tooltip.classList.add(
+        "user-popover-component",
+        "user-popover-popover",
+        "user-username-component",
+        "user-tagline-username"
+      )
 
       this.uiWindow.getDocument().body.appendChild(tooltip)
 
-      // const percent = Math.floor(
-      //   (stats.accuracy.wld.games / stats.wld.games) * 100
-      // )
-
-      const { wins, loses, draws } = stats.accuracy.wld
-
-      tooltip.innerHTML = `
-        <span style="padding-bottom:5px">
-        <strong>Average accuracy of ${stats.accuracy.avg}%</strong>  (${timeInterval})
-        </span>
-        <span>
-        Accuracy available on ${stats.accuracy.wld.games} out of ${stats.wld.games} games 
-        <br>
-        WLD of analyzed games: ${wins}/${loses}/${draws}
-        </span>
-      `
-
-      const elementWidth = 280
+      const { wins, loses, draws, games } = stats.accuracy.wld
+
+      tooltip.innerHTML =
+        stats.accuracy.avg === 0
+          ? `<span style="padding-bottom:5px"> \
+               No accuracy data available (${timeInterval}) \
+               <br>\
+               Accuracy is only available on analyzed rated games \
+             </span>`
+          : `<span style="padding-bottom:5px"> \
+               <strong>Average accuracy of ${stats.accuracy.avg}%</strong> (${timeInterval}) \
+             </span> \
+             <span> \
+               Accuracy based on ${games} out of ${stats.wld.games} games  \
+               <br> \
+               W/L/D of analyzed games: ${wins}/${loses}/${draws} \
+             </span>`
 
       tooltip.style.position = "absolute"
       tooltip.style.padding = "10px"
-      tooltip.style.width = `${elementWidth}px`
+      tooltip.style.width = `auto`
+      tooltip.style.maxWidth = `fit-content`
 
-      const { left, top, height, bottom } = el.getBoundingClientRect()
-      tooltip.style.left = `${left}px`
-      tooltip.style.top = `${top + height}px`
+      const { left, top, height } = el.getBoundingClientRect()
 
-      if (side === "bottom")
-        tooltip.style.top = `${top - tooltip.getBoundingClientRect().height}px`
+      tooltip.style.left = `${left}px`
+      tooltip.style.top =
+        side === "bottom"
+          ? `${top - tooltip.getBoundingClientRect().height}px`
+          : `${top + height}px`
 
       el.addEventListener("mouseleave", () => tooltip.remove())
     })