zeel01/monarch

A Foundry VTT card UI fit for royalty

🦋 Monarch - A card UI fit for royalty.

Monarch is currently in beta. There are some rough edges and incomplete features. Feel free to open issues if you find problems.

Monarch is an enhanced card UI for Foundry VTT v9+ which provides replacements for card, hand, deck, and pile sheets.

Features

Monarch includes apps for hands, decks, cards, and piles. It also remembers the positions of open card sheets, and restores them when the application is reloaded. This allows players and GMs to keep their hands, and any important card sheets, open without them being closed acceidentally.

Monarch supports drag and drop, including moving cards between piles, decks, and hands as well as re-ordering cards in these containers.

Settings

Card Height - You can configure the visual hieght of cards in Monarch applications. This value is in pixels, the default is 200. Adjusting this will change how large cards appear in decks, piles, and hands. Note: Other clients may need to refresh to see this change

🦋 My Hand

The "My Hand" sheet displays your hand similarly to how you might see it in real life. All of the cards are layed out in a compact "fan" format. You can see more details about each card by hovering your mouse over it. You can also play a card, flip it over, or view its individual sheet.

🦋 Card

The card sheet is a compact view of a single card which shows off the artwork. When you hover your mouse over the card, you will reveal additional information and can edit its properties. There is a button for editing the faces and back of the card as well. There is also a magnifying glass button to pop open the card artwork for a full view.

🦋 Deck

The deck sheet is a slightly restyled version of the standard deck sheet, which shows the card artwork more clearly, and arranges the cards in a grid rather than rows.

🦋 Pile

The pile sheet is very similar to the deck sheet, but with slightly different controls.

Using Monarch

To use Monarch, open one of the supported documents (card, deck, pile, hand) and click the "⚙️ Sheet" button in the title bar. This will open the sheet config window. You can then choose to set either "This Sheet" for this specific document, or "Default Sheet" for all documents of this type to use the corresponding 🦋 Monarch sheet.

🦋 Monarch API

Monarch is designed to be flexible for the various needs of systems and games. It provides an API for adding custom information badges, and custom interactive buttons to the various sheets.

Technical Details

This section contains technical details about the Monarch API. The next section will give examples and instructions on how to use it.

The Monarch Class

For convenience, the Monarch class has been attached to window for global access. This class contains all the base functionality of the module, and references to the various other classes it contains.

Hooks

Monarch adds the following hooks:

getMonarch{Application}Components

This hook fires just before any Monarch sheet renders, the name will depend on which sheet is rendering: getMonarchHandComponents, getMonarchDeckComponents, getMonarchPileComponents, or getMonarchCardComponents. This hook is used to gather data for constructing information badges and interactive controls on the application. Hooks for the full inheritance chain of Monarch apllications will fire, including getMonarchApplicationComponents as the base and for all Cards applications getMonarchCardsConfigComponents. This should allow for either per-app control of components, or modification to all apps at once.

Parameters

Parameter	Type	Description
monarch	FormApplication	The Monarch application object.
components	Components	An object containing arrays of different kinds of components.
components.badges	Array<CardBadge>	An array of information badges to add to the application. These are added to each card individually for piles.
components.controls	Array<CardControl>	An array of controls to add to the application. These are added to each card individually for piles.
components.markers	Array<CardMarker>	An array of markers to add to the application. These are added to each card individually for piles.
components.contextMenu	Array<CardControl>	An array of controls to add to context menus. These are added to each card individually for piles.
components.appControls~~	Array<AppControl>	An array of controls to add to the application. These are added to the application for interacting with the pile itself. This property is ignored for the Card sheet, use controls
componets.cardClasses	Array<string|stringCallback>	An array of CSS classes, or functions which return CSS classes, which are applied to individual cards.

clickMonarchCard, dblclickMonarchCard, contextmenuMonarchCard, hoverMonarchCard

