DEV Community

Cover image for Idle MMORPG with DevCycle Feature Flags ๐Ÿงโ€โ™€๏ธ
Lem Dulfo
Lem Dulfo

Posted on โ€ข Edited on

3 2 3 1 3

Idle MMORPG with DevCycle Feature Flags ๐Ÿงโ€โ™€๏ธ

This is a submission for the DevCycle Feature Flag Challenge: Feature Flag Funhouse

What I Built

For this challenge, I built a role-playing game in React Native where players remit their mined gold to their faction's bank and collectively unlock features. The more players a faction recruits, the faster that faction can buy feature upgrades.

Feature Factions game banner

Welcome to Feature Factions, where the fate of three ancient races rests in your hands! Will you join the precise and mechanical Aetheron, the resilient and cunning Bessari, or the mystical and graceful Calenwyn? Mine resources to fuel your factionโ€™s treasuryโ€”the Aetheron Central Node ๐Ÿค–, the Bessari Guild Vault ๐Ÿง‘โ€๐Ÿญ, or the Calenwyn Sylvan Reliquary ๐Ÿงโ€โ™€๏ธ. Work with your allies to unlock powerful upgrades and strategize for the ultimate showdown. The war is comingโ€”#StopPretending ๐Ÿง™and #StartShipping ๐Ÿš€

Demo

Screenshots of the 3 factions in Feature Factions game

These are original sprites I designed, inspired by Realm of the Mad God.

For the first "upgrade", all Factions get a baseline option.

Screenshot showing feature varations in DevCycle

I used Permission Feature Flags, and gated based on the UserFaction property. The Bessaris get Configuration 2:

screenshot showing targeting in DevCycle

My Code

https://github.com/bytehala/feature-factions-rpg

My DevCycle Experience

A rocky start, but overall good.

I followed the React Native quickstart, and I kept getting UserError: Invalid SDK key provided when I used the mobile SDK key.

To debug this, I installed the DevCycle CLI and worked to rule out React Native as the source of the error. This led me to discover the dvc keys get command, which showed the same keys I was seeing in my dashboard. Interestingly, the client key worked in my React Native app, but the mobile SDK key did not.

A screenshot of the DevCycle CLI command dvc keys get

The DevCycle documentation that I needed for React Native, CLI, and the Management API are quite thorough. I like that the CLI is available, as well as the Management API. These allowed me to quickly test features and contextualize DevCycle feature flags outside of my Feature Factions code without having to scaffold a brand new app.

# Getting an auth token in the command line via cURL:
curl --request POST \
  --url "https://auth.devcycle.com/oauth/token" \
  --header 'content-type: application/x-www-form-urlencoded' \
  --data grant_type=client_credentials \
  --data audience=https://api.devcycle.com/ \
  --data client_id=<client id> \
  --data client_secret=<client secret>
Enter fullscreen mode Exit fullscreen mode

I also like that the client app can identify with DevCycle using custom data. It opens up possibilities such as the app "asking" for features because of an on-device trigger or threshold that gets reached, for example, if the user has interacted enough times with the app, it can ask the backend if there are newly configured features or rewards.

In Feature Factions, I used customData to send the user's faction to DevCycle:

devCycleClient.identifyUser(
    {
      user_id: 'test-user',
      customData: {
        userFaction,
      },
    }
);
Enter fullscreen mode Exit fullscreen mode

I then grab the available upgrade options for that faction, which I use to populate the button choices:

  const {options}: {options: string[]} =
    useVariableValue(variableKey, {options: []});
Enter fullscreen mode Exit fullscreen mode

And that's how we can use DevCycle feature flags to dynamically control upgrade options that players can vote for in their faction. Think of all the possibilities!

The diagram below illustrates how a backend service would enable features for Factions when they reach a Gold threshold or other conditions:

flowchart describing how the backend generates features for Feature Factions

Since this is a POC, I didnโ€™t create an actual backend integration with DevCycle, I just used DevCycle Dashboard directly. However, I was able to simulate the backend functionality by using a cURL command to enable features for the Factions, thanks to the DevCycle Management API.

This was a fun challenge overall, and the prompt really made me think of feature flags in a new light.

DEV Challenges are live now!

DEV Challenges Hub

Check out all the ways to participate, certify your skills, and win prizes.

Visit the Challenges Hub

Top comments (0)

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs

๐Ÿ‘‹ Kindness is contagious

Explore a sea of insights with this enlightening post, highly esteemed within the nurturing DEV Community. Coders of all stripes are invited to participate and contribute to our shared knowledge.

Expressing gratitude with a simple "thank you" can make a big impact. Leave your thanks in the comments!

On DEV, exchanging ideas smooths our way and strengthens our community bonds. Found this useful? A quick note of thanks to the author can mean a lot.

Okay