- Adds finalized Turf system
- Adds Turf view for Crew
- Adds Crew Type Cult to Compendium
This commit is contained in:
Peter Varaksin 2020-04-25 14:32:34 +03:00
parent 88779566d7
commit e008ef6f4e
9 changed files with 422 additions and 73 deletions

View file

@ -51,6 +51,21 @@ export class BladesCrewSheet extends ActorSheet {
this.actor.deleteOwnedItem(element.data("itemId"));
element.slideUp(200, () => this.render(false));
});
// Toggle Turf
html.find('.turf-select').click(ev => {
const element = $(ev.currentTarget).parents(".item");
let item_id = element.data("itemId")
let turf_id = $(ev.currentTarget).data("turfId");
let turf_current_status = $(ev.currentTarget).data("turfStatus");
let turf_checkbox_name = 'data.turfs.' + turf_id + '.value';
this.actor.updateEmbeddedEntity('OwnedItem', {
_id: item_id,
[turf_checkbox_name]: !turf_current_status});
this.render(false);
});
}
/* -------------------------------------------- */
@ -102,7 +117,7 @@ export class BladesCrewSheet extends ActorSheet {
if (item) {
const actor = this.actor;
BladesHelpers._removeDuplicatedItemType(item.data.type, actor);
BladesHelpers.removeDuplicatedItemType(item.data.type, actor);
}
// Call parent on drop logic

View file

@ -10,7 +10,8 @@ export const preloadHandlebarsTemplates = async function() {
// Actor Sheet Partials
"systems/blades-in-the-dark/templates/parts/coins.html",
"systems/blades-in-the-dark/templates/parts/attributes.html"
"systems/blades-in-the-dark/templates/parts/attributes.html",
"systems/blades-in-the-dark/templates/parts/turf-list.html"
];
// Load the template parts

1
packs/crew_types.db Normal file
View file

@ -0,0 +1 @@
{"_id":"678LJHqxkBAaSJci","name":"Cult","permission":{"default":0},"type":"crew_type","data":{"description":"","turfs":{"1":{"name":"Cloister","value":false,"description":"+1 scale for your Adept cohorts","connects":["right"],"connected":[false,false,false,false]},"2":{"name":"Vice Den","value":false,"description":"(Tier roll) - Heat = coin in Downtime","connects":["left","right","bottom"],"connected":[false,false,false,false]},"3":{"name":"Offertory","value":false,"description":"+2 coin for occult operations","connects":["left"],"connected":[false,false,false,false]},"4":{"name":"Ancient Obelisk","value":false,"description":"-1 stress cost for all arcane powers and rituals","connects":["right"],"connected":[false,false,false,false]},"5":{"name":"Ancient Tower","value":false,"description":"+1d to Consort w/ arcane entities on site","connects":["left","bottom"],"connected":[false,false,false,false]},"6":{"name":"Turf","value":false,"description":"","connects":["top","right"],"connected":[false,false,false,false]},"7":{"name":"Turf","value":false,"description":"","connects":["left","top","right","bottom"],"connected":[false,false,false,false]},"8":{"name":"Lair","value":true,"description":"","connects":["left","top","right","bottom"],"connected":[false,false,false,true]},"9":{"name":"Turf","value":false,"description":"","connects":["left","right","bottom"],"connected":[false,false,false,false]},"10":{"name":"Turf","value":false,"description":"","connects":["left","top","bottom"],"connected":[false,false,false,false]},"11":{"name":"Spirit Well","value":false,"description":"+1d to Attune on site","connects":["right"],"connected":[false,false,false,false]},"12":{"name":"Ancient Gate","value":false,"description":"Safe passage in the Deathlands","connects":["left","top"],"connected":[false,false,false,false]},"13":{"name":"Sanctuary","value":false,"description":"+1d to Command and Sway on site","connects":["top"],"connected":[false,false,false,false]},"14":{"name":"Sacred Nexus","value":false,"description":"+1d to healing rolls","connects":["top","right"],"connected":[false,false,false,false]},"15":{"name":"Ancient Altar","value":false,"description":"+1d engagement for occult plans","connects":["left","top"],"connected":[false,false,false,false]}}},"folder":null,"sort":100001,"flags":{}}

View file

@ -100,6 +100,48 @@
}
}
/*
* Custom Radio Squared
*/
@mixin custom_radio_square($width, $height) {
display: flex;
$default_color: white;
$accent_color: grey;
$circle_border_color: black;
label {
& {
height: $height;
width: $width;
background-color: $accent_color;
vertical-align: middle;
border: 1px solid $circle_border_color;
&[for$="-0"] {
margin-right: 0px;
}
}
}
/* Hide the browser's default checkbox */
input {
display: none;
&:checked {
& ~ label {
background-color: $default_color;
}
& + label {
background-color: $accent_color;
}
}
}
}
/*
* Checkboxes underscored.
*/
@ -109,7 +151,7 @@
flex-wrap: wrap;
label {
cursor: pointer;
font-size: 22px;
font-size: 19px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
@ -179,16 +221,7 @@
// Zero value to clear everything.
input[value="0"] {
display: block;
opacity: 1;
height: 16px;
width: 16px;
z-index: 10;
left: 0px;
top: 0px;
// left: #{($size + 2 * $border_width)/2 - 9}px;
// top: #{($size + 2 * $border_width)/2 - 9}px;
margin: 0px;
display: none;
}
@for $i from 1 through $segments {

View file

@ -10,26 +10,80 @@
list-style: none;
}
form {
&.actor-sheet {
padding: 20px;
}
}
textarea {
margin-top: 10px;
}
td {
padding: 5px;
}
.section {
margin-bottom: 10px;
display: flex;
flex-direction: row;
justify-content: space-between;
> * {
margin-right: 10px;
&:last-child {
margin-right: 0px;
}
}
.grow-one {
flex-grow: 1;
}
.grow-two {
flex-grow: 2;
}
&.experience {
margin-bottom: 0px;
justify-content: center;
}
}
.editor,
.editor-content {
min-height: 280px;
}
.flex-horizontal {
display: flex;
flex-direction: row;
justify-content: space-between;
}
.flex-vertical {
display: flex;
flex-direction: column;
}
.black-label {
background-color: black;
color: white;
font-size: 35px;
font-size: 21px;
text-align: center;
padding: 0px 5px;
height: 50px !important;
height: 30px !important;
text-transform: capitalize;
}
.label-stripe {
text-transform: uppercase;
background-color: #888;
margin-bottom: 10px;
position: relative;
padding-left: 10px;
}
// Stress and Trauma
@ -39,6 +93,7 @@
border-top: 3px solid black;
display: flex;
flex-direction: row;
margin-bottom: 0px;
> * {
margin-right: 10px;
@ -50,14 +105,14 @@
// Stress
#character-stress {
@include toothradio(32px, 100px, "assets/teeth/stresstooth-halfgrey.png", "assets/teeth/stresstooth-red.png");
@include toothradio(17px, 50px, "assets/teeth/stresstooth-halfgrey.png", "assets/teeth/stresstooth-red.png");
}
/* Trauma */
#character-trauma-container {
#character-trauma {
@include toothradio(32px, 100px, "assets/teeth/shorttooth-grey.png", "assets/teeth/shorttooth-red.png");
@include toothradio(17px, 50px, "assets/teeth/shorttooth-grey.png", "assets/teeth/shorttooth-red.png");
flex-direction: column;
#trauma-teeth {
@ -75,6 +130,27 @@
}
#abilities {
#character-experience {
@include toothradio(10px, 30px, "assets/teeth/stresstooth-halfgrey.png", "assets/teeth/stresstooth-red.png");
position: absolute;
top: 0px;
right: 10px;
}
.item-name {
width: 70px;
}
.item-body {
width: auto;
}
.item-description {
width: 200px;
}
}
#harm-armor {
display: flex;
@ -100,13 +176,11 @@
// Clock
#character-health-clock {
@include clock(4, 100, white, red);
@include clock(4, 80, white, red);
margin: 0 auto;
}
#character-armor-uses {
display: flex;
flex-direction: column;
div {
display: flex;
@ -118,17 +192,34 @@
#attributes {
.attributes-exp {
@include toothradio(17px, 50px, "assets/teeth/xptooth-white.png", "assets/teeth/xptooth-red.png");
display: flex;
flex-direction: column;
.stripe {
background-color: black;
color: white;
font-size: 17px;
padding-left: 5px;
}
.attributes-exp {
border-top: 5px solid black;
position: relative;
margin-bottom: 10px;
.stripe-tooth-body {
@include toothradio(10px, 30px, "assets/teeth/xptooth-white.png", "assets/teeth/xptooth-red.png");
position: absolute;
top: 0px;
right: 0px;
}
}
.attributes-container {
display: flex;
margin: 5px 0px;
@include custom_radio(20px, 20px);
@include custom_radio(15px, 15px);
* {
margin-right: 5px;
@ -136,4 +227,180 @@
}
}
// ITEM
.item {
justify-content: space-between;
.item-body {
margin-bottom: 10px;
* {
margin-right: 10px;
}
.item-description {
font-style: italic;
text-align: justify;
}
}
div {
flex-grow: 2;
}
.item-control {
flex-grow: 1;
}
.item-body,
.item-class-label {
width: 100px;
}
}
#name,
#alias {
margin-bottom: 10px;
// color: red;
// background-image: url("assets/brush/dry-brush-stroke-3.png");
// background-repeat: no-repeat;
// background-size: cover;
// height: 67px;
// input {
// color: red;
// border: none;
// background: none;
// }
}
.profile-img {
margin: 0px 30px;
}
.coins {
@include custom_radio_square(15px, 15px);
flex-wrap: wrap;
label {
margin-right: 3px;
margin-bottom: 3px;
&[for$="0"] {
border-width: 2px;
}
}
&.coins-hands {
width: 36px;
}
&.coins-stashed {
width: 190px;
}
}
// Turfs.
$turf_margin: 20px;
$turf_height: 125px;
$turf_width: 130px;
$connector_height: $turf_height/10;
$connector_width: $turf_margin * 2;
#turf-list {
display: flex;
flex-direction: column;
.turf-row {
display: flex;
flex-direction: row;
flex-wrap: wrap;
*:first-child {
margin-left: 0px;
}
*:last-child {
margin-right: 0px;
}
.turf-block {
width: $turf_width;
height: $turf_height;
background-color: lightgray;
position: relative;
margin: $turf_margin;
flex-grow: initial;
&.turf-selected {
.connector {
background-color: gray;
z-index: 1;
}
}
.connector {
position: absolute;
display: block;
background-color: lightgray;
&.right,
&.left {
width: $turf_margin * 2;
height: $turf_height/5;
top: $turf_height/2 - $turf_height/10;
}
&.left {
left: -$turf_margin * 2;
}
&.right {
left: $turf_width;
}
&.top,
&.bottom {
height: $turf_margin * 2;
width: $turf_height/5;
left: $turf_width/2 - $turf_height/10;
}
&.top {
top: -$turf_margin * 2;
}
&.bottom {
top: $turf_height;
}
}
&.turf-selected {
background-color: gray;
}
.turf-description {
border: none;
background: none;
resize: none;
width: $turf_width;
text-align: center;
min-height: auto;
font-size: 12px;
}
.turf-name {
border: none;
border-radius: 0px;
text-align: center;
font-weight: bold;
}
input[type="checkbox"] {
transform: scale(1);
}
}
}
}
}

