Add more customization options

index.html

@@ -36,6 +36,16 @@ <h1 class="i18n mt-24 mb-20 text-center font-bold" data-i18n="title">BlueArchive
         <span class="i18n label-text text-base ml-4 mr-16" data-i18n="transparent-background">Transparent
           Background</span>
       </label>
+
+      <label class="cursor-pointer label justify-start mx-10">
+        <input type="checkbox" class="toggle toggle-primary" id="swap-colors" />
+        <span class="i18n label-text text-base ml-4 mr-16" data-i18n="swap-colors">Swap Colors</span>
+      </label>
+
+      <label class="cursor-pointer label justify-start mx-10">
+        <input type="checkbox" class="toggle toggle-primary" id="dark-mode" />
+        <span class="i18n label-text text-base ml-4 mr-16" data-i18n="dark-mode">Dark Mode</span>
+      </label>
     </div>
     <div class="mx-6 my-4">
       <div class="collapse collapse-arrow bg-base-100">
@@ -49,6 +59,12 @@ <h1 class="i18n mt-24 mb-20 text-center font-bold" data-i18n="title">BlueArchive
             <span class="flex-1"><span class="mr-2">Y</span><input type="number" placeholder="Type here" value="0"
                 class="input input-bordered input-sm input-primary w-32" id="graphY" /></span>
           </div>
+
+          <div class="flex items-center gap-2">
+            <div class="i18n" data-i18n="accent-color">Accent color</div>
+            <input type="color" value="#128AFA" class="input input-bordered input-sm input-primary w-32"
+              id="accent-color" />
+          </div>
         </div>
       </div>
     </div>

src/canvas.ts

