A new way to display cards?

The main reason I decided to make my own site for the Bionicle YGOPro Expansion was that imgur, which I had previously been using for release posts, just felt way too limited. All I could make there was a long, long scroll of card images with a textual description below each, where both the transcribed card text (for readability) and any design notes lived. Anything that didn’t belong to one particular card, like an introduction of an archetype, had to be finagled in in some unfitting way or another. And then their anti-spam features eventually started making it even harder by just destroying any links in the text, which made it impossible to download the actual expansion pack with a single click coming from the imgur album. I think that was about the point I realized I would eventually need to find a different solution, and after looking around a bit it became clear the only way to really improve things would be a dedicated website. And so I made one, consolidating the project description, expansion list, download links, release posts and more into one nice package, and everyone lived happily ever after.

But wait, is this really all that much of an improvement? Sure, the format of the releases and theme guides is now much more free than it ever was on imgur and I can ramble about high-level details all I want in addition to introducing individual cards, but at the end of the day it’s still just some boring text and images I put together manually. You can click on the pics to get a little overlay that includes a transcription of the card text, which is nice, but surely we can do better on a site that can be customized down to the source code level, right?

Right! The potential of displaying cards in some fancy manner of my own crafting was actually a major reason I opted to make a WordPress site from scratch instead of just quickly putting something up on wordpress.com or Blogger. And I’m proud to now announce the first steps towards that have successfully been taken.

Behold: The fruit of this site’s very own plugin, the BYE Cardviewer Block!

Toa Mata Kopaka

Effect MonsterLevel 6 | WATER Warrior | ATK 2000 / DEF 2500

To Tribute Summon this card face-up, you can Tribute 1 WATER or “Toa Mata” monster in your hand, except “Toa Mata Kopaka”. If this card attacks, it is changed to Defense Position at the end of the Battle Phase. If this card is in face-up Defense Position, your opponent’s monsters cannot target monsters for attacks, except “Toa Mata Kopaka”. Once per turn, if another card(s) you control leaves the field because of an opponent’s card effect: You can banish 1 card your opponent controls.

Bionicle: Coming of the Toa (v3.16.6)

Yes, yes, I know, it’s still just text and images. But all I have to do to get it into the post is specifying which card and version I want, and everything else gets fetched straight from the database and formatted in a standardized manner. It’s pretty, it’s cohesive, it’s reusable, and if you click on the card image it still opens the sweet little overlay just as before. Even comes with a separate layout for mobile (or otherwise horizontally challenged) devices!

As any good way of displaying Yu-Gi-Oh cards should, the block accounts for the different types of stats found across different types of monsters:

Turaga Nuju

Link Effect MonsterLink-2 [◀ ▶] | WATER Spellcaster | ATK 1100

2 monsters, including a WATER Warrior monster
If this card is Special Summoned: You can target 1 face-up Spell/Trap you control; until the end of the next turn, while you control a WATER monster, that target cannot be destroyed by card effects (even if this card leaves the field). Once per turn: You can target 1 card your opponent controls; change 1 monster you control to face-down Defense Position, and if you do, return that target to the hand.

Bionicle: Coming of the Toa (v3.16.6)

And for the simpler Spells/Traps that are free of such cumbersome details, it just leaves out that line entirely:

Ko-Koro, Village of Ice

Field Spell

While all face-up monsters you control (min. 1) are WATER, apply these effects.
●If you did not declare an attack during your last turn, monsters your opponent controls cannot attack the turn they are Summoned.
●If none of your opponent’s cards where destroyed or banished by your card effects since your last Standby Phase, monsters you control cannot be destroyed by your opponent’s card effects, also your opponent cannot target them with card effects.
●If you did not activate any monster effects this turn, negate the effects of face-up monsters that were Special Summoned this turn while your opponent controls them.

Bionicle: Coming of the Toa (v3.16.6)

