feat: Improve performance

feat: Add `prefix` param
feat: Theme supports `_start` and `_end` as padding image

assets/script.js

@@ -12,7 +12,8 @@
     scale: document.getElementById('scale'),
     pixelated: document.getElementById('pixelated'),
     darkmode: document.getElementById('darkmode'),
-    num: document.getElementById('num')
+    num: document.getElementById('num'),
+    prefix: document.getElementById('prefix')
   };
 
   btn.addEventListener('click', throttle(handleButtonClick, 500));
@@ -48,6 +49,9 @@
     if (num.value > 0) {
       params.num = num.value;
     }
+    if (prefix.value !== '') {
+      params.prefix = prefix.value;
+    }
 
     const query = new URLSearchParams(params).toString();
     const imgSrc = `${__global_data.site}/@${nameValue}?${query}`;

index.js

@@ -35,13 +35,16 @@ app.get(["/@:name", "/get/@:name"],
     }),
     query: z.object({
       theme: z.string().default("moebooru"),
-      num: z.coerce.number().int().min(0).max(1e15).default(0), // a carry-safe integer, less than `2^53-1`, and aesthetically pleasing in decimal.
       padding: z.coerce.number().int().min(0).max(16).default(7),
       offset: z.coerce.number().min(-500).max(500).default(0),
       align: z.enum(["top", "center", "bottom"]).default("top"),
       scale: z.coerce.number().min(0.1).max(2).default(1),
       pixelated: z.enum(["0", "1"]).default("1"),
-      darkmode: z.enum(["0", "1", "auto"]).default("auto")
+      darkmode: z.enum(["0", "1", "auto"]).default("auto"),
+
+      // Unusual Options
+      num: z.coerce.number().int().min(0).max(1e15).default(0), // a carry-safe integer, less than `2^53-1`, and aesthetically pleasing in decimal.
+      prefix: z.coerce.number().int().min(-1).max(999999).default(-1)
     })
   }),
   async (req, res) => {

utils/themify.js

@@ -42,7 +42,7 @@ function convertToDatauri(path) {
 }
 
 function getCountImage(params) {
-  let { count, theme = 'moebooru', padding = 7, offset = 0, align = 'top', scale = 1, pixelated = '1', darkmode = 'auto' } = params
+  let { count, theme = 'moebooru', padding = 7, prefix = -1, offset = 0, align = 'top', scale = 1, pixelated = '1', darkmode = 'auto' } = params
 
   if (!(theme in themeList)) theme = 'moebooru'
   padding = parseInt(Number(padding), 10)
@@ -51,6 +51,20 @@ function getCountImage(params) {
 
   // This is not the greatest way for generating an SVG but it'll do for now
   const countArray = count.toString().padStart(padding, '0').split('')
+
+  // Add prefix if exist
+  if (prefix >= 0) {
+    countArray.unshift(...String(prefix).split(''))
+  }
+
+  // Add _start and _end if exist
+  if (themeList[theme]['_start']) {
+    countArray.unshift('_start')
+  }
+  if (themeList[theme]['_end']) {
+    countArray.push('_end')
+  }
+
   const uniqueChar = [...new Set(countArray)]
 
   let x = 0, y = 0

views/index.pug

@@ -92,7 +92,7 @@ html
                   option(value=theme) #{theme}
           tr
             td: code padding
-            td Set the minimum length, between 1-32, default is 
+            td Set the minimum length, between 1-16, default is 
               code 7
             td: input#padding(type='number', value='7', min='1', max='32', step='1', oninput='this.value = this.value.replace(/[^0-9]/g, "")')
           tr
@@ -136,6 +136,10 @@ html
             td Set counter display number, 0 for disable, default is 
               code 0
             td: input#num(type='number', value='0', min='0', max='1e15', step='1', oninput='this.value = this.value.replace(/[^0-9]/g, "")')
+          tr
+            td: code prefix
+            td Set the prefix number, empty for disable
+            td: input#prefix(type='number', value='', min='0', max='999999', step='1', oninput='this.value = this.value.replace(/[^0-9]/g, "")')
 
       button#get(onclick='_evt_push("click", "normal", "get_counter")') Generate