Headbreaker Jigsaw Puzzles Library

In Vue, initialize the Canvas within the mounted lifecycle hook. Similar to React, you must specify a painter (e.g., new headbreaker.painters.Konva()) for visual rendering.

<template>
  <div id="app">
    <div id="puzzle"></div>
  </div>
</template>

<script>
import headbreaker from 'headbreaker';

const drawPuzzle = () => {
  const autogen = new headbreaker.Canvas('puzzle', {
    width: 800,
    height: 650,
    pieceSize: 100,
    proximity: 20,
    borderFill: 10,
    strokeWidth: 2,
    lineSoftness: 0.18,
    painter: new headbreaker.painters.Konva(),
  });

  autogen.autogenerate({
    horizontalPiecesCount: 2,
    verticalPiecesCount: 2,
    metadata: [
      { color: '#B83361' },
      { color: '#B87D32' },
      { color: '#A4C234' },
      { color: '#37AB8C' },
    ],
  });

  autogen.draw();
};

export default {
  mounted() {
    drawPuzzle()
  },
};
</script>

You can create highly interactive puzzles by defining custom templates using defineTemplate and responding to connection/disconnection events.

1. Define Templates: Use defineTemplate(name, config) where config includes a structure (e.g., 'TTSS') and metadata (e.g., colors or labels).
2. Sketch Pieces: Use sketchPieceUsingTemplate(id, templateName) to assign a template to a specific piece.
3. Handle Events: Use onConnect and onDisconnect to trigger logic (like updating labels or scores) whenever two pieces are joined or separated. Call redraw() to update the visual state.
4. Render: Call draw() to initialize the canvas.

const dynamic = new headbreaker.Canvas('dynamic-canvas', {
  width: 700, 
  height: 700, 
  pieceSize: 100, 
  proximity: 20,  
  borderFill: 10, 
  lineSoftness: 0.2, 
  strokeWidth: 0 
});

dynamic.defineTemplate('A', {
  structure: 'TTSS', 
  metadata: { label: { text: '0', x: 22 }, color: '#DB7BBF' }
});

dynamic.sketchPieceUsingTemplate('a', 'A');

dynamic.onConnect((piece, figure, target, targetFigure) => {
  // logic for connection
  dynamic.redraw();
});

dynamic.draw();

To automatically create a puzzle from an image, use autogenerate().

1. Load an image and pass it to the Canvas constructor.
2. Call adjustImagesToPuzzleHeight() or adjustImagesToPuzzleWidth() to scale the image to the puzzle dimensions.
3. Call autogenerate() with horizontalPiecesCount and verticalPiecesCount.

You can also provide an insertsGenerator (like headbreaker.generators.random or headbreaker.generators.flipflop) to control how tabs and slots are distributed.

let img = new Image();
img.src = 'path/to/image.jpg';
img.onload = () => {
  const canvas = new headbreaker.Canvas('canvas-id', {
    width: 800, height: 650,
    image: img,
    pieceSize: 100
  });

  canvas.adjustImagesToPuzzleHeight();
  canvas.autogenerate({
    horizontalPiecesCount: 6,
    verticalPiecesCount: 5,
    insertsGenerator: headbreaker.generators.random
  });
  canvas.draw();
};

When using Headbreaker in React, ensure you pass a painter to the Canvas constructor (e.g., new painters.Konva()) to enable rendering. Use useRef to provide a DOM element for the canvas and useEffect to initialize the puzzle instance.

import { Canvas, painters } from 'headbreaker';
import { useEffect, useRef } from 'react';

function DemoPuzzle({ id }) {
  const puzzleRef = useRef(null)

  useEffect(() => {
    const puzzle = puzzleRef.current
    const canvas = new Canvas(puzzle.id, {
      width: 800, height: 650,
      pieceSize: 100, proximity: 20, 
      borderFill: 10, strokeWidth: 2, lineSoftness: 0.18,
      painter: new painters.Konva() 
    });

    canvas.autogenerate({
      horizontalPiecesCount: 2,
      verticalPiecesCount: 2,
      metadata: [{ color: '#B83361' }, { color: '#B87D32' }, { color: '#A4C234' }, { color: '#37AB8C' }]
    });

    canvas.draw();
  }, [])

  return <div ref={puzzleRef} id={id}></div>
}

The Painter class serves as an interface for creating custom rendering backends for Headbreaker. To implement a custom UI representation of a puzzle (e.g., using Konva, SVG, or a custom WebGL engine), you must extend the Painter class and implement its lifecycle and drawing methods.

Key lifecycle stages include:

1. initialize(canvas, id): Set up the rendering environment.
2. resize(canvas, width, height): Handle canvas dimension changes.
3. draw(canvas): Execute the actual rendering of all figures on the canvas.
4. reinitialize(canvas): Clear and reset the backend state.

When adding pieces to the puzzle, the backend uses sketch to prepare the piece's geometry, fill to apply colors/textures, and label to render text labels.

class MyCustomPainter extends Painter {
  initialize(canvas, id) {
    // Setup your rendering engine (e.g., Konva Stage)
  }

  draw(canvas) {
    // Render the current state of the canvas
  }

  sketch(canvas, piece, figure, outline) {
    // Define the geometry for a piece
  }
}