work on character sheet and styles

i18n/en.yaml

@@ -1,3 +1,9 @@
+JCOM.actor.attribute.cunning: Cunning
+JCOM.actor.attribute.daring: Daring
+JCOM.actor.attribute.empathy: Empathy
+JCOM.actor.attribute.might: Might
+JCOM.actor.attribute.passion: Passion
+JCOM.actor.attribute.reason: Reason
 JCOM.actor.name.placeholder: Actor Name
 JCOM.settings.debugEnabled.hint: Enable or Disable additional debug logging
 JCOM.settings.debugEnabled.name: Enable/Disable Debug

scss/jcom.scss

@@ -2,3 +2,4 @@
 @use "abstracts" as *;
 
 @import url("https://fonts.googleapis.com/css?family=Playfair+Display");
+@import 'mixins', 'ui';

scss/sheets/_index.scss

@@ -1 +1,3 @@
-@forward "shared";
+@import
+	"shared",
+	"actors/attributes";

scss/sheets/_shared.scss

@@ -62,6 +62,7 @@
 	.actor {
 		&__body {
 			display: grid;
+			margin: 8px;
 		}
 
 		&__grid {

scss/sheets/actors/_attributes.scss

@@ -0,0 +1,10 @@
+.attribute__grid {
+	display: grid;
+	grid-template-columns: 2fr 2fr 1fr 1fr;
+	border: 2px;
+}
+
+.attribute__parent {
+	display: grid;
+	grid-row: span 5;
+}

scss/ui/_grids.scss

@@ -0,0 +1,18 @@
+$columns: 6;
+
+%grid-styles {
+	@include p-reset;
+	display: grid;
+	column-gap: 4px;
+}
+
+@mixin grid-x-columns {
+	@for $i from 1 through $columns {
+		.grid-#{$i}-columns {
+			@extend %grid-styles;
+			grid-template-columns: repeat(#{$i}, 1fr);
+		}
+	}
+}
+
+@include grid-x-columns;

scss/ui/_index.scss

@@ -0,0 +1 @@
+@import 'grids';

system/jcom.mjs

@@ -1,3 +1,5 @@
 import {init} from "./src/hooks/init.mjs";
+import {setup} from "./src/hooks/setup.mjs";
 
 Hooks.once("init", init);
+Hooks.once("setup", setup);

system/src/constants.mjs

@@ -1,3 +1,12 @@
 export const SYSTEM_ID = "jcom";
 export const SYSTEM_NAME = "John Carter of Mars";
 export const SYSTEM = {};
+
+SYSTEM.ATTRIBUTES = {
+	cunning: "JCOM.actor.attribute.cunning",
+	daring: "JCOM.actor.attribute.daring",
+	empathy: "JCOM.actor.attribute.empathy",
+	might: "JCOM.actor.attribute.might",
+	passion: "JCOM.actor.attribute.passion",
+	reason: "JCOM.actor.attribute.reason",
+};

system/src/handlebars.mjs

@@ -0,0 +1,47 @@
+export default function registerHandlebarsHelpers() {
+
+	Handlebars.registerHelper("ifCond", function(v1, operator, v2, options) {
+		switch (operator) {
+			case "==":
+				return v1 === v2 ? options.fn(this) : options.inverse(this);
+			case "===":
+				return v1 === v2 ? options.fn(this) : options.inverse(this);
+			case "!=":
+				return v1 !== v2 ? options.fn(this) : options.inverse(this);
+			case "!==":
+				return v1 !== v2 ? options.fn(this) : options.inverse(this);
+			case "<":
+				return v1 < v2 ? options.fn(this) : options.inverse(this);
+			case "<=":
+				return v1 <= v2 ? options.fn(this) : options.inverse(this);
+			case ">":
+				return v1 > v2 ? options.fn(this) : options.inverse(this);
+			case ">=":
+				return v1 >= v2 ? options.fn(this) : options.inverse(this);
+			case "&&":
+				return v1 && v2 ? options.fn(this) : options.inverse(this);
+			case "||":
+				return v1 || v2 ? options.fn(this) : options.inverse(this);
+			default:
+				return options.inverse(this);
+		}
+	});
+
+	Handlebars.registerHelper("ifEq", function(arg1, arg2, options) {
+		return arg1 === arg2 ? options.fn(this) : options.inverse(this);
+	});
+
+	Handlebars.registerHelper("ifNeq", function(arg1, arg2, options) {
+		return arg1 !== arg2 ? options.fn(this) : options.inverse(this);
+	});
+
+	Handlebars.registerHelper("ifObjIndex", function(obj, index, options) {
+		return obj[index] ? options.fn(this) : options.inverse(this);
+	});
+
+	Handlebars.registerHelper("joinStrings", value => {
+		value = value ? value : [];
+		return value.join(", ");
+	});
+
+}

system/src/hooks/init.mjs

@@ -8,7 +8,9 @@ import * as jcomSheets from "../sheets/_module.mjs";
 
 import Logger from "../utils/Logger.mjs";
 
+import loadTemplates from "../templates.mjs";
 import registerSystemSettings from "../settings.mjs";
+import registerHandlebarsHelpers from "../handlebars.mjs";
 
 export function init() {
 	console.log(`${SYSTEM_NAME} | Initializing System`);
@@ -27,6 +29,9 @@ export function init() {
 	registerDocumentSheets();
 	registerDocumentClasses();
 	registerSystemSettings();
+	registerHandlebarsHelpers();
+
+	loadTemplates();
 }
 
 function registerDataModels() {

system/src/hooks/setup.mjs

@@ -0,0 +1,19 @@
+export function setup() {
+	jcom.logger.log("Setup Hook");
+
+	// Localize all the strings in the game config in advance
+	//
+	for (const obj in jcom.config) {
+		if ({}.hasOwnProperty.call(jcom.config, obj)) {
+			for (const el in jcom.config[obj]) {
+				if ({}.hasOwnProperty.call(jcom.config[obj], el)) {
+					if (typeof jcom.config[obj][el] === "string") {
+						jcom.config[obj][el] = game.i18n.localize(
+							jcom.config[obj][el]
+						);
+					}
+				}
+			}
+		}
+	}
+}

system/src/sheets/actors/JcomAdventurerSheet.mjs

@@ -13,6 +13,7 @@ export default class JcomAventurerSheet extends JcomActorBaseSheet {
 	/** @override */
 	async getData() {
 		const context = await super.getData();
+		context.CONFIG = CONFIG.SYSTEM;
 		return context;
 	}
 

system/src/templates.mjs

@@ -0,0 +1,16 @@
+export default function() {
+	const partials = [
+		"systems/jcom/templates/actors/adventurer/abilities.hbs",
+	];
+
+	const paths = {};
+	for (const path of partials) {
+		const [key] = path.split("/").slice(3).join("/").split(".");
+
+		jcom.logger.debug(`Registering template "${key}" at path "${path}"`);
+
+		paths[key] = path;
+	}
+
+	return loadTemplates(paths);
+}

system/templates/actors/adventurer.hbs

@@ -20,6 +20,8 @@
 				/>
 			</div>
 		</div>
-		<div class="actor__body"></div>
+		<div class="actor__body">
+			{{> actors/adventurer/abilities }}
+		</div>
 	</div>
 </form>

system/templates/actors/adventurer/abilities.hbs

@@ -0,0 +1,19 @@
+{{#each CONFIG.ATTRIBUTES as |attr|}}
+	<div class="grid-2-columns" style="width: 140px; height: 90px; align-items: center;">
+		<div class="grid-1-columns">
+			<div style="background: #7c1c27; color: white; height: min-content;">
+				{{attr}}
+			</div>
+			<div style="background: #d5ba99; height:max-content;">
+				4
+			</div>
+		</div>
+		<div>
+			{{#each ../CONFIG.ATTRIBUTES as |linkedAttr|}}
+				{{#ifNeq attr linkedAttr}}
+					<div>+ {{linkedAttr}}</div>
+				{{/ifNeq}}
+			{{/each}}
+		</div>
+	</div>
+{{/each}}