Authentic FF8 Triple Triad React Game

[Cyanoxide]

If anyone's interested, in my spare time over the past few months, I've been recreating a browser version of the Triple Triad minigame from Final Fantasy 8 on the PS1. It should work in most browsers and it technically works on mobile. However, it will probably be way too small in most cases so a desktop is advised. I thought about making it responsive to better accommodate a portrait mobile aspect ratio but I decided against it because that's not how it would have looked on the PS1. I wanted it to be as authentic as possible to the original as I've seen a few people make it over the years and it never looks quite right in my opinion.

If you're familiar with the rules, I've got all the game rules working (Plus, Same, Random, etc.) but I'm still working on the trade rules, the current build only has support for "trade rule: one" which mean you win or lose one card. The next update should also add support for Trade rules: All, Diff. and Direct. I've currently got them all working on my local build except Direct which I'm having a little more trouble with than I originally anticipated.

Once I'm done with the trade rules, I plan to add dynamic rules for each player based on where they are in the original game. Currently, everyone just plays the same rules. Likely whatever I last set them to for testing purposes.

I hope to eventually add in every NPC card player from the original game but I think there are hundreds of them and no documentation as to who plays which cards so for the time being I've only added a handful of players as a proof of concept, though, they do have the correct cards including rare cards. For example, playing against the Running Boy in Balamb nets you a chance at him playing Minimog.

If you lose a card to an opponent, there's a chance they will play your lost card if you rematch them so you can win it back. However, much like in the original game, if you lose a second time, that first card is replaced by the second card you lost and the first is effectively gone until you can win it from the CC group I just learnt that this may not be accurate in FF8 and NPCs can potentially store multiple lost cards, I will test to confirm and update the game if neccesary as it should be a pretty trivial change.

Likewise, any cards you win are preserved in your card list, even on a page refresh through local storage. This is currently open and easily manipulatable but I'll likely add some light encrypt in the final build to minimise tampering, not that it really matters in this case.

Audio has been added to match the original game (though it's disabled by default thanks to browser autoplay rules and can be enabled with the icon in the bottom right). I'm not 100% happy with the audio implementation. There seems to be an audio delay in Safari when using native JS audio which I'd like to resolve. It seems fine in the other browsers I've tested though.

Anyway, I'd love to hear your thoughts as I've never built any sort of game before.

https://triple-triad-react.onrender.com/
I also cheaped out on the hosting so it may take a moment to load.

[Cyanoxide]

I've updated it since my previous post to include all the trade rules and dynamic rules for each player depending on their region. The trade rules are simply set to randomly pick one of the four options though I may add additional functionality at a later date to better emulate how it works in the original game.