Boardgame prototyping with React
npm install distractionnpm install distraction
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);
``