This commit is contained in:
dominicjk
2024-04-15 11:04:16 -06:00
33 changed files with 1025 additions and 137 deletions

View File

@@ -0,0 +1,24 @@
<div class="container" id="club-page-body">
<!-- Container for all club information (logo, name, country, etc. ) <- top 100px -->
<div class="container" id="club-information-container">
<img id="club-logo" src="{{club.crest}}" alt="{{club.name}} Emblem">
<h1 id="club-title">{{club.name}}</h2>
<img id="club-flag" src="{{club.area.club_flag}}" alt="{{club.clubData.name}} Flag">
</div>
<!-- Container to display all stats for club <- bottom rest of the container -->
<div class="container" id="club-stats-container">
<!-- Container to display club table <- split 50% -->
<div class="container" id="club-players-container">
</div>
<!-- Container to display top scorers for club <- Split 50% -->
<div class="container" id="top-scorers-container">
</div>
</div>
</div>

View File

@@ -3,32 +3,32 @@
<div class="card-container">
<div class="row g-3" id="card-row">
<!-- 🇬🇧 Premier League -->
<a href="#" onclick="redirectToLeaguePage('Premier League')" class="card-link" id="league-card">
<a href="#" onclick="redirectToLeaguePage('2021')" class="card-link" id="league-card">
{{> homepage/league-card leagueName="Premier League" logo="./img/homepage/premier-league/icon.png" title="./img/homepage/premier-league/title.png"}}
</a>
<!-- 🇪🇸 La Liga -->
<a href="#" onclick="redirectToLeaguePage('La Liga')" class="card-link" id="league-card">
<a href="#" onclick="redirectToLeaguePage('2014')" class="card-link" id="league-card">
{{> homepage/league-card leagueName="La Liga" logo="./img/homepage/la-liga/icon.png" title="./img/homepage/la-liga/title.png"}}
</a>
<!-- 🇩🇪 Bundesliga -->
<a href="#" onclick="redirectToLeaguePage('Bundesliga')" class="card-link" id="league-card">
<a href="#" onclick="redirectToLeaguePage('2002')" class="card-link" id="league-card">
{{> homepage/league-card leagueName="Bundesliga" logo="./img/homepage/bundesliga/icon.png" title="./img/homepage/bundesliga/title.png"}}
</a>
<!-- 🇮🇹 Serie A -->
<a href="#" onclick="redirectToLeaguePage('Serie A')" class="card-link" id="league-card">
<a href="#" onclick="redirectToLeaguePage('2019')" class="card-link" id="league-card">
{{> homepage/league-card leagueName="Serie A" logo="./img/homepage/serie-a/icon.png" title="./img/homepage/serie-a/title.png"}}
</a>
<!-- 🇫🇷 Ligue 1 -->
<a href="#" onclick="redirectToLeaguePage('Ligue 1')" class="card-link" id="league-card">
<a href="#" onclick="redirectToLeaguePage('2015')" class="card-link" id="league-card">
{{> homepage/league-card leagueName="Ligue 1" logo="./img/homepage/ligue-1/icon.png" title="./img/homepage/ligue-1/title.png"}}
</a>
<!-- 🇧🇷 Brasileirao -->
<a href="#" onclick="redirectToLeaguePage('Brasileirao')" class="card-link" id="league-card">
<a href="#" onclick="redirectToLeaguePage('2013')" class="card-link" id="league-card">
{{> homepage/league-card leagueName="Brasileirao" logo="./img/homepage/brasileirao/icon.png" title="./img/homepage/brasileirao/title.png"}}
</a>

View File

@@ -1,22 +0,0 @@
<div class="container" id="league-page-body">
<!-- Container for all league information (logo, name, country, etc. ) <- top 100px -->
<div class="container" id="league-information-container">
</div>
<!-- Container to display all stats for league <- bottom rest of the container -->
<div class="container" id="league-stats-container">
<!-- Container to display league table <- split 50% -->
<div class="container" id="league-table-container">
</div>
<!-- Container to display top scorers for league <- Split 50% -->
<div class="container" id="top-scorers-container">
</div>
</div>
</div>

View File

@@ -0,0 +1,89 @@
<div id="league-page-body" class="page-container">
<!-- Container for all league information (logo, name, country, etc. ) <- top 100px -->
<div id="league-information-container" class="information-container">
<img id="league-logo" src="{{league.competition.league_emblem}}" alt="{{league.competition.league_name}} Emblem">
<h1 id="league-title">{{league.competition.league_name}}</h2>
<img id="league-flag" src="{{league.area.league_flag}}" alt="{{league.competition.league_name}} Flag">
</div>
<!-- Container to display all stats for league <- bottom rest of the container -->
<div id="table-and-top-scorers-containers" class="stats-container">
<!-- Container to display league table <- split 50% -->
<div id="league-table-container" class="stats-container">
<!-- Put header above table container -->
<div id="table-header-container" class="header">
<h2>Table</h2>
</div>
<!-- Container containing all league table stats -->
<div id="table-stats-container" class="stats-container">
<table id="standings-table">
<thead>
<tr>
<th>#</th>
<th></th>
<th>Club</th>
<th>GP</th>
<th>W</th>
<th>L</th>
<th>D</th>
<th>GD</th>
<th>Pts</th>
</tr>
</thead>
<tbody>
{{#each league.standings}}
<tr>
<td>{{table.league_position}}</td>
<td id="club-logo-column"><img id="table-club-logo" clubID="{{table.team_id}}" src="{{table.team_crest}}" alt="{{table.team_name}} Crest"></td>
<td><span id="club-name-column" clubID="{{table.team_id}}">{{table.team_name}}</span></td>
<td>{{games_played}}</td>
<td>{{wins}}</td>
<td>{{losses}}</td>
<td>{{draws}}</td>
<td id="goal-difference-column">{{goal_difference}}</td>
<td id="points-column">{{points}}</td>
</tr>
{{/each}}
</tbody>
</table>
</div>
</div>
<!-- Container to display top scorers for league <- Split 50% -->
<div id="top-scorers-container" class="stats-container">
<div id="top-scorers-header-container" class="header">
<h2>Top Scorers</h2>
</div>
<div id="top-scorers-stats-container" class="stats-container">
<table>
<thead>
<tr>
<th>Goals</th>
<th></th>
<th>Name</th>
<th>Club</th>
<th>GP</th>
</tr>
</thead>
<tbody>
{{#each topScorers.scorers}}
<tr id="top-scorers-row">
<td id="goals-column">{{goals}}</td>
<td><img id="top-scorers-logo" clubID="{{team.team_id}}" src="{{team.team_crest}}" alt="{{table.team_name}} Crest"></img></td>
<td id="player-name-column">{{player.player_name}}</td>
<td id="club-name-column" clubID="{{team.team_id}}">{{team.team_name}}</td>
<td>{{games_played}}</td>
</tr>
{{/each}}
</tbody>
</table>
</div>
</div>
</div>
</div>