all the things

cardGen/consts.ts

@@ -0,0 +1 @@
+export const textSmall = '24px'

cardGen/rows.ts

@@ -0,0 +1,62 @@
+import { CanvasRenderingContext2D } from "https://deno.land/x/skia_canvas@0.4.1/mod.ts";
+import { styleTypeAccessor, TextStyle } from "./textStyle.ts";
+import { wordWrap } from "./wordWrap.ts";
+
+type line = { value: string, style: TextStyle, type: styleTypeAccessor, newLine?: boolean, combine?: boolean }
+
+export const flexRow = (ctx: CanvasRenderingContext2D, sections: string[], maxWidth: number) => {
+  const totalWidth = sections.map(s => ctx.measureText(s).width).reduce((a, b) => a + b, 0);
+  const gap = (maxWidth - totalWidth) / (sections.length - 1);
+
+  ctx.save()
+  for (const section of sections) {
+    ctx.fillText(section, 0, 0);
+    ctx.translate(ctx.measureText(section).width + gap, 0);
+  }
+  ctx.restore();
+}
+
+export const inlineRow = (ctx: CanvasRenderingContext2D, sections: line[], maxWidth: number) => {
+  const lines: line[] = [];
+  for (const [i, section] of sections.entries()) {
+    if (!section.newLine) {
+      const last = lines[i - 1];
+      if (last) {
+        ctx.font = last.style[last.type];
+        const lastWidth = ctx.measureText(last.value).width;
+        ctx.font = section.style[section.type];
+        lines.push(...wordWrap(ctx, section.value, maxWidth, maxWidth - lastWidth).map((e, i): line => ({
+          ...section,
+          value: e,
+          combine: i === 0
+        })));
+        continue;
+      }
+    }
+    ctx.font = section.style[section.type];
+    lines.push(...wordWrap(ctx, section.value, maxWidth).map((e): line => ({
+      ...section,
+      value: e
+    })));
+  }
+
+  return lines;
+}
+
+export const drawRow = (ctx: CanvasRenderingContext2D, lines: line[]) => {
+  for (const [i, line] of lines.entries()) {
+    const last = lines[i - 1];
+    if (line.combine && last) {
+      ctx.save();
+      ctx.font = last.style[last.type];
+      ctx.translate(ctx.measureText(last.value).width, 0);
+      ctx.font = line.style[line.type];
+      ctx.fillText(line.value, 0, 0);
+      ctx.restore();
+    } else {
+      ctx.translate(0, line.style.lineHeight);
+      ctx.font = line.style[line.type];
+      ctx.fillText(line.value, 0, 0);
+    }
+  }
+}

cardGen/textStyle.ts

@@ -0,0 +1,22 @@
+export type styleTypeAccessor = 'default' | 'bold' | 'italic' | 'boldItalic';
+
+export class TextStyle {
+  fontSize: number;
+  lineHeight: number;
+  constructor(fontSize: number, lineHeight?: number) {
+    this.fontSize = fontSize;
+    this.lineHeight = lineHeight || fontSize;
+  }
+  get default() {
+    return `${this.fontSize}px Chakra Petch`
+  }
+  get bold() {
+    return `bold ${this.fontSize}px Chakra Petch`
+  }
+  get italic() {
+    return `italic ${this.fontSize}px Chakra Petch`
+  }
+  get boldItalic() {
+    return `italic bold ${this.fontSize}px Chakra Petch`
+  }
+}

cardGen/wordWrap.ts

@@ -0,0 +1,24 @@
+import { CanvasRenderingContext2D } from "https://deno.land/x/skia_canvas@0.4.1/mod.ts";
+
+export const wordWrap = (ctx: CanvasRenderingContext2D, text: string, maxWidth: number, lineWidth?: number) => {
+  const words = text.split(' ');
+  let testLine = '';
+  const lines: string[] = [];
+
+  for (const word of words) {
+    const previous = testLine;
+    testLine += ` ${word}`;
+    testLine = testLine.replace(/^\s/, '');
+    const { width } = ctx.measureText(testLine);
+
+    const calcedWidth = lineWidth && lines.length === 0 ? lineWidth : maxWidth;
+    
+    if (width > calcedWidth) {
+      lines.push(previous);
+      testLine = word;
+    }
+  }
+  if (testLine) lines.push(testLine);
+
+  return lines;
+}