jarekb84 / fuse Goto Github PK

https://www.harrisfootball.com/rb-ranks

For the most part this could work with copying the data into the CSV/Spreadsheet tab, but the first col here is the rank, not the player name.

An alternative would be to allow the user to select which column has the player name in it, then parsing it like like a tab delimited value.

The CSV importer works, but requires a few extra steps to get data out of a spreadsheet into CSV format. Could simplify this by making the CSV tab more generic and extensible

Scope

• Add delimiter option (tab, space, comma)
• Selecting which column has the player name

verify this works on

• https://www.harrisfootball.com/rb-ranks
• https://www.draftsharks.com/trade-value-chart/ppr
• https://www.thescore.com/news/2707590
• https://peakedinhighskool.com/fantasy-trade-value-chart/
• copying data from google sheets and excel

Extend settings panel to allow users to pass in generic CSV data.

First column will be the player name, second column will be whatever data they want to add. Maybe support passing in multiple columns, though would need to think through how to represent that in the injected ui data.

Ie input could be Christian McCaffrey, Trade Target or Christian McCaffrey, FOO, BAR, BAZ

In the UI the first example could be injected as

Christian McCaffrey
BC 1.1/ SD 11.5/ Trade Target SF RB

And the second as

Christian McCaffrey
BC 1.1/ SD 11.5/ FOO, BAR, BAZ

Where BC is the prefix for borischen and SD is subvertadown (other planned enhancements)

Create a seperate PR when each one of these items is tackled (well..when large changes are introduced)

• Create cleaner way to access parts of config
  • ie like a selector object for the whole config, which returns child section selectors and value retrieval methods
  • can be used when setting up id's on new elements or when retrieving DOM values for persistence
• Extract scoreSuffixes to spot which can be used to power the dropdown options as well as the fetching logic
• extract each data source into a module
  • each module has methods to create a settings section, parse data, create it's own state, know how to get and save that state, ect...
  • currently this logic is all over, lots of coupling between methods (ie getStoredData knows a whole ton bout each data soruce's definition, duplicated in the saving logic)
• extract all the dom helpers into their own "module"
  • just a wrapper object with accessor methods to do all the creation logic
  • handy for collapsing code in the IDE, and ripe for extraction into a new file once I add that to the dev setup
• extract getting and saving to local storage as it's own module

Create a seperate PR when each one of these items is tackled (well..when large changes are introduced)

• Cleaner way to create DOM elements
  • atm it's a bunch of document.createElement which get's cumbersome to style/extend
• Move DST name dictionary initialization to only be ran when needed, instead of always on run
  • When settings opened/saved
  • When auto fetch of data runs
• add prettier and huksy to run formatting pre commit

Forgot to change this line from 5 min to 24hr during testing

const twentyFourHoursInMs = 300000;

value should be 24 * 60 * 60 * 100

Likely tied to empty state data in local storage for prefixs.

• Add a clear inputs button (for everything except prefix)
• Add last updated time to all data sources

Example reported was for
Kenneth Walker III

addPlayerInfoToDictionary has a II and III cleanup line, but it's backwards, removing the II first from III, resulting in
K. WalkerI: "3.1" as the parsed value

After you've configured the settings, having to click the Update button get's tiresome, esp since you have to load the script on each page load then click the Update button.

So just run the player update on initial load

After last refactor, the auto fetch script runs on even when not executed in a greasemonkey environment

Issue #82 describes a feature which allows FUSE to show if a player is an upgrade to the current team roster. To get this feature working requires lots of changes.

MVP

• Add settings panel
  • to allow enabling an inflight feature set, which may have no value but allows for incremental changes towards 3.0)
• Add typescript
  • codebase is starting to get complex and starting to see signs of bugs getting added due to unexpected types being passed around
  • TS should give a cheap way to add a bit of safety to changes
• Add compilation step
  • Allows for breaking up the one gigantic FUSE file into multiple files, making it easier to navigate the codebase
  • Maybe consider adding BUN
• Allow injected FUSE info to be a dom element rather just a string
  • Currently the injected info is just a string array, but if I wanted to show upgraded values in green (bold or normal) than we'd need to injected dom vs just strings
  • change should be straight forward by just replacing the insert before/after of fuseInfo to be... well something like string eval as a DOM
