Skip to content

Commit 7a3e341

Browse files
BulletdevBulletdev
committed
feat: implement retro ui into matches
1 parent 0e44b6c commit 7a3e341

3 files changed

Lines changed: 85 additions & 60 deletions

File tree

‎app/controllers/teams_controller.rb‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ def index
55
set_meta_tags(title: "Times — Kings Lendas Cup")
66
@teams = TEAMS_DATA.select { |_, v| v.key?(:captain) }
77
schedule = db_schedule
8+
@standings = leaguepedia.standings_from_schedule(schedule)
89
@records = build_records(schedule)
910
end
1011

‎app/views/shared/_match_card.html.erb‎

Lines changed: 31 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -11,24 +11,32 @@
1111
<% t2_score = match["Team2Score"].to_i %>
1212
<% best_of = match["BestOf"].to_i %>
1313

14-
<div style="border:1px solid var(--retro-gold-dim);background:var(--retro-card);position:relative"
14+
<div style="border:1px solid var(--retro-gold-dim);background:var(--retro-card);position:relative;overflow:hidden"
1515
<% if show_expand && match_games.any? %>data-controller="match-accordion"<% end %>>
16+
<div class="retro-corners"></div>
1617

17-
<!-- Match header -->
18-
<div style="padding:14px 16px<%= ';cursor:pointer' if show_expand && match_games.any? %>"
19-
<% if show_expand && match_games.any? %>data-action="click->match-accordion#toggle"<% end %>>
20-
<div style="display:flex;align-items:center;gap:8px;margin-bottom:10px">
21-
<% if match["Phase"].present? %>
22-
<span class="retro-status" style="color:var(--retro-teal);border-color:var(--retro-teal);font-size:9px">
23-
<%= phase_label(match["Phase"]) %>
24-
</span>
25-
<% end %>
26-
<span style="font-size:10px;color:rgba(255,255,255,0.3);font-family:Verdana,sans-serif">Bo<%= best_of > 0 ? best_of : 1 %></span>
27-
<span style="margin-left:auto;font-size:10px;color:rgba(255,255,255,0.3);font-family:Verdana,sans-serif"><%= format_datetime_brt(dt) %> BRT</span>
18+
<!-- Gold top bar -->
19+
<div style="height:2px;background:linear-gradient(to right,var(--retro-gold),transparent)"></div>
20+
21+
<!-- Panel header -->
22+
<div style="padding:5px 12px;border-bottom:1px solid var(--retro-gold-dim);display:flex;align-items:center;justify-content:space-between;background:rgba(200,155,60,0.04)">
23+
<span style="font-size:9px;letter-spacing:0.12em;color:var(--retro-gold-dim);font-family:Verdana,sans-serif;text-transform:uppercase">
24+
// <%= played ? "RESULTADO" : "PARTIDA" %><% if match["Phase"].present? %> ◆ <%= phase_label(match["Phase"]).upcase %><% end %>
25+
</span>
26+
<div style="display:flex;align-items:center;gap:8px">
27+
<span style="font-size:9px;color:rgba(255,255,255,0.25);font-family:Verdana,sans-serif">Bo<%= best_of > 0 ? best_of : 1 %></span>
2828
<% if show_expand && match_games.any? %>
29-
<span style="color:rgba(255,255,255,0.35);font-size:12px" data-match-accordion-target="icon">▼</span>
29+
<span style="color:var(--retro-gold-dim);font-size:11px" data-match-accordion-target="icon">▼</span>
3030
<% end %>
3131
</div>
32+
</div>
33+
34+
<!-- Match body -->
35+
<div style="padding:14px 16px<%= ';cursor:pointer' if show_expand && match_games.any? %>"
36+
<% if show_expand && match_games.any? %>data-action="click->match-accordion#toggle"<% end %>>
37+
<div style="display:flex;align-items:center;justify-content:flex-end;margin-bottom:10px">
38+
<span style="font-size:10px;color:rgba(255,255,255,0.3);font-family:Verdana,sans-serif"><%= format_datetime_brt(dt) %> BRT</span>
39+
</div>
3240

