Made pokemon embeddable

8 files changed, 278 insertions, 140 deletions

@@ -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")
@@ -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;
+  }
+}
@@ -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
@@ -0,0 +1 @@
+%iframe{ src: embed_pokemon_url(@pokemon), frameborder: 0, width: 382, height: 298 }
\ No newline at end of file
@@ -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 &nbsp;
+        %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]
@@ -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
@@ -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 &nbsp;
-        %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
@@ -2,7 +2,11 @@ Pokeviewer::Engine.routes.draw do
   get '/', to: 'pokemon#index'
   post '/', to: 'uploader#submit'
 
-  resources :pokemon, only: [:show]
+  resources :pokemon, only: [:show] do
+    member do
+      get 'embed'
+    end
+  end
 
   resources :pokedex, only: [:index]