diff options
Diffstat (limited to 'app/views/characters')
| -rw-r--r-- | app/views/characters/show.html.erb | 25 | ||||
| -rw-r--r-- | app/views/characters/skills/index.html.erb | 24 |
2 files changed, 24 insertions, 25 deletions
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 new file mode 100644 index 0000000..fd53870 --- /dev/null +++ b/app/views/characters/skills/index.html.erb @@ -0,0 +1,24 @@ +<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="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> + <% end %> +</div> |