Cards sheet first draft

module/cards/hench-cards.mjs

@@ -136,7 +136,7 @@ export class HenchCards extends Cards {
     async drawSpread(amount, from = CONST.CARD_DRAW_MODES.TOP) {
         let cardsToGrab = [];
 
-        switch(dest) {
+        switch(from) {
             case CONST.CARD_DRAW_MODES.BOTTOM:
             case CONST.CARD_DRAW_MODES.LAST:
                 cardsToGrab = this.deck.slice(this.deck.length - amount, this.deck.length);

module/sheets/hench-cards-sheet.mjs

@@ -6,11 +6,22 @@ export class HenchCardsSheet extends CardsConfig {
 
     /** @override */
     getData() {
-        return super.getData();
+        const t = super.getData();
+        console.log(t);
+        return t;
     }
 
     /** @override */
     activateListeners(html) {
         super.activateListeners(html);
     }
+
+    /** @override */
+    static get defaultOptions() {
+        let opts = super.defaultOptions;
+
+        opts.resizable = true;
+
+        return opts;
+    }
 }

styles/hench.css

@@ -66,6 +66,10 @@
     justify-content: center;
 }
 
+.hench-sheet-container.hench-unbiased > * {
+    flex-basis: 0;
+}
+
 .hench-box {
     display: flex;
     flex-direction: column;
@@ -87,6 +91,10 @@
     flex-basis: auto;
 }
 
+.hench-box > .hench-row-align-stretch {
+    align-items: stretch;
+}
+
 .hench-flex-fixed {
     flex-grow: 0;
     flex-shrink: 0;
@@ -133,7 +141,7 @@
 
 /* Specific */
 
-.hench-row-even{
+.hench-row-even {
     justify-content: space-evenly;
 }
 
@@ -158,6 +166,18 @@
     width: 10em;
 }
 
+.hench-image-resize-vertical {
+    aspect-ratio: initial;
+}
+
+.hench-card-fixed-item {
+    max-width: 20%;
+}
+
+.hench-card-fixed-item.hench-card-empty {
+    aspect-ratio: 2 / 3;
+}
+
 .hench-harm-fixed-width {
     width: 8em;
     text-align: center;

templates/cards/cards.hbs

@@ -1,3 +1,98 @@
 <form>
+
     Cards sheet
-</form>
+
+    <div class="hench-sheet-container hench-unbiased hench-padding-wide hench-gap-wide hench-white">
+        <!-- Decks -->
+        <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>
+                    <div class="hench-box hench-flex-resizeable hench-gap-narrow hench-row-even">
+                        <div class="hench-row hench-padding-narrow hench-white">
+                            <span>
+                                Draw
+                            </span>
+                        </div>
+                        <div class="hench-row hench-padding-narrow hench-white">
+                            <span>
+                                View deck
+                            </span>
+                        </div>
+                        <div class="hench-row hench-padding-narrow hench-white">
+                            <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}}" />
+                    </div>
+                    <div class="hench-box hench-flex-resizeable hench-gap-narrow hench-row-even">
+                        <div class="hench-row hench-padding-narrow hench-white">
+                            <span>
+                                Draw
+                            </span>
+                        </div>
+                        <div class="hench-row hench-padding-narrow hench-white">
+                            <span>
+                                View deck
+                            </span>
+                        </div>
+                        <div class="hench-row hench-padding-narrow hench-white">
+                            <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}}" />
+                    </div>
+                </div>
+            </div>
+        </div>
+        <!-- Spread -->
+        <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-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>
+                    {{else}}
+                        <div class="hench-box hench-flex-resizeable hench-card-fixed-item hench-card-empty"></div>
+                    {{/each}}
+                </div>
+            </div>
+        </div>
+    </div>
+</form>
+
+<!--
+
+| deck | ui | held | ui | deck |
+|  c   | c  |  C   | c  |  c   |
+
+deck click -> draw card to spread  (max 5)
+ui:
+  - draw -> draw card to spread (max 5)
+  - view -> open view-deck dialogue (GM only)
+  - draw from bottom -> draw card to spread from bottom (max 5)
+held click -> play to discard
+ui:
+  - shuffle -> shuffle
+  - reset -> reset & shuffle
+  - view -> open view-discard dialogue (all players)
+discard click -> ???
+
+card:
+| play |
+| card |
+| cue |
+
+play -> play card
+card -> image
+cue -> cue
+-->