From e01ab116ee747f9907b94215c255a04bf959720b Mon Sep 17 00:00:00 2001
From: Dotty <dotty-dev@tuta.io>
Date: Mon, 20 May 2024 17:32:22 +0200
Subject: [PATCH 1/2] modified addStyles to stop spamming DOM with styles

---
 entrypoints/match.content/liveViewRing.ts     |  2 +-
 entrypoints/match.content/scoreSmaller.ts     |  2 +-
 entrypoints/match.content/winner-animation.ts |  8 +++++++-
 utils/index.ts                                | 11 +++++++++--
 4 files changed, 18 insertions(+), 5 deletions(-)

diff --git a/entrypoints/match.content/liveViewRing.ts b/entrypoints/match.content/liveViewRing.ts
index e01e57e..07f7bf6 100644
--- a/entrypoints/match.content/liveViewRing.ts
+++ b/entrypoints/match.content/liveViewRing.ts
@@ -64,7 +64,7 @@ export async function liveViewRing() {
         .ad-ext_boardview-container .ad-ext_boardview-numbers {
             display: block;
         }
-        `);
+        `, "live-view-ring");
 
   const config = await AutodartsToolsConfig.getValue();
   const ringSize = config.liveViewRing.size;
diff --git a/entrypoints/match.content/scoreSmaller.ts b/entrypoints/match.content/scoreSmaller.ts
index 6afb483..5539167 100644
--- a/entrypoints/match.content/scoreSmaller.ts
+++ b/entrypoints/match.content/scoreSmaller.ts
@@ -8,7 +8,7 @@ export async function scoreSmaller() {
   try {
     addStyles(`
         .adp_points-small { font-size: 3em!important; }
-        `);
+        `, "score-smaller");
 
     const activePlayerCardPointsEl = document.querySelector(".ad-ext-player-active .ad-ext-player-score") || document.querySelector(".ad-ext-player-winner .ad-ext-player-score");
     const inactivePlayerCardPointsElArr = [ ...document.querySelectorAll(".ad-ext-player-inactive .ad-ext-player-score") ];
diff --git a/entrypoints/match.content/winner-animation.ts b/entrypoints/match.content/winner-animation.ts
index 0b84376..b0d8e9c 100644
--- a/entrypoints/match.content/winner-animation.ts
+++ b/entrypoints/match.content/winner-animation.ts
@@ -93,6 +93,12 @@ export async function winnerAnimation() {
         animation: steam 20s linear infinite;
         border-radius: 5px;
       }
+
+      .ad-ext-player-winner + div {
+        border-radius: 5px;
+        background: black;
+        margin-top: 2px;
+      }
       
       @keyframes steam {
         0% {
@@ -109,7 +115,7 @@ export async function winnerAnimation() {
       .ad-ext_winner-animation:after {
         filter: blur(50px);
       }
-    `);
+    `, "winner-animation");
 
   await waitForElement("#ad-ext-turn");
 
diff --git a/utils/index.ts b/utils/index.ts
index 4320cea..74cd8ed 100644
--- a/utils/index.ts
+++ b/utils/index.ts
@@ -64,8 +64,15 @@ export function waitForElementWithTextContent(selector: string | string[], textC
   });
 }
 
-export function addStyles(css: string) {
+/**
+ * @param css {string} - CSS rules string to be added
+ * @param componentName {string} - Name of the component
+ */
+export function addStyles(css: string, componentName: string = "") {
   const style = document.createElement("style");
+  style.id = `ad-ext_style_${componentName}`;
   style.innerHTML = css;
-  document.getElementsByTagName("head")[0].appendChild(style);
+  if (!document.querySelector(`#${style.id}`)) {
+    document.getElementsByTagName("head")[0].appendChild(style);
+  }
 }

From 9af75ba8a50381c3c6c5661b20268a15eeef9eca Mon Sep 17 00:00:00 2001
From: Dotty <dotty-dev@tuta.io>
Date: Mon, 20 May 2024 17:37:29 +0200
Subject: [PATCH 2/2] changed document.head ref in addStyles

---
 utils/index.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/utils/index.ts b/utils/index.ts
index 74cd8ed..778370f 100644
--- a/utils/index.ts
+++ b/utils/index.ts
@@ -73,6 +73,6 @@ export function addStyles(css: string, componentName: string = "") {
   style.id = `ad-ext_style_${componentName}`;
   style.innerHTML = css;
   if (!document.querySelector(`#${style.id}`)) {
-    document.getElementsByTagName("head")[0].appendChild(style);
+    document.head.appendChild(style);
   }
 }