instaly showing No records.

Status: Dev Ready

On page https://coh2stats.com/ we have reddit component, which looks like this

Taks:

• Recreate this with in COH3
• Use Mantine lib https://mantine.dev/ << check if we can make it pretty by using default features
• The data fetching is created for this.
• You can just implement the component in https://github.com/cohstats/coh3-stats/blob/master/screens/home/reddit-panel/index.tsx
• You can position the component in https://github.com/cohstats/coh3-stats/blob/master/screens/home/index.tsx#L48

You can edit the source data in here https://github.com/cohstats/coh3-stats/blob/master/src/reddit-api.ts

You can re-use the components and source code from version 2:
It's here https://github.com/cohstats/coh2stats/tree/master/packages/web/src/components/reddit

Overall we would like to replicate this website https://aoe4world.com/ so you can look at it as inspiration.

If you look at https://leaderboards.companyofheroes.com/

There are icons for levels. We need to create similar mappings with images, so we can use it in leaderboards too.

On the player card we have table summary for each faction. This table is too wide. We can put some data next to it.
It would be great to create a summary card which would show more info about that particular faction.

The task:

• Make the table smaller
• Add card next to the table
  The card should have this information:
• Best ELO xxx in xxx (1v1)
• Best rank xxx in xxx (2v2 for example)
• Overall winrate xxx
• Total games xxxx
• Last game xxx

This should be for all factions.
Try to play with something which will look nice.

Don't forget about the mobile view. There the card should probably jump under the table.

All the source code and info is in this file https://github.com/cohstats/coh3-stats/blob/master/components/player-card/player-standings.tsx

If the ELo change is 0 , do not. display it

When you change something from the dropdowns on the DPS chart https://coh3stats.com/explorer/dps
You can briefly see the footer to jump down. It's CLS - content layout shift.

I think we need to assign min height to the chart / or the page container.

I wanted to do that, but than I noticed that on the mobile page - it's nicely small, so we might need to add 2 min sizes / mobile and desktop? Something like that.

@chris-nos let me know on Discord if you want look into this

When you navigate away from the page and back to it, the twitch streams freezes. Eror in cosnole:
Uncaught TypeError: Cannot read properties of undefined (reading 'setChannel')

Steps:

1. Go to https://coh3stats.com/
2. Navigate to https://coh3stats.com/about (click on about button)
3. Click home

Possible issue:

• Misalignment between .json hydronation version / loaded version

Possible solution:

• The twitch container should be only client rendered / the same way we do it for last game timestamp

About page should be on url /about

It should be one page with sections for more things - similar what we have on https://coh2stats.com/about

But it should have table of contents on the side, similar what is here https://aoe4world.com/faq#leaderboard

The content of the page can be populated later

It leads to this icon https://coh3stats.com/icons/maps/mignano_gap_6p.webp
Player card https://coh3stats.com/players/1447?view=recentMatches

Source code https://github.com/cohstats/coh3-stats/blob/master/src/coh3/coh3-data.ts#L299

For example rural_town_2p_mkii

Maps are specified in this file https://github.com/cohstats/coh3-stats/blob/master/src/coh3/coh3-data.ts#L284

When you navigate to https://coh3stats.com/ there is twitch stream with autoplay - it would be great to make sure this panel is muted and doesn't play the sound by default.

The option to switch between light/dark modes is great. Many sites such as https://developer.mozilla.org/en-US/ have a third option, which is to check the system theme first. For me personally this is what I would use since I have my OS switch between light and dark based on time of day and find it great.

My understanding is that the light/dark switching is done through the mantine library so not sure how much it would be to get this implemented.

I'm not planning on starting on this right now so if someone else wants to feel free. I'll update later if I start on this though.

After we deployed changes to how the player card is fetched, there is increased number of 500 errors.

Changes: https://github.com/cohstats/coh3-stats/pull/152/files

All of them are coming from the the player card:

This is for the user who visit the player card directly, so we must have something wrong here:
https://github.com/cohstats/coh3-stats/blob/master/pages/players/%5BplayerID%5D.tsx#L188

Create basic routing in NextJS app

Something like this https://github.com/cohstats/coh2stats/blob/master/packages/web/src/App.tsx

add non breaking HTML space instead of classic spaces into it
https://www.w3schools.com/html/html_entities.asp#:~:text=A%20commonly%20used%20entity%20in,the%20words%20might%20be%20disruptive.

Create Infrastructrue for central data loading + Mapping for unit stats.

I am counting with the player card similar to what we have on coh2

https://coh2stats.com/players/76561197962565673-Boomhauer

Add github actions to run In one action

• Prettier check
• Sanity build of the app

Spotlight Loading Indicator is not show when fetching

On player card recent matches https://coh3stats.com/players/13578?view=recentMatches

Add tooltip to the played element with the date of the match. For displaying the date, use toLocaleString() function.

https://coh3stats.com/leaderboards?race=german&type=1v1&start=10

https://coh3stats.com/players/871

i don't know it's intended or not. seems like you guys forget to reset spotlight value.

just add

onSpotlightClose={() => setDebouncedQuery("")}

will fix this problem

When you navigate to page https://dev.coh3stats.com/explorer/races/british/units , open dev tools, network tab. However over the units you will see that it's making tens / hundreds of requests.

It's prefetching from NextJS, we need to disable this. It's pulling GBs of data ... those pages are big ..

Edit: I optimized the pages, we were loading a lot of big data / but anyway I think we could disable prefetch on units as it's still a hundreds of requests

Seems if you have a 3 number relic ID, then it can't find your playercard. Examples:

Rei - https://dev.coh3stats.com/players/871
Sturmpanther - https://dev.coh3stats.com/players/816
Nyx - https://dev.coh3stats.com/players/319

