Checkboxes for DP ui

efs.css

@@ -185,4 +185,78 @@
     display: flex;
     align-items: baseline;
     justify-content: space-between;
-}
+}
+
+/* CHECKBOX */
+
+.cool-checkbox {
+    --size: 20px;
+    --border-size: 2px;
+    display: inline-block;
+    position: relative;
+    width: 17px;
+}
+
+.cool-checkbox *,
+.cool-checkbox *::after,
+.cool-checkbox *::before {
+    box-sizing: border-box;
+}
+
+.cool-checkbox input[type="checkbox"] {
+    display: inline-block;
+    vertical-align: middle;
+    opacity: 0;
+}
+
+.cool-checkbox input[type="checkbox"],
+.cool-checkbox label::before {
+    width: var(--size);
+    height: var(--size);
+    position: absolute;
+    left: 0;
+    top: 50%;
+    transform: translateY(-80%);
+}
+
+.cool-checkbox label {
+    display: inline-block;
+    position: relative;
+    padding: 0 0 0 calc(var(--size) + 7px);
+}
+
+.cool-checkbox label::before {
+    content: '';
+    border: var(--border-size) solid #000;
+    opacity: 0.7;
+    transition: opacity 0.3s;
+}
+
+.cool-checkbox input[type="checkbox"]:checked + label::before {
+    opacity: 1;
+}
+
+.cool-checkbox svg {
+    position: absolute;
+    top: calc(50% + var(--border-size));
+    left: var(--border-size);
+    width: calc(var(--size) - (var(--border-size) * 2));
+    height: calc(var(--size) - (var(--border-size) * 2));
+    margin-top: calc(var(--size) / -2);
+    pointer-events: none;
+}
+
+.cool-checkbox svg path {
+    stroke-width: 0;
+    fill: none;
+    transition: stroke-dashoffset 0.2s ease-in 0s;
+}
+
+.cool-checkbox svg path + path {
+    transition: stroke-dashoffset 0.2s ease-out 0.2s;
+}
+
+.cool-checkbox input[type="checkbox"]:checked ~ svg path {
+    stroke-dashoffset: 0;
+    stroke-width: calc(var(--size) / 2);
+}

efs.js

@@ -16,6 +16,7 @@ Hooks.once("init", function () {
     CONFIG.Item.documentClass = EFSItem;
     Items.unregisterSheet("core", ItemSheet);
     Items.registerSheet("efs", EFSItemSheet, { makeDefault: true, label: "EFS.Sheets.Item" })
+    registerHandlebarsHelpers();
 });
 
 Hooks.on("renderCameraViews", function (app, html, data){
@@ -27,3 +28,16 @@ Hooks.on("renderPlayerList", function (app, html, data){
     const cameraGM = html.find("span:contains('GM')");
     cameraGM.text(cameraGM.text().replace('GM', game.i18n.localize("EFS.Narator")));
 });
+
+function registerHandlebarsHelpers() {
+    Handlebars.registerHelper('times', function(n, block) {
+        var accum = '';
+        for(var i = 0; i < n; ++i)
+            accum += block.fn(i);
+        return accum;
+    });
+
+    Handlebars.registerHelper("lt", (v1, v2) => {
+        return v1 < v2;
+    });
+}

module/sheets/efs-character-sheet.js

@@ -17,6 +17,7 @@ export default class EFSCharacterSheet extends ActorSheet {
         html.find(".clickable.approach").click(this._approachClicked.bind(this));
         html.find(".heroic-mode").click(this._heroicModeClicked.bind(this));
         html.find(".clickable#extra").click(this._showExtra.bind(this));
+        html.find(".dp").change(this._dpClick.bind(this))
 
         html.find(".skill-4").click(this._skill4Click.bind(this));
         html.find(".skill-8").click(this._skill8Click.bind(this));
@@ -123,10 +124,29 @@ export default class EFSCharacterSheet extends ActorSheet {
         this.render(true);
     }
 
+    async _dpClick(event) {
+        let set = event.target.checked;
+        let dp = !set ? +event.target.dataset.num : +event.target.dataset.num+1;
+
+        await this.actor.update({"system.dp.value": this.actor.system.dp.max - dp})
+    }
+
     async _onSubmit(event, options) {
         const formData = this._getSubmitData({});
 
-        formData["data.dp.value"] = formData["data.dp.max"] - formData["data.defeatPoints"]
+        // let defeatPoints = 0;
+        //
+        // let dps = formData["dp"].reverse();
+        // let max = dps.length;
+        // for (const idx in dps) {
+        //     if (dps[idx]) {
+        //         defeatPoints = max - idx
+        //         break
+        //     }
+        // }
+        //
+        //
+        // formData["data.dp.value"] = formData["data.dp.max"] - defeatPoints
 
         options = options || {};
         options.updateData = formData;

system.json

@@ -1,7 +1,7 @@
 {
   "title": "Bylina Failure (Былинный Отказ)",
   "description": "The official system for Bylina Failure game. Официальная система для игры Былинный отказ",
-  "version": "2.0-rc1",
+  "version": "2.0-rc2",
   "compatibility": {
     "minimum": "9",
     "verified": "11"

templates/sheets/efs-character-sheet.html

@@ -62,14 +62,31 @@
                                  class="picture"/>
                         </div>
                         <div class="photo-info">
-                            <div class="dp">
                         <span class="label">
                             {{ localize 'EFS.Character.DP' }} ({{ localize 'EFS.Max' }}<input name="data.dp.max"
                                                                                               class="text-input short"
                                                                                               value="{{data.dp.max}}"/>)
+
+                            {{#times data.dp.max}}
+                                <div class="cool-checkbox">
+                                    {{#if (lt this ../data.defeatPoints)}}
+                                    <input type="checkbox" name="dp" class="dp" id="dp-{{this}}" data-num="{{this}}" checked>
+                                    {{else}}
+                                    <input type="checkbox" name="dp" class="dp" id="dp-{{this}}" data-num="{{this}}">
+                                    {{/if}}
+                                    <label for="dp-{{this}}"></label>
+                                    <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
+                                        <path d="M 10 10 L 90 90" stroke="#000" stroke-dasharray="113"
+                                              stroke-dashoffset="113"></path>
+                                        <path d="M 90 10 L 10 90" stroke="#000" stroke-dasharray="113"
+                                              stroke-dashoffset="113"></path>
+                                    </svg>
+                                </div>
+                            {{/times}}
                         </span>
-                                <input name="data.defeatPoints" class="text-input short" value="{{data.defeatPoints}}"/>
-                            </div>
+
+
+                            <!--<input name="data.defeatPoints" class="text-input short" value="{{data.defeatPoints}}"/>-->
                             <div class="approaches">
                                 <div>
                                     <div class="flex row">
@@ -137,10 +154,10 @@ <h2 class="control-header">{{localize 'EFS.Items'}} <span
                         <div class="item-list">
                             {{#each items as |item|}}
                             <div class="item-name">
-                                <span  class="item clickable regular" data-id="{{item._id}}">
+                                <span class="item clickable regular" data-id="{{item._id}}">
                                 {{item.name}} {{#if (gt item.data.dice 0)}}{{ localize 'EFS.DicePrefix'
                                 }}{{item.data.dice}}{{/if}}</span>
-                            <span class="item-control">
+                                <span class="item-control">
                                 <span data-id="{{item._id}}" class="edit-item clickable fa fa-edit"></span>
                                 <span data-id="{{item._id}}" class="delete-item clickable fa fa-trash"></span>
                             </span>