One of these hooks is fired whenever a user interacts with a card in one of the Cards sheets. Returning false from these hooks will prevent the default action from being taken.

Details

Hook	Event	Default Action
clickMonarchCard	click	Hand: Opens the Card config sheet for the target Card.
dblclickMonarchCard	dblclick	none
contextmenuMonarchCard	contextmenu	none
hoverMonarchCard	mouseover	none

Parameters

Parameter	Type	Description
event	PointerEvent	The pointer event that triggered the click.
app	FormApplication	The Monarch application object.
card	Card	The card that was clicked.

To access the HTML element representing the card, use the event.currentTarget property.

Data Objects

These objects are used to define certain kinds of dynamic components.

CardBadge

Data to define an information badge that will display on a card.

Properties

Property	Type	Description
tooltip	string Function<string>	Used as the HTML title attribute providing a tooltip describing/labeling this badge. May be a function that returns a string.
text	string Function<string>	The text to display on the badge, may contain HTML. May be a function that returns a string.
class	string	Optional. A CSS class to apply to the badge.
hide	boolean Function<boolean>	Optional. Whether or not to hide the badge, not including it in the HTML. May be a function that returns a boolean, useful for badges that only display under certain conditions. false by default.

CardMarker

Data to define an icon marker that will display on a card.

Properties

Property	Type	Description
tooltip	string Function<string>	Used as the HTML title attribute providing a tooltip describing/labeling this marker. May be a function that returns a string.
class	string	Optional. A CSS class to apply to the marker.
icon	string Function<string>	The font awesome icon class to display on the marker, defailt is "fa fas-circle" (a dot). May be a function that returns a string.
color	string Function<string>	The color of the marker, default is "#FFFFFF" (white). May be a function that returns a string.
show	boolean Function<boolean>	Whether or not to show the marker. May be a function that returns a boolean, useful for markers that only display under certain conditions. false by default.

CardControl

Data to define an interactive contrl that will display on a card.

Properties

Property	Type	Description
label	string Function<string>	A text label for the control, only displayed for context menu controls. May be a function that returns a string.
tooltip	string Function<string>	Used as the HTML title attribute providing a tooltip describing/labeling this control. May be a function that returns a string.
aria	string Function<string>	The ARIA label for the control, used by screen readers to identify it. When omitted, the tooltip will be used instead. May be a function that returns a string.
icon	string Function<string>	The classes used to display a font awesome icon (ex: "fas fa-caret-up"). May be a function that returns a string.
color	string Function<string>	The color of the icon, default is "#FFFFFF" (white). May be a function that returns a string.
class	string	A unique CSS class to apply to the control. IMPORTANT: This property is required. Monarch uses this class to identify the control in order to attach event listeners.
disabled	boolean Function<boolean>	Optional. Whether or not to disable the control. The control will appear grayed out. May be a function that returns a boolean. false by default.
hide	boolean Function<boolean>	Optional. Whether or not to hide the control entirely.
onclick	Function<void>	A function that will run when the control is clicked. See below for parameter information.
controls	Array<CardControl>	Optional. An array of controls to be added as a control group. When included, you may omit all other properties except class. Instead, each item in this controls array should be a complete CardControl object. Does not support nesting.

onclick Parameters

Parameter	Type	Description
event	PointerEvent	The mouse event that triggered the click.
card	Card	The card that the control is on.
container	Cards	The Cards object that the card is a member of.

AppControl

Data to define an interactive contrl that will display on the application. Not used for the Card appliction, just use CardControl instead.

Properties

