Customization Guide

Make Coral Quest your own game: your own mascot and pieces, logo, backgrounds, sounds, texts and colors, easier or harder levels and other prices. 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. Every picture on this page is a real screenshot of the game in this download.

1. Before you start

Free tools:

• 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 and PNG: Photopea (free, in the browser), GIMP or Krita. You can also save a PNG and convert it to WebP at squoosh.app.
• For sounds: Audacity (free, exports MP3).

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

• game/ is the finished game. Simplest way: change files directly inside game/ and upload that folder. No other tools are needed.
• source/ is the same game with tests and tools. If you use it, edit source/ and run npm run build, which copies it into game/ (see Check and publish). Pick one way and keep to it, so you never edit the same file twice.

The paths in this guide (for example assets/coral/logo.webp) are the same inside both folders.

See your changes on your computer. The game must be opened from a web address, not by double-clicking index.html. Two easy ways:

• With Python (python.org): open a terminal inside the game folder, run the command below and open http://localhost:8080.
• With Node.js 26.13 or newer: in source/, run npm run serve and open http://localhost:8080.

python -m http.server 8080

After each change, reload with Ctrl+F5 (Windows) or Cmd+Shift+R (Mac) so the browser does not show the old file. To see a later level without playing up to it, use a private window and the browser console only on your own computer, or simply play: progress is saved in the browser.

2. Screenshot gallery

Real screenshots of this version: 1280 x 720 on a computer, plus a phone held upright and in landscape. The game adapts to both positions.

3. Where everything is

The numbers on each screenshot match the table below it. Text keys such as play are explained in recipe F.

Home screen

1 2 3 4 5 6

Level map

1 2 3 4 5 6

Playing a level (World 1, Coral Reef)

1 2 3 4 5 6 7

Settings

1 2 3

Tutorial on level 1

1 2

Victory with a restoration step

1 2 3

Restoration screen

1 2 3

Out of moves (defeat)

1 2 3

4. Recipe A: replace a picture

All pictures are WebP files (one PNG) inside assets/. The game finds each picture by its file name, so a new picture with the same name simply takes its place.

1. Find the file with the numbered screens or by its name in the folders above.
2. Open the old picture in your image editor and note its width and height.
3. Make your new picture with the same width and height and a transparent background (except the backgrounds and the restored places). Keep the subject in the same place inside the picture.
4. Export as WebP with the exact same name, for example assets/coral/button.webp, and replace the old file.
5. Reload the game with Ctrl+F5.

5. Recipe B: change the logo and the game name

1. Logo: replace assets/coral/logo.webp (1774 x 887, transparent background). It is used on the loading screen, the home screen, the map and above the board.
2. Browser tab name: open index.html and change the text between <title> and </title>. Also change the alt="Coral Quest" texts of the logo pictures (search for Coral Quest).
3. Browser bar color on phones: the theme-color line in index.html.
4. Loading screen colors: the #splash rule in the <style> block at the top of index.html.

6. Recipe C: change the octopus, the pieces and the icons (sprite sheets)

Several small pictures are stored together in one sprite sheet: a picture divided into a grid of equal cells. src/coral-sprites.js cuts the cells when the game starts. To replace one, keep the sheet size and draw your new picture inside the same cell, centered, with a transparent background.

1. Open the sheet in Photopea and turn on the grid (View, Show, Grid) with the cell size: the sheet width divided by the columns, the height divided by the rows.
2. Paste your picture in a new layer inside the cell you want to change. Leave a small empty margin around it.
3. Hide or delete the old drawing in that cell, export the sheet as WebP with the same name and reload.
4. The large octopus on the home screen is a separate picture: assets/coral/octopus-home-hd.webp.
5. Piece colors used by the sparkles when pieces clear: COLORS in src/config.js (one color per piece, in the same order).

7. Recipe D: change the backgrounds and the restored places

• World backgrounds (used during the levels, behind the map page and on the restoration screen of each world): assets/coral/world-1-reef.webp for world 1 and world-2.webp ... world-5.webp for worlds 2-5 (1672 x 941, for wide screens), plus world-1-portrait.webp ... world-5-portrait.webp for phones held upright. world-1.webp is only a fallback.
• Home screen: assets/coral/home.webp. Map: assets/coral/map-land.webp and map-portrait.webp, with the frame map-frame-land.webp and map-frame-portrait.webp.
• Restored places: each world has a "before" and an "after" picture, assets/coral/reno-before-0.webp and reno-after-0.webp for world 1 up to reno-before-4.webp and reno-after-4.webp for world 5. First wins on new levels unlock the seven steps of each world one by one (faster in world 1, then about one step every three levels); each step reveals more of the "after" picture. Draw both pictures from the same point of view so the reveal lines up.
• The names of the steps and the restoration titles are text keys (s0 ... s6, r1_0 ... r4_6, rt1 ... rt4): recipe F.

