Hall of Fame for Cities: Skylines II

A Cities: Skylines II mod that allow players to take and upload screenshots of their city, and share them with the community.

Screenshots are uploaded to a server, and can be viewed by other players as a background image in the main menu, with information about the creator, the city name, and controls to refresh the image, upvote or hide the UI to better see the image, to name a few features.

The source code for the server is at toverux/HallOfFameServer

For fellow CS2 modders in search of code samples, the source code notably features:

• A C# and UI mod;
• Use of React portals and manual DOM manipulation to patch specific parts of the game's UI that aren't exposed in the modding API;
• Harmony transpiler patches for .NET IL-level modding.

Acknowledgements

The mod is directly inspired from the homonymous mod for Factorio, Hall of Fame. Loading Screen Mod Revisited for Cities: Skylines 1 also provided a similar feature.
Both mods featured hand-picked screenshots, whereas this mod allows everyone to share their creations.

Special thanks to:

• The Cities: Skylines Modding Discord community in general for their help.
• @chameleon_tbn for providing some icons the mod uses.

Features & Roadmap

Current major features:

• Have pictures displayed in the main menu.
  Pictures show various information about the city, the author, etc.
  
• Toggle menu UI visibility to admire the pictures (like a slideshow).
• Make screenshots and upload them via a dedicated interface, all in-game.
• Fine-tune how the algorithm chooses screenshots that are presented to you (recent screenshots, most liked, ancient and forgotten, etc.).
• Choose between Full HD and 4K resolution for downloaded pictures.
• Report pictures that are inappropriate.

Roadmap: see our feedback & feature requests board here: feedback.halloffame.cs2.mtq.io/

Development

Installation

• Standard CS2 modding toolchain;
• Bun as a replacement for Node in the build toolchain.
• bun i to install UI mod dependencies.
• Recommended: enable --developerMode --uiDeveloperMode as game launch options.

Here's a game launch command to also skip launcher in Steam:

"C:\Program Files (x86)\Steam\steamapps\common\Cities Skylines II\Cities2.exe" %command% --developerMode --uiDeveloperMode

Development workflow

The UI mod will be built automatically with the C# solution.

However, if you are actively working on the UI, you may recompile it on change with bun dev.

You can enable the game's UI live reload on change with --uiDeveloperMode.

Debugging C# code can be done following these steps: https://cs2.paradoxwikis.com/Debugging.

Debugging JS code can be done with the browser's dev tools by opening http://localhost:9444 (sadly not working well on Firefox, Chrome is recommended).

Logs are situated in either:

• %appdata%\LocalLow\Colossal Order\Cities Skylines II\Player.log
• %appdata%\LocalLow\Colossal Order\Cities Skylines II\Logs\UI.log
• %appdata%\LocalLow\Colossal Order\Cities Skylines II\Logs\HallOfFame.log

Publishing a new version

• Update Version and FileVersion in HallOfFame/HallOfFame.csproj;
• Update HallOfFame/ChangeLog.md with only what's changed since the last version;
• Update HallOfFame/LongDescription.md if needed;
• @todo

Code style

TypeScript

TypeScript code is formatted and linted by Biome. Run bun check to check for linting errors, format files and autofix simple issues.

You can also use Biome directly with bun biome.

The formatter and linter should run as a pre-commit hook if you have it installed, which should be done automatically when running bun i (otherwise run bun lefthook install).

I'd suggest to use a Biome plugin for your editor to ease development.

If a rule seems out of place for this project, you can either disable/reconfigure it in the biome.json file or disable it with an annotation comment, but these should be justified and concerted.

C#

For C#, prefer using Rider, as code style and linting settings are saved in the project. Reformat your code before committing (CTRL+ALT+L with Rider).

At the very least, please ensure your IDE has .editorconfig support enabled.

Commit messages

Commits must follow the Conventional Commits specification and more specifically the Angular one.

Scope can be one or more of the following:

• mod: for general changes to how the mod "presents itself" to the game or user;
• cs: for C# mod changes;
• ui: for UI mod changes;
• options: for changes in the mod options;
• menu: for changes in the main menu part of the mod;
• game: for changes in the in-game part of the mod;
• i18n: for changes in translations and translations system;
• deps: for dependencies updates;
• Propose new scopes if needed!