maxdemaio / chess-heat

Visualize your chess.com chess consistency with a heatmap!

Hi, I'm Max! 👋 I'm a software developer with a strong will to learn, research new technologies, and design software architecture. I like creating practical business solutions and making development processes as efficient as possible.

chess-heat's Issues

Submit good user, submit bad user, example hue squares don't change color

STR:

• Submit good user max_mayo
• Submit bad user max_mayo02340
• Attempt to slide hue range

Expected: hues on the example squares update
Actual: hues on example squares stay what they were from the successful user

Current year left side should always have 7 squares vertically (like GitHub)

Create profiles view

Light/dark mode toggle

** This isn't really a needed feature but more of an added bonus if possible **

Great example of a light/dark toggle: https://dev.to/whitep4nth3r/the-best-lightdark-mode-theme-toggle-in-javascript-368f

• Would probably want to use an icon in this collection since our main icon is from there too: https://icones.js.org/collection/bi
• Toggle would be a button in the top right nav. It would be the last element in the flexbox
• Similar to https://maxdemaio.com
• on smaller screens would probably remove the other items on the right and only have the brand on left and toggle button

[gh-style] aggregate total stats for queried username

Keyboard accessibility

I would like to be able to cycle through all squares (to see tooltips) using my keyboard pressing TAB.

To make any element focusable in html you can add tabindex="0" attribute to it.
You can implement it moving mouseover/mouseleave logic from javascript to css. It's possible to make same UX with css :focus / :hover effects.

Reference: github activity table. Hit TAB until you reach first square. Then you can move with arrows.

Previous years should be from Jan, 1, XXXX to Dec 31 XXXX

Set min year to 2007 and then update the max year to the current year with javascript

Specifically this HTML element:

<input class="form-input" id="form-input-year" name="year" type="number" min="2008" max="9999" required />

Fix:
https://stackoverflow.com/questions/32378590/set-date-input-fields-max-date-to-today

Chess.com username as query parameter?

Can we have the chess.com username as a query parameter so we can share heatmaps by sharing the link? 🙏

Ability to choose different game classes

Chess has game classes for all time controls.
For example:
180-599 seconds - blitz
600-1800 seconds - rapid
etc.

We can add dropdown which will sort data and show only specific game class chessheat.

In response from https://api.chess.com/pub/player/{user}/games/{year}/{month} we are getting time_class for every game.

remove class of data-cell and hsl in the clear table func

Change to GitHub contribution map

Store last hue value

We don't store user's hue value now. So every time user opens chessheat.com it's 0 by default.
We can store that value in localStorage, to keep last known selected hue.

Allow all hue values

Add year as a possible option for URL query parameters

This can also be blank to just have the username. Having just the year shouldn't do anything though.

Probably something like:

• https://maxdemaio.github.io/chess-heatmap/?user=max_mayo&year=2022 would get the username and the year
• https://maxdemaio.github.io/chess-heatmap/?user=max_mayo would work as normal
• https://maxdemaio.github.io/chess-heatmap/?year=2022 would do nothing

Dates and cells still off

Self notes:

• looks like we're just not truncating the right amount of days at the start
• look into firstDayDate variable and why do we need it

Not requesting json

Simply as that. Pgn takes more space than json, there is no need to request whole pgn, when we can request compact json.

url: https://api.chess.com/pub/player/${user}/games/${loopYear}/${loopMonth}/pgn

data size with pgn: ~1578.8kB

url: https://api.chess.com/pub/player/${user}/games/${loopYear}/${loopMonth}

data size with json: ~489.3kB

~3 times less traffic and what's more, no more need in RegEx (we all know how slow it is, so potentially faster rendering after receiving data).
With json we can easily store all data to localStorage and use in future, to optimize more.

Update hue when changing time controls on the filter

Add George to contributors on the front page

Submit correct user, submit incorrect user, and can't go back to correct user submit

