This Tampermonkey userscript that enhances the campaign page on dndbeyond.com. It adds extra character data to the character cards to function like a DM screen.

1. Install Tampermonkey addon for managing userscripts. Get Tampermonkey
2. Install new script from below link: https://valeryan.github.io/DDB-DM-Screen/ddb-dm-screen.user.js
3. Open your campaign, can be found here https://dndbeyond.com/my-campaigns
4. When a release is published it will be automatically published to the github page and should prompt to update the installed script.

1. Uses publicly accessible API endpoints and a tool called Simplified Character Data System(SCDS) to display extra information about characters on your campaign screen.

Remember to never paste unknown userscripts from some shady github repos to your tampermonkey addon as this can severely compromise your PC.

There are several such user scripts around and some Chrome extensions, etc. I draw inspiration from all these.

The development method is based on webpack-usersript-template. Development of this script requires a Chrome base browser for file system access by Tampermonkey.

1. Allow Tampermonkey's access to local file URIs in Chrome, follow tampermonkey/faq
2. install deps with npm i or npm ci.
3. use npm run dev to start your development.
4. open webpack-userscript-template/dist/ddb-dm-screen.dev.user.js in your Chrome browser and install it with your userscript manager.

this userscript's meta contains // @require file://path/to/dist/ddb-dm-screen.debug.user.js, which take src/index.ts as entry point.

every times you edit your metadata, you'll have to install it again, because Tampermonkey does not read it from dist every times.

5. edit src/index.ts

livereload is enabled by default, use this chrome extension

Add dependencies to your user script metadata's require section , and exclude them in config/webpack.config.base.cjs

github actions will deploy production userscript to this projects gh-pages.