fix: Resolve ESLint issues in temperament implementation

- Run ESLint with --fix to auto-resolve formatting issues
- Apply Prettier formatting after fixes
- Ensure code style compliance for CI checks

Fixes ESLint errors preventing PR merge

Author: Developer

js/widgets/temperament.js

@@ -432,8 +432,9 @@ function TemperamentWidget() {
                     docById("noteInfo").remove();
                 }
 
-                docById("information").innerHTML +=
-                    `<div class="popup" id="noteInfo" style="left: ${x}px; top: ${y}px;">
+                docById(
+                    "information"
+                ).innerHTML += `<div class="popup" id="noteInfo" style="left: ${x}px; top: ${y}px;">
                         <span class="popuptext" id="myPopup"></span>
                     </div>`;
                 if (i !== 0) {
@@ -519,17 +520,19 @@ function TemperamentWidget() {
         docById("noteInfo").style.height = "130px";
         docById("note").innerHTML = "";
         docById("frequency").innerHTML = "";
-        docById("noteInfo").innerHTML +=
-            `<center><input type="range" class="sliders" id="frequencySlider1" style="width:170px; background:white; border:0;" min="${
-                this.frequencies[i - 1]
-            }" max="${this.frequencies[i + 1]}"></center>`;
+        docById(
+            "noteInfo"
+        ).innerHTML += `<center><input type="range" class="sliders" id="frequencySlider1" style="width:170px; background:white; border:0;" min="${
+            this.frequencies[i - 1]
+        }" max="${this.frequencies[i + 1]}"></center>`;
         docById("noteInfo").innerHTML += `<br>&nbsp;&nbsp;${_(
             "frequency"
         )}<span class="rangeslidervalue" id="frequencydiv1">${this.frequencies[i]}</span>`;
-        docById("noteInfo").innerHTML +=
-            `<br><br><div id="done" style="background:rgb(196, 196, 196);"><center>${_(
-                "done"
-            )}</center><div>`;
+        docById(
+            "noteInfo"
+        ).innerHTML += `<br><br><div id="done" style="background:rgb(196, 196, 196);"><center>${_(
+            "done"
+        )}</center><div>`;
 
         docById("frequencySlider1").oninput = function () {
             docById("frequencydiv1").innerHTML = docById("frequencySlider1").value;
@@ -1453,17 +1456,19 @@ function TemperamentWidget() {
                     '" alt="' +
                     _("Close") +
                     '" height=20px width=20px align="right">';
-                docById("noteInfo1").innerHTML +=
-                    `<br><center><input type="range" class="sliders" id = "frequencySlider" style="width:170px; background:white; border:0;" min="${
-                        frequencies[i]
-                    }" max="${frequencies[i + 1]}" value="30"></center>`;
+                docById(
+                    "noteInfo1"
+                ).innerHTML += `<br><center><input type="range" class="sliders" id = "frequencySlider" style="width:170px; background:white; border:0;" min="${
+                    frequencies[i]
+                }" max="${frequencies[i + 1]}" value="30"></center>`;
                 docById("noteInfo1").innerHTML += `&nbsp;&nbsp;${_(
                     "frequency"
                 )} : <span class="rangeslidervalue" id="frequencydiv">${frequencies[i]}</span>`;
-                docById("noteInfo1").innerHTML +=
-                    `<br><br><div id="done" style="background:rgb(196, 196, 196);"><center>${_(
-                        "done"
-                    )}</center><div>`;
+                docById(
+                    "noteInfo1"
+                ).innerHTML += `<br><br><div id="done" style="background:rgb(196, 196, 196);"><center>${_(
+                    "done"
+                )}</center><div>`;
 
                 docById("noteInfo1").style.top = "100px";
                 docById("noteInfo1").style.left = "90px";
@@ -2140,12 +2145,9 @@ function TemperamentWidget() {
             }
 
             if (i <= pitchNumber && i >= 0 && that._playing && p < 2) {
-                setTimeout(
-                    function () {
-                        __playLoop(i);
-                    },
-                    Singer.defaultBPMFactor * 1000 * duration
-                );
+                setTimeout(function () {
+                    __playLoop(i);
+                }, Singer.defaultBPMFactor * 1000 * duration);
             } else {
                 that.inbetween = true;
             }
@@ -2162,16 +2164,13 @@ function TemperamentWidget() {
                 that._playing = false;
                 that.playbackForward = true;
                 this.inbetween = false;
-                setTimeout(
-                    function () {
-                        that.notesCircle.navItems[0].fillAttr = "#c8C8C8";
-                        that.notesCircle.navItems[0].sliceHoverAttr.fill = "#c8C8C8";
-                        that.notesCircle.navItems[0].slicePathAttr.fill = "#c8C8C8";
-                        that.notesCircle.navItems[0].sliceSelectedAttr.fill = "#c8C8C8";
-                        that.notesCircle.refreshWheel();
-                    },
-                    Singer.defaultBPMFactor * 1000 * duration
-                );
+                setTimeout(function () {
+                    that.notesCircle.navItems[0].fillAttr = "#c8C8C8";
+                    that.notesCircle.navItems[0].sliceHoverAttr.fill = "#c8C8C8";
+                    that.notesCircle.navItems[0].slicePathAttr.fill = "#c8C8C8";
+                    that.notesCircle.navItems[0].sliceSelectedAttr.fill = "#c8C8C8";
+                    that.notesCircle.refreshWheel();
+                }, Singer.defaultBPMFactor * 1000 * duration);
             }
         };
         if (