If you’re browsing on mobile, you’ll see these blocks as a single-column layout with all the info listed beneath the card image, but on desktop it just shows image and info next to each other. However, we also have the option to force the mobile layout on wider screens which can be used to do things like comparing two versions of the same card side-by-side:

C.C. Matoran Maku

Effect MonsterLevel 2 | WATER Warrior | ATK 500 / DEF 200

(Quick Effect): You can send this card from your hand to the GY, then target 1 face-up card you control; for the rest of this Chain after this effect resolves, or until the end of this turn if it is a “Matoran” monster, it is unaffected by other card effects, except its own. When your opponent activates a card or effect on the field (Quick Effect): You can Special Summon this card from the GY to your Main Monster Zone in the same column as that card, and if you do, change 1 face-up monster on the field to Defense Position. You can only use each effect of “C.C. Matoran Maku” once per turn.

Bionicle: Coming of the Toa (v3.12.10)

C.C. Matoran Maku

Effect MonsterLevel 2 | WATER Warrior | ATK 500 / DEF 200

When your opponent activates a card or effect on the field (Quick Effect): You can Special Summon this card from your hand or GY to your Main Monster Zone in the same column as that card, and if you do, change 1 face-up monster on the field to Defense Position. (Quick Effect): You can target 1 other face-up card you control; for the rest of this Chain after this effect resolves, or until the end of this turn if it is a “Matoran” monster, it is unaffected by other card effects, except its own. You can only use each effect of “C.C. Matoran Maku” once per turn.

Bionicle: Coming of the Toa (v3.16.6)

For readers cursed with particularly narrow screens, these two might still look like they’re just underneath each other, but I swear they line up if there’s enough space available. Most importantly, either version is perfectly readable, and all the information you could want about a card is right there.

For the time being, this post here will be the only part of the site using the new layout, because to be quite honest it’s still very much a prototype. The frontend looks fairly presentable already, but hidden in the backend is a plain HTML form where I have to manually enter every single card’s information to get it into the database. Similarly, configuring the blocks is done by typing the identifiers of the desired card into haphazardly placed text fields. So before I really start using it, I still need to put some work into improving those portions, ideally with an option to directly upload a .cdb file and proper configuration UI featuring some idiot-proof dropdowns. Frontend may receive some updates along the way, too, but the nice thing about custom blocks is that the copies I’ve already used here will udpate without any extra work needed!

As a last note, if you happen to be seeing this and thinking “Hey, I could use that too!”, good news: The source code is all available on GitHub. It’s obviously tuned and tested for my specific needs, so make adjustments as needed.

EDIT 2021-10-12: Upon further consideration, maybe tabs would be the better way to do comparisons? Then nothing has to get squished.

Old

C.C. Matoran Maku

Effect MonsterLevel 2 | WATER Warrior | ATK 500 / DEF 200

(Quick Effect): You can send this card from your hand to the GY, then target 1 face-up card you control; for the rest of this Chain after this effect resolves, or until the end of this turn if it is a “Matoran” monster, it is unaffected by other card effects, except its own. When your opponent activates a card or effect on the field (Quick Effect): You can Special Summon this card from the GY to your Main Monster Zone in the same column as that card, and if you do, change 1 face-up monster on the field to Defense Position. You can only use each effect of “C.C. Matoran Maku” once per turn.

Bionicle: Coming of the Toa (v3.12.10)
New

C.C. Matoran Maku

Effect MonsterLevel 2 | WATER Warrior | ATK 500 / DEF 200

When your opponent activates a card or effect on the field (Quick Effect): You can Special Summon this card from your hand or GY to your Main Monster Zone in the same column as that card, and if you do, change 1 face-up monster on the field to Defense Position. (Quick Effect): You can target 1 other face-up card you control; for the rest of this Chain after this effect resolves, or until the end of this turn if it is a “Matoran” monster, it is unaffected by other card effects, except its own. You can only use each effect of “C.C. Matoran Maku” once per turn.

Bionicle: Coming of the Toa (v3.16.6)

Leave a Reply

Your email address will not be published.