Forge Hub: The Jira Chain Reaction

From a small piece of information we have gave our best to ensure that the player gets awestruck by the beautiful functioning of the game and should experience the power in vanilla javascript

Comment 3

What's the game?

Undoubtedly, games are those logical sharpeners that affect the player's mind in one or another way. So, we thought of making something constructive that should not only be interactive, eye-catchy, and logically sound but also must provide some value to the person who is investing his/her time in it. Through this game, we have tried our best to ensure that the player not only enjoys the game but in the end also relishes the information collected throughout the process. With these thoughts, let us present our project FORGE HUB

What it does

  1. When the game is launched from the Jira project page then it prompts to start accessing the data from the players' Atlassian accounts.

  2. After successfully fetching those, the UI for the game is shown to the player. Dropping the idea of horizontal or vertical scaling (running an infinite loop in either of the axes), we made a canvas for the sprites and objects (houses, trees, flowers, water, fences, etc) and that gave the animated-sprite character much more freedom to move around and interact with the surroundings accordingly.

  3. Key controls for the character are the four arrow keys and in this way, the character can be moved in any of the directions. (By the way, we want to say that, it sort of feels like the character is moving on the canvas), but actually the CHARACTER is stagnant whereas the MOVABLE OBJECTS (collision boundary, houses, landmass) are changing their positions regularly.

Put your hand on a static place on the game screen and then move the character through the keys. Weird!! Is your finger moving? No, it is just the other things moving so fast that it is giving an illusion that the player is moving.

  1. With the player moving, many realms of the game get open. The character can't go past the invisible collision boundaries and moreover, there are some places for standing where small information divisions get popped up telling information/guidelines about the game. Those divisions aid the player in understanding the pivotal points & keys throughout the map. For example: whenever the game map loads, then in the top-right corner a division pops and tells which keys to be pressed in order to enter which room. We did this separations of areas-of-concern because that way we assigned different functionalities to the various sections/objects of the map.

  2. Apart from the lavish personal house of the character, there are two more houses. One is for Bitbucket and the other one is for Jira. The former one has the game titled Flip the buckets and the latter one has the game titled Maze Runner. Both of them not only deal with (bitbucket/Jira data) but also have two different methodologies behind their appearance and functioning.

  3. Flip the bucket game gets activated when the character reaches the bitbucket house (bottom left one) and presses the key B or b. Now, let's dive into the functioning of this game:

  • According to the stats fetched at the beginning of the game, the difficulty for the game is set. If the data count is less than a particular threshold then the difficulty is set to hard, otherwise, the difficulty is easy. The difficulty is always shown on the canvas in the bottom-right corner.

    • There are a total of 5 levels encompassing this game. Even if you start with the easy one, after the third level the difficulty for all players is set to hard so that everyone feels the heat of the game. (A game is never meant to be easy)
    • Basically, the tiles have to be flipped and a correct pair of tiles will be made by a group of 3. The easy levels are having a tileset of 9, so it means the player has to find 3 correct (3*3=9) pairs. The nice part of the UI is that the back side of the tile can be seen by hovering over it and it can contain data related to JS, Forge Jira, Confluence, & Bitbucket or their logos. Each correct group will contain one logo and 2 data-based tiles.

One of the correct pairs of an easy tileset is: bitbucket logo -> host -> bitbucket io whereas a hard pair is: bitbucket logo -> glob patterns -> no star

Believe it or not, for collecting 170 questions from the Atlassian products we read the majority of the documentation & resources available online and spent around 4 days alone on this thing so that they neither get too hard for beginners nor too easy for experts. So, these 170 questions over the course of 5 levels ensure that the player if not win, then also he/she returns with a bag of knowledge and we are sure that with the passing tries, the performance of the player will increase.

  • We, as developers, got stuck on the levels themselves because the questions covered a lot of things. So, to aid the player we have dropped a hint functionality. For each easy level, the player will get a hint and that also can only be used to find the second correct tile. We mean, if the player has clicked on the first tile, then only the hint can be used to highlight the next correct tile that will make a correct pair.

  • To exit the bitbucket game section, either click on the Home icon or just hit backspace. Three lives are provided for each level and post exhausting them on a single level, the player will be moved back to the start of that level (with new tiles and new combinations)

  • After you play the game itself, you will witness the extent of randomization. The back side of tiles are being painted in any of the 5 available color options in any order, the questions' content is never repeating (visited ones are marked) and the questions can come from any genre. These all things ensure that we gave the best experience possible to the player.

