feat(themes): adds all waifu themes

bruno-sartori · Aug 25, 2024 · b15244a · b15244a
1 parent ccd5a9e
commit b15244a
Show file tree

Hide file tree

Showing 5 changed files with 97 additions and 17 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@bsartori/weeb-logger",
-  "version": "1.0.6",
+  "version": "1.0.7",
   "author": "Bruno Sartori <[email protected]>",
   "license": "MIT",
   "description": "Weeb Logger is a JS Canvas component for logging on devices that are problematic to use debugging tools (specially if you are using some external framework for developing those ahead) like Samsung Tizen, LG webOS or Chromecast. Plus you can customize it with your favorite waifu! :3",
@@ -10,7 +10,6 @@
     "dist"
   ],
   "scripts": {
-    "prebuild": "shx rm -rf dist && shx mkdir dist",
     "build": "tsc",
     "postbuild": "shx mkdir -p dist/assets && shx cp -r ./src/assets/* ./dist/assets",
     "prepublishOnly": "yarn build",

diff --git a/src/CanvasHandler.ts b/src/CanvasHandler.ts
@@ -1,4 +1,4 @@
-import { SCROLLBAR_WIDTH } from "./constants";
+import { SCROLLBAR_WIDTH, WAIFU_THEME } from "./constants";
 import { IWeebLog } from "./interfaces";
 import { IWeebRequiredLoggerConfig } from "./types";
 
@@ -105,8 +105,9 @@ class WeebLoggerCanvasHandler {
   }
 
   private drawLog(log: IWeebLog) {
+    const textColor = WAIFU_THEME[this.config.waifu.name].textColor;
     this.ctx.font = "14px Consolas";
-    this.ctx.fillStyle = "#fff";
+    this.ctx.fillStyle = textColor;
     this.ctx.save();
     const width = this.canvas.width;
 
@@ -118,7 +119,7 @@ class WeebLoggerCanvasHandler {
         const y = wrappedText[j].y;
         const text = line.split(log.label);
 
-        this.ctx.fillStyle = '#fff';
+        this.ctx.fillStyle = textColor;
         this.ctx.fillText(text[0], x, y);
         x += this.ctx.measureText(text[0]).width;
 
@@ -127,7 +128,7 @@ class WeebLoggerCanvasHandler {
           this.ctx.fillText(log.label, x, y);
           x += this.ctx.measureText(log.label).width;
 
-          this.ctx.fillStyle = '#fff';
+          this.ctx.fillStyle = textColor;
           this.ctx.fillText(text[1], x, y);
         }
 

diff --git a/src/assets/images/pixchan.webp b/src/assets/images/pixchan.webp
diff --git a/src/constants.ts b/src/constants.ts
@@ -1,3 +1,7 @@
+export const SCROLLBAR_WIDTH = 10;
+
+export const MIN_WIDTH = 400;
+
 export const BORDER_RADIUS = {
   'top-right': 'border-bottom-left-radius: 5px;',
   'top-left': 'border-bottom-right-radius: 5px;',
@@ -17,6 +21,83 @@ export const WAIFU_SIZE = {
   'large': '600'
 };
 
-export const SCROLLBAR_WIDTH = 10;
+export const WAIFU_THEME = {
+  'akeno': {
+    logContainer: `background-color: rgba(79, 77, 100, 0.7);`,
+    scrollbarTrack: `background-color: #511243;`,
+    scrollbarThumb: `background-color: #7d2761;`,
+    scrollbarThumbHover: `background-color: #c65d9c;`,
+    textColor: '#fff'
+  },
+  'alya': {
+    logContainer: `background-color: rgba(223, 187, 202, 0.7);`,
+    scrollbarTrack: `background-color: #fcc7d1;`,
+    scrollbarThumb: `background-color: #83cedd;`,
+    scrollbarThumbHover: `background-color: #9fd7e2;`,
+    textColor: '#fff'
+  },
+  'aqua': {
+    logContainer: `background-color: rgba(42, 53, 106, 0.7);`,
+    scrollbarTrack: `background-color: #6093c4;`,
+    scrollbarThumb: `background-color: #9dd1e2;`,
+    scrollbarThumbHover: `background-color: #c9f5f7;`,
+    textColor: '#fff',
+  },
+  'ayano': {
+    logContainer: `background-color: rgba(80, 82, 85, 0.7);`,
+    scrollbarTrack: `background-color: #755b61;`,
+    scrollbarThumb: `background-color: #ba8a7c;`,
+    scrollbarThumbHover: `background-color: #ccbfb7;`,
+    textColor: '#fff'
+  },
+  'darkness': {
+    logContainer: `background-color: rgba(255, 177, 33, 0.7);`,
+    scrollbarTrack: `background-color: #fbbe44;`,
+    scrollbarThumb: `background-color: #f38c28;`,
+    scrollbarThumbHover: `background-color: #bd722c;`,
+    textColor: '#fff',
+  },
+  'koneko': {
+    logContainer: `background-color: rgba(237, 229, 223, 0.7);`,
+    scrollbarTrack: `background-color: #ba265e;`,
+    scrollbarThumb: `background-color: #ca941f;`,
+    scrollbarThumbHover: `background-color: #e5a943;`,
+    textColor: '#000',
+  },
+  'masha': {
+    logContainer: `background-color: rgba(202, 166, 144, 0.7);`,
+    scrollbarTrack: `background: #834826;`,
+    scrollbarThumb: `background: #c49d6d;`,
+    scrollbarThumbHover: `background: #e4be9d;`,
+    textColor: '#fff'
+  },
+  'megumin': {
+    logContainer: `background-color: rgba(133, 43, 62, 0.7);`,
+    scrollbarTrack: `background: #720b0f;`,
+    scrollbarThumb: `background: #b7213a;`,
+    scrollbarThumbHover: `background: #c24448;`,
+    textColor: '#fff',
+  },
+  'tohka': {
+    logContainer: `background-color: rgba(74, 35, 82, 0.7);`,
+    scrollbarTrack: `background: #3b2754;`,
+    scrollbarThumb: `background: #6136a5;`,
+    scrollbarThumbHover: `background: #b62289;`,
+    textColor: '#fff',
+  },
+  'yuki': {
+    logContainer: `background-color: rgba(96, 84, 94, 0.7);`,
+    scrollbarTrack: `background-color: #744462;`,
+    scrollbarThumb: `background-color: #8f5e89;`,
+    scrollbarThumbHover: `background-color: #a577a2;`,
+    textColor: '#fff'
+  },
+  'zerotwo': {
+    logContainer: `background-color: rgba(238, 198, 202, 0.7);`,
+    scrollbarTrack: `background: #a64b5b;`,
+    scrollbarThumb: `background: #940200;`,
+    scrollbarThumbHover: `background: #db0c0d;`,
+    textColor: '#fff',
+  },
+};
 
-export const MIN_WIDTH = 400;
diff --git a/src/index.ts b/src/index.ts
@@ -1,6 +1,6 @@
 import chalk from 'chalk';
 import { formatDate, getTimeDiff, isUndefined, isValidString, pxToRem, waifuUrls } from './utils';
-import { BORDER_RADIUS, CONTAINER_POSITION, SCROLLBAR_WIDTH, WAIFU_SIZE } from './constants';
+import { BORDER_RADIUS, CONTAINER_POSITION, SCROLLBAR_WIDTH, WAIFU_SIZE, WAIFU_THEME } from './constants';
 import WeebLoggerCanvasHandler from './CanvasHandler'
 import { IWeebLog, IWeebLoggerConfig } from './interfaces';
 import { IWeebRequiredLoggerConfig, LogType } from './types';
@@ -70,22 +70,22 @@ class WeebLogger {
 
         /* Track */
         #log-container::-webkit-scrollbar-track {
-          background: #ccc; 
+          ${WAIFU_THEME[this.config.waifu.name].scrollbarTrack}
         }
         
         /* Handle */
         #log-container::-webkit-scrollbar-thumb {
-          background: #888; 
+          ${WAIFU_THEME[this.config.waifu.name].scrollbarThumb} 
         }
 
         /* Handle on hover */
         #log-container::-webkit-scrollbar-thumb:hover {
-          background: #555; 
+          ${WAIFU_THEME[this.config.waifu.name].scrollbarThumbHover} 
         }
         
         .resizable {
           overflow: hidden;
-          backdrop-filter: blur(10px);
+          backdrop-filter: blur(7px);
           position: fixed;
           width: ${pxToRem(this.config.containerStyle.width)}; 
           height: ${pxToRem(this.config.containerStyle.height)}; 
@@ -99,12 +99,11 @@ class WeebLogger {
           opacity: ${this.config.containerStyle.opacity};
           overflow-y: scroll;
           direction: ${this.isLeftSide() ? 'rtl' : 'ltr'};
-          background-color: rgba(0, 0, 0, 0.5);
           flex: 1;
           width: 100%;
           height: 100%;
           box-sizing: border-box;
-
+          ${WAIFU_THEME[this.config.waifu.name].logContainer}
           ${BORDER_RADIUS[this.config.containerStyle.position]}
         }
 
@@ -117,8 +116,8 @@ class WeebLogger {
         #weeb-logger-waifu {
           position: fixed;
           bottom: 10px;
-          right: 0;
-          opacity: 0.6;
+          right: 10px;
+          opacity: 0.7;
           z-index: 999999999;
         }