Skip to content

Commit 1894903

Browse files
BulletdevBulletdev
committed
fix: solve matchs display issue
1 parent d182976 commit 1894903

7 files changed

Lines changed: 286 additions & 181 deletions

File tree

‎app/controllers/cup_controller.rb‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -32,6 +32,16 @@ def draft
3232
.transform_values { |records| records.map { |r| r["Team"] }.uniq.join(",") }
3333
end
3434

35+
def game_scoreboard
36+
unique_game = params[:id]
37+
@game = @games.find { |g| g["UniqueGame"] == unique_game }
38+
return render plain: "", status: :not_found unless @game
39+
@players = db_players.select { |p| p["UniqueGame"] == unique_game }
40+
.sort_by { |p| ROLE_ORDER.index(p["Role"]&.downcase) || 99 }
41+
@t1 = @game["Team1"]
42+
@t2 = @game["Team2"]
43+
end
44+
3545
def champions
3646
set_meta_tags(title: "Campeões — Kings Lendas Cup")
3747
@sort_by = params[:sort] || "picks"

‎app/javascript/controllers/match_accordion_controller.js‎

Lines changed: 19 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -4,20 +4,33 @@ export default class extends Controller {
44
static targets = ["content", "icon"]
55

66
toggle(event) {
7-
// Don't toggle if clicking links inside
87
if (event.target.closest("a, button")) return
98

9+
const opening = this.contentTarget.classList.contains("hidden")
10+
11+
// Close all other open accordions
12+
if (opening) {
13+
document.querySelectorAll("[data-controller~='match-accordion']").forEach(el => {
14+
if (el === this.element) return
15+
const content = el.querySelector("[data-match-accordion-target='content']")
16+
const icon = el.querySelector("[data-match-accordion-target='icon']")
17+
if (content && !content.classList.contains("hidden")) {
18+
content.classList.add("hidden")
19+
if (icon) icon.textContent = "▼"
20+
}
21+
})
22+
}
23+
1024
const isHidden = this.contentTarget.classList.toggle("hidden")
1125
if (this.hasIconTarget) {
1226
this.iconTarget.textContent = isHidden ? "▼" : "▲"
1327
}
1428

15-
// Lazy load turbo frame if first expand
29+
// Lazy load turbo frame on first expand
1630
if (!isHidden) {
17-
const frame = this.contentTarget.querySelector("turbo-frame[data-lazy-src]")
18-
if (frame && !frame.src) {
19-
frame.src = frame.dataset.lazySrc
20-
}
31+
this.contentTarget.querySelectorAll("turbo-frame[data-lazy-src]").forEach(frame => {
32+
if (!frame.src) frame.src = frame.dataset.lazySrc
33+
})
2134
}
2235
}
2336
}

‎app/views/cup/game_scoreboard.html.erb‎

