Merge pull request #40 from georgeistes/ui-ux-patch-1

Buttons and Health features

Author: supreme-gg-gg

.github/workflows/publish.yml

@@ -1,4 +1,3 @@
-# .github/workflows/publish.yml
 name: Publish VSCode Extension
 
 on:
@@ -17,7 +16,9 @@ jobs:
         with:
           node-version: 18.x
 
-      - run: npm install
+      - run: npm install # install the extension deps
+
+      - run: cd live2d-container && npm install # install overlay deps
 
       - name: Publish Extension
         run: npm run deploy

.github/workflows/test.yml

@@ -5,9 +5,9 @@
 	"tasks": [
 		{
 			"type": "npm",
-			"script": "watch",
-			"problemMatcher": "$tsc-watch",
+			"script": "compile",
 			"isBackground": true,
+			"problemMatcher": "$tsc-watch",
 			"presentation": {
 				"reveal": "never"
 			},

.vscode/tasks.json

@@ -45,3 +45,39 @@
   height: 24px;
   object-fit: contain;
 }
+
+.action-button {
+  position: relative;
+}
+
+.action-button .tooltip {
+  position: absolute;
+  background-color: rgba(0, 0, 0, 0.8);
+  color: white;
+  padding: 5px 10px;
+  border-radius: 4px;
+  font-size: 12px;
+  white-space: nowrap;
+  opacity: 0;
+  visibility: hidden;
+  transition: opacity 0.2s ease, visibility 0.2s ease;
+  pointer-events: none;
+  z-index: 1000;
+}
+
+.action-button:hover .tooltip {
+  opacity: 1;
+  visibility: visible;
+}
+
+.action-buttons-container.left .tooltip {
+  left: calc(100% + 10px);
+  transform: translateY(-50%);
+  top: 50%;
+}
+
+.action-buttons-container.right .tooltip {
+  right: calc(100% + 10px);
+  transform: translateY(-50%);
+  top: 50%;
+}

assets/audio/break_reminder.mp3

@@ -15,7 +15,10 @@ class ActionButton {
     this.element.style.backgroundColor = backgroundColor;
 
     if (tooltip) {
-      this.element.title = tooltip;
+      const tooltipElement = document.createElement('div');
+      tooltipElement.className = 'tooltip';
+      tooltipElement.textContent = tooltip;
+      this.element.appendChild(tooltipElement);
     }
 
     if (icon) {

assets/audio/quit.mp3

@@ -6,13 +6,45 @@
  */
 export class MusicPlayer {
     constructor() {
-        // Lofi Girl's streaming URL
         this.audioUrl = "https://play.streamafrica.net/lofiradio";
         this.audio = new Audio(this.audioUrl);
         this.isPlaying = false;
-        
-        // Loop the music
         this.audio.loop = true;
+        
+        // Set initial volume to 0
+        this.audio.volume = 0;
+        this.fadeInterval = null;
+        this.fadeDuration = 1000; // 1 second fade
+    }
+
+    fadeIn() {
+        clearInterval(this.fadeInterval);
+        let volume = 0;
+        this.audio.volume = volume;
+        
+        this.fadeInterval = setInterval(() => {
+            volume += 0.05;
+            if (volume >= 1) {
+                volume = 1;
+                clearInterval(this.fadeInterval);
+            }
+            this.audio.volume = volume;
+        }, this.fadeDuration / 20);
+    }
+
+    fadeOut() {
+        clearInterval(this.fadeInterval);
+        let volume = this.audio.volume;
+        
+        this.fadeInterval = setInterval(() => {
+            volume -= 0.05;
+            if (volume <= 0) {
+                volume = 0;
+                clearInterval(this.fadeInterval);
+                this.audio.pause();
+            }
+            this.audio.volume = volume;
+        }, this.fadeDuration / 20);
     }
 
     toggleMusic() {
@@ -26,12 +58,13 @@ export class MusicPlayer {
 
     play() {
         this.audio.play()
+            .then(() => this.fadeIn())
             .catch(error => console.error("Error playing music:", error));
         this.isPlaying = true;
     }
 
     stop() {
-        this.audio.pause();
+        this.fadeOut();
         this.isPlaying = false;
     }
 }

assets/audio/rest_reminder.mp3

@@ -157,7 +157,7 @@ const loadModel = async (url) => {
       window.electronAPI.onCloseButton();
     },
     icon: createSVGElement(Icons.CLOSE),
-    tooltip: 'Close'
+    tooltip: 'Quit Cheerleader'
   });
 
   buttonManager.addButton({
@@ -187,19 +187,24 @@ const loadModel = async (url) => {
   // Initialize music player
   const musicPlayer = new MusicPlayer();
 
+  // Since it modifies the innerHTML it should take care not to overwrite the tooltip
   buttonManager.addButton({
-    onClick: () => {
+    onClick: (event) => {
       const isPlaying = musicPlayer.toggleMusic();
-      // Update the icon based on play state
+      // Find the icon element and update only its content
       const button = event.currentTarget;
       if (button) {
-        button.innerHTML = isPlaying ?
-          '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M6 19h4V5H6v14zm8-14v14h4V5h-4z"/></svg>' :
-          '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M8 5v14l11-7z"/></svg>';
+        // Clear existing icon content while preserving tooltip
+        const iconSVG = button.querySelector('svg');
+        if (iconSVG) {
+          iconSVG.innerHTML = isPlaying ?
+            '<path d="M6 19h4V5H6v14zm8-14v14h4V5h-4z"/>' :
+            '<path d="M8 5v14l11-7z"/>';
+        }
       }
     },
     icon: createSVGElement('<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M8 5v14l11-7z"/></svg>'),
-    tooltip: 'Toggle Lofi Music'
+    tooltip: "Toggle Lofi Music"
   });
 
   buttonManager.addButton({
@@ -215,7 +220,7 @@ const loadModel = async (url) => {
       window.electronAPI.runVSCodeCommand("cheerleader.rubberDuckVoice");
     },
     icon: createSVGElement(Icons.RUBBER_DUCK),
-    tooltip: "Rubber Duck",
+    tooltip: "Rubber Duck Debugger",
   });
 
   buttonManager.addButton({