# @kamen/create-webapp [![NPM Version](https://img.shields.io/npm/v/@kamen/create-webapp)](https://npmjs.com/package/@kamen/create-webapp) [![Node Version](https://img.shields.io/node/v/@kamen/create-webapp)](https://npmjs.com/package/@kamen/create-webapp) [![NPM Unpacked Size](https://img.shields.io/npm/unpacked-size/@kamen/create-webapp)](https://npmjs.com/package/@kamen/create-webapp) [![NPM Bundle Size](https://img.shields.io/bundlephobia/minzip/@kamen/create-webapp)](https://npmjs.com/package/@kamen/create-webapp) [![NPM License](https://img.shields.io/npm/l/@kamen/create-webapp)](https://npmjs.com/package/@kamen/create-webapp) [![NPM Downloads](https://img.shields.io/npm/dm/@kamen/create-webapp)](https://npmjs.com/package/@kamen/create-webapp) [![jsDelivr Downloads](https://data.jsdelivr.com/v1/stats/packages/npm/@kamen/create-webapp/badge?type=hits&style=rounded)](https://www.jsdelivr.com/package/npm/@kamen/create-webapp) [![jsDelivr Rank](https://data.jsdelivr.com/v1/stats/packages/npm/@kamen/create-webapp/badge?type=rank&style=rounded)](https://www.jsdelivr.com/package/npm/@kamen/create-webapp)

## Project Scaffolding (wip)

```bash
$ npm init @kamen/webapp
```
or
```bash
$ deno run npm:@kamen/create-webapp
```

## Utility Functions

### Basic example

#### Static import from NPM

```js
import {
    createRandomFromRange,
    createRandomFromList
} from '@kamen/create-webapp/helpers/random';
```

#### Dynamic import from CDN

```js
const {
    createRandomFromRange,
    createRandomFromList
} = await import('https://esm.run/@kamen/create-webapp/helpers/random');
```

```js
function characterListFromCharacterRange(minCharacter = 'a', maxCharacter = 'z') {
    const characterCodeRange = [String(minCharacter).charCodeAt(), String(maxCharacter).charCodeAt()];
    const minCharacterCode = Math.min(...characterCodeRange);
    const maxCharacterCode = Math.max(...characterCodeRange);
    const length = maxCharacterCode - minCharacterCode + 1;
    return Array.from({length}, (_, index) => String.fromCharCode(index + minCharacterCode));
}

function characterListFromCharacterRanges(characterRanges = [['0', '9'], ['a', 'z'], ['A', 'Z']]) {
    return characterRanges
        .map(characterRange => characterListFromCharacterRange(...characterRange))
        .flat();
}

const ageHandler = createRandomFromRange(0, 99);
const colorHandler = createRandomFromList(['red', 'green', 'blue']);
const stateHandler = createRandomFromList([true, false]);
const characterHandler = createRandomFromList(characterListFromCharacterRanges());
const identHandler = () => Array
    .from({length: 1 << 6}, characterHandler)
    .join('');
const data = Array
    .from({length: 1 << 8}, (_, index) => ({
        index,
        age: ageHandler(),
        color: colorHandler(),
        state: stateHandler(),
        ident: identHandler()
    }));

console.dir(data);
```

### Advanced example

[SVG Path Generative Art](https://codepen.io/L1feF0rm/pen/GRzGxdb)