Latte Lane

1 Overview

Latte Lane is an HTML5 match-3 puzzle game. A red panda barista guides the player through 100 levels in 5 worlds (Café, Bakery, Ice Cream Parlor, Tea House and Chocolate Shop). Each world has its own treats, background and a shop to renovate in 7 steps, so there are 35 renovation steps in total.

Players swap treats to make lines of three. Bigger matches create special treats: four in a line makes a striped treat that clears a row or column, an L or T shape makes a choco bomb that pops the area around it, and five in a line makes a rainbow star that clears every treat of one kind. Whipped cream and jars are obstacles in later levels. Two boosters (whisk and rocket), stars, coins, a level chest and a guided tutorial on level 1 complete the loop.

The game runs in any modern browser on phones, tablets and computers, in portrait and landscape. It uses plain HTML, CSS and JavaScript modules: no framework, no build step to play, no server code, no ads and no accounts.

2 Quick installation by FTP

Installing takes a few minutes if you have FTP access or a file manager in your hosting panel.

1. 1. Extract latte-lane-1.0.0.zip on your computer.
2. 2. Connect to your hosting by FTP or its file manager and open the folder where the game should live, for example public_html/games/latte-lane/.
3. 3. Upload only the contents of the game/ folder, so that index.html sits directly inside the target folder.
4. 4. Keep assets/, css/ and src/ beside index.html, with names and letter case exactly as extracted.
5. 5. Open https://your-domain.example/games/latte-lane/ in a modern browser.

3 Requirements and sound