Property	Type	Description
label	string Function<string>	A text label for the control. May be a function that returns a string.
tooltip	string Function<string>	Used as the HTML title attribute providing a tooltip describing/labeling this control. May be a function that returns a string.
aria	string Function<string>	The ARIA label for the control, used by screen readers to identify it. When omitted, the tooltip will be used instead. May be a function that returns a string.
icon	string Function<string>	The classes used to display a font awesome icon (ex: "fas fa-caret-up"). May be a function that returns a string.
class	string	A unique CSS class to apply to the control. IMPORTANT: This property is required. Monarch uses this class to identify the control in order to attach event listeners.
disabled	boolean Function<boolean>	Optional. Whether or not to disable the control. The control will appear grayed out. May be a function that returns a boolean. false by default.
hide	boolean Function<boolean>	Optional. Whether or not to hide the control entirely.
onclick	Function<void>	A function that will run when the control is clicked. See below for parameter information.

onclick Parameters

Parameter	Type	Description
event	PointerEvent	The mouse event that triggered the click.
app	FormApplication	The application that the control is on.
container	Cards	The Cards object that the application represents.

Value or Function Callbacks

Many of the values specified for Components can be either a string or boolean or a function that returns a value. This allows for per-card values by calling the given function for each card in a pile, or for values that apply to all cards by passing a static value. These functions will be passed the following parameters:

Parameters

For CardControls

Parameter	Type	Description
card	Card	The card that the component is for.
container	Cards	The Cards object that the card is a member of.

For AppControls

Parameter	Type	Description
app	FormApplication	The application that the component is on.
container	Cards	The Cards object that the application represents.

API Guide

This section contains a series of brief examples explaining how to use certain sections of the Monarch API.

Creating a Custom Badge

As an example we will create an info badge on the hand sheet indicating the number of the currently displayed face.

Hooks.on("getMonarchHandComponents", (monarch, components) => {
    components.badges.push({
        tooltip: "Current Face",
        text: (card) => `Face: ${card.data.face}`,
        class: "card-face-num"
    });
});

We use the getMonarchHandComponents hook to respond when the hand is being displayed. This hook provieds two parameters, the first is the application instance itself, the second is an object containing arrays. Each array contains objects of data pertaining to some kind of component. One of these is badges.

This data is an array of objects, each of which describes a badge. Check the technical details above for more information on the badge object.

In this case, we just use Array.push to add a new badge to the components.badges array. This will add a new badge after all the existing ones.

Aside from the class property, the other properties of a badge shown above may be either a string or a function. A string is used in this tooltip, because we don't need it to be different for each card in the hand. However, the text needs to be different for each card, so we give it a function instead that will return a string later. When this function is called, it will be passed parameters. The first parameter is the Card object for the card this text will be displayed on. This function will be called for each card in the hand.

Here, we simply have the function return a string created from a template literal. It will always look like "Face: #" where # is the current face shown of the card.

Creating a Custom Control

Custom controls are created very similarly to badges, but they have a bit more data assocaiated with them. In this example, we will re-implement the "discard" button available in Monarch.

Hooks.on("getMonarchHandComponents", (monarch, components) => {
    components.controls.push({
        tooltip: "monarch.label.discard",
        icon: "fas fa-trash",
        class: "discard-card",
        onclick: (event, card) => card.pass(game.cards.getName("Discard"))
    });
});

Of note, the tooltip here is being given a localization key rather than a plain string. Monarch will always attempt to localize the provided tooltip allowing you to use localization easily.

Controls also have an icon property. Like tooltip this can optionally be a function that returns a string. This string should identify a font-awesome icon to use for this control.

The most important thing that sets a control apart from a badge, is the onclick property. This must be a function, and it will be called when the button is clicked on the sheet. It will recieve a number of parameters (see technical details above) including the click event and the card that the control was used on.

IMPORTANT: Along with onclick you must include a unique class property for each control. This class is what's used by Monarch to attach the correct event listener to the contol element.

Here, we look up a pile in game.cards called "Discard" and pass the card to it. This is an example, in everyday use we would want to do something to prevent errors in case no such pile exists.

Custom Control Groups

