Back to All Posts

ArtScuffle (Pt 2)

Originally posted on 2023-07-14

I originally wrote this post a week ago (exactly!) when I thought this project would be a lot smaller than it ended up being. I ended up coming back and editing this post to more clearly reflect the direction the project went in and elaborate more on the many challenges and bug fixes I've implemented.

Previous Blog Post

The previous iteration of the blog post is currently hidden, but to summarize, went over the first iteration of the ArtScuffle website. As the project was originally intended to be a fun game between friends, the website was meant to be a fun visual only instead of having any functionality built into it. The post was a more reflective one, as I talked about my general experiences with Vercel and Next.JS. I'll probably end up writing another post in the future in a similar vein, but for now, the post doesn't align particularly well with the direction ArtScuffle has gone in.

Database Migration

I was originally using MySQL for my database, but found that it was taking a significant amount of RAM from spinup. Some time was dedicated to migrating from MySQL to PostgreSQL (this did not take very long). It should be noted that RAM dropped from 600MB to 100MB, so it was definitely an important change.

Attack Command Changes

The attack command went through two major changes since last week. First, I changed up the arguments given to the command to contain number of characters instead of character. This was to support attacks that would have more than one character. The second change was a major fix to the problem discussed in the previous post, where the select menus were a bit buggy.

Discord.py's documentation was a bit miseleading in suggesting that edit_original_response() was the only way to edit an ephemeral message. In fact, this did not work at all for me. The real way to get the select menus working was to call defer() on the response before using edit_message() on the response rather than the interaction. This will throw an exception in the console, but for whatever reason, works perfectly fine for the actual bot.

Chaining + Profiles

The above fix with defer() was actually discovered when I was working on my chain command. The command was meant to allow users to "chain" their attack with a previous attack they received, similar to ArtFight's revenge system. To make sure users will only chaining valid attacks, I had to create a menu that let them pick from a list of attacks. Also, I wanted this to only be visible to the user performing the chain, so I needed the messages to be ephemeral. Through this process, I figured out how to use defer() and then spent some time rewriting the attack command to follow the same pattern.

I also added support for little profile cards:

Image Server

While the Beantown server suggested having image backups be a premium feature, I was eventually won over by Carter to be a Good Developer and add image backups. Since I had already done this for the Edanverse project, the actual implementation was not too difficult. It also fixed a minor issue with the attack command sending an attack notification even when there was an error adding to the database.

However, since the project has garnered more interest (and I've had more people testing it!), I'm a bit worried about the costs that I'm going to incur from this.

Misc Fixes

  • Since others were interested in using the bot, I ended up adding a server ID to the attacks database so that games would be server specific.
  • Errors were added for attempting to attack yourself or a bot, submitting a non-image, submitting an image that was too large
  • The ArtScuffle site received a major design overhaul (courtesy of a design idea from Naoto).

Upcoming

There's still... way too much to do for this site. I have 4 more commands to implement and then I need to figure out how to integrate Stripe and Discord into the website so people can purchase premium memberships (so I can cover the bot hosting and image hosting costs).

Still, this has been a super exciting project and I'm looking forward to continued development!

I've been hard at work continuing with this project. The web UI is finally live at [artscuffle.vercel.app](https://artscuffle.vercel.app)! I've gotten to a point in web development with Next.JS where the framework of a simple site like this can be done in a day (although, I did spend around 6 hours on this.)

Misc Thoughts

Yesterday was also a signicant crunch for me as I built out the main functionality of the ArtScuffle bot. While I had a general frame done the day before, the select menus were incredibly buggy and it took me roughly 6 hours to fix up all the different edge cases. Even today, I had to add a few things here and there to get the database integration functional (or... I should say more functional).

I came across some strange database bugs, but I found a workaround it (which hopefully lasts). This is something I've started to realize between working on a bunch of these projects and also at my internship: a large amount of bugs end up fixing themselves (or emerging out of nowhere). It's a bit of a whack-a-mole game to get to all of them and sometimes they're nice and disappear on their own, but I think this is actually part of why programming is so addicting (and why I end up going for six hours straight... my back is killing me!)

Actual Patches

While the main focus today was getting the website functional, I added some patches to the SQL handling so that if a new member were to join the game, they are added to the artists table before their attack is processed. The same procedure is applied if someone not in the database is being attacked.

I also modified the code for adding someone to the database to use their username as a default "first name", just because that field gets used relatively often in the website code. Theoretically, this would work as a username for a public release, but I still have to manually go in and change the database just to preserve the privacy of my friends.

  • A bit of a meta note, but my internship has made me a little better at documenting changes with git. Still working on it...

Website Development

Like I mentioned in the preamble, I'm surprised I cranked this entire website out in a day. To be fair, this is an almost entirely visual project - the main functions are just fetching from a database and then displaying the results. I've also only written barebones styling, with the majority of the styling being the Bootstrap defaults at the moment.

Even though Vercel already keeps a copy of all my deployments, here's some screenshots of the first prod release of the website!

I decided not to go with profile pages. My "professional" reasoning behind this is so I can focus more of my energy on the actual bot component and my actual reason is I am tired. So, the "attacks" and "defenses" seen on the participants page will just link to the attack page with a query string. I might add some more filters in the future, although I don't see a good use case yet.

I'm also adding a link to the documentation, since the bot is functional now!

Still More to Do!

I want to add a few more commands to the bot, mostly to get people's scores and allow them to chain attacks in a system similar to Artfight revenges. I also completely forgot to add functionality for attacks featuring more than two characters. While the point multiplier should be easy, adding multiple character links already sounds like a nightmare.

It is once again almost midnight... but I am very proud of myself. Looking back, even just a year ago, I would've spent at least a week on cranking out a website like this. Crazy how what would've been a month-long endeavor a year ago is now just a fun little weekend project. I've grown to really enjoy Next.JS (to the point of spending six hours straight just crunching...) and projects like this one are so fun.

I'll probably only add one more blog post to this series - featuring some website cleanup and adding more bot commands.