Ember 2: How to apply class in router model depending on subroute

I have a Ember 2 route named "games" with two sub-routes. One for "chess" and the other "checkers". I want the template associated with the main "games" route to change a class name depending on which sub-route is active.

So my games.hbs would look something like this

<div id="games-page">

  <h1 class="">Games</h1>

  <section class="game-list">
      
        Chess
      
      
        Checkers
      
  </section>

  
</div>

I tried doing this by setting up a model in my route, but I'm having trouble figuring out how to the find the current sub-route and update accordingly. Here was my failed approach in my games.js route.

import Ember from 'ember';

export default Ember.Route.extend({
  model() {
    return Ember.computed('currentRouteName',function(){
        if(this.get('currentRouteName') === 'games.chess'){
          return 'chess-active';
        }
        return 'checkers-active';
      })
  }

});

What is the correct ember 2 way of updating the main routes template depending on the subroute?