Above, you may notice that the "discard" button is in a seperate box from the play button. But the standard Monarch discard button when enabled appears in the same box next to the play button. This is because you can also create groups of controls. Each control object may contain an array controls of control objects to display together in a group.

The control group created by Monarch is called basic-controls, if we search through the controls array for this item we can add our control to the same group:

Hooks.on("getMonarchHandComponents", (monarch, components) => {
    components.controls.find(c => c.class === "basic-controls").controls.push({
        tooltip: "monarch.label.discard",
        icon: "fas fa-trash",
        class: "discard-card",
        onclick: (event, card) => card.pass(game.cards.getName("Discard"))
    });
});

Here we used Array.find to locate a control that has the class basic-controls. We then pushed our control onto its controls array.

If we wanted to create our own control group, we could do so like this:

Hooks.on("getMonarchHandComponents", (monarch, components) => {
    components.controls.push({
        class: "my-controls",
        controls: [
            {
                tooltip: "monarch.label.discard",
                icon: "fas fa-trash",
                class: "discard-card",
                onclick: (event, card) => card.pass(game.cards.getName("Discard"))
            },
            {
                tooltip: "CARD.Play",
                icon: "fas fa-play",
                class: "play-card",
                onclick: (event, card, pile) => pile.playDialog(card)
            }
        ]
    });
});

Here we push a new object into components.controls, and that object contains a class and its own controls array. That array contains two new controls we want to make.

Creating a Custom Marker

Markers are similar to badges, but they don't contain text. They are also always visible on the hand, rather than just when the card is hovered. Markers are colored icons that can be used to indicate any number of things.

In this example, we will create a custom "radioactive" marker that can be shown on cards.

Hooks.on("getMonarchHandComponents", (monarch, components) => {
    components.markers.push({
        tooltip: `Radioactive`,
        class: `marker-radioactive`,
        icon: "fas fa-radiation",
        color: "#EEEEEE",
        show: (card) => card.data.flags.monarch.markers.radioactive
    })
});

By default a marker will show a white dot, using the fa fas-circle icon. By specifying icon and color we can choose any font awesome icon and any color. The color should be a valid CSS color value.

The last property of CardMarker is show. Here, we define show as a function that takes a card as a parameter and checks for a flag within it. If that flag is true, the icon will be shown as a marker on the card. This function is called for each card in the hand, so each card can have this marker configured individually.

Creating a Custom Card Style

By utilizing the components.cardClasses array, we can add CSS classes to each card in a Cards sheet. This array can contain strings, or it can contain functions which, like the class properties on Controls and Markers, will be called for each card individually and passed that cards data. This allows for selectively adding classes to particular cards, which can then be styled as needed.

This can be used for things like adding a class specific to your module, classes that depend on properties of the card, or classes based on flags stored in the card data. For example, the below code might add classes which style cards with different suits differently, and cards with a my-flag set to to true might be styled with a colored overlay, shadow, or border to indicate their status.

Hooks.on("getMonarchHandComponents", (monarch, components) => {
    components.cardClasses.push(
        "my-module-class",
        (card) => `suit-${card.data.suit}`,
        (card) => card.getFlag("my-module", "my-flag") ? "my-module-flagged" : ""
    );
});

Creating Custom Context Menus

Very similar to creating controls, context menus are created by adding control objects to the controls.contextMenu array. These controls won't show on the card when hovered, but will appear when right-clicked. These controls also support a label property that can be used to display a label for the menu item. If a control has an array of controls, a no-label row of icon buttons will be created instead.

Creating Custom Application Controls

Unlike card controls, markers, and badges these controls apply to the Cards object/application rather than to a specific card. These are used for buttons like "draw" in a hand or "shuffle" in a deck. For these, you add AppControl objects to the controls.appControls array.

As an example, we will add a "reset" button to the hand application.

Hooks.on("getMonarchHandComponents", (monarch, components) => {
    components.appControls.push({
        label: "CARDS.Reset",
        icon: "fas fa-undo",
        class: "reset-pile",
        onclick: (event, app, pile) => pile.resetDialog()
    });
});

