Rainbow Six: Siege stats side built on Nuxt + UnoCSS

[warped kelp]

Have always used vue 3 but needed SSR for dynamic meta tags so decided to give Nuxt a try, been working well enough!

https://stats.cc

[blissful raven]

A Sieage/CS stat website is something I had in mind for quite a bit. I guess GG no RE, amazingly done

I'm really interested in how you handle the leaderboards refresh, is it based on page visit or a cron? I've noticed the site slowed down quite a bit during a refresh

[blissful raven]

ok yes, it does seem to be triggered on a page navigation, that sometimes could end stuck like this (fixed with an additional page refresh)

[chilly swallow]

sick animations

[warped kelp]

We have a websocket that notifies when the leaderboard needs an update, as well as when a profile needs an update, that way it's instant as soon as new data is ready.

[warped kelp]

could you send a reproduction of this?

[warped kelp]

thanks!! The transition of the main logo/header is pretty easy - just using this experimental nuxt feature

    experimental: {
        viewTransition: true,
    },

[tame grail]

sick website

[flint vortex]

A very beautiful website

[urban mason]

What kind of page transitions do you use or is that already being handled by viewTransition? Looks great!

[sage iron]

The site is really beautiful, I have a question what did you use to make this graphic?

[warped kelp]

Chart.js! I made my own composable around it instead of using a library like vue-chart-3. Feels like I have more control that way.

The tooltip is a custom HTML tooltip which chartjs supports

[warped kelp]

I tried to find the blog I followed to get it working, but the code is basically:

.app-header-text {
    /*noinspection CssUnknownProperty*/
    view-transition-name: app-header-text;
    transform: perspective(1px) translateZ(0);
    will-change: transform;
    backface-visibility: hidden;
}

.app-header-logo {
    /*noinspection CssUnknownProperty*/
    view-transition-name: app-header-logo;
}

I think that's all it is 🤔

[sage iron]

Ok thank you that's what I thought I had managed to make nice graphs with Apexchart but I have the impression that chart.js allows more things

[urban mason]

Ah cool, thank you very much 🙂
Site looks really great!

[blissful raven]

Sorry, haven't had time to do it, and now I cannot reproduce it. I guess it was an issue on my end then

[warped kelp]

All good! Thanks for trying

[proven dagger]

This takes me back to building my own Overwatch stat page when the game just came out. Back then in PHP.
I have to say this must be the most elegant stat page I have seen so far. Kudos!

[warped kelp]

Thanks!! Appreciate it. I never could get used to php… tried hard to love laravel but couldn’t