Worked on PC display page

11 files changed, 228 insertions, 14 deletions

@@ -3,8 +3,10 @@ PATH
   specs:
     pokeviewer (0.1.0)
       activerecord-diff
+      coffee-rails (~> 4.2)
       enumerize
       haml
+      jquery-rails
       normalize-rails
       rails (~> 5.1.4)
       sass-rails (~> 5.0)
@@ -53,10 +55,18 @@ GEM
       tzinfo (~> 1.1)
     arel (8.0.0)
     builder (3.2.3)
+    coffee-rails (4.2.2)
+      coffee-script (>= 2.2.0)
+      railties (>= 4.0.0)
+    coffee-script (2.4.1)
+      coffee-script-source
+      execjs
+    coffee-script-source (1.12.2)
     concurrent-ruby (1.0.5)
     enumerize (2.1.2)
       activesupport (>= 3.2)
     erubi (1.6.1)
+    execjs (2.7.0)
     ffi (1.9.18)
     globalid (0.4.0)
       activesupport (>= 4.2.0)
@@ -64,6 +74,10 @@ GEM
       temple (>= 0.8.0)
       tilt
     i18n (0.8.6)
+    jquery-rails (4.3.1)
+      rails-dom-testing (>= 1, < 3)
+      railties (>= 4.2.0)
+      thor (>= 0.14, < 2.0)
     loofah (2.0.3)
       nokogiri (>= 1.5.9)
     mail (2.6.6)
@@ -10,4 +10,5 @@
 // Read Sprockets README (https://github.com/rails/sprockets#sprockets-directives) for details
 // about supported directives.
 //
+//= require jquery3
 //= require_tree .
@@ -1,2 +0,0 @@
-// Place all the behaviors and hooks related to the matching controller here.
-// All this logic will automatically be available in application.js.
@@ -0,0 +1,7 @@
+$ ->
+  $(".pc-pokemon").mouseover ->
+    $(this).children(".pc-data").show()
+  $(".pc-pokemon").mouseout ->
+    $(this).children(".pc-data").hide()
+  $(".pc-pokemon").mousemove (event) ->
+    $(this).children(".pc-data").offset({left: event.pageX + 16, top: event.pageY - 16})
@@ -3,6 +3,132 @@
   They will automatically be included in application.css.
 */
 
