Collection Filter Demo

collection.js

const COLLECTION = {
  "collection": {
    "id": "SOME-COLLECTION-ID",
    "name": "WALKING-SIMULATOR",
    "games": {
      "DEATH-STRANDING-XXX-1": {
        "id": "DEATH-STRANDING-XXX-1",
        "image": "https://i.ytimg.com/vi/i2nuHEGhwiw/sddefault.jpg"
        "genres": [
          { "id": "GENRE-ID-1" },
          { "id": "GENRE-ID-2" }
        ]
      },
      "LAST-OF-US-YYY-2": {
        "id": "LAST-OF-US-YYY-2",
        "image": "https://i.ytimg.com/vi/W2Wnvvj33Wo/sddefault.jpg#404_is_fine",
        "genres": [
          { "id": "GENRE-ID-2" },
          { "id": "GENRE-ID-3" }
        ]
      },
  		"DEVIL-MAY-CRY-XXX-5": { 
      	"id": "DEVIL-MAY-CRY-XXX-5",
        "image": "https://s3-eu-west-1.amazonaws.com/static.anygator.com/static-anygator2/thumbs/uk/5c/5ca5dad8e17c2fa2420769be422e2e344c61d2dd/big.jpg",
        "genres": [
          { "id": "GENRE-ID-2" },
          { "id": "GENRE-ID-3" }
        ]
      },
  		"GHOST-OF-TSUSHIMA-XXX-1": { 
        "id": "GHOST-OF-TSUSHIMA-XXX-1",
        "image": "https://s3-eu-west-1.amazonaws.com/static.anygator.com/static-anygator2/thumbs/uk/4d/4d052c0604757cec0b13b65037ab853ffded9d19/big.jpg",
        "genres": [
          { "id": "GENRE-ID-5" }
        ]
      },
  		"CONTROL-XXX-1": { 
        "id": "CONTROL-XXX-1",
        "image": "https://ae01.alicdn.com/kf/HTB11K8gRXXXXXXSXpXXq6xXFXXXy/Air-Conditioner-Remote-Control-For-Panasonic-National-A75C598-A75C380-A75C376-A75C452-A75C606-A75C454.jpg_640x640.jpg",
        "genres": [
          { "id": "GENRE-ID-5" }
        ]
      },
      "RESIDENT-EVIL-ZZZ-2": { 
        "id": "RESIDENT-EVIL-ZZZ-2",
        "image": "https://www.gamepur.com/files/images/2014/resident-evil-2.jpeg",
        "genres": [
          { "id": "GENRE-ID-4" }
        ]
      },
      "KINGDOM-HEARTS-ZZZ-3": { 
        "id": "KINGDOM-HEARTS-ZZZ-3",
        "image": "http://images.en.koreaportal.com/data/images/full/27513/kingdom-hearts-hd-1-5-2-5-remix-released-new-fight-the-darkness-trailer-one-week-before-the-release-date.jpg?w=750",
        "genres": [
          { "id": "GENRE-ID-1" },
          { "id": "GENRE-ID-2" },
          { "id": "GENRE-ID-3" }
        ]
      },
      "NIOH-ZZZ-2": { 
        "id": "NIOH-ZZZ-2",
        "image": "https://i.ytimg.com/vi/-vVpjbjqD-s/sddefault.jpg#404_is_fine",
        "genres": [
          { "id": "GENRE-ID-5" }
        ]
      },
      "SPIDER-MAN-WWW-1": { 
        "id": "SPIDER-MAN-WWW-1",
        "image": "http://cdn2us.denofgeek.com/sites/denofgeekus/files/images/35613.jpg",
        "genres": [
          { "id": "GENRE-ID-3" }
        ]
      }
    },
    "genres": {
      "GENRE-ID-1": {
        "id": "GENRE-ID-1",
        "name": "Walk in forest"
      },
      "GENRE-ID-2": {
        "id": "GENRE-ID-2",
        "name": "Walk on beach"
      },
      "GENRE-ID-3": {
        "id": "GENRE-ID-3",
        "name": "Walk in city"
      },
      "GENRE-ID-4": {
        "id": "GENRE-ID-4",
        "name": "Walk in hell"
      },
      "GENRE-ID-5": {
        "id": "GENRE-ID-5",
        "name": "Walk in japan"
      }
    }
  }
}

controllers.application.js

import Ember from 'ember';

export default Ember.Controller.extend({
  appName: 'Ember Twiddle'
});

services.state.js

import Ember from 'ember';

export default Ember.Service.extend({
});

templates.application.hbs

<h1>Welcome to Game Filters</h1>
<br>
<br>
{{outlet}}
<br>
<br>

twiddle.json

{
  "version": "0.14.1",
  "EmberENV": {
    "FEATURES": {}
  },
  "options": {
    "use_pods": true,
    "enable-testing": false
  },
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js",
    "ember": "2.18.2",
    "ember-template-compiler": "2.18.2",
    "ember-testing": "2.18.2"
  },
  "addons": {
    "ember-data": "2.18.2"
  }
}