DDevelopment & Design

Super Confitura Man

How Super Confitura Man came to be :) Recently at TouK we had a one-day hackathon. There was no main theme for it, you just could post a project idea, gather people around it and hack on that idea for a whole day – drinks and pizza included. My main idea was to create something that could be fun to build and be useful somehow to others. I’d figured out that since Confitura was just around a corner I could make a game, that would be playable at TouK’s booth at the conference venue. This idea seemed good enough to attract Rafał Nowak @RNowak3 and Marcin Jasion @marcinjasion – two TouK employees, that with me formed a team for the hackathon. The initial plan was to develop a simple mario-style game, with preceduraly generated levels, random collectible items and enemies. One of the ideas was to introduce Confitura Man as the main character, but due to time constraints, this fall through. We’ve decided to just choose a random available sprite for a character – hence the onion man :) How the game is played? Since we wanted to have a scoreboard and have unique users, we’ve printed out QR codes. A person that would like to play the game could pick up a QR code, show it against a camera attached to the play booth. The start page scanned the QR code and launched the game with username read from paper code. The rest of the game was playable with gamepad or keyboard. Technicalities Writing a game takes a lot of time and effort. We wanted to deliver, so we’ve decided to spend some time in the days before the hackathon just to bootstrap the technology stack of our enterprise. We’ve decided that the game would be written in some Javascript based engine, with Google Chrome as a web platform. There are a lot of HTML5 game engines – list of html5 game engines and you could easily create a game with each and every of them. We’ve decided to use Phaser IO which handles a lot of difficult, game-related stuff on its own. So, we didn’t have to worry about physics, loading and storing assets, animations, object collisions, controls input/output. Go see for yourself, it is really nice and easy to use. Scoreboard would be a rip-off from JIRA Survivor with stats being served from some web server app. To make things harder, the backend server was written in Clojure. With no experience in that language in the team, it was a bit risky, but the tasks of the server were trivial, so if all that clojure effort failed, it could be rewritten in something we know. Statistics During the whole Confitura day there were 69 unique players (69 QR codes were used), and 1237 games were played. The final score looked like this: Barister Lingerie 158 – 1450 points Boilerdang Custardbath 386 – 1060 points Benadryl Clarytin 306 – 870 points And the obligatory scoreboard screenshot: Obstacles The game, being created in just one day, had to have problems :) It wasn’t play tested enough, there were some rough edges. During the day we had to make a few fixes: the server did not respect the highest score by specific user, it was just overwritting a user’s score with it’s latest one, there was one feature not supported on keyboard, that was available on gamepad – turbo button server was opening a database connection each time it got a request, so after around 5 minutes it would exhaust open file limit for MongoDB (backend database), this was easily fixed – thou the fix is a bit hackish :) These were easily identified and fixed. Unfortunately there were issues that we were unable to fix while the event was on: google chrome kept asking for the permission to use webcam – this was very annoying, and all the info found on the web did not work – StackOverflow thread it was hard to start the game with QR code – either the codes were too small, or the lighting around that area was inappropriate – I think this issue could be fixed by printing larger codes, Technology evaluation All in all we were pretty happy with the chosen stack. Phaser was easy to use and left us with just the fun parts of the game creation process. Finding the right graphics with appropriate licensing was rather hard. We didn’t have enough time to polish all the visual aspects of the game before Confitura. Writing a server in clojure was the most challenging part, with all the new syntax and new libraries. There were tasks, trivial in java/scala, but hard in Clojure – at least for a whimpy beginners :) Nevertheless Clojure seems like a really handy tool and I’d like to dive deeper into its ecosystem. Source code All of the sources for the game can be found here TouK/confitura-man. The repository is split into two parts: game – HTML5 game server – clojure based backend server To run the server you need to have a local MongoDB installation. Than in server’s directory run: $ lein ring server-headless This will start a server on http://localhost:3000 To run the game you need to install dependencies with bower and than run $ grunt from game’s directory. To launch the QR reading part of the game, you enter http://localhost:9000/start.html. After scanning the code you’ll be redirected to http://localhost:9000/index.html – and the game starts. Conclusion Summing up, it was a great experience creating the game. It was fun to watch people playing the game. And even with all those glitches and stupid graphics, there were people vigorously playing it, which was awesome. Thanks to Rafał and Michał for great coding experience, and thanks to all the players of our stupid little game. If you’d like to ask me about anything – feel free to contact me by mail or twitter @zygm0nt Recently at TouK we had a one-day hackathon. There was no main theme for it, you just could post a project idea, gather people around it and hack on that idea for a whole day – drinks and pizza included. My main idea was to create something that could be fun to build and be useful somehow to others. I’d figured out that since Confitura was just around a corner I could make a game, that would be playable at TouK’s booth at the conference venue. This idea seemed good enough to attract >Conclusion

