From 44a0c2e75ef577e6e847cbeb940ea936904c9d72 Mon Sep 17 00:00:00 2001 From: Kelly Rauchenberger Date: Fri, 13 Oct 2017 10:01:44 -0400 Subject: Redesigned Pokémon show page MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit The new design is heavily inspired by the status screen from Diamond & Pearl. It's not entirely done yet, with notable missing features including sheen and gender. However, it would also be nice to show a star for shiny Pokémon, Pokérus status, possibly a mention as to what game the Pokémon is currently in, and descriptive hover bubbles for moves. It is also notable that currently, as ribbons are located all the way to the right, their hover bubbles usually go off screen. The list of Pokémon page has not been redesigned, and the main layout is still bare. --- app/assets/images/pokeviewer/types/mystery.gif | Bin 0 -> 905 bytes app/assets/stylesheets/pokeviewer/pokemon.css.scss | 393 ++++++++++++++------- app/helpers/pokeviewer/pokemon_helper.rb | 87 ++++- app/models/pokeviewer/pokemon.rb | 22 -- app/models/pokeviewer/revision.rb | 16 + app/views/layouts/pokeviewer/application.html.haml | 7 +- app/views/pokeviewer/pokemon/show.html.haml | 213 ++++++----- config/locales/en.yml | 42 +++ 8 files changed, 534 insertions(+), 246 deletions(-) create mode 100644 app/assets/images/pokeviewer/types/mystery.gif create mode 100644 config/locales/en.yml diff --git a/app/assets/images/pokeviewer/types/mystery.gif b/app/assets/images/pokeviewer/types/mystery.gif new file mode 100644 index 0000000..566a2f2 Binary files /dev/null and b/app/assets/images/pokeviewer/types/mystery.gif differ diff --git a/app/assets/stylesheets/pokeviewer/pokemon.css.scss b/app/assets/stylesheets/pokeviewer/pokemon.css.scss index ca6ae9c..4c1fc2c 100644 --- a/app/assets/stylesheets/pokeviewer/pokemon.css.scss +++ b/app/assets/stylesheets/pokeviewer/pokemon.css.scss @@ -3,34 +3,20 @@ They will automatically be included in application.css. */ -body { - -} - -#left-sidebar, #right-sidebar { - flex: 3 0px; -} - -#container { - display: flex; - -} - #banner { box-sizing: border-box; - height: 10em; + height: 2em; margin: 0 auto; width: 60%; } #content { - flex: 10 0px; + margin: 2em; } .trainer { margin: 1em; font-family: 'Power Green'; -/* width: 758px;*/ box-sizing: border-box; background-color: #f7f7f7; border: 1px solid #999; @@ -162,6 +148,7 @@ body { border-radius: 4px; position: absolute; max-width: 45ch; + text-align: left; .pc-data-name { font-weight: bold; @@ -182,10 +169,10 @@ body { .pokemon { font-family: 'Power Green'; display: flex; - margin: 1em; - border: 1px solid #777; - border-radius: 5px; - background-color: #fafafa; + margin: 1em 0; + background-color: #c0c8c4; + border: 1px solid #888; + overflow: hidden; .male { color: blue; @@ -200,164 +187,256 @@ body { white-space: pre; } - .pd-details { - color: white; - padding: .25em .5em; - } - - .pd-contents { - p { - margin: .25em; + &.in-emerald { + .pokemon-image { + img { + margin: -14px; + } } } .pokemon-basics { - margin: .5em; - min-width: 5em; - } + width: 8.5em; + + .pokemon-nameline { + background-color: #dcb880; + padding: 6px 6px 0 6px; + border-top: 1px solid #d8a878; + border-left: 1px solid #d8a878; + border-right: 1px solid #d8a878; + border-top-left-radius: 6px; + border-top-right-radius: 6px; + margin: .25em .25em 0; + } - .pokemon-column { - border-left: 1px solid #aaa; + .pokemon-ball { + margin: -8px; + } - &>div + div { - border-top: 1px solid #aaa; + .pokemon-name { + margin-left: 3px; } - } - .pokemon-row { - display: flex; - flex: 1 0px; + .pokemon-gender { + float: right; + } - &>div + div { - border-left: 1px solid #aaa; + .pokemon-level { + padding: 4px 8px 0px; + border-bottom-left-radius: 6px; + border-bottom-right-radius: 6px; + background-color: white; + margin: 0 .25em; } - } - .pokemon-memo { - background-color: #e7e8ff; - flex-grow: 1; + .pokemon-image { + text-align: center; - .pd-details { - background-color: #be3ff8; /*#d078f8;*/ + .pokemon-image-wrap { + margin: 1em auto; + border: 10px solid #e0e0c8; + background-color: white; + border-radius: 10px; + display: inline-block; + padding: 4px; + } } - } - .pokemon-moves { - flex-grow: 1; + .pokemon-item-label { + background-color: #dcb880; + color: white; + border-top: 1px solid #d8a878; + padding: .25em .25em 0 0.5em; + + &.with-item { + padding-left: 30px; + } - .pd-details { - background-color: #3fb5f8; + &:not(.with-item) { + margin-top: .25em; + } } - ul { - display: flex; - flex-direction: column; - justify-content: space-between; - margin: 0; - padding: 0; + .pokemon-item { + background-color: white; + padding: .25em .25em .25em .5em; - li { - display: block; - padding: 0.25em; - box-sizing: border-box; + img { + vertical-align: bottom; + margin: -4px -4px -4px -8px; } } } - .pokemon-stats { - background-color: #d7f4f6; + table { + border-spacing: 0; + width: 100%; + + th { + text-align: left; + color: white; + font-weight: normal; + white-space: nowrap; + } + + .table-bubble { + background-color: #e4f0f0; + text-align: center; + padding: 4px 1em 0 1em; + height: 100%; + + &.tb-top { + border-top-left-radius: 8px; + border-top-right-radius: 8px; + } - .pd-details { - background-color: #2068e0; - border-bottom: 1px solid #A9C6C8; + &.tb-bottom { + border-bottom-left-radius: 8px; + border-bottom-right-radius: 8px; + } } - .nature-benefit { - color: green; + .tb-only { + text-align: center; + background-color: #e4f0f0; + border-radius: 6px; + padding: 3px 3px 0 3px; + height: 100%; } - .nature-hinder { - color: red; + tr:nth-child(odd) { + .table-bubble { + background-color: #e4e8d0; + } } + } + + .pokemon-tab { + border-left: 1px solid #585450; + flex: 1 0px; + } + + .pokemon-details { + background-color: #94c49c; table { - border-collapse: collapse; - border-style: hidden; - table-layout: fixed; + padding-top: .75em; - th, td { - text-align: center; - border: 1px solid #A9C6C8; - padding: 0.25em 0.25em; - width: 16.67%; + th { + padding: .25em 1em 0 .5em; } - th { - background-color: #bfdfff; + td { + padding: 0 .5em 0 0; + } + + tr:nth-child(odd) { + background-color: #84ac88; } } } - .pokemon-condition { - background-color: #b9d7f2; - border-left: 1px solid #aaa; - flex: 1 0px; + .pokemon-stats { + background-color: #6870d8; - .pkcv-cool-circle { - fill: #f59a55; - } + table { + padding-top: .5em; - .pkcv-beauty-circle { - fill: #8095ff; - } + tr:nth-child(even) { + background-color: #8890f8; + } - .pkcv-cute-circle { - fill: #f5a8d3; - } + th { + padding: .25em .5em 0 1.5em; + } - .pkcv-smart-circle { - fill: #79e15c; - } + td { + padding: 0 1em 0 0; + } - .pkcv-tough-circle { - fill: #f7f100; - } + .pokemon-nature-label th { + padding-top: .75em; + } - .pkcv-outline { - stroke: gray; - stroke-width: 5; - stroke-linejoin: round; - fill: white; - fill-opacity: 0.3; - } + .nature-benefit { + color: #99ff00; + } - .pkcv-line { - stroke: gray; - stroke-width: 2; + .nature-hinder { + color: red; + } } + } - .pkcv-data { - fill: #4ee100; - fill-opacity: 0.9; - } + .pokemon-moves { + background-color: #ff847c; - .pkcv-label, .pkcv-label-outline { - font-family: "Power Green"; - font-size: 50px; - text-anchor: middle; - } + table { + padding-top: .75em; + + tr:nth-child(even) { + background-color: #f7aca6; + + .tb-only { + color: black; + } + } + + tr:nth-child(odd) { + td { + padding-top: .25em; + color: white; + } + } + + th { + padding: .25em 0.25em 0 .25em; + text-align: right; + } + + td { + padding-right: .5em; + } + + .pp-label { + display: block; + position: absolute; + padding-left: .125em; + } - .pkcv-label-outline { - stroke: #f0f8f8; - stroke-width: 6; - stroke-linejoin: butt; + .pp-value { + display: block; + margin-left: 2em; + text-align: right; + } } } + .pokemon-met-label { + background-color: #84ac88; + padding: .75em 0 0 .5em; + overflow: hidden; + color: white; + } + + .pokemon-description { + background: linear-gradient( + to bottom, + #e4f0f0, + #e4f0f0 50%, + #e4e8d0 50%, + #e4e8d0 + ); + + background-size: 100% 3em; + padding: 0 .5em; + height: 100%; + line-height: 1.5em; + border-top: 1px solid #888; + } + .pokemon-ribbons { - .pd-details { - background-color: #ffc8c8; - } + background-color: #f8d8f8; ul { display: flex; @@ -370,4 +449,66 @@ body { } } } + + .pokemon-contest { + background-color: #b9d7f2; + + .pokemon-condition { + display: block; + + .pkcv-cool-circle { + fill: #f59a55; + } + + .pkcv-beauty-circle { + fill: #8095ff; + } + + .pkcv-cute-circle { + fill: #f5a8d3; + } + + .pkcv-smart-circle { + fill: #79e15c; + } + + .pkcv-tough-circle { + fill: #f7f100; + } + + .pkcv-outline { + stroke: gray; + stroke-width: 5; + stroke-linejoin: round; + fill: white; + fill-opacity: 0.3; + } + + .pkcv-line { + stroke: gray; + stroke-width: 2; + } + + .pkcv-data { + fill: #4ee100; + fill-opacity: 0.9; + } + + .pkcv-label, .pkcv-label-outline { + font-family: "Power Green"; + font-size: 50px; + text-anchor: middle; + } + + .pkcv-label-outline { + stroke: #f0f8f8; + stroke-width: 6; + stroke-linejoin: butt; + } + } + } +} + +.clear { + clear: both; } diff --git a/app/helpers/pokeviewer/pokemon_helper.rb b/app/helpers/pokeviewer/pokemon_helper.rb index f29fc35..9524914 100644 --- a/app/helpers/pokeviewer/pokemon_helper.rb +++ b/app/helpers/pokeviewer/pokemon_helper.rb @@ -83,9 +83,94 @@ module Pokeviewer tag.svg(svg.to_s.html_safe, viewBox: "-80 -30 570 430", - width: 300, + width: "100%", class: "pokemon-condition") end + def image_for_type(type) + image_tag "pokeviewer/types/#{type}.gif" + end + + def move_details(revision, index) + move = revision.send "move_#{index}".intern + + if move + move_name = move.name + move_type = image_for_type move.move_type + move_pp = revision.send "move_#{index}_pp".intern + move_pp = "#{move_pp}/#{move_pp}" + else + move_name = "-" + move_type = "" + move_pp = "--/--" + end + + tag.tr( + tag.th(move_type) + + tag.td(move_name)) + + tag.tr( + tag.th("") + + tag.td( + tag.div( + tag.span( + "PP", + class: 'pp-label') + + tag.span( + move_pp, + class: 'pp-value') + + tag.div( + "", + class: 'clear'), + class: 'tb-only'))) + end + + def display_met(pokemon) + met_type = pokemon.met_type + + if met_type == :normal or met_type == :hatched + result = "".html_safe + + if met_type == :normal + if pokemon.outsider? + result << "Apparently met" + else + result << "Met" + end + else + if pokemon.outsider? + result << "Apparently hatched" + else + result << "Hatched" + end + end + + result << " in " + + pokemon.location.name.split(" ").each_with_index do |w, i| + result << " ".html_safe if i > 0 + result << w + end + + result << " at Lv. ".html_safe + + if met_type == :hatched + result << "5" + else + result << pokemon.met_level.to_s + end + + result << "." + + result + elsif met_type == :npc_trade + "Met in a trade." + elsif met_type == :fateful_encounter + "Obtained in a fateful encounter at Lv. ".html_safe + + pokemon.met_level.to_s + elsif met_type == :orre + "Met in a trade." + end + end + end end diff --git a/app/models/pokeviewer/pokemon.rb b/app/models/pokeviewer/pokemon.rb index 1b690f5..ab516fb 100644 --- a/app/models/pokeviewer/pokemon.rb +++ b/app/models/pokeviewer/pokemon.rb @@ -142,28 +142,6 @@ module Pokeviewer ot_number.to_s.rjust(5, '0') end - def display_met - if met_type == :normal - if outsider? - "Apparently met in #{location.name} at Lv. #{met_level}." - else - "Met in #{location.name} at Lv. #{met_level}." - end - elsif met_type == :hatched - if outsider? - "Apparently hatched in #{location.name} at Lv. 5." - else - "Hatched in #{location.name} at Lv. 5." - end - elsif met_type == :npc_trade - "Met in a trade." - elsif met_type == :fateful_encounter - "Obtained in a fateful encounter at Lv. #{met_level}." - elsif met_type == :orre - "Met in a trade." - end - end - def nature_benefits?(stat) if stat == :attack [:lonely, :brave, :adamant, :naughty].include? nature.intern diff --git a/app/models/pokeviewer/revision.rb b/app/models/pokeviewer/revision.rb index b77bb1f..2626ae3 100644 --- a/app/models/pokeviewer/revision.rb +++ b/app/models/pokeviewer/revision.rb @@ -140,6 +140,22 @@ module Pokeviewer less_than_or_equal_to: 4, only_integer: true} + def move_1_pp + move_1.pp * (5 + move_1_pp_bonuses) / 5 + end + + def move_2_pp + move_2.pp * (5 + move_2_pp_bonuses) / 5 + end + + def move_3_pp + move_3.pp * (5 + move_3_pp_bonuses) / 5 + end + + def move_4_pp + move_4.pp * (5 + move_4_pp_bonuses) / 5 + end + def ribbons result = [] diff --git a/app/views/layouts/pokeviewer/application.html.haml b/app/views/layouts/pokeviewer/application.html.haml index 6bce8b9..31b19ea 100644 --- a/app/views/layouts/pokeviewer/application.html.haml +++ b/app/views/layouts/pokeviewer/application.html.haml @@ -7,9 +7,4 @@ = csrf_meta_tags %body %header#banner Pokéviewer - #container - #left-sidebar - Sidebar stuff - #content= yield - #right-sidebar - Sidebar stuff + #content= yield diff --git a/app/views/pokeviewer/pokemon/show.html.haml b/app/views/pokeviewer/pokemon/show.html.haml index e3bee11..6c478ef 100644 --- a/app/views/pokeviewer/pokemon/show.html.haml +++ b/app/views/pokeviewer/pokemon/show.html.haml @@ -1,86 +1,128 @@ .pokemon{ class: (not @pokemon.trainer.nil?) && "in-#{@pokemon.trainer.game}" } .pokemon-basics - .pokemon-species-id= "No. #{@pokemon.species_id}" - .pokemon-species-name= @pokemon.species.name - .pokemon-image= image_tag @pokemon.sprite_path - .pokemon-name= @pokemon.revisions.last.nickname - .pokemon-ot - OT/ - %span{ class: @pokemon.ot_gender }>= @pokemon.ot_name - .pokemon-id= "ID/#{@pokemon.display_ot_number}" + .pokemon-nameline + = image_tag(@pokemon.pokeball_icon_path, class: "pokemon-ball") + %span.pokemon-name= @pokemon.revisions.last.nickname + %span.pokemon-gender N .pokemon-level= "Lv. #{@pokemon.revisions.last.level}" - .pokemon-column - .pokemon-stats - .pd-details Stats - %table.pd-contents - %tr - %th HP - %th - Attack - - if @pokemon.nature_benefits?(:attack) - %span.nature-benefit + - - if @pokemon.nature_hinders?(:attack) - %span.nature-hinder - - %th - Defense - - if @pokemon.nature_benefits?(:defense) - %span.nature-benefit + - - if @pokemon.nature_hinders?(:defense) - %span.nature-hinder - - %th - Sp. Atk - - if @pokemon.nature_benefits?(:special_attack) - %span.nature-benefit + - - if @pokemon.nature_hinders?(:special_attack) - %span.nature-hinder - - %th - Sp. Def - - if @pokemon.nature_benefits?(:special_defense) - %span.nature-benefit + - - if @pokemon.nature_hinders?(:special_defense) - %span.nature-hinder - - %th - Speed - - if @pokemon.nature_benefits?(:speed) - %span.nature-benefit + - - if @pokemon.nature_hinders?(:speed) - %span.nature-hinder - - %tr - %td= @pokemon.revisions.last.hp - %td= @pokemon.revisions.last.attack - %td= @pokemon.revisions.last.defense - %td= @pokemon.revisions.last.special_attack - %td= @pokemon.revisions.last.special_defense - %td= @pokemon.revisions.last.speed - .pokemon-row - .pokemon-moves - .pd-details Moves - %ul - %li= @pokemon.revisions.last.move_1.name - - if @pokemon.revisions.last.move_2 - %li= @pokemon.revisions.last.move_2.name - - else - %li - - - if @pokemon.revisions.last.move_3 - %li= @pokemon.revisions.last.move_3.name - - else - %li - - - if @pokemon.revisions.last.move_4 - %li= @pokemon.revisions.last.move_4.name - - else - %li - - .pokemon-memo - .pd-details Trainer Memo - .pd-contents - %p - %span.pokemon-nature<= @pokemon.nature.titlecase - nature. - %p= @pokemon.display_met - .pokemon-contest - .pd-details Contest Condition - = condition_diagram @pokemon.revisions.last - .pokemon-ribbons - .pd-details Ribbons + .pokemon-image + .pokemon-image-wrap= image_tag @pokemon.sprite_path + - if @pokemon.revisions.last.item.nil? + .pokemon-item-label Item + .pokemon-item None + - else + .pokemon-item-label.with-item Item + .pokemon-item.pkv-has-hover + = image_tag(@pokemon.revisions.last.item.icon_path) + = @pokemon.revisions.last.item.name + .pkv-hover + .pc-data-name= @pokemon.revisions.last.item.name + - if @pokemon.revisions.last.item.tm? + .pc-move-name= @pokemon.revisions.last.item.move.name + = @pokemon.revisions.last.item.description(@pokemon.trainer.game) + .pokemon-tab.pokemon-details + %table + %tr + %th Pokédex No. + %td + .table-bubble.tb-top= @pokemon.species_id + %tr + %th Name + %td + .table-bubble= @pokemon.species.name + %tr + %th Type + %td + .table-bubble + = image_for_type @pokemon.species.type_1 + - if @pokemon.species.type_2 + = image_for_type @pokemon.species.type_2 + %tr + %th OT + %td.ot-gender{ class: @pokemon.ot_gender } + .table-bubble= @pokemon.ot_name + %tr + %th ID No. + %td + .table-bubble.tb-bottom= @pokemon.display_ot_number + %tr + %th   + %td + .pokemon-met-label Trainer Memo + .pokemon-description= display_met @pokemon + .pokemon-tab.pokemon-stats + %table + %tr + %th HP + %td + .table-bubble.tb-top= @pokemon.revisions.last.hp + %tr + %th + Attack + - if @pokemon.nature_benefits?(:attack) + %span.nature-benefit + + - if @pokemon.nature_hinders?(:attack) + %span.nature-hinder - + %td + .table-bubble= @pokemon.revisions.last.attack + %tr + %th + Defense + - if @pokemon.nature_benefits?(:defense) + %span.nature-benefit + + - if @pokemon.nature_hinders?(:defense) + %span.nature-hinder - + %td + .table-bubble= @pokemon.revisions.last.defense + %tr + %th + Sp. Atk + - if @pokemon.nature_benefits?(:special_attack) + %span.nature-benefit + + - if @pokemon.nature_hinders?(:special_attack) + %span.nature-hinder - + %td + .table-bubble= @pokemon.revisions.last.special_attack + %tr + %th + Sp. Def + - if @pokemon.nature_benefits?(:special_defense) + %span.nature-benefit + + - if @pokemon.nature_hinders?(:special_defense) + %span.nature-hinder - + %td + .table-bubble= @pokemon.revisions.last.special_defense + %tr + %th + Speed + - if @pokemon.nature_benefits?(:speed) + %span.nature-benefit + + - if @pokemon.nature_hinders?(:speed) + %span.nature-hinder - + %td + .table-bubble.tb-bottom= @pokemon.revisions.last.speed + %tr.pokemon-nature-label + %th{ colspan: 2 } Nature + %tr + %th + %td + .tb-only= @pokemon.nature_text + %tr + %th{ colspan: 2 } Ability + %tr + %th + %td + .tb-only.pkv-has-hover + = @pokemon.ability.name + .pkv-hover + .pc-data-name= @pokemon.ability.name + = @pokemon.ability.description + .pokemon-tab.pokemon-moves + %table + - (1..4).each do |i| + = move_details @pokemon.revisions.last, i + .pokemon-tab.pokemon-contest= condition_diagram @pokemon.revisions.last + .pokemon-tab.pokemon-ribbons %ul - @pokemon.revisions.last.ribbons.each do |ribbon| %li.pkv-has-hover @@ -88,14 +130,3 @@ .pkv-hover .pc-data-name= ribbon[:name] = ribbon[:description] - .pokemon-etc - .pd-details Misc - = image_tag(@pokemon.pokeball_icon_path) - - unless @pokemon.revisions.last.item.nil? - .pd-hold-item.pkv-has-hover - = image_tag(@pokemon.revisions.last.item.icon_path) - .pkv-hover - .pc-data-name= @pokemon.revisions.last.item.name - - if @pokemon.revisions.last.item.tm? - .pc-move-name= @pokemon.revisions.last.item.move.name - = @pokemon.revisions.last.item.description(@pokemon.trainer.game) diff --git a/config/locales/en.yml b/config/locales/en.yml new file mode 100644 index 0000000..b5425f5 --- /dev/null +++ b/config/locales/en.yml @@ -0,0 +1,42 @@ +en: + enumerize: + pokemon: + pokeball: + master: "Master Ball" + ultra: "Ultra Ball" + great: "Great Ball" + poke: "Poké Ball" + safari: "Safari Ball" + net: "Net Ball" + dive: "Dive Ball" + nest: "Nest Ball" + repeat: "Repeat Ball" + timer: "Timer Ball" + luxury: "Luxury Ball" + premier: "Premier Ball" + nature: + hardy: "Hardy" + lonely: "Lonely" + brave: "Brave" + adamant: "Adamant" + naughty: "Naughty" + bold: "Bold" + docile: "Docile" + relaxed: "Relaxed" + impish: "Impish" + lax: "Lax" + timid: "Timid" + hasty: "Hasty" + serious: "Serious" + jolly: "Jolly" + naive: "Naive" + modest: "Modest" + mild: "Mild" + quiet: "Quiet" + bashful: "Bashful" + rash: "Rash" + calm: "Calm" + gentle: "Gentle" + sassy: "Sassy" + careful: "Careful" + quirky: "Quirky" -- cgit 1.4.1