mirror of
https://github.com/Nighthawk42/roll20-character-sheets.git
synced 2026-09-04 22:22:28 +00:00
- updated 'build' script to watch for changes in './src' and auto-bundle
- updated readme instructions in './dev'
This commit is contained in:
vince
@@ -1,17 +1,17 @@
|
||||
# Pathfinder Community Sheet for Roll20.net
|
||||
## Editing
|
||||
Unlike most character sheets found on [Roll20's repo](https://github.com/Roll20/roll20-character-sheets), the [Pathfinder Community Sheet](https://github.com/Roll20-Pathfinder-Character-Sheet/Roll20-Pathfinder-Character-Sheet) must be edited/developed within a specific local environment. Sheetworkers have been separated into various es modules based on their specific sheet sections or function(s). It is necessary to minimally install Git and Node/NPM. The html and js must be bundle using npm commands and webpack. More details below.
|
||||
Unlike most character sheets found on [Roll20's repo](https://github.com/Roll20/roll20-character-sheets), the [Pathfinder Community Sheet](https://github.com/Roll20/roll20-character-sheets/tree/master/Pathfinder%20Community) must be edited/developed utilizing npm/webpack from your local environment. Sheetworkers have been separated into various es modules based on their specific sheet sections or function(s). It is necessary to minimally install Git and Node/NPM. The html and js must be bundle using npm commands and webpack. More details below.
|
||||
|
||||
In order to edit the sheet locally, complete the following sections;
|
||||
|
||||
## Install Git or Desktop GUI
|
||||
You will need to fork and clone the [Pathfinder Community Sheet](https://github.com/Roll20-Pathfinder-Character-Sheet/Roll20-Pathfinder-Character-Sheet) using Git and/or Github Desktop Gui.
|
||||
You will need to fork and clone the [Roll20 Repo](https://github.com/Roll20/roll20-character-sheets). Use Git cli and/or Github Desktop Gui.
|
||||
|
||||
- Git for [Windows](https://gitforwindows.org/)
|
||||
- Git for [Linux](https://git-scm.com/download/linux)
|
||||
- Github [Desktop GUI](https://desktop.github.com/download/)
|
||||
|
||||
If you are going to setup with VScode [See specific instructions below](https://github.com/Roll20-Pathfinder-Character-Sheet/Roll20-Pathfinder-Character-Sheet?tab=readme-ov-file#specific-instructions-for-setting-up-with-vscode) you can skip the Limited Install steps.
|
||||
If you are going to setup with VScode [See specific instructions below](https://github.com/Roll20-Pathfinder-Character-Sheet/Roll20-Pathfinder-Character-Sheet?tab=readme-ov-file#specific-instructions-for-setting-up-with-vscode) you can skip these Limited Install steps.
|
||||
|
||||
## Limited Install using Node.js using NVM
|
||||
This is a good option if you are not going to use VScode as your editor.
|
||||
@@ -19,7 +19,7 @@ This is a good option if you are not going to use VScode as your editor.
|
||||
1. Download and install latest version of Node Version Manager(NVM): https://github.com/coreybutler/nvm-windows/releases
|
||||
2. Open a **NEW** shell (Right click -> Open Git Bash Here/Git GUI Here) You can not use one which was opened before NVM is installed.
|
||||
3. Run `nvm install latest` to install the latest version of node.js
|
||||
4. Run `nvm list available` and note the version you want to use. The latest version should be fine.
|
||||
4. Run `nvm list available` and note the version you want to use. The latest version should be fine.
|
||||
5. Run `nvm use node <version#>` include the proper version number as noted above.
|
||||
#### Linux/Mac (adjust node version as needed)
|
||||
1. Run `curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.33.0/install.sh | bash`
|
||||
@@ -40,46 +40,50 @@ This is a good option if you are not going to use VScode as your editor.
|
||||
## VScode Installation
|
||||
Here are some instructions for using VScode for editing the sheet.
|
||||
|
||||
#### Install git
|
||||
1. Download the Github [Desktop GUI](https://desktop.github.com/download/) and/or install **Git** as noted above. You may also have both installed side-by-side.
|
||||
2. Add the Github for Windows install directory to your windows environment [PATH](https://windowsreport.com/edit-windows-path-environment-variable/) variable.
|
||||
#### Install git
|
||||
1. Download the Github [Desktop GUI](https://desktop.github.com/download/) and/or install **Git** as noted above. You may also install both and use either one.
|
||||
2. Add the "Github for Windows" install directory to your windows environment [PATH](https://windowsreport.com/edit-windows-path-environment-variable/) variable.
|
||||
More specific instructions; there is only a 'cmd' directory, not a bin directory, contrary to the directions. [More info](https://www.answerlookup.com/how-add-git-windows-path-environment-variable).
|
||||
|
||||
#### VScode and Node.js integration
|
||||
1. Download and install [VScode](https://code.visualstudio.com/download)
|
||||
2. Install [Node](https://nodejs.org/) using vscode's integrated terminal. ie `npm install`
|
||||
3. You may want to create a unique [Workspace](https://code.visualstudio.com/docs/editor/workspaces) specifically for editing the pathfinder sheet.
|
||||
2. Install [Node](https://nodejs.org/) and NPM using vscode's integrated terminal. ie `npm install`
|
||||
3. You may want to create a unique [Workspace](https://code.visualstudio.com/docs/editor/workspaces) specifically for editing the Pathfinder sheet.
|
||||
|
||||
#### Reccomended Vscode Extensions
|
||||
#### Recommended Vscode Extensions
|
||||
- [NPM Intellisense](https://marketplace.visualstudio.com/items?itemName=christian-kohlernpm-intellisense)
|
||||
- [Eslint extension](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint)
|
||||
(works with included ./eslint.config.mjs)
|
||||
- [Prettier Eslint](https://marketplace.visualstudio.com/items?itemName=rvest.vs-code-prettier-eslint)
|
||||
(works with included ./.prettierrc.json)
|
||||
- [GetLens](https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens)
|
||||
- any other extensions that your might find useful.
|
||||
|
||||
#### Install Curl
|
||||
**Curl** is required. [See above](https://github.com/Roll20-Pathfinder-Character-Sheet/Roll20-Pathfinder-Character-Sheet#install-curl-executable-if-you-dont-have-it-already).
|
||||
**Curl** is required to copy and update TheAaronSheet code. [See above](https://github.com/Roll20-Pathfinder-Character-Sheet/Roll20-Pathfinder-Character-Sheet#install-curl-executable-if-you-dont-have-it-already).
|
||||
|
||||
### Fork and Clone Repo
|
||||
1. [Fork](https://github.com/Roll20/roll20-character-sheets/fork) the Roll20 sheet repo code if you haven't already done so.
|
||||
2. Clone the project from within VScode or [Github Desktop](https://desktop.github.com/)
|
||||
|
||||
### Editing and Submitting updates
|
||||
1. [Fork](https://github.com/Roll20-Pathfinder-Character-Sheet/Roll20-Pathfinder-Character-Sheet/fork) the Pathfinder Community Sheet code if you haven't already done so.
|
||||
2. Clone the project from within VScode or [Github Desktop](https://desktop.github.com/)
|
||||
3. It's highly reccomended that you create new "working" branches based on the Development branch.
|
||||
4. Submit commits to your working branch until you are done editing and then submit a pull request to Origin/Develop for approval.
|
||||
5. Once the latest changes on the Develop branch are approved, they will be merged into the Origin/Master.
|
||||
6. A pull request for any new changes on the Pathfinder Sheet's repo Origin/Master will need to be submitted to Roll20's repository for approval. You may need to fork and clone the [Roll20's repo](https://github.com/Roll20/roll20-character-sheets).
|
||||
1. It's highly recommended that you always create a new "working" branch(s) based on the Main/Master branch.
|
||||
2. Running `npm run build` will watch for changed in the "./src" files and auto-bundle HTML and JS as index.html to the "./dist" folder. (see below)
|
||||
3. Edit files in the "./src"
|
||||
4. Submit commits to your working branch until you are done editing and then submit a pull request to Roll20's Origin/Main for approval.
|
||||
5. Once the latest changes have been approved, they will be merged into Roll20's Origin/Master and propagate to the live servers.
|
||||
|
||||
## Build/Compile Commands
|
||||
- Run `npm run build` - Builds the project's index.html Use Case: development/testing. Output to "dist" folder.
|
||||
- Run `npm run prod` - Turns **debug off** automatically. Builds the project's index.html Use Case: roll20 production. Output to "prod" folder.
|
||||
- Run `npm run postinstall` - downloads [TheArronSheet.js](https://github.com/shdwjk/TheAaronSheet) and saves it to the ./src folder as TheAaronSheet.cjs "TAS" is used to handle custom logging/debugging as well as some common utility functions. To simplify bundling, the ./src/TheAaronSheet.js included in the repo is a slightly edited (ie adds module.exports) version of TAS to make it an es6 module as well.
|
||||
## Build/Compile Script Commands
|
||||
- Run `npm run postinstall` - downloads latest version of [TheArronSheet.js](https://github.com/shdwjk/TheAaronSheet) and saves it to the "./src" folder as TheAaronSheet.cjs "TAS" is used to handle custom logging/debugging as well as some common utility functions. To simplify bundling, the ./src/TheAaronSheet.js included in the repo is a slightly edited (ie adds module.exports) version of TAS to make it an es6 module as well.
|
||||
- Run `npm run build` - Builds the project's index.html and watches for changes in the "./src" folder.Use Case: development/testing. Outputs bundled index.html, copies pathfinder.css and translation.json to "dist/" folder.
|
||||
- Run `npm run prod` - Turns **debug off** automatically. Builds the project's index.html Use Case: roll20 production. Outputs bundled index.html, copies pathfinder.css and translation.json to "prod/" folder. Can be used for roll20's pathfinder.html in the root of the project.
|
||||
|
||||
## Viewing in Roll20
|
||||
* Option 1: Use the bundled index.html from the ./dist or ./prod folder accordingly and the pathfinder.css, translation.json, and sheet.json as included in the ./src folder. These files can be copied as raw text directly into a Custom game's, "Game Settings" editor (HTML|CSS|TRANSLATION). Do not rely on the Preview tab. Always view the sheet in-game for an accurate load.
|
||||
* Option 2: Sync a Sandbox game to your local files using Scott C's Chrome browser extension [Roll20 API and Sheet Autouploader](https://chromewebstore.google.com/detail/roll20-api-and-sheet-auto/hboggmcfmaakkifgifjbccnpfmnegick) You may need to create a [Symbolic link](https://www.howtogeek.com/16226/complete-guide-to-symbolic-links-symlinks-on-windows-or-linux/) for the ./src/pathfinder.css and/or the ./src/translation.json to the ./dist and ./prod folders so the extension can easily detect local changes.
|
||||
## Viewing Edits on Roll20
|
||||
* Option 1: (preferred) Sync a Custom Sandbox game to your local files using Scott C's Chrome browser extension [Roll20 API and Sheet Autouploader](https://chromewebstore.google.com/detail/roll20-api-and-sheet-auto/hboggmcfmaakkifgifjbccnpfmnegick) Use the in-game Custom Sandbox Tool to browse to your local "./dist" folder. The extension can "should" detect any local changes and update the sheet in-game.
|
||||
* Option 2: Use the bundled index.html, pathfinder.css, and translation.json from the ./dist or ./prod folder accordingly. These files can be copied as raw text directly into a Custom game's, "Game Settings" editor (HTML|CSS|TRANSLATION|PREVIEW). Do not rely on the Preview tab. Always view the sheet in-game for an accurate load.
|
||||
|
||||
## Errors/Issues
|
||||
- Webpack dependencies: update webpack and dev dependencies with caution.
|
||||
- Webpack dependencies: use caution when updating webpack and/or dependencies. Incompatibilities between dependencies can break the building process. Always use `npm install` to verify and update webpack-lock.json
|
||||
|
||||
## Module Breakdown
|
||||
Each "page" or section of the Pathfinder sheet has one or more modules associated with it. For instance, the core page has PFAbilityScores, PFInitiative, PFClassRaceGrid etc. The Defense page has PFDefense, PFSaves. The Attacks page has PFAttacks, spells page PFSpells, etc.
|
||||
@@ -94,4 +98,3 @@ spells:
|
||||
* **PFSpells:** the repeating_spells list
|
||||
* **PFSpellCasterClasses:** The spell caster section, spells per day, spell points, etc
|
||||
* **PFSpellOptions:** the spell options and updating of macros
|
||||
|
||||
|
||||
+20
@@ -23,6 +23,7 @@
|
||||
"babel-core": "^7.0.0-beta.3",
|
||||
"babel-loader": "^9.2.1",
|
||||
"copy-webpack-plugin": "^13.0.0",
|
||||
"cross-env": "^7.0.3",
|
||||
"extract-loader": "^4.0.3",
|
||||
"file-loader": "^6.2.0",
|
||||
"html-inline-script-webpack-plugin": "^3.2.1",
|
||||
@@ -2865,6 +2866,25 @@
|
||||
"integrity": "sha512-ZQBvi1DcpJ4GDqanjucZ2Hj3wEO5pZDS89BWbkcrvdxksJorwUDDZamX9ldFkp9aw2lmBDLgkObEA4DWNJ9FYQ==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/cross-env": {
|
||||
"version": "7.0.3",
|
||||
"resolved": "https://registry.npmjs.org/cross-env/-/cross-env-7.0.3.tgz",
|
||||
"integrity": "sha512-+/HKd6EgcQCJGh2PSjZuUitQBQynKor4wrFbRg4DtAgS1aWO+gU52xpH7M9ScGgXSYmAVS9bIJ8EzuaGw0oNAw==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"cross-spawn": "^7.0.1"
|
||||
},
|
||||
"bin": {
|
||||
"cross-env": "src/bin/cross-env.js",
|
||||
"cross-env-shell": "src/bin/cross-env-shell.js"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=10.14",
|
||||
"npm": ">=6",
|
||||
"yarn": ">=1"
|
||||
}
|
||||
},
|
||||
"node_modules/cross-spawn": {
|
||||
"version": "7.0.6",
|
||||
"resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.6.tgz",
|
||||
|
||||
@@ -4,7 +4,7 @@
|
||||
"main": "index.js",
|
||||
"scripts": {
|
||||
"postinstall": "curl https://raw.githubusercontent.com/shdwjk/TheAaronSheet/master/TheAaronSheet.js -o ./src/TheAaronSheet.cjs",
|
||||
"build": "SET NODE_ENV=development& webpack --config webpack.config.js",
|
||||
"build": "cross-env NODE_ENV=development webpack --watch --config webpack.config.js",
|
||||
"prod": "SET NODE_ENV=production& webpack --config webpack.config.js"
|
||||
},
|
||||
"license": "MIT",
|
||||
@@ -14,6 +14,7 @@
|
||||
"babel-core": "^7.0.0-beta.3",
|
||||
"babel-loader": "^9.2.1",
|
||||
"copy-webpack-plugin": "^13.0.0",
|
||||
"cross-env": "^7.0.3",
|
||||
"extract-loader": "^4.0.3",
|
||||
"file-loader": "^6.2.0",
|
||||
"html-inline-script-webpack-plugin": "^3.2.1",
|
||||
@@ -33,4 +34,4 @@
|
||||
"underscore": "^1.13.7",
|
||||
"webpack-sources": "^3.2.3"
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -8,6 +8,23 @@ const HtmlMinimizerPlugin = require('html-minimizer-webpack-plugin');
|
||||
const HtmlWorkerScriptPlugin = require('./HtmlWorkerScriptPlugin.js');
|
||||
const CopyWebpackPlugin = require('copy-webpack-plugin');
|
||||
|
||||
// Create a custom plugin for dev/build completion logging
|
||||
class BuildCompletionPlugin {
|
||||
apply(compiler) {
|
||||
compiler.hooks.done.tap('BuildCompletionPlugin', (stats) => {
|
||||
if (mode === 'development') {
|
||||
setTimeout(() => {
|
||||
console.log('\x1b[32m%s\x1b[0m', '✓ Build complete - watching for changes...\n');
|
||||
}, 400);
|
||||
}
|
||||
if (mode === 'production') {
|
||||
setTimeout(() => {
|
||||
console.log('\x1b[32m%s\x1b[0m', '✓ Build complete \n');
|
||||
}, 900);
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
const webpackConfig = {
|
||||
entry: path.join(__dirname, 'src/index.js'),
|
||||
resolve: {
|
||||
@@ -45,6 +62,7 @@ const webpackConfig = {
|
||||
{from: path.join(__dirname, 'src/translation.json'), to: path.join(__dirname, mode === 'production' ? 'prod' : 'dist')},
|
||||
],
|
||||
}),
|
||||
new BuildCompletionPlugin(),
|
||||
],
|
||||
cache: {
|
||||
type: 'filesystem', // Recommended for production builds
|
||||
|
||||
Reference in New Issue
Block a user