hench/templates/cards/cards.hbs

<form>

    Cards sheet

    <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 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 hench-centered hench-clickable hench-cards-action-draw">
                            <span class="hench-flex-resizeable">
                                Draw
                            </span>
                        </div>
                        <div class="hench-row hench-padding-narrow hench-white hench-centered {{#if canManage}}hench-clickable hench-cards-action-edit-deck{{else}}hench-strikethrough{{/if}}">
                            <span class="hench-flex-resizeable">
                                Edit deck
                            </span>
                        </div>
                        <div class="hench-row hench-padding-narrow hench-white hench-centered hench-clickable hench-cards-action-draw-bottom">
                            <span class="hench-flex-resizeable">
                                Draw from Bottom
                            </span>
                        </div>
                    </div>
                    {{#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}}" />
                    </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-centered hench-clickable hench-cards-action-reset">
                            <span class="hench-flex-resizeable">
                                Reset
                            </span>
                        </div>
                        <div class="hench-row hench-padding-narrow hench-centered hench-white hench-clickable hench-cards-action-view-discard">
                            <span class="hench-flex-resizeable">
                                View discard
                            </span>
                        </div>
                        <div class="hench-row hench-padding-narrow hench-white hench-centered hench-clickable hench-cards-action-return-spread">
                            <span class="hench-flex-resizeable">
                                Return Spread
                            </span>
                        </div>
                    </div>
                    <div class="hench-box hench-flex-resizeable hench-card-fixed-item">
                        {{#topCard document "DISCARD"}}
                            <img class="hench-image-resize-vertical" src="{{#if hasTopCard}}{{topCardImage}}{{/if}}" />
                        {{/topCard}}
                    </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 hench-clickable hench-cards-action-play" data-card-index="{{@index}}">
                            <img class="hench-image-resize-vertical" src="{{this.currentFace.img}}" title="{{this.system.cue}}" />
                        </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
-->