game-cards-poker-design/frontend/src/utils/cardRenderer.js

/**
 * 扑克牌 Canvas 渲染器
 *
 * 用原生 Canvas2D API 在前端渲染牌面，与后端 PIL 渲染保持一致。
 * 用户在编辑时实时看到的就是这个画面。
 */
import {
  SUIT_TEXT,
  SUIT_COLORS,
  isRedSuit,
  isFace,
  isJoker,
  computeNumberPipPositions,
  getEffectiveDesign,
  getEffectiveBackDesign,
  DEFAULT_BACK_DESIGN,
} from './cardLayout.js'

const CARD_W = 750
const CARD_H = 1050

// 图片缓存（url -> HTMLImageElement）
const imageCache = new Map()
function loadImage(url) {
  return new Promise((resolve, reject) => {
    if (!url) return resolve(null)
    if (imageCache.has(url)) {
      const cached = imageCache.get(url)
      if (cached.complete && cached.naturalWidth) return resolve(cached)
      // 还在加载中
      cached.addEventListener('load',  () => resolve(cached),  { once: true })
      cached.addEventListener('error', () => resolve(null),    { once: true })
      return
    }
    const img = new Image()
    img.crossOrigin = 'anonymous'
    imageCache.set(url, img)
    img.addEventListener('load',  () => resolve(img), { once: true })
    img.addEventListener('error', () => resolve(null), { once: true })
    img.src = url
  })
}

async function preloadAll(project) {
  const urls = new Set()
  if (project.design?.background_image) urls.add(project.design.background_image)
  if (project.back_design?.image) urls.add(project.back_design.image)
  for (const s of Object.keys(project.design?.suit_symbols || {})) {
    const sym = project.design.suit_symbols[s]
    if (sym?.type === 'image' && sym.asset_id) {
      // 由后端 /media 提供
      urls.add(`/media/${sym.value}`)
    }
  }
  for (const a of project.assets || []) {
    if (a.file_url) urls.add(a.file_url)
  }
  await Promise.all(Array.from(urls).map(u => loadImage(u)))
}

function assetByType(project, type, key) {
  // 取最新一张匹配 (type, key) 的素材
  if (!project.assets) return null
  for (const a of project.assets) {
    if (a.asset_type === type && a.asset_key === key) return a
  }
  return null
}

/* ---------- 绘图原语 ---------- */

function drawRoundedRect(ctx, x, y, w, h, r) {
  if (r > w / 2) r = w / 2
  if (r > h / 2) r = 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()
}

function drawBackground(ctx, w, h, design) {
  // 1. 底色
  ctx.fillStyle = design.background_color || '#FFFFFF'
  ctx.fillRect(0, 0, w, h)
  // 2. 背景图（保持比例铺满）
  if (design.background_image) {
    const img = imageCache.get(design.background_image)
    if (img && img.complete && img.naturalWidth) {
      const ratio = Math.max(w / img.naturalWidth, h / img.naturalHeight)
      const dw = img.naturalWidth * ratio
      const dh = img.naturalHeight * ratio
      ctx.drawImage(img, (w - dw) / 2, (h - dh) / 2, dw, dh)
    }
  }
}

function drawBorder(ctx, w, h, design) {
  const width = Number(design.border_width) || 0
  if (width <= 0) return
  ctx.save()
  ctx.strokeStyle = design.border_color || '#333333'
  ctx.lineWidth = width
  const half = width / 2
  drawRoundedRect(ctx, half, half, w - width, h - width, 16)
  ctx.stroke()
  ctx.restore()
}

function drawCornerIndex(ctx, w, h, suit, rank, design) {
  const cornerRatio = Number(design.corner_size_ratio) || 0.13
  const pad = Math.max(10, w * 0.045)
  const color = (design.suit_symbols?.[suit]?.color)
    || (isRedSuit(suit) ? SUIT_COLORS.heart : SUIT_COLORS.spade)

  // rank 在上、suit 在下
  const rankSize = Math.round(w * cornerRatio * 1.05)
  const suitSize = Math.round(w * cornerRatio * 0.9)
  const fontFamily = design.font_family || 'Times New Roman'

  ctx.save()
  ctx.fillStyle = color
  ctx.textBaseline = 'top'
  ctx.textAlign = 'left'

  // 左上
  ctx.font = `bold ${rankSize}px ${fontFamily}, serif`
  ctx.fillText(String(rank), pad, pad)
  ctx.font = `${suitSize}px Arial, sans-serif`
  const rankHeight = rankSize
  ctx.fillText(SUIT_TEXT[suit], pad, pad + rankHeight + 2)

  // 估算左上班块高度
  const rankW = ctx.measureText(String(rank)).width
  const suitW = ctx.measureText(SUIT_TEXT[suit]).width
  const blockW = Math.max(rankW, suitW) + 8
  const blockH = rankHeight + 2 + suitSize + 8

  // 右下：把左上班块平移 + 旋转 180°，再贴到右下
  ctx.save()
  ctx.translate(w - pad, h - pad)
  ctx.rotate(Math.PI)
  // 在新坐标系中绘制（左上）
  ctx.fillStyle = color
  ctx.textBaseline = 'top'
  ctx.textAlign = 'left'
  ctx.font = `bold ${rankSize}px ${fontFamily}, serif`
  ctx.fillText(String(rank), 0, 0)
  ctx.font = `${suitSize}px Arial, sans-serif`
  ctx.fillText(SUIT_TEXT[suit], 0, rankHeight + 2)
  ctx.restore()

  ctx.restore()
}

