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

dialog test v2

Browse Source
This commit is contained in:
Vlyan
2020-12-11 23:31:34 +01:00
parent 8f59902130
commit 139e5f5640
5 changed files with 279 additions and 98 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -5,21 +5,33 @@
import { RollL5r5e } from "./roll.js";
export class DicePickerDialog extends Application {
static stances = ["earth", "air", "water", "fire", "void"];
/**
* Current Actor
*/
actor = null;
_actor = null;
/**
* Selected Skill data from actor
* Preset ring (attribute / approach)
*/
skillData = {
_ringId = null;
/**
* Preset Skill (and data from actor if actor provided)
*/
_skillData = {
id: "",
value: 0,
cat: "",
name: "",
};
/**
* Difficulty
*/
_difficulty = null;
/**
* Assign the default options
* @override
@@ -29,31 +41,100 @@ export class DicePickerDialog extends Application {
id: "l5r5e-dice-picker-dialog",
classes: ["l5r5e", "dice-picker-dialog"],
template: "systems/l5r5e/templates/dice/dice-picker-dialog.html",
width: 480,
width: 650,
// height: 400,
// title: "L5R Dice Roller",
actor: null,
ringId: null,
skillId: "",
difficulty: null,
});
}
/**
* Create dialog
* @param options actor, skillId
*
* ex: new game.l5r5e.DicePickerDialog({skillId: 'aesthetics', ringId: 'fire', actor: game.user.character}).render();
*
* @param options actor, ringId, skillId, difficulty
*/
constructor(options = null) {
super(options);
// Get Actor from: options, 1st selected token, selected character
const actor = options?.actor || canvas.tokens.controlled[0]?.actor || game.user.character || null;
if (actor instanceof Actor && actor.owner) {
this.actor = actor;
// Try to get Actor from: options, first selected token or player's selected character
[options?.actor, canvas.tokens.controlled[0]?.actor, game.user.character].forEach((actor) => {
if (!this._actor) {
this.actor = actor;
}
});
// Ring ?
if (options?.ringId) {
this.ringId = options.ringId;
}
// Skill ?
if (options?.skillId) {
this.setSkillData(options.skillId);
this.skillId = options.skillId;
}
// Difficulty
if (options?.difficulty) {
this.difficulty = options.difficulty;
}
}
/**
* Set actor
* @param actor
*/
set actor(actor) {
this._actor = actor instanceof Actor && actor.owner ? actor : null;
}
/**
* Set ring preset
* @param ringId
*/
set ringId(ringId) {
this._ringId = DicePickerDialog.stances.includes(ringId) || null;
}
/**
* Set and load skill's required data from actor and skillId
* @param skillId
*/
set skillId(skillId) {
if (!skillId) {
return;
}
this._skillData = {
id: skillId.toLowerCase().trim(),
value: 0,
cat: "",
name: "",
};
const cat = RollL5r5e.getCategoryForSkillId(skillId);
if (!cat) {
return;
}
this._skillData.cat = cat;
this._skillData.name = game.i18n.localize("l5r5e.skills." + cat + "." + this._skillData.id);
this._skillData.value = this._actor?.data?.data?.skills[cat]?.[this._skillData.id].value || 0;
}
/**
* Set Difficulty level
* @param difficulty
*/
set difficulty(difficulty) {
difficulty = parseInt(difficulty) || null;
if (difficulty < 0) {
difficulty = null;
}
this._difficulty = difficulty;
}
/**
@@ -61,7 +142,7 @@ export class DicePickerDialog extends Application {
* @type {String}
*/
get title() {
return `L5R Dice Roller` + (this.actor ? " - " + this.actor.data.name : "");
return `L5R Dice Roller` + (this._actor ? " - " + this._actor.data.name : "");
}
/**
@@ -73,8 +154,9 @@ export class DicePickerDialog extends Application {
return {
elementsList: this._getElements(),
dicesList: [0, 1, 2, 3, 4, 5, 6],
skillData: this.skillData,
actor: this.actor,
skillData: this._skillData,
actor: this._actor,
difficulty: this._difficulty,
};
}
@@ -105,7 +187,29 @@ export class DicePickerDialog extends Application {
// on change approaches
html.find('input[name="approach"]').on("click", async (event) => {
$("#ring_" + event.target.dataset.dice).prop("checked", true);
$("#ring_value").val(event.target.value);
$(".ring-selection").removeClass("ring-selected");
$("." + event.target.dataset.ringid).addClass("ring-selected");
});
// Ring Add button
html.find("#ring_add").on("click", async (event) => {
this._quantityChange(event, "#ring_value", false);
});
// Ring Subtract button
html.find("#ring_sub").on("click", async (event) => {
this._quantityChange(event, "#ring_value", true);
});
// Skill Add button
html.find("#skill_add").on("click", async (event) => {
this._quantityChange(event, "#skill_value", false);
});
// Skill Subtract button
html.find("#skill_sub").on("click", async (event) => {
this._quantityChange(event, "#skill_value", true);
});
// Roll button
@@ -113,9 +217,9 @@ export class DicePickerDialog extends Application {
event.preventDefault();
event.stopPropagation();
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;
const approach = $(html.find(".ring-selection.ring-selected > input")[0]).data("ringid") || null;
const ring = html.find("#ring_value")[0].value || null;
const skill = html.find("#skill_value")[0].value || null;
if (!approach || !skill || !ring || (skill < 1 && ring < 1)) {
return false;
@@ -132,8 +236,8 @@ export class DicePickerDialog extends Application {
const roll = await new RollL5r5e(formula.join("+"));
roll.l5r5e.stance = approach;
roll.l5r5e.skillId = this.skillData.id;
roll.actor = this.actor;
roll.l5r5e.skillId = this._skillData.id;
roll.actor = this._actor;
await roll.roll();
await roll.toMessage();
@@ -142,39 +246,28 @@ export class DicePickerDialog extends Application {
// Check if a stance is selected
let selectedStance = "air";
if (this.actor) {
["air", "earth", "fire", "water", "void"].forEach((e) => {
if (this.actor.data.data?.stances?.[e]?.isSelected?.value) {
if (this._actor) {
DicePickerDialog.stances.forEach((e) => {
if (this._actor.data.data?.stances?.[e]?.isSelected?.value) {
selectedStance = e;
}
});
}
html.find(`#approach_${selectedStance}`).trigger("click");
html.find("#skill_" + this.skillData.value).trigger("click");
html.find(`.approach_${selectedStance}`).first().trigger("click");
html.find("#skill_value").val(this._skillData.value);
}
/**
* Load skill's required data from actor and skillId
*/
setSkillData(skillId) {
if (!skillId) {
_quantityChange(event, elmtSelector, isSubstract) {
event.preventDefault();
event.stopPropagation();
const elmt = $(elmtSelector);
if (isSubstract) {
const val = parseInt(elmt.val()) - 1;
elmt.val(val >= 0 ? val : 0);
return;
}
this.skillData = {
id: skillId.toLowerCase().trim(),
value: 0,
cat: "",
name: "",
};
const cat = RollL5r5e.getCategoryForSkillId(skillId);
if (!cat) {
return;
}
this.skillData.cat = cat;
this.skillData.name = game.i18n.localize("l5r5e.skills." + cat + "." + this.skillData.id);
this.skillData.value = this.actor?.data?.data?.skills[cat]?.[this.skillData.id].value || 0;
const val = parseInt(elmt.val()) + 1;
elmt.val(val < 10 ? val : 9);
}
/**
@@ -182,11 +275,11 @@ export class DicePickerDialog extends Application {
* @private
*/
_getElements() {
return ["air", "earth", "fire", "water", "void"].map((e) => {
return DicePickerDialog.stances.map((e) => {
return {
id: e,
label: game.i18n.localize(`l5r5e.rings.${e}`),
value: this.actor?.data?.data?.rings?.[e] || 0,
value: this._actor?.data?.data?.rings?.[e] || 0,
};
});
}

2
system/scripts/dice/roll.js
View File

@@ -45,7 +45,7 @@ export class RollL5r5e extends Roll {
}
set actor(actor) {
this.l5r5e.actor = (actor instanceof Actor && actor.owner) || null;
this.l5r5e.actor = actor instanceof Actor && actor.owner ? actor : null;
}
/**

2
system/styles/l5r5e.css
View File

File diff suppressed because one or more lines are too long

70
system/styles/scss/dices.scss
View File

@@ -18,11 +18,73 @@
display: inline-block;
}
// Dice Picker
.dice-picker-dialog {
.profil {
float: left;
// Utility
* {
transition: none;
}
.dices {
float: right;
input[type="text"]:focus,
input[type="text"]:hover {
box-shadow: none !important;
border: none !important;
text-shadow: none !important;
}
img {
border: 0;
}
table {
.profil {
width: 200px;
}
.rings {
width: 240px;
}
.skill {
width: 200px;
}
}
// Approach choice
.ring-selection {
filter: contrast(10%);
&.ring-selected {
filter: drop-shadow(1px 1px 0 #151515);
//text-shadow: 1px 1px 0 #efefef;
}
}
.quantity {
font-size: xx-large;
}
.center {
text-align: center;
}
.third {
float: left;
width: 33.333333333%;
}
#ring_value {
width: 20px;
position: relative;
left: +34px;
top: -14px;
color: #f0f0e0;
background: none;
border: none;
font-size: large;
}
#skill_value {
width: 20px;
position: relative;
left: +34px;
top: -13px;
color: #0f0f0e;
background: none;
border: none;
font-size: large;
}
}

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

@@ -1,54 +1,80 @@
<div class="l5r5e dice-picker-dialog">
<div class="form-group l5r5e profil">
<img class="profile-img" src="{{#if actor.img}}{{actor.img}}{{/if}}{{^if actor.img}}icons/svg/mystery-man.svg{{/if}}" data-edit="img" height="100" width="100">
</div>
<form class="noflex l5r5e dices" autocomplete="off">
<div class="form-group">
<label>{{localize "l5r5e.approaches"}}:</label>
<div class="form-fields">
{{#each elementsList}}
<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> {{localize "l5r5e.rings.title"}}:</label>
<div class="form-fields">
{{#each dicesList}}
<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> {{localize "l5r5e.skills.title"}}:</label>
<div class="form-fields">
{{#each dicesList}}
<input type="radio" id="skill_{{this}}" name="skill" value="{{this}}">
<label for="skill_{{this}}">
{{this}}
</label>
{{/each}}
</div>
</div>
<table>
<tr>
<td class="profil center">
<img class="profile-img"
src="{{#if actor.img}}{{actor.img}}{{/if}}{{^if actor.img}}icons/svg/mystery-man.svg{{/if}}"
data-edit="img"
height="200"
width="200"
alt="{{#if actor.name}}{{actor.name}}{{/if}}{{^if actor.name}}mystery-man{{/if}}"
>
</td>
<td class="rings center">
<ul class="rings">
{{#each elementsList}}
<li id="{{this.id}}">
<label class="attribute-label {{this.id}} centered-input ring-selection">
<i class="i_{{this.id}}"></i>
<strong>{{this.label}}</strong>
<input class="centered-input approach_{{this.id}}"
type="text"
name="approach"
data-ringid="{{this.id}}"
value="{{this.value}}"
readonly="readonly"
/>
</label>
</li>
{{/each}}
</ul>
</td>
<td class="skill center">
{{#if skillData.name}}
<label>{{skillData.name}} </label>
{{skillData.value}}
{{/if}}
</td>
</tr>
<tr>
<td class="center">
<!-- TODO-->
ND : {{difficulty}}
</td>
<td class="center">
<div class="third">
<i id="ring_sub" class="quantity fa fa-minus-square"></i>
</div>
<div class="third">
<input id="ring_value" class="centered-input" type="text" name="ring" value="0"
readonly="readonly">
<img src="systems/l5r5e/assets/dices/default/ring_blank.png" alt="1">
</div>
<div class="third">
<i id="ring_add" class="quantity fa fa-plus-square"></i>
</div>
</td>
<td class="center">
<div class="third">
<i id="skill_sub" class="quantity fa fa-minus-square"></i>
</div>
<div class="third">
<input id="skill_value" class="centered-input" type="text" name="skill"
value="{{skillData.value}}" readonly="readonly">
<img src="systems/l5r5e/assets/dices/default/skill_blank.png" alt="1">
</div>
<div class="third">
<i id="skill_add" class="quantity fa fa-plus-square"></i>
</div>
</td>
</tr>
</table>
{{#if skillData.name}}
<hr>
<div class="form-group">
<label><i class="d12"></i> {{skillData.value}} : {{skillData.name}} </label>
</div>
{{/if}}
<hr>
<div class="form-group">
<button name="roll">Roll <i class='fas fa-arrow-circle-right'></i></button>
</div>