Move skills to their own page, with a new interface and XP bars

1 files changed, 19 insertions, 171 deletions

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 %>