GithubHelp home page GithubHelp logo

ps2alerts / website Goto Github PK

View Code? Open in Web Editor NEW
16.0 16.0 3.0 30.32 MB

The frontend website of the PS2Alerts statistics system, displaying real-time metrics and aggregated statistics to players of the game Planetside 2.

Home Page: https://ps2alerts.com

License: GNU General Public License v3.0

Dockerfile 0.22% Shell 0.08% JavaScript 1.52% Vue 84.94% TypeScript 11.46% SCSS 1.78%
ansible javascript kubernetes planetside2 terraform typescript

website's People

Contributors

dependabot[bot] avatar depfu[bot] avatar maelstromeous avatar microwavekonijn avatar oslohes123 avatar ryanjsims avatar zhenghung avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar

website's Issues

Homepage Features

  • Victory Statistics
    • Victory Timeline
    • Server victory distribution table
    • Continental victories distribution table
    • Last Week's Victories
    • Last Week's Graph
    • Last 30 days Victories
    • Last 30 days Graph
    • Filters by bracket and continent (breaking it down per world)
    • #352
    • Trigger percentages (#352)
  • Combat Statistics
    • Faction Combat totals per server
    • Kills by per faction, per server
    • Kills by Weapon, by total and by server
    • Kills by Class, total and by server
    • Avg Kills per person in total and by server
    • #350
  • Population Statistics
  • Vehicle Statistics
    • Kills / Deaths by Vehicle
    • #349

Faction vs faction Combat Metrics

Request for a Empire vs Empire Combat statistic, showing e.g:

Amount of kills VS made against NC and TR separately.

https://www.reddit.com/r/MillerPlanetside/comments/48oe8k/while_the_farm_was_glorious_the_shitters_won/d0le8b2?context=3

Execution

Faction Focus

Table, 3 bars one for each faction showing their summary of kills + base captures + vehicle destructions (maybe), with a line in the middle of these bars showing the 50% point, indicating if they're focusing another empire or not.

Double teaming summary

Then, show overall bar based on the above showing a summary of all kills made, which should give us if they were being double teamed.

Website Alpha / MVP

Imo the below is going to be site's MVP (pre alpha):

  • Shows currently running alerts (All Alerts page & RTM) #54 #55
  • Shows past alerts and their results (All Alerts Page) #54
  • Shows real time updates of the current alerts (RTM) #55
  • Shows the following stats on the Alerts page #56
    • Basic faction combat statistics (total deaths / kills / suicides / TKs / headshots)
    • Not real time sortable leaderboard (making the killboard real time is potentially quite a lot of work) - recommend use of DataTables for this

All this created out of purely static API calls, no real time data just yet as we've not set up the API websocket server to facilitate this. Real time monitor will do an AJAX call to get the latest updates every 10 seconds or so.

This will also not have proper styling, just pure information.

We also need a design: #53

MVP All Alerts Page

Part of MVP: #52

We require the ability to list recent alerts, sorted by time end. This should be a matter of:

  1. Update the API to enable to request data in a sorted manner (ps2alerts/api#53)
  2. Build the VueJS component which will request data from the API and render it
  3. Style the page

Outfits and Servers

Originally raised by @rafamem

Hello! The followed outfits are from Genudine (PS4 US) not from Miller:

http://www.ps2alerts.com/profiles/outfit/37533427458382531

http://www.ps2alerts.com/profiles/outfit/37534205255888743

http://www.ps2alerts.com/profiles/outfit/37534923133322586

http://www.ps2alerts.com/profiles/outfit/37535059393448407

http://www.ps2alerts.com/profiles/outfit/37534923133360458

http://www.ps2alerts.com/profiles/outfit/37536033136707474

Also, in Genudine:

Suicide Latin Squad = LSS
Vanu Latino = VSLA
TerranHispanohablantes = THHO
Vanu Boricua Division = VBD

Those listed in Miller do not appear in this ranking: http://www.ps2alerts.com/leaderboards

Vehicle totals

Vehicle totals were never completed, located on the homepage.

Territory bars don't represent cutoff territory %

Currently territory cutoffs aren't being shown in the bar. Technically speaking they're not shown in the game either, but there ideally should be some way of showing cutoffs.

The way this was handled in the old ServerSmash code was to draw a grey bar in the middle of the rest of the bars, and expand it's width when there's cutoffs.

Facility map on alert pages

We require the ability to render a map in the alert, update it in real time and show a point in time snapshot for the continent.

Current map LODs: https://drive.google.com/drive/folders/1EOWCVXPi9Di61gzSZECBpJfDu5W-nK3M

LOD 0 - 1 pixel = 1 meter

Will need to figure out how to extract these into tiles for Leaflet.

This library looks promising to extract it into tiles: https://github.com/mapnik/node-mapnik

Example

https://psb.mattcavanagh.me/match/58

The map tiles no longer render sadly, but you can see by the broken image tiles what it was meant to do. Looks like I used to store the data within files (bad bad bad), below is the data for the map:

https://psb.mattcavanagh.me/assets/js/map/map_data_indar.js

This then looks like it adds the layers to the map: https://psb.mattcavanagh.me/assets/js/map/map_engine.js

Census

Looks like you can get hex and region information here: http://census.daybreakgames.com/get/ps2:v2/zone/?zone_id=2&c:join=map_region^list:1^inject_at:regions^hide:zone_id(map_hex^list:1^inject_at:hex^hide:zone_id%27map_region_id)

Settle on technologies and framework to be used for the website

The current website is in Angular 1, which is very very old. I was also very new to creating SPAs and JavaScript in general back then, however the design of the website still continues to hold to today's standards, mostly.

I suggest we gut the innards of the site and start that part again, however attempting to keep the design and feel of the site relatively intact, maybe with a few UX considerations.

To discuss August 20th, please offer your suggestions here in the meantime.

Changelog - Time exposure issues

Basically if the user hasn't returned in the past 30 days and there's been changes, they're not shown.

Ideally, we should check for if the user has EVER visited the website. If not, show them the most recent changes.

If they HAVE visited the website (and updatesSeen is populated) then go off the number of changes since they last saw something.

Alert History Page

Features:

  • Last 24 hours of all servers (no limit)
  • Last 24 hours of a selected server (no limit)
  • Filter by Server
  • Filter by Zone
  • Filter by Time Bracket
  • Filter by Faction
  • Alerts between a date range
  • Alerts between a date range and on a selected server
  • Alerts won by a selected faction, between a date range
  • Dynamically append alert upon websocket end alert
  • Represent dynamically added alerts that may not be part of the selected filters
  • Show In Progress Alerts

Add filters to homepage by PRI, AFT and MOR time brackets

Homepage should be filterable by the following times:

Graveyard: 00:59 - 11:59
Afternoon: 12:00 - 16:59
Primetime: 17:00 - 00:59

There is code within the API to pull out each alert based on the above times for each server's local timezone. I based EU servers off CEST, US servers off PDT and Briggs off AUS (but it's dead now)

Facility statistics with heatmap

Generating maps using the vast amount of capture data to hand would be useful.

For example, on a per continent basis, I should be able to show heat map of all captures recorded. This would give a very nice indication of which bases are the most contested.

Filters:

  • Server
  • Continental
  • Faction wins (bit more tricky / intensive as we'll have to get all alerts first then filter by that)
  • Outfit captured (may expand to a separate outfit section)

Gruntfile ENV injection

The current way we're injecting ENVs into the Gruntfile is suboptimal, it should be coming from the environment variables of the container. Currently they're just hardcoded into the file.

Inclusion of a production server

The dev environment uses Vue cli for serving the app to a browser, however this will not do for production. As simple node or nginx server is needed to serve the app. A requirement could be that the app should be server side rendered, but it is not that important as most search engines are optimized to index SPA's nowadays.

Website Feature List

Sit down and figure out exactly what we want (and can) show to users of the website. We will use the current website as a basis, and expand upon it.

Meat of this ticket will be added come August 20th for our developer meeting.

Alert Detail page

Showing the statistics of the alert and details on what went on.

Features:

  • Basic Alert Information

Statistics:

  • Territory Capture Bar
  • Population history metrics
  • Population averages

General Combat Statistics

  • Kills, Deaths, TKs, Suicides counts
  • Faction Kills timeline

Leaderboards

  • Players Leaderboard
  • Outfits Leaderboard
  • Weapons Leaderboard
  • Vehicles Leaderboard

Class Combat

  • Totals
  • Player Leaderboards

Map Stats

  • Map Timeline (#28)
  • Real Time Map (#28)
  • Capture Log
  • Facility Capture Statistics
  • Faction territory versus stats (who taken who's territory)

Other Stats

Generate template based on old site using Tailwind

As the title says. Requires some reconfiguration of the tailwind config file. Also no Sass or Less, Tailwind should have everything we require either by it's utilities or the classes it generates from it's configuration.

Leaderboards

Related to #28.

5 Tabs as separate pages

Tab 1 - Top 10

  • Shows all top 10 of players, outfits and weapons (possibly as a 3 column thing)

Tab 2 - Players Leaderboard

  • Shows ALL players (paginated) and their position. Will have to calculate the positions in Javascript, that's way too much work for the API to do.
  • Will have to develop API endpoint to accept order direction and fields.
  • Add ability to search for a player and their position. Maybe somehow make it so we figure out the offset then re-render the leaderboard based on that.

Tab 3 - Outfit Leaderboard

  • Same format as players.

Tab 4 - Weapon Leaderboard

  • Same format as players.

Tab 5 - Vehicle Leaderboard

  • Shows statistics for all vehicles, but not by player (since those stats are borked).

MVP Alerts Page

As part of MVP: #52

Once we have the ability to see currently running alerts, we need to start showing basic alert information. We need to show the following on a per-alert basis:

  • Victor
  • Victory conditions (territory %)
  • Faction combat metrics
  • Leaderboard for Players (outfits as a stretch goal)

Containerise

Website needs properly containerising so it can be used in a k8s environment and distributed correctly.

Hall of Fame page

Hall of Fame, highlighting things such as:

Definates:

  • Top Farmers (top by kills)
  • Top Crops (top by deaths)
  • Top Backstabbers (top by TKs)
  • Top Daredevil (top by suicides) - may change name of this to prevent {{triggers}}
  • Top Outfits (by kills initially)
  • Top Outfits by Captures
  • Top Vehicles - will see if server filtering is possible
  • Top Weapons - will see if server filtering is possible
  • Top Alerts by Kills, Deaths, Tks and Suicides
  • Most contested facilities

Possibles:

  • Top Tanker (top by Tank to everything)
  • Top Ace (top by ESF to ESF kills) - might be a bit difficult but I'll try
  • Top Medic
  • Top Platoon leader - possibly, depends how hard the data is to get
  • Top Classes (top players by each class by metrics (kills initially))
  • Top Players by Sanctioned Weapon kills - this is an interesting one... does anyone have a definitive list of what is classed as a "Sanctioned Weapon"?
  • Top Cheese Grater - Top MAX players
  • Top Ammo Donkey
  • Top Tank Mine Tosser
  • Sticky Gren Supremo
  • Top Welder
  • Turret Meister - kills with MANA turret
  • Pocket Engi (Top max repairs)
  • Bubble Gum Vendor (Top medic bubble shield points)
  • Necromancer (Top revives)
  • On point (Top point captures)

Suggestions:

  • Top players by kills with sanctioned weapons
  • Top vehicle killer - need to confirm I collect this info
  • Have monthly, weekly and daily leaderboards

Etc

Implement version based caching

One topic I'm really struggling to find an answer for from Google is how to properly serve assets with a random / injected hash in order for browsers to cache correctly versioned CSS / JS. Right now it's just being loaded like:

/app.js

Which may not change between versions after it's first loaded as browsers cache that path.

Ideally, it needs to be with a random sha / hash on it, so it turns into this:

/app-aeeh24.js

This will then mean all assets are fresh and correct. Ideal situation would be to inject the build SHA which is already available to Vue enviroment via injection from GitHub actions.

Alert Leaderboard mobile performance is painfully slow

Mobile rendering of the leaderboards results in a very poor experience. Loading times are slow for redraws, although do improve once a user searches for something.

Also the headers of the table don't line up with the data upon horizontal scrolling.

Need to investigate if these issues can be mitigated or somehow changed on mobile devices. May have to paginated for mobile.

MVP Real Time Monitor

As part of MVP: #52

We need the ability to display all ongoing alerts prominantly on the website, which will use real time data from the API with the following information:

  • World
  • Zone
  • Time Remaining (countdown)
  • Current status (territory %)

Setup VueJS

Requirements:

  • Vue;
  • VueRouter;
  • Vuex;
  • SSR;
  • Lazy import of files for views(part of Webpack);
  • Webpack with a build pipeline;
  • PurgeCSS;
  • TailwindCSS(though we haven't formally agreed on it, it can always be swapped out later).

Archive old website

  • Move database from current server to archive
  • Set up reverse proxy on new server
  • Set up dynamic DNS client on router for old.ps2alerts.com
  • Decommission old server files

MVP Design

Part of #52

We require a box design / mockup for the PS2Alerts homepage / alerts page / all alerts page. This is going to be used as a basis to build the website upon, and we'll have a session to discuss and ratify it into the rest of the design.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.