It stays stuck loading the incorrect user after you submitted a valid user.

STR:

• submit max_mayo
• submit max_mayo333343
• try to submit max_mayo

expected: able to re-submit
actual: stuck loading

Parse game data from JSON, not PGN embedded in JSON

Relates to #30. Basically, now we're using the JSON endpoint. But, we're still parsing the PGNs embedded in the JSON with regex. Instead, we'll use the fields available on the JSON.

• use json data and create enum for results
• update readme

Add YEAR query parameter, default to current year if non-existent

Already does default to the current year. But, allow them to pass in a year if they want.

Code cleanup

This is just general code quality stuff. I don't expect anyone to pick this up and I can tackle this as needed 👍🏻

• Add JSDoc to functions similar to what is done in results.js
  • Website - https://jsdoc.app/
  • Make functions all the same (arrow vs functions)
• Update to arrow functions all around or function all around (pick one for consistency)
• Look into adding try/catch with async function with await for when we call the chesscom API
  • https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/async_function
• Group event listeners at the end of the script.js

Unnecessary comparisons to get the day of the week

https://github.com/maxdemaio/chess-heat/blob/8cf41ec415e7993447d0115c26052c4ebdc46e10/script.js#LL223C5-L257C6

This code compares i to the number 7x7 times.

Can be only 1x7 comparison operations with code below:

const clipPathStyle = i % 2 === 0 ? 'Circle(0)' : 'None';

tdLabelSpanHidden.textContent = DAYS_OF_THE_WEEK[i];
tdLabelSpan.textContent = DAYS_OF_THE_WEEK[i].slice(0, 3);
tdLabelSpan.style.clipPath = clipPathStyle;

This part should be defined somewhere at the start of the file:

const DAYS_OF_THE_WEEK = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];

Fix GitHub graph dates for previous years

For previous years we want Jan 1st, 20XX to December 31st 20XX. We also need the days of the week to be lined up correctly. This is a subtask of #8.

Create a page where users can view the list of games for specific days

This feature enables individuals to view the specific games that are scheduled for a given day.

Research storing previous successful searches in local storage or cache chess.com's responses

We should store previous searches and display them in a dropdown. Or we could cache the responses from chesscom in some way.

[gh-style] Months incorrect in column header

The header cell for months sometimes do no start over the first day they appear.

Fix the heatmap padding

Similar to GitHub, we need some padding on the inside of the table.

Create a shareable image/view for social media

Days in the hover text do not match the rows

It's weird for the user roflman123 for year 2023 it does Fri-Thursday. Then for the user max_mayo and the year 2023 we do Saturday -Friday instead. Will add more details below.

Too many requests when not played all last 12 months

Application makes requests for last 12 months even if player did not played in certain months.
Example:
user: bahanovych
months with number of games > 0: march, april, may

wasted time: ~1463ms
wasted traffic: ~6.56kB

Potential solution

Before fetching 12 months, it's possible to make yet another one request to get all archives of player. Info about all valid months (by valid I mean number of games > 0).
url: https://api.chess.com/pub/player/{user}/games/archives

Response in json

{"archives":[
"https://api.chess.com/pub/player/bahanovych/games/2023/03",
"https://api.chess.com/pub/player/bahanovych/games/2023/04",
"https://api.chess.com/pub/player/bahanovych/games/2023/05"]
}

It's now possible to filter archives array to get links from last 12 months. In that case it would only be 4 requests in total, 3 times less.
potential saved time: ~1400ms
potential saved traffic: ~6.3kB

In worst case scenario, when player played all last 12 months it's only ~150ms and ~1kB more.

[gh-style] Make a 🔥🔥🔥 landing page

Default year to current year

We should preselect the current year to this year to make it easier to make your first search

safari date pretty doesn't work on popups

make the buttons same size on form

Create an icon for the website (just use the flame svg)

https://icones.js.org/collection/bi?s=fire