+.trainer {
+  margin: 1em;
+  font-family: 'Power Green';
+  width: 758px;
+  box-sizing: border-box;
+  background-color: #f7f7f7;
+  border: 1px solid #999;
+  -webkit-border-top-left-radius: 6px;
+  -webkit-border-top-right-radius: 6px;
+  -moz-border-radius-topleft: 6px;
+  -moz-border-radius-topright: 6px;
+  border-top-left-radius: 6px;
+  border-top-right-radius: 6px;
+
+  .trainer-info {
+    padding: .5em .75em .25em .75em;
+    -webkit-border-top-left-radius: 6px;
+    -webkit-border-top-right-radius: 6px;
+    -moz-border-radius-topleft: 6px;
+    -moz-border-radius-topright: 6px;
+    border-top-left-radius: 6px;
+    border-top-right-radius: 6px;
+    border-bottom: 1px solid #888;
+
+    &.ruby {
+      background-color: #D67873;
+    }
+
+    &.sapphire {
+      background-color: #445E9C;
+    }
+
+    &.firered {
+      background-color: #F5AC78;
+    }
+
+    &.leafgreen {
+      background-color: #A7DB8D;
+    }
+
+    &.emerald {
+      background-color: #4E8234;
+    }
+
+    h2 {
+      margin: 0;
+      display: inline-block;
+      font-size: 24px;
+    }
+
+    .tid {
+      display: inline-block;
+      font-size: 13px;
+    }
+  }
+
+  .pc-boxes {
+    display: flex;
+    flex-wrap: wrap;
+
+    .party {
+      margin: 0;
+
+      li {
+        display: block;
+        margin: -5px 0;
+
+        .party-icon {
+          display: inline-block;
+          vertical-align: middle;
+        }
+
+        .party-name {
+          vertical-align: sub;
+          display: inline-block;
+          margin-left: .25em;
+        }
+
+        a {
+          color: black;
+          text-decoration: none;
+
+          &:hover {
+            text-decoration: underline;
+          }
+        }
+      }
+    }
+
+    .pc-box {
+      margin: .5em;
+      padding: .5em;
+      border: 1px solid #ccc;
+      border-radius: 4px;
+      width: 236px;
+      box-sizing: border-box;
+
+      h3 {
+        margin: 0;
+        text-align: center;
+      }
+
+      .pc-contents {
+        margin: 0;
+
+        .pc-pokemon {
+          .pc-data {
+            display: none;
+            background-color: #111;
+            color: #fff;
+            z-index: 1;
+            padding: .5em;
+            box-shadow: 0px 0px 2px 1px #B3B3B3;
+            border-radius: 4px;
+            position: absolute;
+
+            .pc-data-name {
+              font-weight: bold;
+            }
+          }
+        }
+      }
+    }
+  }
+}
+
 .pokemon {
   font-family: 'Power Green';
   display: flex;
@@ -15,19 +141,19 @@
   .female {
     color: red;
   }
-  
+
   .pokemon-name {
     font-weight: bold;
   }
 
   .pokemon-ivs {
     margin: 0 1em;
-    
+
     th {
       text-align: center;
       padding-right: .5em;
     }
-    
+
     td {
       text-align: right;
     }
@@ -3,7 +3,7 @@ require_dependency "pokeviewer/application_controller"
 module Pokeviewer
   class PokemonController < ApplicationController
     def index
-      @pokemon = Pokemon.all
+      @trainers = Trainer.all
     end
 
     def show
@@ -36,7 +36,7 @@ module Pokeviewer
     enumerize :unown_letter, in: [:a, :b, :c, :d, :e, :f, :g, :h, :i, :j, :k,
       :l, :m, :n, :o, :p, :q, :r, :s, :t, :u, :v, :w, :x, :y, :z,
       :question, :exclamation]
-      
+
     validates :slot, presence: true,
       uniqueness: { scope: [:trainer_id, :box] },
       unless: Proc.new { |a| a.trainer.nil? }
@@ -46,7 +46,22 @@ module Pokeviewer
     end
 
     def icon_path
-      "pokeviewer/icons/#{species_id}.png"
+      form = ""
+      if species_id == 201
+        # Handle Unown form
+        form = "-#{unown_letter}"
+      elsif species_id == 386
+        # Handle Deoxys forms
+        if trainer.firered?
+          form = "-attack"
+        elsif trainer.leafgreen?
+          form = "-defense"
+        elsif trainer.emerald?
+          form = "-speed"
+        end
+      end
+
+      "pokeviewer/icons/#{species_id}#{form}.png"
     end
 
     def sprite_path
@@ -14,5 +14,32 @@ module Pokeviewer
     validates :game, presence: true
     enumerize :game, in: [:ruby, :sapphire, :firered, :leafgreen, :emerald],
       predicates: true
+
+    def display_number
+      number.to_s.rjust(5, '0')
+    end
+
+    def party
+      pokemon.where(box: nil).order("slot ASC")
+    end
+
+    def boxes
+      (0..13).map { |i| box(i) }
+    end
+
+    def box(number)
+      pokes = pokemon.where(box: number).order("slot ASC").to_a
+
+      result = []
+      (0..29).each do |i|
+        if pokes.empty? or (pokes.first.slot == i)
+          result << pokes.shift
+        else
+          result << nil
+        end
+      end
+
+      result
+    end
   end
 end
@@ -1,5 +1,27 @@
-%ul
-  - @pokemon.each do |p|
-    %li
-      = link_to p.revisions.last.nickname, p
-      = image_tag p.icon_path
+- @trainers.each do |trainer|
+  .trainer
+    .trainer-info{ class: trainer.game }
+      %h2= trainer.name
+      %span.tid= trainer.display_number
+    .pc-boxes
+      %ul.party.pc-box
+        %h3 Party
+        - trainer.party.each do |p|
+          %li
+            %span.party-icon= image_tag p.icon_path
+            %span.party-name= link_to p.revisions.last.nickname, p
+      - trainer.boxes.each_with_index do |box,bid|
+        .pc-box
+          %h3= "Box #{bid+1}"
+          %table.pc-contents
+            - box.each_slice(6) do |row|
+              %tr
+                - row.each do |p|
+                  %td.pc-pokemon
+                    - unless p.nil?
+                      = link_to image_tag(p.icon_path), p
+                      .pc-data
+                        .pc-data-name= p.revisions.last.nickname
+                        .pc-data-ot
+                          OT/
+                          %span{ class: p.ot_gender }>= p.ot_name
@@ -3,6 +3,7 @@ require "sequenced"
 require "haml"
 require "sass-rails"
 require "normalize-rails"
+require "jquery-rails"
 
 module Pokeviewer
   class Engine < ::Rails::Engine
@@ -17,7 +18,8 @@ module Pokeviewer
         %w(pokeviewer/icons/*.png
           pokeviewer/sprites/**/*.png
           pokeviewer/sprites/**/*.gif
-          pokeviewer/types/**.gif)
+          pokeviewer/types/**.gif
+          pokeviewer/boxes/**.png)
     end
   end
 end
@@ -23,6 +23,8 @@ Gem::Specification.new do |s|
   s.add_dependency "haml"
   s.add_dependency 'sass-rails', '~> 5.0'
   s.add_dependency 'normalize-rails'
+  s.add_dependency 'coffee-rails', '~> 4.2'
+  s.add_dependency 'jquery-rails'
 
   s.add_development_dependency "sqlite3"
 end