GH-82 Add Clocks

- Closes #82
- Adds clocks

CHANGELOG.txt

@@ -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)

README.md

@@ -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.

module/blades-item-sheet.js

@@ -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"}]
 		});
   }

module/blades.js

@@ -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;
+  });
+
 });
 
 /**

scss/mixin.scss

@@ -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);
+      }
     }
   }
 

scss/style.scss

@@ -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;
+    }
+  }
 }

styles/blades.css

@@ -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 */

template.json

@@ -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"
   }
 }
 }

templates/actor-sheet.html

@@ -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">

templates/items/🕛 clock.html

@@ -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>