From e008ef6f4ef0256fa4913803a6008bd1fc9aa60b Mon Sep 17 00:00:00 2001 From: Peter Varaksin Date: Sat, 25 Apr 2020 14:32:34 +0300 Subject: [PATCH] Turfs - Adds finalized Turf system - Adds Turf view for Crew - Adds Crew Type Cult to Compendium --- module/crew-sheet.js | 17 +- module/templates.js | 3 +- packs/crew_types.db | 1 + scss/mixin.scss | 55 +++++-- scss/style.scss | 289 +++++++++++++++++++++++++++++++-- styles/blades.css | 39 +++-- templates/crew-sheet.html | 11 ++ templates/items/crew_type.html | 32 +--- templates/parts/turf-list.html | 48 ++++++ 9 files changed, 422 insertions(+), 73 deletions(-) create mode 100644 packs/crew_types.db create mode 100644 templates/parts/turf-list.html diff --git a/module/crew-sheet.js b/module/crew-sheet.js index b65d591..0debc23 100644 --- a/module/crew-sheet.js +++ b/module/crew-sheet.js @@ -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 diff --git a/module/templates.js b/module/templates.js index 584eeed..8c3c380 100644 --- a/module/templates.js +++ b/module/templates.js @@ -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 diff --git a/packs/crew_types.db b/packs/crew_types.db new file mode 100644 index 0000000..87bd08c --- /dev/null +++ b/packs/crew_types.db @@ -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":{}} \ No newline at end of file diff --git a/scss/mixin.scss b/scss/mixin.scss index 4372151..bf845b8 100644 --- a/scss/mixin.scss +++ b/scss/mixin.scss @@ -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 { diff --git a/scss/style.scss b/scss/style.scss index b7f2b05..b8dcc97 100644 --- a/scss/style.scss +++ b/scss/style.scss @@ -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); + } + } + } + } + } diff --git a/styles/blades.css b/styles/blades.css index e78623a..67965cd 100644 --- a/styles/blades.css +++ b/styles/blades.css @@ -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 */ diff --git a/templates/crew-sheet.html b/templates/crew-sheet.html index 632a5e2..74309a1 100644 --- a/templates/crew-sheet.html +++ b/templates/crew-sheet.html @@ -7,4 +7,15 @@ + +
+ {{#each actor.items as |item id|}} + {{#eq item.type "crew_type"}} +
+ {{> "systems/blades-in-the-dark/templates/parts/turf-list.html" turfs_data=item.data.turfs can_edit=false}} +
+ {{/eq}} + {{/each}} +
+ diff --git a/templates/items/crew_type.html b/templates/items/crew_type.html index 3cb044f..0d6ccae 100644 --- a/templates/items/crew_type.html +++ b/templates/items/crew_type.html @@ -7,35 +7,5 @@ - -
-
- {{#each data.turfs as |turf id|}} -
- {{#each turf.connects as |connect|}} -
- {{/each}} - {{#noteq id "8"}} - - {{/noteq}} - - {{#multiboxes turf.connects}} - - - - - {{/multiboxes}} - - - -
- {{#eq id "5"}} -
- {{/eq}} - {{#eq id "10"}} -
- {{/eq}} - {{/each}} -
-
+ {{> "systems/blades-in-the-dark/templates/parts/turf-list.html" turfs_data=data.turfs can_edit=true}} diff --git a/templates/parts/turf-list.html b/templates/parts/turf-list.html new file mode 100644 index 0000000..e484072 --- /dev/null +++ b/templates/parts/turf-list.html @@ -0,0 +1,48 @@ +
+ +
+ {{#each turfs_data as |turf id|}} +
+ + {{#each turf.connects as |connect|}} +
+ {{/each}} + + {{#if ../can_edit}} + + {{#noteq id "8"}} + + {{/noteq}} + +
+ {{#multiboxes turf.connects}} + + + + + {{/multiboxes}} +
+ + + {{#noteq turf.name "Turf"}} + {{#noteq turf.name "Lair"}} + + {{/noteq}} + {{/noteq}} + {{else}} +

{{turf.name}}

+ {{#if turf.description}} +

{{turf.description}}

+ {{/if}} + + {{/if}} +
+ {{#eq id "5"}} +
+ {{/eq}} + {{#eq id "10"}} +
+ {{/eq}} + {{/each}} +
+