Does things with tournament data.
I need to:
- Get information a given tournament
- Know what teams are playing in it
- See how those teams are doing at any given stage of the tournament
commonfor shared logic & typesimporterfor gathering tournament data from various sourcesrendererfor visualizing tournament data
An ESM bundle (dist/index.mjs) is supplied by each package for use with bundlers (e.g. Webpack):
// Import base styles
import '@tourneyview/renderer/css/base.css';
import { BracketRenderer, D3BracketAnimator } from '@tourneyview/renderer';
import { BattlefyImporter } from '@tourneyview/importer';
const renderer = new BracketRenderer({
animator: new D3BracketAnimator()
});
const importer = new BattlefyImporter();
importer.getMatches({ id: '62fe9a5bc19ee145a2efa31a' }).then(matches => {
renderer.setData(matches);
});
document.body.appendChild(renderer.getElement());Using tourneyview without a bundler is largely untested for the time being. Feel free to file an issue if something isn't working as expected.
When working without a builder, use the IIFE bundles of tourneyview (dist/index.iife.js) after loading the necessary dependencies:
<head>
<meta charset="UTF-8">
<title>tourneyview</title>
<!-- Import base styles -->
<link rel="stylesheet" href="@tourneyview/renderer/css/base.css">
</head>
<body>
<!-- Ensure dependencies are loaded beforehand; the renderer requires d3 and the importer requires axios -->
<script src="https://cdn.jsdelivr.net/npm/d3@7"></script>
<script src="https://cdn.jsdelivr.net/npm/axios@1.1.2/dist/axios.min.js"></script>
<script src="@tourneyview/renderer/dist/index.iife.js"></script>
<script src="@tourneyview/importer/dist/index.iife.js"></script>
<script>
const renderer = new TourneyviewRenderer.BracketRenderer({
animator: new TourneyviewRenderer.D3BracketAnimator()
});
document.body.appendChild(renderer.getElement());
const importer = new TourneyviewRenderer.BattlefyImporter();
importer.getMatches({ id: '643ad67d227ec44112fbaeb6' }).then(matches => {
renderer.setData(matches);
});
</script>
</body>Run npx lerna version to assign a new version number and push it to git. New versions may be manually published to npm
through GitHub actions by running the release workflow on the desired version tag.
npx lerna publish --no-private will guide you through the rigmaroll of assigning a new version number to each package
and sending it off to git and npm. As of the last time this document was updated, this will not work if you use a
security key to sign in to npm (see here).