How to display card information on the website

[Phrancis]

I had a couple different ideas on displaying card information which will eventually be in the Cyborg Chronicles mod sub-site. Would like feedback from others on what would be ideal. Each card has some things in common, e.g. image, name, description, type and values. Here are my thoughts:

1. Display as a table. This would be the simplest, but not particularly aesthetically pleasing. It would be possible to make it self-updating if the cards are kept in an Excel document within the repository.
2. Display as actual cards. This would basically entail to display the card exactly (or as closely as possible) as it is in the game. There's probably a way to program that into the website using Java or JavaScript.
3. Display in a grid, sort of like the contributors page that Marc-Andre made. This would probably be the best-looking, though it is considerably more work. It may also make it more difficult to locate a specific card.
4. Display a list of cards with basic data, and a link to a pop-up with card details. This would be analogous to how you can click a card icon to view card details in Hearthstone. This should be fairly easy to do using JavaScript.

Feedback appreciated!

[Phrancis]

This is what it would look like, approximately, if we did (1). Just with an added image. Not a huge fan of it.

[marcandregirard]

Or since I'm starting a Java web app you can do it there, since 1. the html for each card will probably be almost the same (not the actual description but rather the markup) 2. If you add modify cards you do not need to change anything since it will be dependent on the source of the data. The actual thing would be like option 4, quick description and if you click/hover you will have more descriptions.

[Zomis]

The source of the data should absolutely be the same as the game uses itself, to reduce duplication. I.e. do not load from an Excel file, use the actual Java information for this.

When it comes to how to display it, one thing does not have to exclude another one. Displaying as actual cards is advantageous in case someone would like to print IRL copies of the cards (I have got that feature-request).

Also see #32

[Zomis]

It would be advantageous if @Phrancis (or someone) could make a HTML + CSS template for how a card should look when being viewed on the web. Use placeholder text + images to do so at first, and then it is easy to fill it with real data later.

[Phrancis]

@marcandregirard As discussed in chat, here is a screenshot of the card models I made in PowerPoint. The dimensions and size rations are as follows:

Card size: 3.5” x 2.5” (1.4:1)
Image size: 1.4” x 2.25” (1:1.6)
Text box size: 1.3” x 2.25” (1:1.75)

I also attached individual images of the small logos used on the cards, if you would like to use them.

[Zomis]

Just a random thought about this issue, theoretically, GWT could be used and a certain TableLayout that is also used within LibGDX. At the moment I have no exact details about this but it could be worth looking into, to make it the LibGDX better match the web version.

Just a thought.

[Phrancis]

@Zomis would it be possible to use Groovy to translate the DSL for cards and wrap it in HTML elements to be displayed on the web? (like you did for the game itself, including translating card effects into "plain English") Speaking here strictly from a data standpoint, I think it would be advantageous if that could be queried and sent to a web page

[Zomis]

@Phrancis It is possible to include the game engine in the website and use data directly from that, yes. However, I think the best option at the moment is to use a JSON file with data that has been exported from the game. Here is the JSON data from the Cyborg Chronicles mod: http://www.cardshifter.com/game-1.json

[marcandregirard]

Did the web client worked on this part ? Maybe we could share some code to not duplicate things ?

[Phrancis]

Yes I agree that we should share code, the web client does a good job of displaying cards as cards on the game scene, we could definitely re-use the code for other sections (for example the deck builder, or simple page to display the cards for each mod). AngularJS/CSS templates for cards and such are located in the HTML-Client repository. For example: https://github.com/Cardshifter/HTML-Client/tree/master/src/card_model