Customization Guide

Make Crown Rush Checkers your own game: new characters, new pieces, new music, your own texts, colours and a stronger or weaker computer opponent. Every recipe below is a short list of steps and names the exact file to open. You do not need to know how to program. All pictures on this page are real screenshots of the game.

1. Before you start

Free tools you need:

• A code text editor: Visual Studio Code (Windows, Mac, Linux) or Notepad++ (Windows). Do not use Word or WordPad: they break the files.
• An image editor that exports WebP with transparency: Photopea (in the browser), GIMP or Krita. You can also save a PNG in any program and convert it to WebP at squoosh.app.
• For music: Audacity (exports MP3).
• Node.js 26.13 or newer (nodejs.org, the LTS installer). It is needed once to rebuild the game after you change something in source/. The main guide explains the installation step by step (Optional development).

Which folder to edit. The download has two copies of the game:

• source/ is the editable project. Recommended way: change files inside source/, run npm run build and upload the contents of source/dist-static/. All recipes below use this way.
• game/ is the finished game. Quick way, pictures and music only: replace a file inside game/assets/ with a new file that has exactly the same name, and upload. The complete list of pictures shows the name of every file in game/assets/.

First time only: open a terminal inside source/ and install the tools.

npm ci

See your changes on your computer. In source/, run the command below and open the address that appears (it starts with http://127.0.0.1). The page reloads by itself when you save a file. Stop it with Ctrl+C.

npm run dev

The game must be opened from a web address like that one. Double-clicking index.html does not work.

2. Where everything is

The numbers on each screenshot match the table below it. The words in quotes are what the game shows in English.

Opening screen

1 2 3 4 5

Mode select

1 2 3 4 5

Character select

1 2 3 4 5

Match

1 2 3 4 5 6

Pause menu

1 2 3 4 5

Campaign map

1 2 3 4 5

Collection

1 2 3

Victory screen

1 2 3

Settings

1 2 3 4 5

Recipe A: replace a picture

1. Find the picture in the tables above or in the complete list of pictures. All artwork is in source/public/street/, in folders by subject: characters/, expressions/, heroes/, poses/, win/, pieces/, arenas/, plaza/, table/, menu/, hud/, challenges/, splash/.
2. Open the file in your image editor and note its size in pixels (the list shows it too).
3. Draw or paste your picture with the same size in pixels. Keep the background transparent where the original is transparent.
4. Export as WebP with the same file name, replacing the old file.
5. Run npm run build in source/ (or look at it first with npm run dev).

A picture with a different size still loads, but it may look stretched or out of place.

Recipe B: change the logo, the game name and the backgrounds

1. Logo: replace source/public/street/splash/logo.webp. The same file is used on the opening screen, in the menus and during the match, in every language. source/public/street/logo.webp is a spare copy: replace it with the same picture.
2. Name in the browser tab: open source/index.html and change the text between <title> and </title>, and the sentence after content=" in the line with name="description".
3. Name read by screen readers: in source/src/i18n.ts change title: and subtitle: (they appear twice: Portuguese and English).
4. Opening screen: background source/public/street/plaza/scene.webp; the three friends at the table source/public/street/plaza/crew.webp.
5. Match backgrounds: Checkers Plaza source/public/street/plaza/match.webp (phones held upright use plaza/match-portrait.webp); Skate Park source/public/street/arenas/stones.webp; Night Rooftop source/public/street/arenas/library.webp. The file names stones and library are internal names: keep them.
6. Menu background: source/public/street/menu/bg.webp. Campaign map: source/public/street/campaign.webp.

Recipe C: change a character

The game has three characters with the internal names amora, tito and olivia. Keep these names in the file names; change only the pictures and the name shown to players.

1. Replace the pictures of the character. For Tito they are: characters/tito.webp (small portrait), expressions/tito-happy.webp, expressions/tito-proud.webp, expressions/tito-sad.webp (reactions), heroes/tito.webp (campaign card and menus), poses/duel-tito.webp (character select and match cards), poses/lean-tito.webp and poses/ledge-tito.webp (standing beside the board on wide screens), poses/shrug-tito.webp (the loser on the result screen), win/tito.webp (the winner) and menu/tito.webp (mode select). All inside source/public/street/.
2. Draw every picture of one character in the same style, each with the size of the file it replaces.
3. To change the name and the short description, open source/src/data/content.ts, find CHARACTERS and edit name: 'Tito' and title: {{ pt: '...', en: 'skater rabbit' }}. Then add the new English description to the other languages (recipe E, step 4).
4. Build and check the character select, a match and the result screen.

Recipe D: change the pieces and the piece sets

1. Shape of the pieces: four pictures in source/public/street/pieces/: yellow-man.webp, yellow-king.webp, coral-man.webp and coral-king.webp. Replace them keeping the size and the position of the piece inside the picture.
2. Colours and names of the six sets: open source/src/data/content.ts and find COSMETICS. Each set has a name and two groups of colours, light (Team A) and dark (Team B). The game repaints the four pictures with the colour base of each group, so changing base: '#...' changes the colour of that side.
3. Colours are written as #RRGGBB. Pick one in any colour picker (search the web for "color picker") and paste it.
4. Do not change the id of a set (wood_ivory, sage_cream...). They are internal names stored in the players' saves.
5. If you change a set name, add the new English name to the other languages (recipe E, step 4).

Recipe E: change texts and translations

1. In your editor use Find in files (Ctrl+Shift+F in Visual Studio Code) inside source/src/ and search for the English sentence exactly as the game shows it.
2. Most texts are in source/src/i18n.ts. The file has two lists with the same keys: const pt = {{ (Portuguese) and const en = {{ (English). Change only the text between the quotes, never the word before the colon.
3. Other texts are in source/src/ui/copy.ts, source/src/ui/juice-copy.ts, source/src/data/content.ts (characters, arenas, campaign, tutorial) and source/src/data/challenges.ts, or written in the code as tx('Portuguese sentence', 'English sentence').
4. The other 12 languages are in source/src/locales/, one file each (de.ts, es.ts, fr.ts, id.ts, it.ts, ja.ts, ko.ts, nl.ts, pl.ts, ru.ts, tr.ts, zh.ts). Each file has a part dict with the same keys as i18n.ts and a part text where the English sentence is the key: 'Play checkers': 'Dame spielen'. If you change an English sentence of step 3, change the same key in the text part of every language file, otherwise that language shows the English sentence.
5. Keep markers such as {{n}}, ${{name}} and words in [brackets] exactly as they are: the game replaces them with numbers and names, and the word in brackets is painted yellow in the big titles.
6. Run npm test: it tells you when a language is missing a sentence. Then npm run build.

To remove a language from the list, delete its line in LANGS in source/src/i18n.ts.

Recipe F: replace the music

1. The three tracks are in source/src/assets/music/: menu.mp3 (menus), play1.mp3 and play2.mp3 (matches).
2. Export your track as MP3 (128 to 192 kbps is enough) with the same file name and replace the old file.
3. For a clean loop, cut the track on a whole bar in Audacity.
4. Build. Browsers start sound only after the first click or tap on the page.

Sound effects (clicks, moves, captures, victory) are generated by code in source/src/audio/audio.ts; there are no files to replace. Players set the volumes in Settings.

Recipe G: change colours

1. Interface colours: open source/src/street.css. Near the top there is a list of colours such as --honey: #ffce34 (yellow), --coral: #ff6950 (red), --sage: #40baff (blue) and --paper: #101f46 (dark blue of the panels). Change the value after the colon. The names are internal; keep them.
2. Board squares and frame of each arena: in source/src/data/content.ts, find ENVIRONMENTS and change light, dark and frame inside board.
3. Pieces: recipe D.
4. Painted buttons, cards and tags are pictures in source/public/street/hud/ and source/public/street/menu/: recolour them in your image editor (recipe A).
5. Browser bar on phones: name="theme-color" in source/index.html.

Recipe H: change the fonts

1. The font files are in source/src/assets/fonts/ (WOFF2): Lilita One for the big street titles and buttons and Nunito for normal text. Corben is bundled too.
2. Get your font as .woff2 (check that its license allows use on websites) and copy it to that folder.
3. Open source/src/assets/fonts/fonts.css, copy one @font-face block, and change font-family to the name of your font and url('./...woff2') to your file.
4. Open source/src/lang.css and put your font name first in --font-street (titles and buttons) or in --font-ui (normal text), for example --font-street: 'My Font', 'Lilita One', ....
5. Keep the other names in the list: they cover letters your font may not have (Polish, Turkish, Russian, Japanese, Korean, Chinese).
6. Add the license text of your font to source/licenses/.

Recipe I: make the computer easier or harder

Open source/src/ai/levels.ts and find levelFor. There is one block for each level: 'easy', 'normal' and 'hard'.

Where there are three numbers in square brackets, such as [0.22, 0.14, 0.08], they are the three steps of the campaign inside one arena: first, second and third match. The level each character uses in the campaign is in recipe J.

The rules of the game (Brazilian draughts: mandatory capture, flying kings, men capture backwards) are in source/src/engine/rules.ts. Changing rules is programming work; npm test checks them.

Recipe J: edit the campaign

1. Open source/src/data/content.ts and find CAMPAIGN. There are nine blocks that start with E(, one for each match, in order.
2. In each block you can change the opponent ('amora', 'tito' or 'olivia'), the level ('easy', 'normal' or 'hard'), the title, the sentence before the match (intro) and the sentences after a win and a loss.
3. Every text has two versions, pt: and en:. For the other languages see recipe E, step 4.
4. Keep nine matches and keep the arena names ('veranda', 'stones', 'library'): the map has nine markers, three in each arena.

Check and publish your changes

1. In source/ run npm test. All 87 tests must pass.
2. Run npm run build. It checks the code, builds the game and formats the result into source/dist-static/.
3. Run npm run preview, open the address it prints, and play: opening screen, a full match against the computer, the result screen, the campaign and the settings. Test on a phone too if you can.
4. Upload the contents of source/dist-static/ to your host with FTP or the file manager of your hosting panel, replacing the old files. Delete old files in assets/ that are no longer in the new build.
5. Open your web address and reload with Ctrl+F5 (Windows) or Cmd+Shift+R (Mac).

If something goes wrong

• The build stops with a red message. It names the file and the line. Usually a quote, a comma or a bracket was deleted by accident. Compare with your backup.
• My new picture does not appear. Check the file name (letters, capitals, .webp) and reload with Ctrl+F5. On a live site, see the cache section of the main guide.
• A text shows in English in another language. The English sentence changed but the key in source/src/locales/ did not (recipe E, step 4).
• Letters are missing in my font. Keep the fallback fonts in the list (recipe H, step 5).
• Players lost their progress. The save names in source/src/persist/store.ts were changed. Keep them on a live site.
• Still stuck? Write to willian@polargames.com.br with the file you changed, the message you see and a screenshot.

More real screenshots

Complete list of pictures

Source file (inside source/), size in pixels and the name of the same picture in game/ as delivered. After you rebuild, a picture you changed gets new letters after its name; the others keep theirs.