Add deck editing

hench.mjs

@@ -64,6 +64,13 @@ Hooks.once("init", () => {
     };
     CONFIG.Cards.documentClass = HenchCards;
 
+    // ABSOLUTE FUCKING CLUDGE:
+    // For some reason, the Card embedded doc in Cards is filed under "cards" and not "Card",
+    // And/or the lookup to create embedded documents is fucked beyond belief.
+    CONFIG.cards = {
+        documentClass: HenchCard,
+    };
+
     console.log(CONFIG);
 
     Actors.unregisterSheet('core', ActorSheet);

module/sheets/hench-cards-sheet.mjs

@@ -1,4 +1,6 @@
 import { CARD_ZONES } from "../cards/hench-card.mjs";
+import { HenchDeckEditor } from "./hench-deck-editor.mjs";
+import { HenchDiscardView } from "./hench-discard-view.mjs";
 
 export class HenchCardsSheet extends CardsConfig {
     /** @override */
@@ -31,6 +33,11 @@ export class HenchCardsSheet extends CardsConfig {
             await this.document.sendCards(this.document.spread, CARD_ZONES.DECK, CONST.CARD_DRAW_MODES.BOTTOM);
         });
 
+        html.find('.hench-card-action-play-held').on('click', async (event) => {
+            // play the card!
+            await this.document.sendCards(this.document.held.slice(0, 1), CARD_ZONES.DISCARD, CONST.CARD_DRAW_MODES.TOP);
+        });
+
         html.find('.hench-cards-action-draw-bottom').on('click', (event) => {
             if(this.document.spread.length < 5) {
                 this.document.drawSpread(1, CONST.CARD_DRAW_MODES.BOTTOM);
@@ -44,6 +51,16 @@ export class HenchCardsSheet extends CardsConfig {
         html.find('.hench-cards-action-return-spread').on('click', (event) => {
             this.document.sendCards(this.document.spread, CARD_ZONES.DECK, CONST.CARD_DRAW_MODES.BOTTOM);
         });
+
+        html.find('.hench-cards-action-edit-deck').on('click', (event) => {
+            const editor = new HenchDeckEditor(this.document);
+            editor.render(true);
+        });
+
+        html.find('.hench-cards-action-view-discard').on('click', (event) => {
+            const discard = new HenchDiscardView(this.document);
+            discard.render(true);
+        });
     }
 
     /** @override */

module/sheets/hench-deck-editor.mjs

@@ -0,0 +1,145 @@
+import { CARD_ZONES } from "../cards/hench-card.mjs";
+import { updateField } from "../helpers/mutation-helper.mjs";
+
+export class HenchDeckEditor extends CardsConfig {
+    /** @override */
+    get template() {
+        return `systems/hench/templates/cards/deck.hbs`;
+    }
+
+    /** @override */
+    getData() {
+        return super.getData();
+    }
+
+    /** @override */
+    activateListeners(html) {
+        super.activateListeners(html);
+
+        html.find('.hench-text-input').on('change', async (event) => {
+            const element = event.currentTarget;
+            const path = element.dataset.fieldPath;
+            const value = element.value;
+
+            await updateField(this.document, path, value);
+        });
+
+        html.find('.hench-reset-deck').on('click', (event) => {
+            this.document.resetDeck();
+        });
+
+        html.find('.hench-add-card').on('click', (event) => {
+            this.document.createEmbeddedDocuments("cards", [
+                {
+                    name: 'New Card',
+                    faces: [
+                        {
+                            name: 'New Card',
+                            img: '',
+                        }
+                    ],
+                    face: 0,
+                    height: 3,
+                    sort: 0,
+                    system: {
+                        cue: "Default cue"
+                    }
+                }
+            ]);
+        });
+
+        html.find('.hench-card-img-input').on('click', async (event) => {
+            const element = event.currentTarget;
+            const id = element.dataset.cardId;
+
+            const card = this.document.cards.get(id);
+            let face = card.currentFace;
+
+            const filePicker = new FilePicker();
+            filePicker.callback = (file) => {
+                face.img = file;
+                
+                const mutation = [
+                    {
+                        _id: id,
+                        faces: [
+                            face
+                        ],
+                    }
+                ];
+
+                this.document.updateCards(mutation);
+            };
+
+            const fullPath = filePicker._inferCurrentDirectory(face.img);
+
+            filePicker.activeSource = fullPath[0];
+
+            await filePicker.browse(face.img);
+
+            await filePicker.render();
+        });
+
+        html.find('.hench-card-name-input').on('change', async (event) => {
+            const element = event.currentTarget;
+            const id = element.dataset.cardId;
+
+            const value = element.value;
+            const subPath = element.dataset.field;
+
+            const card = this.document.cards.get(id);
+            let face = card.currentFace;
+            face.name = value;
+
+            const mutation = [
+                {
+                    _id: id,
+                    faces: [face],
+                }
+            ];
+
+            await this.document.updateCards(mutation);
+        });
+
+        html.find('.hench-card-text-input').on('change', async (event) => {
+            const element = event.currentTarget;
+            const id = element.dataset.cardId;
+
+            const value = element.value;
+            const subPath = element.dataset.field;
+
+            const mutation = [
+                {
+                    _id: id,
+                    [subPath]: value,
+                }
+            ];
+
+            await this.document.updateCards(mutation);
+        });
+
+        html.find('.hench-card-hold-button').on('click', (event) => {
+            const element = event.currentTarget;
+            const id = element.dataset.cardId;
+
+            const card = this.document.cards.get(id);
+
+            this.document.sendCards([card], CARD_ZONES.HELD);
+        });
+
+        html.find('.hench-card-delete-button').on('click', async (event) => {
+            const element = event.currentTarget;
+            const id = element.dataset.cardId;
+
+            await this.document.deleteEmbeddedDocuments("cards", [id]);
+            await this.document.realignSorting();
+        });
+    }
+
+    /** @override */
+    static get defaultOptions() {
+        let opts = super.defaultOptions;
+
+        return opts;
+    }
+}

module/sheets/hench-discard-view.mjs

@@ -0,0 +1,26 @@
+import { CARD_ZONES } from "../cards/hench-card.mjs";
+import { updateField } from "../helpers/mutation-helper.mjs";
+
+export class HenchDiscardView extends CardsConfig {
+    /** @override */
+    get template() {
+        return `systems/hench/templates/cards/view.hbs`;
+    }
+
+    /** @override */
+    getData() {
+        return super.getData();
+    }
+
+    /** @override */
+    activateListeners(html) {
+        super.activateListeners(html);
+    }
+
+    /** @override */
+    static get defaultOptions() {
+        let opts = super.defaultOptions;
+
+        return opts;
+    }
+}

templates/cards/cards.hbs

@@ -13,40 +13,40 @@
                         {{/topCard}}
                     </div>
                     <div class="hench-box hench-flex-resizeable hench-gap-narrow hench-row-even">
-                        <div class="hench-row hench-padding-narrow hench-white hench-clickable hench-cards-action-draw">
+                        <div class="hench-row hench-padding-narrow hench-white hench-centered hench-clickable hench-cards-action-draw">
-                            <span>
+                            <span class="hench-flex-resizeable">
                                 Draw
                             </span>
                         </div>
-                        <div class="hench-row hench-padding-narrow hench-white">
+                        <div class="hench-row hench-padding-narrow hench-white hench-centered hench-clickable hench-cards-action-edit-deck">
-                            <span>
+                            <span class="hench-flex-resizeable">
-                                View deck
+                                Edit deck
                             </span>
                         </div>
-                        <div class="hench-row hench-padding-narrow hench-white hench-clickable hench-cards-action-draw-bottom">
+                        <div class="hench-row hench-padding-narrow hench-white hench-centered hench-clickable hench-cards-action-draw-bottom">
-                            <span>
+                            <span class="hench-flex-resizeable">
                                 Draw from Bottom
                             </span>
                         </div>
                     </div>
-                    <div class="hench-box hench-flex-resizeable hench-card-fixed-item">
+                    {{#topCard document "HELD"}}
-                        {{#topCard document "HELD"}}
+                    <div class="hench-box hench-flex-resizeable hench-card-fixed-item {{#if hasTopCard}}hench-card-action-play-held hench-clickable{{/if}}">
-                            <img class="hench-image-resize-vertical" src="{{#if hasTopCard}}{{topCardImage}}{{/if}}" />
+                        <img class="hench-image-resize-vertical" src="{{#if hasTopCard}}{{topCardImage}}{{/if}}" />
-                        {{/topCard}}
                     </div>
+                    {{/topCard}}
                     <div class="hench-box hench-flex-resizeable hench-gap-narrow hench-row-even">
-                        <div class="hench-row hench-padding-narrow hench-white hench-clickable hench-cards-action-reset">
+                        <div class="hench-row hench-padding-narrow hench-white hench-centered hench-clickable hench-cards-action-reset">
-                            <span>
+                            <span class="hench-flex-resizeable">
                                 Reset
                             </span>
                         </div>
-                        <div class="hench-row hench-padding-narrow hench-white">
+                        <div class="hench-row hench-padding-narrow hench-centered hench-white hench-clickable hench-cards-action-view-discard">
-                            <span>
+                            <span class="hench-flex-resizeable">
                                 View discard
                             </span>
                         </div>
-                        <div class="hench-row hench-padding-narrow hench-white hench-clickable hench-cards-action-return-spread">
+                        <div class="hench-row hench-padding-narrow hench-white hench-centered hench-clickable hench-cards-action-return-spread">
-                            <span>
+                            <span class="hench-flex-resizeable">
                                 Return Spread
                             </span>
                         </div>

templates/cards/deck.hbs

@@ -0,0 +1,56 @@
+<form>
+    <div class="hench-sheet-container hench-padding-wide hench-gap-wide hench-white">
+        <div class="hench-row hench-gap-wide">
+            <div class="hench-box hench-flex-resizeable hench-l-grey hench-padding-wide hench-gap-narrow">
+                <div class="hench-row hench-gap-narrow">
+                    <label class="hench-flex-fixed">Name: </label>
+                    <input type="text" class="hench-text-input hench-flex-resizeable" value="{{document.name}}" data-field-path="name">
+                </div>
+            </div>
+            <div class="hench-box hench-flex-fixed hench-m-grey hench-padding-wide hench-gap-narrow hench-clickable hench-reset-deck">
+                Shuffle Cards
+            </div>
+            <div class="hench-box hench-flex-fixed hench-d-grey hench-padding-wide hench-gap-narrow hench-clickable hench-add-card">
+                + Card
+            </div>
+        </div>
+        <div class="hench-row hench-gap-wide">
+            <div class="hench-box hench-flex-resizeable hench-m-grey hench-padding-narrow hench-gap-narrow">
+                <div class="hench-row">
+                    <div class="hench-centered hench-title hench-flex-resizeable">
+                        Deck
+                    </div>
+                </div>
+                {{#each document.deck}}
+                    <div class="hench-row hench-l-grey hench-padding-narrow hench-gap-narrow">
+                        <div class="hench-box hench-flex-fixed">
+                            <img src="{{this.currentFace.img}}" class="hench-card-img-input hench-flex-fixed hench-clickable" style="height:3em" data-card-id="{{this._id}}" data-field="img" />
+                        </div>
+                        <div class="hench-box hench-flex-resizeable">
+                            <div class="hench-row hench-gap-narrow">
+                                <label class="hench-flex-fixed">
+                                    Name: 
+                                </label>
+                                <input type="text" class="hench-card-name-input hench-flex-resizeable" data-card-id="{{this._id}}" data-field="name" value="{{this.name}}" />
+                            </div>
+                            <div class="hench-row hench-gap-narrow">
+                                <label class="hench-flex-fixed">Cue: </label>
+                                <input type="text" class="hench-card-text-input hench-flex-resizeable" data-card-id="{{this._id}}" data-field="system.cue" value="{{this.system.cue}}" />
+                            </div>
+                        </div>
+                        <div class="hench-box hench-flex-fixed">
+                            <div class="hench-row hench-flex-resizeable hench-gap-narrow">
+                                <div class="hench-card-hold-button hench-flex-fixed hench-clickable" data-card-id="{{this._id}}">
+                                    Hold
+                                </div>
+                                <div class="hench-card-delete-button hench-flex-fixed hench-clickable" data-card-id="{{this._id}}">
+                                    Delete
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                {{/each}}
+            </div>
+        </div>
+    </div>
+</form>

templates/cards/view.hbs

@@ -0,0 +1,32 @@
+<form>
+    <div class="hench-sheet-container hench-padding-wide hench-gap-wide hench-white">
+        <div class="hench-row hench-gap-wide">
+            <div class="hench-box hench-flex-resizeable hench-m-grey hench-padding-narrow hench-gap-narrow">
+                <div class="hench-row">
+                    <div class="hench-centered hench-title hench-flex-resizeable">
+                        Discard
+                    </div>
+                </div>
+                {{#each document.discard}}
+                    <div class="hench-row hench-l-grey hench-padding-narrow hench-gap-narrow">
+                        <div class="hench-box hench-flex-fixed">
+                            <img src="{{this.currentFace.img}}" class="hench-flex-fixed" style="height:3em" data-card-id="{{this._id}}" data-field="img" />
+                        </div>
+                        <div class="hench-box hench-flex-resizeable">
+                            <div class="hench-row hench-gap-narrow">
+                                <label class="hench-flex-fixed">
+                                    Name: 
+                                </label>
+                                {{this.name}}
+                            </div>
+                            <div class="hench-row hench-gap-narrow">
+                                <label class="hench-flex-fixed">Cue: </label>
+                                {{this.system.cue}}
+                            </div>
+                        </div>
+                    </div>
+                {{/each}}
+            </div>
+        </div>
+    </div>
+</form>