GeoChatter-Map v1.0.0
- Send guesses, make temporary guesses
- Set username colors
- Set user flags
- View GeoChatter borders, flags and regional names on the map
- Multiple MapBox tile layers and OSM layer to play on
- Syncronized game configurations via websockets, configured by streamer client
Review Summary
Extension Summary
- This extension was developed for the "GeoChatter" desktop application, which is currently in closed-beta, tested by Twitch streamers.
- GeoChatter's official site: https://geochatter.tv/
- GeoChatter allows live stream viewers to play the game of GeoGuessr with the live streamer. Viewers make their guesses, set their username colors and flags by establishing web socket connections to GeoChatter servers, which then enable them to send their guesses to GeoChatter clients through the GeoChatter servers.
- This extension requires users to grant access to the extension. If the user grants access, user auth tokens are sent with their websocket messages to validate the user. If the user does not grant access, no websocket connection gets established and they are prohibited from sending guesses to GeoChatter servers.
- This extension's version 1.0.0 is the new version of its previous 0.1.0 version that is currently in production.
- GeoChatter is not yet a publicly available application, it's public release is planned for September 1st.
Expected insallation and usage steps:
- Streamer installs the extension
- Streamer configures the extension by following the instructions on the configuration panel, which explains retrieving GeoGuessr user ID of their GeoGuessr account, which is then used by the extension to decide which client to get game configurations from.
- Streamer starts a game of GeoGuessr in the GeoChatter app.
- Viewer opens the extension, grants access.
- A connection via streamer's configured GeoGuessr user id begins and viewer side gets the game configurations and files necessary.
- Viewer picks a location to guess and clicks "Send Guess" button or uses the 'dice' button to make a random guess.
- Viewer's guess gets sent to GeoChatter servers over the websocket connection established and get processed accordingly.
- If viewer's guess was valid, it shows up in the scoreboard of the streamer client.
Technical Notes
+ Source Code
- This extension was written in TypeScript, and built with a shell script to automate building the code with esbuild.
- Output of the source code is bundled into 1 file, all files used are documented in detail and available open source
- Using the build.sh to build the project is highly recommended
- Source code is available on GeoChatter Github organisation in its own repository named 'GeoChatter-Twitch-Extension':
+ Release with all files including the zip: https://github.com/GeoChatter/GeoChatter-Twitch-Extension/releases/tag/1.0.0
+ Repository: https://github.com/GeoChatter/GeoChatter-Twitch-Extension/tree/v1.0.0
- General structure information of the source code:
+ build.js : Builder script for esbuild
+ build.sh : Builder shell script to build and create the extension zip
+ tsconfig.json : Main source .ts files configuration (except config source files)
+ tsconfig.other.json : Config source .ts files configuration
+ src/*.ts : Extension source files for the front end
- src/main.ts : Entry point of the extension
- src/app.ts : Application layer
- Other files contain are utility namespaces
+ src/config/config.ts : Extension configuration page source file
+ lib/* : Other assets and libraries to be copied over to final output folder (dist/)
- lib/component.html : App window
- lib/config.html : Configuration window
- lib/overlay.css : Custom CSS styles
- lib/leaflet.css : Leaflet 1.8.0 CSS (https://unpkg.com/leaflet@1.8.0/dist/leaflet.css)
- lib/jquery-3.6.0.min.js : jQuery 3.6.0 (https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js)
- Build Outputs:
+ dist/* : All files for the extension zip
+ build/* : .ts files compiled to .js
+ decl/* : .ts files definitions
+ meta-main.json : Meta data of the esbuild built of src/*.ts
+ meta-config.json : Meta data of the esbuild built of src/config/config.ts
+ dist.zip : Final zip file for the extension
- All dependencies except jQuery are bundled on build into 1 output file, named main.js. jQuery is included separetly in component.html.
+ JavaScript Libraries Bundled in main.js
- Leaflet 1.8.0: Map viewing library, (https://leafletjs.com/)
- turfjs: Geospatial analysis and helper library used for drawing shapes on Leaflet maps, (https://turfjs.org/)
- signalR: Websocket library for server connections, (https://www.npmjs.com/package/@microsoft/signalr)
+ Reasonings for the URLs present in the Allowlists
- Image Domains:
+ https://api.mapbox.com/styles/ : For using MapBox tile layers
+ https://*.tile.openstreetmap.org/ : For using OpenStreetMap tile layer. Wildcard is used for subdomain because multiple subdomains (a, b, c, d) serve the images for load optimization and are all used in runtime.
- URL Fetching Domains
+ https://api.geochatter.tv/, wss://api.geochatter.tv/guess/geoChatterHub : For Production WebSocket connections to GeoChatter servers
+ https://dev.geochatter.tv/, wss://dev.geochatter.tv/guess/geoChatterHub : For Development WebSocket connections to GeoChatter servers
+ https://service.geochatter.tv/ : For getting resource files for ISO data, GeoJSON and flag SVG files
+ ESBuild Documentation: https://esbuild.github.io/api
Review Channel Information
- The review channel will be streaming test games 24/7 (https://www.twitch.tv/alphito2016). Extension will be most likely successfully working and able to send guesses. However in case of connection to server being lost unexpectedly by the streamer client could be something to be aware of. In such case, extension will display an appropriate message to user about what has happened to avoid confusion.
- If extension displays an error message, try reloading the extension by clicking the green/white "gear" icon and then clicking the blue/white "refresh" icon.
Full Changelog: 0.1.0...1.0.0