Tips for UI, translations, insights, swiss, accessibility - lichess-org/lila GitHub Wiki

User interface

The mithril or snabbdom UI modules are in ui/. Say we work on ui/round, the playing UI.

Enable auto-recompile:

cd ui/round
yarn run dev --watch

To enable auto-recompile for the .scss files:

cd ui
yarn run gulp css

Translations

  1. New translation keys are added in translation/source/site.xml in British English.
  2. Then regenerate translation keys for Scala: bin/trans-dump
  3. Do not touch translations/dest/. New translations from crowdin will automatically be applied here.

To make a new translation key available to the client JS, add the key to the appropriate page's key list.

If you need to add a new file to translation/source (for example to translate a completely new page), you also need to add the name of the file (without the extension):

In bin/trans-dump: here

In /build.sbt: here

For an in-depth explanation of how the whole translation system works, see How translations work.

Puzzles

Import some puzzle data.

Forum

Create the default categories.

Swiss

You need to install and run bbpPairings. Mind that Lichess uses cyanfish fork.

To set up a swiss tournament, you need to be a team leader. For the Lichess one's to be working properly it's advised to create the team of the official Lichess swiss.

Insights

  1. Download insights sample data.
  2. run
mongorestore --db lichess-insight --collection insight insight.bson
  1. Register an account named thibault.
  2. Either play one rated game with it or hack this function.
  3. Access to http://localhost:9663/insights/thibault/

Font icon to SVG

Extract all fonts as SVG fontforge -lang=ff -c 'Open($1); SelectWorthOutputting(); foreach Export("svg"); endloop;' lichess.sfd Where lichess.sfd is https://github.com/lichess-org/lila/blob/master/public/font/lichess.sfd

Accessibility

To activate Accessibility mode on lichess, press tab then enter on the homepage.

Most of the code is located in ui/nvui, and it is then loaded as a plugin.