How Super Confitura Man came to be :)

Recently at TouK we had a one-day hackathon. There was no main theme for
it, you just could post a project idea, gather people around it and hack
on that idea for a whole day – drinks and pizza included.

My main idea was to create something that could be fun to build and be
useful somehow to others. I’d figured out that since Confitura was just
around a corner I could make a game, that would be playable at TouK’s
booth at the conference venue. This idea seemed good enough to attract
Rafał Nowak @RNowak3 and Marcin Jasion
@marcinjasion – two TouK employees, that with me
formed a team for the hackathon.

Confitura 01

The initial plan was to develop a simple mario-style game, with
preceduraly generated levels, random collectible items and enemies. One
of the ideas was to introduce Confitura Man as the main character, but
due to time constraints, this fall through. We’ve decided to just choose
a random available sprite for a character – hence the onion man :)

Confitura 02

How the game is played?

Since we wanted to have a scoreboard and have unique users, we’ve
printed out QR codes. A person that would like to play the game could
pick up a QR code, show it against a camera attached to the play booth.
The start page scanned the QR code and launched the game with username
read from paper code.

The rest of the game was playable with gamepad or keyboard.

Confitura game screen

Technicalities

Writing a game takes a lot of time and effort. We wanted to deliver, so
we’ve decided to spend some time in the days before the hackathon just
to bootstrap the technology stack of our enterprise.

We’ve decided that the game would be written in some Javascript based
engine, with Google Chrome as a web platform. There are a lot of HTML5
game engines – list of html5 game engines and you could easily create a
game with each and every of them. We’ve decided to use Phaser IO
which handles a lot of difficult, game-related stuff on its own. So, we
didn’t have to worry about physics, loading and storing assets,
animations, object collisions, controls input/output. Go see for
yourself, it is really nice and easy to use.

Scoreboard would be a rip-off from JIRA Survivor
with stats being served from some web server app. To make things harder,
the backend server was written in Clojure. With no experience in that
language in the team, it was a bit risky, but the tasks of the server
were trivial, so if all that clojure effort failed, it could be
rewritten in something we know.

Statistics

During the whole Confitura day there were 69 unique players (69 QR codes
were used), and 1237 games were played. The final score looked like
this:

  1. Barister Lingerie 158 – 1450 points
  2. Boilerdang Custardbath 386 – 1060 points
  3. Benadryl Clarytin 306 – 870 points

And the obligatory scoreboard screenshot:

Confitura 03

Obstacles

The game, being created in just one day, had to have problems :) It
wasn’t play tested enough, there were some rough edges. During the day
we had to make a few fixes:

  • the server did not respect the highest score by specific user, it was just overwritting a user’s score with it’s latest one,
  • there was one feature not supported on keyboard, that was available on gamepad – turbo button
  • server was opening a database connection each time it got a request, so after around 5 minutes it would exhaust open file limit for MongoDB (backend database), this was easily fixed – thou the fix is a bit hackish :)

These were easily identified and fixed.
Unfortunately there were issues that we were unable to fix while the
event was on:

  • google chrome kept asking for the permission to use webcam – this was very annoying, and all the info found on the web did not work – StackOverflow thread
  • it was hard to start the game with QR code – either the codes were too small, or the lighting around that area was inappropriate – I think this
    issue could be fixed by printing larger codes,

Technology evaluation

All in all we were pretty happy with the chosen stack. Phaser was easy
to use and left us with just the fun parts of the game creation process.
Finding the right graphics with appropriate licensing was rather hard.
We didn’t have enough time to polish all the visual aspects of the game
before Confitura.

