Update before publishing

Author: Drarig29

README.md

@@ -10,47 +10,25 @@ Import the library using [jsDelivr](https://www.jsdelivr.com/):
 <script type="text/javascript" src="https://cdn.jsdelivr.net/gh/Drarig29/brackets-viewer.js/dist/brackets-viewer.min.js"></script>
 ```
 
-It'll also be available on npm later.
+Or using [npm](https://www.npmjs.com/package/brackets-viewer):
 
-The render will happen in any DOM element with class `.tournament`. Therefore, **it must exist**.
-
-Now, you can use it like this:
+```html
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/brackets-viewer/dist/brackets-viewer.min.css" />
+<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/brackets-viewer/dist/brackets-viewer.min.js"></script>
+```
 
-```js
-bracketsViewer.render({
-    name: "Example",
-    type: "double_elimination",
-    minorOrdering: ['reverse', 'pair_flip', 'reverse', 'natural'],
-    teams: [
-        "Team 1", "Team 2",
-        "Team 3", "Team 4",
-        "Team 5", "Team 6",
-        "Team 7", "Team 8",
-        "Team 9", "Team 10",
-        "Team 11", "Team 12",
-        "Team 13", "Team 14",
-        "Team 15", "Team 16",
-    ],
-    results: [[ /* Winner Bracket */
-        [[1, 5], [2, 4], [6, 3], [2, 3], [1, 5], [5, 3], [7, 2], [1, 2]],
-        [[1, 2], [3, 4], [5, 6], [7, 8]],
-        [[9, 1], [8, 2]],
-        [[1, 3]],
-    ], [        /* Loser Bracket */
-        [[5, 1], [1, 2], [3, 2], [6, 9]],
-        [[8, 2], [1, 2], [6, 2], [1, 3]],
-        [[1, 2], [3, 1]],
-        [[3, 0], [1, 9]],
-        [[3, 2]],
-        [[4, 2]],
-    ], [        /* Grand Final */
-        [[2, 1]],
-    ]],
-})
+Now, you can use it with data generated using [brackets-manager](https://www.npmjs.com/package/brackets-manager) just like in the `/demo` folder.
 
-```
+To quickly test, you can use `json-server`:
+- Run the npm script named `db` to serve the static database file `/demo/db.json`
+    ```bash
+    npm run db
+    ```
 
-See `index.html` in the demo folder for examples.
+- Use directly the `db.json` file generated by unit tests in the `brackets-manager` project
+    ```bash
+    npx json-server --watch path/to/brackets-manager/db.json
+    ```
 
 ## How to build?
 

demo/index.html

@@ -12,7 +12,7 @@
         const stage = (await fetch('http://localhost:3000/stage?number=1').then(res => res.json()))[0];
         const data = await fetch('http://localhost:3000/db').then(res => res.json());
 
-        bracketsViewer.render({
+        bracketsViewer.render('#root', {
             stage,
             groups: data.group,
             rounds: data.round,

dist/brackets-viewer.min.js

@@ -1,7 +1,7 @@
 {
-    "name": "brackets-viewer.js",
+    "name": "brackets-viewer",
     "version": "1.0.0",
-    "description": "A simple library to display tournament brackets (pools, single elimination, double elimination)",
+    "description": "A simple library to display tournament brackets (round-robin, single elimination, double elimination)",
     "files": [
         "dist/"
     ],
@@ -45,4 +45,4 @@
     "dependencies": {
         "brackets-model": "^0.2.10"
     }
-}
+}

package.json

@@ -14,8 +14,8 @@ class BracketsViewer {
     readonly teamRefsDOM: { [key: number]: HTMLElement[] } = {};
     private participants!: Participant[];
 
-    public render(data: ViewerData) {
-        const root = $('#root');
+    public render(rootSelector: string, data: ViewerData) {
+        const root = $(rootSelector);
 
         if (root.length === 0) {
             throw Error('Root not found. You must have a root element with id "root"')