# distraction

> Boardgame prototyping with React

Latest version **0.2.4** (published 2022-12-11) · MIT license · 0 weekly downloads

## Install

```sh
npm install distraction
pnpm add distraction
yarn add distraction
bun add distraction
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; no vulnerabilities; high quality score.

Warnings: low downloads; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.2.4 |
| Published | 2022-12-11 |
| First published | 2019-11-07 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 4 |
| Unpacked size | 71.7 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Joris van de Donk |
| Maintainers | jorisd |
| Keywords | boardgame, prototyping |

## Links

- npm: https://www.npmjs.com/package/distraction
- npm.io page: https://npm.io/package/distraction

## Dependencies (4)

- [react](https://npm.io/package/react.md) ^18.2.0
- [ts-node](https://npm.io/package/ts-node.md) ^10.9.1
- [react-dom](https://npm.io/package/react-dom.md) ^18.2.0
- [playwright](https://npm.io/package/playwright.md) ^1.28.1

## Recent versions

- 0.2.4 (latest) — 2022-12-11
- 0.2.3 — 2022-12-11
- 0.2.2 — 2022-12-11
- 0.0.3 — 2022-12-11
- 0.0.2 — 2019-11-07
- 0.0.1 — 2019-11-07

## README

# 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: () => <div style={{ width: '100%', height: '100%', border: "0.2mm solid black", boxSizing: 'border-box', backgroundColor: '#fdd' }}>{i} (double-sided, front)</div>,
        back: () => <div style={{ width: '100%', height: '100%', border: "0.2mm solid black", boxSizing: 'border-box', backgroundColor: '#ddf' }}>{i} (double-sided, back)</div>,
        width: 40,
        height: 20
      });
    } else {
      builder.addElement({
        front: () => <div style={{ width: '100%', height: '100%', border: "0.2mm solid black", boxSizing: 'border-box', backgroundColor: '#fdd' }}>{i} (single-sided, front)</div>,
        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](./example_output/foo0.png)

---
_Source: https://npm.io/package/distraction · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._