Exploring Monster Taming Mechanics In Final Fantasy XIII-2: Viewing More Monster Data And Abilities

We've been building up views and controllers in the Rails MVC architecture for the various tables of monster data we have in this Final Fantasy XIII-2 monster taming mechanics series. We're now almost ready to finish off these table views with the ability tables, but before we do that, we need a place for the links to those ability tables to exist. The number of abilities for each monster is too much to put in the main monster table page, so we'll need to first build a details page for each monster before we can link up the monster abilities with the ability tables. Let's get started on that details page.

Create a Monster Details Page

Creating a monster details page should be about as straightforward as creating the table pages. We simply need to use a different action in the monster controller to show a page for a single monster instead of the index action that shows a table of all monsters. We can't use a Rails generator for this task because we already used one to create the monster index action, and we can't add to that same controller and view with a generator. We can only create new controllers and views with a generator; hence, the name. That's okay, though, because all we have to do is add to a few files to make this page happen. First, we need to add a route in config/routes.rb. Instead of adding another get route, we can use the resource method to combine the index and show routes for the monster pages:

Rails.application.routes.draw do
  resources :monster, only: [:index, :show]
  get 'location/index'
  get 'characteristic/index'
  get 'material/index'
  get 'home/index'
  root 'home#index'
end

Using the resource method will create the routes a bit differently, so the monster index will live at localhost:3000/monster instead of localhost:3000/monster/index, and the individual monster pages will live at localhost:3000/monster/:id, where :id is the database index of the monster we're looking at. All of the links we've created will conveniently change to the new form automatically because we used the monster_index_path helper method to set the destination of the links to the monster index page.

Now that we have a new route for individual monster pages, we can create a new action in app/controllers/monster_controller.rb:

  def show
    @monster = Monster.find(params[:id])
  end

Preparing the data for the view is as simple as looking up the :id in the model that was provided in the URL. We'll see how we set this :id in the URL in a bit, but first, let's build the monster detail page in app/views/monster/show.html.erb using a two-column table layout:

<h1><%= @monster.name %></h1>

<table id="monster-table" class="table table-striped table-sm">
  <tr>
    <td><strong>Role</strong></td>
    <td><%= @monster.role %></td>
    <td/>
    <td/>
  </tr>
  <tr>
    <td><strong>Monster Type</strong></td>
    <td><%= @monster.monster_type %></td>
    <td><strong>Constellation</strong></td>
    <td><%= @monster.constellation %></td>
  </tr>
  <tr>
    <td><strong>Location</strong></td>
    <td>
      <%= link_to @monster.location.name, location_index_path(:highlight => @monster.location.name) %>
      <% if @monster.location2 %>
        <br /><%= link_to @monster.location2.name, location_index_path(:highlight => @monster.location2.name) %>
      <% end %>
      <% if @monster.location3 %>
        <br /><%= link_to @monster.location3.name, location_index_path(:highlight => @monster.location3.name) %>
      <% end %>
    </td>
    <td><strong>Tame Rate</strong></td>
    <td><%= @monster.tame_rate %></td>
  </tr>
  <tr>
    <td><strong>Max Level</strong></td>
    <td><%= @monster.max_level %></td>
    <td><strong>Growth</strong></td>
    <td><%= @monster.growth %></td>
  </tr>
  <tr>
    <td><strong>Max Base HP</strong></td>
    <td><%= @monster.maximum_base_hp %></td>
    <td><strong>Speed</strong></td>
    <td><%= @monster.speed %></td>
  </tr>
  <tr>
    <td><strong>Max Base Strength</strong></td>
    <td><%= @monster.maximum_base_strength %></td>
    <td><strong>Max Base Magic</strong></td>
    <td><%= @monster.maximum_base_magic %></td>
  </tr>
  <tr>
    <td><strong>Immune to</strong></td>
    <td><%= @monster.immune %></td>
    <td><strong>Weak to</strong></td>
    <td><%= @monster.weak %></td>
  </tr>
  <tr>
    <td><strong>Halved for</strong></td>
    <td><%= @monster.halved %></td>
    <td><strong>Resistant to</strong></td>
    <td><%= @monster.resistant %></td>
  </tr>
  <tr>
    <td><strong>Feral Link</strong></td>
    <td><%= @monster.feral_link %></td>
    <td><strong>Description</strong></td>
    <td><%= @monster.description %></td>
  </tr>
  <tr>
    <td><strong>Effect</strong></td>
    <td><%= @monster.effect %></td>
    <td><strong>Damage Modifier</strong></td>
    <td><%= @monster.damage_modifier %></td>
  </tr>
  <tr>
    <td><strong>Charge Time</strong></td>
    <td><%= @monster.charge_time.strftime("%H:%M") %></td>
    <td/>
    <td/>
  </tr>
  <tr>
    <td><strong>PS3 Combo</strong></td>
    <td><%= @monster.ps3_combo %></td>
    <td><strong>Xbox 360 Combo</strong></td>
    <td><%= @monster.xbox_360_combo %></td>
  </tr>
  <tr>
    <td><strong>Notes</strong></td>
    <td colspan="3"><%= @monster.special_notes %></td>
  </tr>

