From 2721f3768ebd4d279caa967bee210249d93f92cb Mon Sep 17 00:00:00 2001 From: Kelly Rauchenberger Date: Sun, 24 Sep 2017 18:14:24 -0400 Subject: Worked on PC display page --- Gemfile.lock | 14 +++ app/assets/javascripts/pokeviewer/application.js | 1 + app/assets/javascripts/pokeviewer/pokemon.js | 2 - .../javascripts/pokeviewer/pokemon.js.coffee | 7 ++ app/assets/stylesheets/pokeviewer/pokemon.css.scss | 132 ++++++++++++++++++++- app/controllers/pokeviewer/pokemon_controller.rb | 2 +- app/models/pokeviewer/pokemon.rb | 19 ++- app/models/pokeviewer/trainer.rb | 27 +++++ app/views/pokeviewer/pokemon/index.html.haml | 32 ++++- lib/pokeviewer/engine.rb | 4 +- pokeviewer.gemspec | 2 + 11 files changed, 228 insertions(+), 14 deletions(-) delete mode 100644 app/assets/javascripts/pokeviewer/pokemon.js create mode 100644 app/assets/javascripts/pokeviewer/pokemon.js.coffee diff --git a/Gemfile.lock b/Gemfile.lock index c066b8e..3936e58 100644 --- a/Gemfile.lock +++ b/Gemfile.lock @@ -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) diff --git a/app/assets/javascripts/pokeviewer/application.js b/app/assets/javascripts/pokeviewer/application.js index e54c646..52d2214 100644 --- a/app/assets/javascripts/pokeviewer/application.js +++ b/app/assets/javascripts/pokeviewer/application.js @@ -10,4 +10,5 @@ // Read Sprockets README (https://github.com/rails/sprockets#sprockets-directives) for details // about supported directives. // +//= require jquery3 //= require_tree . diff --git a/app/assets/javascripts/pokeviewer/pokemon.js b/app/assets/javascripts/pokeviewer/pokemon.js deleted file mode 100644 index dee720f..0000000 --- a/app/assets/javascripts/pokeviewer/pokemon.js +++ /dev/null @@ -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. diff --git a/app/assets/javascripts/pokeviewer/pokemon.js.coffee b/app/assets/javascripts/pokeviewer/pokemon.js.coffee new file mode 100644 index 0000000..f82f196 --- /dev/null +++ b/app/assets/javascripts/pokeviewer/pokemon.js.coffee @@ -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}) diff --git a/app/assets/stylesheets/pokeviewer/pokemon.css.scss b/app/assets/stylesheets/pokeviewer/pokemon.css.scss index 1f4c068..6dbb6c8 100644 --- a/app/assets/stylesheets/pokeviewer/pokemon.css.scss +++ b/app/assets/stylesheets/pokeviewer/pokemon.css.scss @@ -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; } diff --git a/app/controllers/pokeviewer/pokemon_controller.rb b/app/controllers/pokeviewer/pokemon_controller.rb index aaf6586..ef421ac 100644 --- a/app/controllers/pokeviewer/pokemon_controller.rb +++ b/app/controllers/pokeviewer/pokemon_controller.rb @@ -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 diff --git a/app/models/pokeviewer/pokemon.rb b/app/models/pokeviewer/pokemon.rb index 3975550..d14ea87 100644 --- a/app/models/pokeviewer/pokemon.rb +++ b/app/models/pokeviewer/pokemon.rb @@ -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 diff --git a/app/models/pokeviewer/trainer.rb b/app/models/pokeviewer/trainer.rb index edfbd25..d3a5b91 100644 --- a/app/models/pokeviewer/trainer.rb +++ b/app/models/pokeviewer/trainer.rb @@ -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 diff --git a/app/views/pokeviewer/pokemon/index.html.haml b/app/views/pokeviewer/pokemon/index.html.haml index c613e70..69b6a68 100644 --- a/app/views/pokeviewer/pokemon/index.html.haml +++ b/app/views/pokeviewer/pokemon/index.html.haml @@ -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 diff --git a/lib/pokeviewer/engine.rb b/lib/pokeviewer/engine.rb index 9733b43..06ac355 100644 --- a/lib/pokeviewer/engine.rb +++ b/lib/pokeviewer/engine.rb @@ -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 diff --git a/pokeviewer.gemspec b/pokeviewer.gemspec index 354ed05..b3408ec 100644 --- a/pokeviewer.gemspec +++ b/pokeviewer.gemspec @@ -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 -- cgit 1.4.1