mirror of
https://github.com/Nighthawk42/roll20-character-sheets.git
synced 2026-08-30 03:40:32 +00:00
- updated build script to monitor for css changes.
- added .gitignore file to hide prod and dev folders - updated title text on armor details and sub-section nav, "gear" icon
This commit is contained in:
vince
@@ -0,0 +1,11 @@
|
||||
# Root level ignores
|
||||
node_modules/
|
||||
dev/
|
||||
prod/
|
||||
.vscode/
|
||||
|
||||
# src/ folder ignores
|
||||
src/node_modules/
|
||||
src/dev/
|
||||
src/prod/
|
||||
src/.vscode/
|
||||
+1
-13686
File diff suppressed because one or more lines are too long
File diff suppressed because it is too large
Load Diff
@@ -5,29 +5,53 @@ const chokidar = require('chokidar');
|
||||
const argv = require('minimist')(process.argv.slice(2));
|
||||
|
||||
const htmlInput = 'index.html';
|
||||
const jsInput = 'index.js'; // Source JS file
|
||||
const devJsOutput = 'dev/index.js'; // Destination for dev JS
|
||||
const prodJsInput = 'prod/index.js'; // Input for prod build
|
||||
const jsInput = 'index.js';
|
||||
const cssInput = '1ESheet.css';
|
||||
|
||||
const isProduction = argv.prod;
|
||||
const isDevelopment = argv.dev;
|
||||
const bundledOutput = path.resolve(__dirname, '../1ESheet.html'); // final output file in the root folder
|
||||
|
||||
// --- Function to copy JS for development ---
|
||||
// Output paths
|
||||
const devDir = 'dev';
|
||||
const prodDir = 'prod';
|
||||
const devJsOutput = `${devDir}/index.js`;
|
||||
const prodJsInput = `${prodDir}/index.js`;
|
||||
|
||||
const devHtmlOutput = `${devDir}/1ESheet.html`;
|
||||
const prodHtmlOutput = `${prodDir}/1ESheet.html`;
|
||||
|
||||
const devCssOutput = `${devDir}/1ESheet.css`;
|
||||
const prodCssOutput = `${prodDir}/1ESheet.css`;
|
||||
|
||||
// Ensure directory exists
|
||||
function ensureDir(folder) {
|
||||
if (!fs.existsSync(folder)) {
|
||||
fs.mkdirSync(folder);
|
||||
}
|
||||
}
|
||||
|
||||
// ---- Copy JS for development ----
|
||||
function copyDevJs() {
|
||||
try {
|
||||
// Ensure the 'dev' directory exists
|
||||
if (!fs.existsSync('dev')) {
|
||||
fs.mkdirSync('dev');
|
||||
}
|
||||
ensureDir(devDir);
|
||||
fs.copyFileSync(jsInput, devJsOutput);
|
||||
console.log(`Copied ${jsInput} to ${devJsOutput}`);
|
||||
console.log(`Copied ${jsInput} → ${devJsOutput}`);
|
||||
} catch (err) {
|
||||
console.error(`Error copying ${jsInput}:`, err);
|
||||
}
|
||||
}
|
||||
|
||||
// --- Main bundle function ---
|
||||
// ---- Copy CSS ----
|
||||
function copyCss(outputPath) {
|
||||
try {
|
||||
fs.copyFileSync(cssInput, outputPath);
|
||||
console.log(`Copied ${cssInput} → ${outputPath}`);
|
||||
} catch (err) {
|
||||
console.error(`Error copying CSS:`, err);
|
||||
}
|
||||
}
|
||||
|
||||
// ---- Bundling function ----
|
||||
async function bundle() {
|
||||
const jsPath = isProduction ? prodJsInput : devJsOutput;
|
||||
|
||||
@@ -42,36 +66,52 @@ async function bundle() {
|
||||
minifyJS: true,
|
||||
removeComments: true,
|
||||
});
|
||||
|
||||
injectedHTML = minifiedHTML.replace(/<script type="text\/worker"><\/script>/, `<script type="text/worker">${js.trim()}</script>`);
|
||||
} else {
|
||||
injectedHTML = html.replace(/<script type="text\/worker"><\/script>/, `<script type="text/worker">\r\n${js.trim()}\r\n</script>`);
|
||||
}
|
||||
|
||||
fs.writeFileSync(bundledOutput, injectedHTML, 'utf8');
|
||||
console.log(`✅ ${isProduction ? 'Production' : 'Development'} build complete!`);
|
||||
// output to dev/ or prod/
|
||||
const outputPath = isProduction ? prodHtmlOutput : devHtmlOutput;
|
||||
fs.writeFileSync(outputPath, injectedHTML, 'utf8');
|
||||
|
||||
console.log(`✅ ${isProduction ? 'Production' : 'Development'} build → ${outputPath}`);
|
||||
} catch (err) {
|
||||
console.error('❌ Error during build:', err);
|
||||
}
|
||||
}
|
||||
|
||||
// --- Script execution logic ---
|
||||
// ---- DEV MODE ----
|
||||
if (isDevelopment) {
|
||||
// Initial dev build
|
||||
copyDevJs();
|
||||
bundle();
|
||||
ensureDir(devDir);
|
||||
|
||||
// Watch for changes in source files
|
||||
chokidar.watch([htmlInput, jsInput]).on('change', (changedPath) => {
|
||||
console.log(`\nFile ${changedPath} has been changed`);
|
||||
if (changedPath === jsInput) {
|
||||
copyDevJs(); // Copy JS file first if it changed
|
||||
}
|
||||
bundle(); // Re-bundle
|
||||
});
|
||||
// Initial actions
|
||||
copyDevJs();
|
||||
copyCss(devCssOutput);
|
||||
bundle();
|
||||
|
||||
console.log('👀 Watching for changes...');
|
||||
|
||||
chokidar.watch([htmlInput, jsInput, cssInput]).on('change', (changedPath) => {
|
||||
console.log(`\nFile changed: ${changedPath}`);
|
||||
|
||||
if (changedPath === jsInput) {
|
||||
copyDevJs();
|
||||
}
|
||||
|
||||
if (changedPath === cssInput) {
|
||||
copyCss(devCssOutput);
|
||||
}
|
||||
|
||||
bundle();
|
||||
});
|
||||
}
|
||||
|
||||
// ---- PROD MODE ----
|
||||
if (isProduction) {
|
||||
ensureDir(prodDir);
|
||||
|
||||
copyCss(prodCssOutput);
|
||||
bundle();
|
||||
}
|
||||
|
||||
@@ -63,11 +63,14 @@
|
||||
<span class="left">
|
||||
<span>v<span name="attr_sheet_version">
|
||||
</span>
|
||||
<span class="right"> • 11/21/25'</span>
|
||||
<span class="right"> • 11/23/25'</span>
|
||||
</h5>
|
||||
<ul>
|
||||
<h5>Latest</h5>
|
||||
<li>Fixed a layout alignment glitch with the Equipment sorting option buttons when viewed in FF.</li>
|
||||
<li>Added title text to Armor Details item name that gives some explanation on how Armor Details and Equipment|Armor interact.</li>
|
||||
<li>Fixed armor row columns display/alignment if armor is marked as "magical" and Equipment tab was filtered to show "Magic" items only.</li>
|
||||
|
||||
<li>Added a couple sorting options to Equipment. Sort AZ and Sort by Location, then Item AZ. Includes an "Undo" option that will restore the previous natural order.</li>
|
||||
<li>Added a couple sorting options to Spells. Sort AZ and Sort by Level, then Spell AZ. Includes an "Undo" option that will restore the previous natural order.</li>
|
||||
<li>Update to Spells; adding new spells will automatically set a Spell's caster class and level based on the current Caster and Spell Level tabs selected. example; If the current Spell Tab is set to show "3rd" level spells and a new spell is added "+", entering a spell name will trigger the sheet to set the Spell's level to "3". If the tab is set to "All" or if the Spell's level has already been set, the Spell's level will not be changed. If the spell is added using an API mod, the Spell's level will not be changed. Caster Class selected acts similarly.</li>
|
||||
@@ -444,9 +447,9 @@
|
||||
<span>Alignment:</span>
|
||||
<input type="text" class="width-fill" name="attr_alignment" title="@{alignment}" placeholder="Description" />
|
||||
</label>
|
||||
<label class="inline-label left">
|
||||
<label class="inline-label left" title="Expand/Hide sub-section">
|
||||
<input type="checkbox" class="sect-show" name="attr_class_details_show" value="1" style="width: 4.5em;left:-.75em;top: 0;height: 2.5em;" checked />
|
||||
<span class="material-icons gear-nav" style="left: -1em;"></span>
|
||||
<span class="material-icons gear-nav" title="Expand/Hide sub-section" style="left: -1em;"></span>
|
||||
</label>
|
||||
<label class="inline-label">
|
||||
<span>Class:</span>
|
||||
@@ -682,7 +685,7 @@
|
||||
<span class="armor-columns">
|
||||
<label class="stack-text"><span>UnArmored Base</span></label>
|
||||
<input type="checkbox" name="attr_unarmored_worn" value="1" title="@{unarmored_worn}" checked />
|
||||
<input type="text" class="width-fill" name="attr_unarmored" value="" title="@{unarmored} | Use for Unarmored, Clothing, Natural Armor, etc." placeholder="non-armor" />
|
||||
<input type="text" class="width-fill" name="attr_unarmored" value="" title="@{unarmored} | Use for Unarmored, Clothing, Natural Armor, etc. NOTE: Adding a new item to Armor Details will also add a new Armor item to Equipment. Similarly, Armor items can be added to the Armor Details list from Equipment|Armor using the '+Add' button. (expand row's sub-section)" placeholder="non-armor" />
|
||||
<select name="attr_unarmored_ac" title="@{unarmored_ac} | Enter the actual AC value for this item.">
|
||||
<option value="10" selected>10</option>
|
||||
<option value="9">9</option>
|
||||
@@ -723,7 +726,7 @@
|
||||
<span class="armor-columns">
|
||||
<label><span>Armor 1</span></label>
|
||||
<input type="checkbox" name="attr_armortype_worn" title="@{armortype_worn}" value="1" checked />
|
||||
<input type="text" class="width-fill" name="attr_armortype" title="@{armortype}" placeholder="Description" />
|
||||
<input type="text" class="width-fill" name="attr_armortype" title="@{armortype} | NOTE: Adding a new item to Armor Details will also add a new Armor item to Equipment. Similarly, Armor items can be added to the Armor Details list from Equipment|Armor using the '+Add' button. (expand row's sub-section)" placeholder="Description" />
|
||||
<select name="attr_armortype_ac" title="@{armortype_ac} | Enter the actual AC value for this item.">
|
||||
<option value="10" selected>10</option>
|
||||
<option value="9">9</option>
|
||||
@@ -775,7 +778,7 @@
|
||||
<span class="armor-columns">
|
||||
<label><span>Armor 2</span></label>
|
||||
<input type="checkbox" name="attr_armortype2_worn" title="@{armortype2_worn}" value="1" />
|
||||
<input type="text" class="width-fill" name="attr_armortype2" title="@{armortype2}" placeholder="Description" />
|
||||
<input type="text" class="width-fill" name="attr_armortype2" title="@{armortype2} | NOTE: Adding a new item to Armor Details will also add a new Armor item to Equipment. Similarly, Armor items can be added to the Armor Details list from Equipment|Armor using the '+Add' button. (expand row's sub-section)" placeholder="Description" />
|
||||
<select name="attr_armortype2_ac" title="@{armortype2_ac} | Enter the actual AC value for this item.">
|
||||
<option value="10" selected>10</option>
|
||||
<option value="9">9</option>
|
||||
@@ -816,7 +819,7 @@
|
||||
<span class="armor-columns">
|
||||
<label><span>Shield</span></label>
|
||||
<input type="checkbox" name="attr_armorshield_worn" title="@{armorshield_worn}" value="1" />
|
||||
<input type="text" class="width-fill" name="attr_armorshield" title="@{armorshield}" placeholder="Description" />
|
||||
<input type="text" class="width-fill" name="attr_armorshield" title="@{armorshield} | NOTE: Adding a new item to Armor Details will also add a new Armor item to Equipment. Similarly, Armor items can be added to the Armor Details list from Equipment|Armor using the '+Add' button. (expand row's sub-section)" placeholder="Description" />
|
||||
<select name="attr_armorshield_ac" title="@{armorshield_ac} | ie +2 lowers AC by -2.">
|
||||
<option value="0" selected>+0</option>
|
||||
<option value="-1">+1</option>
|
||||
@@ -858,7 +861,7 @@
|
||||
<span class="armor-columns">
|
||||
<label><span>Helm</span></label>
|
||||
<input type="checkbox" name="attr_armorhelmet_worn" title="@{armorhelmet_worn}" value="1" />
|
||||
<input type="text" class="width-fill" name="attr_armorhelmet" title="@{armorhelmet}" placeholder="Description" />
|
||||
<input type="text" class="width-fill" name="attr_armorhelmet" title="@{armorhelmet} | NOTE: Adding a new item to Armor Details will also add a new Armor item to Equipment. Similarly, Armor items can be added to the Armor Details list from Equipment|Armor using the '+Add' button. (expand row's sub-section)" placeholder="Description" />
|
||||
<select name="attr_armorhelmet_ac" title="@{armorhelmet_ac} | Other than Magic Bonuses, Helms do not impact Total AC calculations.">
|
||||
<option value="10" selected>10</option>
|
||||
<option value="9">9</option>
|
||||
@@ -882,7 +885,7 @@
|
||||
<span class="armor-columns" style="margin-bottom: -.25em;">
|
||||
<label><span>Other</span></label>
|
||||
<input type="checkbox" name="attr_armorother_worn" title="@{armorother_worn}" value="1" />
|
||||
<input type="text" class="width-fill" name="attr_armorother" title="@{armorother}" placeholder="Description" />
|
||||
<input type="text" class="width-fill" name="attr_armorother" title="@{armorother} | NOTE: Adding a new item to Armor Details will also add a new Armor item to Equipment. Similarly, Armor items can be added to the Armor Details list from Equipment|Armor using the '+Add' button. (expand row's sub-section)" placeholder="Description" />
|
||||
<select name="attr_armorother_ac" title="@{armorother_ac} | Enter the actual AC value for this item.">
|
||||
<option value="10" selected>10</option>
|
||||
<option value="9">9</option>
|
||||
@@ -923,7 +926,7 @@
|
||||
<span class="sect armor-columns">
|
||||
<label><span>Other</span></label>
|
||||
<input type="checkbox" name="attr_armorother2_worn" title="@{armorother2_worn}" value="1" />
|
||||
<input type="text" class="width-fill" name="attr_armorother2" title="@{armorother2}" placeholder="Description" />
|
||||
<input type="text" class="width-fill" name="attr_armorother2" title="@{armorother2} | NOTE: Adding a new item to Armor Details will also add a new Armor item to Equipment. Similarly, Armor items can be added to the Armor Details list from Equipment|Armor using the '+Add' button. (expand row's sub-section)" placeholder="Description" />
|
||||
<select name="attr_armorother2_ac" title="@{armorother2_ac} | ie +2 lowers AC by -2.">
|
||||
<option value="0" selected>+0</option>
|
||||
<option value="-1">+1</option>
|
||||
@@ -960,7 +963,7 @@
|
||||
<span class="sect armor-columns">
|
||||
<label><span>Other</span></label>
|
||||
<input type="checkbox" name="attr_armorother3_worn" title="@{armorother3_worn}" value="1" />
|
||||
<input type="text" class="width-fill" name="attr_armorother3" title="@{armorother3}" placeholder="Description" />
|
||||
<input type="text" class="width-fill" name="attr_armorother3" title="@{armorother3} | NOTE: Adding a new item to Armor Details will also add a new Armor item to Equipment. Similarly, Armor items can be added to the Armor Details list from Equipment|Armor using the '+Add' button. (expand row's sub-section)" placeholder="Description" />
|
||||
<select name="attr_armorother3_ac" title="@{armorother3_ac} | ie +2 lowers AC by -2.">
|
||||
<option value="0" selected>+0</option>
|
||||
<option value="-1">+1</option>
|
||||
@@ -996,7 +999,7 @@
|
||||
<span class="sect armor-columns">
|
||||
<label><span>Other</span></label>
|
||||
<input type="checkbox" name="attr_armorother4_worn" title="@{armorother4_worn}" value="1" />
|
||||
<input type="text" class="width-fill" name="attr_armorother4" title="@{armorother4}" placeholder="Description" />
|
||||
<input type="text" class="width-fill" name="attr_armorother4" title="@{armorother4} | NOTE: Adding a new item to Armor Details will also add a new Armor item to Equipment. Similarly, Armor items can be added to the Armor Details list from Equipment|Armor using the '+Add' button. (expand row's sub-section)" placeholder="Description" />
|
||||
<select name="attr_armorother4_ac" title="@{armorother4_ac} | ie +2 lowers AC by -2.">
|
||||
<option value="0" selected>+0</option>
|
||||
<option value="-1">+1</option>
|
||||
@@ -1032,7 +1035,7 @@
|
||||
<span class="sect armor-columns">
|
||||
<label><span>Other</span></label>
|
||||
<input type="checkbox" name="attr_armorother5_worn" title="@{armorother5_worn}" value="1" />
|
||||
<input type="text" class="width-fill" name="attr_armorother5" title="@{armorother5}" placeholder="Description" />
|
||||
<input type="text" class="width-fill" name="attr_armorother5" title="@{armorother5} | NOTE: Adding a new item to Armor Details will also add a new Armor item to Equipment. Similarly, Armor items can be added to the Armor Details list from Equipment|Armor using the '+Add' button. (expand row's sub-section)" placeholder="Description" />
|
||||
<select name="attr_armorother5_ac" title="@{armorother5_ac} | ie +2 lowers AC by -2.">
|
||||
<option value="0" selected>+0</option>
|
||||
<option value="-1">+1</option>
|
||||
@@ -1069,7 +1072,7 @@
|
||||
<span class="sect armor-columns">
|
||||
<label><span>Other</span></label>
|
||||
<input type="checkbox" name="attr_armorother6_worn" title="@{armorother6_worn}" value="1" />
|
||||
<input type="text" class="width-fill" name="attr_armorother6" title="@{armorother6}" placeholder="Description" />
|
||||
<input type="text" class="width-fill" name="attr_armorother6" title="@{armorother6} | NOTE: Adding a new item to Armor Details will also add a new Armor item to Equipment. Similarly, Armor items can be added to the Armor Details list from Equipment|Armor using the '+Add' button. (expand row's sub-section)" placeholder="Description" />
|
||||
<select name="attr_armorother6_ac" title="@{armorother6_ac} | ie +2 lowers AC by -2.">
|
||||
<option value="0" selected>+0</option>
|
||||
<option value="-1">+1</option>
|
||||
@@ -3126,7 +3129,7 @@
|
||||
</div>
|
||||
<details class="border-bottom-half">
|
||||
<summary>
|
||||
<span class="material-icons gear-nav"></span>
|
||||
<span class="material-icons gear-nav" title="Expand/Hide sub-section"></span>
|
||||
</summary>
|
||||
<span class="to-hit-adj-box">
|
||||
<span class="to-hit center">
|
||||
@@ -3265,7 +3268,7 @@
|
||||
</span>
|
||||
<details class="border-bottom-half">
|
||||
<summary>
|
||||
<span class="material-icons gear-nav"></span>
|
||||
<span class="material-icons gear-nav" title="Expand/Hide sub-section"></span>
|
||||
</summary>
|
||||
<!-- sync armor-->
|
||||
<span class="span-all show-for-armor inline-label" title="Choose an Armor Type first to unlock fields.">
|
||||
@@ -3684,7 +3687,7 @@
|
||||
</span>
|
||||
<details class="border-bottom-half">
|
||||
<summary>
|
||||
<span class="material-icons gear-nav"></span>
|
||||
<span class="material-icons gear-nav" title="Expand/Hide sub-section"></span>
|
||||
</summary>
|
||||
<div class="special-abilities-row2">
|
||||
<label class="label-under-small" title="TIP: Must include a dice roll to be included with the roll. ie 1d6">
|
||||
@@ -3779,7 +3782,7 @@
|
||||
</span>
|
||||
<details class="border-bottom-half">
|
||||
<summary>
|
||||
<span class="material-icons gear-nav"></span>
|
||||
<span class="material-icons gear-nav" title="Expand/Hide sub-section"></span>
|
||||
</summary>
|
||||
<span class="inline-label">
|
||||
<textarea class="height-short" name="attr_nwp_description" title="@{repeating_nonweaponproficiencies_$X_nwp_description}" placeholder="Ability Description"></textarea>
|
||||
@@ -4343,7 +4346,7 @@
|
||||
</span>
|
||||
<details class="spell-display border-bottom-half">
|
||||
<summary>
|
||||
<span class="material-icons gear-nav"></span>
|
||||
<span class="material-icons gear-nav" title="Expand/Hide sub-section"></span>
|
||||
</summary>
|
||||
<div class="spell-details-grid">
|
||||
<span class="span-all inline-label">
|
||||
@@ -4459,7 +4462,7 @@
|
||||
</span>
|
||||
<details class="border-bottom-half">
|
||||
<summary>
|
||||
<span class="material-icons gear-nav"></span>
|
||||
<span class="material-icons gear-nav" title="Expand/Hide sub-section"></span>
|
||||
</summary>
|
||||
<textarea class="height-tall" name="attr_notes_description" title="@{repeating_notes_$X_notes_description}" placeholder="Misc Notes"></textarea>
|
||||
</details>
|
||||
|
||||
@@ -6,7 +6,7 @@
|
||||
"scripts": {
|
||||
"dev": "node bundle-process.js --dev",
|
||||
"prod": "npm run bundle:js:prod && node bundle-process.js --prod",
|
||||
"bundle:js:prod": "esbuild index.js --bundle --minify --outfile=prod/index.js"
|
||||
"bundle:js:prod": "esbuild index.js --bundle --platform=node --minify --outfile=prod/index.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"chokidar": "^4.0.3",
|
||||
|
||||
File diff suppressed because one or more lines are too long
@@ -6,26 +6,23 @@ This is the community character sheet for AD&D1e Revised.
|
||||
|
||||
You need to have `nodejs` and `npm` installed.
|
||||
|
||||
Then, run `npm install` from the 'src/' folder to install the package.json dependencies.
|
||||
Then, run `npm install` from the './src/' folder to install the package.json dependencies.
|
||||
|
||||
Edit the sheet's HTML and JS/sheetworker files found in the 'src/' folder. (ie `src/index.html`, `src/index.js`)
|
||||
Sheet CSS can be edited directly using `1ESheet.css` located at root.
|
||||
Edit the sheet's HTML, CSS and JS/sheetworker files found in the './src/' folder. (ie `index.html`, `index.js`, `1ESheet.css`)
|
||||
|
||||
With dependencies installed you can run `npm run dev` from within '/src' to render an un-minified version for development. `npm run dev` will also watch for any changes in the src files and automatically update.
|
||||
|
||||
Output will be rendered as `1ESheet.html` located at root.
|
||||
With dependencies installed you can run `npm run dev` from within './src/' to render an un-minified version for development. `npm run dev` will also watch for any changes in the src files and automatically update copies in '.src/dev/'.
|
||||
|
||||
This is the version that should be used while developing and testing via the Roll20 Developer Sandbox or Custom game.
|
||||
|
||||
## Production
|
||||
|
||||
With dependencies installed you can run `npm run prod` from within '/src' to build a finalized project (minified) for Roll20's live servers.
|
||||
With dependencies installed you can run `npm run prod` from within './src/' to build a finalized project (minified) for Roll20's live servers.
|
||||
|
||||
Output will be rendered as `1ESheet.html` located at root.
|
||||
Output will be rendered to `./src/prod/1ESheet.html`.
|
||||
|
||||
This is the version that should be used for Roll20's live servers.
|
||||
This is the version that should be used for Roll20's live servers. Copy `./src/prod/1ESheet.html` and `./src/prod/1ESheet.css` to the project root, overwriting the old files, before committing to your fork and ultimately submitting a pull request to Roll20 for approval.
|
||||
|
||||
## Custom Games
|
||||
|
||||
If you want to use this code for a Roll20 Custom game; copy the raw text from `1ESheet.html` and `1ESheet.css` located at root and paste into the appropriate Game Settings editor tab.
|
||||
If you want to use this code for a Roll20 Custom game; copy the raw text from '1ESheet.html' and '1ESheet.css' from the root directory and paste into the appropriate Game Settings editor tab.
|
||||
<br>
|
||||
Reference in New Issue
Block a user