Let me get the obvious out of the way - it’s ugly. I know!

What you are looking at is what I have so far of the main game screen of my web based dungeon crawling card game based off of the game "Scoundrel".

If you haven’t heard of Scoundrel, I wouldn’t be surprised. It seems rather underground but when I got a random video suggestion on my youtube feed, showing off the card game, I knew I had to make it.

So why is it so ugly dude?

This is made using React JS, the UI library for I’m learning for web development. So this project is a way for me to really get a grip of React but also create a game that I genuinely think will be a lot of fun when finished.

Because of being new to React, a lot of time has been spent on tackling the the most difficult game logic, get it working, and getting it to properly update the UI when things happen.......such as this:

Here, you’ll see 4 cards, including one monster card with a monster icon and monster power. The icon and the power + the power text are all dynamic. These cards currently get displayed on page load and get randomly selected from a deck that now has 4 less cards. (They properly get removed from the deck of cards)

Now watch what happens when I click on that MONSTER

The monster gets removed, the player has lost health, and the cards stay in order!

Challenges

That goes to say, that implementing those mechanics were not exactly easy for someone who really is only just learning this UI library. To those experienced with React and web development, more than me, it may come a lot easier but this was a significant hurdle and starting from nothing, it’s a great feeling!

This is not an AI project

I will admit, I occasionally use AI to help me answer questions, such as if a useRef value can be used in a dependency array for a useEffect or ask why my image from my public folder isn’t loading correctly as I share it a screenshot of my React Component which is using an image’s src attribute to grab a url that I didn’t know was incorrect.

However.....

99% of this project is my own, from scratch code. This is not to discourage the use of AI or even shine a bad light on it but again, this project is here to help build my skill, so I keep AI to a minimum.

Big Extreme Noobie Refactor

Now, I’m not a huge planner. I prefer to not spend a long time drawing things out, writing things up, and so on. Not to say I never do or would but for how I function, I love to really just dive in and get SOMETHING up and running.

Now mix that with someone new to React and well......I got something going.

Then I was up until 7am one night, refactoring almost the entirety of that logic so that when you click a card, things can actually happen elsewhere in the game, as you’ve seen above.

Lessons learned.

However, I do not regret it as it taught me a lot.

Ok shut up, what is the idea of the game?

Ultimately, this game is a solo card game, similar to how Solitaire is solo. However, since I’m a big gaming nerd, it’s also a dungeon crawler where you find weapons, monsters, and potions of various strengths and must strategically choose what to loot, what to fight, or when to run.

You either get through the rooms in one piece or you end up on this thing....

aka, your health drops to 0 and you die.

Now, there’s many rules associated with that, such as which weapons can attack what and how many times you can flee but big picture, that’s the idea.

If you are more curious about the smaller details, just ask! (or look up Scoundrel but I’d prefer a comment 😭)

Anyways - Tell me what you think!

If you have thoughts on the idea or how it looks visually, even in it’s early stage, I’d love to hear!

Also, if you’ve run into the same challenges as me making a game or anything else, let me know that as well!

Thanks for reading 🥳