• Add discord link next to fuse version
  • Grows community of people who can help identify bugs, suggest features, and be a beta group for testing 3.0 features as well as adding new platforms
• Add "My Team" tab for ESPN
  • Enabled via settings panel
  • Has inputs to define team roster
  • Has button to detect/import team roster from current team page
    • number of players per position can easily be identify, ie 1 or 2 QB league, 2 or 3 of each RB/WR
  • Has settings to define if FLEX allows RB/WR/TE/QB
  • Has setting to define # of bench spots (during detection, not all spots might filled)
• Add My team tab for remaining fantasy platforms
  • Each one will have a different DOM for displaying team roster, maybe not all info will be as easily to figure out
• Extract position when getting players displayed on page
  • Will be needed when seeing if a player is an upgrade for another player in that same position
  • FLEX checks may get more funky
• v3.0.0 Implement algo that figures out if a given player is an upgrade to current rostered player in a position
  • Upgrade to start in position should be bold green
  • Upgrade to a player on bench should be normal weight green
  • For each displayed player, find their position in the team roster
    • For each data source (boris chen, subvertadown, custom data) check if the data source value is better than value of the currently rostered player
  • BorisChen lower value is better ( ie 2.3 is better than 2.7 and 3.5)
  • SubvertADown higher values are better since they represent expected point values scored in a game
  • Custom data, user will need to specify if their provided values represent small is better of larger is better (maybe a good use for a radio button group)

Allow for configuration of

• platform specific selectors: player name, parent element, row after player name element
• delimiters used when displaying FUSE info:
  • / between data sets (borischen, subvertadown, custom)
  • | used when player listed twice in a given data set
• Toggle debugging
  • ie if console.log with state should be called or not

Looks like the save action is injecting prior BorisChen state into the subverADown state