Lines changed: 146 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,146 @@
1+
<%= turbo_frame_tag "scoreboard_#{params[:id]}" do %>
2+
<% t1_players = @players.select { |p| p["Team"] == @t1 } %>
3+
<% t2_players = @players.select { |p| p["Team"] == @t2 } %>
4+
<% winner = @game["Winner"].to_s %>
5+
6+
<% if @players.none? %>
7+
<div style="padding:20px;text-align:center;font-size:11px;color:rgba(255,255,255,0.3);font-family:Verdana,sans-serif">
8+
Dados detalhados não disponíveis ainda
9+
</div>
10+
<% else %>
11+
<!-- Header teams -->
12+
<div style="display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:10px 14px;border-bottom:1px solid rgba(200,155,60,0.15);background:rgba(0,0,0,0.2)">
13+
<div style="display:flex;align-items:center;gap:8px">
14+
<%= team_logo(@t1, size: 28) %>
15+
<span style="font-size:12px;font-weight:bold;font-family:Verdana,sans-serif;color:<%= winner == @t1 ? 'var(--color-kl-win)' : 'rgba(255,255,255,0.5)' %>"><%= team_abbr(@t1) %></span>
16+
<% if winner == @t1 %><span style="font-size:9px;color:var(--color-kl-win);font-family:Verdana,sans-serif;letter-spacing:0.1em">VITÓRIA</span><% end %>
17+
</div>
18+
<div style="text-align:center;padding:0 12px">
19+
<div style="display:flex;align-items:center;gap:8px">
20+
<span style="font-size:22px;font-weight:900;font-family:Verdana,sans-serif;color:<%= winner == @t1 ? 'var(--color-kl-win)' : 'rgba(255,255,255,0.25)' %>"><%= @game["Team1Kills"] %></span>
21+
<span style="color:rgba(255,255,255,0.15);font-size:14px">:</span>
22+
<span style="font-size:22px;font-weight:900;font-family:Verdana,sans-serif;color:<%= winner == @t2 ? 'var(--color-kl-win)' : 'rgba(255,255,255,0.25)' %>"><%= @game["Team2Kills"] %></span>
23+
</div>
24+
<div style="font-size:9px;color:rgba(255,255,255,0.3);font-family:Verdana,sans-serif;letter-spacing:0.08em"><%= format_game_duration(@game["Gamelength"]) %></div>
25+
</div>
26+
<div style="display:flex;align-items:center;justify-content:flex-end;gap:8px">
27+
<% if winner == @t2 %><span style="font-size:9px;color:var(--color-kl-win);font-family:Verdana,sans-serif;letter-spacing:0.1em">VITÓRIA</span><% end %>
28+
<span style="font-size:12px;font-weight:bold;font-family:Verdana,sans-serif;color:<%= winner == @t2 ? 'var(--color-kl-win)' : 'rgba(255,255,255,0.5)' %>"><%= team_abbr(@t2) %></span>
29+
<%= team_logo(@t2, size: 28) %>
30+
</div>
31+
</div>
32+
33+
<!-- Column headers -->
34+
<div style="display:grid;grid-template-columns:1fr 1fr;border-bottom:1px solid rgba(200,155,60,0.1)">
35+
<div style="padding:5px 12px;border-right:1px solid rgba(200,155,60,0.1)">
36+
<div style="display:grid;grid-template-columns:auto 1fr auto auto auto auto;gap:4px;align-items:center">
37+
<span></span>
38+
<span style="font-size:8px;color:rgba(255,255,255,0.25);font-family:Verdana,sans-serif;letter-spacing:0.08em">JOGADOR</span>
39+
<span style="font-size:8px;color:rgba(255,255,255,0.25);font-family:Verdana,sans-serif;text-align:center;min-width:42px">K/D/A</span>
40+
<span style="font-size:8px;color:rgba(255,255,255,0.25);font-family:Verdana,sans-serif;text-align:center;min-width:30px">CS</span>
41+
<span style="font-size:8px;color:rgba(255,255,255,0.25);font-family:Verdana,sans-serif;text-align:center;min-width:36px">GOLD</span>
42+
<span style="font-size:8px;color:rgba(255,255,255,0.25);font-family:Verdana,sans-serif;text-align:center;min-width:36px">DMG</span>
43+
</div>
44+
</div>
45+
<div style="padding:5px 12px">
46+
<div style="display:grid;grid-template-columns:auto auto 1fr auto auto auto;gap:4px;align-items:center">
47+
<span style="font-size:8px;color:rgba(255,255,255,0.25);font-family:Verdana,sans-serif;text-align:center;min-width:36px">DMG</span>
48+
<span style="font-size:8px;color:rgba(255,255,255,0.25);font-family:Verdana,sans-serif;text-align:center;min-width:36px">GOLD</span>
49+
<span style="font-size:8px;color:rgba(255,255,255,0.25);font-family:Verdana,sans-serif;text-align:center;min-width:30px">CS</span>
50+
<span style="font-size:8px;color:rgba(255,255,255,0.25);font-family:Verdana,sans-serif;text-align:center;min-width:42px">K/D/A</span>
51+
<span style="font-size:8px;color:rgba(255,255,255,0.25);font-family:Verdana,sans-serif">JOGADOR</span>
52+
<span></span>
53+
</div>
54+
</div>
55+
</div>
56+
57+
<!-- Player rows side by side -->
58+
<% max_rows = [t1_players.length, t2_players.length].max %>
59+
<% max_rows.times do |i| %>
60+
<% p1 = t1_players[i]; p2 = t2_players[i] %>
61+
<div style="display:grid;grid-template-columns:1fr 1fr;border-bottom:1px solid rgba(200,155,60,0.06)">
62+
63+
<!-- Team 1 player -->
64+
<div style="padding:7px 12px;border-right:1px solid rgba(200,155,60,0.1)">
65+
<% if p1 %>
66+
<% k1=p1["Kills"].to_i; d1=p1["Deaths"].to_i; a1=p1["Assists"].to_i %>
67+
<div style="display:grid;grid-template-columns:auto 1fr auto auto auto auto;gap:4px;align-items:center">
68+
<%= champion_icon(p1["Champion"], size: 30) %>
69+
<div style="min-width:0">
70+
<div style="font-size:11px;font-weight:bold;color:rgba(255,255,255,0.85);font-family:Verdana,sans-serif;white-space:nowrap;overflow:hidden;text-overflow:ellipsis"><%= p1["Link"] %></div>
71+
<div style="font-size:9px;color:rgba(255,255,255,0.35);font-family:Verdana,sans-serif"><%= p1["Champion"] %></div>
72+
</div>
73+
<div style="text-align:center;min-width:42px">
74+
<span style="font-size:11px;font-family:Verdana,sans-serif">
75+
<span style="color:var(--color-kl-win)"><%= k1 %></span><span style="color:rgba(255,255,255,0.2)">/</span><span style="color:var(--color-kl-loss)"><%= d1 %></span><span style="color:rgba(255,255,255,0.2)">/</span><span style="color:var(--retro-teal)"><%= a1 %></span>
76+
</span>
77+
</div>
78+
<div style="text-align:center;min-width:30px;font-size:11px;color:rgba(255,255,255,0.55);font-family:Verdana,sans-serif"><%= p1["CS"] %></div>
79+
<div style="text-align:center;min-width:36px;font-size:10px;color:var(--retro-gold-dim);font-family:Verdana,sans-serif"><%= number_to_human(p1["Gold"].to_i, units: { thousand: "k" }, precision: 1, significant: false, strip_insignificant_zeros: true) %></div>
80+
<div style="text-align:center;min-width:36px;font-size:10px;color:rgba(255,100,100,0.7);font-family:Verdana,sans-serif"><%= number_to_human(p1["DamageToChampions"].to_i, units: { thousand: "k" }, precision: 1, significant: false, strip_insignificant_zeros: true) %></div>
81+
</div>
82+
<% end %>
83+
</div>
84+
85+
<!-- Team 2 player (mirrored) -->
86+
<div style="padding:7px 12px">
87+
<% if p2 %>
88+
<% k2=p2["Kills"].to_i; d2=p2["Deaths"].to_i; a2=p2["Assists"].to_i %>
89+
<div style="display:grid;grid-template-columns:auto auto 1fr auto auto auto;gap:4px;align-items:center">
90+
<div style="text-align:center;min-width:36px;font-size:10px;color:rgba(255,100,100,0.7);font-family:Verdana,sans-serif"><%= number_to_human(p2["DamageToChampions"].to_i, units: { thousand: "k" }, precision: 1, significant: false, strip_insignificant_zeros: true) %></div>
91+
<div style="text-align:center;min-width:36px;font-size:10px;color:var(--retro-gold-dim);font-family:Verdana,sans-serif"><%= number_to_human(p2["Gold"].to_i, units: { thousand: "k" }, precision: 1, significant: false, strip_insignificant_zeros: true) %></div>
92+
<div style="text-align:center;min-width:30px;font-size:11px;color:rgba(255,255,255,0.55);font-family:Verdana,sans-serif"><%= p2["CS"] %></div>
93+
<div style="text-align:center;min-width:42px">
94+
<span style="font-size:11px;font-family:Verdana,sans-serif">
95+
<span style="color:var(--color-kl-win)"><%= k2 %></span><span style="color:rgba(255,255,255,0.2)">/</span><span style="color:var(--color-kl-loss)"><%= d2 %></span><span style="color:rgba(255,255,255,0.2)">/</span><span style="color:var(--retro-teal)"><%= a2 %></span>
96+
</span>
97+
</div>
98+
<div style="min-width:0;text-align:right">
99+
<div style="font-size:11px;font-weight:bold;color:rgba(255,255,255,0.85);font-family:Verdana,sans-serif;white-space:nowrap;overflow:hidden;text-overflow:ellipsis"><%= p2["Link"] %></div>
100+
<div style="font-size:9px;color:rgba(255,255,255,0.35);font-family:Verdana,sans-serif"><%= p2["Champion"] %></div>
101+
</div>
102+
<%= champion_icon(p2["Champion"], size: 30) %>
103+
</div>
104+
<% end %>
105+
</div>
106+
107+
</div>
108+
<% end %>
109+
110+
<!-- Picks & Bans -->
111+
<% picks1 = @game["Team1Picks"].to_s.split(",").map(&:strip) %>
112+
<% picks2 = @game["Team2Picks"].to_s.split(",").map(&:strip) %>
113+
<% bans1 = @game["Team1Bans"].to_s.split(",").map(&:strip) %>
114+
<% bans2 = @game["Team2Bans"].to_s.split(",").map(&:strip) %>
115+
<% if bans1.any? || bans2.any? %>
116+
<div style="padding:8px 14px;border-top:1px solid rgba(200,155,60,0.12);display:grid;grid-template-columns:1fr 1fr;gap:12px">
117+
<div>
118+
<div style="font-size:8px;color:rgba(255,255,255,0.25);font-family:Verdana,sans-serif;letter-spacing:0.08em;margin-bottom:4px">BANS <%= team_abbr(@t1) %></div>
119+
<div style="display:flex;gap:3px;flex-wrap:wrap">
120+
<% bans1.each do |champ| %>
121+
<div style="position:relative">
122+
<%= champion_icon(champ, size: 26, css_class: "opacity-50 grayscale") %>
123+
<div style="position:absolute;inset:0;display:flex;align-items:center;justify-content:center">
124+
<div style="width:100%;height:1px;background:#ef4444;transform:rotate(45deg);position:absolute"></div>
125+
</div>
126+
</div>
127+
<% end %>
128+
</div>
129+
</div>
130+
<div style="text-align:right">
131+
<div style="font-size:8px;color:rgba(255,255,255,0.25);font-family:Verdana,sans-serif;letter-spacing:0.08em;margin-bottom:4px">BANS <%= team_abbr(@t2) %></div>
132+
<div style="display:flex;gap:3px;flex-wrap:wrap;justify-content:flex-end">
133+
<% bans2.each do |champ| %>
134+
<div style="position:relative">
135+
<%= champion_icon(champ, size: 26, css_class: "opacity-50 grayscale") %>
136+
<div style="position:absolute;inset:0;display:flex;align-items:center;justify-content:center">
137+
<div style="width:100%;height:1px;background:#ef4444;transform:rotate(45deg);position:absolute"></div>
138+
</div>
139+
</div>
140+
<% end %>
141+
</div>
142+
</div>
143+
</div>
144+
<% end %>
145+
<% end %>
146+
<% end %>