@@ -25,14 +25,29 @@ export default class LogoCanvas {
   private textWidthL = 0;
   private textWidthR = 0;
   private graphOffset = graphOffset;
+  private accentColor = '#128AFA';
   private transparentBg = false;
+  private swapColors = false;
+  private darkMode = false;
   constructor() {
     this.canvas = document.querySelector('#canvas')!;
     this.ctx = this.canvas.getContext('2d')!;
     this.canvas.height = canvasHeight;
     this.canvas.width = canvasWidth;
     this.bindEvent();
   }
+  get backgroundColor() {
+    return this.darkMode ? '#2B2B2B' : '#fff';
+  }
+  get textColor() {
+    return this.darkMode ? '#fff' : '#2B2B2B';
+  }
+  get primaryColor() {
+    return this.swapColors ? this.textColor : this.accentColor;
+  }
+  get secondaryColor() {
+    return this.swapColors ? this.accentColor : this.textColor;
+  }
   async draw() {
     const loading = document.querySelector('#loading')!;
     loading.classList.remove('hidden');
@@ -48,7 +63,7 @@ export default class LogoCanvas {
     c.clearRect(0, 0, this.canvas.width, this.canvas.height);
     //Background
     if (!this.transparentBg) {
-      c.fillStyle = '#fff';
+      c.fillStyle = this.backgroundColor;
       c.fillRect(0, 0, this.canvas.width, this.canvas.height);
     }
     //guide line
@@ -69,24 +84,26 @@ export default class LogoCanvas {
     }
     //blue text -> halo -> black text -> cross
     c.font = font;
-    c.fillStyle = '#128AFA';
+    c.fillStyle = this.primaryColor;
     c.textAlign = 'end';
     c.setTransform(1, 0, horizontalTilt, 1, 0, 0);
     c.fillText(this.textL, this.canvasWidthL, this.canvas.height * textBaseLine);
     c.resetTransform(); //restore don't work
-    c.drawImage(
+    this.drawSVG(
+      c,
       window.halo,
       this.canvasWidthL - this.canvas.height / 2 + this.graphOffset.X,
       this.graphOffset.Y,
       canvasHeight,
-      canvasHeight
+      canvasHeight,
+      this.textColor,
     );
-    c.fillStyle = '#2B2B2B';
+    c.fillStyle = this.secondaryColor;
     c.textAlign = 'start';
     if (this.transparentBg) {
       c.globalCompositeOperation = 'destination-out';
     }
-    c.strokeStyle = 'white';
+    c.strokeStyle = this.backgroundColor;
     c.lineWidth = 12;
     c.setTransform(1, 0, horizontalTilt, 1, 0, 0);
     c.strokeText(this.textR, this.canvasWidthL, this.canvas.height * textBaseLine);
@@ -112,17 +129,30 @@ export default class LogoCanvas {
     if (this.transparentBg) {
       c.globalCompositeOperation = 'destination-out';
     }
-    c.fillStyle = 'white';
+    c.fillStyle = this.backgroundColor;
     c.fill();
     c.globalCompositeOperation = 'source-over';
-    c.drawImage(
+    this.drawSVG(
+      c,
       window.cross,
       this.canvasWidthL - this.canvas.height / 2 + graphOffset.X,
       this.graphOffset.Y,
       canvasHeight,
-      canvasHeight
+      canvasHeight,
+      this.accentColor,
     );
   }
+  private drawSVG(c: CanvasRenderingContext2D, paths: string[], x: number, y: number, w: number, h: number, color: string) {
+    const path = new Path2D();
+    paths.forEach(pathString => {
+      const matrix = document.createElementNS('http://www.w3.org/2000/svg', 'svg').createSVGMatrix();
+      const transformedMatrix = matrix.scale(w / 500, h / 500);
+      path.addPath(new Path2D(pathString), transformedMatrix);
+    });
+    c.fillStyle = color;
+    c.translate(x, y);
+    c.fill(path);
+  }
   bindEvent() {
     const process = (id: 'textL' | 'textR', el: HTMLInputElement) => {
       this[id] = el.value;
@@ -153,6 +183,21 @@ export default class LogoCanvas {
       this.transparentBg = tSwitch.checked;
       this.draw();
     });
+    const scSwitch = document.querySelector('#swap-colors')! as HTMLInputElement;
+    scSwitch.addEventListener('change', () => {
+      this.swapColors = scSwitch.checked;
+      this.draw();
+    });
+    const dSwitch = document.querySelector('#dark-mode')! as HTMLInputElement;
+    dSwitch.addEventListener('change', () => {
+      this.darkMode = dSwitch.checked;
+      this.draw();
+    });
+    const accentColorInput = document.querySelector('#accent-color')! as HTMLInputElement;
+    accentColorInput.addEventListener('input', () => {
+      this.accentColor = accentColorInput.value;
+      this.draw();
+    });
     const gx = document.querySelector('#graphX')! as HTMLInputElement;
     const gy = document.querySelector('#graphY')! as HTMLInputElement;
     gx.addEventListener('input', () => {

src/locales/en.json

@@ -4,11 +4,14 @@
   "copy": "COPY",
   "copy-success": "Image copied",
   "transparent-background": "Transparent Background",
+  "swap-colors": "Swap Colors",
+  "dark-mode": "Dark Mode",
   "advance": "Advance settings",
   "halo-cross": "Halo & Cross position",
+  "accent-color": "Accent color",
   "font-title": "Used Fonts",
   "main-font": "Main font: ",
   "fallback-font": "Fallback font: ",
   "glow": "Wêlai Glow Sans",
   "github-repo": "GitHub repo"
-}
+}

src/main.ts

@@ -1,10 +1,10 @@
 import './style.css';
 import LogoCanvas from './canvas';
-import loadImages from './utils/loadImages';
+import loadSVGs from './utils/loadSVGs';
 import './i18n';
 
 (async function () {
-  await loadImages();
+  await loadSVGs();
   const logo = new LogoCanvas();
   logo.draw();
 })();

src/utils/loadSVGs.ts

@@ -0,0 +1,18 @@
+import halo from '../assets/image/halo.svg';
+import cross from '../assets/image/cross.svg';
+
+const loadImg = async (src: string): Promise<string[]> => {
+  const svg = await fetch(src);
+  const svgText = await svg.text();
+
+  const dp = new DOMParser();
+  const doc = dp.parseFromString(svgText, 'image/svg+xml');
+  const pathItems = doc.getElementsByTagName('path');
+  return Array.from(pathItems).map((item) => item.getAttribute('d')!);
+};
+export default async () => {
+  await Promise.all([
+    loadImg(halo).then((img) => (window.halo = img)),
+    loadImg(cross).then((img) => (window.cross = img)),
+  ]);
+};

src/vite-env.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="vite/client" />
 
 interface Window {
-  halo: HTMLImageElement;
-  cross: HTMLImageElement;
+  halo: string[];
+  cross: string[];
 }