template.js

/* ============================================================================
 * template.js — generates the DEFAULT character sheet for each size.
 *
 * Produces a clean 3x3 "parts sheet" (no labels baked in) so that when it is
 * sliced and assembled it looks like a little mascot. app.js draws the grid +
 * part-name guide as a separate overlay on the slice panel.
 * ========================================================================== */

(function (root) {
  "use strict";

  // Soft, friendly palette.
  var COL = {
    skin: "#ffd9b3", skinLine: "#e8b183",
    hairA: "#6b4a86", hairB: "#553a6d",   // front / back hair
    shirt: "#4aa3df", shirtB: "#3d84b8",  // front / back torso
    pants: "#37474f",
    cheek: "#ff9e9e",
    eye: "#2b2b3a"
  };

  // Rounded rectangle helper.
  function rr(ctx, x, y, w, h, r) {
    r = Math.min(r, w / 2, h / 2);
    ctx.beginPath();
    ctx.moveTo(x + r, y);
    ctx.arcTo(x + w, y, x + w, y + h, r);
    ctx.arcTo(x + w, y + h, x, y + h, r);
    ctx.arcTo(x, y + h, x, y, r);
    ctx.arcTo(x, y, x + w, y, r);
    ctx.closePath();
  }

  // Draw a single part's art into cell (col,row). c = cell size in px.
  // Local coords: (0,0)..(c,c) within the cell.
  //  - Arms & legs are drawn ALIGNED TO THE TOP of the cell (their pivot),
  //    so they hang down snugly from the shoulder / hip.
  //  - Big head, small body → chibi / MapleStory feel.
  function drawPart(ctx, key, c) {
    ctx.save();
    switch (key) {
      case "backhair": {
        // rounded blob behind the head, bottom-anchored (pivot 0.90)
        ctx.fillStyle = COL.hairB;
        rr(ctx, c * 0.08, c * 0.14, c * 0.84, c * 0.82, c * 0.40);
        ctx.fill();
        break;
      }
      case "fronthair": {
        // fringe across the top of the head (pivot bottom 0.95)
        ctx.fillStyle = COL.hairA;
        ctx.beginPath();
        ctx.moveTo(c * 0.10, c * 0.66);
        ctx.quadraticCurveTo(c * 0.06, c * 0.14, c * 0.50, c * 0.12);
        ctx.quadraticCurveTo(c * 0.94, c * 0.14, c * 0.90, c * 0.66);
        ctx.quadraticCurveTo(c * 0.74, c * 0.46, c * 0.62, c * 0.62);
        ctx.quadraticCurveTo(c * 0.50, c * 0.42, c * 0.38, c * 0.62);
        ctx.quadraticCurveTo(c * 0.26, c * 0.46, c * 0.10, c * 0.66);
        ctx.closePath();
        ctx.fill();
        break;
      }
      case "face": {
        // big head, sitting in the lower part of the cell (neck at pivot 0.95)
        var hx = c * 0.5, hy = c * 0.55, hr = c * 0.42;
        ctx.fillStyle = COL.skin;
        ctx.strokeStyle = COL.skinLine;
        ctx.lineWidth = Math.max(1, c * 0.03);
        ctx.beginPath();
        ctx.arc(hx, hy, hr, 0, Math.PI * 2);
        ctx.fill();
        // cheeks
        ctx.fillStyle = COL.cheek;
        ctx.beginPath();
        ctx.arc(c * 0.29, hy + c * 0.10, c * 0.08, 0, Math.PI * 2);
        ctx.arc(c * 0.71, hy + c * 0.10, c * 0.08, 0, Math.PI * 2);
        ctx.fill();
        // eyes
        ctx.fillStyle = COL.eye;
        ctx.beginPath();
        ctx.arc(c * 0.37, hy - c * 0.02, c * 0.06, 0, Math.PI * 2);
        ctx.arc(c * 0.63, hy - c * 0.02, c * 0.06, 0, Math.PI * 2);
        ctx.fill();
        // smile
        ctx.strokeStyle = COL.eye;
        ctx.lineWidth = Math.max(1, c * 0.03);
        ctx.beginPath();
        ctx.arc(hx, hy + c * 0.06, c * 0.13, 0.15 * Math.PI, 0.85 * Math.PI);
        ctx.stroke();
        break;
      }
      case "fronttorso": {
        // narrow body, top-anchored (pivot top 0.0)
        ctx.fillStyle = COL.shirt;
        rr(ctx, c * 0.26, c * 0.02, c * 0.48, c * 0.92, c * 0.16);
        ctx.fill();
        ctx.fillStyle = "rgba(255,255,255,0.22)";
        rr(ctx, c * 0.38, c * 0.04, c * 0.24, c * 0.12, c * 0.05);
        ctx.fill();
        break;
      }
      case "backtorso": {
        ctx.fillStyle = COL.shirtB;
        rr(ctx, c * 0.24, c * 0.00, c * 0.52, c * 0.96, c * 0.18);
        ctx.fill();
        break;
      }
      case "leftarm":
      case "rightarm": {
        // slim arm hanging from the TOP of the cell
        ctx.fillStyle = COL.shirt;
        rr(ctx, c * 0.38, c * 0.02, c * 0.24, c * 0.66, c * 0.12);
        ctx.fill();
        // hand
        ctx.fillStyle = COL.skin;
        ctx.beginPath();
        ctx.arc(c * 0.5, c * 0.72, c * 0.12, 0, Math.PI * 2);
        ctx.fill();
        break;
      }
      case "leftleg":
      case "rightleg": {
        // leg hanging from the TOP of the cell
        ctx.fillStyle = COL.pants;
        rr(ctx, c * 0.36, c * 0.00, c * 0.28, c * 0.74, c * 0.11);
        ctx.fill();
        // shoe
        ctx.fillStyle = "#26323a";
        rr(ctx, c * 0.32, c * 0.74, c * 0.40, c * 0.18, c * 0.08);
        ctx.fill();
        break;
      }
    }
    ctx.restore();
  }

  // Build the default sheet canvas for a given size (120 / 240 / 480).
  function buildDefaultSheet(size) {
    var c = size / 3;
    var cv = document.createElement("canvas");
    cv.width = size;
    cv.height = size;
    var ctx = cv.getContext("2d");
    ctx.clearRect(0, 0, size, size);

    var parts = root.ZUO.PARTS;
    for (var i = 0; i < parts.length; i++) {
      var p = parts[i];
      ctx.save();
      ctx.translate(p.col * c, p.row * c);
      drawPart(ctx, p.key, c);
      ctx.restore();
    }
    return cv;
  }

  root.ZUO_TEMPLATE = { buildDefaultSheet: buildDefaultSheet };
})(typeof window !== "undefined" ? window : this);