‎app/views/cup/matches.html.erb‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,7 @@
3434
(g["Team1"] == t1 && g["Team2"] == t2) ||
3535
(g["Team1"] == t2 && g["Team2"] == t1)
3636
} %>
37-
<%= render "shared/match_card", match: match, games: match_games, show_expand: match_games.any? %>
37+
<%= render "shared/match_card", match: match, games: match_games, show_expand: match["Winner"].present? %>
3838
<% end %>
3939
</div>
4040
</div>

‎app/views/cup/results.html.erb‎

Lines changed: 12 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -19,49 +19,42 @@
1919
<table style="width:100%;border-collapse:collapse">
2020
<thead>
2121
<tr style="border-bottom:1px solid var(--retro-gold-dim)">
22-
<th class="retro-table-head" style="text-align:center;width:28px">#</th>
22+
<th class="retro-table-head" style="text-align:center;width:24px">#</th>
2323
<th class="retro-table-head" style="text-align:left">Time</th>
24-
<th class="retro-table-head" style="text-align:center">V-D</th>
24+
<th class="retro-table-head" style="text-align:center;white-space:nowrap">V-D</th>
2525
<th class="retro-table-head" style="text-align:center">WR%</th>
26-
<th class="retro-table-head" style="text-align:center">Str</th>
2726
</tr>
2827
</thead>
2928
<tbody>
3029
<% @standings.each_with_index do |row, idx| %>
3130
<% zone_color = idx < 2 ? 'var(--retro-gold)' : (idx < 4 ? 'var(--retro-teal)' : 'rgba(255,255,255,0.2)') %>
3231
<tr class="retro-table-row" style="border-bottom:1px solid rgba(200,155,60,0.08)">
33-
<td style="padding:10px 8px;text-align:center">
34-
<div style="display:flex;align-items:center;gap:4px;justify-content:center">
32+
<td style="padding:8px 4px;text-align:center">
33+
<div style="display:flex;align-items:center;gap:3px;justify-content:center">
3534
<span style="font-size:12px;font-weight:bold;color:<%= zone_color %>;font-family:Verdana,sans-serif"><%= idx + 1 %></span>
36-
<span style="width:2px;height:14px;background:<%= zone_color %>;opacity:0.6;flex-shrink:0"></span>
35+
<span style="width:2px;height:12px;background:<%= zone_color %>;opacity:0.6;flex-shrink:0"></span>
3736
</div>
3837
</td>
39-
<td style="padding:10px 8px 10px 0">
40-
<%= link_to team_path(team_slug(row["Team"])), style: "display:flex;align-items:center;gap:6px;text-decoration:none",
38+
<td style="padding:8px 4px 8px 0">
39+
<%= link_to team_path(team_slug(row["Team"])), style: "display:flex;align-items:center;gap:5px;text-decoration:none",
4140
onmouseover: "this.querySelector('span').style.color='var(--retro-gold)'",
4241
onmouseout: "this.querySelector('span').style.color='rgba(255,255,255,0.8)'" do %>
43-
<%= team_logo(row["Team"], size: 22) %>
44-
<span style="font-size:12px;font-weight:bold;color:rgba(255,255,255,0.8);font-family:Verdana,sans-serif;transition:color 0.15s;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:110px"><%= row["Team"] %></span>
42+
<%= team_logo(row["Team"], size: 18) %>
43+
<span style="font-size:11px;font-weight:bold;color:rgba(255,255,255,0.8);font-family:Verdana,sans-serif;transition:color 0.15s;overflow:hidden;text-overflow:ellipsis;white-space:nowrap"><%= team_abbr(row["Team"]) %></span>
4544
<% end %>
4645
</td>
47-
<td style="padding:10px 8px;text-align:center;white-space:nowrap">
46+
<td style="padding:8px 4px;text-align:center;white-space:nowrap">
4847
<span style="font-size:13px;font-weight:bold;color:var(--color-kl-win);font-family:Verdana,sans-serif"><%= row["Wins"] %></span>
49-
<span style="color:rgba(255,255,255,0.2);font-size:12px;margin:0 2px">-</span>
48+
<span style="color:rgba(255,255,255,0.2);font-size:12px;margin:0 1px">-</span>
5049
<span style="font-size:13px;font-weight:bold;color:var(--color-kl-loss);font-family:Verdana,sans-serif"><%= row["Losses"] %></span>
5150
</td>
52-
<td style="padding:10px 8px;text-align:center">
51+
<td style="padding:8px 4px;text-align:center">
5352
<% wins = row["Wins"].to_i; losses = row["Losses"].to_i; total = wins + losses %>
5453
<% pct = total.zero? ? 0 : (wins.to_f / total * 100).round %>
5554
<span style="font-size:12px;font-weight:bold;font-family:Verdana,sans-serif;color:<%= pct >= 60 ? 'var(--color-kl-win)' : (pct >= 40 ? 'rgba(255,255,255,0.6)' : 'var(--color-kl-loss)') %>">
5655
<%= pct %>%
5756
</span>
5857
</td>
59-
<td style="padding:10px 8px;text-align:center">
60-
<% str = @streak_map[row["Team"]] %>
61-
<span class="retro-status" style="font-size:9px;color:<%= str.to_s.end_with?('W') ? 'var(--color-kl-win)' : (str.to_s.end_with?('L') ? 'var(--color-kl-loss)' : 'rgba(255,255,255,0.3)') %>;border-color:<%= str.to_s.end_with?('W') ? 'var(--color-kl-win)' : (str.to_s.end_with?('L') ? 'var(--color-kl-loss)' : 'rgba(255,255,255,0.15)') %>">
62-
<%= str %>
63-
</span>
64-
</td>
6558
</tr>
6659
<% end %>
6760
</tbody>

0 commit comments

Comments
 (0)