GH-82 Add Clocks

- Closes #82
- Adds clocks
This commit is contained in:
Megastruktur 2020-11-03 16:44:09 +03:00
parent 04976333c5
commit 88724b10d0
32 changed files with 36898 additions and 72 deletions

View file

@ -1,3 +1,6 @@
v2.7
- Clocks added!
v2.6
- Fixed bug with upgrade
- Fixed bug with Gang Type (checkboxes in Foundry can not be used to pass string values so changed to multiple select)

View file

@ -49,6 +49,12 @@ Crew Types:
![alt screen][screenshot_roll_1]
![alt screen][screenshot_roll_2]
## Clocks
Clocks are now here!
- To add clock go to Items tab and create a new Item of type "🕛 clock".
- To share it to other players rightclick, select "Configure Permissions" and set "Observer" permissions to all
desired players.
## Logic field
Logic field is a json with params which allows to implement some logic when the Item of corresponding type is added or removed.

View file

@ -6,10 +6,11 @@ export class BladesItemSheet extends ItemSheet {
/** @override */
static get defaultOptions() {
return mergeObject(super.defaultOptions, {
classes: ["blades-in-the-dark", "sheet", "item"],
width: 900,
height: 900,
width: 'auto',
height: 'auto',
tabs: [{navSelector: ".sheet-tabs", contentSelector: ".sheet-body", initial: "description"}]
});
}

View file

@ -213,6 +213,42 @@ Hooks.once("init", async function() {
return new Handlebars.SafeString(html);
});
/**
* Create appropriate Blades clock
*/
Handlebars.registerHelper('blades-clock', function(parameter_name, type, current_value, uniq_id) {
let html = '';
if (current_value === null) {
current_value = 0;
}
if (parseInt(current_value) > parseInt(type)) {
current_value = type;
}
// Label for 0
html += `<label class="clock-zero-label" for="clock-0-${uniq_id}}">❌</label>`;
html += `<div id="blades-clock-${uniq_id}" class="blades-clock clock-${type} clock-${type}-${current_value}" style="background-image:url('/systems/blades-in-the-dark/styles/assets/progressclocks-svg/Progress Clock ${type}-${current_value}.svg');">`;
let zero_checked = (parseInt(current_value) === 0) ? 'checked="checked"' : '';
html += `<input type="radio" value="0" id="clock-0-${uniq_id}}" name="${parameter_name}" ${zero_checked}>`;
for (let i = 1; i <= parseInt(type); i++) {
let checked = (parseInt(current_value) === i) ? 'checked="checked"' : '';
html += `
<input type="radio" value="${i}" id="clock-${i}-${uniq_id}" name="${parameter_name}" ${checked}>
<label for="clock-${i}-${uniq_id}"></label>
`;
}
html += `</div>`;
return html;
});
});
/**

View file

@ -201,58 +201,70 @@
/*
* Create Clock
*/
@mixin clock($segments, $size, $default_color, $accent_color) {
@mixin clock($segments, $size, $default_color:null, $accent_color:null) {
$angle: 360 / $segments;
$skew: 90 + $angle;
$border_width: 3;
position: relative;
border: #{$border_width}px solid $almost_black;
padding: 0;
width: #{$size}px;
height: #{$size}px;
border-radius: 50%;
list-style: none;
overflow: hidden;
label {
.blades-clock {
position: relative;
@if $default_color {
border: #{$border_width}px solid $almost_black;
}
padding: 0;
width: #{$size}px;
height: #{$size}px;
border-radius: 50%;
list-style: none;
overflow: hidden;
position: absolute;
top: -50%;
right: -50%;
width: 100%;
height: 100%;
transform-origin: 0% 100%;
background-color: $accent_color;
background-size: cover;
@include changeable(0.1s, 0.8, 0.9);
}
label {
overflow: hidden;
position: absolute;
top: -50%;
right: -50%;
width: 100%;
height: 100%;
transform-origin: 0% 100%;
background-color: $accent_color;
input {
position: absolute;
display: none;
@include changeable(0.1s, 0.8, 0.9);
}
&:checked {
& ~ label {
background-color: $default_color;
}
& + label {
background-color: $accent_color;
input {
position: absolute;
display: none;
&:checked {
& ~ label {
@if $default_color {
background-color: $default_color;
}
}
& + label {
@if $accent_color {
background-color: $accent_color;
}
}
}
}
}
// Zero value to clear everything.
input[value="0"] {
display: none;
}
// Zero value to clear everything.
input[value="0"] {
display: none;
}
@for $i from 1 through $segments {
@for $i from 1 through $segments {
$rotate_angle: $angle * ($i - 1);
*:nth-child(#{$i * 2 + 1}) {
transform: rotate(#{$rotate_angle}deg) skewY(#{$skew}deg);
$rotate_angle: $angle * ($i - 1);
*:nth-child(#{$i * 2 + 1}) {
transform: rotate(#{$rotate_angle}deg) skewY(#{$skew}deg);
}
}
}

View file

@ -300,8 +300,8 @@ $hover-brightness: 0.8;
// Clock
#character-health-clock {
@include clock(4, 80, $almost_white, $red);
margin: 0 auto;
@include clock(4, 88);
}
#character-armor-uses {
@ -675,4 +675,32 @@ $hover-brightness: 0.8;
}
}
.clock-zero-label {
color: $almost_black;
top: 0px;
left: 0px;
position: absolute;
}
.clock-block {
.clocks {
&.clocks-4 {
@include clock(4, 200);
}
&.clocks-6 {
@include clock(6, 200);
}
&.clocks-8 {
@include clock(8, 200);
}
}
}
.clock-block .blades-clock-name-type {
> * {
margin-bottom: 10px;
max-width: 220px;
}
}
}

File diff suppressed because it is too large Load diff

After

Width:  |  Height:  |  Size: 114 KiB

File diff suppressed because it is too large Load diff

After

Width:  |  Height:  |  Size: 114 KiB

File diff suppressed because it is too large Load diff

After

Width:  |  Height:  |  Size: 115 KiB

File diff suppressed because it is too large Load diff

After

Width:  |  Height:  |  Size: 115 KiB

File diff suppressed because it is too large Load diff

After

Width:  |  Height:  |  Size: 115 KiB

File diff suppressed because it is too large Load diff

After

Width:  |  Height:  |  Size: 164 KiB

File diff suppressed because it is too large Load diff

After

Width:  |  Height:  |  Size: 165 KiB

File diff suppressed because it is too large Load diff

After

Width:  |  Height:  |  Size: 165 KiB

File diff suppressed because it is too large Load diff

After

Width:  |  Height:  |  Size: 165 KiB

File diff suppressed because it is too large Load diff

After

Width:  |  Height:  |  Size: 165 KiB

File diff suppressed because it is too large Load diff

After

Width:  |  Height:  |  Size: 165 KiB

File diff suppressed because it is too large Load diff

After

Width:  |  Height:  |  Size: 165 KiB

File diff suppressed because it is too large Load diff

After

Width:  |  Height:  |  Size: 211 KiB

File diff suppressed because it is too large Load diff

After

Width:  |  Height:  |  Size: 211 KiB

File diff suppressed because it is too large Load diff

After

Width:  |  Height:  |  Size: 211 KiB

File diff suppressed because it is too large Load diff

After

Width:  |  Height:  |  Size: 211 KiB

File diff suppressed because it is too large Load diff

After

Width:  |  Height:  |  Size: 211 KiB

File diff suppressed because it is too large Load diff

After

Width:  |  Height:  |  Size: 211 KiB

File diff suppressed because it is too large Load diff

After

Width:  |  Height:  |  Size: 211 KiB

File diff suppressed because it is too large Load diff

After

Width:  |  Height:  |  Size: 211 KiB

File diff suppressed because it is too large Load diff

After

Width:  |  Height:  |  Size: 212 KiB

View file

@ -372,17 +372,20 @@
width: 100%;
}
* #harm-armor #character-health-clock {
margin: 0 auto;
position: relative;
}
* #harm-armor #character-health-clock .blades-clock {
position: relative;
border: 3px solid #191813;
padding: 0;
width: 80px;
height: 80px;
width: 88px;
height: 88px;
border-radius: 50%;
list-style: none;
overflow: hidden;
margin: 0 auto;
background-size: cover;
}
* #harm-armor #character-health-clock label {
* #harm-armor #character-health-clock .blades-clock label {
overflow: hidden;
position: absolute;
top: -50%;
@ -390,37 +393,30 @@
width: 100%;
height: 100%;
transform-origin: 0% 100%;
background-color: red;
transition: filter 0.1s;
cursor: pointer;
}
* #harm-armor #character-health-clock label:hover {
* #harm-armor #character-health-clock .blades-clock label:hover {
filter: brightness(0.8);
opacity: 0.9;
}
* #harm-armor #character-health-clock input {
* #harm-armor #character-health-clock .blades-clock input {
position: absolute;
display: none;
}
* #harm-armor #character-health-clock input:checked ~ label {
background-color: #EEEFFF;
}
* #harm-armor #character-health-clock input:checked + label {
background-color: red;
}
* #harm-armor #character-health-clock input[value="0"] {
* #harm-armor #character-health-clock .blades-clock input[value="0"] {
display: none;
}
* #harm-armor #character-health-clock *:nth-child(3) {
* #harm-armor #character-health-clock .blades-clock *:nth-child(3) {
transform: rotate(0deg) skewY(180deg);
}
* #harm-armor #character-health-clock *:nth-child(5) {
* #harm-armor #character-health-clock .blades-clock *:nth-child(5) {
transform: rotate(90deg) skewY(180deg);
}
* #harm-armor #character-health-clock *:nth-child(7) {
* #harm-armor #character-health-clock .blades-clock *:nth-child(7) {
transform: rotate(180deg) skewY(180deg);
}
* #harm-armor #character-health-clock *:nth-child(9) {
* #harm-armor #character-health-clock .blades-clock *:nth-child(9) {
transform: rotate(270deg) skewY(180deg);
}
* #harm-armor #character-armor-uses div {
@ -1040,5 +1036,174 @@
* .blades-die-tooltip .die.failure {
color: red;
}
* .clock-zero-label {
color: #191813;
top: 0px;
left: 0px;
position: absolute;
}
* .clock-block .clocks.clocks-4 {
position: relative;
}
* .clock-block .clocks.clocks-4 .blades-clock {
position: relative;
padding: 0;
width: 200px;
height: 200px;
border-radius: 50%;
list-style: none;
overflow: hidden;
background-size: cover;
}
* .clock-block .clocks.clocks-4 .blades-clock label {
overflow: hidden;
position: absolute;
top: -50%;
right: -50%;
width: 100%;
height: 100%;
transform-origin: 0% 100%;
transition: filter 0.1s;
cursor: pointer;
}
* .clock-block .clocks.clocks-4 .blades-clock label:hover {
filter: brightness(0.8);
opacity: 0.9;
}
* .clock-block .clocks.clocks-4 .blades-clock input {
position: absolute;
display: none;
}
* .clock-block .clocks.clocks-4 .blades-clock input[value="0"] {
display: none;
}
* .clock-block .clocks.clocks-4 .blades-clock *:nth-child(3) {
transform: rotate(0deg) skewY(180deg);
}
* .clock-block .clocks.clocks-4 .blades-clock *:nth-child(5) {
transform: rotate(90deg) skewY(180deg);
}
* .clock-block .clocks.clocks-4 .blades-clock *:nth-child(7) {
transform: rotate(180deg) skewY(180deg);
}
* .clock-block .clocks.clocks-4 .blades-clock *:nth-child(9) {
transform: rotate(270deg) skewY(180deg);
}
* .clock-block .clocks.clocks-6 {
position: relative;
}
* .clock-block .clocks.clocks-6 .blades-clock {
position: relative;
padding: 0;
width: 200px;
height: 200px;
border-radius: 50%;
list-style: none;
overflow: hidden;
background-size: cover;
}
* .clock-block .clocks.clocks-6 .blades-clock label {
overflow: hidden;
position: absolute;
top: -50%;
right: -50%;
width: 100%;
height: 100%;
transform-origin: 0% 100%;
transition: filter 0.1s;
cursor: pointer;
}
* .clock-block .clocks.clocks-6 .blades-clock label:hover {
filter: brightness(0.8);
opacity: 0.9;
}
* .clock-block .clocks.clocks-6 .blades-clock input {
position: absolute;
display: none;
}
* .clock-block .clocks.clocks-6 .blades-clock input[value="0"] {
display: none;
}
* .clock-block .clocks.clocks-6 .blades-clock *:nth-child(3) {
transform: rotate(0deg) skewY(150deg);
}
* .clock-block .clocks.clocks-6 .blades-clock *:nth-child(5) {
transform: rotate(60deg) skewY(150deg);
}
* .clock-block .clocks.clocks-6 .blades-clock *:nth-child(7) {
transform: rotate(120deg) skewY(150deg);
}
* .clock-block .clocks.clocks-6 .blades-clock *:nth-child(9) {
transform: rotate(180deg) skewY(150deg);
}
* .clock-block .clocks.clocks-6 .blades-clock *:nth-child(11) {
transform: rotate(240deg) skewY(150deg);
}
* .clock-block .clocks.clocks-6 .blades-clock *:nth-child(13) {
transform: rotate(300deg) skewY(150deg);
}
* .clock-block .clocks.clocks-8 {
position: relative;
}
* .clock-block .clocks.clocks-8 .blades-clock {
position: relative;
padding: 0;
width: 200px;
height: 200px;
border-radius: 50%;
list-style: none;
overflow: hidden;
background-size: cover;
}
* .clock-block .clocks.clocks-8 .blades-clock label {
overflow: hidden;
position: absolute;
top: -50%;
right: -50%;
width: 100%;
height: 100%;
transform-origin: 0% 100%;
transition: filter 0.1s;
cursor: pointer;
}
* .clock-block .clocks.clocks-8 .blades-clock label:hover {
filter: brightness(0.8);
opacity: 0.9;
}
* .clock-block .clocks.clocks-8 .blades-clock input {
position: absolute;
display: none;
}
* .clock-block .clocks.clocks-8 .blades-clock input[value="0"] {
display: none;
}
* .clock-block .clocks.clocks-8 .blades-clock *:nth-child(3) {
transform: rotate(0deg) skewY(135deg);
}
* .clock-block .clocks.clocks-8 .blades-clock *:nth-child(5) {
transform: rotate(45deg) skewY(135deg);
}
* .clock-block .clocks.clocks-8 .blades-clock *:nth-child(7) {
transform: rotate(90deg) skewY(135deg);
}
* .clock-block .clocks.clocks-8 .blades-clock *:nth-child(9) {
transform: rotate(135deg) skewY(135deg);
}
* .clock-block .clocks.clocks-8 .blades-clock *:nth-child(11) {
transform: rotate(180deg) skewY(135deg);
}
* .clock-block .clocks.clocks-8 .blades-clock *:nth-child(13) {
transform: rotate(225deg) skewY(135deg);
}
* .clock-block .clocks.clocks-8 .blades-clock *:nth-child(15) {
transform: rotate(270deg) skewY(135deg);
}
* .clock-block .clocks.clocks-8 .blades-clock *:nth-child(17) {
transform: rotate(315deg) skewY(135deg);
}
* .clock-block .blades-clock-name-type > * {
margin-bottom: 10px;
max-width: 220px;
}
/*# sourceMappingURL=blades.css.map */

