Utomik Game browser - JSONETTE app

README.md

This is a very basic Utomik game browser for your smartphone! It's built using Jasonette. I spent about 30 minutes on it from the moment I heard about Jasonette.

How to use

1. Install Jason, the jsonette viewer on your iOS/Android phone. NOTE: For Android, you might want to install this more up to date version of the viewer instead.
2. Open Jason
3. In Jason, where it says 'enter a valid jason url', enter the raw URL to the .json file in this gist, then hit 'Go'.
4. Tap on 'Utomik game browser' and SEE GAMES. Wow. Such amaze.

utomik_game_browser.json

{
  "$jason": {
    "head": {
      "title": "Utomik game browser",
      "actions": {
        "$load": {
          "type": "$network.request",
          "options": {
            "url": "https://api.utomik.com/v1/applications"
          },
          "success": {
            "type": "$render"
          }
        }
      },
      "templates": {
        "body": {
          "style": {
            "border": "none"
          },
          "sections": [
            {
              "header": {
                "type": "label",
                "text": "Utomik games! Tap on a game to view details about it.",
                "style": {
                  "background": "#f5f5f5",
                  "padding": "20"
                }
              },
              "items": {
                "{{#each $jason.sort(function(a,b){if(a.name.en.toLowerCase() < b.name.en.toLowerCase()){return -1}if(a.name.en.toLowerCase() > b.name.en.toLowerCase()){return 1}return 0})}}": {
                  "type": "horizontal",
                  "style": {
                    "padding": "10",
                    "spacing": "10"
                  },
                  "components": [
                    {
                      "type": "image",
                      "style": {
                        "width": "50"
                      },
                      "url": "{{var img = images.find(function(x){return x.tag === 'BI';}); return (img !== undefined ? img.download_url : undefined)}}"
                    },
                    {
                      "type": "label",
                      "style": {
                        "size": "14"
                      },
                      "text": "{{name.en}}"
                    }
                  ],
                  "action": {
                    "type": "$util.alert",
                    "options": {
                      "title": "{{name.en}}",
                      "description": "{{excerpt.en}}"
                    }
                  }
                }
              }
            }
          ]
        }
      }
    }
  }
}