Professional e-sport tournament payouts for Counter-Strike now total nearly $100M; players have everything from huge salaries to sport psychologists, but still no good way of visualising game data.
CS Weapons provides information and comparisons on Counter-Strike weapons, featuring real time analysis and calculation of weapon data.
Simulations are performed live in the browser and are scenario reactive, dynamically updating based on the part of the body hit, your range from the target and more. Alternate modes such as burst fire and silencers are all supported. Modelling additional aspects like recoil and accuracy with customisable shot intervals is underway.
Technical and design highlights:
- Data-driven Vue PWA.
- Installs to supported devices for a native app experience and works offline; a Service Worker notifies users when an update is available.
- Clean URLs that populate application state to support linking directly to comparisons.
- Device sharing experience using the Web Share API.
- Dynamic SVG charts that react in real time and are fully responsive.
- Immersive chart viewing experience with the Fullscreen API.
- Supporters are rewarded with additional features; as a "Jamstack" application, CS Weapons utilises AWS Lambda to query a membership API using "serverless" functions that are triggered through an Auth0 authentication rule.
- Custom material design built on Vuetify, with its colour palette, typography and user experience lovingly pruned and cared for.
- Blistering performance and load times.
On a personal note, I'm trying to do my best as a new dad, so building this during my free time on top of that, full-time work and a house move has been really challenging and if I'm honest with myself, probably not that healthy. Still, after chipping away at this for so long it feels great to finally put it into the wild across the game's community this week.
This looks really great, and shows a lot of polish in its interface. I liked how you had different preset ways of filtering the data (SMGs, Rifles, etc), as well as linkable results pages. Being able to select armor and hit-locations seems to just be a scaling factor, but also was a neat touch.
I think there might be some value in adding a duration slider (as an alternative to shot count). Because most items you're comparing has varying rates of fire (e.g. P90 vs UMP45 vs Mac10), the slower weapons will often show more "damage" (over N shots), whereas the DPS might be similar or vary a lot.
It might also be interesting to have weapon selection filters based on cost -- e.g., comparing rifles and SMGs of similar cost, or things you can buy on the first or second round.
Edit: I also just went to the advanced charts section, encountered your buy-me-a-coffee link. While I personally don't like signing up for additional tiers of access, I think this was a very nicely done way of doing so.
Some excellent feedback there; thank you! That's not just a pleasantry either - those were seriously insightful comments you made.
Having cost selection is a fantastic idea, especially given the commonly used terminology in the game lends itself nicely ("Eco buy" etc).
Your comment on duration hints at something that I have felt but not articulated in my notes so that was very helpful. Like you mentioned, this is particularly relevant in the SMG category because the amount of rounds they fire in an average engagement is that much higher and the disparity between their rate of fire is greater (the MP9/P90 are in a league of their own in particular).
Seconded. I've played CS casually for almost two decades now and, although I specific details have changed over time, I never really knew the specifics about how each weapon effected you. For instance, I've always considered the SG553 to be just a less accurate version of the AUG (without actual evidence), but it actually inflicts higher damage and also slows you down a bit.
> Professional e-sport tournament payouts for Counter-Strike now total nearly $100M; players have everything from huge salaries to sport psychologists, but still no good way of visualising game data.
Cue "SG was overpowered for five years and nobody noticed" (because real CS players use the AK, not the "cod noob gun").
It's cool that you market it as material design and sharable and having a fancy stack... but all I care is whether I get useful info about CS:GO. The ugliest maps programmed for training are more useful imho.
The charts don't help me learn anything about the data more than the table, and the stats like RPM or deploy milliseconds mean nothing to me. If you ask CS players how they learn timing, it's usually mouse tapping a rhythm from some song.
The key takeaway is that you need creative ways to actually help me understand which weapon to pick in which situation.
I actually modified what I posted elsewhere (Reddit for example) for this audience as I imagined those technical details were more relevant. Fair point though.
I understand what you mean about the charts; some prefer things displayed visually so I think it's important to meet the needs of different types of users.
For what it's worth, I was glad you shared your stack, was actually kinda curious ! Very nice website, thanks for sharing, hope you had a blast building it ;)
I've built an analytics website for StarCraft 2 and found something similar.
It's very easy to get 'cool' statistics and information, but it's very hard to create something 'cool' or novel that's actually useful for players trying to improve.
CS Weapons provides information and comparisons on Counter-Strike weapons, featuring real time analysis and calculation of weapon data.
Simulations are performed live in the browser and are scenario reactive, dynamically updating based on the part of the body hit, your range from the target and more. Alternate modes such as burst fire and silencers are all supported. Modelling additional aspects like recoil and accuracy with customisable shot intervals is underway.
Technical and design highlights:
- Data-driven Vue PWA.
- Installs to supported devices for a native app experience and works offline; a Service Worker notifies users when an update is available.
- Clean URLs that populate application state to support linking directly to comparisons.
- Device sharing experience using the Web Share API.
- Dynamic SVG charts that react in real time and are fully responsive.
- Immersive chart viewing experience with the Fullscreen API.
- Supporters are rewarded with additional features; as a "Jamstack" application, CS Weapons utilises AWS Lambda to query a membership API using "serverless" functions that are triggered through an Auth0 authentication rule.
- Custom material design built on Vuetify, with its colour palette, typography and user experience lovingly pruned and cared for.
- Blistering performance and load times.
On a personal note, I'm trying to do my best as a new dad, so building this during my free time on top of that, full-time work and a house move has been really challenging and if I'm honest with myself, probably not that healthy. Still, after chipping away at this for so long it feels great to finally put it into the wild across the game's community this week.