Writing a server in clojure was the most challenging part, with all the
new syntax and new libraries. There were tasks, trivial in java/scala,
but hard in Clojure – at least for a whimpy beginners :) Nevertheless
Clojure seems like a really handy tool and I’d like to dive deeper into
its ecosystem.

Source code

All of the sources for the game can be found here
TouK/confitura-man.

The repository is split into two parts:

  • game – HTML5 game
  • server – clojure based backend server

To run the server you need to have a local MongoDB installation. Than in
server’s directory run:

$ lein ring server-headless

This will start a server on http://localhost:3000

To run the game you need to install dependencies with bower and than
run

$ grunt

from game’s directory.

To launch the QR reading part of the game, you enter
http://localhost:9000/start.html. After scanning the code you’ll be
redirected to http://localhost:9000/index.html – and the game starts.

Conclusion

Summing up, it was a great experience creating the game. It was fun to
watch people playing the game. And even with all those glitches and
stupid graphics, there were people vigorously playing it, which was
awesome.

Thanks to Rafał and Michał for great coding experience, and thanks to all the players of our stupid little game. If you’d like to ask me about anything – feel free to contact me by mail or twitter @zygm0nt

— Previous article

Będziemy na Confiturze

Next article —

JDay 2014 in Lviv sponsored by TouK

You May Also Like
DDevelopment & Design

CasperJS for Java developers

Why CasperJS

Being a Java developer is kinda hard these days. Java may not be dead yet, but when keeping in sync with all the hipster JavaScript frameworks could make us feel a bit outside the playground. It’s even hard to list JavaScript frameworks with latest releases on one website.

In my current project, we are using AngularJS. It’a a nice abstraction of MV* pattern in frontend layer of any web application (we use Grails underneath). Here is a nice article with an 8-point Win List of Angular way of handling AJAX calls and updating the view. So it’s not only a funny new framework but a truly helper of keeping your code clean and neat.

But there is also another area when you can put helpful JS framework in place of plan-old-java one - functional tests. Especially when you are dealing with one page app with lots of asynchronous REST/JSON communication.

Selenium and Geb

In Java/JVM project the typical is to use Selenium with some wrapper like Geb. So you start your project, setup your CI-functional testing pipeline and… after 1 month of coding your tests stop working and being maintainable. The frameworks itselves are not bad, but the typical setup is so heavy and has so many points of failure that keeping it working in a real life project is really hard.

Here is my list of common myths about Selenium: * It allows you to record test scripts via handy GUI - maybe some static request/response sites. In modern web applications with asynchronous REST/JSON communication your tests must contain a lot of “waitFor” statements and you cannot automate where these should be included. * It allows you to test your web app against many browsers - don’t try to automate IE tests! You have to manually open your app in IE to see how it actually bahaves! * It integrates well with continuous integration servers like Jenkins - you have to setup Selenium Grid on server with X installed to run tests on Chrome or Firefox and a Windows server for IE. And the headless HtmlUnit driver lacks a lot of JS support.

So I decided to try something different and introduce a bit of JavaScript tooling in our project by using CasperJS.

Introduction

CasperJS is simple but powerful navigation scripting & testing utility for PhantomJS - scritable headless WebKit (which is an rendering engine used by Safari and Chrome). In short - CasperJS allows you to navigate and make assertions about web pages as they’d been rendered in Google Chrome. It is enough for me to automate the functional tests of my application.

If you want a gentle introduction to the world of CasperJS I suggest you to read: * Official website, especially installation guide and API * Introductionary article from CasperJS creator Nicolas Perriault * Highlevel testing with CasperJS by Kevin van Zonneveld * grails-angular-scaffolding plugin by Rob Fletcher with some working CasperJS tests

Full example

I run my test suite via following script:

casperjs test --direct --log-level=debug --testhost=localhost:8080 --includes=test/casper/includes/casper-angular.coffee,test/casper/includes/pages.coffee test/casper/specs/

casper-angular.coffe

casper.test.on "fail", (failure) ->
    casper.capture(screenshot)

testhost   = casper.cli.get "testhost"
screenshot = 'test-fail.png'

casper
    .log("Using testhost: #{testhost}", "info")
    .log("Using screenshot: #{screenshot}", "info")

