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 .
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 |
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.
The player scores on the dartboard!
Then the score is automatically tweeted!