8. Recipe E: replace sounds, music and voice

Sound effects are short MP3 files in assets/audio/sfx/. Replace a file with another MP3 of the same name. If a file is missing, the game plays a simple built-in tone instead.

• Music (assets/audio/musica/): coral-match-up.mp3 (home and map) and coral-kingdom-map.mp3 (levels). The file names are set in src/audio.js (search for coral-match-up). Loops work best when the end flows into the start.
• Voice (assets/audio/voz/, English): short cheers such as nice.mp3, wow.mp3, amazing.mp3, awesome.mp3, hurry.mp3, levelcomplete.mp3, soclose.mp3 and newlevel.mp3. The list is VOZ in src/audio.js; which cheer plays for each combo is comboVoice in src/config.js.
• Players set music, effects and voice volume in the Sound window. On phones, sound starts after the first touch (a browser rule).

9. Recipe F: change texts and translations

All interface texts are in one file per language: src/i18n/en.js, pt.js, es.js, fr.js, de.js, it.js, nl.js, pl.js, tr.js, ru.js, id.js, ja.js, ko.js and zh.js.

  play: 'Play',
  whisk: 'Trident',
  rocket: 'Shell rocket',
  w0: 'Coral Reef',

1. Find the text you want to change (Ctrl+F in your editor). The word before the colon is the key; never change it.
2. Change only the words inside the quotes. If your text has an apostrophe, like Let's, put double quotes around it: "Let's go".
3. Keep markers such as {n}: the game puts a number there.
4. Change the same key in the other languages you use. A missing translation falls back to English.
5. Short names fit the buttons better: check the screen on a phone after a change.

Remove a language: delete it from LANGS in src/app/screens.js and from the list L (and its import line) in src/i18n.js. Add one: copy en.js to a new file, translate it, and add it in the same two places. Run npm test to check that every key is there.

10. Recipe G: make the levels easier or harder

The 100 levels are built by the function level(n) in src/game/levels.js from a few numbers. Change one number at a time and play a few levels.

  const moves = n === 2 || n === 4 ? 14 : n < 8 ? 16 : ...   // add 2 to every level: (...) + 2

Keep the commas, brackets and quotes exactly where they are. With Node.js, run npm test in source/ after a change: a test checks that all 100 levels still start with a valid move and goals. Game feel (speeds, shake, hint delay, vibration) is in src/config.js.

11. Recipe H: change prices and rewards

Prices are in in-game coins only (there are no real-money purchases).

12. Recipe I: change colors and the font

• Ocean theme colors: css/coral.css loads last, so its rules win. Text and outline color: --ink: #073f5b;; light panels: --cream; accents: --caramel. Search the file for a color code (for example #0789aa) to find every place that uses it.
• Buttons, windows and banners are pictures (recipe A): assets/coral/button.webp, panel.webp, victory-frame.webp, ocean-banner.webp, title-ribbon.webp.
• Font: Fredoka (SIL Open Font License), files in assets/fonts/fredoka/, declared by the two @font-face blocks at the top of css/game-1.css. To use another font, put its .woff2 file in the same folder, change the src: url(...) lines and keep the name 'Fredoka', or change the name everywhere with search and replace.
• Screen shake, pauses on big hits and particle amounts: src/config.js (smaller numbers = calmer game).

13. Internal names used in the code

Coral Quest is built on the same match-3 engine as an earlier café-themed game, so some file and code names are neutral leftovers. Players never see them; the names they see come from src/i18n/.

14. Check and publish your changes

1. Play the parts you changed on your computer (see Before you start), in a wide window and in a phone size (in Chrome or Edge press F12, then Ctrl+Shift+M).
2. If you edited source/: in a terminal inside source/, run the commands below. The first checks the rules, the levels and the texts; the second copies the finished game into game/.

npm test
npm run build

3. Upload everything inside game/ to your web hosting, replacing the old files and keeping the folders.
4. Open your game address and press Ctrl+F5. If you still see the old version, read "Updating and cache" in the main buyer guide.
5. Saved progress belongs to each website address. If you host two copies on the same domain, give each its own save name: SAVE_KEY near the top of src/app/core.js.

15. If something goes wrong

• Blank or frozen screen after editing a .js file: a comma, quote or bracket is missing. Press F12 and open the Console: it shows the file name and the line with the error. Compare that line with your backup.
• A picture is missing or looks broken: the file name is different (names are case sensitive: Logo.webp is not logo.webp), or the file is not really WebP.
• A piece or the octopus looks cut: in a sprite sheet the drawing must stay inside its cell (recipe C).
• Nothing changed: the browser is showing the old file. Press Ctrl+F5 or open the game in a private window.
• Still stuck? Restore your backup and change one thing at a time. Support: willian@polargames.com.br (include the game version, what you changed and a screenshot).