From 25bce2b0b189ec34123510041925cdb1143421fc Mon Sep 17 00:00:00 2001 From: Kelly Rauchenberger Date: Thu, 28 Sep 2017 23:54:38 -0400 Subject: Added contest diagram --- app/assets/stylesheets/pokeviewer/pokemon.css.scss | 53 ++++++++++++++- app/helpers/pokeviewer/pokemon_helper.rb | 76 ++++++++++++++++++++++ app/views/pokeviewer/pokemon/show.html.haml | 1 + 3 files changed, 128 insertions(+), 2 deletions(-) (limited to 'app') diff --git a/app/assets/stylesheets/pokeviewer/pokemon.css.scss b/app/assets/stylesheets/pokeviewer/pokemon.css.scss index 077aaf7..c9560d4 100644 --- a/app/assets/stylesheets/pokeviewer/pokemon.css.scss +++ b/app/assets/stylesheets/pokeviewer/pokemon.css.scss @@ -215,11 +215,10 @@ body { .pokemon-basics { margin: .5em; + min-width: 5em; } .pokemon-column { - display: flex; - flex-direction: column; border-left: 1px solid #aaa; &>div + div { @@ -300,4 +299,54 @@ body { } } } + + .pokemon-condition { + background-color: #b9d7f2; + border-left: 1px solid #aaa; + flex: 1 0px; + + .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-data { + fill: #4ee100; + } + + .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; + } + } } diff --git a/app/helpers/pokeviewer/pokemon_helper.rb b/app/helpers/pokeviewer/pokemon_helper.rb index 4f3dc3f..de2d815 100644 --- a/app/helpers/pokeviewer/pokemon_helper.rb +++ b/app/helpers/pokeviewer/pokemon_helper.rb @@ -1,4 +1,80 @@ +require 'victor' + module Pokeviewer module PokemonHelper + + def condition_diagram(revision) + svg = Victor::SVG.new width: 420, height: 430 + + center_x = 200 + center_y = 200 + radius = 160 + + angle = -Math::PI / 2.0 + incr = (2 * Math::PI) / 5 + + data = [ + [:cool, revision.coolness], + [:beauty, revision.beauty], + [:cute, revision.cuteness], + [:smart, revision.smartness], + [:tough, revision.toughness] + ] + + outline = data.map do |c| + x_offset = radius * Math.cos(angle) + y_offset = radius * Math.sin(angle) + + svg.circle( + cx: (center_x + x_offset), + cy: (center_y + y_offset), + r: 53, + class: "pkcv-#{c[0]}-circle") + + if c[0] == :cool + text_y = center_y + (radius + 20) * Math.sin(angle) + else + text_y = center_y + (radius + 60) * Math.sin(angle) + end + + svg.text(c[0].upcase, + x: (center_x + (radius + 60) * Math.cos(angle)), + y: text_y, + class: "pkcv-label-outline") + + svg.text(c[0].upcase, + x: (center_x + (radius + 60) * Math.cos(angle)), + y: text_y, + class: "pkcv-label") + + angle += incr + + [center_x + x_offset, center_y + y_offset] + end + + svg.polygon points: outline.map { |point| point * "," } * " ", class: "pkcv-outline" + + points = data.map do |c| + datapoint = c[1] + datapoint = 0.01 if datapoint < 1 + datapoint /= 10.0 + datapoint **= (1.0/3.0) + + x_offset = (radius - 3) * Math.cos(angle) * datapoint + y_offset = (radius - 3) * Math.sin(angle) * datapoint + + angle += incr + + [center_x + x_offset, center_y + y_offset] + end + + svg.polygon points: points.map { |point| point * "," } * " ", class: "pkcv-data" + + tag.svg(svg.to_s.html_safe, + viewBox: "0 -30 410 430", + width: 410, + class: "pokemon-condition") + end + end end diff --git a/app/views/pokeviewer/pokemon/show.html.haml b/app/views/pokeviewer/pokemon/show.html.haml index 232d6bc..3a04914 100644 --- a/app/views/pokeviewer/pokemon/show.html.haml +++ b/app/views/pokeviewer/pokemon/show.html.haml @@ -76,3 +76,4 @@ %span.pokemon-nature<= @pokemon.nature.titlecase nature. %p= @pokemon.display_met + = condition_diagram @pokemon.revisions.last -- cgit 1.4.1