3341
<!-- Teams row -->
3442
<div style="display:flex;align-items:center;gap:16px">
@@ -152,4 +160,14 @@
152160
<% end %>
153161
</div>
154162
<% end %>
163+
164+
<!-- Footer strip -->
165+
<div style="height:16px;background:linear-gradient(to right,var(--retro-blue),var(--retro-bg));border-top:1px solid var(--retro-gold-dim);display:flex;align-items:center;padding:0 10px;justify-content:space-between">
166+
<span style="font-size:8px;letter-spacing:0.1em;color:rgba(200,155,60,0.4);font-family:Verdana,sans-serif">KINGS LENDAS CUP 2026</span>
167+
<% if played %>
168+
<span style="font-size:8px;color:rgba(255,255,255,0.2);font-family:Verdana,sans-serif">
169+
<span style="color:var(--color-kl-win)"><%= team_abbr(winner) %></span> VENCEU
170+
</span>
171+
<% end %>
172+
</div>
155173
</div>

‎app/views/teams/index.html.erb‎

Lines changed: 53 additions & 47 deletions
Original file line numberDiff line numberDiff line change
@@ -6,64 +6,70 @@
66

77
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
88
<% TEAMS_DATA.select { |_, v| v.key?(:captain) }.each do |name, data| %>
9-
<% standing = @standings.find { |s| s["Team"] == name } %>
10-
<% wins = standing&.dig("Wins").to_i; losses = standing&.dig("Losses").to_i %>
11-
<%= link_to team_path(data[:slug]),
12-
style: "display:block;border:1px solid var(--retro-gold-dim);background:var(--retro-card);padding:20px;text-decoration:none;position:relative;transition:border-color 0.15s",
13-
onmouseover: "this.style.borderColor='var(--retro-gold)'",
14-
onmouseout: "this.style.borderColor='var(--retro-gold-dim)'" do %>
15-
<div style="height:2px;background:linear-gradient(to right,<%= data[:color] %>,transparent);margin-bottom:14px"></div>
9+
<% standing = @standings&.find { |s| s["Team"] == name } %>
10+
<% wins = standing&.dig("Wins").to_i || 0; losses = standing&.dig("Losses").to_i || 0 %>
11+
<div style="border:1px solid var(--retro-gold-dim);background:var(--retro-card);position:relative;overflow:hidden;transition:border-color 0.15s"
12+
onmouseover="this.style.borderColor='var(--retro-gold)'"
13+
onmouseout="this.style.borderColor='var(--retro-gold-dim)'">
1614
<div class="retro-corners"></div>
1715

18-
<!-- Team header -->
19-
<div style="display:flex;align-items:center;gap:12px;margin-bottom:14px">
20-
<%= team_logo(name, size: 56) %>
21-
<div>
22-
<div style="display:flex;align-items:center;gap:6px;flex-wrap:wrap">
23-
<span style="font-size:18px;font-weight:bold;color:rgba(255,255,255,0.9);font-family:Verdana,sans-serif"><%= data[:abbr] %></span>
24-
<span class="retro-status" style="font-size:9px;color:rgba(255,255,255,0.4);border-color:rgba(255,255,255,0.15)"><%= data[:parody_of] %></span>
25-
</div>
26-
<div style="font-size:11px;color:rgba(255,255,255,0.5);font-family:Verdana,sans-serif;margin-top:2px"><%= name %></div>
27-
<div style="font-size:10px;font-family:Verdana,sans-serif;margin-top:3px">
28-
Cap: <span style="color:var(--retro-gold)"><%= data[:captain] %></span>
29-
</div>
30-
</div>
16+
<!-- Panel header -->
17+
<div style="height:2px;background:linear-gradient(to right,<%= data[:color] %>,transparent)"></div>
18+
<div style="padding:6px 12px;border-bottom:1px solid var(--retro-gold-dim);display:flex;align-items:center;justify-content:space-between;background:rgba(200,155,60,0.04)">
19+
<span style="font-size:9px;letter-spacing:0.12em;color:var(--retro-gold-dim);font-family:Verdana,sans-serif;text-transform:uppercase">// TIME</span>
20+
<span class="retro-status" style="font-size:9px;color:rgba(255,255,255,0.3);border-color:rgba(255,255,255,0.1)"><%= data[:parody_of] %></span>
3121
</div>
3222

