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

Log4j and MDC in Grails

Log4j provides very useful feature: MDC - mapped diagnostic context. It can be used to store data in context of current thread. It may sound scary a bit but idea is simple.

My post is based on post http://burtbeckwith.com/blog/?p=521 from Burt Beckwith's excellent blog, it's definitely worth checking if you are interested in Grails.

Short background story...


Suppose we want to do logging our brand new shopping system and we want to have in each log customer's shopping basket number. And our system can be used at once by many users who can perform many transactions, actions like adding items and so on. How can we achieve that? Of course we can add basket number in every place where we do some logging but this task would be boring and error-prone. 

Instead of this we can use MDC to store variable with basket number in map. 

In fact MDC can be treated as map of custom values for current thread that can be used by logger. 


How to do that with Grails?


Using MDC with Grails is quite simple. All we need to do is to create our own custom filter which works for given urls and puts our data in MDC.

Filters in Grails are classes in directory grails-app/conf/* which names end with *Filters.groovy postfix. We can create this class manually or use Grails command: 
grails create-filters info.rnowak.App.Basket

In result class named BasketFilters will be created in grails-app/conf/info/rnowak/UberApp.

Initially filter class looks a little bit empty:
class BasketFilters {
    def filters = {
        all(controller:'*', action:'*') {
            before = {

            }
            after = { Map model ->

            }
            afterView = { Exception e ->

            }
        }
    }
}
All we need to do is fill empty closures, modify filter properties and put some data into MDC.

all is the general name of our filter, as class BasketFilters (plural!) can contain many various filters. You can name it whatever you want, for this post let assume it will be named basketFilter. 

Another thing is change of filter parameters. According to official documentation (link) we can customize our filter in many ways. You can specify controller to be filtered, its actions, filtered urls and so on. In our example you can stay with default option where filter is applied to every action of every controller. If you are interested in filtering only some urls, use uri parameter with expression describing desired urls to be filtered.

Three closures that are already defined in template have their function and they are started in these conditions:

  • before - as name says, it is executed before filtered action takes place
  • after - similarly, it is called after the action
  • afterView - called after rendering of the actions view
Ok, so now we know what are these mysterious methods and when they are called. But what can be done within them? In official Grails docs (link again) under section 7.6.3 there is a list of properties that are available to use in filter.

With that knowledge, we can proceed to implementing filter.

Putting something into MDC in filter


What we want to do is quite easy: we want to retrieve basket number from parameters and put it into MDC in our filter:
class BasketFilters {
    def filters = {
        basketFilter(controller:'*', action:'*') {
            before = {
                MDC.put("basketNumber", params.basketNumber ?: "")
            }
            after = { Map model ->
                MDC.remove("basketNumber")
            }
        }
    }
}

We retrieve basket number from Grails params map and then we put in map under specified key ("basketNumber" in this case), which will be later used in logger conversion pattern. It is important to remove custom value after processing of action to avoid leaks.

So we are putting something into MDC. But how make use of it in logs?


We can refer to custom data in MDC in conversion patter using syntax: %X{key}, where key is our key we used in filter to put data, like:
def conversionPattern = "%d{yyyy-MM-dd HH:mm:ss} %-5p %t [%c{1}] %X{basketNumber} - %m%n"


And that's it :) We've put custom data in log4j MDC and successfully used it in logs to display interesting values.
DDevelopment & Design

Phonegap / Cordova and cross domain ssl request problem on android.

In one app I have participated, there was a use case:
  • User fill up a form.
  • User submit the form.
  • System send data via https to server and show a response.
During development there wasn’t any problem, but when we were going to release production version then some unsuspected situation occurred. I prepare the production version accordingly with standard flow for Android environment:
  • ant release
  • align
  • signing
During conduct tests on that version, every time I try to submit the form, a connection error appear. In that situation, at the first you should check whitelist in cordova settings. Every URL you want to connect to, must be explicit type in: 
res/xml/cordova.xml
If whitelist looks fine, the error is most likely caused by inner implementation of Android System. The Android WebView does not allow by default self-signed SSL certs. When app is debug-signed the SSL error is ignored, but if app is release-signed connection to untrusted services is blocked.



Workaround


You have to remember that secure connection to service with self-signed certificate is risky and unrecommended. But if you know what you are doing there is some workaround of the security problem. Behavior of method 
CordovaWebViewClient.onReceivedSslError
must be changed.


Thus add new class extended CordovaWebViewClient and override ‘onReceivedSslError’. I strongly suggest to implement custom onReceiveSslError as secure as possible. I know that the problem occours when app try connect to example.domain.com and in spite of self signed certificate the domain is trusted, so only for that case the SslError is ignored. 

public class MyWebViewClient extends CordovaWebViewClient {

   private static final String TAG = MyWebViewClient.class.getName();
   private static final String AVAILABLE_SLL_CN 
                               = "example.domain.com";

   public MyWebViewClient(DroidGap ctx) {
       super(ctx);
   }

   @Override
   public void onReceivedSslError(WebView view, 
                                  SslErrorHandler handler, 
                                  android.net.http.SslError error) {

       String errorSourceCName = error.getCertificate().
                                  getIssuedTo().getCName();

       if( AVAILABLE_SLL_CN.equals(errorSourceCName) ) {
           Log.i(TAG, "Detect ssl connection error: " + 
                       error.toString() + 
                       „ so the error is ignored”);

           handler.proceed();
           return;
       }

       super.onReceivedSslError(view, handler, error);
   }
}
Next step is forcing yours app to  use custom implementation of WebViewClient. 

public class Start extends DroidGap
{
   private static final String TAG = Start.class.getName();

   @Override
   public void onCreate(Bundle savedInstanceState)
   {
       super.onCreate(savedInstanceState);
       super.setIntegerProperty("splashscreen", R.drawable.splash);
       super.init();

       MyWebViewClient myWebViewClient = new MyWebViewClient(this);
       myWebViewClient.setWebView(this.appView);

       this.appView.setWebViewClient(myWebViewClient);
       
       // yours code

   }
}
That is all ypu have to do if minSdk of yours app is greater or equals 8. In older version of Android there is no class 
android.net.http.SslError
So in class MyCordovaWebViewClient class there are errors because compliator doesn’t see SslError class. Fortunately Android is(was) open source, so it is easy to find source of the class. There is no inpediments to ‘upgrade’ app and just add the file to project. I suggest to keep original packages. Thus after all operations the source tree looks like:

Class SslError placed in source tree. 
 Now the app created in release mode can connect via https to services with self-signed SSl certificates.