This is a lot of HTML, but it's not complicated, just tedious to enter. Notice that I kept the links and conditional statements for the locations so they would be clickable just like on the monster index page, and we have numerous additional monster attributes shown here. We do not yet have the list of abilities, but that list is going to be even more tedious to enter because there's almost 100 levels worth of abilities that need to be checked to conditionally include in this table. We'd much rather do that programmatically. Let's start by creating a sub-heading to set off this part of the table and create a row for the default passive abilities and skills:

  <tr class="table-dark">
    <td/>
    <td class="lead">Passive Abilities</td>
    <td/>
    <td class="lead">Skills</td>
  </tr>
  <tr>
    <td><strong>Default</strong></td>
    <td>
      <% (1..4).each do |n| %>
        <% if @monster.send "default_passive#{n}" %>
          <%= @monster.send("default_passive#{n}").name %><br />
        <% end %>
      <% end %>
    </td>
    <td/>
    <td>
      <% (1..8).each do |n| %>
        <% if @monster.send "default_skill#{n}" %>
          <%= @monster.send("default_skill#{n}").name %><br />
        <% end %>
      <% end %>
    </td>
  </tr>

Here we can see that the passive ability cell could list up to four abilities and the skill cell could list up to eight skills. Each ability is checked by creating the name of the method in the model for that ability as a string (e.g. "default_passive1"), and sending that method name as a message. If the message returns a non-nil value, then we know it exists for that monster, and we can get its name to display in the table. That takes care of the default abilities for a monster, but the same task for the rest of the abilities is a bit more involved so we'll loop through each potential level, one per row, and call a helper method, a.k.a. a partial, to do the work:

  </tr>
  <% (2..99).each do |n| %>
    <%= render "level_ability", n: n, passive: "lv_%02d_passive" % [n], skill: "lv_%02d_skill" % [n] %>
  <% end %>
</table>

The render method will look for a partial in app/views/monster/_level_ability.html.erb and pass in three parameters: n, passive, and skill with the corresponding values shown in the code. The level number needs to be a two-digit number, so I use a formatted string instead of string interpolation. Then, we can use these parameters in the partial, and it cleans up the code in the partial a bit:

  <% if @monster.has_ability?(passive) || @monster.has_ability?(skill) %>
    <tr>
      <td><strong>Level <%= "%02d" % [n] %></strong></td>
      <td>
        <% if @monster.has_ability? passive %>
          <%= @monster.send(passive).name %><br />
        <% end %>
      </td>
      <td/>
      <td>
        <% if @monster.has_ability? skill %>
          <%= @monster.send(skill).name %><br />
        <% end %>
      </td>
    </tr>
  <% end %>

Notice that in the case of each level ability, we first have to check if there are any passive abilities or skills at that level and only create a row if at least one of them exists. For any given monster, most levels will not have any abilities, and we don't want empty rows cluttering up the table. Then, we check that the ability exists again when creating the cell so that we don't get an exception for trying to call .name on nil for abilities that don't exist. So, why are we calling this has_ability? method instead of trying to send the level ability method name to the model like we did before? Well, there are a few level abilities that don't exist for any monster, so trying to send a message with that method name will cause an exception. We have to be a bit more careful, so we can add this utility method to the Monster model in app/models/monster.rb in order to do a safe check:

  def has_ability?(ability)
    has_attribute?(ability + '_id') && send(ability)
  end

The has_attribute? check will make sure that that attribute exists before sending the message to the monster model to see if it's non-nil for that monster in particular. With that, we're ready to check on what our new monster details table looks like:

Linking to Monster Details

That's a nice new monster detail page, but how do we get to it without typing in a random number for the monster in the address bar until we get what we want? It's as easy as adding a link to the monster names in the monster index table in app/views/monster/index.html.erb:

  <% @monsters.each do |monster| %>
    <tr>
      <td><%= link_to monster.name, monster_path(monster) %></td>
      <td><%= monster.role %></td>

Rails will automatically insert the correct :id into the URL based on which monster object is passed to monster_path. That's about the easiest thing we've done so far. Now we're ready to build out the ability tables.

Building the Ability Tables

Whew, more tables. We should be able to do this in our sleep right now, so I'll lay it out as quickly as I can. First, generate the controllers, views, and routes for the two models:

$ rails g controller Ability index
$ rails g controller RoleAbility index

Then, load the table data in each of the controllers in app/controllers/ability_controller.rb:

class AbilityController < ApplicationController
  def index
    @abilities = Ability.all
  end
end

And in app/controllers/role_ability_controller.rb:

class RoleAbilityController < ApplicationController
  def index
    @role_abilities = RoleAbility.all
  end
end

Also, build the table views in app/views/ability/index.html.erb:

<h1>Monster Passive Abilities</h1>

<table id="ability-table" class="table table-striped table-sm">
  <thead class="thead-dark">
    <tr>
      <th scope="col">Name</th>
      <th scope="col">Rank</th>
      <th scope="col">Description</th>
    </tr>
  </thead>

  <% @abilities.each do |ability| %>
    <tr>
      <td><%= ability.name %></td>
      <td><%= ability.rank %></td>
      <td><%= ability.description %></td>
    </tr>
  <% end %>
</table>

And in app/views/role_ability/index.html.erb:

<h1>Monster Role Abilities</h1>

<table id="role-ability-table" class="table table-striped table-sm">
  <thead class="thead-dark">
    <tr>
      <th scope="col">Name</th>
      <th scope="col">Role</th>
      <th scope="col">Infusable</th>
    </tr>
  </thead>

  <% @role_abilities.each do |ability| %>
    <tr>
      <td><%= ability.name %></td>
      <td><%= ability.role %></td>
      <td><%= ability.infusable %></td>
    </tr>
  <% end %>
</table>

We should also adjust the table width in app/assets/stylesheets/role_ability.scss:

#role-ability-table {
  width: 350px;
}

Finally, we add links in the home index in app/views/home/index.html.erb:

<h1 class="display-3 text-center">Final Fantasy XIII-2</h1>
<h1 class="display-3 text-center">Monster Taming</h1>
<div class="container">
  <div class="row">
    <div class="col-sm"></div>
    <div class="col-sm">
      <ul class="list-group">
        <%= link_to 'Monsters', monster_index_path,
          class: "list-group-item list-group-item-action" %>
        <%= link_to 'Monster Passive Abilities', ability_index_path,
          class: "list-group-item list-group-item-action" %>
        <%= link_to 'Monster Role Abilities', role_ability_index_path,
          class: "list-group-item list-group-item-action" %>
        <%= link_to 'Monster Materials', material_index_path,
          class: "list-group-item list-group-item-action" %>
        <%= link_to 'Monster Characteristics', characteristic_index_path,
          class: "list-group-item list-group-item-action" %>
        <%= link_to 'Game Locations', location_index_path,
          class: "list-group-item list-group-item-action" %>
      </ul>
    </div>
    <div class="col-sm"></div>
  </div>
</div>

And in the navigation bar in app/views/layouts/_header.html.erb:

<nav class="navbar fixed-top navbar-expand navbar-dark bg-dark">
  <%= link_to "FFXIII-2 Monster Taming", root_path, class: "navbar-brand" %>
  <ul class="navbar-nav">
    <li class="nav-item">
      <%= link_to "Home", root_path, class: "nav-link" %>
    </li>
    <li class="nav-item">
      <%= link_to "Monsters", monster_index_path, class: "nav-link" %>
    </li>
    <li class="nav-item">
      <%= link_to "Abilities", ability_index_path, class: "nav-link" %>
    </li>
    <li class="nav-item">
      <%= link_to "Role Abilities", role_ability_index_path, class: "nav-link" %>
    </li>
    <li class="nav-item">
      <%= link_to "Materials", material_index_path, class: "nav-link" %>
    </li>
    <li class="nav-item">
      <%= link_to "Characteristics", characteristic_index_path, class: "nav-link" %>
    </li>
    <li class="nav-item">
      <%= link_to "Locations", location_index_path, class: "nav-link" %>
    </li>
  </ul>