View file

@ -466,61 +466,64 @@
margin-right: 0px;
}
* #turf-list .turf-row .turf-block {
width: 120px;
height: 100px;
width: 130px;
height: 125px;
background-color: lightgray;
position: relative;
margin: 20px;
flex-grow: initial;
}
* #turf-list .turf-row .turf-block.turf-selected .connector {
background-color: gray;
z-index: 1;
}
* #turf-list .turf-row .turf-block .connector {
position: absolute;
display: block;
background-color: red;
background-color: lightgray;
}
* #turf-list .turf-row .turf-block .connector.right, * #turf-list .turf-row .turf-block .connector.left {
width: 40px;
height: 20px;
top: 40px;
height: 25px;
top: 50px;
}
* #turf-list .turf-row .turf-block .connector.left {
left: -40px;
}
* #turf-list .turf-row .turf-block .connector.right {
left: 120px;
left: 130px;
}
* #turf-list .turf-row .turf-block .connector.top, * #turf-list .turf-row .turf-block .connector.bottom {
height: 40px;
width: 20px;
left: 50px;
width: 25px;
left: 52.5px;
}
* #turf-list .turf-row .turf-block .connector.top {
top: -40px;
}
* #turf-list .turf-row .turf-block .connector.bottom {
top: 100px;
top: 125px;
}
* #turf-list .turf-row .turf-block.turf-selected {
background-color: gray;
}
* #turf-list .turf-row .turf-block textarea {
* #turf-list .turf-row .turf-block .turf-description {
border: none;
background: none;
resize: none;
width: 120px;
width: 130px;
text-align: center;
min-height: auto;
font-size: 12px;
}
* #turf-list .turf-row .turf-block input[type=text] {
* #turf-list .turf-row .turf-block .turf-name {
border: none;
border-radius: 0px;
text-align: center;
font-weight: bold;
}
* #turf-list .turf-row .turf-block input[type=checkbox] {
transform: scale(1);
}
* #turf-list .turf-row .turf-block .name-box {
position: absolute;
top: 10px;
left: 10px;
margin: 0px;
}
/*# sourceMappingURL=style.css.map */

