From a70494be4e1767e0cb7ff4218e7f266ece56089c Mon Sep 17 00:00:00 2001 From: Kelly Rauchenberger Date: Wed, 4 Jul 2018 14:42:21 -0400 Subject: Made pokemon embeddable --- .../javascripts/pokeviewer/pokemon.js.coffee | 10 ++ app/assets/stylesheets/pokeviewer/pokemon.css.scss | 94 ++++++++++++++ app/controllers/pokeviewer/pokemon_controller.rb | 18 ++- app/views/pokeviewer/pokemon/_embed_code.html.haml | 1 + app/views/pokeviewer/pokemon/_pokemon.html.haml | 135 ++++++++++++++++++++ app/views/pokeviewer/pokemon/embed.html.haml | 15 +++ app/views/pokeviewer/pokemon/show.html.haml | 139 +-------------------- 7 files changed, 273 insertions(+), 139 deletions(-) create mode 100644 app/views/pokeviewer/pokemon/_embed_code.html.haml create mode 100644 app/views/pokeviewer/pokemon/_pokemon.html.haml create mode 100644 app/views/pokeviewer/pokemon/embed.html.haml (limited to 'app') diff --git a/app/assets/javascripts/pokeviewer/pokemon.js.coffee b/app/assets/javascripts/pokeviewer/pokemon.js.coffee index a6fd326..e80ae77 100644 --- a/app/assets/javascripts/pokeviewer/pokemon.js.coffee +++ b/app/assets/javascripts/pokeviewer/pokemon.js.coffee @@ -1,3 +1,9 @@ +show_pokemon_tab = (tab) -> + $(".pokemon-tab").hide() + $(".ptabe-button").removeClass("active") + $(".pokemon-" + tab).show() + $(".ptabe-" + tab).addClass("active") + $ -> $(".pkv-has-hover").mouseover -> $(this).children(".pkv-hover").show() @@ -7,3 +13,7 @@ $ -> $(this).children(".pkv-hover").offset({left: event.pageX + 16, top: event.pageY - 16}) $(".in-emerald .pokemon-image img").mouseover -> $(this).attr("src", $(this)[0].src) + $(".ptabe-button a").click -> + show_pokemon_tab($(this).data("tab")) + if $("#pokemon-embed").length > 0 + show_pokemon_tab("details") diff --git a/app/assets/stylesheets/pokeviewer/pokemon.css.scss b/app/assets/stylesheets/pokeviewer/pokemon.css.scss index 1b1ce5d..df2a184 100644 --- a/app/assets/stylesheets/pokeviewer/pokemon.css.scss +++ b/app/assets/stylesheets/pokeviewer/pokemon.css.scss @@ -200,6 +200,15 @@ .pokemon-name { font-weight: bold; white-space: pre; + + a { + color: blue; + text-decoration: none; + + &:hover { + text-decoration: underline; + } + } } &.in-emerald { @@ -578,3 +587,88 @@ .clear { clear: both; } + +#pokemon-embed { + width: 350px; + margin: 1em; + + #pokemon-embed-tabs { + margin: 0; + padding: 0; + text-align: right; + + li { + display: inline-block; + padding: 3px; + border-width: 1px 1px 0 1px; + border-style: solid; + border-color: #888; + border-top-left-radius: 4px; + border-top-right-radius: 4px; + + a { + font-family: 'Power Green'; + color: white; + text-decoration: none; + text-transform: uppercase; + } + + &.ptabe-details { + background-color: #94c49c; + + &.active, &:hover { + background-color: #84ac88; + } + } + + &.ptabe-stats { + background-color: #8890f8; + + &.active, &:hover { + background-color: #6870d8; + } + } + + &.ptabe-moves { + background-color: #f7aca6; + + &.active, &:hover { + background-color: #ff847c; + } + } + + &.ptabe-contest { + background-color: #b9d7f2; + + &.active, &:hover { + background-color: #63aef2; + } + } + + &.ptabe-ribbons { + background-color: #f8d8f8; + + &.active, &:hover { + background-color: #f8a0f8; + } + } + } + } + + .pokemon { + margin: 0; + } + + .pokemon-tab { + display: none; + } +} + +#pk-embed-code { + width: 50%; + + textarea { + width: 100%; + height: 4em; + } +} diff --git a/app/controllers/pokeviewer/pokemon_controller.rb b/app/controllers/pokeviewer/pokemon_controller.rb index f2d2187..7045807 100644 --- a/app/controllers/pokeviewer/pokemon_controller.rb +++ b/app/controllers/pokeviewer/pokemon_controller.rb @@ -2,6 +2,8 @@ require_dependency "pokeviewer/application_controller" module Pokeviewer class PokemonController < ApplicationController + before_action :load_pokemon, only: [:show, :embed] + def index pokemon = Pokemon.order("trainer_id IS NULL DESC"). order(trainer_id: :asc). @@ -66,10 +68,18 @@ module Pokeviewer end def show - @pokemon = Pokemon.includes( - :trainer, :location, - current: [:species, :item, :move_1, :move_2, :move_3, :move_4] - ).find_by_uuid! params[:id] end + + def embed + render layout: false + end + + protected + def load_pokemon + @pokemon = Pokemon.includes( + :trainer, :location, + current: [:species, :item, :move_1, :move_2, :move_3, :move_4] + ).find_by_uuid! params[:id] + end end end diff --git a/app/views/pokeviewer/pokemon/_embed_code.html.haml b/app/views/pokeviewer/pokemon/_embed_code.html.haml new file mode 100644 index 0000000..6bbff69 --- /dev/null +++ b/app/views/pokeviewer/pokemon/_embed_code.html.haml @@ -0,0 +1 @@ +%iframe{ src: embed_pokemon_url(@pokemon), frameborder: 0, width: 382, height: 298 } \ No newline at end of file diff --git a/app/views/pokeviewer/pokemon/_pokemon.html.haml b/app/views/pokeviewer/pokemon/_pokemon.html.haml new file mode 100644 index 0000000..573e7eb --- /dev/null +++ b/app/views/pokeviewer/pokemon/_pokemon.html.haml @@ -0,0 +1,135 @@ +.pokemon{ class: (not @pokemon.trainer.nil?) && "in-#{@pokemon.trainer.game}" } + .pokemon-basics + .pokemon-nameline + = image_tag(@pokemon.pokeball_icon_path, class: "pokemon-ball") + %span.pokemon-name= link_to_unless_current @pokemon.current.nickname, @pokemon + %span.pokemon-gender{ class: @pokemon.gender }= @pokemon.gender_symbol + .pokemon-level= "Lv. #{@pokemon.current.level}" + .pokemon-image + .pokemon-image-wrap + = image_tag @pokemon.current.sprite_path, class: "pokemon-sprite" + - if @pokemon.shiny? + = image_tag "pokeviewer/ShinyIVStar.png", class: "pkv-shiny-star" + - if @pokemon.current.item.nil? + .pokemon-item-label Item + .pokemon-item None + - else + .pokemon-item-label.with-item Item + .pokemon-item.pkv-has-hover + = image_tag(@pokemon.current.item.icon_path) + = @pokemon.current.item.name + .pkv-hover + .pc-data-name= @pokemon.current.item.name + - if @pokemon.current.item.tm? + .pc-move-name= @pokemon.current.item.move.name + = @pokemon.current.item.description(@pokemon.trainer.game) + .pokemon-tab.pokemon-details + %table + %tr + %th Pokédex No. + %td + .table-bubble.tb-top= @pokemon.current.species_id + %tr + %th Name + %td + .table-bubble= @pokemon.current.species.name + %tr + %th Type + %td + .table-bubble + = image_for_type @pokemon.current.species.type_1 + - if @pokemon.current.species.type_2 + = image_for_type @pokemon.current.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.current.hp + %tr + %th + Attack + - if @pokemon.nature_benefits?(:attack) + %span.nature-benefit + + - if @pokemon.nature_hinders?(:attack) + %span.nature-hinder - + %td + .table-bubble= @pokemon.current.attack + %tr + %th + Defense + - if @pokemon.nature_benefits?(:defense) + %span.nature-benefit + + - if @pokemon.nature_hinders?(:defense) + %span.nature-hinder - + %td + .table-bubble= @pokemon.current.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.current.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.current.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.current.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.current.ability.name + .pkv-hover + .pc-data-name= @pokemon.current.ability.name + = @pokemon.current.ability.description + .pokemon-tab.pokemon-moves + %table + - (1..4).each do |i| + = move_details @pokemon.current, i + .pokemon-tab.pokemon-contest= condition_diagram @pokemon.current + .pokemon-tab.pokemon-ribbons + %ul + - @pokemon.current.ribbons.each do |ribbon| + %li.pkv-has-hover + = image_tag("pokeviewer/ribbons/#{ribbon[:filename]}") + .pkv-hover + .pc-data-name= ribbon[:name] + = ribbon[:description] diff --git a/app/views/pokeviewer/pokemon/embed.html.haml b/app/views/pokeviewer/pokemon/embed.html.haml new file mode 100644 index 0000000..f4848de --- /dev/null +++ b/app/views/pokeviewer/pokemon/embed.html.haml @@ -0,0 +1,15 @@ +!!! 5 +%html + %head + %title Pokeviewer + = stylesheet_link_tag "pokeviewer/application", media: "all" + = javascript_include_tag "pokeviewer/application" + = csrf_meta_tags + %body#pokemon-embed + %ul#pokemon-embed-tabs + %li.ptabe-button.ptabe-details= link_to "Details", "\#", data: {tab: "details"} + %li.ptabe-button.ptabe-stats= link_to "Stats", "\#", data: {tab: "stats"} + %li.ptabe-button.ptabe-moves= link_to "Moves", "\#", data: {tab: "moves"} + %li.ptabe-button.ptabe-contest= link_to "Contest", "\#", data: {tab: "contest"} + %li.ptabe-button.ptabe-ribbons= link_to "Ribbons", "\#", data: {tab: "ribbons"} + = render @pokemon diff --git a/app/views/pokeviewer/pokemon/show.html.haml b/app/views/pokeviewer/pokemon/show.html.haml index 3f2750c..f35f9ed 100644 --- a/app/views/pokeviewer/pokemon/show.html.haml +++ b/app/views/pokeviewer/pokemon/show.html.haml @@ -1,135 +1,4 @@ -.pokemon{ class: (not @pokemon.trainer.nil?) && "in-#{@pokemon.trainer.game}" } - .pokemon-basics - .pokemon-nameline - = image_tag(@pokemon.pokeball_icon_path, class: "pokemon-ball") - %span.pokemon-name= @pokemon.current.nickname - %span.pokemon-gender{ class: @pokemon.gender }= @pokemon.gender_symbol - .pokemon-level= "Lv. #{@pokemon.current.level}" - .pokemon-image - .pokemon-image-wrap - = image_tag @pokemon.current.sprite_path, class: "pokemon-sprite" - - if @pokemon.shiny? - = image_tag "pokeviewer/ShinyIVStar.png", class: "pkv-shiny-star" - - if @pokemon.current.item.nil? - .pokemon-item-label Item - .pokemon-item None - - else - .pokemon-item-label.with-item Item - .pokemon-item.pkv-has-hover - = image_tag(@pokemon.current.item.icon_path) - = @pokemon.current.item.name - .pkv-hover - .pc-data-name= @pokemon.current.item.name - - if @pokemon.current.item.tm? - .pc-move-name= @pokemon.current.item.move.name - = @pokemon.current.item.description(@pokemon.trainer.game) - .pokemon-tab.pokemon-details - %table - %tr - %th Pokédex No. - %td - .table-bubble.tb-top= @pokemon.current.species_id - %tr - %th Name - %td - .table-bubble= @pokemon.current.species.name - %tr - %th Type - %td - .table-bubble - = image_for_type @pokemon.current.species.type_1 - - if @pokemon.current.species.type_2 - = image_for_type @pokemon.current.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.current.hp - %tr - %th - Attack - - if @pokemon.nature_benefits?(:attack) - %span.nature-benefit + - - if @pokemon.nature_hinders?(:attack) - %span.nature-hinder - - %td - .table-bubble= @pokemon.current.attack - %tr - %th - Defense - - if @pokemon.nature_benefits?(:defense) - %span.nature-benefit + - - if @pokemon.nature_hinders?(:defense) - %span.nature-hinder - - %td - .table-bubble= @pokemon.current.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.current.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.current.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.current.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.current.ability.name - .pkv-hover - .pc-data-name= @pokemon.current.ability.name - = @pokemon.current.ability.description - .pokemon-tab.pokemon-moves - %table - - (1..4).each do |i| - = move_details @pokemon.current, i - .pokemon-tab.pokemon-contest= condition_diagram @pokemon.current - .pokemon-tab.pokemon-ribbons - %ul - - @pokemon.current.ribbons.each do |ribbon| - %li.pkv-has-hover - = image_tag("pokeviewer/ribbons/#{ribbon[:filename]}") - .pkv-hover - .pc-data-name= ribbon[:name] - = ribbon[:description] += render @pokemon +%details#pk-embed-code + %summary Embed code + %textarea{ readonly: true }= CGI.escapeHTML(render partial: "embed_code").html_safe -- cgit 1.4.1