Note that the parameters for the onclick callback are different than for a CardControl, since there isn't a target Card object for this control.

monarch's Issues

The card sheet should register for all card types not just base

Consider using a single face toggle button when a card has only two faces, rather than the standard face cycler.

Replace the tiny split button with a single "Flip card" button

if the card face is visible show the card back
else
show the card face

Option to Scale UI icons

Currently ui elements do not scale with the monarch's width setting:

It would be nice if icons get equally larger when cards are set to be higher than 200px wide

Allow per-hand card size customization.

Allow card height to be overridden for each hand individually.

Gray out app-controls when disabled

I don't believe that in 0.4.1, app-controls are grayed out when they're disabled, like card-controls are.

I added this on my side to achieve this:

.monarch .app-control[disabled] {
  opacity: 0.5;
  cursor: default;
}

May you'll want to add this to Monarch CSS as well.

Override rotate on window resize icon

The current resize icon is diagonal and gives the impression that you can make the window bigger vertically as well as horizontally. When one attempts to resize, it feels strangely restricted. If the icon were a horizontal instead, the horizontal resize would feel more natural.

I think it would be pretty easy to override the current CSS:

.window-app .window-resizable-handle i.fas {
    transform: rotate(45deg);
}

with

.window-app.monarch .window-resizable-handle i.fas {
    transform: rotate(0deg);
}

Hide empty card badges.

When the card data is null, do not show the related badge divs

Use entire card surface to open play card/expanded view

rather than a small button in the bottom left corner, use the entire card surface as the hit area for the expanded view to play card.

Consider providing TypeScript definitions

Please consider providing typescript definitions for the Monarch API.

Allow for macros in card descriptions

Would be neat if a player could view their card and in the description it requests them to click to roll against a skill (for example). This could tie into the display card in chat enhancement allowing players to draw cards, roll against them and display their process in chat and result!

Update settings on all clients

When a setting like card height is changed, all clients should update their rendered apps, not just the GM.

Card images in Hand break for non-local paths

Card images that come from web urls do not display in Hands.

Steps to Reproduce

1. Create a new Hand, Deck and a Card in that deck, all with the Monarch sheet type.
2. Set the back image of the card to a url that leads to an image file and save.
3. Add the card to the hand.
   Expected: The image will show normally in the hand.
   Actual: The card in hand is a blank box, opening the Card itself shows the image as normal.

Cause

In templates/monarch-hand.hbs '/' is prepended to the url of the card image. Removing that breaks it for local file paths.
<div class="card" data-card-id="{{card.id}}" style="--card-image: url(/{{card.img}})">

Complete pile sheet

Complete the pile sheet design.

Custom settings menu

Create a settings app with Monarch settings

Shuffle with rotation

The ability to randomly determine the rotation of a card when it is shuffled, important for things like Tarot.
Requires #14

Compatibility problem with Das schwarze Auge/The Dark Eye (5th Edition) System

The System Das schwarze Auge/The Dark Eye (5th Edition) is actually not compatible with the sheets. But it would be great if you can make it work, because monarch looks great.

Deck Sheet (works):

Hand Sheet (not working):

Stack Sheet (working):

Also not working: Drag and Drop between the sheets, but i dont know if this is system specific

V11 compatibility.

The module does seem to be working somewhat in v11. but it keeps popping this error message.

The module "monarch" is using "name" which is deprecated in favor of "id"
The module "monarch" is using the old flat core compatibility fields which are deprecated in favor of the new "compatibility" object

Add hide property to CardControl

Hello @zeel01,

For Castle Falkenstein, I would like to be able to fully hide (not just disable) a CardControl based on (card, container) conditionals.

Could you please support a hide? property in CardControl?

export type CardControl = {
  [...]
  hide?: boolean | booleanCallback;
  [...]
};

