Skip to content

Commit

Permalink
Converting to tracking rankings by manager (#185)
Browse files Browse the repository at this point in the history
This PR holds several key changes
- Rankings are now tracked by manager (for all time records as well as in the manager page)
    - This increases the overall accuracy of the Records and Rankings page (as well as the manager pages)
- It now uses the league specific avatar (if one exists)
- The chart style has been updated to better accommodate more entries (horizontal bars instead of vertical)
- Waivers have received a face lift and now look much cleaner and better
- Commissioner badge added on the managers pages

Preview of changes below:

| Old | New |
|---|---|
| ![old waivers](https://user-images.githubusercontent.com/39418000/211601742-568d71ff-e3e1-4419-8c23-2aed436b46d7.png) | ![new waivers](https://user-images.githubusercontent.com/39418000/211601802-6ec40035-569b-4d58-902e-4fa4d936f6aa.png) |
| ![old waivers tr](https://user-images.githubusercontent.com/39418000/211602064-c2617271-12ba-40e9-acc5-ddfc53efb5ff.png) | ![new waivers tr](https://user-images.githubusercontent.com/39418000/211602119-cb56b85f-8f52-481e-86d2-9ee9722b6a2e.png) |
| ![old records single](https://user-images.githubusercontent.com/39418000/211602226-72b5d79c-a8c8-40ab-920b-62ff879846e9.png) | ![new records - single](https://user-images.githubusercontent.com/39418000/211602267-cbb9ac26-c7c1-4eb7-8306-2fcc0c4e4776.png) |
| ![old records vs](https://user-images.githubusercontent.com/39418000/211602352-814d3daa-a013-4548-bd00-b2fa99f7be89.png) | ![new records vs](https://user-images.githubusercontent.com/39418000/211602397-92b7275e-7ff9-4b05-b1fd-355f67c7bbb6.png) |
| ![old chart](https://user-images.githubusercontent.com/39418000/211602484-f59b219a-bda8-4901-8d4c-f3d320453b0e.png) | ![new chart](https://user-images.githubusercontent.com/39418000/211602542-17908108-f74a-4e32-a7f0-b1d9883a6056.png) |

__**Due to the enormity of this change, there may be bugs. I have done my best to check the edge conditions, but the scope of this is large enough that I may have missed some**__
  • Loading branch information
nmelhado authored Jan 10, 2023
1 parent bce68f2 commit cf8812a
Show file tree
Hide file tree
Showing 82 changed files with 1,735 additions and 1,374 deletions.
15 changes: 15 additions & 0 deletions CHANGELOG.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,21 @@

All notable changes to this project will be documented in this file.

## [2.1.0] - 2023-01-10

### Changed

- Rankings are now organize by manager instead of team! [(issue #164)](https://github.com/nmelhado/league-page/issues/164)
- This means that if managers have changed throughout the years, you will now see accurate rankings for a given manager
- **To take full advantage of this you need to add managerIDs to the managers object in leagueInfo`src/lib/utils/leagueInfo.js`**
- More instructions in the updated [Training Wheels managers instructions](https://github.com/nmelhado/league-page/blob/master/TRAINING_WHEELS.md#2-add-managers)
- Use league specific avatar if avilable [(issue #156)](https://github.com/nmelhado/league-page/issues/156)

### Fixed

- Standings order issue [(issue #179)](https://github.com/nmelhado/league-page/issues/179)
- The re-implememntation of how team and user data is rendered should have fixed this

## [2.0.2] - 2022-09-29

### Fixed
Expand Down
2 changes: 1 addition & 1 deletion README.md
Original file line number Diff line number Diff line change
Expand Up @@ -67,7 +67,7 @@ Generate a custom league page for your Sleeper fantasy football league in just a
![league ID instructions](https://storage.googleapis.com/nfl-player-data/league_id_instructions.png)
- Write your homepage text (league intro/bio) `/src/lib/utils/leagueInfo.js` (lines 9-14)
![homepage text](https://storage.googleapis.com/nfl-player-data/homepage_text.png)
- Next, fill out and uncomment (delete the `// ` at the beginning of each line) the managers' object (lines 27 - 92), also located in `/src/lib/utils/leagueInfo.js`, there should be one object for each manager (for assistance, consult the [Training Wheels guide](https://github.com/nmelhado/league-page/blob/master/TRAINING_WHEELS.md#ii-adding-managers-and-changing-the-homepage-text))
- Next, fill out and uncomment (delete the `// ` at the beginning of each line) the managers' object (lines 27 - 92), also located in `/src/lib/utils/leagueInfo.js`, there should be one object for each manager. The structure may change in the future (it has already 😅). The source of truth is down at the bottom, lines 104-126 (for assistance, consult the [Training Wheels guide](https://github.com/nmelhado/league-page/blob/master/TRAINING_WHEELS.md#ii-adding-managers-and-changing-the-homepage-text)).
![manager object](https://storage.googleapis.com/nfl-player-data/managersObj.png)
![manager rendering](https://storage.googleapis.com/nfl-player-data/managerRendering.png)
- Add corresponding images for managers to the `/static/managers/` directory and make the sure the name matches with what was provided above
Expand Down
15 changes: 7 additions & 8 deletions TRAINING_WHEELS.md
Original file line number Diff line number Diff line change
Expand Up @@ -117,15 +117,14 @@ Generate a custom league page for your Sleeper fantasy football league in just a
<br />

- Fill each one out as follows:
- `"roster" :` give the roster ID for this manager
- To find the roster ID for the manager, go back to your website and scroll down to the `Power Rankings` graph (or to any of the graphs in your records page)
> ![pRankings](https://storage.googleapis.com/nfl-player-data/pRankings.png)

<br />

- The roster ID is the order of the bar chart, the first bar is roster ID 1, the second is roster ID 2, etc.
- `"roster" :` **This has been deprecated! You can ignore this field as long as you provide a managerID**
- ~~To find the roster ID for the manager, go back to your website and scroll down to the `Power Rankings` graph (or to any of the graphs in your records page)~~ (Power Rankings are no longer in order)
- `"managerID" :` the user ID of the manager
- To find a manager's user ID, go to `https://api.sleeper.app/v1/league/<your_league_id/users` (for example: https://api.sleeper.app/v1/league/784583295500464128/users) and find the corresponding userID for each manager
- This feld was added in version 2.1.0, so you will have to add it manually. Remember when adding it, to place the id within quotes (i.e. `"managerID" : "12345678",`)
- `"name" :` The name of this manager
- `"tookOver" :` If this manager took over an orphaned team in your league, give the year they took over. Otherwise set this to `null`
- `"tookOver" :` **This has been deprecated! You can ignore this field as long as you provide a managerID**
- If this manager took over an orphaned team in your league, give the year they took over. Otherwise set this to `null`
- `"location" :` Where is this manager based out of (City, State, Country, whatever floats your boat)
- `"bio" :` This manager's bio. If you don't have a bio yet, leave it as is and come back and edit this again when you have the bio.
- `"photo" :` This manager's photo. To upload a photo:
Expand Down
16 changes: 8 additions & 8 deletions package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "league-page",
"version": "2.0.2",
"version": "2.1.0",
"homepage": "https://github.com/nmelhado/league-page",
"repository": {
"type": "git",
Expand Down
32 changes: 13 additions & 19 deletions src/lib/Awards/Awards.svelte
Original file line number Diff line number Diff line change
@@ -1,15 +1,9 @@
<script>
import {cleanName, gotoManager} from '$lib/utils/helper';
export let podium, currentManagers;
import { gotoManager } from '$lib/utils/helper';
import { getAvatarFromTeamManagers, getNestedTeamNamesFromTeamManagers } from '$lib/utils/helperFunctions/universalFunctions';
export let podium, leagueTeamManagers;
const { year, champion, second, third, divisions, toilet } = podium;
const getNames = (name, rosterID) => {
if(cleanName(name) != cleanName(currentManagers[rosterID].name)) {
return `${name}<div class="curOwner">(${currentManagers[rosterID].name})</div>`;
}
return name;
}
</script>

<style>
Expand Down Expand Up @@ -340,15 +334,15 @@
<img src="./podium.png" class="podiumImage" alt="podium" />

<!-- champs -->
<img src="{champion.avatar}" class="first champ clickable" on:click={() => gotoManager(champion.rosterID)} alt="champion" />
<img src="{getAvatarFromTeamManagers(leagueTeamManagers, champion, year)}" class="first champ clickable" on:click={() => gotoManager({leagueTeamManagers, rosterID: champion})} alt="champion" />
<img src="./laurel.png" class="laurel" alt="laurel" />
<span class="label firstLabel clickable" on:click={() => gotoManager(champion.rosterID)}>{@html getNames(champion.name, champion.rosterID)}</span>
<span class="label firstLabel clickable" on:click={() => gotoManager({leagueTeamManagers, rosterID: champion})}>{@html getNestedTeamNamesFromTeamManagers(leagueTeamManagers, year, champion)}</span>

<img src="{second.avatar}" class="second champ clickable" on:click={() => gotoManager(second.rosterID)} alt="2nd" />
<span class="label secondLabel clickable" on:click={() => gotoManager(second.rosterID)}>{@html getNames(second.name, second.rosterID)}</span>
<img src="{getAvatarFromTeamManagers(leagueTeamManagers, second, year)}" class="second champ clickable" on:click={() => gotoManager({leagueTeamManagers, rosterID: second})} alt="2nd" />
<span class="label secondLabel clickable" on:click={() => gotoManager({leagueTeamManagers, rosterID: second})}>{@html getNestedTeamNamesFromTeamManagers(leagueTeamManagers, year, second)}</span>

<img src="{third.avatar}" class="third champ clickable" on:click={() => gotoManager(third.rosterID)} alt="3rd" />
<span class="label thirdLabel clickable" on:click={() => gotoManager(third.rosterID)}>{@html getNames(third.name, third.rosterID)}</span>
<img src="{getAvatarFromTeamManagers(leagueTeamManagers, third, year)}" class="third champ clickable" on:click={() => gotoManager({leagueTeamManagers, rosterID: third})} alt="3rd" />
<span class="label thirdLabel clickable" on:click={() => gotoManager({leagueTeamManagers, rosterID: third})}>{@html getNestedTeamNamesFromTeamManagers(leagueTeamManagers, year, third)}</span>
</div>
<div class="divisions">
{#each divisions as division}
Expand All @@ -360,10 +354,10 @@
<h6>Regular Season Champion</h6>
{/if}
<div class="leaderBlock">
<img src="{division.manager.avatar}" class="divisionLeader clickable" on:click={() => gotoManager(division.manager.rosterID)} alt="{division.name} champion" />
<img src="{getAvatarFromTeamManagers(leagueTeamManagers, division.rosterID, year)}" class="divisionLeader clickable" on:click={() => gotoManager({leagueTeamManagers, rosterID: division.rosterID})} alt="{division.name} champion" />
<img src="./medal.png" class="medal" alt="champion" />
</div>
<span class="genLabel clickable" on:click={() => gotoManager(division.manager.rosterID)}>{@html getNames(division.manager.name, division.manager.rosterID)}</span>
<span class="genLabel clickable" on:click={() => gotoManager({leagueTeamManagers, rosterID: division.rosterID})}>{@html getNestedTeamNamesFromTeamManagers(leagueTeamManagers, year, division.rosterID)}</span>
</div>
{/if}
{/each}
Expand All @@ -376,10 +370,10 @@
<img src="./toilet-banner.png" class="toilet-banner" alt="The Toilet Bowl" />

<div class="toiletBowl">
<img src="{toilet.avatar}" class="toiletWinner clickable" on:click={() => gotoManager(toilet.rosterID)} alt="toilet bowl winner" />
<img src="{getAvatarFromTeamManagers(leagueTeamManagers, toilet, year)}" class="toiletWinner clickable" on:click={() => gotoManager({leagueTeamManagers, rosterID: toilet})} alt="toilet bowl winner" />
<img src="./toilet-bowl-2.png" class="toilet" alt="toilet bowl" />
</div>
<span class="genLabel clickable" on:click={() => gotoManager(toilet.rosterID)}>{@html getNames(toilet.name, toilet.rosterID)}</span>
<span class="genLabel clickable" on:click={() => gotoManager({leagueTeamManagers, rosterID: toilet})}>{@html getNestedTeamNamesFromTeamManagers(leagueTeamManagers, year, toilet)}</span>
</div>
{/if}
</div>
156 changes: 156 additions & 0 deletions src/lib/Bar.svelte
Original file line number Diff line number Diff line change
@@ -0,0 +1,156 @@
<script>
import { getAvatarFromTeamManagers, getTeamNameFromTeamManagers, gotoManager, round } from "./utils/helperFunctions/universalFunctions";
export let leagueTeamManagers, stat, label, xMin, xMax, secondStat, managerID, rosterID, color, year;
$: user = managerID ? leagueTeamManagers.users[managerID] : null;
</script>

<style>
:global(.opacity) {
opacity: 0.3;
}
.barParent {
position: relative;
margin-bottom: -10px;
height: 76px;
}
.managerName {
position: absolute;
top: 0;
left: 80px;
}
.teamAvatar {
position: absolute;
left: 20px;
top: 0;
bottom: 0;
height: 40px;
margin: auto;
border-radius: 50%;
border: 2px solid;
z-index: 14;
background-color: #fff;
}
.statBars {
display: flex;
margin: 0 auto;
}
.leftSpacer {
width: 40px;
height: 1px;
display: inline-block;
}
.rightSpacer {
width: 20px;
height: 1px;
display: inline-block;
}
.bars {
flex-grow: 2;
position: relative;
}
.bar {
height: 1.8em;
border-radius: 0 0.9em 0.9em 0;
z-index: 10;
}
.secondBar {
position: absolute;
top: 0;
z-index: 11;
left: 0;
}
.barLabel {
z-index: 12;
vertical-align: text-top;
margin-left: 40px;
}
.vCenter {
display: block;
height: 1.8em;
position: absolute;
width: 100%;
top: 0;
bottom: 0;
margin: auto 0;
}
.clickable {
cursor: pointer;
}
@media (max-width: 600px) {
.barParent {
/* margin-bottom: -10px; */
height: 57px;
}
.managerName {
left: 60px;
font-size: 0.8em;
}
.teamAvatar {
left: 10px;
height: 30px;
}
.barLabel {
margin-left: 30px;
vertical-align: middle;
font-size: 0.8em;
}
.leftSpacer {
width: 30px;
}
.rightSpacer {
width: 10px;
}
.bar {
height: 1.2em;
border-radius: 0 0.6em 0.6em 0;
}
.vCenter {
height: 1.2em;
}
}
</style>

<div class="barParent">
<img alt="team avatar" on:click={() => gotoManager({leagueTeamManagers, managerID, rosterID})} style="border-color: var({color});" class="teamAvatar clickable" src="{user ? `https://sleepercdn.com/avatars/thumbs/${user.avatar}` : getAvatarFromTeamManagers(leagueTeamManagers, rosterID, year)}" />
<span class="managerName clickable" on:click={() => gotoManager({leagueTeamManagers, managerID, rosterID})}>
{#if user}
{user.display_name}
{:else if rosterID}
{getTeamNameFromTeamManagers(leagueTeamManagers, rosterID, year)}
{/if}
</span>
<div class="vCenter">
<div class="statBars">
<div class="leftSpacer" />
<div class="bars">
<div class="bar{!secondStat ? '' : ' opacity'}" style="background-color: var({color}); width: {(stat - xMin) / (xMax - xMin == 0 ? 1 : (xMax - xMin)) * 100}%;">
{#if !secondStat}
<span class="barLabel">{stat}{label}</span>
{/if}
</div>
{#if secondStat}
<div class="bar secondBar" style="background-color: var({color}); width: {(secondStat - xMin) / (xMax - xMin == 0 ? 1 : (xMax - xMin)) * 100}%;">
<span class="barLabel">{secondStat}&nbsp;&nbsp;of&nbsp;&nbsp;{stat}&nbsp;&nbsp;({round(secondStat/stat*100)}%)</span>
</div>
{/if}
</div>
<div class="rightSpacer" />
</div>
</div>
</div>
Loading

0 comments on commit cf8812a

Please sign in to comment.