File diff suppressed because one or more lines are too long

View file

@ -139,7 +139,7 @@
}
},
"Item": {
"types": ["item", "class", "ability", "heritage", "background", "vice", "crew_upgrade", "cohort", "crew_type", "crew_reputation", "crew_upgrade", "crew_ability"],
"types": ["item", "class", "ability", "heritage", "background", "vice", "crew_upgrade", "cohort", "crew_type", "crew_reputation", "crew_upgrade", "crew_ability", "\uD83D\uDD5B clock"],
"templates": {
"default": {
"description": ""
@ -401,6 +401,10 @@
"connects": []
}
}
},
"\uD83D\uDD5B clock": {
"type": 4,
"value": "0"
}
}
}

View file

@ -165,7 +165,7 @@
<table>
<thead>
<th class="black-white" colspan="4">{{localize "BITD.Harm"}}</th>
<th class="black-white"><label for="character-{{actor._id}}-healing-clock-0">{{localize "BITD.Healing"}}</label></th>
<th class="black-white"><label>{{localize "BITD.Healing"}}</label></th>
<th class="black-white">{{localize "BITD.Armor"}}</th>
</thead>
<tbody>
@ -176,18 +176,8 @@
</td>
<td>{{localize "BITD.NeedHelp"}}</td>
<td rowspan="3">
{{#multiboxes data.healing-clock}}
<div id="character-health-clock">
<input type="radio" value="0" id="character-{{actor._id}}-healing-clock-0" name="data.healing-clock" checked="checked">
<input type="radio" value="1" id="character-{{actor._id}}-healing-clock-1" name="data.healing-clock">
<label for="character-{{actor._id}}-healing-clock-1"></label>
<input type="radio" value="2" id="character-{{actor._id}}-healing-clock-2" name="data.healing-clock">
<label for="character-{{actor._id}}-healing-clock-2"></label>
<input type="radio" value="3" id="character-{{actor._id}}-healing-clock-3" name="data.healing-clock">
<label for="character-{{actor._id}}-healing-clock-3"></label>
<input type="radio" value="4" id="character-{{actor._id}}-healing-clock-4" name="data.healing-clock">
<label for="character-{{actor._id}}-healing-clock-4"></label>
{{/multiboxes}}
{{{blades-clock "data.healing-clock" 4 data.healing-clock actor._id}}}
</div>
</td>
<td rowspan="3" id="character-armor-uses">

View file

@ -0,0 +1,21 @@
<form class="{{cssClass}} clock-block" autocomplete="off">
<div class="flexcol blades-clock-name-type">
{{#if editable}}
<input type="text" id="{{item._id}}-clock-name" name="name" value="{{item.name}}">
<select data-type="String" name="data.type">
{{#select data.type}}
<option value="4">4</option>
<option value="6">6</option>
<option value="8">8</option>
{{/select}}
</select>
{{/if}}
<div class="clocks clocks-{{data.type}}">
{{{blades-clock "data.value" data.type data.value item._id}}}
</div>
</div>
</form>