diff options
| -rw-r--r-- | app/controllers/matches_controller.rb | 5 | ||||
| -rw-r--r-- | app/views/matches/index.html.erb | 90 | ||||
| -rw-r--r-- | app/views/tournaments/_selected.html.erb | 1 |
3 files changed, 61 insertions, 35 deletions
diff --git a/app/controllers/matches_controller.rb b/app/controllers/matches_controller.rb index f196978..1d4ee27 100644 --- a/app/controllers/matches_controller.rb +++ b/app/controllers/matches_controller.rb @@ -9,10 +9,11 @@ class MatchesController < ApplicationController def index @matches = @tournament.matches - # width of SVG - @width = 300 * (Math.log2(@matches.count).floor + 1); + # depth of SVG tree + @depth = Math.log2(@matches.count).floor+1; # height of SVG @height = 200 * 2**Math.log2(@matches.count).floor + 100; + @h_sector = 2**(@depth-1)+1 end # For compatability with the router assumptions made by ApplicationController#check_permission diff --git a/app/views/matches/index.html.erb b/app/views/matches/index.html.erb index 052d176..1941179 100644 --- a/app/views/matches/index.html.erb +++ b/app/views/matches/index.html.erb @@ -37,8 +37,19 @@ <div id="match-tree"> <SVG version="1.1" baseProfile="full" - width="<%= @width %>" height="<%= @height = [@height, 500].max %>" + width="100%" height="<%= @height = [@height, 500].max %>" xmlns="http://www.w3.org/2000/svg"> + <% lastrx = 0 + lastry = 0 + lastrh = 0 + lastrw = 0 %> + <defs> + <radialGradient id="gradMatch" cx="50%" cy="50%" r="50%" fx="50%" fy="50%"> + <stop offset="0%" style="stop-color:#ffd281; + stop-opacity:0" /> + <stop offset="100%" style="stop-color:#EEA236;stop-opacity:1" /> + </radialGradient> + </defs> <script type="text/ecmascript"><![CDATA[ function redirect(i){ window.location.replace("<%= request.original_url %>"+"/"+i); @@ -46,39 +57,54 @@ ]]> </script> <% (1..@matches.count).each do |i| %> - <g id="svg-match-<%= i %>" onmouseover="dispStats(<%= i %>)" onclick="redirect(<%= @matches[i-1].id %>)" cursor="pointer"> - <rect height="120px" width="213px" - x="<%= @width - (i-1)*50 - 250*(Math.log2(i).floor+1) %>" - y="<%= (@height/(Math.log2(i).floor+2)) - 60 + 250*(i - 2**(Math.log2(i).floor)) %>" - fill="#ffd281" - rx="20px" - stroke-width="2" - <% case @matches[i-1].status %> - <% when 0 %> - <% if @matches[i-1].teams.count < @tournament.min_teams_per_match %> - stroke="red" - fill-opacity="0.6" - <% else %> - stroke="green" - <% end %> - <% when 1 %> - stroke="orange" - <% when 2 %> - stroke="yellow" - <% when 3 %> - stroke="grey" - <% end %> + <g id="svg-match-<%= i %>" onclick="redirect(<%= @matches[i-1].id %>)" cursor="pointer"> + <rect height="<%= rh = 100/(2**(@depth-1)+1) - 5 %>%" + width="<%= rw = 100/(@depth+1) - 5 %>%" + x="<%= rx = 50/(@depth+1) + 100/(@depth+1)*(@depth-(Math.log2(i).ceil+1)) %>%" + y="<%= ry = ( 100/(2**(Math.log2(i).floor+1))) %>%" + fill="url(#gradMatch)" + rx="5px" + stroke-width="2" + <% case @matches[i-1].status %> + <% when 0 %> + <% if @matches[i-1].teams.count < @tournament.min_teams_per_match %> + stroke="red" + fill-opacity="0.6" + <% else %> + stroke="green" + <% end %> + <% when 1 %> + stroke="orange" + <% when 2 %> + stroke="yellow" + <% when 3 %> + stroke="grey" + <% end %> /> + <rect width="<%= rw-5 %>%" height="<%= rh/4 %>%" x="<%= rx + 2.5 %>%" y="<%= ry + 4 %>%" fill="white" stroke="black" /> + <text x="<%= rx + rw/4 %>%" y="<%= ry + 10 %>%" font-size="<%= rh %>"> + <% if @matches[i-1].teams.first %> + Team <%= @matches[i-1].teams.first.id %> + <% end %> + </text> + <text x="<%= rx + rw/2 - 2 %>%" y="<%= ry + 16 %>%" font-size="<%= rh %>"> VS </text> + + <rect width="<%= rw-5 %>%" height="<%= rh/4 %>%" x="<%= rx + 2.5 %>%" y="<%= ry + 17 %>%" fill="white" stroke="black" /> + <text x="<%= rx + rw/4 %>%" y="<%= ry + 23 %>%" font-size="<%= rh %>"> + <% if @matches[i-1].teams[1] %> + Team <%= @matches[i-1].teams[1].id %> + <% end %> + </text> + + <% if i > 1 %> + <line x1="<%= rx+rw %>%" y1="<%= ry+rh/2 %>%" x2="<%= lastrx %>%" y2="<%= lastry+lastrh/2 %>%" stroke="black" stroke-width="2" > + <% end %> + <% lastrx = rx + lastry = ry + lastrh = rh + lastrw = rw %> </g> - <% if i > 1 %> - <line - stroke="black" - x1="<%= @width - (i-2)*50 - 250*(Math.log2(i-1).floor+1) %>" - y1="<%= (@height/(Math.log2(i-1).floor+2)) - 60 + 250*((i-1) - 2**(Math.log2(i-1).floor)) + 60 %>" - x2="<%= @width - (i-1)*50 - 250*(Math.log2(i).floor+1) + 213 %>" - y2="<%= (@height/(Math.log2(i).floor+2)) - 60 + 250*(i - 2**(Math.log2(i).floor)) + 60 %>" - /> - <% end %> + <% end %> </SVG> </div> diff --git a/app/views/tournaments/_selected.html.erb b/app/views/tournaments/_selected.html.erb index b66acb0..c3a1736 100644 --- a/app/views/tournaments/_selected.html.erb +++ b/app/views/tournaments/_selected.html.erb @@ -17,5 +17,4 @@ </p> <% end %> - <%= f.submit %> <% end %> |