I'm making a card game on a website. Users are shown a hand of eight cards. They will then choose four to pass to the other player. How could this work?
Any better plan?
Also thinking about - should the user select the four cards to pass or the four cards to keep?
You can have the players click the cards themselves, and then you use a visual indication on the card itself, preferably an indication that suggests that the card will be passed, e.g. an arrow.
As to which cards to select - I'd let them select the cards to pass. They are selecting items and then performing an action, so it makes more sense to select the ones which will be affected by the action, not those which won't be affected.
You could also consider allowing dragging a card that would add the dragged card to a set of four selected cards. Whether the user should choose what to keep or what to pass depends on the game I think but overall it feels more natural to pick what to give.
Best to choose 4 cards to pass. These are the card they player is acting upon.
If you are using HTML for your product implementation, consider using using the jQuery Droppable library to easily code this functionality & the constraints.
If it is possible for the players to click on the cards themselves, then this would be the most intuitive, especially if the cards could slide up a bit when clicked.
If this is out of the capabilities of your code, program, design, etc., then a checkbox would be acceptable, but placing the checkbox on a corner of the card would be preferable, in my opinion.
They should definitely be selecting the cards they want to pass. The "Pass" button could have an arrow to convey the motion as well, i.e. "Pass >". If 4 cards must be passed, this button should be disabled until 4 cards are selected.
The best solution may depend on the layout of the game. For example, let's say that there is a virtual table, with the player "sitting" at the seat closest to the bottom of the screen.
When a card is selected (by clicking on it), you could move the card up on the screen (and away from the player), to indicate that it will be passed, like in many Hearts games.
Have the pass button only enabled once four cards are selected. Also, do not allow the player to select more than four cards (nothing happens if they click on a fifth card). Instead, allow them to deselect a card by clicking on it again (this time it will move down on the screen), back to the players hand.
As an alternative, you could give selected cards a colored border. This border would be the same color as the action button. It would be clear that the cards bordered in green would be passed when pushing the green Pass button