The source data for this should be JSON, it should be separated by PATH. So you can select a patch version from a drop down.

Create those jsons in /src/coh3/data ...
Create a folder in /pages/units/...

It's up to you how to to code those units

Inspiration for good design can be taken from here https://aoe4world.com/explorer/civs/english/units/trader

If the match was not even an hour ago, it is nicer to display the minutes ago.
1h < time < 10h should display hours without 0 in front.

Timeago.js package is already installed and I changed formatMatchTime (marked as old) function from utils.ts to timeage.js,

I added autoplay of twitch stream, but it would be wise not to enable it on mobile devices - it would just suck the data from the users.

TODO: Disable autoplay on mobile devices

When you use userID which doesn't exists, for example https://coh3stats.com/players/24357134771

We get error:

body used already for: https://us-east4-coh3-stats-prod.cloudfunctions.net/getPlayerCardInfoHttp?relicId=24357134771

Which is weird it should return something different. Also preferably we should not be leaking our BE function

I am currently working with mantine and nextjs in another project. This is where i had to realize that nextjs SSR with mantine there is a managed starter template https://github.com/mantinedev/mantine-next-template .

Since there is some complex setup needed to make mantine and nextjs work together I would suggest starting with that template.

also really nice in the template is the storybook that is already set up for you. Which is very usefull when designing components

When you try to filter table and you remove all the data the filter is hidden.

We need to get the poover over the table somehow. I tried to play with the z-index but it didn't help on the popover. Maybe we need to apply it somewhere else?

There are only 10 matches per match type, but it still might be nice to be able to filter the recent matches tab (by game sized, faction, win/lose, etc.). What do you think? I was thinking filtering <Select />. Also could make the column headers clickable for sorting.

I was thinking this might be a good first feature/issue for myself. I've used react plenty, but would be getting used to mantine and next. I don't think there would be much to this that is next specific since all of the data is already fetched for this tab.

Example profile that is not searchable https://coh3stats.com/players/4440

Probably not an important fix, but every occurence (leaderboard / playercard) of the mantine datatable currently causes this error:

Couldn't figure out why but it seems to be inside the render function of the column prop

this is the only issue I found about this:
icflorescu/mantine-datatable#182
it seems to be our fault

We need to create a small leaderboard panel on the index page.

It should show 10 players, it will be just 1v1, there will be switch for all 4 factions (we could maybe use just the faction icons).
It should just show columns: rank, elo, alias, streak, ration, total, last game ?? We can test this and see how it looks, maybe we will need to remove some of it out to make it smaller.

If you want to pick this, feel free to ask for additional questions.

We can take inspiration from https://aoe4world.com/

In light mode we have excellent highlight blue - red

This is lost in dark mode:

Would be nice to have twitch Live as they have on https://aoe4world.com/

We have leaderboards on site which look like this:
https://coh2stats.com/leaderboards

We need to replicate this table in mantine:

• Implement in file https://github.com/cohstats/coh3-stats/blob/master/pages/leaderboards.tsx
• Use mantine lib https://mantine.dev/
• For table use this component https://icflorescu.github.io/mantine-datatable
• Data fetching is already implemented

Implement just the table - don't worry about the different inputs (selecting factions and so on ) - we want to have sorting too.

You can inspire or get any code in the COH2 project https://github.com/cohstats/coh2stats/blob/master/packages/web/src/pages/ladders/leaderboards.tsx

Ask if you have any questons

Add link to extremal site on the donate button https://github.com/cohstats/coh3-stats/blob/master/components/Icons/Donate.tsx
It can be just html tag
it should be to the config - donate https://github.com/cohstats/coh3-stats/blob/master/config.ts

On the player card - we have 2 views, one is player card, second one is for matches.

For example: https://coh3stats.com/players/871
And: https://coh3stats.com/players/871?view=recentMatches

For rendering just the player info we need - jus player info
For rendering matches, we need player info + recent matches.

There are 2 ways how to approach player recent matches:

1. User has link, he goes directly https://coh3stats.com/players/871?view=recentMatches , we need to make 2 request
2. Use is on player profile and than clicks on recentMatches, in this case it would be enough to do just 1 request, to get the data for matches. But we again make 2 requests for both player card and matches.

TASK:
We need to figure out, when you already have player info, don't make the request for player info again.
The code is here https://github.com/cohstats/coh3-stats/blob/master/pages/players/%5BplayerID%5D.tsx#L172

Problem: We have ~25k player card displayed each day, but requests on the BE are ~50k. It's eating $$

We should add map images to the recent match tables for better user experience.

If you navigate to the leader board by clicking on a players rank from their player standings page, the pagination component on the leader board always highlights the first page even if it is on a different page.

We have images of maps on the recent games.

I would be great - if you clicked on the image, it would show it in a big version.

We need to create an universal component for this. It would be great to look if mantine maybe have this?
Maybe using modal https://mantine.dev/core/modal/?

For example as we have in COH2 https://coh2stats.com/matches/335162384

We need to setup the page navigation on the top of the page

Properly deal with the theming and other stuff

Wee need loading bar for the SSR pages
https://blog.logrocket.com/how-to-build-a-progress-bar-indicator-in-next-js/

We want to have nprogress on top the of the site

We will most likely try to provide the same analytics as on coh2stats.com

https://coh2stats.com/stats?range=month&statsSource=all&type=1v1&race=wermacht&timeStamp=1677628800

https://coh2stats.com/map-stats?range=month&type=4v4&map=8p_redball_express&timeStamp=1675209600

https://coh2stats.com/stats?range=month&statsSource=all&type=general&race=wermacht&timeStamp=1677628800

Feel free to discuss any other analytics which would be interesting.