Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Add an improved, experimental Pathfinder 2e Bestiary layout #11

Merged
merged 3 commits into from
Jul 13, 2024
Merged

Add an improved, experimental Pathfinder 2e Bestiary layout #11

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
69a3bd2
Allow build script to specify a system and output file
miscoined Jul 5, 2024
b53e765
Add a new experimental Pathfinder 2e layout
miscoined Jul 5, 2024
cc88396
Add documentation to build script and fix watch functionality
miscoined Jul 11, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
96 changes: 51 additions & 45 deletions esbuild.config.mjs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,20 @@
(https://github.com/jdanielmourao/obsidian-sanctum)
Further based on https://github.com/damiankorcz/Prism-Theme/blob/main/esbuild.config.mjs
Updated to Esbuild 17 by @Sigrunixia

Usage:

Dev build
$ node esbuild.config.mjs

Prod build
$ node esbuild.config.mjs production

Dev build for one system only (pf2e or bnb):
$ node esbuild.config.mjs <system>

Dev build for one system only (pf2e or bnb), output to outfile:
$ node esbuild.config.mjs <system> <outfile>
*/

import * as esbuild from "esbuild";
Expand All @@ -13,50 +27,38 @@ import time from 'esbuild-plugin-time';

config();

const prod = process.argv[2] === "production";
const dir = "./";

/** Paths for final file */
/** PF2E */
const pf2efileProd = `${dir}/Basic-Pathfinder-2e-Layout.css`;
const pf2efileDev = `${dir}/Basic-Pathfinder-2e-Layout-DEV.css`;
const isProd = process.argv[2] === "production";
// The systems that will be built. By default and in prod, build all. The values here correspond to the
// keys of the systemConfig object below.
const systems = (isProd || !process.argv[2]) ? ["pf2e", "bnb"] : [process.argv[2]];
// The output file. Ignored in production.
const devFile = process.argv[3];

const buildPF2E = async () => {
const context = await esbuild.build({
/** Entry point should be where everything is imported into. */
// The specific system config set here will overwrite the default config entries
// set below.
const systemConfig = {
// PF2E
pf2e: {
// Entry point should be where everything is imported into.
entryPoints: ["pf2e-index.scss"],
logLevel: "info",
outfile: prod ? pf2efileProd : pf2efileDev,
// minify: true,
plugins: [
sassPlugin({
cache: true,
charset: false,
alertColor: true,
alertAscii: true,
}),
time()
]
});

// Enable watch mode
if (!prod) {
await context.rebuild();
await context.watch();
// Path for final file
outfile: isProd ? `${dir}/Basic-Pathfinder-2e-Layout.css` : (devFile || `${dir}/Basic-Pathfinder-2e-Layout-DEV.css`),
},
// BNB Bestiary
bnb: {
minify: true,
// Entry point should be where everything is imported into.
entryPoints: ["bnb-index.scss"],
// Path for final file
outfile: isProd ? `${dir}/BnB-Layout.css` : (devFile || `${dir}/BnB-Layout-DEV.css`),
}
};

/** BNB Bestiary */
const bnbfileProd = `${dir}/BnB-Layout.css`;
const bnbfileDev = `${dir}/BnB-Layout-DEV.css`;
}

const buildBNB = async () => {
const context = await esbuild.build({
/** Entry point should be where everything is imported into. */
entryPoints: ["bnb-index.scss"],
async function build(systemConfig) {
const config = {
logLevel: "info",
outfile: prod ? bnbfileProd : bnbfileDev,
minify: true,
plugins: [
sassPlugin({
cache: true,
Expand All @@ -65,16 +67,20 @@ const buildBNB = async () => {
alertAscii: true,
}),
time()
]
});
],
...systemConfig
};

// Enable watch mode
if (!prod) {
if (isProd) {
await esbuild.build(config);
} else {
const context = await esbuild.context(config)
await context.rebuild();
await context.watch();
}
};
}

// Call the build functions
buildPF2E().catch(() => process.exit(1));
buildBNB().catch(() => process.exit(1));
// Build the files
for (var system of systems) {
build(systemConfig[system]).catch(() => process.exit(1))
}
2 changes: 2 additions & 0 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,8 @@
"version": "1.5.0",
"scripts": {
"dev": "node ./esbuild.config.mjs",
"dev-pf2e": "node ./esbuild.config.mjs pf2e",
"dev-bnb": "node ./esbuild.config.mjs bnb",
"build": "node ./esbuild.config.mjs production"
},
"devDependencies": {
Expand Down
1 change: 1 addition & 0 deletions pf2e/components/_statblock-types.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
$names: (
"basic-pathfinder-2e-layout",
"experimental-pathfinder-2e-layout",
"pathfinder-2e-action-layout",
"pathfinder-2e-hazard-layout",
"pathfinder-2e-influence-layout",
Expand Down
17 changes: 13 additions & 4 deletions pf2e/components/font-styling.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,12 +14,17 @@ $statblock-ul-margin: 0 0.5em;

@each $block_name in statblocks.$names {
.statblock.#{$block_name} {

a,
a:-webkit-any-link,
a.internal-link {
color: $statblock-font-color-blue;
font-weight: var(--statblock-property-name-font-weight);
text-decoration: none;
@if $block_name != "experimental-pathfinder-2e-layout" {
font-weight: var(--statblock-property-name-font-weight);
text-decoration: none;
} @else {
text-decoration: underline;
}
}

b,
Expand All @@ -33,8 +38,12 @@ $statblock-ul-margin: 0 0.5em;
em,
.cm-em {
font-style: italic;
color: $statblock-font-color-purple;
font-weight: 500;

/* Don't override the weight and color for italics within the statblock name */
:not(.property-name) & {
color: $statblock-font-color-purple;
font-weight: 500;
}
}

ul {
Expand Down
10 changes: 10 additions & 0 deletions pf2e/components/property-and-line.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,5 +23,15 @@
.property {
line-height: var(--statblock-property-line-height);
}

// Override the em color and weight set in font-styling
.property-name strong > em {
color: var(--active-traits-name-font-color);
font-weight: var(--statblock-traits-name-font-weight);
}
}
}

.statblock.experimental-pathfinder-2e-layout .property-name {
margin-right: 0;
}
79 changes: 61 additions & 18 deletions pf2e/components/statblock-content.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,47 @@ $statblock-content-margin: 0.5em 2px;
padding: $statblock-content-padding;
gap: 1rem;

// Experimental Layout Specific
@if $block_name == "experimental-pathfinder-2e-layout" {
.statblock-item-container.statblock-trait-prop .property.attacks > .property-name {
font-weight: normal;
font-style: normal;
}

// Style .oneline containers to show all props inline separated by semicolons.
.inline-container.oneline {
display: block;

*:not(.dice-roller) {
display: inline;
}

& > .statblock-inline-item:not(:first-child) .property-name {
margin-right: 0;
&::before {
content: "; ";
font-weight: normal;
}
}
}

// These containers denote that all props except the first are just notes and
// should be displayed inline, but shouldn't have property names
.inline-container.withnote {
* {
display: inline;
}

& > .statblock-inline-item:not(:first-child) .property-name {
display: none;
}
}

// Make callouts within statblocks visible.
.callout {
mix-blend-mode: normal;
}
}

.statblock-detached {
position: absolute;
Expand Down Expand Up @@ -92,24 +133,26 @@ $statblock-content-margin: 0.5em 2px;
margin-top: 0;
}

& > .statblock-item-inline:has(.rare_01,
.rare_02,
.rare_03,
.rare_04,
.alignment,
.size,
.xp,
.kingdom_xp,
.trait_01,
.trait_02,
.trait_03,
.trait_04,
.trait_05,
.trait_06,
.trait_07) {
row-gap: var(--statblock-traits-gap);

margin-bottom: $statblock-content-container-spacing * 2;
@if $block_name != "experimental-pathfinder-2e-layout" {
& > .statblock-item-inline:has(.rare_01,
.rare_02,
.rare_03,
.rare_04,
.alignment,
.size,
.xp,
.kingdom_xp,
.trait_01,
.trait_02,
.trait_03,
.trait_04,
.trait_05,
.trait_06,
.trait_07) {
row-gap: var(--statblock-traits-gap);

margin-bottom: $statblock-content-container-spacing * 2;
}
}

/* Hazard Block Specific */
Expand Down
Loading