async function drawSuitSymbol(ctx, x, y, size, suit, design) {
  const sym = design.suit_symbols?.[suit] || {}
  if (sym.type === 'image' && sym.asset_id) {
    const url = `/media/${sym.value}`
    const img = imageCache.get(url)
    if (img && img.complete && img.naturalWidth) {
      ctx.drawImage(img, x - size / 2, y - size / 2, size, size)
      return
    }
  }
  // 文本符号
  ctx.save()
  ctx.fillStyle = sym.color || (isRedSuit(suit) ? SUIT_COLORS.heart : SUIT_COLORS.spade)
  ctx.font = `${Math.round(size)}px Arial, "Segoe UI Symbol", sans-serif`
  ctx.textAlign = 'center'
  ctx.textBaseline = 'middle'
  ctx.fillText(SUIT_TEXT[suit], x, y)
  ctx.restore()
}

async function drawNumberCardBody(ctx, w, h, suit, rank, design, project) {
  const pipRatio = Number(design.pip_size_ratio) || 0.16
  const pipSize = Math.max(40, w * pipRatio)
  const positions = computeNumberPipPositions(rank, w, h, pipSize, project.number_layout)
  for (const p of positions) {
    await drawSuitSymbol(ctx, p.x, p.y, p.size, suit, design)
  }
}

async function drawFaceCardBody(ctx, w, h, suit, rank, design, project) {
  // 主体区域
  const padX = w * 0.15
  const padTop = h * 0.13
  const padBot = h * 0.13
  const bodyW = w - 2 * padX
  const bodyH = h - padTop - padBot

  const cardKey = `${suit}-${rank}`
  const asset = assetByType(project, 'face_card', cardKey)
  let img = null
  if (asset?.file_url) {
    img = imageCache.get(asset.file_url) || null
    if (img) await loadImage(asset.file_url)
  }

  if (img && img.complete && img.naturalWidth) {
    // 等比缩放 fill body
    const ratio = img.naturalWidth / img.naturalHeight
    const target = bodyW / bodyH
    let drawW, drawH
    if (ratio > target) {
      drawW = bodyW
      drawH = bodyW / ratio
    } else {
      drawH = bodyH
      drawW = bodyH * ratio
    }
    const drawX = padX + (bodyW - drawW) / 2
    const drawY = padTop + (bodyH - drawH) / 2

    // 上下对称：先画上半，再把下半用指定方式生成
    const halfH = drawH / 2
    // 上半：用 clip 限定为上半
    ctx.save()
    ctx.beginPath()
    ctx.rect(drawX, drawY, drawW, halfH)
    ctx.clip()
    ctx.drawImage(img, drawX, drawY, drawW, drawH)
    ctx.restore()
    // 下半：symmetry_mode = 'flip' 垂直翻转，'rotate' 180° 旋转
    const symMode = design.symmetry_mode || 'flip'
    if (symMode === 'rotate') {
      // 180° 旋转：translate 到 (x+w, y+h) + 旋转 PI
      ctx.save()
      ctx.translate(drawX + drawW, drawY + drawH)
      ctx.rotate(Math.PI)
      ctx.drawImage(img, 0, 0, drawW, drawH)  // 旋转后图片左上角在 (0,0)，覆盖 (-drawW,-drawH)~(0,0)
      ctx.restore()
    } else {
      // 垂直翻转：translate 到 (x, y+halfH) + scale(1, -1)
      ctx.save()
      ctx.translate(drawX, drawY + halfH)
      ctx.scale(1, -1)
      ctx.drawImage(img, 0, 0, drawW, halfH)
      ctx.restore()
    }
  } else {
    // 退化：绘制大花色 + 字母
    const big = Math.round(h * 0.30)
    const color = (design.suit_symbols?.[suit]?.color)
      || (isRedSuit(suit) ? SUIT_COLORS.heart : SUIT_COLORS.spade)
    ctx.save()
    ctx.fillStyle = color
    ctx.textAlign = 'center'
    ctx.textBaseline = 'middle'
    ctx.font = `bold ${big}px ${design.font_family || 'Times New Roman'}, serif`
    ctx.fillText(rank, w / 2, padTop + bodyH * 0.35)
    ctx.font = `${big}px Arial, sans-serif`
    ctx.fillText(SUIT_TEXT[suit], w / 2, padTop + bodyH * 0.65)
    ctx.restore()
  }
}