Did you notice the lightning-quick execution? That is made possible due to the use of vanilla JS and no libraries. This made the execution so fast that the player isn't even experiencing that in a jiffy, around 1000 lines of code are being processed.

  1. Maze Runner game gets activated when the character reaches the jira house (rightmost one) and presses the key J or j. Now, let's dive into the functioning of this game:

  • Unlike the bitbucket game, this game has not two difficulty modes. It is the same for any player and has a total of 6 levels. The objective is to pass through the mazes and reach the house located at the end of level 6. To make things more challenging, we have ensured that the player doesn't see the entire maze in one go. The paths must be tested by traversing them and only through trial and testing the correct path will be found. Mr clock only makes things more worse because the player is equipped with a timer. If the correct path can't be found in the stipulated time, then the player will be shifted back to level 1 no matter on which level the player got busted.

  • The varying shape and sizes of the mazes ensure that the player loops in them for the majority of the time. With each passing level, the timer gets reset. So, make sure that you beat the level before the level beats you.

  1. Apart from these 2 amazing sections, there is another room left for exploration. We have configured it in such a way that the player must visit that room at the very end of his gaming tenure because it is a dead end. That other room is character's personal room which shows up right behind the player at the start of the game. In that room, there are personal things of character (so, we can't discuss more of that 😂). The thing of interest for the players is the television present between the couches.

During the course of the game, there will be various data points collected and before closing the game is great to see the achievements that the player has got in the current session. So, when you stand near the television, then an information division pops out stating various attributes.

The more you play, the more you understand those terminologies.

How we built it

The starting point was designing the map/canvas on which the character will move and post that we decided the boundaries of the map (that is the points after which the player can't move). That data was stored in a 2D array and then we mapped it onto the canvas

Defining the character's movements was the next step. We had to stop him at the correct positions so that it don't cross the defined limits. With this, we were equipped with the map.

Now, we figured out the various sections of the map that will initiate different functionalities. After that, the most difficult part started, that is, making two games, separate for each data type and that required a lot of brainstorming because everything had to be done by bare JS. Be it organizing, randomizing, validating the card tiles of the bitbucket game or making the mazes, enabling the timer, dialog/info boxes at various instances, we enjoyed this to the fullest and gave our heart-and-soul to this project to make sure that it can compete with any other project out there.

Challenges we ran into

Viewing the upper content, we guess it would be great if we restrict the upcoming sections so that the entire documentation becomes readable and easy to understand. We faced the following problems:

  1. Flipping a card in js and CSS is itself a humongous task but in our case, we not only flipped them but also flipped/swapped their contents again and again in various places and events. So, that required a lot of coding & testing.

  2. Managing the event listeners was also a cumbersome task because a long queue of them is guarding our project and we have to make them understand their specific functionalities properly so that no conflicts-of-interest is made.

  3. Believe it or not, managing the UI (document selectors) was a pain in the head. (We were dealing with a ton of divs, ids, and classes, so it was getting very confusing after a point)

Apart from these, there were many other specific problems that we faced, but in the end, all of that was justified as the project turned out this much good.

Accomplishments that we're proud of

Making a complex, data-driven game using bare javascript means a lot to us. Because when we first saw Forge, we thought that it is almost impossible to make only a JS-based game. But with the passing of time, we became more confident in turning our ideas and vision into thoughts by using simple JS as it does not restrict us in any way.

Forge hub is a two-in-one game and ensures that nothing is repetitive or boring for the player. Both games are very different and sort of provide different themes in a single application. This is a game for both arcade & knowledge lovers

Interactivity & randomization took this project to a new height because it is smart enough to cover almost every edge case and ensures that nothing is broken.

What we learned

We leaned the canvas API for the 2d sprites animation & rendering. Apart from this, we touched upon every small/huge topic of JS in this application which gives us more satisfaction. So, this app strengthened our web-dev concepts and we sharpened our minds through this sharpener-like game.

What's next for Forge Hub

We are working on a new integration mechanism for the Bitbucket Rest API so that the end-user can use it in custom-UI forge apps easily and effectively.

+ 18 more
Share this project:

Updates