about summary refs log tree commit diff stats
path: root/app
diff options
context:
space:
mode:
Diffstat (limited to 'app')
-rw-r--r--app/assets/stylesheets/pokeviewer/pokemon.css.scss53
-rw-r--r--app/helpers/pokeviewer/pokemon_helper.rb76
-rw-r--r--app/views/pokeviewer/pokemon/show.html.haml1
3 files changed, 128 insertions, 2 deletions
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 {
215 215
216 .pokemon-basics { 216 .pokemon-basics {
217 margin: .5em; 217 margin: .5em;
218 min-width: 5em;
218 } 219 }
219 220
220 .pokemon-column { 221 .pokemon-column {
221 display: flex;
222 flex-direction: column;
223 border-left: 1px solid #aaa; 222 border-left: 1px solid #aaa;
224 223
225 &>div + div { 224 &>div + div {
@@ -300,4 +299,54 @@ body {
300 } 299 }
301 } 300 }
302 } 301 }
302
303 .pokemon-condition {
304 background-color: #b9d7f2;
305 border-left: 1px solid #aaa;
306 flex: 1 0px;
307
308 .pkcv-cool-circle {
309 fill: #f59a55;
310 }
311
312 .pkcv-beauty-circle {
313 fill: #8095ff;
314 }
315
316 .pkcv-cute-circle {
317 fill: #f5a8d3;
318 }
319
320 .pkcv-smart-circle {
321 fill: #79e15c;
322 }
323
324 .pkcv-tough-circle {
325 fill: #f7f100;
326 }
327
328 .pkcv-outline {
329 stroke: gray;
330 stroke-width: 5;
331 stroke-linejoin: round;
332 fill: white;
333 fill-opacity: 0.3;
334 }
335
336 .pkcv-data {
337 fill: #4ee100;
338 }
339
340 .pkcv-label, .pkcv-label-outline {
341 font-family: "Power Green";
342 font-size: 50px;
343 text-anchor: middle;
344 }
345
346 .pkcv-label-outline {
347 stroke: #f0f8f8;
348 stroke-width: 6;
349 stroke-linejoin: butt;
350 }
351 }
303} 352}
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 @@
1require 'victor'
2
1module Pokeviewer 3module Pokeviewer
2 module PokemonHelper 4 module PokemonHelper
5
6 def condition_diagram(revision)
7 svg = Victor::SVG.new width: 420, height: 430
8
9 center_x = 200
10 center_y = 200
11 radius = 160
12
13 angle = -Math::PI / 2.0
14 incr = (2 * Math::PI) / 5
15
16 data = [
17 [:cool, revision.coolness],
18 [:beauty, revision.beauty],
19 [:cute, revision.cuteness],
20 [:smart, revision.smartness],
21 [:tough, revision.toughness]
22 ]
23
24 outline = data.map do |c|
25 x_offset = radius * Math.cos(angle)
26 y_offset = radius * Math.sin(angle)
27
28 svg.circle(
29 cx: (center_x + x_offset),
30 cy: (center_y + y_offset),
31 r: 53,
32 class: "pkcv-#{c[0]}-circle")
33
34 if c[0] == :cool
35 text_y = center_y + (radius + 20) * Math.sin(angle)
36 else
37 text_y = center_y + (radius + 60) * Math.sin(angle)
38 end
39
40 svg.text(c[0].upcase,
41 x: (center_x + (radius + 60) * Math.cos(angle)),
42 y: text_y,
43 class: "pkcv-label-outline")
44
45 svg.text(c[0].upcase,
46 x: (center_x + (radius + 60) * Math.cos(angle)),
47 y: text_y,
48 class: "pkcv-label")
49
50 angle += incr
51
52 [center_x + x_offset, center_y + y_offset]
53 end
54
55 svg.polygon points: outline.map { |point| point * "," } * " ", class: "pkcv-outline"
56
57 points = data.map do |c|
58 datapoint = c[1]
59 datapoint = 0.01 if datapoint < 1
60 datapoint /= 10.0
61 datapoint **= (1.0/3.0)
62
63 x_offset = (radius - 3) * Math.cos(angle) * datapoint
64 y_offset = (radius - 3) * Math.sin(angle) * datapoint
65
66 angle += incr
67
68 [center_x + x_offset, center_y + y_offset]
69 end
70
71 svg.polygon points: points.map { |point| point * "," } * " ", class: "pkcv-data"
72
73 tag.svg(svg.to_s.html_safe,
74 viewBox: "0 -30 410 430",
75 width: 410,
76 class: "pokemon-condition")
77 end
78
3 end 79 end
4end 80end
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 @@
76 %span.pokemon-nature<= @pokemon.nature.titlecase 76 %span.pokemon-nature<= @pokemon.nature.titlecase
77 nature. 77 nature.
78 %p= @pokemon.display_met 78 %p= @pokemon.display_met
79 = condition_diagram @pokemon.revisions.last