add elo rating to each problem and fix show difficulty button

Author: zubyj

src/background/background.ts

@@ -20,6 +20,7 @@ chrome.runtime.onInstalled.addListener(() => {
     chrome.storage.local.set({ showExamples: true });
     chrome.storage.local.set({ showDifficulty: true });
     chrome.storage.local.set({ clickedCompany: 'Amazon' });
+    chrome.storage.local.set({ showRating: true });
 });
 
 chrome.runtime.onMessage.addListener(

src/content-script/update-description-tab.ts

@@ -31,19 +31,51 @@ function showExamples() {
 function showDifficulty() {
     chrome.storage.local.get(['showDifficulty'], (result) => {
         const showDifficulty = result.showDifficulty;
+        const difficultyContainer = document.querySelectorAll('div.mt-3.flex')[0];
+        if (!difficultyContainer) return;
+        if (showDifficulty) {
+            // hide the first child of the difficulty container
+            difficultyContainer.children[0].style.display = 'block';
+        }
+        else {
+            difficultyContainer.children[0].style.display = 'none';
+        }
+    });
+}
 
-        // Finding the difficulty element and then toggling the display.
-        const colors = ['bg-olive', 'bg-yellow', 'bg-red'];
-        for (const color in colors) {
-            if (!color) continue;
-            const element = document.querySelectorAll('div.' + colors[color])[0];
-            if (element instanceof HTMLElement) {
-                element.style.display = showDifficulty ? 'block' : 'none';
-            }
+// show the leetcode problem rating if the user has enabled it in the settings
+function showRating(problemTitle: string) {
+    chrome.storage.local.get(['showRating'], (result) => {
+        const showRating = result.showRating;
+        if (showRating) {
+            chrome.storage.local.get(['leetcodeProblems'], (result) => {
+                const problem = result.leetcodeProblems.questions.find((problem: problem) => problem.title === problemTitle);
+
+                let ratingElement = document.getElementById('ratingElement');
+
+                if (ratingElement) {
+                    // update the existing rating element
+                    ratingElement.textContent = problem.rating;
+                } else {
+                    // create a new rating element
+                    ratingElement = document.createElement('div');
+                    ratingElement.id = 'ratingElement';
+                    ratingElement.textContent = problem.rating;
+                    ratingElement.style.fontSize = '12px';
+                    ratingElement.style.color = 'lightcyan';
+                }
+
+                const difficultyContainer = document.querySelectorAll('div.mt-3.flex')[0];
+                if (difficultyContainer) {
+                    // insert the rating element after the first child of the difficulty container
+                    difficultyContainer.insertBefore(ratingElement, difficultyContainer.children[0].nextSibling);
+                }
+            });
         }
     });
 }
 
+
 // show the company tags if the user has enabled it in the settings
 function showCompanyTags(problemTitle: string) {
     chrome.storage.local.get(['showCompanyTags'], (result) => {
@@ -162,5 +194,6 @@ chrome.runtime.onMessage.addListener((request) => {
         showExamples();
         showCompanyTags(request.title.split('-')[0].trim());
         showDifficulty();
+        showRating(request.title.split('-')[0].trim());
     }
 });