async function drawJokerBody(ctx, w, h, which, design, project) {
  // 背景色
  const bg = design.background_color
    || (which === 'big' ? '#1B5E20' : '#B71C1C')
  ctx.fillStyle = bg
  ctx.fillRect(0, 0, w, h)

  const padX = w * 0.15
  const padTop = h * 0.18
  const padBot = h * 0.22
  const bodyW = w - 2 * padX
  const bodyH = h - padTop - padBot

  const asset = assetByType(project, 'joker', which)
  let img = null
  if (asset?.file_url) {
    img = imageCache.get(asset.file_url) || null
    if (img) await loadImage(asset.file_url)
  }

  if (img && img.complete && img.naturalWidth) {
    const halfH = bodyH / 2
    const imgRatio = img.naturalWidth / img.naturalHeight
    const target = bodyW / halfH
    let drawW, drawH
    if (imgRatio > target) {
      drawW = bodyW; drawH = bodyW / imgRatio
    } else {
      drawH = halfH; drawW = halfH * imgRatio
    }
    const imageDx = Number(design.image_dx) || 0
    const imageDy = Number(design.image_dy) || 0
    const imageScale = Number(design.image_scale) || 1
    const finalW = Math.max(1, drawW * imageScale)
    const finalH = Math.max(1, drawH * imageScale)
    const offsetX = bodyW * imageDx
    const offsetY = bodyH * imageDy
    const topX = padX + offsetX + (bodyW - finalW) / 2
    const topY = padTop + offsetY + (halfH - finalH) / 2
    ctx.drawImage(img, topX, topY, finalW, finalH)
    // symmetry_mode: 'flip' 垂直翻转，'rotate' 180° 旋转
    const symMode = design.symmetry_mode || 'flip'
    if (symMode === 'rotate') {
      ctx.save()
      ctx.translate(topX + finalW, topY + finalH)
      ctx.rotate(Math.PI)
      ctx.drawImage(img, 0, 0, finalW, finalH)
      ctx.restore()
    } else {
      ctx.save()
      ctx.translate(topX, topY + finalH)
      ctx.scale(1, -1)
      ctx.drawImage(img, 0, 0, finalW, finalH)
      ctx.restore()
    }
  } else {
    // 退化
    const big = Math.round(h * 0.25)
    ctx.save()
    ctx.fillStyle = '#FFFFFF'
    ctx.textAlign = 'center'
    ctx.textBaseline = 'middle'
    ctx.font = `bold ${big}px ${design.font_family || 'Times New Roman'}, serif`
    ctx.fillText('JOKER', w / 2, h / 2)
    ctx.restore()
  }

  // 角标
  const label = which === 'big' ? 'BIG' : 'SMALL'
  ctx.save()
  ctx.fillStyle = '#FFFFFF'
  ctx.textAlign = 'left'
  ctx.textBaseline = 'top'
  const labelSize = Math.max(20, Math.round(w * 0.06))
  const textSize  = Math.max(16, Math.round(w * 0.045))
  const pad = Math.max(10, w * 0.04)

  // 左上角标
  ctx.font = `${textSize}px ${design.font_family || 'Times New Roman'}, serif`
  ctx.fillText('JOKER', pad, pad)
  ctx.font = `bold ${labelSize}px ${design.font_family || 'Times New Roman'}, serif`
  ctx.fillText(label, pad, pad + textSize + 4)

  // 右下角标
  ctx.save()
  ctx.translate(w - pad, h - pad)
  ctx.rotate(Math.PI)
  ctx.fillStyle = '#FFFFFF'
  ctx.textAlign = 'left'
  ctx.textBaseline = 'top'
  ctx.font = `${textSize}px ${design.font_family || 'Times New Roman'}, serif`
  ctx.fillText('JOKER', 0, 0)
  ctx.font = `bold ${labelSize}px ${design.font_family || 'Times New Roman'}, serif`
  ctx.fillText(label, 0, textSize + 4)
  ctx.restore()

  ctx.restore()
}