Alternatively, I suppose class? could also be used to hide a CardControl via CSS, but incidentally class? is only a

class?: string;

and not a

class?: string | stringCallback;

Configure a "discard" pile to allow for a "discard" button in the hand.

Show card to players

Add a button at cards (on the hand/deck/card sheets) to show the cards to other players.

(idea based on Torg Eternity system feature)

Ability to mark cards

With a color, or maybe an icon.

Explore expanding the card control hit area

Hit targets on the button should use the button div, not the icon image.
this is especially bad on the flip card split button, where the active area is one of two tiny arrows

Place grip icon first by setting order to a negative value.

Setting the grip icon's order to -1 (or something ridiculous like -99) would then allow the icon to always appear at the top in that corner regardless of what other icons other modules add.

Error on discard from Card sheet

As the card sheet is closed due to being discarded, the save on close attempts to save the document. This causes an error as the document has already been removed.

Chat cards

Rich chat cards with information about cards that have been drawn, played, whatever.

It is possible for the window location data in localStorage to be invalid, leading to a JSON parsing error on load.

Thanks for working on this module. Well crafted and styled.

When I load FoundryVTT with a player user I get the following error in the console.

Error message

Uncaught (in promise) SyntaxError: Unexpected end of JSON input
    at JSON.parse (<anonymous>)
    at loadWindowPositions (utils.js:15:25)
    at Module.restoreWindows (utils.js:26:2)
    at Function.onReady (Monarch.js:219:9)

  | loadWindowPositions | @ | utils.js:15
-- | -- | -- | --
  | restoreWindows | @ | utils.js:26
  | onReady | @ | Monarch.js:219
  | await in onReady (async) |   |  
  | _call | @ | foundry.js:294
  | callAll | @ | foundry.js:253
  | setupGame | @ | foundry.js:5566
  | await in setupGame (async) |   |  
  | _initializeGameView | @ | foundry.js:6498
  | _initializeView | @ | foundry.js:6474
  | initialize | @ | foundry.js:5430
  | await in initialize (async) |   |  
  | 🎁call_wrapped | @ | libWrapper-wrapper.js:511
  | 🎁libWrapperInit | @ | libWrapper-api.js:793
  | await in 🎁libWrapperInit (async) |   |  
  | 🎁Game.prototype.initialize#0 | @ | libWrapper-wrapper.js:187
  | window.addEventListener.once | @ | foundry.js:62436

Not sure if this connected to the players. Or if this could also happen as GM.
with the GM account however, I do not get this error.

further resources

https://stackoverflow.com/questions/30621802/why-does-json-parse-fail-with-the-empty-string

Potential solution

Old

monarch/scripts/utils.js

Line 14 in 04badbf

const data = window.localStorage.getItem("monarch-windows") || "";

New

const data = window.localStorage.getItem("monarch-windows") || '{}'; 

Explanation of the change

When using the "Old" from above in

monarch/scripts/utils.js

Line 15 in 04badbf

windowPositions = JSON.parse(data) || {};

The variable data is an empty string. Which JSON.parse can't parse.

Using either "{}" or maybe '""' (double quotes in single quotes) should yield the desired behavior.
This should also make the || {} in line 15 obsolete I think. As data will always be a parsable string.
This could be wrong if window.localStorage.getItem("monarch-windows") will return something else then valid json or null.

Add option to remove type/value/suit display for player hands/cards.

For game systems that just want to use the card UI to deal with cards as images (without corresponding suit/values), it would be great if there was a UI option to not display the boxes corresponding to suit/value/type when hovering over a card in a hand, since they would always be empty.

Update French translation for v0.3

@admiralnlson There are a bunch of new strings in the upcoming release.

Hide icon text for all window header icons

While trying to find a way to remove the text from the PopOut window header icon, I came up with the following CSS changes.

