From f91ecd6d9541bc84bc55141c152dc283124bb40a Mon Sep 17 00:00:00 2001
From: walcutt <walcutt.0@gmail.com>
Date: Thu, 26 Dec 2024 15:38:59 -0500
Subject: [PATCH] basic controls

---
 hench.mjs                           | 11 ++++++++++
 module/sheets/hench-cards-sheet.mjs | 32 ++++++++++++++++++++++++++++-
 styles/hench.css                    |  4 ++++
 templates/cards/cards.hbs           | 32 +++++++++++++++++------------
 4 files changed, 65 insertions(+), 14 deletions(-)

diff --git a/hench.mjs b/hench.mjs
index d094300..f139194 100644
--- a/hench.mjs
+++ b/hench.mjs
@@ -37,6 +37,17 @@ Handlebars.registerHelper('canIncrease', (value, cap) => {
 Handlebars.registerHelper('increment', (value) => (value + 1));
 Handlebars.registerHelper('decrement', (value) => (value - 1));
 
+Handlebars.registerHelper('topCard', (cards, zone, options) => {
+    const pile = cards.cardsInZone(zone);
+
+    const topCardImage = pile[0]?.currentFace?.img;
+    const defaultImage = cards.img;
+
+    const hasTopCard = pile.length > 0;
+
+    return options.fn({ hasTopCard: hasTopCard, topCardImage: topCardImage, deckImage: defaultImage });
+});
+
 Hooks.once("init", () => {
     CONFIG.Actor.dataModels = {
         hench: HenchDataModel,
diff --git a/module/sheets/hench-cards-sheet.mjs b/module/sheets/hench-cards-sheet.mjs
index 0260f2a..5afb581 100644
--- a/module/sheets/hench-cards-sheet.mjs
+++ b/module/sheets/hench-cards-sheet.mjs
@@ -1,3 +1,5 @@
+import { CARD_ZONES } from "../cards/hench-card.mjs";
+
 export class HenchCardsSheet extends CardsConfig {
     /** @override */
     get template() {
@@ -7,13 +9,41 @@ export class HenchCardsSheet extends CardsConfig {
     /** @override */
     getData() {
         const t = super.getData();
-        console.log(t);
         return t;
     }
 
     /** @override */
     activateListeners(html) {
         super.activateListeners(html);
+
+        html.find('.hench-cards-action-draw').on('click', (event) => {
+            if(this.document.spread.length < 5) {
+                this.document.drawSpread(1);
+            }
+        });
+
+        html.find('.hench-cards-action-play').on('click', async (event) => {
+            const element = event.currentTarget;
+            const index = element.dataset.cardIndex;
+
+            // play the card!
+            await this.document.sendCards(this.document.spread.slice(index, index + 1), CARD_ZONES.DISCARD, CONST.CARD_DRAW_MODES.TOP);
+            await this.document.sendCards(this.document.spread, CARD_ZONES.DECK, CONST.CARD_DRAW_MODES.BOTTOM);
+        });
+
+        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);
+            }
+        });
+
+        html.find('.hench-cards-action-reset').on('click', (event) => {
+            this.document.resetDeck();
+        });
+
+        html.find('.hench-cards-action-return-spread').on('click', (event) => {
+            this.document.sendCards(this.document.spread, CARD_ZONES.DECK, CONST.CARD_DRAW_MODES.BOTTOM);
+        });
     }
 
     /** @override */
diff --git a/styles/hench.css b/styles/hench.css
index 6b26240..e80686e 100644
--- a/styles/hench.css
+++ b/styles/hench.css
@@ -139,6 +139,10 @@
     resize: vertical;
 }
 
+.hench-clickable {
+    cursor: pointer;
+}
+
 /* Specific */
 
 .hench-row-even {
diff --git a/templates/cards/cards.hbs b/templates/cards/cards.hbs
index d33e4ed..5ee248b 100644
--- a/templates/cards/cards.hbs
+++ b/templates/cards/cards.hbs
@@ -7,11 +7,13 @@
         <div class="hench-row hench-flex-resizeable hench-gap-wide">
             <div class="hench-box hench-m-grey hench-flex-resizeable hench-padding-wide hench-gap-narrow">
                 <div class="hench-row hench-row-align-stretch hench-gap-narrow">
-                    <div class="hench-box hench-flex-resizeable hench-card-fixed-item">
-                        <img class="hench-image-resize-vertical" src="{{data.img}}" />
+                    <div class="hench-box hench-flex-resizeable hench-card-fixed-item hench-clickable hench-cards-action-draw">
+                        {{#topCard document "DECK"}}
+                            <img class="hench-image-resize-vertical" src="{{#if hasTopCard}}{{deckImage}}{{/if}}" />
+                        {{/topCard}}
                     </div>
                     <div class="hench-box hench-flex-resizeable hench-gap-narrow hench-row-even">
-                        <div class="hench-row hench-padding-narrow hench-white">
+                        <div class="hench-row hench-padding-narrow hench-white hench-clickable hench-cards-action-draw">
                             <span>
                                 Draw
                             </span>
@@ -21,34 +23,38 @@
                                 View deck
                             </span>
                         </div>
-                        <div class="hench-row hench-padding-narrow hench-white">
+                        <div class="hench-row hench-padding-narrow hench-white hench-clickable hench-cards-action-draw-bottom">
                             <span>
                                 Draw from Bottom
                             </span>
                         </div>
                     </div>
                     <div class="hench-box hench-flex-resizeable hench-card-fixed-item">
-                        <img class="hench-image-resize-vertical" src="{{data.img}}" />
+                        {{#topCard document "HELD"}}
+                            <img class="hench-image-resize-vertical" src="{{#if hasTopCard}}{{topCardImage}}{{/if}}" />
+                        {{/topCard}}
                     </div>
                     <div class="hench-box hench-flex-resizeable hench-gap-narrow hench-row-even">
-                        <div class="hench-row hench-padding-narrow hench-white">
+                        <div class="hench-row hench-padding-narrow hench-white hench-clickable hench-cards-action-reset">
                             <span>
-                                Draw
+                                Reset
                             </span>
                         </div>
                         <div class="hench-row hench-padding-narrow hench-white">
                             <span>
-                                View deck
+                                View discard
                             </span>
                         </div>
-                        <div class="hench-row hench-padding-narrow hench-white">
+                        <div class="hench-row hench-padding-narrow hench-white hench-clickable hench-cards-action-return-spread">
                             <span>
-                                Draw from Bottom
+                                Return Spread
                             </span>
                         </div>
                     </div>
                     <div class="hench-box hench-flex-resizeable hench-card-fixed-item">
-                        <img class="hench-image-resize-vertical" src="{{data.img}}" />
+                        {{#topCard document "DISCARD"}}
+                            <img class="hench-image-resize-vertical" src="{{#if hasTopCard}}{{topCardImage}}{{/if}}" />
+                        {{/topCard}}
                     </div>
                 </div>
             </div>
@@ -58,8 +64,8 @@
             <div class="hench-box hench-m-grey hench-flex-resizeable hench-padding-wide hench-gap-narrow">
                 <div class="hench-row hench-row-even hench-gap-narrow">
                     {{#each document.spread}}
-                        <div class="hench-box hench-flex-resizeable hench-card-fixed-item">
-                            <img class="hench-image-resize-vertical" src="{{this.currentFace.img}}" />
+                        <div class="hench-box hench-flex-resizeable hench-card-fixed-item hench-clickable hench-cards-action-play" data-card-index="{{@index}}">
+                            <img class="hench-image-resize-vertical" src="{{this.currentFace.img}}" alt="{{this.system.cue}}" />
                         </div>
                     {{else}}
                         <div class="hench-box hench-flex-resizeable hench-card-fixed-item hench-card-empty"></div>