33-
<!-- Record -->
34-
<% if wins + losses > 0 %>
35-
<div style="display:flex;gap:8px;margin-bottom:12px">
36-
<div style="flex:1;text-align:center;padding:8px 4px;border:1px solid rgba(0,211,100,0.2);background:rgba(0,211,100,0.06)">
37-
<div style="font-size:20px;font-weight:bold;color:var(--color-kl-win);font-family:Verdana,sans-serif"><%= wins %></div>
38-
<div style="font-size:9px;color:rgba(255,255,255,0.35);font-family:Verdana,sans-serif;letter-spacing:0.1em">VITÓRIAS</div>
39-
</div>
40-
<div style="flex:1;text-align:center;padding:8px 4px;border:1px solid rgba(255,68,68,0.2);background:rgba(255,68,68,0.06)">
41-
<div style="font-size:20px;font-weight:bold;color:var(--color-kl-loss);font-family:Verdana,sans-serif"><%= losses %></div>
42-
<div style="font-size:9px;color:rgba(255,255,255,0.35);font-family:Verdana,sans-serif;letter-spacing:0.1em">DERROTAS</div>
43-
</div>
44-
<div style="flex:1;text-align:center;padding:8px 4px;border:1px solid rgba(255,255,255,0.1);background:rgba(255,255,255,0.03)">
45-
<div style="font-size:20px;font-weight:bold;color:rgba(255,255,255,0.8);font-family:Verdana,sans-serif"><%= (wins.to_f / (wins + losses) * 100).round %>%</div>
46-
<div style="font-size:9px;color:rgba(255,255,255,0.35);font-family:Verdana,sans-serif;letter-spacing:0.1em">WIN%</div>
23+
<%= link_to team_path(data[:slug]), style: "display:block;padding:16px;text-decoration:none" do %>
24+
<!-- Team header -->
25+
<div style="display:flex;align-items:center;gap:12px;margin-bottom:14px">
26+
<%= team_logo(name, size: 56) %>
27+
<div>
28+
<span style="font-size:20px;font-weight:bold;color:rgba(255,255,255,0.9);font-family:Verdana,sans-serif;display:block"><%= data[:abbr] %></span>
29+
<span style="font-size:11px;color:rgba(255,255,255,0.45);font-family:Verdana,sans-serif;display:block;margin-top:1px"><%= name %></span>
30+
<span style="font-size:10px;font-family:Verdana,sans-serif;margin-top:3px;display:block">
31+
Cap: <span style="color:var(--retro-gold)"><%= data[:captain] %></span>
32+
</span>
4733
</div>
4834
</div>
49-
<% end %>
5035

