1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
|
<h2><%= @bracket.name %></h2>
<h4> Make your prediction for the tournament by clicking on the teams you think will win </h4>
<svg id="prediction-svg" version="1.1" baseProfile="full"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
width="100%" height=<%= "#{@height * 0.66}"%>>
<defs>
<radialGradient id="gradMatch" cx="50%" cy="50%" r="80%" fx="50%" fy="50%">
<stop offset="0%" style="stop-color:#fff; stop-opacity:1" />
<stop offset="100%" style="stop-color:#ccc;stop-opacity:0" />
</radialGradient>
</defs>
<script type="text/ecmascript"><![CDATA[
<%#
This method does two things:
1) fill out hidden form with id of matchNum
2) calculate where the next text is going, and place it there
%>
function chooseWinner(matchNum, teamNum, currentBox){
console.log(matchNum, teamNum);
var id = '#bracket_matches_'+matchNum;
$(id).val(teamNum);
if (matchNum != 1) {
var parent = parseFloat(matchNum+<%= @logBase%> -2)/<%=@logBase%>;
var textBox = (parent - Math.floor(parent)) * <%= @logBase %>;
var parent = Math.floor(parent);
var textBox = Math.round(textBox);
var id = "#svg-match-"+parent+"-team-"+textBox;
console.log(id);
$(id).text("Team "+teamNum);
$(id).attr("onclick", "chooseWinner("+parent+", "+teamNum+", "+textBox+")");
}
else
{
console.log("final countdown");
for(var i = 0; i < 3; i++){
id = "#svg-match-"+matchNum+"-team-"+i;
$(id).attr("fill", "black");
}
id = "#svg-match-"+matchNum+"-team-"+currentBox;
$(id).attr("fill", "green");
$("#bracket-submit").prop('disabled', false);
}
}
]]>
</script>
<% (1..@matches.count).each do |i| %>
<% matchDepth = Math.log(i*(@logBase-1), @logBase).floor+1 %>
<% if matchDepth > Math.log(@base*(@logBase-1), @logBase).floor+1
@pBase = @base
@base = i
end %>
<g id="svg-match-<%= i %>">
<rect height="<%= rh = 100 / (@logBase**(@depth-1)+1) - 100/@height %>%"
width="<%= rw = 100/(@depth+1) - 5 %>%"
x="<%= rx = 50/(@depth+1) + 100/(@depth+1)*(@depth-matchDepth) %>%"
y="<%= ry = 100/(@logBase**(matchDepth-1)+1) * (i-@base+1) - rh/2 %>%"
fill="url(#gradMatch)"
rx="5px"
stroke="black"
/>
<% t = 1
while t <= @numTeams %>
<rect width="<%= rw-5 %>%" height="<%= rh*Float(30)/(@matchHeight) %>%" x="<%= rx + 2.5 %>%" y="<%= ry + (Float(t-1)/@numTeams)*rh + 1 %>%" fill="white" />
<text id="svg-match-<%= i %>-team-<%= t-1 %>" x="<%= rx + rw/4 %>%" y="<%= ry + (Float(t-1)/@numTeams + Float(33)/(@matchHeight))*rh %>%" font-size="150%"
<% if @matches[i].teams[t-1] && !@results %>
onclick="chooseWinner(<%= @matches[i].id%>, <%= @matches[i].teams[t-1].id %>)"
<% end %>
>
<% if @matches[i].teams[t-1] %>
Team <%= @matches[i].teams[t-1].id %>
<% end %>
</text>
<% if (t < @numTeams) %>
<text x="<%= rx + 1.3*rw/3 %>%" y="<%= ry + (Float(t)/@numTeams)*rh + 1%>%" font-size="150%"> VS </text>
<% end %>
<% t = t + 1 %>
<% end %>
<% if i > 1 %>
<% parent = (i+@logBase-2)/@logBase
pDepth = Math.log(parent*(@logBase-1), @logBase).floor+1
lastrx = 50/(@depth+1) + 100/(@depth+1)*(@depth-pDepth)
lastry = 100/(@logBase**(pDepth-1)+1) * (parent-@pBase+1) - rh/2 %>
<line x1="<%= rx+rw %>%" y1="<%= ry+rh/2 %>%" x2="<%= lastrx%>%" y2="<%= lastry+rh/2%>%" stroke="white" stroke-width="2" >
<% end %>
</g>
<% end %>
</SVG>
<%= form_tag(tournament_bracket_path(@tournament, @bracket), method: 'put') do %>
<input type="hidden" name="update_action" value="predict">
<% for i in 1..@matches.length %>
<%= hidden_field_tag("bracket[matches][#{@matches[i].id.to_s}]", value = nil) %>
<% end %>
<%= submit_tag("Submit Prediction", disabled: true, id: "bracket-submit") %>
<% end %>
<%= link_to 'Back', tournaments_path %>
|
