Distraction

Distraction is a boardgame design and prototyping toolkit, allowing you to create prototypes of boardgames using React.

Instructions follow later!

Installation

npm install distraction

Usage

``tsx
import { Builder, DoubleSidedLayoutMode, Renderer } from 'distraction';
import React from 'react';
import * as path from 'path';
import * as fs from 'fs';

async function main() {
const builder = new Builder({elementMargin: 2, pageMargin: 3, doubleSidedLayoutMode: DoubleSidedLayoutMode.ABOVE_BELOW__FOLD});
for (let i = 0; i < 10; i++) {
if (i % 2 === 0) {
builder.addElement({
front: () =>

{i} (double-sided, front)

,
back: () =>

{i} (double-sided, back)

,
width: 40,
height: 20
});
} else {
builder.addElement({
front: () =>

{i} (single-sided, front)

,
back: undefined,
width: 40,
height: 20
});
}
}
const renderer = new Renderer(builder);
await renderer.renderToPNGs((i) => path.join(process.cwd(), 'example_output', ./foo${i}.png));
await renderer.close();
fs.writeFileSync('./test.html', builder.buildSinglePage());
}

main().then(console.log).catch(console.error);
``

output:

!generated image 1