gameNoLineup.ejs

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.3.0/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
    <link rel="stylesheet" href="/stylesheets/campo.css">
    <link rel="stylesheet" href="/stylesheets/game.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/2.9.2/umd/popper.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.3.0/js/bootstrap.min.js"></script>
    <title>Formazioni</title>
</head>
<body>

<!-- Navbar -->
<nav class="navbar navbar-expand-sm sticky-top">
    <div class="container-fluid">
        <a class="navbar-brand" href="#">Football Miners</a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"
                aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarNav">
            <ul class="navbar-nav ms-auto">
                <li class="nav-item">
                    <a href="/home" class="nav-link" >Home</a> <!-- NB che in questo modo non ritorno in cima ogni volta che premo ma è da rifinire sicuramente più avanti-->
                </li>

                <li class="nav-item">
                    <a class="nav-link" href="/competitions">Competitions</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Chat</a>
                </li>


            </ul>
        </div>
    </div>
</nav>

<!-- Custom Divider 1-->
<div class="custom-divider"></div>

<div class="football-career-heading3">
    <div class="left-text">
        <h2><strong>Aggregate</strong></h2>
        <h3 class="stadium-data">
            <%= gameData[0].stadium %>
            <% if (gameData[0].attendance !== '\\N') { %>
                , Attendance: <%= gameData[0].attendance %>
            <% } %>
        </h3>
    </div>
</div>

<div class="result-Div2">
    <div class="game-info">
        <h3 class="round"></strong> <%= gameData[0].round %></h3>
    </div>
    <div class="header-row">
        <div class="season">
            <h3><%= gameData[0].season %></h3>
        </div>
        <div class="competition-logo2">
            <img src="https://tmssl.akamaized.net/images/logo/header/<%= gameData[0].competition_id.toLowerCase() %>.png" alt="Logo Competizione">
        </div>
        <div class="date">
            <h3><%= gameData[0].date %></h3>
            <h3 class="stadium">Ref: <%= gameData[0].referee %></h3>
        </div>
    </div>
    <div class="match-details2">
        <div class="home-team2">
            <img src="https://tmssl.akamaized.net/images/wappen/head/<%= gameData[0].home_club_id %>.png" alt="<%= gameData[0].home_club_name %> Logo">
            <h3 class="team-result-style"><%= gameData[0].home_club_name %></h3>
        </div>
        <div class="score2">
            <p><%= gameData[0].home_club_goals %> - <%= gameData[0].away_club_goals %></p>
        </div>
        <div class="away-team2">
            <img src="https://tmssl.akamaized.net/images/wappen/head/<%= gameData[0].away_club_id %>.png" alt="<%= gameData[0].away_club_name %> Logo">
            <h3 class="team-result-style"><%= gameData[0].away_club_name %></h3>
        </div>
    </div>
</div>

<!-- Custom Divider 2-->
<div class="custom-divider"></div>

<div class="football-career-heading2">
    <h2><strong>Highlights</strong></h2>
</div>


