Improve load times

optimize assets

public/assets/creeps/optimize.cjs

@@ -0,0 +1,18 @@
+const fs = require('fs');
+const { exec, execSync } = require('child_process');
+let dir = fs.readdirSync('.');
+dir.forEach((item) => {
+    const itemPath = `./${item}`;
+    if (fs.lstatSync(itemPath).isDirectory()) {
+        let subDir = fs.readdirSync(itemPath);
+        subDir.forEach(async (subItem) => {
+            const subItemPath = `${itemPath}/${subItem}`;
+            if (fs.lstatSync(subItemPath).isFile() && subItem.endsWith('.png')) {
+                const outputFilePath = `${itemPath}/${subItem.replace('.png', 's.png')}`;
+                await execSync(`convert -resize 128x128 -quality 80 ${subItemPath} ${outputFilePath}`);
+                fs.unlinkSync(subItemPath);
+                fs.renameSync(outputFilePath, subItemPath);
+            }
+        });
+    }
+});

src/classes/game/Creep.ts

@@ -74,8 +74,8 @@ export default class Creep extends GameObject {
         const percent = hp / maxHp;
         const width = this.healthBarWidth * percent;
         // ! TODO: MAKE THIS BETTER! It works like this now, but I don't like how its implemented.
-        this.healthBarGraphics.rect(-this.healthBarWidth / 2 + 5, -30, this.healthBarWidth, 10);
-        this.healthBarGraphics.fill({ color: 0x00ff00 });
+        this.healthBarGraphics.rect(-this.healthBarWidth / 2 + 3, -32, this.healthBarWidth + 4, 14);
+        this.healthBarGraphics.fill({ color: 0x000000 });
         this.healthBarGraphics.rect(-this.healthBarWidth / 2 + 5, -30, width, 10);
         this.healthBarGraphics.fill({ color: 0xff0000 });
     }