debug: logging in scripts

scripts/card.js

@@ -17,6 +17,8 @@ logo.onload = redrawBg;
 // for the card canvas
 function redrawBg() {
     // asset calculations
+    console.log(`[call::redrawBg()] showLogo:${showLogo} showWtm:${showWtm}`);
+
     const logoScale = document.querySelector('#logo-size-option').value;
     const logoOffset = document.querySelector('#logo-offset').value;
 
@@ -56,16 +58,18 @@ function redrawText() {
     const delay = Number(document.querySelector('#delay-rate > input[type="number"]').value);
     const fontSize = Math.min(Math.abs(+fontSizeInput.value || 120));
     const fontFamily = fontFamilyInput.value || 'sans-serif';
+    const value = (textInput.value || 'TAKE YOUR HEART').trim();
+    const splitValue = value.split('\n');
+
+    console.log(`[call::redrawText()] textInput:${value}`);
+    console.log(`[call::redrawText()] delay:${delay} fontSize:${fontSize} fontFamily:${fontFamily}`);
 
     // another canvas so making multiline text is easier
     lineCanvas.width = canvasText.width;
     lineCanvas.height = fontSize * 2.2;
 
     textCtx.clearRect(0, 0, canvasText.width, canvasText.height);
-
-    const value = (textInput.value || 'TAKE YOUR HEART').trim();
-    const splitValue = value.split('\n');
-
+
     // they are all offset, just a different name and purpose
     let lineHeight = 0, middleOffset = 0, heightOffset = 0;
     let topOffset = Number(document.querySelector('#text-top').value);
@@ -88,7 +92,7 @@ function redrawText() {
             textCtx.drawImage(lineCanvas, 0, lineHeight + middleOffset + topOffset);
 
             lineHeight = Math.floor(heightOffset) || lineHeight;
-            console.log(value, lineHeight, middleOffset, heightOffset);
+            console.log(`[call::redrawText()] lineHeight:${lineHeight} middleOffset:${middleOffset} heightOffset:${heightOffset}`);
         }, timer);
         timer += delay;
     });

scripts/editor.js

@@ -12,6 +12,7 @@ function saveDelay() {
     date.setTime(date.getTime() + (365 * 24 * 60 * 60 * 1000));
     let expires = "expires=" + date.toUTCString();
     document.cookie = `delay=${delay};${expires};path=/`;
+    console.log(`[call::saveDelay()] delay:${delay}ms OK`);
 }
 
 window.onload = function() {

scripts/exporter.js

@@ -1 +1,17 @@
-function exportCard(){let e=document.querySelector("#canvas-card"),a=document.querySelector("#canvas-text");redrawBg();let t=e.getContext("2d");t.save(),t.drawImage(a,0,0);const r=canvas.toDataURL("image/png").replace("image/png","image/octet-stream"),c=document.createElement("a");c.href=r,c.download=`p5cc_${Math.floor(1e6*Math.random())}.png`,c.target="blank",c.click(),t.restore()}
+function exportCard() {
+  console.log("[call::exportCard()] Saving image...");
+  let e = document.querySelector("#canvas-card"),
+    a = document.querySelector("#canvas-text");
+  redrawBg();
+  let t = e.getContext("2d");
+  t.save(), t.drawImage(a, 0, 0);
+  const r = canvas
+      .toDataURL("image/png")
+      .replace("image/png", "image/octet-stream"),
+    c = document.createElement("a");
+  (c.href = r),
+    (c.download = `p5cc_${Math.floor(1e6 * Math.random())}.png`),
+    (c.target = "blank"),
+    c.click(),
+    t.restore();
+}

scripts/textgen/text.js

@@ -28,8 +28,9 @@ class BoxText {
         : this.chars.push(new BoxChar(e, i[t], this.fontSize, this.fontFamily));
   }
   draw(t) {
+    console.log("[BoxText.call::draw()]");
     const e = t.getContext("2d");
-    if (!e) return void console.error("Failed to load canvas");
+    if (!e) return void console.error("[BoxText.call::draw()] Failed to load canvas");
     e.clearRect(0, 0, t.width, t.height);
     const o = this.pendding,
       i = this.gutter;

scripts/textgen/utils.js

@@ -1,18 +1,21 @@
 function randomOper() {
   return Math.floor(10 * Math.random()) % 2 ? 1 : -1;
 }
+
 function rotateCanvas(t, e, n, a) {
   t.translate(n, a), t.rotate((Math.PI * e) / 180), t.translate(-n, -a);
 }
+
 function letterCanvas(t, e) {
   const n = document.createElement("canvas");
   (n.width = t), (n.height = e);
   const a = n.getContext("2d");
   if (a) return { canvas: n, context: a };
   console.error(
-    "Failed to generate text: failed to create canvas for the letter."
+    "[call::letterCanvas()] Failed to generate text: failed to create canvas for the letter."
   );
 }
+
 function getCharSize(t, e, n = "sans-serif", a = "normal") {
   const { context: o } = letterCanvas(e, e);
   (o.font = `${a} ${e}px ${n}`), (o.textBaseline = "top"), o.fillText(t, 0, 0);