async function drawBackSide(ctx, w, h, backDesign, project) {
  ctx.fillStyle = backDesign.background_color || '#1A237E'
  ctx.fillRect(0, 0, w, h)

  const bw = Number(backDesign.border_width) || 0
  if (bw > 0) {
    ctx.save()
    ctx.strokeStyle = backDesign.border_color || '#C0A050'
    ctx.lineWidth = bw
    const half = bw / 2
    drawRoundedRect(ctx, half, half, w - bw, h - bw, 16)
    ctx.stroke()
    ctx.restore()
  }

  const padX = Math.round(w * 0.15)
  const padTop = Math.round(h * 0.18)
  const padBot = Math.round(h * 0.22)
  const bodyW = w - 2 * padX
  const bodyH = h - padTop - padBot

  const imageDx = Number(backDesign.image_dx) || 0
  const imageDy = Number(backDesign.image_dy) || 0
  const imageScale = Number(backDesign.image_scale) || 1
  const offsetX = bodyW * imageDx
  const offsetY = bodyH * imageDy

  const asset = assetByType(project, 'back', 'back')
  let img = null
  if (asset?.file_url) {
    img = imageCache.get(asset.file_url) || null
    if (img) await loadImage(asset.file_url)
  }

  if (img && img.complete && img.naturalWidth) {
    const ratio = img.naturalWidth / img.naturalHeight
    const target = bodyW / bodyH
    let drawW, drawH
    if (ratio > target) {
      drawW = bodyW; drawH = bodyW / ratio
    } else {
      drawH = bodyH; drawW = bodyH * ratio
    }
    const finalW = Math.max(1, drawW * imageScale)
    const finalH = Math.max(1, drawH * imageScale)
    const drawX = padX + offsetX + (bodyW - finalW) / 2
    const drawY = padTop + offsetY + (bodyH - finalH) / 2
    ctx.drawImage(img, drawX, drawY, finalW, finalH)

    if (backDesign.pattern_color) {
      ctx.save()
      ctx.globalCompositeOperation = 'source-atop'
      ctx.fillStyle = backDesign.pattern_color
      ctx.globalAlpha = 0.3
      ctx.fillRect(0, 0, w, h)
      ctx.restore()
    }
  } else {
    ctx.save()
    ctx.fillStyle = backDesign.border_color || '#C0A050'
    ctx.textAlign = 'center'
    ctx.textBaseline = 'middle'
    ctx.font = `bold ${Math.round(w * 0.1)}px Times New Roman, serif`
    ctx.fillText('CARD BACK', w / 2, h / 2)
    ctx.restore()
  }
}

/* ---------- 公开 API ---------- */

/**
 * 渲染单张牌到 canvas
 * @param {HTMLCanvasElement} canvas
 * @param {object} project
 * @param {string} cardKey  e.g. 'spade-A', 'joker-big', 'back'
 * @returns {Promise<void>}
 */
export async function renderCard(canvas, project, cardKey) {
  if (!canvas) return
  // 适配高 DPI
  const dpr = window.devicePixelRatio || 1
  const w = CARD_W
  const h = CARD_H
  if (canvas.width !== w * dpr) {
    canvas.width = w * dpr
    canvas.height = h * dpr
    canvas.style.width = '300px'
    canvas.style.height = '420px'
  }
  const ctx = canvas.getContext('2d')
  ctx.setTransform(dpr, 0, 0, dpr, 0, 0)
  ctx.clearRect(0, 0, w, h)

  // 预加载可能用到的图片
  await preloadAll(project)

  const design = getEffectiveDesign(project, cardKey)

  if (isJoker(cardKey)) {
    const which = cardKey.split('-', 2)[1]
    await drawJokerBody(ctx, w, h, which, design, project)
    drawBorder(ctx, w, h, design)
  } else if (cardKey === 'back') {
    const backDesign = getEffectiveBackDesign(project)
    await drawBackSide(ctx, w, h, backDesign, project)
  } else {
    const [suit, rank] = cardKey.split('-')
    drawBackground(ctx, w, h, design)
    drawBorder(ctx, w, h, design)
    if (isFace(rank)) {
      await drawFaceCardBody(ctx, w, h, suit, rank, design, project)
    } else {
      await drawNumberCardBody(ctx, w, h, suit, rank, design, project)
    }
    drawCornerIndex(ctx, w, h, suit, rank, design)
  }
}

/**
 * 渲染缩略图（小尺寸）到底部卡片列表
 * 简化版：缩放渲染，不画边框等细节
 */
export async function renderThumbnail(canvas, project, cardKey, thumbW = 80, thumbH = 112) {
  if (!canvas) return
  if (canvas.width !== thumbW) {
    canvas.width = thumbW
    canvas.height = thumbH
  }
  const ctx = canvas.getContext('2d')
  ctx.clearRect(0, 0, thumbW, thumbH)
  // 用单独的小画布渲染再缩放
  const tmp = document.createElement('canvas')
  tmp.width = CARD_W
  tmp.height = CARD_H
  await renderCard(tmp, project, cardKey)
  ctx.drawImage(tmp, 0, 0, thumbW, thumbH)
}

export { CARD_W, CARD_H }