.window-app.monarch-hand:not(.minimized) .window-header a {
    font-size: 0px;
    margin: 0;
}

.window-app.monarch-hand:not(.minimized) .window-header a i {
    font-size: var(--font-size-14);
}

This approach would remove the dependency on the .header-button class being added to every header button.

Create a YouTube tutorial in v11+

I know this is incredibly stupid, but I can't seem to comprehend how to set up and use the monarch module, and I really really want to. Is there any way you could create a YouTube tutorial or something like it?

Card descriptor width is too narrow

The card descriptor width is too narrow to hold Japanese characters or anything more than 4 English letters. It would be nice if this could be made a little big wider.

Show rotated cards at the correct angle

Visually display cards at their rotated angle in the deck/hand. Clamp to 90 degree increments.
Needed for #13

Update Spanish translation for v0.3

@lozalojo There are a bunch of new strings in the upcoming release.

Allow players to show a card they own.

Hi there,

I don't necessarily understand the rationale behind the showCard control being a GM-only option.

May I suggest changing the value of the 'showCard' disabled property from
!game.user.isGM
to
!card.isOwner or !(card.isOwner or game.user.isGM)
instead?

I suppose this could become a module setting also.

Allow registration of fields and actions.

Possibly using a hook, allow systems/modules to register what fields, data types, actions, etc. to display on the sheet.

Ability to change all sheets to Monarch at once.

Red warning message in console

Enabling Monarch 0.2.4 on Foundry 9.245 with 5e 1.5.7 will cause the error message below to appear in the console.

VM43338:1 Uncaught (in promise) SyntaxError: Unexpected end of JSON input
at JSON.parse ()
at loadWindowPositions (utils.js:15:25)
at Module.restoreWindows (utils.js:26:2)
at monarch.js:49:8
at Function._call (foundry.js:294:14)
at Function.callAll (foundry.js:253:12)
at Game.setupGame (foundry.js:5566:11)
at async Game._initializeGameView (foundry.js:6498:5)
at async Game.initialize (foundry.js:5430:5)

Note: Test on a fresh world with no other modules enable.

Cards flipped face down return an error when attempting to flip back (V11)

In v11, if a card is flipped or dealt/passed face down, an error is thrown when trying to flip it.

Option to open a player's hand sheet automatically when they receive a card.

