[Windows/Mac] "Now Trending" widget

[ItsSim]

"Now Trending" Widget

A widget that shows the most active lots in game at the moment. Will replace the current Twitter widget.

Features (see mockup below)

• Total users online
• Lot category icon and category name (via tooltip)
• Lot name
• Lot owner
• Lot player count
• 🔥 icon for lots with >15 players on it (or some other condition)
• Refreshable via the Refresh icon on the home screen

Development checklist

• [x] 1. Data proxy (a node.js server program) which will run on beta.freeso.org, to avoid users hitting the FreeSO API directly (potentially overloading that server). Proxy code location: https://github.com/ItsSim/fsolauncher/tree/develop/other/fsolauncher-proxy
  • [x] 1.1. Timer that invokes the official FreeSO API every X minutes to obtain the latest lot info and stores it in a memory (a global variable). The combination of these API calls should yield all the data needed for the widget:
    • [x] 1.1.1. Get online lots, sort by avatars_in_lot and pick the top 10
      • Endpoint: https://cdnapi.freeso.org/userapi/city/001/lots/online?compact=false
      • Docs: https://github.com/riperiperi/FreeSO/wiki/Public-API#get-online-lots
    • [x] 1.1.2. Use the location_id to get the owner_id (owner of the lot, since the online lots endpoint does not return it).
      • Docs: https://github.com/riperiperi/FreeSO/wiki/Public-API#get-lot-by-location
    • [x] 1.1.3. Use the owner_id to get the avatar name
      • Docs: https://github.com/riperiperi/FreeSO/wiki/Public-API#get-avatars-by-ids
    • [x] 1.1.4. As for the total player count, use sum of avatars_in_lot from the first call.
  • [x] 1.2. Small express.js REST API that returns the latest data available from memory (data obtained from the timer in the previous point).
• [x] 2. Widget UI (CSS, HTML, JavaScript)
  • [x] 2.1. Ensure it looks good on every theme
• [x] 3. Widget data fetching & updating logic (using fetch)
  • [x] 3.1. Refresh widget when the refresh icon is clicked
• [ ] 4. e2e tests

Design Preview (Mockup)

• Icons are Material Design Icons (Rounded & Fill) https://fonts.google.com/icons?icon.style=Rounded

[ItsSim]

API is done in ./others/fsolauncher-proxy in commit 42c9351 Can be tested with npm run start

[ItsSim]

Final result. Lot images are now used, and some tweaks so that it's consistent between dark & light themes.

[ItsSim]

added in 6916c3a6221caf577b8f6135e8b253d97f845ab4