Loadout selector (#107)

This commit is contained in:
Clément Bonnet 2021-04-22 10:36:28 +02:00 committed by GitHub
parent 5314c8c3f0
commit 9d77e8b733
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
7 changed files with 92 additions and 15 deletions

View file

@ -22,7 +22,7 @@ export class BladesActorSheet extends BladesSheet {
/** @override */
getData() {
const data = super.getData();
var data = super.getData();
// Calculate Load
let loadout = 0;
@ -58,6 +58,8 @@ export class BladesActorSheet extends BladesSheet {
} else {
data.data.load_level=load_level[loadout];
}
data.load_levels = ["BITD.Light", "BITD.Normal", "BITD.Heavy"];
return data;
}

5
scss/README.md Normal file
View file

@ -0,0 +1,5 @@
# How to build CSS
Install nodeJS: https://nodejs.org/en/
Install sass (https://www.npmjs.com/package/sass): npm install -g sass
Open a shell in this folder and run: sass style.scss ../styles/blades.css

View file

@ -246,25 +246,33 @@ $hover-brightness: 0.8;
}
}
// Abilities
#abilities {
//Abilitiers and loadout
#abilities, #loadout {
.item-name {
width: 70px;
width: 100px;
}
.item-body {
width: auto;
}
.item-description {
width: 200px;
width: 260px;
}
}
// Abilities
#abilities {
.label-stripe {
p:first-child {
margin-right: 10px;
}
}
}
// Loadout
#loadout {
.item-add-popup {
margin-left: 10px;
}
}
// Experience teeth
@ -708,4 +716,33 @@ $hover-brightness: 0.8;
@include changeable($transition-period, $hover-brightness, $hover-opacity, $red);
}
}
#loadout {
select {
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
box-shadow: none;
border: none;
cursor: pointer;
background: url("data:image/svg+xml;utf8,<svg fill='white' height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/><path d='M0 0h24v24H0z' fill='none'/></svg>") no-repeat right;
padding: 0 20px 0 0;
margin: 0.1em -6px 0 0;
background-color: $almost_black;
font-family: Georgia, "Bitstream Charter", "Times New Roman", serif;
font-size: 14px;
font-weight: bold;
text-transform: uppercase;
color: white;
text-align: right;
option {
color: white;
}
}
select:hover {
color: red;
}
}
}

View file

@ -301,18 +301,21 @@
* #character-stress label[for$="-0"] {
margin-right: 0px;
}
* #abilities .item-name {
width: 70px;
* #abilities .item-name, * #loadout .item-name {
width: 100px;
}
* #abilities .item-body {
* #abilities .item-body, * #loadout .item-body {
width: auto;
}
* #abilities .item-description {
width: 200px;
* #abilities .item-description, * #loadout .item-description {
width: 260px;
}
* #abilities .label-stripe p:first-child {
margin-right: 10px;
}
* #loadout .item-add-popup {
margin-left: 10px;
}
* .teeth-experience {
display: flex;
/* Hide the browser's default checkbox */
@ -1213,5 +1216,29 @@
opacity: 0.9;
color: red;
}
* #loadout select {
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
box-shadow: none;
border: none;
cursor: pointer;
background: url("data:image/svg+xml;utf8,<svg fill='white' height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/><path d='M0 0h24v24H0z' fill='none'/></svg>") no-repeat right;
padding: 0 20px 0 0;
margin: 0.1em -6px 0 0;
background-color: #191813;
font-family: Georgia, "Bitstream Charter", "Times New Roman", serif;
font-size: 14px;
font-weight: bold;
text-transform: uppercase;
color: white;
text-align: right;
}
* #loadout select option {
color: white;
}
* #loadout select:hover {
color: red;
}
/*# sourceMappingURL=blades.css.map */

File diff suppressed because one or more lines are too long

View file

@ -25,6 +25,7 @@
"special_abilities": [],
"loadout": 0,
"load_level": "",
"selected_load_level": "",
"harm": {
"light": {
"one": "",

View file

@ -285,8 +285,13 @@
{{!-- Owned Items Tab --}}
<div id="loadout" class="tab flex-vertical" data-tab="loadout">
<div class="label-stripe flex-horizontal">
<p>{{localize "BITD.Loadout"}}: {{data.loadout}}/{{localize data.load_level}} </p>
<p><a class="item-add-popup" data-item-type="item"><i class="fas fa-plus-square"></i></a></p>
<p>{{localize "BITD.Loadout"}} <a class="item-add-popup" data-item-type="item"><i class="fas fa-plus-square"></i></a></p>
<p>{{data.loadout}}/{{localize data.load_level}} </p>
<div class="dropdown">
<select name="data.selected_load_level">
{{selectOptions load_levels selected=data.selected_load_level localize=true}}
</select>
</div>
</div>
<div>
{{#each actor.items as |item id|}}