re-scaled UI

Author: htmlcoderexe

UI/AbilitySlot.js

@@ -13,7 +13,7 @@ class AbilitySlot extends UIElement
         if(this.ability!=null)
         {
             UIRenderer.drawGauge(ctx,
-                this.hitbox.x+6,this.hitbox.y+6,24,this.hitbox.height-8,
+                this.hitbox.x+10,this.hitbox.y+10,24,this.hitbox.height-16,
                 Math.floor(this.ability.charge),this.ability.maxcharge,
                 "0 255 50");
         }

UI/Renderer.js

@@ -7,27 +7,95 @@ class UIRenderer
 
     static drawGauge(ctx, x, y,w,h, filled, total, colour)
     {
-        let empy ="100 100 100";
-        let outline = "120 40 0";
-        let step = Math.floor(h/total);
-        let spacing = 1;
+
+    let empy ="100 100 100";
+    let empylight ="200 200 200";
+    let outline = "120 40 0";
+    let step = Math.floor(h/total);
+    let shift = h % step;
+    let spacing = 2;
+    if(step>=8)
+    {
         for(let i = 0; i<total;i++)
         {
             ctx.beginPath();
-            ctx.roundRect(x+0.5,y+0.5+step*i, w-1,step-1-spacing,2);
-            ctx.lineWidth=1;
+           ctx.lineWidth=2;
             ctx.strokeStyle=this.rgb(outline);
             if(i<(total-filled))
-            {
+            { 
+                ctx.roundRect(x+0,y+0+shift+step*i, w-1,step-1-spacing,3);
+                ctx.fillStyle=this.rgb(empylight);
+                ctx.fill();
+                ctx.beginPath();
+                ctx.roundRect(x+0+1,y+0+1+shift+step*i, w-1-1,step-1-spacing-1,3);
                 ctx.fillStyle=this.rgb(empy);
+                ctx.fill();
             }
             else
-            {
+            { 
+                ctx.roundRect(x+0,y+0+shift+step*i, w-1,step-1-spacing,3);
                 ctx.fillStyle=this.rgb(colour);
+                ctx.fill();
             }
-            ctx.fill();
+            ctx.beginPath();
+            ctx.roundRect(x+0,y+0+shift+step*i, w-1,step-1-spacing,3);
             ctx.stroke();
         }
+    }
+    else
+    {
+        const fillPercent = filled/total;
+        const hempty=(1-fillPercent)*(h-1);
+        const hfull=fillPercent*(h-1);
+        ctx.fillStyle=this.rgb(colour);
+        ctx.beginPath();
+        ctx.roundRect(x+1,y+1,w-1,h-2,2);
+        ctx.fill();
+        ctx.fillStyle=this.rgb(empy);
+        ctx.beginPath();
+        ctx.roundRect(x+1, y+1,w-1,hempty,2);
+        ctx.fill();
+        ctx.beginPath();
+        
+        
+        ctx.lineWidth=2;
+        ctx.strokeStyle=this.rgb(outline);
+        ctx.roundRect(x+0,y+0, w-1,h-1,2);
+        ctx.stroke();
+
+        if(step>4)
+        {
+            for(let i = 1; i<total;i++)
+            {
+                ctx.beginPath();
+                //ctx.roundRect(x+0.5,y+0.5+step*i, w-1,step-1-spacing,2);
+                ctx.moveTo(x+0,y+0+step*i);
+                ctx.lineTo(x+0+w-1,y+0+step*i);
+                
+                ctx.lineWidth=2;
+                ctx.strokeStyle=this.rgb(outline);
+                
+                ctx.stroke();
+            }
+
+        }
+        else if(step>1)
+        {
+            for(let i = 1; i<total;i++)
+            {
+                ctx.beginPath();
+                //ctx.roundRect(x+0.5,y+0.5+step*i, w-1,step-1-spacing,2);
+                ctx.moveTo(x+0.5,y+0.5+step*i);
+                ctx.lineTo(x+0.5+w-1,y+0.5+step*i);
+                
+                ctx.lineWidth=1;
+                ctx.strokeStyle=this.rgb(outline);
+                
+                ctx.stroke();
+            }
+
+        }
+    }
 
     }
 
@@ -41,10 +109,10 @@ class UIRenderer
         ctx.fillStyle=this.rgb(main);
         ctx.fill();
         ctx.strokeStyle=this.rgb(outline);
-        ctx.lineWidth=5;
+        ctx.lineWidth=9;
         ctx.stroke();
         ctx.strokeStyle=this.rgb(outline2);
-        ctx.lineWidth=3;
+        ctx.lineWidth=5;
         ctx.stroke();
 
     }
@@ -62,10 +130,10 @@ class UIRenderer
         ctx.fillStyle=this.rgb(bottom);
         ctx.fill();
         ctx.strokeStyle=this.rgb(outline);
-        ctx.lineWidth=5;
+        ctx.lineWidth=9;
         ctx.stroke();
         ctx.strokeStyle=this.rgb(outline2);
-        ctx.lineWidth=3;
+        ctx.lineWidth=5;
         ctx.stroke();
         ctx.beginPath();
         ctx.roundRect(x+2.5,y-2,w-5,h-3,5);

scenes/Dash.js

@@ -28,7 +28,7 @@ class GameSceneDash extends GameScene
         lazor.base_recharge=1;
         lazor.apply=()=>this.player.doSkill();
         this.player.abilities.push(lazor);
-        const bt = new AbilitySlot(new Rectangle(0,this.longSide-100,70,70),lazor);
+        const bt = new AbilitySlot(new Rectangle(10,this.longSide-100,70,72),lazor);
         this.uimgr.components.push(bt);
     }
     addObject(obj)