CraftCord: play for ∞

Last month, we announced our first Discord Activity on Twitter. Inspired by neal.fun's Infinite Craft, CraftCord lets you infinitely merge anything with your friends, in a collaborative space. In this article, we'll dive into how we made CraftCord & our plans for the future!

What is CraftCord?

What happens if you mix Fire and Water? How about Italy and Godzilla? All of these combinations are possible within CraftCord. The core gameplay revolves around this, a casual & simple game that anyone can play in a Discord VC, no matter how occupied they are. In our playtesting rounds, we've seen people collaborate on some truly unhinged combination chains, making everything from Pizza to the entire Fallout game series.

How are combinations created?

Any time you drag two things over one another, you'll combine them. If someone else has combined these things before, we already know what it'll make, But if you're blazing into new territory, we need to work out what the result should be. To achieve this, we leverage Google Gemini - A general AI model from Google DeepMind - to creatively merge things together. Use of LLMs & AI in tech is controversial, we see this use case as the ideal place for such technology, no humans are being replaced & we never need outputs to be accurate. This isn't the first Discord App powered by this technology developed by PNLY: in 2023 we worked with Memrise & Discord to bring their language learning app to Discord as Membot. Discord has their own dabblings with AI technologies too - though they have been somewhat ill fated.

Combinations can get incredibly complex. We wanted to visualize these chains for development purposes (more on that later), but we also find the creativity needed for these combiniations incredibly cool. Just look at what it takes to make Pizza!

How do you moderate AI outputs?

Carefully. Very early in development a policy question was raised - what if a combination results in something controversial? Where should we draw the line for what is and isn't ok? This is a constantly evolving question, but our answer for now is to leverage the moderation options of Google Gemini & react to issues from playtests as they arise. This considered, we want to take a more relaxed approach to moderation while preventing genuinely inappropriate sexual & harm-related combinations from appearing. We don't want to make a restrictive experience because Gay Bong and Italy making Pizza is funny, and that's really our goal with CraftCord - Fun!

What is your tech stack?

Let's hear from one of our developers, Alula:

First, I want to say, that I'm very excited for custom Discord Activities being opened up to the public, and working on this was pretty fun.

The tech stack we used involved some changes very early in the development.

For example, we initially wanted to build the user-facing part of the app (frontend) using Pixi.JS, but after several considerations (mostly other team members struggling with it), we decided to redo it using React and Tailwind.css. After the switch, we managed to build a fully functional frontend within 3-4 days.

The server part, however, didn't go through as many changes and it was even mostly taken from another project I've been developing in parallel.

The tech stack we used for the server is also somewhat "industry-standard", it consists of Node.js, Redis, and PostgreSQL as a cache/data storage and Colyseus Multiplayer Framework that saved me a lot of time and headache.

Aside from the tooling being annoying, I think the biggest challenges start when you add AI to the stack. We're using an LLM to come up with ideas on how to combine two things, which technically should give us infinite possibilities. At the time of writing it's Google Gemini, but we might likely evaluate other options in the future, including self-hosted ones.

As for hosting, we use Cloudflare Pages for our frontend & a VPS surfaced via Cloudflare Tunnels for our server, with eventual plans to leverage Docker & Kubernetes for scalability once Discord Activites see a general release. All of our code is managed via GitHub with automated deploys. Eventually, we may OSS aspects of our work.

What was your design process?

When the concept of CraftCord was first established, our developer JohnyTheCarrot leveraged Figma to make early mockups. We iterated over core UI elements very early in the design process - what should cursors look like? How should we show users? What should combinations look like? These are all questions Figma helped us answer before any code was written!

Let's hear more about this from JohnyTheCarrot:

Working on CraftCord has been a fun combination of my prior web development experience and my new game development experience that I get through my game development college education. For the front end we decided upon React. It’s been interesting to work with a whole new kind of responsiveness which is trying to get the UI to scale correctly on the small PIP view.

UI scaling is an incredibly important topic - Discord isn't just a Desktop app after all! We strived to support everything from web, to tablets, to phones. This meant carefully designing adaptive UI that works seamlessly with a 4k monitor and the touchscreen on your phone.

What's next for CraftCord?

While the core gameplay is solid, we want to do more to make CraftCord truly unique & give users even more to do with their friends. With the ability to map combination chains, we're exploring making a Wikipedia Game like experience, where you can compete - or cooperate - with your friends to make a set thing as fast as possible! We're also looking at keeping things fresh. Once you've made a bunch of things the gameplay loses a lot of steam, this is why we're exploring when and how combinations should persist - We want to keep your favourite things to grab at will while getting rid of all the less fun things you make along the way. Seasonal content is also something we're contemplating, why limit the starting elements to Fire, Water, Air and Earth? Why not atoms? Maybe objects?

The most important part of making CraftCord the best it can be is You, we are currently open to playtesting applications, so you don't just need to read about CraftCord. You can play it and help us shape the future of this awesome lil' app!