From 139e5f5640ea9b3de7fdbc86550cec0935c97110 Mon Sep 17 00:00:00 2001 From: Vlyan Date: Fri, 11 Dec 2020 23:31:34 +0100 Subject: [PATCH] dialog test v2 --- system/scripts/dice/dice-picker-dialog.js | 185 +++++++++++++----- system/scripts/dice/roll.js | 2 +- system/styles/l5r5e.css | 2 +- system/styles/scss/dices.scss | 70 ++++++- system/templates/dice/dice-picker-dialog.html | 118 ++++++----- 5 files changed, 279 insertions(+), 98 deletions(-) diff --git a/system/scripts/dice/dice-picker-dialog.js b/system/scripts/dice/dice-picker-dialog.js index e030582..9fb341b 100644 --- a/system/scripts/dice/dice-picker-dialog.js +++ b/system/scripts/dice/dice-picker-dialog.js @@ -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, }; }); } diff --git a/system/scripts/dice/roll.js b/system/scripts/dice/roll.js index b0d12a6..f583fe8 100644 --- a/system/scripts/dice/roll.js +++ b/system/scripts/dice/roll.js @@ -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; } /** diff --git a/system/styles/l5r5e.css b/system/styles/l5r5e.css index df7eef6..6504d6e 100644 --- a/system/styles/l5r5e.css +++ b/system/styles/l5r5e.css @@ -1 +1 @@ -.window-app .window-content{z-index:1;position:relative;background:url("../assets/imgs/bgL5R.webp") no-repeat;background-size:cover}.window-app .window-resizable-handle{z-index:2;background:rgba(0,0,0,0.75)}*{transition-property:background, color, border-color, text-shadow, box-shadow;transition-duration:0.5s;transition-timing-function:ease}input[type="text"]:focus,input[type="number"]:focus,input[type="password"]:focus,input[type="date"]:focus,input[type="time"]:focus{box-shadow:0 0 6px rgba(255,0,0,0.75)}.tabs .item.active{text-shadow:0 0 10px rgba(255,0,0,0.75)}#controls .scene-control.active,#controls .control-tool.active,#controls .scene-control:hover,#controls .control-tool:hover{box-shadow:0 0 10px rgba(255,0,0,0.75)}ul,li{list-style-type:none;margin:0;padding:0}input[type="text"],input[type="number"],input[type="password"],input[type="date"],input[type="time"]{background:rgba(255,255,255,0.5);border:1px solid rgba(186,187,177,0.5);padding:0.25rem;color:#764f40}@font-face{font-family:"LogotypeL5r";src:url("../fonts/LogotypeL5r.ttf") format("truetype")}@font-face{font-family:"BrushtipTexe";src:url("../fonts/BrushtipTexe.otf") format("opentype")}@font-face{font-family:"PatrickHand";src:url("../fonts/PatrickHand.ttf") format("truetype")}body{font:16px "PatrickHand",sans-serif;letter-spacing:0.05rem}h1,h4{font-family:"BrushtipTexe",sans-serif}h1{font-size:2rem}h4{font-size:1.25rem}i.strife,i.success,i.explosive,i.opportunity,i.d6,i.d12,i.i_earth,i.i_water,i.i_fire,i.i_air,i.i_void{font-family:LogotypeL5r;line-height:1rem;font-style:normal;font-weight:normal;vertical-align:middle}i.strife:before{content:"f"}i.success:before{content:"s"}i.explosive:before{content:"e"}i.opportunity:before{content:"o"}i.d6:before{content:"r"}i.d12:before{content:"k"}i.i_earth:before{content:"g"}i.i_water:before{content:"w"}i.i_fire:before{content:"i"}i.i_air:before{content:"a"}i.i_void:before{content:"v"}#sidebar{background-position:top;background-size:100%;background-repeat:no-repeat;background:url("../assets/ui/bgSidebar.png") no-repeat;top:0;height:100%;padding:0.5rem}#sidebar #sidebar-tabs{flex:0 0 1rem;box-sizing:border-box;margin:0 0 0.25rem;border-bottom:1px solid rgba(255,255,255,0.25);box-shadow:none}#sidebar #sidebar-tabs>.item{line-height:27px;border-radius:100%;margin:0;flex:0 0 27px;height:27px}#sidebar #sidebar-tabs>.item .active{border:1px solid rgba(255,100,0,0.75);box-shadow:0 0 6px rgba(255,100,0,0.75)}#sidebar .message-sender{color:#963c41}#sidebar .chat-control-icon{cursor:url(../l5r-ui/ui/cursors/pointer.webp),pointer}#hotbar{margin:0}#hotbar #action-bar{flex:0 0 100%}#hotbar #action-bar .macro{-o-border-image:url("../assets/ui/macro-button.webp");border-image:url("../assets/ui/macro-button.webp");border-image-slice:8 fill;border-image-width:0.25rem;border-image-outset:0;border-radius:0}#hotbar #action-bar .macro .macro-key{background:transparent}#hotbar #action-bar #macro-list{background:rgba(0,0,0,0.75);margin:0;padding:0.05rem;border:none;border-radius:0;background-origin:padding-box;-o-border-image:url("../assets/ui/macro-button.webp") 15 repeat;border-image:url("../assets/ui/macro-button.webp") 15 repeat;border-image-width:0.5rem;border-image-outset:0px;box-shadow:0.25rem 0.25rem 0.5rem rgba(0,0,0,0.75)}#hotbar .bar-controls{background:rgba(0,0,0,0.75);background-origin:padding-box;-o-border-image:url("../assets/ui/macro-button.webp") 15 repeat;border-image:url("../assets/ui/macro-button.webp") 15 repeat;border-image-width:0.5rem;border-image-outset:0px;box-shadow:0 0 0.25rem rgba(0,0,0,0.75);border-radius:0;margin:0 0.5rem}#hotbar .bar-controls a.page-control,#hotbar .bar-controls span.page-number{font-size:1rem;line-height:0.95rem}#players{background:rgba(0,0,0,0.75);background-origin:padding-box;-o-border-image:url("../assets/ui/macro-button.webp") 15 repeat;border-image:url("../assets/ui/macro-button.webp") 15 repeat;border-image-width:0.5rem;border-image-outset:0px;margin:0;padding:0;left:1.15rem;bottom:0.65rem;box-shadow:inset 0 0 0.5rem rgba(0,0,0,0.75)}#players:before{z-index:-1;position:absolute;content:"";background:transparent url("../assets/ui/players-border.webp") no-repeat 0 0;background-size:100%;display:block;top:-12px;right:10%;left:10%;bottom:0}#logo{height:80px;margin-left:0.5rem;opacity:0.5}#logo:hover{opacity:0.75}#navigation{left:120px}#navigation #nav-toggle,#navigation #scene-list .scene.nav-item{cursor:default;color:rgba(255,255,255,0.65);background:linear-gradient(#285064, #0a141e, #285064);background-origin:padding-box;-o-border-image:url("../assets/ui/macro-button.webp") 10 repeat;border-image:url("../assets/ui/macro-button.webp") 10 repeat;border-image-width:0.25rem;border-image-outset:0px}#navigation #scene-list .scene.nav-item.active{background:linear-gradient(#41140f, #230a05, #41140f)}#navigation #scene-list .scene.view,#navigation #scene-list .scene.context{cursor:default;color:#fff;background:linear-gradient(#41140f, #230a05, #41140f);background-origin:padding-box;-o-border-image:url("../assets/ui/macro-button.webp") 10 repeat;border-image:url("../assets/ui/macro-button.webp") 10 repeat;border-image-width:0.25rem;border-image-outset:0px;box-shadow:0 0 20px red}#controls{top:100px}#controls .scene-control.active,#controls .control-tool.active,#controls .scene-control:hover,#controls .control-tool:hover{background:linear-gradient(#41140f, #230a05, #41140f);background-origin:padding-box;-o-border-image:url("../assets/ui/macro-button.webp") 10 repeat;border-image:url("../assets/ui/macro-button.webp") 10 repeat;border-image-width:0.25rem;border-image-outset:0px;box-shadow:0 0 10px rgba(255,0,0,0.75)}#controls .scene-control,#controls .control-tool{background:linear-gradient(#285064, #0a141e, #285064);background-origin:padding-box;-o-border-image:url("../assets/ui/macro-button.webp") 10 repeat;border-image:url("../assets/ui/macro-button.webp") 10 repeat;border-image-width:0.25rem;border-image-outset:0px}.l5r5e .chat-dice>img{border:1px solid transparent;background-repeat:no-repeat;background-position:center;background-size:100%;height:44px;width:44px;outline:none;margin:0;flex:0 0 20px;display:inline-block}.l5r5e .dice-picker-dialog .profil{float:left}.l5r5e .dice-picker-dialog .dices{float:right}.l5r5e.sheet{min-width:600px}.l5r5e.sheet .sheet-header h1{flex:auto;margin:0 0.5rem 0.25rem}.l5r5e.sheet .sheet-header h1 input{flex:0 0 100%;height:4rem;margin:0.5rem 0 0;width:100%;color:#963c41;background:transparent;border:0 none;border-radius:0;border-bottom:1px dotted rgba(0,0,0,0.5)}.l5r5e.sheet .sheet-header h1:before{content:"";position:absolute;background:url("../assets/imgs/brushL5r.webp") no-repeat 0 0;background-size:contain;height:225px;width:100%;z-index:-1;left:-0.25rem}.l5r5e.sheet .sheet-header img{flex:0 0 150px;height:150px;margin-right:0;-o-object-fit:contain;object-fit:contain;background:rgba(255,255,255,0.5);border:1px solid rgba(186,187,177,0.5);--notchSize: 0.5rem;-webkit-clip-path:polygon(0% var(--notchSize), var(--notchSize) 0%, calc(100% - var(--notchSize)) 0%, 100% var(--notchSize), 100% calc(100% - var(--notchSize)), calc(100% - var(--notchSize)) 100%, var(--notchSize) 100%, 0% calc(100% - var(--notchSize)));clip-path:polygon(0% var(--notchSize), var(--notchSize) 0%, calc(100% - var(--notchSize)) 0%, 100% var(--notchSize), 100% calc(100% - var(--notchSize)), calc(100% - var(--notchSize)) 100%, var(--notchSize) 100%, 0% calc(100% - var(--notchSize)))}.l5r5e.sheet .sheet-header .header-fields h2{font-family:"BrushtipTexe",sans-serif;float:right;width:50%;padding:0 0.25rem;margin:0;text-align:right;color:rgba(0,0,0,0.5);border-bottom:rgba(255,255,255,0.65);--notchSize: 0.5rem;-webkit-clip-path:polygon(0% var(--notchSize), var(--notchSize) 0%, calc(100%) 0%, 100% var(--notchSize), 100% calc(100% - var(--notchSize)), calc(100% - var(--notchSize)) 100%, var(--notchSize) 100%, 0% calc(100%));clip-path:polygon(0% var(--notchSize), var(--notchSize) 0%, calc(100%) 0%, 100% var(--notchSize), 100% calc(100% - var(--notchSize)), calc(100% - var(--notchSize)) 100%, var(--notchSize) 100%, 0% calc(100%))}.l5r5e.sheet .sheet-header .header-fields h2:before{content:"";position:absolute;height:1px;width:100%}.l5r5e.sheet .sheet-header .identity-wrapper{display:flex;flex-wrap:wrap;flex:0 0 calc(100% - 150px - 0.25rem)}.l5r5e.sheet .sheet-header .identity-wrapper .identity-content{flex:0 0 100%;display:flex;flex-wrap:wrap;margin:0.5rem}.l5r5e.sheet .sheet-header .identity-wrapper .identity-content li{flex:33%}.l5r5e.sheet .sheet-header .identity-wrapper .identity-content li:nth-child(1),.l5r5e.sheet .sheet-header .identity-wrapper .identity-content li:nth-child(2){flex:50%;margin:0 0 0.5rem}.l5r5e.sheet .sheet-header .rings{float:left;width:calc(50% - 0.25rem);padding:0.25rem}.l5r5e.sheet .sheet-header .social-content{flex:0 0 100%;display:flex;padding:0.25rem}.l5r5e.sheet .sheet-header .attributes-wrapper{float:right;width:calc(50% - 0.25rem);padding:0.5rem 0 0.5rem 1rem;display:flex;flex-wrap:wrap;flex-direction:column;background:rgba(186,187,177,0.5);--notchSize: 0.5rem;-webkit-clip-path:polygon(0% var(--notchSize), var(--notchSize) 0%, calc(100%) 0%, 100% var(--notchSize), 100% calc(100% - var(--notchSize)), calc(100% - var(--notchSize)) 100%, var(--notchSize) 100%, 0% calc(100%));clip-path:polygon(0% var(--notchSize), var(--notchSize) 0%, calc(100%) 0%, 100% var(--notchSize), 100% calc(100% - var(--notchSize)), calc(100% - var(--notchSize)) 100%, var(--notchSize) 100%, 0% calc(100%))}.l5r5e.sheet .sheet-header .attributes-wrapper .endurance-content label,.l5r5e.sheet .sheet-header .attributes-wrapper .composure-content label,.l5r5e.sheet .sheet-header .attributes-wrapper .void-content label{float:left;width:50%}.l5r5e.sheet .sheet-header .attributes-wrapper li p{display:none;position:absolute}.l5r5e.sheet .sheet-header .attributes-wrapper li:hover p{display:block}.l5r5e.sheet .sheet-header .identity-wrapper label,.l5r5e.sheet .sheet-header .social-content label,.l5r5e.sheet .sheet-header .attributes-wrapper label{display:flex;color:#5a6e5a;text-transform:uppercase;font-size:0.75rem;line-height:2rem}.l5r5e.sheet .sheet-header .identity-wrapper label input,.l5r5e.sheet .sheet-header .social-content label input,.l5r5e.sheet .sheet-header .attributes-wrapper label input{flex:1;margin:0 1rem 0 0.5rem}.l5r5e.sheet article{background:rgba(255,255,255,0.5);padding:0.5rem}.l5r5e nav.sheet-tabs{background:rgba(186,187,177,0.5);color:rgba(0,0,0,0.5);--notchSize: 0.5rem;-webkit-clip-path:polygon(0% var(--notchSize), var(--notchSize) 0%, calc(100% - var(--notchSize)) 0%, 100% var(--notchSize), 100% calc(100% - var(--notchSize)), calc(100%) 100%, var(--notchSize) 100%, 0% calc(100%));clip-path:polygon(0% var(--notchSize), var(--notchSize) 0%, calc(100% - var(--notchSize)) 0%, 100% var(--notchSize), 100% calc(100% - var(--notchSize)), calc(100%) 100%, var(--notchSize) 100%, 0% calc(100%))}.l5r5e nav .item:hover{background-color:rgba(0,0,0,0.75);color:#fff;text-shadow:black 1px 2px 0}.l5r5e nav .item.active{height:2.5rem;line-height:2rem;background-color:rgba(73,12,11,0.85);color:#fff;background-color:rgba(73,12,11,0.85);-webkit-clip-path:polygon(0% var(--notchSize), var(--notchSize) 0%, calc(100% - var(--notchSize)) 0%, 100% var(--notchSize), 100% 100%, 0 100%, 0% 0%, 0% 100%);clip-path:polygon(0% var(--notchSize), var(--notchSize) 0%, calc(100% - var(--notchSize)) 0%, 100% var(--notchSize), 100% 100%, 0 100%, 0% 0%, 0% 100%)}.l5r5e nav .item.active:hover{background-color:rgba(73,12,11,0.85);cursor:default}.l5r5e .rings{display:flex;flex-wrap:wrap;color:rgba(255,255,255,0.65)}.l5r5e .rings #earth,.l5r5e .rings #air,.l5r5e .rings #water,.l5r5e .rings #fire,.l5r5e .rings #void{position:relative;flex:1 1 50%;text-align:center}.l5r5e .rings #earth i.i_earth,.l5r5e .rings #earth i.i_water,.l5r5e .rings #earth i.i_fire,.l5r5e .rings #earth i.i_air,.l5r5e .rings #earth i.i_void,.l5r5e .rings #air i.i_earth,.l5r5e .rings #air i.i_water,.l5r5e .rings #air i.i_fire,.l5r5e .rings #air i.i_air,.l5r5e .rings #air i.i_void,.l5r5e .rings #water i.i_earth,.l5r5e .rings #water i.i_water,.l5r5e .rings #water i.i_fire,.l5r5e .rings #water i.i_air,.l5r5e .rings #water i.i_void,.l5r5e .rings #fire i.i_earth,.l5r5e .rings #fire i.i_water,.l5r5e .rings #fire i.i_fire,.l5r5e .rings #fire i.i_air,.l5r5e .rings #fire i.i_void,.l5r5e .rings #void i.i_earth,.l5r5e .rings #void i.i_water,.l5r5e .rings #void i.i_fire,.l5r5e .rings #void i.i_air,.l5r5e .rings #void i.i_void{font-size:5rem;line-height:4.75rem}.l5r5e .rings #earth label,.l5r5e .rings #air label,.l5r5e .rings #water label,.l5r5e .rings #fire label,.l5r5e .rings #void label{position:relative;width:5rem;line-height:0;float:right}.l5r5e .rings #earth input,.l5r5e .rings #air input,.l5r5e .rings #water input,.l5r5e .rings #fire input,.l5r5e .rings #void input{position:absolute;height:2rem;width:2rem;border-radius:100%;top:0;left:0;border:2px solid rgba(186,187,177,0.5);color:rgba(255,255,255,0.65)}.l5r5e .rings #earth input:hover,.l5r5e .rings #air input:hover,.l5r5e .rings #water input:hover,.l5r5e .rings #fire input:hover,.l5r5e .rings #void input:hover{border:2px solid rgba(255,0,0,0.75);text-shadow:0 0 6px rgba(255,0,0,0.75);box-shadow:0 0 6px inset rgba(255,0,0,0.75)}.l5r5e .rings #earth{float:right;color:#699678}.l5r5e .rings #earth input{top:auto;right:0;bottom:-1rem;left:auto;background:#699678}.l5r5e .rings #earth label strong{position:absolute;bottom:0.75rem;left:-1.75rem}.l5r5e .rings #air{color:#917896}.l5r5e .rings #air input{top:auto;right:auto;bottom:-1rem;left:0;background:#917896}.l5r5e .rings #air label{float:left}.l5r5e .rings #air label strong{position:absolute;bottom:0.75rem;right:-1rem}.l5r5e .rings #water{float:right;color:#5f919b;padding-right:2rem}.l5r5e .rings #water input{top:17%;right:-1.25rem;bottom:auto;left:auto;background:#5f919b}.l5r5e .rings #water label strong{position:absolute;bottom:-0.75rem;right:2rem}.l5r5e .rings #fire{color:#9b7350;padding-left:2rem}.l5r5e .rings #fire input{top:17%;right:auto;bottom:auto;left:-1.25rem;background:#9b7350}.l5r5e .rings #fire label{float:left}.l5r5e .rings #fire label strong{position:absolute;bottom:-0.75rem;right:2rem}.l5r5e .rings #void{top:-2rem;margin:0 calc(50% - 2.5rem);color:#4b4641}.l5r5e .rings #void input{top:-1rem;right:auto;bottom:auto;left:30%;background:#4b4641}.l5r5e .rings #void label strong{position:absolute;bottom:-0.75rem;left:1.75rem}.l5r5e .testing{width:14.28571%}.l5r5e .testing{width:28.57143%}.l5r5e .testing{width:14.28571%}.l5r5e .testing{width:28.57143%} +.window-app .window-content{z-index:1;position:relative;background:url("../assets/imgs/bgL5R.webp") no-repeat;background-size:cover}.window-app .window-resizable-handle{z-index:2;background:rgba(0,0,0,0.75)}*{transition-property:background, color, border-color, text-shadow, box-shadow;transition-duration:0.5s;transition-timing-function:ease}input[type="text"]:focus,input[type="number"]:focus,input[type="password"]:focus,input[type="date"]:focus,input[type="time"]:focus{box-shadow:0 0 6px rgba(255,0,0,0.75)}.tabs .item.active{text-shadow:0 0 10px rgba(255,0,0,0.75)}#controls .scene-control.active,#controls .control-tool.active,#controls .scene-control:hover,#controls .control-tool:hover{box-shadow:0 0 10px rgba(255,0,0,0.75)}ul,li{list-style-type:none;margin:0;padding:0}input[type="text"],input[type="number"],input[type="password"],input[type="date"],input[type="time"]{background:rgba(255,255,255,0.5);border:1px solid rgba(186,187,177,0.5);padding:0.25rem;color:#764f40}@font-face{font-family:"LogotypeL5r";src:url("../fonts/LogotypeL5r.ttf") format("truetype")}@font-face{font-family:"BrushtipTexe";src:url("../fonts/BrushtipTexe.otf") format("opentype")}@font-face{font-family:"PatrickHand";src:url("../fonts/PatrickHand.ttf") format("truetype")}body{font:16px "PatrickHand",sans-serif;letter-spacing:0.05rem}h1,h4{font-family:"BrushtipTexe",sans-serif}h1{font-size:2rem}h4{font-size:1.25rem}i.strife,i.success,i.explosive,i.opportunity,i.d6,i.d12,i.i_earth,i.i_water,i.i_fire,i.i_air,i.i_void{font-family:LogotypeL5r;line-height:1rem;font-style:normal;font-weight:normal;vertical-align:middle}i.strife:before{content:"f"}i.success:before{content:"s"}i.explosive:before{content:"e"}i.opportunity:before{content:"o"}i.d6:before{content:"r"}i.d12:before{content:"k"}i.i_earth:before{content:"g"}i.i_water:before{content:"w"}i.i_fire:before{content:"i"}i.i_air:before{content:"a"}i.i_void:before{content:"v"}#sidebar{background-position:top;background-size:100%;background-repeat:no-repeat;background:url("../assets/ui/bgSidebar.png") no-repeat;top:0;height:100%;padding:0.5rem}#sidebar #sidebar-tabs{flex:0 0 1rem;box-sizing:border-box;margin:0 0 0.25rem;border-bottom:1px solid rgba(255,255,255,0.25);box-shadow:none}#sidebar #sidebar-tabs>.item{line-height:27px;border-radius:100%;margin:0;flex:0 0 27px;height:27px}#sidebar #sidebar-tabs>.item .active{border:1px solid rgba(255,100,0,0.75);box-shadow:0 0 6px rgba(255,100,0,0.75)}#sidebar .message-sender{color:#963c41}#sidebar .chat-control-icon{cursor:url(../l5r-ui/ui/cursors/pointer.webp),pointer}#hotbar{margin:0}#hotbar #action-bar{flex:0 0 100%}#hotbar #action-bar .macro{-o-border-image:url("../assets/ui/macro-button.webp");border-image:url("../assets/ui/macro-button.webp");border-image-slice:8 fill;border-image-width:0.25rem;border-image-outset:0;border-radius:0}#hotbar #action-bar .macro .macro-key{background:transparent}#hotbar #action-bar #macro-list{background:rgba(0,0,0,0.75);margin:0;padding:0.05rem;border:none;border-radius:0;background-origin:padding-box;-o-border-image:url("../assets/ui/macro-button.webp") 15 repeat;border-image:url("../assets/ui/macro-button.webp") 15 repeat;border-image-width:0.5rem;border-image-outset:0px;box-shadow:0.25rem 0.25rem 0.5rem rgba(0,0,0,0.75)}#hotbar .bar-controls{background:rgba(0,0,0,0.75);background-origin:padding-box;-o-border-image:url("../assets/ui/macro-button.webp") 15 repeat;border-image:url("../assets/ui/macro-button.webp") 15 repeat;border-image-width:0.5rem;border-image-outset:0px;box-shadow:0 0 0.25rem rgba(0,0,0,0.75);border-radius:0;margin:0 0.5rem}#hotbar .bar-controls a.page-control,#hotbar .bar-controls span.page-number{font-size:1rem;line-height:0.95rem}#players{background:rgba(0,0,0,0.75);background-origin:padding-box;-o-border-image:url("../assets/ui/macro-button.webp") 15 repeat;border-image:url("../assets/ui/macro-button.webp") 15 repeat;border-image-width:0.5rem;border-image-outset:0px;margin:0;padding:0;left:1.15rem;bottom:0.65rem;box-shadow:inset 0 0 0.5rem rgba(0,0,0,0.75)}#players:before{z-index:-1;position:absolute;content:"";background:transparent url("../assets/ui/players-border.webp") no-repeat 0 0;background-size:100%;display:block;top:-12px;right:10%;left:10%;bottom:0}#logo{height:80px;margin-left:0.5rem;opacity:0.5}#logo:hover{opacity:0.75}#navigation{left:120px}#navigation #nav-toggle,#navigation #scene-list .scene.nav-item{cursor:default;color:rgba(255,255,255,0.65);background:linear-gradient(#285064, #0a141e, #285064);background-origin:padding-box;-o-border-image:url("../assets/ui/macro-button.webp") 10 repeat;border-image:url("../assets/ui/macro-button.webp") 10 repeat;border-image-width:0.25rem;border-image-outset:0px}#navigation #scene-list .scene.nav-item.active{background:linear-gradient(#41140f, #230a05, #41140f)}#navigation #scene-list .scene.view,#navigation #scene-list .scene.context{cursor:default;color:#fff;background:linear-gradient(#41140f, #230a05, #41140f);background-origin:padding-box;-o-border-image:url("../assets/ui/macro-button.webp") 10 repeat;border-image:url("../assets/ui/macro-button.webp") 10 repeat;border-image-width:0.25rem;border-image-outset:0px;box-shadow:0 0 20px red}#controls{top:100px}#controls .scene-control.active,#controls .control-tool.active,#controls .scene-control:hover,#controls .control-tool:hover{background:linear-gradient(#41140f, #230a05, #41140f);background-origin:padding-box;-o-border-image:url("../assets/ui/macro-button.webp") 10 repeat;border-image:url("../assets/ui/macro-button.webp") 10 repeat;border-image-width:0.25rem;border-image-outset:0px;box-shadow:0 0 10px rgba(255,0,0,0.75)}#controls .scene-control,#controls .control-tool{background:linear-gradient(#285064, #0a141e, #285064);background-origin:padding-box;-o-border-image:url("../assets/ui/macro-button.webp") 10 repeat;border-image:url("../assets/ui/macro-button.webp") 10 repeat;border-image-width:0.25rem;border-image-outset:0px}.l5r5e .chat-dice>img{border:1px solid transparent;background-repeat:no-repeat;background-position:center;background-size:100%;height:44px;width:44px;outline:none;margin:0;flex:0 0 20px;display:inline-block}.l5r5e .dice-picker-dialog *{transition:none}.l5r5e .dice-picker-dialog input[type="text"]:focus,.l5r5e .dice-picker-dialog input[type="text"]:hover{box-shadow:none !important;border:none !important;text-shadow:none !important}.l5r5e .dice-picker-dialog img{border:0}.l5r5e .dice-picker-dialog table .profil{width:200px}.l5r5e .dice-picker-dialog table .rings{width:240px}.l5r5e .dice-picker-dialog table .skill{width:200px}.l5r5e .dice-picker-dialog .ring-selection{filter:contrast(10%)}.l5r5e .dice-picker-dialog .ring-selection.ring-selected{filter:drop-shadow(1px 1px 0 #151515)}.l5r5e .dice-picker-dialog .quantity{font-size:xx-large}.l5r5e .dice-picker-dialog .center{text-align:center}.l5r5e .dice-picker-dialog .third{float:left;width:33.333333333%}.l5r5e .dice-picker-dialog #ring_value{width:20px;position:relative;left:+34px;top:-14px;color:#f0f0e0;background:none;border:none;font-size:large}.l5r5e .dice-picker-dialog #skill_value{width:20px;position:relative;left:+34px;top:-13px;color:#0f0f0e;background:none;border:none;font-size:large}.l5r5e.sheet{min-width:600px}.l5r5e.sheet .sheet-header h1{flex:auto;margin:0 0.5rem 0.25rem}.l5r5e.sheet .sheet-header h1 input{flex:0 0 100%;height:4rem;margin:0.5rem 0 0;width:100%;color:#963c41;background:transparent;border:0 none;border-radius:0;border-bottom:1px dotted rgba(0,0,0,0.5)}.l5r5e.sheet .sheet-header h1:before{content:"";position:absolute;background:url("../assets/imgs/brushL5r.webp") no-repeat 0 0;background-size:contain;height:225px;width:100%;z-index:-1;left:-0.25rem}.l5r5e.sheet .sheet-header img{flex:0 0 150px;height:150px;margin-right:0;-o-object-fit:contain;object-fit:contain;background:rgba(255,255,255,0.5);border:1px solid rgba(186,187,177,0.5);--notchSize: 0.5rem;-webkit-clip-path:polygon(0% var(--notchSize), var(--notchSize) 0%, calc(100% - var(--notchSize)) 0%, 100% var(--notchSize), 100% calc(100% - var(--notchSize)), calc(100% - var(--notchSize)) 100%, var(--notchSize) 100%, 0% calc(100% - var(--notchSize)));clip-path:polygon(0% var(--notchSize), var(--notchSize) 0%, calc(100% - var(--notchSize)) 0%, 100% var(--notchSize), 100% calc(100% - var(--notchSize)), calc(100% - var(--notchSize)) 100%, var(--notchSize) 100%, 0% calc(100% - var(--notchSize)))}.l5r5e.sheet .sheet-header .header-fields h2{font-family:"BrushtipTexe",sans-serif;float:right;width:50%;padding:0 0.25rem;margin:0;text-align:right;color:rgba(0,0,0,0.5);border-bottom:rgba(255,255,255,0.65);--notchSize: 0.5rem;-webkit-clip-path:polygon(0% var(--notchSize), var(--notchSize) 0%, calc(100%) 0%, 100% var(--notchSize), 100% calc(100% - var(--notchSize)), calc(100% - var(--notchSize)) 100%, var(--notchSize) 100%, 0% calc(100%));clip-path:polygon(0% var(--notchSize), var(--notchSize) 0%, calc(100%) 0%, 100% var(--notchSize), 100% calc(100% - var(--notchSize)), calc(100% - var(--notchSize)) 100%, var(--notchSize) 100%, 0% calc(100%))}.l5r5e.sheet .sheet-header .header-fields h2:before{content:"";position:absolute;height:1px;width:100%}.l5r5e.sheet .sheet-header .identity-wrapper{display:flex;flex-wrap:wrap;flex:0 0 calc(100% - 150px - 0.25rem)}.l5r5e.sheet .sheet-header .identity-wrapper .identity-content{flex:0 0 100%;display:flex;flex-wrap:wrap;margin:0.5rem}.l5r5e.sheet .sheet-header .identity-wrapper .identity-content li{flex:33%}.l5r5e.sheet .sheet-header .identity-wrapper .identity-content li:nth-child(1),.l5r5e.sheet .sheet-header .identity-wrapper .identity-content li:nth-child(2){flex:50%;margin:0 0 0.5rem}.l5r5e.sheet .sheet-header .rings{float:left;width:calc(50% - 0.25rem);padding:0.25rem}.l5r5e.sheet .sheet-header .social-content{flex:0 0 100%;display:flex;padding:0.25rem}.l5r5e.sheet .sheet-header .attributes-wrapper{float:right;width:calc(50% - 0.25rem);padding:0.5rem 0 0.5rem 1rem;display:flex;flex-wrap:wrap;flex-direction:column;background:rgba(186,187,177,0.5);--notchSize: 0.5rem;-webkit-clip-path:polygon(0% var(--notchSize), var(--notchSize) 0%, calc(100%) 0%, 100% var(--notchSize), 100% calc(100% - var(--notchSize)), calc(100% - var(--notchSize)) 100%, var(--notchSize) 100%, 0% calc(100%));clip-path:polygon(0% var(--notchSize), var(--notchSize) 0%, calc(100%) 0%, 100% var(--notchSize), 100% calc(100% - var(--notchSize)), calc(100% - var(--notchSize)) 100%, var(--notchSize) 100%, 0% calc(100%))}.l5r5e.sheet .sheet-header .attributes-wrapper .endurance-content label,.l5r5e.sheet .sheet-header .attributes-wrapper .composure-content label,.l5r5e.sheet .sheet-header .attributes-wrapper .void-content label{float:left;width:50%}.l5r5e.sheet .sheet-header .attributes-wrapper li p{display:none;position:absolute}.l5r5e.sheet .sheet-header .attributes-wrapper li:hover p{display:block}.l5r5e.sheet .sheet-header .identity-wrapper label,.l5r5e.sheet .sheet-header .social-content label,.l5r5e.sheet .sheet-header .attributes-wrapper label{display:flex;color:#5a6e5a;text-transform:uppercase;font-size:0.75rem;line-height:2rem}.l5r5e.sheet .sheet-header .identity-wrapper label input,.l5r5e.sheet .sheet-header .social-content label input,.l5r5e.sheet .sheet-header .attributes-wrapper label input{flex:1;margin:0 1rem 0 0.5rem}.l5r5e.sheet article{background:rgba(255,255,255,0.5);padding:0.5rem}.l5r5e nav.sheet-tabs{background:rgba(186,187,177,0.5);color:rgba(0,0,0,0.5);--notchSize: 0.5rem;-webkit-clip-path:polygon(0% var(--notchSize), var(--notchSize) 0%, calc(100% - var(--notchSize)) 0%, 100% var(--notchSize), 100% calc(100% - var(--notchSize)), calc(100%) 100%, var(--notchSize) 100%, 0% calc(100%));clip-path:polygon(0% var(--notchSize), var(--notchSize) 0%, calc(100% - var(--notchSize)) 0%, 100% var(--notchSize), 100% calc(100% - var(--notchSize)), calc(100%) 100%, var(--notchSize) 100%, 0% calc(100%))}.l5r5e nav .item:hover{background-color:rgba(0,0,0,0.75);color:#fff;text-shadow:black 1px 2px 0}.l5r5e nav .item.active{height:2.5rem;line-height:2rem;background-color:rgba(73,12,11,0.85);color:#fff;background-color:rgba(73,12,11,0.85);-webkit-clip-path:polygon(0% var(--notchSize), var(--notchSize) 0%, calc(100% - var(--notchSize)) 0%, 100% var(--notchSize), 100% 100%, 0 100%, 0% 0%, 0% 100%);clip-path:polygon(0% var(--notchSize), var(--notchSize) 0%, calc(100% - var(--notchSize)) 0%, 100% var(--notchSize), 100% 100%, 0 100%, 0% 0%, 0% 100%)}.l5r5e nav .item.active:hover{background-color:rgba(73,12,11,0.85);cursor:default}.l5r5e .rings{display:flex;flex-wrap:wrap;color:rgba(255,255,255,0.65)}.l5r5e .rings #earth,.l5r5e .rings #air,.l5r5e .rings #water,.l5r5e .rings #fire,.l5r5e .rings #void{position:relative;flex:1 1 50%;text-align:center}.l5r5e .rings #earth i.i_earth,.l5r5e .rings #earth i.i_water,.l5r5e .rings #earth i.i_fire,.l5r5e .rings #earth i.i_air,.l5r5e .rings #earth i.i_void,.l5r5e .rings #air i.i_earth,.l5r5e .rings #air i.i_water,.l5r5e .rings #air i.i_fire,.l5r5e .rings #air i.i_air,.l5r5e .rings #air i.i_void,.l5r5e .rings #water i.i_earth,.l5r5e .rings #water i.i_water,.l5r5e .rings #water i.i_fire,.l5r5e .rings #water i.i_air,.l5r5e .rings #water i.i_void,.l5r5e .rings #fire i.i_earth,.l5r5e .rings #fire i.i_water,.l5r5e .rings #fire i.i_fire,.l5r5e .rings #fire i.i_air,.l5r5e .rings #fire i.i_void,.l5r5e .rings #void i.i_earth,.l5r5e .rings #void i.i_water,.l5r5e .rings #void i.i_fire,.l5r5e .rings #void i.i_air,.l5r5e .rings #void i.i_void{font-size:5rem;line-height:4.75rem}.l5r5e .rings #earth label,.l5r5e .rings #air label,.l5r5e .rings #water label,.l5r5e .rings #fire label,.l5r5e .rings #void label{position:relative;width:5rem;line-height:0;float:right}.l5r5e .rings #earth input,.l5r5e .rings #air input,.l5r5e .rings #water input,.l5r5e .rings #fire input,.l5r5e .rings #void input{position:absolute;height:2rem;width:2rem;border-radius:100%;top:0;left:0;border:2px solid rgba(186,187,177,0.5);color:rgba(255,255,255,0.65)}.l5r5e .rings #earth input:hover,.l5r5e .rings #air input:hover,.l5r5e .rings #water input:hover,.l5r5e .rings #fire input:hover,.l5r5e .rings #void input:hover{border:2px solid rgba(255,0,0,0.75);text-shadow:0 0 6px rgba(255,0,0,0.75);box-shadow:0 0 6px inset rgba(255,0,0,0.75)}.l5r5e .rings #earth{float:right;color:#699678}.l5r5e .rings #earth input{top:auto;right:0;bottom:-1rem;left:auto;background:#699678}.l5r5e .rings #earth label strong{position:absolute;bottom:0.75rem;left:-1.75rem}.l5r5e .rings #air{color:#917896}.l5r5e .rings #air input{top:auto;right:auto;bottom:-1rem;left:0;background:#917896}.l5r5e .rings #air label{float:left}.l5r5e .rings #air label strong{position:absolute;bottom:0.75rem;right:-1rem}.l5r5e .rings #water{float:right;color:#5f919b;padding-right:2rem}.l5r5e .rings #water input{top:17%;right:-1.25rem;bottom:auto;left:auto;background:#5f919b}.l5r5e .rings #water label strong{position:absolute;bottom:-0.75rem;right:2rem}.l5r5e .rings #fire{color:#9b7350;padding-left:2rem}.l5r5e .rings #fire input{top:17%;right:auto;bottom:auto;left:-1.25rem;background:#9b7350}.l5r5e .rings #fire label{float:left}.l5r5e .rings #fire label strong{position:absolute;bottom:-0.75rem;right:2rem}.l5r5e .rings #void{top:-2rem;margin:0 calc(50% - 2.5rem);color:#4b4641}.l5r5e .rings #void input{top:-1rem;right:auto;bottom:auto;left:30%;background:#4b4641}.l5r5e .rings #void label strong{position:absolute;bottom:-0.75rem;left:1.75rem}.l5r5e .testing{width:14.28571%}.l5r5e .testing{width:28.57143%}.l5r5e .testing{width:14.28571%}.l5r5e .testing{width:28.57143%} diff --git a/system/styles/scss/dices.scss b/system/styles/scss/dices.scss index dd1271f..195753c 100644 --- a/system/styles/scss/dices.scss +++ b/system/styles/scss/dices.scss @@ -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; } } diff --git a/system/templates/dice/dice-picker-dialog.html b/system/templates/dice/dice-picker-dialog.html index d55031e..58b419c 100644 --- a/system/templates/dice/dice-picker-dialog.html +++ b/system/templates/dice/dice-picker-dialog.html @@ -1,54 +1,80 @@
-
- -
-
-
- -
- {{#each elementsList}} - - - {{/each}} -
-
-
-
- -
- {{#each dicesList}} - - - {{/each}} -
-
-
-
- -
- {{#each dicesList}} - - - {{/each}} -
-
+ + + + + + + + + + + +
+ {{#if actor.name}}{{actor.name}}{{/if}}{{^if actor.name}}mystery-man{{/if}} + +
    + {{#each elementsList}} +
  • + +
    • + {{/each}} +
+ 		+ {{#if skillData.name}} + + + {{skillData.value}} + + {{/if}} +
+ + ND : {{difficulty}} + +
+ +
+
+ + 1 +
+
+ +
+ 		+
+ +
+
+ + 1 +
+
+ +
+
- {{#if skillData.name}} -
-
- -
- {{/if}} -