Suggestion: Option to force display for players assigned hands when they hold at least 1 card.
I am using the inspiration cards system for my DnD Games. My players love it, but sadly the hand interface doesn't just pop up when I give them inspiration, so they forget about it a lot, if there was an option, to force it open when they receive a card to a hand they own it would be neat, especially if it gets attached to somewhere at the bottom of the screen like next to the macros or so.
This way, my players won't forget they could play a cool inspiration card when they are in a pinch.
Like basically
Step 1: Dm deals everyone 1 card.
Step 2 the owned hand interfaces pops up next to the macros, showing the cards to the player
Step 3: If a player plays the card, its image gets shown in the chat, and it gets added to the Discard Pile. (Discard pile doesn't need to be visible all the time, just hands) and the hand interface vanishes when at 0 cards.
Step 4: player survives death more commonly.

Also, can be useful for other card games to just reduce the amount of mouse clicks players have to do. Customization is key, i would also love a simplified interface option that just displays the card's image not the data fields like type, suit and value, since some card images just do basically explain themselves. No strange data needed, and the blank boxes kinda ruin the immersion.

Hide labels if fields are empty

Requesting to not display labels on cards for fields that are blank like suit/value.

Example images.

Add "groups" in hands

The ability to visually group cards within the hand.

Image paths in CSS that are relative to the server root "/" are incorrect for servers hosted in subdirectories.

I'm not sure if this is intended to be a supported server configuration, but it's probably best to try to make it work.

Accessibility Features

My partner is blind and uses a screen reader to navigate software. After examining a few virtual tabletop programs, we've found that Foundry generally has the best core accessibility for her. I'd like to use it as a platform to implement some of my card/board game collection that I had prior to meeting her, so that we can play them together without costly and time-consuming physical accessibility kits. Monarch seems like a good tool for card-based mechanics in various games, but while tooling around in it with my own PC's screen reader, I've noticed a few things that don't quite work from an accessibility perspective.

1. It is impossible to select and view/play a specific card from my hand using only the keyboard. Even when I use the "Pop Out!" module to break my hand of cards into a separate window, tabbing through it takes me in a loop in the following order: Address Bar > Text field with the name of the card hand > Draw button > Pass button. I'm not certain why the card elements aren't inserting themselves in the tab order, but is this something that could be corrected?
2. This may be something that would be better as an alternative "sheet" version for card stacks, but it would be great if there was an accessibility option that would apply an aria-label to each card in the stack consisting of " ". This way, as a blind player tabs through their hand, they could hear the name of each card and then tab to the next one if it's not what they're looking for, or pause for a moment if they want to hear the full text of it instead.

I'm planning to dig through the code and, if I can make sense of it for myself, submit a pull request that would implement these features, since I hate asking other people to code things for me if I'm not willing to do the work myself. But I thought that I'd go ahead and put this request in just in case I can't figure it out for myself.

Button to return all cards in a hand/pile to the original deck

Add a button to the Hand and Pile sheet to allow to return all cards from a hand/pile to the corresponding original deck.

(idea based on Torg Eternity system feature)

The rationale is:
Imagine you have a deck from where you draw the cards to your player’s hands. The players then play the cards that go to the discard pile.
If you run out of cards in the main deck, there is no option to take the cards in the discard pile, reshuffle them and draw again to the players, maintaining current player'shands.
You can only reset the main deck, in this case all player hands will be reset too, or dragndrop manually all cards in the discard pile to the main deck, which is not operational.
You can’t pass cards from piles and hands to a deck, only between them.
So, my suggestion is: for piles and hands, create a button to “shuffle back into deck”, to reset a single pile/hand and send cards back to the original deck, maintaining the rest of hands/piles in play at its current state.

Thanks for this great module, it looks great!

Cant pass or discard cards

Hello, I recently ran into an issue. Whenever a player or I try to discard or pass a card, there is an error message and the card is not passes/discarded. I already recollected all cards from the stack, but the error keeps showing up with new drawn or dealt cards. Do you have an idea how to resolve that issue? Thanks in advance!

Monarch V0.4.1 and FoundryVTT V9.268.

Error within FoundryVTT when trying to pass a card:
you may not pass Card 16hIz2BAG1I5Rc4y which has already been drawn

Console when trying to discard a card, no error message within foundry:
foundry.js:14276

   Uncaught (in promise) Error: You may not pass Card 16hIz2BAG1I5Rc4y which has already been drawn

[Detected 1 package: monarch]
at Cards.pass (foundry.js:14276:36)
at Card.pass (foundry.js:14037:39)
at Object.onclick [as discard-card] (Components.js:179:35)
at MonarchCardsConfig.js:105:32
at DOMTokenList.forEach ()
at MonarchHand._onControl (MonarchCardsConfig.js:103:20)
at HTMLAnchorElement. (MonarchCardsConfig.js:65:52)

Dock hands into one modal

The ability to dock/attach two or more hand apps together so they can be moved together.

Display issues with Torg

There are a number of visual display issues when used in the Torg system.

Complete deck sheet

Complete the deck sheet design.

Card faces with ( ) in filename not displaying when drawn from deck.

I scanned multiple adjacent cards, then used an online tool to cut the resulting image. They ended up in several zip files, the images in these zip files having the same filenames (row1column1.jpg and so on). I unzipped them into one folder, having windows automatically rename the second batch from row1column1.jpg to row1column1 (2).jpg and so on.

The cards that have parentheses in the filename show up blank when drawn to a hand.