View file

@ -7,4 +7,15 @@
</div>
</div>
<div>
{{#each actor.items as |item id|}}
{{#eq item.type "crew_type"}}
<div class="item" data-item-id="{{item._id}}">
{{> "systems/blades-in-the-dark/templates/parts/turf-list.html" turfs_data=item.data.turfs can_edit=false}}
</div>
{{/eq}}
{{/each}}
</div>
</form>

View file

@ -7,35 +7,5 @@
</header>
<div id="turf-list">
<div class="turf-row">
{{#each data.turfs as |turf id|}}
<div class="turf-block {{#if turf.value}}turf-selected{{/if}}">
{{#each turf.connects as |connect|}}
<div class="connector {{connect}}"></div>
{{/each}}
{{#noteq id "8"}}
<input class="name-box" type="checkbox" name="data.turfs.{{id}}.value" {{checked turf.value}}>
{{/noteq}}
{{#multiboxes turf.connects}}
<input type="checkbox" name="data.turfs.{{id}}.connects" value="left">
<input type="checkbox" name="data.turfs.{{id}}.connects" value="top">
<input type="checkbox" name="data.turfs.{{id}}.connects" value="right">
<input type="checkbox" name="data.turfs.{{id}}.connects" value="bottom">
{{/multiboxes}}
<input type="text" name="data.turfs.{{id}}.name" value="{{turf.name}}">
<textarea name="data.turfs.{{id}}.description">{{turf.description}}</textarea>
</div>
{{#eq id "5"}}
</div><div class="turf-row">
{{/eq}}
{{#eq id "10"}}
</div><div class="turf-row">
{{/eq}}
{{/each}}
</div>
</div>
{{> "systems/blades-in-the-dark/templates/parts/turf-list.html" turfs_data=data.turfs can_edit=true}}
</form>

View file

@ -0,0 +1,48 @@
<div id="turf-list">
<div class="turf-row">
{{#each turfs_data as |turf id|}}
<div class="turf-block {{#if turf.value}}turf-selected{{/if}}">
{{#each turf.connects as |connect|}}
<div class="connector {{connect}}"></div>
{{/each}}
{{#if ../can_edit}}
{{#noteq id "8"}}
<input class="name-box" type="checkbox" name="data.turfs.{{id}}.value" {{checked turf.value}}>
{{/noteq}}
<div>
{{#multiboxes turf.connects}}
<input type="checkbox" name="data.turfs.{{id}}.connects" value="left">
<input type="checkbox" name="data.turfs.{{id}}.connects" value="top">
<input type="checkbox" name="data.turfs.{{id}}.connects" value="right">
<input type="checkbox" name="data.turfs.{{id}}.connects" value="bottom">
{{/multiboxes}}
</div>
<input class="turf-name" type="text" name="data.turfs.{{id}}.name" value="{{turf.name}}">
{{#noteq turf.name "Turf"}}
{{#noteq turf.name "Lair"}}
<textarea class="turf-description" name="data.turfs.{{id}}.description">{{turf.description}}</textarea>
{{/noteq}}
{{/noteq}}
{{else}}
<p class="turf-name">{{turf.name}}</p>
{{#if turf.description}}
<p class="turf-description">{{turf.description}}</p>
{{/if}}
<a class="turf-control turf-select" title="Select" data-turf-id="{{id}}" data-turf-status="{{turf.value}}"><i class="fas fa-circle"></i></a>
{{/if}}
</div>
{{#eq id "5"}}
</div><div class="turf-row">
{{/eq}}
{{#eq id "10"}}
</div><div class="turf-row">
{{/eq}}
{{/each}}
</div>
</div>