uberwald/l5rx-chiaroscuro
0
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Dialog picker 1st usable version

Browse Source
This commit is contained in:
Vlyan
2020-12-09 21:02:57 +01:00
parent 64975bedea
commit 7d8479dd10
3 changed files with 97 additions and 216 deletions
Download Patch File Download Diff File Expand all files Collapse all files

275
system/scripts/dice/dice-picker-dialog.js
View File

@@ -11,27 +11,33 @@ export class DicePickerDialog extends Application {
actor = {};
/**
* Skill data from actor
* Selected Skill data from actor
*/
skillData = {};
elementsList = [];
skillData = {
id: "",
value: 0,
cat: "",
name: "",
};
/**
* Assign the default options
* @override
*/
static get defaultOptions() {
const options = super.defaultOptions;
options.id = "dice-picker";
options.template = "systems/l5r5e/templates/dice/dice-picker-dialog.html";
options.width = 400;
return options;
return mergeObject(super.defaultOptions, {
id: "l5r5e-dice-picker-dialog",
classes: ["l5r5e", "dice-picker-dialog"],
template: "systems/l5r5e/templates/dice/dice-picker-dialog.html",
width: 360,
// height: 400,
// title: "L5R Dice Roller",
});
}
/**
* Create dialog
* @param options actor
* @param options actor, skillId
*/
constructor(options = null) {
super(options);
@@ -39,15 +45,10 @@ export class DicePickerDialog extends Application {
// Get Actor from: sheet, selected token, nothing
this.actor = options?.actor || canvas.tokens.controlled[0]?.actor.data || null;
if (!!this.actor && options?.skillId) {
this._loadSkillData(options?.skillId);
// Skill ?
if (!!this.actor && !!options?.skillId) {
this.setSkillData(options.skillId);
}
this.elementsList = ["air", "earth", "fire", "water", "void"].map((e) => {
return { element: e, label: game.i18n.localize(`L5r5e.Rings.${e.capitalize()}`) };
});
console.log("DicePickerDialog.constructor", options, this);
}
/**
@@ -65,8 +66,10 @@ export class DicePickerDialog extends Application {
*/
getData(options = null) {
return {
elementsList: this.elementsList,
dicesList: [1, 2, 3, 4, 5, 6],
elementsList: this._getElements(),
dicesList: [0, 1, 2, 3, 4, 5, 6],
skillData: this.skillData,
actor: this.actor,
};
}
@@ -77,181 +80,96 @@ export class DicePickerDialog extends Application {
* @returns {Application}
*/
render(force, options) {
console.log("DicePickerDialog.render !", force, options);
options = {
...options,
};
if (force === undefined) {
force = true;
}
options = {};
return super.render(force, options);
}
//
// /**
// * Display dialog for rolling dices
// */
// async show(params) {
// const unqId = randomID();
//
//
// // Dialog Template
// let content = await renderTemplate("systems/l5r5e/templates/dice/dice-picker-dialog.html", {
// id: unqId,
// elementsList: ["air", "earth", "fire", "water", "void"].map(e => {
// return { element: e, label: game.i18n.localize(`L5r5e.Rings.${e.capitalize()}`) };
// }),
// dicesList: [1, 2, 3, 4, 5, 6],
// currentActor: currentActor
// });
//
// new Dialog({
// title: "L5R Dice Roller" + (currentActor ? " - " + currentActor.name : ""),
// content: content,
// buttons: {
// yes: {
// icon: "<i class='fas fa-check'></i>",
// label: "Roll !",
// callback: async (html) => {
// const approach = html.find("input[name=\"approach\"]:checked")[0].value || null;
// const ring = html.find("input[name=\"ring\"]:checked")[0].value || null;
// const skill = html.find("input[name=\"skill\"]:checked")[0].value || null;
//
// if (!approach || !skill || !ring || (skill < 1 && ring < 1)) {
// return false;
// }
//
// // TODO skill
// await new RollL5r5e(
// `${ring}dr[${approach}]`
// + ` + ${skill}ds[unknown skill]`
// ).roll().toMessage();
//
// // const message = await roll.toMessage();
// //
// // // const message = game.specialDiceRoller.l5r.rollFormula(
// // // "r".repeat(ring) + "s".repeat(skill)
// // // , `${game.i18n.localize("L5R.Rings." + approach)}` + (!!skillData?.name ? ` (${skillData?.name})` : "")
// // // );
// //
// // ChatMessage.create({
// // flags: {},
// // // isRoll: true,
// // user: game.user._id,
// // speaker: ChatMessage.getSpeaker(),
// // content: message,
// // }, currentActor ?? {});
//
// }
// },
// no: {
// icon: "<i class='fas fa-times'></i>",
// label: "Cancel"
// }
// },
// default: "no"
// }).render(true);
// }
/**
* Listen to html elements
* @override
*/
activateListeners(html) {
console.log("activateListeners", html);
super.activateListeners(html);
// on change approaches
html.find('input[name="approach"]:checked').on("click", async (event) => {
html.find('input[name="approach"]').on("click", async (event) => {
$("#ring_" + event.target.dataset.dice).prop("checked", true);
});
// Roll button
html.find('button[name="roll"]').on("click", async (event) => {
event.preventDefault();
event.stopPropagation();
console.log("approach clicked !");
const approach = html.find('input[name="approach"]:checked')[0].value || null;
const ring = html.find('input[name="ring"]:checked')[0].value || null;
const skill = html.find('input[name="skill"]:checked')[0].value || null;
this.close();
if (!approach || !skill || !ring || (skill < 1 && ring < 1)) {
return false;
}
await new RollL5r5e(
`${ring}dr[${approach}] + ${skill}ds` + (this.skillData.id ? `[${this.skillData.id}]` : "")
)
.roll()
.toMessage();
await this.close();
});
// Default Selected
html.find("#approach_air").trigger("click");
html.find("#skill_" + this.skillData.value).trigger("click");
}
/**
* Load skill's required data from actor and skillId
*
* @param skillId
* @private
*/
_loadSkillData(skillId) {
if (!this.actor || typeof skillId == "undefined") {
setSkillData(skillId) {
if (!skillId) {
return;
}
this.skillData = {
const skillData = {
id: skillId.trim(),
dices: 0,
value: 0,
cat: "",
name: "",
};
this.skillData.cat = Object.keys(this.actor.data.skills).find(
(e) => !!this.actor.data.skills[e][this.skillData.id]
);
this.skillData.dices = this.actor.data.skills[this.skillData.cat][this.skillData.id].value ?? 0;
this.skillData.name = game.i18n.localize("L5r5e.Skills." + this.skillData.cat + "." + this.skillData.id);
if (!this.actor) {
return;
}
skillData.cat = Object.keys(this.actor.data.skills).find((e) => !!this.actor.data.skills[e][skillData.id]);
skillData.value = this.actor.data.skills[skillData.cat][skillData.id].value ?? 0;
skillData.name = game.i18n.localize("L5r5e.Skills." + skillData.cat + "." + skillData.id);
return skillData;
}
// static changeElementsByToken(sElmt) {
// if (DicePickerDialog.currentActor?.data) {
// $("#ring_dices_" + DicePickerDialog.currentActor.data.rings[sElmt]).prop("checked", true);
// }
// }
/**
* Helper for dices radios
* Load elements (id, label, value)
* @private
*/
// static fctRadioDice(params) {
// let defaults = { name: "radio", min: 0, max: 6, selected: null };
// params = { ...defaults, ...params };
// if (params.selected === null) {
// params.selected = params.min;
// }
// let s = "";
// let id = "";
// for (let idx = 0; idx <= params.max; idx++) {
// id = `${params.name.toLowerCase()}_${idx}`;
// s += ` <input type="radio" id="${id}" name="${params.name}" value="${idx}" ${idx === params.selected ? "checked" : ""} ${idx < params.min ? "disabled" : ""}>`;
// s += ` <label for="${id}">${idx}</label>`;
// }
// return s;
// }
_getElements() {
return ["air", "earth", "fire", "water", "void"].map((e) => {
return {
id: e,
label: game.i18n.localize(`L5r5e.Rings.${e.capitalize()}`),
value: this.actor ? this.actor.data.rings[e] : 0,
};
});
}
/**
* Helper for element radios
*/
// static fctRadioElements(name) {
// let s = "";
// let id = "";
// ["air", "earth", "fire", "water", "void"].forEach((element, idx) => {
// id = `${name.toLowerCase()}_${element}`;
// s += ` <input type="radio" id="${id}" name="${name}" value="${element}" ${idx === 0 ? "checked" : ""} onclick="DicePickerDialog.changeElementsByToken('${element}')">`;
// s += ` <label for="${id}"><i class="i_${element} ${element}" title="${game.i18n.localize("L5R.Rings." + element)}"></i></label>`;
// });
// return s;
// }
// /** @override */
// static get defaultOptions() {
//
// console.log('L5R.DicePickerDialog.defaultOptions', this); // TODO tmp
//
// return mergeObject(super.defaultOptions, {
// id: "l5r5e-dice-picker-dialog",
// classes: ["l5r5e", "dice-picker-dialog"],
// title: "Skill List Importer",
// width: 400,
// height: 400,
// template: "systems/l5r5e/templates/dice/dice-picker-dialog.html"
// });
// }
//
// /**
// * Return a reference to the target attribute
// * @type {String}
@@ -261,49 +179,4 @@ export class DicePickerDialog extends Application {
//
// return this.options.name;
// }
//
// /** @override */
// async getData() {
//
// console.log('L5R.DicePickerDialog.getData', this); // TODO tmp
//
// // $(".import-progress").addClass("import-hidden");
//
// // if (!CONFIG?.temporary) {
// // CONFIG.temporary = {};
// // }
//
// return {
// cssClass: "dice-picker-dialog"
// };
// }
//
// /** @override */
// activateListeners(html) {
// console.log('L5R.DicePickerDialog.activateListeners', this); // TODO tmp
//
// super.activateListeners(html);
//
// html.find(".reset-button").on("click", async (event) => {
// event.preventDefault();
// event.stopPropagation();
// this.close();
// });
//
//
// html.find(".dialog-button").on("click", async (event) => {
// event.preventDefault();
// event.stopPropagation();
//
// const form = html[0];
// if (!form.data.files.length) return ui.notifications.error("You did not upload a data file!");
//
// // let currentSkillList = await JSON.parse(game.settings.get("starwarsffg", "arraySkillList"));
// // const newSkillList = JSON.parse(text);
// // const newMasterSkillListData = JSON.stringify(currentSkillList);
// // window.location.reload();
//
// this.close();
// });
// }
}

2
system/templates/dice/chat-roll.html
View File

@@ -6,7 +6,7 @@
{{#if l5r5e.stance}}
<div class="l5r5e dice-stance">
<!-- TODO localization -->
{{l5r5e.skillId}} (<i class="i_{{l5r5e.stance}}"></i>)
<i class="i_{{l5r5e.stance}}"></i> {{l5r5e.skillId}}
</div>
{{/if}}

36
system/templates/dice/dice-picker-dialog.html
View File

@@ -1,43 +1,51 @@
<div class="dice-picker-dialog">
{{json this}}
<form class="noflex" autocomplete="off">
<div class="form-group">
<label>Approaches:</label>
<label>{{localize "L5r5e.Approaches"}}:</label>
<div class="form-fields">
{{#each elementsList}}
<input type="radio" id="{{this.element}}" name="approach" value="{{this.element}}">
<label for="{{this.element}}">
<i class="i_{{this.element}} {{this.element}}" title="{{this.label}}"></i>
<input type="radio" id="approach_{{this.id}}" name="approach" value="{{this.id}}" data-dice="{{this.value}}">
<label for="approach_{{this.id}}">
<i class="i_{{this.id}} {{this.id}}" title="{{this.label}}"></i>
</label>
{{/each}}
</div>
</div>
<hr>
<div class="form-group">
<label><i class="d6"></i> Rings:</label>
<label><i class="d6"></i> {{localize "L5r5e.Rings.Title"}}:</label>
<div class="form-fields">
{{#each dicesList}}
<input type="radio" id="{{this}}" name="ring" value="{{this}}">
<label for="{{this}}">
<input type="radio" id="ring_{{this}}" name="ring" value="{{this}}">
<label for="ring_{{this}}">
{{this}}
</label>
{{/each}}
</div>
</div>
<hr>
<div class="form-group">
<label><i class="d12"></i> Skill:</label>
<label><i class="d12"></i> {{localize "L5r5e.Skills.Title"}}: {{skillData.name}}</label>
<div class="form-fields">
{{#each dicesList}}
<input type="radio" id="{{this}}" name="skill" value="{{this}}">
<label for="{{this}}">
<input type="radio" id="skill_{{this}}" name="skill" value="{{this}}">
<label for="skill_{{this}}">
{{this}}
</label>
{{/each}}
</div>
</div>
{{#if skillData.name}}
<hr>
<div class="form-group">
<label>{{skillData.name}}</label>
</div>
{{/if}}
<hr>
<div class="form-group">
<button name="roll">Roll <i class='fas fa-arrow-circle-right'></i></button>
</div>
</form>
<!--<script>VlyL5rToolbox.changeElementsByToken('air');</script>-->
</div>