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

working on dice picker v2

Browse Source
This commit is contained in:
Vlyan
2020-12-12 19:58:17 +01:00
parent 91151817cc
commit a41f074cb8
7 changed files with 233 additions and 51 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -30,7 +30,10 @@ export class DicePickerDialog extends Application {
/**
* Difficulty
*/
_difficulty = null;
_difficulty = {
difficulty: 2,
isHidden: false,
};
/**
* Assign the default options
@@ -43,11 +46,12 @@ export class DicePickerDialog extends Application {
template: "systems/l5r5e/templates/dice/dice-picker-dialog.html",
title: "L5R Dice Roller",
width: 660,
height: 390,
height: 460,
actor: null,
ringId: null,
skillId: "",
difficulty: null,
difficulty: 2,
difficultyHidden: false,
});
}
@@ -56,7 +60,7 @@ export class DicePickerDialog extends Application {
*
* ex: new game.l5r5e.DicePickerDialog({skillId: 'aesthetics', ringId: 'fire', actor: game.user.character}).render();
*
* @param options actor, ringId, skillId, difficulty
* @param options actor, ringId, skillId, difficulty, difficultyHidden
*/
constructor(options = null) {
super(options);
@@ -82,6 +86,11 @@ export class DicePickerDialog extends Application {
if (options?.difficulty) {
this.difficulty = options.difficulty;
}
// difficultyHidden
if (options?.difficultyHidden) {
this.difficultyHidden = options.difficultyHidden;
}
}
/**
@@ -126,7 +135,7 @@ export class DicePickerDialog extends Application {
}
/**
* Set Difficulty level
* Set Difficulty level (default 2)
* @param difficulty
*/
set difficulty(difficulty) {
@@ -134,7 +143,15 @@ export class DicePickerDialog extends Application {
if (difficulty < 0) {
difficulty = null;
}
this._difficulty = difficulty;
this._difficulty.difficulty = difficulty;
}
/**
* Set if Difficulty is Hidden or not (default)
* @param isHidden
*/
set difficultyHidden(isHidden) {
this._difficulty.isHidden = !!isHidden;
}
/**
@@ -158,6 +175,7 @@ export class DicePickerDialog extends Application {
skillData: this._skillData,
actor: this._actor,
difficulty: this._difficulty,
canUseVoidPoint: !this._actor || this._actor.data.data.void_points.current > 0,
};
}
@@ -196,31 +214,71 @@ export class DicePickerDialog extends Application {
);
});
// ****************** DIFF ******************
// Difficulty - Add button
html.find("#diff_add").on("click", async (event) => {
event.preventDefault();
event.stopPropagation();
this._difficulty.difficulty = this._quantityChange("#diff_value", 1);
});
// Difficulty - Subtract button
html.find("#diff_sub").on("click", async (event) => {
event.preventDefault();
event.stopPropagation();
this._difficulty.difficulty = this._quantityChange("#diff_value", -1);
});
// Difficulty - hidden checkbox
html.find("#diff_hidden").on("click", async (event) => {
this._difficulty.isHidden = !this._difficulty.isHidden;
$("#difficulty_picker").toggle();
});
// ****************** RING ******************
// Ring - Add button
html.find("#ring_add").on("click", async (event) => {
this._quantityChange(event, "#ring_value", false);
event.preventDefault();
event.stopPropagation();
this._quantityChange("#ring_value", 1);
});
// Ring - Subtract button
html.find("#ring_sub").on("click", async (event) => {
this._quantityChange(event, "#ring_value", true);
event.preventDefault();
event.stopPropagation();
this._quantityChange("#ring_value", -1);
});
// Ring - Spend a Void point checkbox
html.find("#use_void_point").on("click", async (event) => {
this._quantityChange("#ring_value", event.target.checked ? 1 : -1);
html.find("#use_void_point").attr("checked", event.target.checked);
});
// ****************** SKILL ******************
// Skill - Add button
html.find("#skill_add").on("click", async (event) => {
this._quantityChange(event, "#skill_value", false);
event.preventDefault();
event.stopPropagation();
this._quantityChange("#skill_value", 1);
});
// Skill - Subtract button
html.find("#skill_sub").on("click", async (event) => {
this._quantityChange(event, "#skill_value", true);
event.preventDefault();
event.stopPropagation();
this._quantityChange("#skill_value", -1);
});
// Skill - Default Dice div
html.find("#skill_default_value").on("click", async (event) => {
event.preventDefault();
event.stopPropagation();
$("#skill_value").val(this._skillData.value);
});
// ****************** ROLL ******************
// Roll button
html.find('button[name="roll"]').on("click", async (event) => {
event.preventDefault();
@@ -242,38 +300,61 @@ export class DicePickerDialog extends Application {
formula.push(`${skill}ds`);
}
// TODO update actor stance ? good idea or not, choice-able ?
// this._actor.data.data.stance = approach;
// Update Actor
if (this._actor) {
// TODO update actor stance ? good idea or not, choice-able ?
// this._actor.data.data.stance = approach;
// If Void point is used, minus the actor
if ($("#use_void_point").attr("checked")) {
this._actor.data.data.void_points.current = Math.max(
this._actor.data.data.void_points.current - 1,
0
);
}
// If hidden add void 1pt
if (this._difficulty.isHidden) {
this._actor.data.data.void_points.current = Math.min(
this._actor.data.data.void_points.current + 1,
this._actor.data.data.void_points.max
);
}
}
// Let's roll !
const roll = await new RollL5r5e(formula.join("+"));
roll.actor = this._actor;
roll.l5r5e.stance = approach;
roll.l5r5e.skillId = this._skillData.id;
roll.actor = this._actor;
roll.l5r5e.summary.difficulty = this._difficulty.difficulty;
roll.l5r5e.summary.difficultyHidden = this._difficulty.isHidden;
await roll.roll();
await roll.toMessage();
await this.close();
});
// ****************** INIT ******************
// Select current actor's stance
html.find(`.approach_${this._actor ? this._actor.data.data.stance : "void"}`)
.first()
.trigger("click");
// Set skill point
html.find("#skill_value").val(this._skillData.value);
}
_quantityChange(event, elmtSelector, isSubstract) {
event.preventDefault();
event.stopPropagation();
/**
* Change quantity between 0-9 on the element, and return the new value
* @private
*/
_quantityChange(elmtSelector, add) {
const elmt = $(elmtSelector);
if (isSubstract) {
const val = parseInt(elmt.val()) - 1;
elmt.val(val >= 0 ? val : 0);
return;
}
const val = parseInt(elmt.val()) + 1;
elmt.val(val < 10 ? val : 9);
const value = Math.max(Math.min(parseInt(elmt.val()) + add, 9), 0);
elmt.val(value);
return value;
}
/**

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

@@ -23,6 +23,7 @@ export class RollL5r5e extends Roll {
},
summary: {
difficulty: 0,
difficultyHidden: false,
success: 0,
explosive: 0,
opportunity: 0,
@@ -215,10 +216,7 @@ export class RollL5r5e extends Roll {
l5r5e: isPrivate
? {}
: {
stance: this.l5r5e.stance,
skillName: skillName,
dicesTypes: this.l5r5e.dicesTypes,
summary: this.l5r5e.summary,
...this.l5r5e,
dices: this.dice.map((d) => {
return {
diceTypeL5r: d instanceof L5rBaseDie,

10
system/scripts/main-l5r5e.js
View File

@@ -66,16 +66,16 @@ Hooks.once("init", async function () {
return new Handlebars.SafeString(objects.map((e) => `<textarea>${JSON.stringify(e)}</textarea>`));
});
Handlebars.registerHelper("localizeSkillCategory", function (skillName) {
const key = "l5r5e.skills." + skillName.toLowerCase() + ".title";
return game.i18n.localize(key);
});
// Add props "checked" if a and b are equal ({{radioChecked a b}}
Handlebars.registerHelper("radioChecked", function (a, b) {
return a === b ? new Handlebars.SafeString('checked="checked"') : "";
});
Handlebars.registerHelper("localizeSkillCategory", function (skillName) {
const key = "l5r5e.skills." + skillName.toLowerCase() + ".title";
return game.i18n.localize(key);
});
Handlebars.registerHelper("localizeSkill", function (skillCategory, skillName) {
const key = "l5r5e.skills." + skillCategory.toLowerCase() + "." + skillName.toLowerCase();
return game.i18n.localize(key);

2
system/styles/l5r5e.css
View File

File diff suppressed because one or more lines are too long

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

@@ -18,6 +18,25 @@
display: inline-block;
}
.chat-profil {
text-align: center;
vertical-align: middle;
&-stance {
font-size: 40px;
position: relative;
top: 8px;
}
&-element {
flex-wrap: wrap;
flex-grow: 1;
&-skill {
flex-grow: 3;
}
}
}
// Dice Picker
.dice-picker-dialog {
// Utility
@@ -80,6 +99,11 @@
.dice-container {
position: relative;
text-align: center;
& > img {
height: 40px;
width: 40px;
}
}
.dice-value {
@@ -89,19 +113,19 @@
transform: translate(-50%, -50%);
}
.dice-ring {
width: 20px;
color: #f0f0e0;
background: none;
border: none;
font-size: large;
}
.dice-skill {
.input-dice {
width: 20px;
color: #0f0f0e;
background: none;
border: none;
font-size: large;
&-ring {
color: #f0f0e0;
}
&-skill {
color: #0f0f0e;
}
}
}

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

@@ -1,14 +1,37 @@
<div class="l5r5e dice-roll">
{{#if isPublicRoll }}
<div class="l5r5e dice-formula">{{formula}}</div>
{{#if l5r5e.stance}}
<div class="l5r5e dice-stance">
<i class="i_{{l5r5e.stance}}"></i> {{l5r5e.skillName}}
<div class="l5r5e profil">
<header class="part-header flexrow chat-profil">
<span class="chat-profil-element">
<img class="profile-img"
src="{{#if l5r5e.actor.img}}{{l5r5e.actor.img}}{{/if}}{{^if l5r5e.actor.img}}icons/svg/mystery-man.svg{{/if}}"
data-edit="img"
height="40"
width="40"
alt="{{#if l5r5e.actor.name}}{{l5r5e.actor.name}}{{/if}}{{^if l5r5e.actor.name}}mystery-man{{/if}}"
>
</span>
<span class="chat-profil-element">
<i class="chat-profil-stance i_{{l5r5e.stance}}" title="{{localizeRing l5r5e.stance}}"></i>
</span>
<span class="chat-profil-element-skill">
{{#if l5r5e.skillId}}{{localizeSkillId l5r5e.skillId}}{{/if}}
</span>
<span class="chat-profil-element">
{{#if l5r5e.summary.difficultyHidden}}ND cachée{{/if}}
{{^if l5r5e.summary.difficultyHidden}}ND {{l5r5e.summary.difficulty}}{{/if}}
</span>
</header>
</div>
{{/if}}
<div class="l5r5e dice-formula">{{formula}}</div>
<div class="l5r5e dice-result">
{{#if l5r5e.dicesTypes.l5r}}

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

@@ -1,5 +1,6 @@
<form class="l5r5e dice-picker-dialog" autocomplete="off">
<table>
<!-- First line-->
<tr>
<td class="profil center">
<img class="profile-img"
@@ -58,11 +59,43 @@
{{/if}}
</td>
</tr>
<!-- Second line-->
<tr>
<td>
<!-- TODO -->
ND : {{difficulty}}
{{localize "l5r5e.chatdices.difficulty"}}
</td>
<td>
{{localize "l5r5e.rings.title"}}
</td>
<td>
{{localize "l5r5e.skills.title"}}
</td>
</tr>
<!-- Third line-->
<tr>
<td>
<div id="difficulty_picker">
<div class="third">
<i id="diff_sub" class="quantity pointer-choice fa fa-minus-square"></i>
</div>
<div class="third">
<div class="dice-container">
<img src="systems/l5r5e/assets/dices/default/3d/blank.png" alt="1">
<div class="dice-value">
<input id="diff_value" class="input-dice" type="text" name="diff" value="{{difficulty.difficulty}}" readonly="readonly">
</div>
</div>
</div>
<div class="third">
<i id="diff_add" class="quantity pointer-choice fa fa-plus-square"></i>
</div>
</div>
</td>
<td>
<div class="third">
<i id="ring_sub" class="quantity pointer-choice fa fa-minus-square"></i>
@@ -72,7 +105,7 @@
<div class="dice-container">
<img src="systems/l5r5e/assets/dices/default/ring_blank.png" alt="1">
<div class="dice-value">
<input id="ring_value" class="dice-ring" type="text" name="ring" value="0" readonly="readonly">
<input id="ring_value" class="input-dice input-dice-ring" type="text" name="ring" value="0" readonly="readonly">
</div>
</div>
</div>
@@ -81,6 +114,7 @@
<i id="ring_add" class="quantity pointer-choice fa fa-plus-square"></i>
</div>
</td>
<td>
<div class="third">
<i id="skill_sub" class="quantity pointer-choice fa fa-minus-square"></i>
@@ -90,7 +124,7 @@
<div class="dice-container">
<img src="systems/l5r5e/assets/dices/default/skill_blank.png" alt="1">
<div class="dice-value">
<input id="skill_value" class="dice-skill" type="text" name="skill" value="{{skillData.value}}" readonly="readonly">
<input id="skill_value" class="input-dice input-dice-skill" type="text" name="skill" value="{{skillData.value}}" readonly="readonly">
</div>
</div>
</div>
@@ -100,8 +134,30 @@
</div>
</td>
</tr>
</table>
<!-- Fourth line -->
<tr>
<td>
<input type="checkbox" id="diff_hidden" name="diff_hidden" value="1">
<label for="diff_hidden">
<!-- TODO lang-->
Cachée
</label>
</td>
<td>
{{#if canUseVoidPoint}}
<input type="checkbox" id="use_void_point" name="diff_hidden" value="1">
<label for="use_void_point">
<!-- TODO lang-->
Dépenser un point de Vide
</label>
{{/if}}
</td>
<td>
</td>
</tr>
</table>
<div class="form-group">
<button name="roll">Roll <i class='fas fa-arrow-circle-right'></i></button>