Loadout selector (#107)
This commit is contained in:
Clément Bonnet
GitHub
parent
5314c8c3f0
commit
9d77e8b733
7 changed files with 92 additions and 15 deletions
|
|
@ -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
5
scss/README.md
Normal 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
|
||||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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
|
|
@ -25,6 +25,7 @@
|
|||
"special_abilities": [],
|
||||
"loadout": 0,
|
||||
"load_level": "",
|
||||
"selected_load_level": "",
|
||||
"harm": {
|
||||
"light": {
|
||||
"one": "",
|
||||
|
|
|
|||
|
|
@ -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|}}
|
||||
|
|
|
|||
Reference in a new issue