const saveBtn = dom.makeButton('Save', () => {
   ...
   state.data.subvertADown = { ...state.data.borisChen, ...getSubvertADownFormData() };

The custom data parser fails in a few spots with this input

Standard Scoring	
1	Nick Chubb	@ PIT
2	Christian McCaffrey	@ LAR
3	Derrick Henry	LAC
4	Saquon Barkley	@ ARI
5	Bijan Robinson	GB
6	Josh Jacobs	@ BUF
7	Joe Mixon	BAL
8	Travis Etienne	KC
9	Rhamondre Stevenson	MIA
10	Aaron Jones	@ ATL
47	Marquise Brown	NYG
48	Zay Jones	KC
49	Odell Beckham	@ CIN
50	Tutu Atwell	SF
PPR Scoring	
1	Justin Jefferson	@ PHI

You currently have to click the update button to fresh the info injected into the page. Issue is that when you switch pages or apply a filter in the espn app, the player rows get updated, but for some reason the FUSE injected DOM is not purged automatically. So you're left with new player rows, but the row FUSE data is from the last time you clicked update.

So scope here is to detect either when the user clicks on the page or check when the an api request succeeds, then automatically update the DOM with FUSE data.

There are a few issues with the data sources providing mixed DST names and differences in how each platform displays the DST name.

BorisChen's data has City and Team name
Subvertadown's data only has Team name

ESPN uses team name
Yahoo uses City
NFL.com uses City and Team name
Sleeper uses a City abbreviation (San Francisco is shown as SF)
CBS used Team name

Scope
Come up with an approach which normalizes the input data in a way that can be used by all platforms

Tech Notes
Maybe this requires a hardcoded dictionary of team names, where the values are an array of every platforms output. IE

{
  '49ers': ['49ers','San Francisco', 'San Francisco 49ers', 'SF']
}

Then add the BorisChen/Subertadown/whatever data set per each platform's display format

Since the data source parsing functions use state, there's a bit of a race condition if you update the delimiters and click save. Only the second time you do it will the data displayed actually look like how you configured it.

Add quick fix for now, but this opens up an issue with future scenarios where we need to update state while using the updated state during parsing (or other operations).

Readme's don't allow js embedded anchor tags, which is how FUSE is currently installed (via bookmarklet).

A github page can run any html, so the install instructions can be just drag and drop the anchor tag into your bookmark bar. The page can also leverage git tags to auto generate the release specific links (or latest) without having to reach out to the github api.

Consider using this gh action
https://github.com/marketplace/actions/deploy-to-github-pages

Update readme to include

• intro paragraph to mention uses: help with decision making around starting lineup, finding free agents, or setting up trades
• the various pages on espn where fuse works (not just my team/scoreboard, but also available players and trade screens)
• update all screenshots (update button removed)

Looks like while FUSE is injecting DOM into the player info, it breaks whatever JS logic exists to allow you to drag and drop players from starting roster to bench. The icons to move players show up, but dragging a bench player into a starting position does not work.

With FUSE enabled

With FUSE disabled

Borischen lists Patrick Mahomes II while ESPN just uses Patrick Mahomes. Also Both BorisChen and SubvertADown do not include D/ST in the defense names, while ESPN includes that as a suffix. Last issue is ESPN on some screen truncates long names. Christian McCaffrey on the My team page but C. McCaffrey on the FantasyCast page.

Current solution for player names is to manually remove the II in Mahomes name in the settings panel and for defenses, I have logic to add the D/ST suffix. and no workaround for name truncation. Not ideal in either case.

Cases to handle (left input data, right is ESPN display name)

• Patrick Mahomes II -> Patrick Mahomes
• Ravens -> Ravens D/ST
• Christian McCaffrey -> C. McCaffrey

Options to consider

One possibility is to try a different lookup mechanism

• string starts with text can't work since it's a dictionary lookup of player names
• maybe we can do a few iterations of lookup
  • check if player name as is exists in the dictionary, if not
  • split the name by space, pop off the last bit, and try the look up again

The latter bit would work for DST's since the 2nd iteration would match up just the team name in the dictionary Ravens D/ST would fail the first lookup, but succeed in the second lookup of just Ravens.

That wouldn't work for the Mahomes case since Patrick Mahomes II is what borischen has in it's data and that would be the dictionary key.

Requested on the reddit public beta post. If issues arise getting the player info working everywhere, focus on

• Stats on the waiver wire players page.

Once implemented, drop a reply to this thread letting both users know. They could also be good to do some initial beta testing once yahoo is added.

User reported the following on v2.0.7, likley on Firefox

hmm, tried with Violent Monkey (after disabling greasemonkey), and now the settings won't even load.

edit: script error: https://imgur.com/a/YOv0Oy1

Some folks are experiencing issues with calls to github to get latest getting blocked, so inlining minified js code into the bookmarkelt might be a good alternative solution to this (at least till I switch to a new install mechanism which doesn't rely on checking github for latest version)

EDIT: found that borischen hosts all the data on txt files available via aws
https://s3-us-west-1.amazonaws.com/fftiers/out/text_WR-PPR.txt

Each one has a scoring suffix, so will need to add a scoring option to the UI. Also, add logic to avoid spamming calls too often.

Scope

• Add scoring option dropdown/radio
• Fetch data when scoring option changed
• store last time data was fetched
• when FUSE initializes, check if it's been more than a day since last fetch, if yes, then auto fetch new data
• add button to allow user to force fetch
• show loading indicators when fetching

Old

Accessing the Google sheet data or scraping the home page are potential methods.

There's a page intended for drafting, but might be kept updated each week
http://www.borischen.co/p/draft-sheets.html

It links out to a google doc and a CSV download (though standard scoring only).

Alternative approach is to just scrape the html of the site, though not sure if it could be done on just one page or if we'd need to make multiple requests for each position.

Would also need to add options to the Borischen tab asking what scoring the league uses (standard, .5 PPR, PPR)

This is a really lose idea for a feature which would highlight upgrades when looking at free agents or providing trade value enhancements.

Feature would need to

• have some way to identify who the players on your team are
• understand the data entered into FUSE
• understand positions and what an upgrade would be
• add a setting to each data tab to indicate if lower values are better

Challenges

• each platform has a different way of displaying team roster
• how to import team roster into FUSE (manually copy/paste or some button in FUSE which will grab the team roster shown on current page)
• identify player position (so you're not showing an RB as an upgrade for a QB position)
• know how many starters each position has on your roster
• understand data passed into FUSE,
  • can probably easily extract numbers from the data
  • but some are stored as tiers (ie is 2.3 better than 2.2)
  • is a bigger number better? some are rankings/tiers but others can be trade values
    • ranking/tier smaller is better
    • trade values higher is better
  • value meaning can differ between each data source
• how to display the delta
  • B 2.3 (-0.1)
  • B 2.3 (+)
  • B 2.3 ↑
• should the delta be green if good (ie improvement) and red if bad?

Add a tabbed interface to the settings panel, allowing configuration of subvertadown D/ST, Kicker, and QB suggestions along with borischen tiers

Post from user
"Only thing I wish could be done was have the save/cancel option be at the top of it as due to how my screen is, is cut off unless I take it to 50% zoom for some reason (on sleeper).

Also only on the Boris Chen input as Subvert is small enough that it doesnt cut off."

Likely fix
Give data source specific editor section a max height that's based off of the user's view port. Overflow autoscroll if there isn't enough room

Right now FUSE shows

Christian McCaffrey
1.1 SF RB

Where 1.1 is the tier data from borischen. When other types of data support are added, it maybe difficult to know what's what. So extend the settings panel to allow for optional and configurable prefixes per data type

Ie allow something like this

Christian McCaffrey
BC 1.1/ SD 11.5

Looks copying Boone's ranking data from Firefox includes extra spaces which is breaking the player lookup.

https://www.thescore.com/news/2707590

Rk 	Player 	Pos 	Opp
1 	Christian McCaffrey 	RB 	vs NYG
2 	Justin Jefferson 	WR 	vs LAC
3 	Tony Pollard 	RB 	@ ARI
4 	Tyreek Hill 	WR 	vs DEN
5 	Bijan Robinson 	RB 	@ DET
6 	Travis Etienne Jr. 	RB 	vs HOU
7 	A.J. Brown 	WR 	@ TB
8 	Stefon Diggs 	WR 	@ WAS

Investigate if data can be pulled directly from https://subvertadown.com instead of requiring a manual copy/paste step. Web scraping is the likeliest approach to work (don't see any data exports and API calls would likely be blocked by CORS)

Things to consider

• The home page has 3 tables, though D/ST has an option of ESPN vs Yahoo due to differences in scoring rule defaults around yards allowed.
• A full projections table exists for D/ST and QB with several columns. Pulling in all the data may get to be too much info to inject into the player info sections. So would need to look into allowing the user to specify which cols they want to pull.

The copied data from the full projections pages are in a tabular format, but not one which translates into an output of one row per entry.

Example below for https://subvertadown.com/weekly/defense?platform=espn

Other issue is that the DST name is combined with their opponent.

The data format will not work in either the current SubvertADown nor the Custom Data tab.

Cowboys vs. Jets
9.8
-	
5.0
15.2	289	1.2	3.5	0.5
49ers @ Rams
9.0
5.7
18.0	311	0.9	3.5	0.7
Broncos vs. Commanders
7.9
-	-	
3.0
18.2	311	0.6	3.6	0.4
Browns @ Steelers
7.5
-		
5.4
18.2	313	0.5	2.6	0.5
Saints @ Panthers
7.4
-	-	
4.8
18.4	325	0.9	3.2	0.4
Steelers vs. Browns
7.3
-	-	
3.5
19.2	323	0.6	2.7	0.6
Bills vs. Raiders
6.8
-		
5.1
19.9	327	0.8	2.8	0.4
Buccaneers vs. Bears
6.8
-	-	
4.5
19.4	327	0.2	3.7	0.5

Some people use the Flex ranking to help them choose between a WR/RB/TE to start. This means a FLEX player will also have their base position tier, which will differ.

So FLEX handling should find and update the player dictionary value instead of just overwriting it. Also means FLEX processing should be done last.

IE Jaylen Waddle is Tier 2.5 in WR rankings, but Tier 1.1 in Flex, so the borischen output should be BC 2.5,1.1