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

import { fabric } from 'fabric'

export async function createSymmetricalImage(originalImage, canvasWidth, canvasHeight) {
  const imgWidth = originalImage.width
  const imgHeight = originalImage.height
  const halfHeight = imgHeight / 2

  const topHalf = new fabric.Image(originalImage, {
    clipPath: new fabric.Rect({
      width: imgWidth,
      height: halfHeight,
      originX: 'left',
      originY: 'top'
    }),
    top: 0,
    scaleX: canvasWidth / imgWidth,
    scaleY: (canvasHeight / 2) / halfHeight
  })

  const bottomHalf = new fabric.Image(originalImage, {
    clipPath: new fabric.Rect({
      width: imgWidth,
      height: halfHeight,
      originX: 'left',
      originY: 'top',
      top: halfHeight
    }),
    top: canvasHeight / 2,
    scaleX: canvasWidth / imgWidth,
    scaleY: -(canvasHeight / 2) / halfHeight,
    flipY: true
  })

  const group = new fabric.Group([topHalf, bottomHalf], {
    left: 0,
    top: 0,
    width: canvasWidth,
    height: canvasHeight
  })

  return group
}

export async function loadAndProcessImage(imageUrl) {
  return new Promise((resolve, reject) => {
    fabric.Image.fromURL(imageUrl, (img) => {
      if (!img) {
        reject(new Error('Failed to load image'))
        return
      }
      resolve(img)
    }, { crossOrigin: 'anonymous' })
  })
}

export function applySymmetryToFaceCard(canvas, imageUrl, cardWidth, cardHeight) {
  return new Promise((resolve, reject) => {
    fabric.Image.fromURL(imageUrl, async (originalImage) => {
      if (!originalImage) {
        reject(new Error('Failed to load image'))
        return
      }

      const symmetricalGroup = await createSymmetricalImage(
        originalImage.getElement(),
        cardWidth - 100,
        cardHeight - 100
      )

      symmetricalGroup.set({
        left: 50,
        top: 50,
        selectable: true
      })

      canvas.add(symmetricalGroup)
      canvas.renderAll()
      resolve(symmetricalGroup)
    }, { crossOrigin: 'anonymous' })
  })
}