Wild Treasury

Wild Treasury - Game Teaser
GIF
Wild Treasury - Draw a card
GIF
Wild Treasury - Set completed!
Wild Treasury - Activity Dark Mode
Wild Treasury - Leaderboard
Wild Treasury - Activity
Mockup Marketplace - Request Trade
Mockup Marketplace - Accept Trade
Wild Treasury - App Architecture
Mockup Arena - Enter Game
Mockup Arena - Modal Game
Wild Treasury - Extension Pack

Inspiration

Hey there, my name is Clara. I believe that incorporating fun and games into our work can be beneficial, as it can boost morale, increase productivity, and enhance problem-solving skills. I love the idea of making our use of Atlassian tools more engaging and fun. The Devs Unleashed hackathon presented itself as a great opportunity to do so. I was motivated to participate, but I had to overcome a few challenges:

only a short period of time to submit a functional game ⏱
no prior experience in game development and designs 🎮
only beginner skills in software development and Forge 💻

To help me with the app development and Forge my colleague Julian joined in. The game we wanted to build had to be simple but fun, so we focused on designing a card game. To incorporate different Atlassian tools, we wanted to award a user’s daily tasks in Jira or Confluence to earn cards and ultimately play with them.

The most important task now was to come up with a card game ♠️ that provides enough fun, is easy to understand and creates engagement over a longer period of time. A well-known and simple card game is the traditional quartets, often with pictures of animals on the cards, where the person with the most quartets (sets of four) wins. To make it a long lasting and engaging game, the gameplay needed to be changed. So to distribute the cards, we used elements of collectible card games, which had gained popularity again in recent years, not only among children. So we assigned the cards a specific rarity and strengths to add complexity to the distribution of the cards. Last but not least, the cards needed to be creative and funny enough to make everyone want to collect them. Therefore we used AI to design engaging and cute animal paintings for our cards. While collectible cards are usually purchased in randomized booster packs, our players should earn coins to purchase a random card by completing various tasks in Confluence and Jira. This way we could increase productivity in the Atlassian SAAS products and reward the work by providing coins to purchase cards.

What it does

Explore Wild Treasury. Wild Treasury is a collectible card game built for the Atlassian Cloud ecosystem. You are rewarded for your daily work in Confluence and Jira, by performing tasks like viewing or creating a page or issue, mentioning a user or assigning a task. With each performed task you earn a specific amount of diamonds 💎 which you can use to purchase cards. Complete all card decks (sets of four) to win! Compare your progress on the leaderboard with your colleagues and check out their cards. Be persistent and don’t give up, if you collect a card more than once. You will soon be able to trade them with your colleagues. You have to be lucky and it will take a while to collect all “shiny” and “rare” cards - but it’s worth it!

Overview - The Game

Overview is where the magic happens and it is quite literally your Wild Treasury. You can see your rank in the game, how many Diamonds 💎 you have available to purchase more cards, the amount of collected cards and all your card decks. Your goal is to complete all categories by collecting all four animal cards. Scrolling through your deck, you can see the cards you have already collected, how many you have already collected and which cards are still missing. Select a card to learn more about the wild critter you have found, you might be surprised how much you have in common :)

Leaderboard - Be ahead of the game

It’s not a game, if you are playing alone! Check out your colleagues achievements on the leaderboard and make your way to the top by collecting more cards! The more cards you collect the better is your rank. Each rank comes with a new header image for your profile page! You can even see your colleagues cards - just choose one of your opponents and sneak a peek into their collection.

Wild Treasury Leaderboard

Activity - Earn more diamonds 💎 by being active

The Activity tab shows your work achievements and how many diamonds 💎 you have earned so far. It also lists all activities in Confluence and Jira which get rewarded in the game. To give you a kickstart for collecting cards, every user starts with 100 diamonds! 🎁💎

Wild Treasury Activity

Buy a card and wait for the result!

Now the fun begins! By buying a card a selection of 100 cards is being shown and one card is randomly selected for you. Based on the card’s rarity, the probability of a single card to be chosen lies between 0.8 and 3.75 %. Cards with a high rarity are not only very special they also have a high strength. The strength will be more important once you are able to trade your cards! 🚀 🤝

Wild Treasury - draw a card

How to make use of you win

The winner of a traditional quartets game is the player who has collected the most sets of cards. Wild Treasury offers many possibilities for companies to award the winners of our card collections, and we want to leave it up to each company's individual business to award small rewards. See the list of ideas below:

honorable mention in the dev teams review 🏆
lunch with shareholders 🥗🥘
coffee mug with company logo ☕️
first place in daily standup 🥇
budget for team day 🏄🏽‍♂️
gift cards 🎟

Wild Treasury - Set completed!

How we built it

Atlassian Forge

Wild Treasury is built on top of the Atlassian Forge platform. We were lucky that Atlassian provides this kind of software development kit. We didn’t have to care about operating Cloud infrastructure while focusing on the actual business logic of our code. 👩🏻‍💻