51-
<!-- Roster preview -->
52-
<div style="border-top:1px solid rgba(200,155,60,0.12);padding-top:10px">
53-
<% data[:roster]&.reject { |m| m[:role] == "coach" }&.first(5)&.each do |member| %>
54-
<div style="display:flex;align-items:center;gap:8px;padding:3px 0">
55-
<span style="font-size:9px;color:rgba(255,255,255,0.25);font-family:Verdana,sans-serif;text-transform:uppercase;width:40px;text-align:right"><%= member[:role] %></span>
56-
<div style="width:4px;height:4px;border-radius:50%;background:<%= data[:color] %>;flex-shrink:0"></div>
57-
<span style="font-size:12px;color:rgba(255,255,255,0.7);font-family:Verdana,sans-serif"><%= member[:player] %></span>
58-
<% if member[:captain] %><span style="color:var(--retro-gold);font-size:11px">★</span><% end %>
36+
<!-- Record -->
37+
<% if wins + losses > 0 %>
38+
<div style="display:flex;gap:6px;margin-bottom:12px">
39+
<div style="flex:1;text-align:center;padding:8px 4px;border:1px solid rgba(0,211,100,0.2);background:rgba(0,211,100,0.06)">
40+
<div style="font-size:20px;font-weight:bold;color:var(--color-kl-win);font-family:Verdana,sans-serif"><%= wins %></div>
41+
<div style="font-size:9px;color:rgba(255,255,255,0.35);font-family:Verdana,sans-serif;letter-spacing:0.1em">VITÓRIAS</div>
42+
</div>
43+
<div style="flex:1;text-align:center;padding:8px 4px;border:1px solid rgba(255,68,68,0.2);background:rgba(255,68,68,0.06)">
44+
<div style="font-size:20px;font-weight:bold;color:var(--color-kl-loss);font-family:Verdana,sans-serif"><%= losses %></div>
45+
<div style="font-size:9px;color:rgba(255,255,255,0.35);font-family:Verdana,sans-serif;letter-spacing:0.1em">DERROTAS</div>
46+
</div>
47+
<div style="flex:1;text-align:center;padding:8px 4px;border:1px solid rgba(255,255,255,0.1);background:rgba(255,255,255,0.03)">
48+
<div style="font-size:20px;font-weight:bold;color:rgba(255,255,255,0.8);font-family:Verdana,sans-serif"><%= (wins.to_f / (wins + losses) * 100).round %>%</div>
49+
<div style="font-size:9px;color:rgba(255,255,255,0.35);font-family:Verdana,sans-serif;letter-spacing:0.1em">WIN%</div>
50+
</div>
5951
</div>
6052
<% end %>
61-
</div>
6253

63-
<div style="margin-top:12px;display:flex;justify-content:flex-end">
64-
<span style="font-size:10px;color:var(--retro-teal);letter-spacing:0.08em;font-family:Verdana,sans-serif">VER PERFIL COMPLETO →</span>
54+
<!-- Roster preview -->
55+
<div style="border-top:1px solid rgba(200,155,60,0.12);padding-top:10px">
56+
<% data[:roster]&.reject { |m| m[:role] == "coach" }&.first(5)&.each do |member| %>
57+
<div style="display:flex;align-items:center;gap:8px;padding:3px 0">
58+
<span style="font-size:9px;color:rgba(255,255,255,0.25);font-family:Verdana,sans-serif;text-transform:uppercase;width:40px;text-align:right"><%= member[:role] %></span>
59+
<div style="width:4px;height:4px;border-radius:50%;background:<%= data[:color] %>;flex-shrink:0"></div>
60+
<span style="font-size:12px;color:rgba(255,255,255,0.7);font-family:Verdana,sans-serif"><%= member[:player] %></span>
61+
<% if member[:captain] %><span style="color:var(--retro-gold);font-size:11px">★</span><% end %>
62+
</div>
63+
<% end %>
64+
</div>
65+
<% end %>
66+
67+
<!-- Panel footer -->
68+
<div style="height:18px;background:linear-gradient(to right,var(--retro-blue),var(--retro-bg));border-top:1px solid var(--retro-gold-dim);display:flex;align-items:center;justify-content:space-between;padding:0 10px">
69+
<span style="font-size:8px;letter-spacing:0.1em;color:rgba(200,155,60,0.5);font-family:Verdana,sans-serif">KINGS LENDAS CUP 2026</span>
70+
<span style="font-size:8px;color:var(--retro-teal);font-family:Verdana,sans-serif;letter-spacing:0.08em">VER PERFIL →</span>
6571
</div>
66-
<% end %>
72+
</div>
6773
<% end %>
6874
</div>
6975
</div>

0 commit comments

Comments
 (0)