</nav>

Note that a few of the names were shortened to make space for the new links, and we have our last two tables built and ready to go:

Linking from Monsters to Abilities

The last thing we'll do before wrapping up for the day is to link up the monster abilities in the detailed monster pages to the ability tables we just created, similar to how we did it with the locations already. We'll use the same mechanism of passing the ability name as a parameter in the URL so that the corresponding row can be highlighted in the ability table. The links to the ability tables are added to the monster details view in both the default abilities in app/views/monster/show.html.erb:

  <tr>
    <td><strong>Default</strong></td>
    <td>
      <% (1..4).each do |n| %>
        <% if @monster.send "default_passive#{n}" %>
          <%= link_to @monster.send("default_passive#{n}").name,
            ability_index_path(:highlight => @monster.send("default_passive#{n}").name) %><br />
        <% end %>
      <% end %>
    </td>
    <td/>
    <td>
      <% (1..8).each do |n| %>
        <% if @monster.send "default_skill#{n}" %>
          <%= link_to @monster.send("default_skill#{n}").name,
            role_ability_index_path(:highlight => @monster.send("default_skill#{n}").name) %><br />
        <% end %>
      <% end %>
    </td>
  </tr>
  <% (2..99).each do |n| %>
    <%= render "level_ability", n: n, passive: "lv_%02d_passive" % [n], skill: "lv_%02d_skill" % [n] %>
  <% end %>
</table>

And each of the level abilities in app/views/monster/_level_ability.html.erb:

  <% if @monster.has_ability?(passive) || @monster.has_ability?(skill) %>
    <tr>
      <td><strong>Level <%= "%02d" % [n] %></strong></td>
      <td>
        <% if @monster.has_ability? passive %>
          <%= link_to @monster.send(passive).name,
            ability_index_path(:highlight => @monster.send(passive).name) %><br />
        <% end %>
      </td>
      <td/>
      <td>
        <% if @monster.has_ability? skill %>
          <%= link_to @monster.send(skill).name,
            role_ability_index_path(:highlight => @monster.send(skill).name) %><br />
        <% end %>
      </td>
    </tr>
  <% end %>

This setup creates links from each passive ability to the passive ability table (obviously) and from each skill to the role ability table. Next, we need to make those :highlight parameters available to the views from the controllers in app/controllers/ability_controller.rb:

class AbilityController < ApplicationController
  def index
    @abilities = Ability.all
    @highlighted = params[:highlight]
  end
end

And in app/controllers/role_ability_controller.rb:

class RoleAbilityController < ApplicationController
  def index
    @role_abilities = RoleAbility.all
    @highlighted = params[:highlight]
  end
end

Finally, we can do the appropriate highlighting by adding a conditional class "table-primary" to the corresponding row in the ability table views in app/views/ability/index.html.erb:

  <% @abilities.each do |ability| %>
    <tr <%= "class=table-primary" if ability.name == @highlighted %>>
      <td><%= ability.name %></td>
      <td><%= ability.rank %></td>
      <td><%= ability.description %></td>
    </tr>
  <% end %>
</table>

And in app/views/role_ability/index.html.erb:

  <% @role_abilities.each do |ability| %>
    <tr <%= "class=table-primary" if ability.name == @highlighted %>>
      <td><%= ability.name %></td>
      <td><%= ability.rank %></td>
      <td><%= ability.description %></td>
    </tr>
  <% end %>
</table>

Okay, wow. That was a lot of little steps to get all of that stuff built and hooked up, but it wasn't too difficult. Now we have a great set of tables that we can make improvements to by interconnecting them more, and we can start building in features to make answering the more complex questions about monster taming a bit easier to do.

Before we get to those advanced features, we'll want to fix a couple things with our new ability tables, though. For one, the passive ability table in particular is too big to just highlight the row for the linked ability and require the user to go scrolling through to find it. We'll make that feature more user-friendly next time. Additionally, we don't have a link back to monsters from the ability tables. Wouldn't it be nice to click on an ability and have the website show a list of monsters with that ability? It's not as simple as it was with filtering the monster table by location because the abilities are spread across hundreds of attributes, but we'll figure that out next time as well.