diff options
| -rw-r--r-- | CHANGELOG.md | 3 | ||||
| -rw-r--r-- | app/models/character_skill.rb | 16 | ||||
| -rw-r--r-- | app/views/application/_navbar.html.erb | 3 | ||||
| -rw-r--r-- | app/views/characters/show.html.erb | 25 | ||||
| -rw-r--r-- | app/views/characters/skills/index.html.erb | 190 | ||||
| -rw-r--r-- | config/routes.rb | 1 |
6 files changed, 37 insertions, 201 deletions
diff --git a/CHANGELOG.md b/CHANGELOG.md index c49e520..0e8872f 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -20,6 +20,9 @@ All notable changes to this project will be documented in this file. ### Hearth - New amenity: binding array (level 1, level 2) +### UI +- Character skills were moved to their own view, which features a new interface with XP bars. + ## [0.1.10.2] - 2021-06-10 ### Activities diff --git a/app/models/character_skill.rb b/app/models/character_skill.rb index 368cc28..406cade 100644 --- a/app/models/character_skill.rb +++ b/app/models/character_skill.rb @@ -39,6 +39,10 @@ class CharacterSkill < ApplicationRecord end end + def self.xp_required_for_level(level) + level <= 120 ? XP_TOTALS_PER_LEVEL[level - 1] : nil + end + def level XP_TOTALS_PER_LEVEL.each_with_index do |total, index| return index if total > self.xp @@ -46,7 +50,7 @@ class CharacterSkill < ApplicationRecord end def total_xp_for_next_level - xp_required_for_level(level + 1) + CharacterSkill.xp_required_for_level(level + 1) end def xp_to_next_level @@ -57,11 +61,13 @@ class CharacterSkill < ApplicationRecord CharacterSkill.top_xp_for(self.skill, limit: nil).map(&:character).map(&:id).index(self.character.id) + 1 end - private - def xp_required_for_level(level) - level <= 120 ? XP_TOTALS_PER_LEVEL[level - 1] : nil - end + def percentage_of_skill_level_completed + xp_gained_this_level = xp - CharacterSkill.xp_required_for_level(level) + total_xp_gain_neeeded_for_entire_level = total_xp_for_next_level - CharacterSkill.xp_required_for_level(level) + (xp_gained_this_level.to_f / total_xp_gain_neeeded_for_entire_level) * 100 + end + private def send_chat_message_if_leveled_up if CharacterSkill.level_for_xp(self.xp_was) < CharacterSkill.level_for_xp(self.xp) chat_message = ChatMessage.new(body: "reached #{self.skill.name} level #{self.level}!", diff --git a/app/views/application/_navbar.html.erb b/app/views/application/_navbar.html.erb index be2d9f2..3436619 100644 --- a/app/views/application/_navbar.html.erb +++ b/app/views/application/_navbar.html.erb @@ -7,6 +7,9 @@ <%= link_to "Character", character_path(current_char) %> </li> <li class="mr-6 inline"> + <%= link_to "Skills", character_skills_path(current_char) %> + </li> + <li class="mr-6 inline"> <%= link_to "Inventory", character_items_path(current_char) %> </li> <li class="mr-6 inline"> diff --git a/app/views/characters/show.html.erb b/app/views/characters/show.html.erb index a7b7c0e..02f2f55 100644 --- a/app/views/characters/show.html.erb +++ b/app/views/characters/show.html.erb @@ -149,31 +149,6 @@ </div> </div> -<div class="my-6"> - <h2 class="text-xl mb-4">Skills</h2> - - <table class="table-auto mb-8"> - <thead> - <tr> - <th class="table-header-padded">Skill</th> - <th class="table-header-padded">Level</th> - <th class="table-header-padded">XPTNL</th> - <th class="table-header-padded">Total XP</th> - </tr> - </thead> - <tbody> - <% @character.character_skills.ordered_by_skill_name.each do |cs| %> - <tr> - <td class="table-cell-padded"><%= cs.skill.name %></td> - <td class="table-cell-padded"><%= cs.level %></td> - <td class="table-cell-padded"><%= cs.xp_to_next_level %></td> - <td class="table-cell-padded"><%= cs.xp %></td> - </tr> - <% end %> - </tbody> - </table> -</div> - <% if @character == current_char %> <%= link_to "Manage account", edit_user_registration_path, class: "text-sm" %> <% end %> diff --git a/app/views/characters/skills/index.html.erb b/app/views/characters/skills/index.html.erb index f13e611..fd53870 100644 --- a/app/views/characters/skills/index.html.erb +++ b/app/views/characters/skills/index.html.erb @@ -1,176 +1,24 @@ -<h2 class="text-xl">Skills</h2> -<div class="text-lg text-display mb-4"> - <ul class="flex flex-row"> - <li class="mr-2"><%= link_to "Rankings", character_rankings_path(@character) %></li> - <li class="mr-2"><%= link_to "Titles", character_titles_path(@character) %></li> - </ul> -</div> - -<p class="mb-4">First entered the planes - <%= pluralize((Date.current - @character.created_at.to_date).to_i, "day") %> ago.</p> - -<p class="mb-4">Learned <%= @character.learned_activities.count %> recipe(s) or technique(s).</p> - -<div class="grid grid-cols-1 xl:grid-cols-2 my-2"> - <div class="my-2"> - <h2 class="text-xl mb-2">Boons & Banes</h2> - <% if @character.active_states.any? %> - <ul> - <% @character.active_states.each do |state| %> - <ul><%= state.condition.name %> (expires in <%= distance_of_time_in_words_to_now(state.expires_at)%>)</ul> - <% end %> - </ul> - <% else %> - <p>No boons or banes affect you.</p> - <% end %> - </div> - <div class="my-2"> - <% if @character == current_char %> - <h2 class="text-xl mb-2">Combat Styles</h2> - <%= form_with url: character_combat_styles_path(character_id: @character) do |f| %> - <%= f.label :offensive_style, "Offensive" %> - <%= f.select :offensive_style, Character.offensive_styles.keys.to_a, selected: @character.offensive_style %> - - <%= f.label :defensive_style, "Defensive" %> - <%= f.select :defensive_style, Character.defensive_styles.keys.to_a, selected: @character.defensive_style %> - - <%= f.submit "Set" %> - <% end %> - <% end %> - </div> -</div> - - -<div class="my-6"> - <div class="grid grid-cols-1 xl:grid-cols-2"> - <div class="my-2"> - <h2 class="text-xl mb-2">Combat Statistics</h2> - <table class="table-auto"> - <tbody> - <tr> - <th class="table-cell-padded text-right">Wounds</th> - <td class="table-cell-padded"><%= @character.wounds %> / <%= @character.max_wounds %></td> - </tr> - <tr> - <th class="table-cell-padded text-right">Max HP</th> - <td class="table-cell-padded"><%= @character.max_hp %></td> - </tr> - <tr> - <th class="table-cell-padded text-right">Speed</th> - <td class="table-cell-padded"><%= @character.speed %></td> - </tr> - <tr> - <th class="table-cell-padded text-right">Accuracy</th> - <td class="table-cell-padded"><%= @character.accuracy(with_combat_style: true) %></td> - </tr> - <tr> - <th class="table-cell-padded text-right">Power</th> - <td class="table-cell-padded"><%= @character.power(with_combat_style: true) %></td> - </tr> - <tr> - <th class="table-cell-padded text-right">Evasion</th> - <td class="table-cell-padded"><%= @character.evasion(with_combat_style: true) %></td> - </tr> - </tbody> - </table> - </div> - <div> - <h2 class="text-xl mb-2">Resistances</h2> - <div class="my-2 grid grid-cols-2"> - <div class="my-2"> - <table class="table-auto"> - <tbody> - <tr> - <th class="table-cell-padded text-right">Slash</th> - <td class="table-cell-padded"><%= @character.resistance("slash")%></td> - </tr> - <tr> - <th class="table-cell-padded text-right">Pierce</th> - <td class="table-cell-padded"><%= @character.resistance("pierce") %></td> - </tr> - <tr> - <th class="table-cell-padded text-right">Bash</th> - <td class="table-cell-padded"><%= @character.resistance("bash") %></td> - </tr> - <tr class="text-blue-400"> - <th class="table-cell-padded text-right">Arcane</th> - <td class="table-cell-padded"><%= @character.resistance("arcane") %></td> - </tr> - <tr class="text-blue-400"> - <th class="table-cell-padded text-right">Fire</th> - <td class="table-cell-padded"><%= @character.resistance("fire") %></td> - </tr> - <tr class="text-blue-400"> - <th class="table-cell-padded text-right">Frost</th> - <td class="table-cell-padded"><%= @character.resistance("frost") %></td> - </tr> - <tr class="text-blue-400"> - <th class="table-cell-padded text-right">Lightning</th> - <td class="table-cell-padded"><%= @character.resistance("lightning") %></td> - </tr> - </tbody> - </table> +<h2 class="text-3xl mb-2">Skills</h2> +<div class="grid gap-4 grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4"> + <% @character.character_skills.ordered_by_skill_name.each do |cs| %> + <div class="rounded border border-gray-700"> + <div class="flex p-1"> + <div class="flex-grow"> + <div class="text-xl text-display mb-1"> + <%= cs.skill.name %> + </div> + <div class="flex items-center text-xs"> + <span class="bg-gray-700 px-1 py-0.5 rounded mr-1">XP</span><%= cs.xp %> + </div> </div> - <div class="my-2"> - <table class="table-auto"> - <tbody> - <tr class="text-blue-400"> - <th class="table-cell-padded text-right">Acid</th> - <td class="table-cell-padded"><%= @character.resistance("acid") %></td> - </tr> - <tr class="text-blue-400"> - <th class="table-cell-padded text-right">Thunder</th> - <td class="table-cell-padded"><%= @character.resistance("thunder")%></td> - </tr> - <tr class="text-blue-400"> - <th class="table-cell-padded text-right">Radiant</th> - <td class="table-cell-padded"><%= @character.resistance("radiant") %></td> - </tr> - <tr class="text-blue-400"> - <th class="table-cell-padded text-right">Necrotic</th> - <td class="table-cell-padded"><%= @character.resistance("necrotic") %></td> - </tr> - <tr class="text-purple-400"> - <th class="table-cell-padded text-right">Poison</th> - <td class="table-cell-padded"><%= @character.resistance("poison") %></td> - </tr> - <tr class="text-red-400"> - <th class="table-cell-padded text-right">Bleed</th> - <td class="table-cell-padded"><%= @character.resistance("bleed") %></td> - </tr> - </tbody> - </table> + <div class="text-xl m-2 text-display"> + <%= cs.level %> + </div> + </div> + <div class="border border-gray-800 h-2 my-1"> + <div class="bg-gray-600 h-full" style="width: <%= cs.percentage_of_skill_level_completed %>%"> </div> </div> </div> - </div> -</div> - -<div class="my-6"> - <h2 class="text-xl mb-4">Skills</h2> - - <table class="table-auto mb-8"> - <thead> - <tr> - <th class="table-header-padded">Skill</th> - <th class="table-header-padded">Level</th> - <th class="table-header-padded">XPTNL</th> - <th class="table-header-padded">Total XP</th> - </tr> - </thead> - <tbody> - <% @character.character_skills.ordered_by_skill_name.each do |cs| %> - <tr> - <td class="table-cell-padded"><%= cs.skill.name %></td> - <td class="table-cell-padded"><%= cs.level %></td> - <td class="table-cell-padded"><%= cs.xp_to_next_level %></td> - <td class="table-cell-padded"><%= cs.xp %></td> - </tr> - <% end %> - </tbody> - </table> + <% end %> </div> - -<% if @character == current_char %> - <%= link_to "Manage account", edit_user_registration_path, class: "text-sm" %> -<% end %> diff --git a/config/routes.rb b/config/routes.rb index fa6d748..22b8299 100644 --- a/config/routes.rb +++ b/config/routes.rb @@ -32,6 +32,7 @@ Rails.application.routes.draw do post "/equip", to: "items#equip" post "/use", to: "items#use" end + resources :skills, only: [:index] resources :titles, only: [:index] do post "/activate", to: "titles#activate" end |