<div class="crono-container">
    <div id="events" class="events-container">
        <!-- Loop through all regular events (non-shootout) -->
        <% for (let i = 0; i < events.length; i++) { %>
            <% const event = events[i]; %>
            <% if (event.type !== 'Shootout') { %>
                <div class="event <%= event.club_id != gameData[0].home_club_id ? 'home-event' : 'away-event' %>">
                    <% if (event.club_id != gameData[0].home_club_id) { %>
                        <!-- Home team event -->
                        <div class="home-part"></div>
                    <% } %>
                    <div class="event-data">
                        <span class="event-info"><%= event.minute !== -1 ? event.minute + "'" : "Overtime" %></span>
                        <% if (event.type === 'Cards') { %>
                            <% if (event.description.startsWith('Red')) { %>
                                <img src="https://www.iconpacks.net/icons/1/free-red-card-icon-460-thumb.png" alt="Red Card Icon" style="width: 10%;">
                                <span class="event-info"><a href="/player/<%= event.player_id %>"><strong><%= event.player_name %></strong></a></span>
                            <% } else if (event.description.startsWith('Second yellow')) { %>
                                <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/7/74/Yellow_Red_Card.svg/1200px-Yellow_Red_Card.svg.png" alt="Second Yellow Card Icon" style="width: 5%;">
                                <span class="event-info"><a href="/player/<%= event.player_id %>"><strong><%= event.player_name %></strong></a></span>
                            <% } else if (event.description.match(/^\d+\.\sYellow card/) || event.description.startsWith('Yellow')) { %>
                                <img src="https://cdn-icons-png.flaticon.com/512/4768/4768720.png" alt="Yellow Card Icon" style="width: 10%;">
                                <span class="event-info"><a href="/player/<%= event.player_id %>"><strong><%= event.player_name %></strong></a></span>
                            <% } %>
                        <% } else if (event.type === 'Substitutions') { %>
                            <img src="https://icon-library.com/images/substitute-icon/substitute-icon-24.jpg" alt="Substitution Icon" style="width: 10%;">

                            <span class="event-info substitution-in" style="color: green;"><a href="/player/<%= event.player_id %>"><strong><%= event.player_in_name %></strong></a></span>
                            <span class="event-info substitution-out" style="color: red;"><a href="/player/<%= event.player_id %>"><%= event.player_name %></a></span>
                        <% } else if (event.type === 'Goals') { %>
                            <img src="https://www.iconpacks.net/icons/1/free-goal-icon-491-thumb.png" alt="Goal Icon" style="width: 10%;">
                            <span class="event-info"><a href="/player/<%= event.player_id %>"><strong><%= event.player_name %></strong></a></span>
                            <% if (event.player_assist_id !== '\\N') { %>
                                <span class="event-info assist"><a href="/player/<%= event.player_id %>">[<%= event.player_assist_name %>]</a></span>
                                <img src="https://content.fantacalcio.it/web/img/live_ico/2021/assist.png" alt="Assist Icon" class="assist-icon">
                            <% } %>

                        <% } %>
                    </div>
                    <% if (event.club_id == gameData[0].home_club_id) { %>
                        <!-- Away team event -->
                        <div class="away-part"></div>
                    <% } %>
                </div>
            <% } %>
        <% } %>

        <!-- Loop through shootout events -->
        <% for (let i = 0; i < events.length; i++) { %>
            <% const event = events[i]; %>
            <% if (event.type === 'Shootout') { %>
                <div class="event <%= event.club_id != gameData[0].home_club_id ? 'home-event' : 'away-event' %>">
                    <% if (event.club_id != gameData[0].home_club_id) { %>
                        <!-- Home team event -->
                        <div class="home-part"></div>
                    <% } %>
                    <div class="event-data">
                        <% if (event.description.startsWith(', Scored')) { %>
                            <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRff2r0a6uXruRXWtiZtiE6TDBsqWN5K3Y-PCWNGHzq5AzKWmOEbI9zzoaMaBTqKL3B6dk&usqp=CAU" alt="Scored goal icon" style="width: 12%;">
                            <span class="event-info"><strong><%= event.player_name %></strong></span>
                        <% } else if (event.description.startsWith(', Missed')) { %>
                            <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/1f/Missed_penalty_icon.svg/1024px-Missed_penalty_icon.svg.png" alt="Missed penalty" style="width: 5%;">
                            <span class="event-info"><strong><%= event.player_name %></strong></span>
                        <% } else if (event.description.startsWith(', Saved')) { %>
                            <img src="https://cdn-icons-png.flaticon.com/256/12137/12137119.png" alt="Saved goal icon" style="width: 10%;">
                            <span class="event-info"><strong><%= event.player_name %></strong></span>
                        <% } %>
                    </div>
                    <% if (event.club_id == gameData[0].home_club_id) { %>
                        <!-- Away team event -->
                        <div class="away-part"></div>
                    <% } %>
                </div>
            <% } %>
        <% } %>
    </div>

</div>


</body>
</html>