The idea here is to create a bbcode, [card] name [/card]. The bbcode wraps around a card name inputted by the user. For example, let us say “Arcana Knight Joker” is the card name. The name is then sent through an api as follows: http://omega-analytics.herokuapp.com/api/name/Arcana%20Knight%20Joker where %20 is the url encode for a space. It should encode it automatically even if you send the url with the spaces.
The api will have a json response where you are only concerned about two things:
- Name:
"text": {"en": {"name": "Arcana Knight Joker"} - Pic:
"images": {"pic": "https://storage.googleapis.com/ygoprodeck.com/pics/6150045.jpg"}
From here, we linkify the card name so that it points to:
TCGplayer: Online Store for Collectible Trading Card GamesArcana%20Knight%20Joker&utm_campaign=affiliate&utm_medium=DuelistsUnite&utm_source=DuelistsUnite
This url will always be the same, only the card name changes. Since the card name has to be correct and not misspelled or incomplete, this is the reason why we retrieve the card name from the api. The API will return the card name that is a match for the exact name within 70%.
Now, a demonstration of how card tooltips works is here:
https://codepen.io/shadowfox87/pen/mdPVxZb
Hovering over the card name shall show the image. Clicking on it will go to the TCGPlayer link.
That’s it. The challenge here again is just learning how to make a bbcode in Discourse. No button needs to be added to the composer. Users will just use the [card] [/card] bbcode themselves. This can be done through html / css / js.
There are examples of how a bbcode is made here:
Here’s one that automatically recognizes text and does a hover-over tooltip:
This takes hardcoded words and linkifies them:
Without reading too much documentation, one can use any of the above codes and reverse engineer it.
Contact me if you’re interested.