casper.waitUntilVisible = (selector, message, callback) ->
    @waitFor ->
        @visible selector
    , callback, (timeout) ->
        @log("Selector [#{selector}] not visible, failing")
        withParentSelector selector, (parent) ->
            casper.log("Output of parent selector [#{parent}]")
            casper.debugHTML(parent)
        @echo message, "RED_BAR"
        @capture(screenshot)
        @test.fail(f("Wait timeout occured (%dms)", timeout))

withParentSelector = (selector, callback) ->
    if selector.lastIndexOf(" ") > 0
       parent = selector[0..selector.lastIndexOf(" ")-1]
       callback(parent)

Sample pages.coffee:

x = require('casper').selectXPath

class EditDocumentPage

    assertAt: ->
        casper.test.assertSelectorExists("div.customerAccountInfo", 'at EditDocumentPage')

    templatesTreeFirstCategory: 'ul.tree li label'
    templatesTreeFirstTemplate: 'ul.tree li a'
    closePreview: '.closePreview a'
    smallPreview: '.smallPreviewContent img'
    bigPreview: 'img.previewImage'
    confirmDelete: x("//div[@class='modal-footer']/a[1]")

casper.editDocument = new EditDocumentPage()

End a test script:

testhost = casper.cli.get "testhost" or 'localhost:8080'

casper.start "http://#{testhost}/app", ->
    @test.assertHttpStatus 302
    @test.assertUrlMatch /\/fakeLogin/, 'auto login'
    @test.assert @visible('input#Create'), 'mock login button'
    @click 'input#Create'

casper.then ->
    @test.assertUrlMatch /document#\/edit/, 'new document'
    @editDocument.assertAt()
    @waitUntilVisible @editDocument.templatesTreeFirstCategory, 'template categories not visible', ->
        @click @editDocument.templatesTreeFirstCategory
        @waitUntilVisible @editDocument.templatesTreeFirstTemplate, 'template not visible', ->
            @click @editDocument.templatesTreeFirstTemplate

casper.then ->
    @waitUntilVisible @editDocument.smallPreview, 'small preview not visible', ->
        # could be dblclick / whatever
        @mouseEvent('click', @editDocument.smallPreview)

casper.then ->
    @waitUntilVisible @editDocument.bigPreview, 'big preview should be visible', ->
        @test.assertEvalEquals ->
            $('.pageCounter').text()
        , '1/1', 'page counter should be visible'
        @click @editDocument.closePreview

casper.then ->
    @click 'button.cancel'
    @waitUntilVisible '.modal-footer', 'delete confirmation not visible', ->
        @click @editDocument.confirmDelete

casper.run ->
    @test.done()

Here is a list of CasperJS features/caveats used here:

  • Using CoffeeScript is a huge win for your test code to look neat
  • When using casper test command, beware of different (than above articles) logging setup. You can pass --direct --log-level=debug from commandline for best results. Logging is essential here since Phantom often exists without any error and you do want to know what just happened.
  • Extract your helper code into separate files and include them by using --includes switch.
  • When passing server URL as a commandline switch remember that in CoffeeScript variables are not visible between multiple source files (unless getting them via window object)
  • It’s good to override standard waitUntilVisible with capting a screenshot and making a proper log statement. In my version I also look for a parent selector and debugHTML the content of it - great for debugging what is actually rendered by the browser.
  • Selenium and Geb have a nice concept of Page Objects - an abstract models of pages rendered by your application. Using CoffeeScript you can write your own classes, bind selectors to properties and use then in your code script. Assigning the objects to casper instance will end up with quite nice syntax like @editDocument.assertAt().
  • There is some issue with CSS :first and :last selectors. I cannot get them working (but maybe I’m doing something wrong?). But in CasperJS you can also use XPath selectors which are fine for matching n-th child of some element (x("//div[@class='modal-footer']/a[1]")).
    Update: :first and :last are not CSS3 selectors, but JQuery ones. Here is a list of CSS3 selectors, all of these are supported by CasperJS. So you can use nth-child(1) is this case. Thanks Andy and Nicolas for the comments!

Working with CasperJS can lead you to a few hour stall, but after getting things working you have a new, cool tool in your box!