summaryrefslogtreecommitdiff
path: root/app/views/matches
diff options
context:
space:
mode:
Diffstat (limited to 'app/views/matches')
-rw-r--r--app/views/matches/index.html.erb90
1 files changed, 58 insertions, 32 deletions
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>