The game makes use of Forge’s Product Events and Web Trigger API. We register several handlers for different events that can occur within a Jira or Confluence Cloud instance. We then assign different amounts of diamonds 💎 for specific events to the user's account balance. We keep track of the points by using the Storage API.

Wild Treasury is a cross-product app. Although Atlassian states those apps currently can’t be uploaded to the marketplace we were glad that Forge supports those kinds of integrations and you can install cross-product apps via installation link. This approach allowed us a deeper integration into the ecosystem than we initially thought. First, it was challenging to consume the Confluence Product events within Jira as we will outline later. ⬇️

The front-end part was more straightforward. We use React and Atlaskit for the user interface. While researching the details of the Forge platform we stumbled across the great news that Atlassian supports dark mode in Beta now! To offer greater accessibility we immediately adopted the new Design Tokens and are proud to say that the game already supports the new dark theme as you can see in the video and the image below. 😎

Dark Mode

Card Design 🦁🐈‍⬛

A key element of the game that brings fun and excitement is the card design. It was very important to us to have engaging animal characters which are not only cute but humanized and relatable. So besides being a fluffy mammal, each of them has a job in IT or works with Atlassian tools on a daily basis. They love their jobs, a sunny workation, gaming, and drinking coffee as much as you do. 🦊🐼

All designs were created in a painting style by natural language descriptions given to DALL-E 2, an image generating AI model. The description to each character was supported by ChatGPT to achieve a consistent style and lengths through exact instructions to the AI. The description further supports the accessibility of the game by making it available to visually impaired Atlassian users. 🔊

Challenges we ran into

We wanted to achieve an experience that brings users of different Atlassian products together. So we aimed for an activity stream that collects the events from Jira and Confluence in one place. Deploying a cross-product app that registers triggers for events from different origins was easy. Unfortunately, we realized that the two deployments of the Forge app on a Jira and a Confluence site do not share the same Storage. 📦📦

Invoking Storage API within an event handler, therefore, led to a persistence layer that is split up between those products. Wild Treasury’s gaming experience is based on a Jira globalPage module from which we couldn’t access the values persisted by the invocation of a Confluence-based event handler. 📝

Wild Treasury - App Architecture

We are proud that we found a solution for that by leveraging the Web trigger API of Forge. To enable the Confluence integration the administrator now only needs to copy a Web trigger URL that is shown on the administration page of Wild Treasury in Jira to the Confluence configuration page of Wild Treasury. This configuration has to be made only once. ☑️

This also would be our most important feedback to Atlassian regarding cross-product apps. Right now the communication between the Confluence and the Jira side of a Forge application is complicated and comes with heavy configuration for the user. We also are super excited about the upcoming Bitbucket Cloud compatibility of Forge. We would have loved to integrate that platform into Wild Treasury as well.

Accomplishments that we're proud of & what we learned

After finishing our project in the first week of January, we were looking back to our first brainstorming session just a week before Christmas. We are very excited that we successfully managed to submit a functional game in such a short period of time. Even if we both didn’t have any experience in game development and design, we found a way to invent a fun card game! We let our colleagues play around with it and we were happy that everyone loved to draw and collect new cards and was excited about the quality and the designs. 👩🏽‍🎨🐨

We learned a lot about how to write better prompts for better and faster results from the used AI. For me personally (Clara), I am proud that with Julians help and knowledge, I learned much more about the Atlassian Forge platform, the set-up of a development environment and how Atlassian product events can be leveraged and connected. That’s also why both of us are most proud of the aggregated activity stream that enables Wild Treasury to reward points for user interaction across multiple products. 💎💙🔥

What's next for Wild Treasury

As of now, Wild Treasury is our basic version of a collectible card game. We plan to add a lot more fun and interaction by implementing a ‘Marketplace’, ‘Arena’ and ‘Extension Packs’.

Marketplace 🤝♠️

Trade your cards with one of your colleagues to finish both your decks. Select a user you want to trade your cards with and make them a fair offer! Choose at least one of your cards and select one or more cards at your opponents deck that you want to trade with! They can accept or decline your offer. Mockup Marketplace - Request Trade

Mockup Marketplace - Accept Trade

Arena 🎮 💥

The Arena is the place where you have to rely on the strength of your cards. Choose a strong character from your deck and make the card available in your arena. The card you have chosen is only visible to you, your opponents can only guess which character you have selected based on your public card deck. Once you have set up a game, you are matched with another player and the battle starts! The strongest cards wins and gets to keep both cards. Was your opponent’s card stronger than yours, you lose this card from your deck.

Mockup Arena - Enter Game

Mockup Arena - Modal Game

Extension Packs ➕👯‍♀️

As a next step we would like to add extension packs. They can be enabled by an administrator for more advanced teams that like to extend their gaming experience. Check them out below:

Extension Pack - Happy Hedgehogs