Overflowing Palette

Live : https://xirtelan.itch.io/overflowing-palette

Live : https://xirtelan.github.io/overflowing_palette/

showcase: https://youtu.be/9FPFLpCEiQI

Note

[14.04.25] ON HOLD
I am trying to participate in GameDev.js Jam April 13th 2025 to April 26th 2025. So the work on the update is on hold until then

Note

Work on update 2.0 is in progress, but slowly due to a lack of free time. Plans: a new mechanic (from patch 2.2 + a new one), new levels ofc, performance mode (for big grid or weak devices), some UI improvements, and possibly a desktop version?

• General
• Usage
  • Level Selection
    • Import Level
  • Endless Zen
  • Level Editor
    • Controls
    • Export Level
  • Options
• Customization
  • Base
  • Config (Offline)
    • Colors
    • Add Levels
    • UI
  • Code
    • Shader
• Installation/Building for Offline

General

Project: Recreating the puzzle Overflowing Palette from Wuthering Waves as an HTML5 web game using Phaser 3.

Features:

• All levels from the game
• Level Editor (export/import)
• Levels with different grid sizes
• More available colors
• Customization

Stack:

Vite, Phaser 3

Usage

Level Selection

Default - Levels from the Game

Levels are separated by regions.
Green background - Cleared stages
Note: Cleared levels are saved in the browser's localStorage.

Import Levels

Shoud paste level in base64 format (or simply "string"): After "Load" you will see preview for that level if its correct "string".

Endless Zen

Auto-generated levels without a move counter.

Choose board size, number of colors, and difficulty (which affects how shuffled the board starts).

Option to skip a level if you don’t like the generated result.

After completing a level, you can start another with the same settings.

You can share completed levels with others. (Your number of moves will be set as a goal for others to beat.)

Level Editor

The editor is quite straightforward. Choose the grid size you want.
Although the values are limited from 2 to 100, fields larger than 25x25 can be hard to use and may take some time to load.

• Fill Color - Determines the color used to fill the grid.

You can use box selection to select multiple cells at once by clicking and dragging a selection area over them (calculated at the cell center).

Export Level

• Copy STRING - Used for in-game import.
• Copy JSON - Used for offline addition to the levels info JSON file.

Options

General – Change language and backgroun settings. Added 4 new backgrounds, toggle overlay and distortion effect.

Colors – Now 8 colors; you can also rename them.

Gameplay – Options to disable dynamic tile backgrounds and adjust highlight intensity.

Simple colors - remove any animation/shades etc on cells. Stronger higlight - cell on mouse over will be more visible.

Installation

From Source Code

pnpm install

pnpm run dev

Build

pnpm run build

After building (or if using a prebuilt version), you will need a local server.

Options for Running a Local Server:

• Use Live Server (VS Code Extension)
  • Right-click the index.html file in Visual Studio Code and select Open with Live Server.
• Use http-server module from Node.js
  • Install via npm, then run:

    http-server .

• Use http.server from Python
• Use a WAMP (or LAMP) server