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

dialog picker v2

Browse Source
This commit is contained in:
Vlyan
2020-12-12 14:42:45 +01:00
parent c9c282b3ad
commit 91151817cc
10 changed files with 168 additions and 118 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
system/assets/imgs/noskill.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 27 KiB

2
system/lang/en-en.json
View File

@@ -193,7 +193,7 @@
"total": "Total", "total": "Total",
"spent": "Used", "spent": "Used",
"saved": "Saved", "saved": "Saved",
"acquisitions": "Adquisitions" "acquisitions": "Acquisitions"
} }
} }
} }

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

@@ -41,9 +41,9 @@ export class DicePickerDialog extends Application {
id: "l5r5e-dice-picker-dialog", id: "l5r5e-dice-picker-dialog",
classes: ["l5r5e", "dice-picker-dialog"], classes: ["l5r5e", "dice-picker-dialog"],
template: "systems/l5r5e/templates/dice/dice-picker-dialog.html", template: "systems/l5r5e/templates/dice/dice-picker-dialog.html",
width: 650, title: "L5R Dice Roller",
// height: 400, width: 660,
// title: "L5R Dice Roller", height: 390,
actor: null, actor: null,
ringId: null, ringId: null,
skillId: "", skillId: "",
@@ -152,6 +152,7 @@ export class DicePickerDialog extends Application {
*/ */
getData(options = null) { getData(options = null) {
return { return {
...super.getData(options),
elementsList: this._getElements(), elementsList: this._getElements(),
dicesList: [0, 1, 2, 3, 4, 5, 6], dicesList: [0, 1, 2, 3, 4, 5, 6],
skillData: this._skillData, skillData: this._skillData,
@@ -185,33 +186,41 @@ export class DicePickerDialog extends Application {
activateListeners(html) { activateListeners(html) {
super.activateListeners(html); super.activateListeners(html);
// on change approaches // On change approaches
html.find('input[name="approach"]').on("click", async (event) => { html.find('input[name="approach"]').on("click", async (event) => {
$("#ring_value").val(event.target.value); $("#ring_value").val(event.target.value);
$(".ring-selection").removeClass("ring-selected"); $(".ring-selection").removeClass("ring-selected");
$("." + event.target.dataset.ringid).addClass("ring-selected"); $("." + event.target.dataset.ringid).addClass("ring-selected");
$("#stance_label").html(
game.i18n.localize("l5r5e.skills." + this._skillData.cat + "." + event.target.dataset.ringid)
);
}); });
// Ring Add button // Ring - Add button
html.find("#ring_add").on("click", async (event) => { html.find("#ring_add").on("click", async (event) => {
this._quantityChange(event, "#ring_value", false); this._quantityChange(event, "#ring_value", false);
}); });
// Ring Subtract button // Ring - Subtract button
html.find("#ring_sub").on("click", async (event) => { html.find("#ring_sub").on("click", async (event) => {
this._quantityChange(event, "#ring_value", true); this._quantityChange(event, "#ring_value", true);
}); });
// Skill Add button // Skill - Add button
html.find("#skill_add").on("click", async (event) => { html.find("#skill_add").on("click", async (event) => {
this._quantityChange(event, "#skill_value", false); this._quantityChange(event, "#skill_value", false);
}); });
// Skill Subtract button // Skill - Subtract button
html.find("#skill_sub").on("click", async (event) => { html.find("#skill_sub").on("click", async (event) => {
this._quantityChange(event, "#skill_value", true); this._quantityChange(event, "#skill_value", true);
}); });
// Skill - Default Dice div
html.find("#skill_default_value").on("click", async (event) => {
$("#skill_value").val(this._skillData.value);
});
// Roll button // Roll button
html.find('button[name="roll"]').on("click", async (event) => { html.find('button[name="roll"]').on("click", async (event) => {
event.preventDefault(); event.preventDefault();
@@ -233,6 +242,10 @@ export class DicePickerDialog extends Application {
formula.push(`${skill}ds`); formula.push(`${skill}ds`);
} }
// TODO update actor stance ? good idea or not, choice-able ?
// this._actor.data.data.stance = approach;
// Let's roll !
const roll = await new RollL5r5e(formula.join("+")); const roll = await new RollL5r5e(formula.join("+"));
roll.l5r5e.stance = approach; roll.l5r5e.stance = approach;
@@ -244,16 +257,9 @@ export class DicePickerDialog extends Application {
await this.close(); await this.close();
}); });
// Check if a stance is selected html.find(`.approach_${this._actor ? this._actor.data.data.stance : "void"}`)
let selectedStance = "air"; .first()
if (this._actor) { .trigger("click");
DicePickerDialog.stances.forEach((e) => {
if (this._actor.data.data?.stances?.[e]?.isSelected?.value) {
selectedStance = e;
}
});
}
html.find(`.approach_${selectedStance}`).first().trigger("click");
html.find("#skill_value").val(this._skillData.value); html.find("#skill_value").val(this._skillData.value);
} }

2
system/scripts/sheets/actor-sheet.js
View File

@@ -101,7 +101,7 @@ export class ActorSheetL5r5e extends ActorSheet {
this._onSkillClicked(skillId); this._onSkillClicked(skillId);
}); });
html.find(".adquisition-add").click((ev) => { html.find(".acquisition-add").click((ev) => {
this._createFeat(); this._createFeat();
}); });
} }

2
system/styles/l5r5e.css
View File

File diff suppressed because one or more lines are too long

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

@@ -24,6 +24,7 @@
* { * {
transition: none; transition: none;
} }
input[type="text"]:focus, input[type="text"]:focus,
input[type="text"]:hover { input[type="text"]:hover {
box-shadow: none !important; box-shadow: none !important;
@@ -34,25 +35,35 @@
img { img {
border: 0; border: 0;
} }
table { table {
.profil { text-align: center;
background: none;
border: none;
td:first-child {
width: 200px; width: 200px;
} }
.rings {
td {
width: 240px; width: 240px;
} }
.skill {
td:last-child {
width: 200px; width: 200px;
} }
} }
.pointer-choice {
cursor: url("../l5r-ui/ui/cursors/pointer.webp"), pointer;
}
// Approach choice // Approach choice
.ring-selection { .ring-selection {
filter: contrast(10%); filter: contrast(10%);
&.ring-selected { &.ring-selected {
filter: drop-shadow(1px 1px 0 #151515); filter: drop-shadow(1px 1px 0 #151515);
//text-shadow: 1px 1px 0 #efefef;
} }
} }
@@ -60,28 +71,34 @@
font-size: xx-large; font-size: xx-large;
} }
.center { .third {
display: inline-block;
text-align: center;
vertical-align: middle;
}
.dice-container {
position: relative;
text-align: center; text-align: center;
} }
.third {
float: left; .dice-value {
width: 33.333333333%; position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
} }
#ring_value {
.dice-ring {
width: 20px; width: 20px;
position: relative;
left: +34px;
top: -14px;
color: #f0f0e0; color: #f0f0e0;
background: none; background: none;
border: none; border: none;
font-size: large; font-size: large;
} }
#skill_value {
.dice-skill {
width: 20px; width: 20px;
position: relative;
left: +34px;
top: -13px;
color: #0f0f0e; color: #0f0f0e;
background: none; background: none;
border: none; border: none;

2
system/template.json
View File

@@ -77,7 +77,7 @@
}, },
"fatigue": 0, "fatigue": 0,
"strife": 0, "strife": 0,
"stance": "air" "stance": "void"
}, },
"xp": { "xp": {
"xp_total": 0, "xp_total": 0,

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

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

6
system/templates/sheets/actor/acquisition.html
View File

@@ -1,5 +1,5 @@
<div class="flexrow row"> <div class="flexrow row">
<span class="name" name="adquisition.name">{{ adquisition.name }}</span> <span class="name" name="acquisition.name">{{ acquisition.name }}</span>
<span class="xp" name="adquisition.xp">{{ adquisition.data.xp_used }}</span> <span class="xp" name="acquisition.xp">{{ acquisition.data.xp_used }}</span>
<span class="rank" name="adquisition.rank">{{ adquisition.data.rank }}</span> <span class="rank" name="acquisition.rank">{{ acquisition.data.rank }}</span>
</div> </div>

4
system/templates/sheets/actor/experience.html
View File

@@ -22,10 +22,10 @@
</header> </header>
{{#each data.feats as |feat featId| }} {{#each data.feats as |feat featId| }}
{{> 'systems/l5r5e/templates/sheets/actor/adquisition.html' adquisition=feat }} {{> 'systems/l5r5e/templates/sheets/actor/acquisition.html' acquisition=feat }}
{{/each}} {{/each}}
<div class="tools"> <div class="tools">
<a class="adquisition-control adquisition-add" title="{{ localize 'l5r5e.add'}}"><i class="fas fa-plus"></i></a> <a class="acquisition-control acquisition-add" title="{{ localize 'l5r5e.add'}}"><i class="fas fa-plus"></i></a>
</div> </div>
</div> </div>
</div> </div>