2015-11-03-16.05.56.jpg

We planned to create an attractive exhibit at the Atlassian 2015  Summit based on our theme – Robin Hood – Take time from Software and Give to Developers.
The idea was to create a dartboard game where people get to shoot arrows on a touch television screen displaying an interactive dartboard. But Addteq is a DevOps shop and we wanted to display our awesome integration skills, so we decided to use HipChat to control the entire operation. The application is purely based on Front End Technologies using Firebase for storing the scores , queue , user information , etc .

dartbd-1.png

Dartboard

    The dartboard was built using Javascript and renders on any browser. Any arrow shot onto the screen is recognized as a touch and in turn mapped onto the browser. The Javascript listens for click events and maps the coordinates of the click on the dartboard and finds the score.

    The app continuously polls the queue on firebase for new user to play the game. Until then it locks the screen down, disabling the game.

    When a new user is added to the firebase queue the app removes the screen lock and starts the game.

    Each user has 3 turns and once the user completes their turn, the app posts the scores back to Firebase and removes the player from the queue and begin to listen for new players

Firebase

Firebase is the realtime JSON database for storing and sync Dartboard app and Hipchat Plugin. It has the following Storage Strcutures

Queues Desc
PlayQueue Players waiting to play the game
ScoreList List of score
SkipQueue Players on PlayQueue later skipped
TweetQueue Scores – Players information to be tweeted

Hipchat

    The plugin is developed with nodeJS using the ac-koa framework and module for Firebase and Twitter. The plugin can be installed on the Hipchat cloud using the hosted URL.
Hipchat is the control center and provides the following functions through a Hipchat plugin.

Command User Parameters Information
/play username/twitterhandle Add new users to PlayQueue, to play the dartboard game
/skip username/twitterhandle Skip any user in the PlayQueue and adds them to SkipQueue
/queue   List the users in the PlayQueue
postscore   Posts the top 5 scores from ScoreList on twitter
/scoreslist   List the top 10 scores from ScoreList on Hipchat room

hipchartqueue-1.png
hipchat-2.png

    Everytime the dartboard app posts the score on ScoreList in Firebase , Hipchat picks the score , posts a message on the Hipchat room and tweets out the score.

dartbscore-1.png

The player scores on the dartboard!

Capture-2015-11-01-at-9.37.55-1.png

Then the score is automatically tweeted! (smile)