mirror of
https://github.com/jcwimer/wrestlingApp
synced 2026-03-24 17:04:43 +00:00
86 lines
2.6 KiB
Plaintext
86 lines
2.6 KiB
Plaintext
<h1>Spectating Match: Bout <%= @match.bout_number %></h1>
|
|
<h2><%= @match.weight.max %> lbs</h2>
|
|
<h3><%= @tournament.name %></h3>
|
|
|
|
<div data-controller="match-spectate"
|
|
data-match-spectate-match-id-value="<%= @match.id %>">
|
|
|
|
<div id="cable-status-indicator"
|
|
data-match-spectate-target="statusIndicator"
|
|
class="alert alert-secondary"
|
|
style="padding: 5px; margin-bottom: 10px; border-radius: 4px;"></div>
|
|
|
|
<div class="match-details">
|
|
<div class="wrestler-info wrestler1">
|
|
<h4><%= @wrestler1_name %> (<%= @wrestler1_school_name %>)</h4>
|
|
<div class="stats">
|
|
<strong>Stats:</strong>
|
|
<pre data-match-spectate-target="w1Stats"><%= @match.w1_stat %></pre>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="wrestler-info wrestler2">
|
|
<h4><%= @wrestler2_name %> (<%= @wrestler2_school_name %>)</h4>
|
|
<div class="stats">
|
|
<strong>Stats:</strong>
|
|
<pre data-match-spectate-target="w2Stats"><%= @match.w2_stat %></pre>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="match-result">
|
|
<h4>Result</h4>
|
|
<p><strong>Winner:</strong> <span data-match-spectate-target="winner"><%= @match.winner_id ? @match.winner.name : '-' %></span></p>
|
|
<p><strong>Win Type:</strong> <span data-match-spectate-target="winType"><%= @match.win_type || '-' %></span></p>
|
|
<p><strong>Score:</strong> <span data-match-spectate-target="score"><%= @match.score || '-' %></span></p>
|
|
<p><strong>Finished:</strong> <span data-match-spectate-target="finished"><%= @match.finished ? 'Yes' : 'No' %></span></p>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<style>
|
|
.match-details {
|
|
display: flex;
|
|
justify-content: space-around;
|
|
margin-top: 20px;
|
|
}
|
|
.wrestler-info {
|
|
border: 1px solid #ccc;
|
|
padding: 15px;
|
|
width: 40%;
|
|
}
|
|
.wrestler-info pre {
|
|
background-color: #f8f8f8;
|
|
border: 1px solid #eee;
|
|
padding: 10px;
|
|
white-space: pre-wrap; /* Allow text wrapping */
|
|
word-wrap: break-word; /* Break long words */
|
|
max-height: 300px; /* Optional: limit height */
|
|
overflow-y: auto; /* Optional: add scroll if needed */
|
|
}
|
|
.match-result {
|
|
border: 1px solid #ccc;
|
|
padding: 15px;
|
|
width: 15%;
|
|
}
|
|
.match-result span {
|
|
font-weight: normal;
|
|
}
|
|
/* REMOVE Status Indicator Background Styles
|
|
#cable-status-indicator {
|
|
transition: background-color 0.5s ease, color 0.5s ease;
|
|
}
|
|
#cable-status-indicator.status-connecting {
|
|
background-color: #ffc107;
|
|
color: #333;
|
|
}
|
|
#cable-status-indicator.status-connected {
|
|
background-color: #28a745;
|
|
color: white;
|
|
}
|
|
#cable-status-indicator.status-disconnected {
|
|
background-color: #dc3545;
|
|
color: white;
|
|
}
|
|
*/
|
|
</style> |