• Any static web hosting with HTTPS (or HTTP). Opening index.html directly from the disk (file://) is not supported, because browsers block JavaScript modules that way.
• A current browser: Chrome, Edge, Firefox or Safari, on desktop or mobile.
• Browsers start sound only after a user gesture. The game shows a short tap-to-start screen and then plays music, effects and voice lines.
• When the player leaves the page or the app, sound pauses; it resumes on return or on the first tap.

4 Controls and how the game works

Drag or tap two neighboring treats to swap them. A swap only counts if it makes a line of three or more. Each level has goals (collect treats, clear cream, break jars) and a limited number of moves. Finishing with moves left earns bonus coins and more stars.

Boosters: the whisk removes one treat and the rocket clears a whole row. Both are kept between levels and can be bought with coins when they run out. If moves run out, the player can buy 5 more moves (free on the first levels).

Level 1 always runs a short guided tutorial: a hand shows the swap, then the goals and moves, then how to make a striped treat. It cannot be skipped by mistake and accepts only the shown move.

5 Screens and controls explained

1 2 3

Marks on the screenshot

1. 1 Play
2. 2 Renovation
3. 3 Settings

1 2 3

Marks on the screenshot

1. 1 Current level
2. 2 Home
3. 3 Renovation

1 2 3 4 5

Marks on the screenshot

1. 1 Board
2. 2 Goals
3. 3 Moves
4. 4 Boosters
5. 5 Pause

1

Marks on the screenshot

1. 1 Tip

1 2 3

Marks on the screenshot

1. 1 Stars
2. 2 Renovation
3. 3 Next

1 2

Marks on the screenshot

1. 1 Before and after
2. 2 Next

1

Marks on the screenshot

1. 1 Continue

1 2

Marks on the screenshot

1. 1 Language
2. 2 Options

6 Map of the files

game/ is the ready-to-host game. source/ has the same editable files plus the tests, a local preview server and the build command. Each file in src/app/ starts with one line that says what it does.

game/
  index.html
  css/game-1.css ... game-5.css
  src/main.js
  src/app/
  src/i18n/
  src/game/
  src/config.js
  src/audio.js
  assets/
source/
  (the same files)
  package.json
  test/
  tools/
documentation/index.html
THIRD-PARTY-LICENSES/

• src/config.js: game feel numbers in one place (swap speed, gravity, shake, hint delay, vibration patterns, combo words).
• src/i18n/: one file per language with every interface text (en.js, pt.js and so on); src/i18n.js switches between them.
• src/game/levels.js and src/game/rules.js: level generator (goals, moves, obstacles) and match rules (specials, combos, boosters).
• src/app/: the game split by subject: core.js (state, save, layout, effects), flow.js (levels, wins and losses), input.js, tutorial.js, screens.js (home, map, renovation, settings) and render.js (drawing). src/main.js starts everything.
• css/game-1.css to css/game-5.css: the styles, loaded in order. A rule in a later file overrides the same rule in an earlier one, so edit the last file that sets it.
• assets/: images (WebP), the font and the sounds (assets/audio/sfx, assets/audio/voz, assets/audio/musica).

7 Customizing texts, images and sounds

Texts: open the language file in src/i18n/ (for example src/i18n/en.js) and change the text after each key. Keep the keys and placeholders such as {n} unchanged; npm test checks that all 14 languages still have the same keys.

Images: replace a file in assets/ with another WebP of the same name and similar proportions. The treats of each world are peca-w1-0.webp to peca-w4-5.webp; the first world uses peca-0.webp to peca-5.webp. Renovation art is cafe-antes.webp, cafe-depois.webp and reno-1-antes.webp to reno-4-depois.webp.

Sounds: replace the MP3 files in assets/audio/ keeping the same names. A missing effect falls back to a soft synthesized note, so the game never breaks.

Difficulty: in src/game/levels.js change the moves and goals per level. Test with npm test before publishing.

8 Languages

The game has 14 languages: English, Português (Brasil), Español, Français, Deutsch, Italiano, Nederlands, Polski, Türkçe, Русский, Bahasa Indonesia, 日本語, 한국어 and 简体中文. It follows the browser language and the player can change it in Settings. Voice lines are in English. Translations were made with AI help; a native review is recommended before a commercial launch in a new market.

To force a language, add ?lang=pt (or another code) to the game address.

9 Local saves

• Progress (level, stars, coins, boosters, renovations and settings) is saved in the browser localStorage of each device.
• There are no accounts or cloud saves. Clearing site data resets the progress on that device.
• The save key is shown below.

latte-lane.template.save.v1

10 Optional development

This section is only for changing the code. The game/ folder already contains the finished game, so installing it needs no Node.js. The game has no dependencies and no compile step: npm run build only copies the files to game/.

1. Install Node.js. Open https://nodejs.org/en/download and choose the latest Node.js 26 LTS installer for your system (minimum 26.13). npm is included.

Windows: run the .msi installer, keep npm and Add to PATH enabled, finish the installation and reopen Command Prompt. macOS: run the official .pkg installer and reopen Terminal. Linux: follow the instructions on the official download page for your distribution, including npm.

2. Check the installation. Run node --version and npm --version separately. Both must print a version number, and Node.js must be 26.13 or newer. If a command is not found, reopen the terminal and check the installation.

node --version
npm --version

3. Extract the complete ZIP first and open its source/ folder, where package.json is. Windows: type cmd in the address bar of that folder in File Explorer. macOS and Linux: open Terminal and use cd with the folder path in quotes.

4. Run the commands below one by one. npm ci checks the lock file (nothing is downloaded, the project has no dependencies). npm test runs the match rule and language tests; stop and fix any error before going on.

npm ci
npm test

5. Preview: npm run serve starts a local server; open http://localhost:8080/ in your browser, play a level, and stop the server with Ctrl+C.

npm run serve

6. Build: npm run build copies index.html, css/, src/ and assets/ from source/ into game/, overwriting files with the same name. If you deleted or renamed a file, delete it from game/ yourself.

npm run build

7. Publish: back up the game on your website, then upload the contents of game/ again, keeping the folders. Clear the browser cache to see the new version (see below).

11 Updating and cache

Clearing the cache without losing progress

Progress is stored in this browser, not on the server. Clearing cached images and files, or doing a hard reload, keeps your progress.

Computer: press Ctrl+F5 on Windows and Linux, or Cmd+Shift+R on macOS. Phone: in the browser settings, choose the option to clear cached images and files.

Do not choose cookies and site data, or clear site data, for the game's address. That deletes the local save.

12 Licenses

The game code, art, music, sound effects and voice lines are licensed to you under the CodeCanyon license you purchased.

The Fredoka font is used under the SIL Open Font License; its license file is in THIRD-PARTY-LICENSES/.

13 Troubleshooting

• Blank page: the game was opened from the disk or a folder is missing. Use a web host and keep assets/, css/ and src/ next to index.html.
• No sound: tap the screen once; check the device is not silent and the volume sliders are up.
• Old version after an update: clear the browser cache (see below).
• Images missing after replacing art: check the file name, extension and letter case.

14 Frequently asked questions

15 Support

Questions or problems: write to willian@polargames.com.br with your purchase code, the browser and a short description or screenshot.

Support request

When you write to support, include the browser and device, the game version, the page address, the steps that caused the problem, a screenshot and the first error shown in the browser console. Never send passwords, payment details or secret keys.