Picross Level Editor

A web-based editor for creating and editing Picross puzzle levels. This application allows you to design both the logic layer (puzzle structure) and art layer (visual appearance) of Picross puzzles, with full support for the .pxl binary file format.

Features

• Dual Layer Editing: Separate editing modes for Logic and Art layers
  • Logic Mode: Define which cells are part of the puzzle (filled/empty)
  • Art Mode: Paint colors from a 64-color palette
• Real-time Hints: Picross hints (row and column numbers) update automatically as you paint
• File Operations: Import and export .pxl files
• Interactive Grid: Click and drag to paint or erase cells
• Color Palette: 64 hardcoded colors including grayscale, rainbow, pastels, and earth tones

Getting Started

Installation

npm install

Development

npm run dev

The application will be available at http://localhost:5173/

Build for Production

npm run build

Usage

Creating a New Level

1. Click the "📄 New" button in the toolbar
2. Enter the desired width and height (1-100)
3. Click "Create"

Editing the Logic Layer

1. Select "🧩 Logic" mode in the toolbar
2. Choose "✏️ Paint" or "🧹 Erase" tool
3. Click and drag on the grid to fill or clear cells
4. Watch the hints update automatically on the top and left edges

Editing the Art Layer

1. Select "🎨 Art" mode in the toolbar
2. Choose a color from the palette on the right
3. Click and drag on the grid to paint colors
4. The art layer determines what colors players see when they solve the puzzle

Saving Your Level

1. Enter a title in the "Title" field
2. Click "💾 Save" to download the .pxl file

Loading a Level

1. Click "📁 Load"
2. Select a .pxl file from your computer
3. The level will be loaded into the editor

File Format

This editor uses the .pxl binary format as specified in docs/pixel-level-description.md.

Format Overview

• Signature: PCRS
• Version: 3
• Endianness: Little-Endian
• String Encoding: UTF-8
• Logic Layer: Bitpacked (1 bit per pixel)
• Art Layer: Byte array (1 byte per pixel, palette index)

Project Structure

src/
├── components/          # React components
│   ├── GridCanvas.tsx   # Interactive grid for painting
│   ├── HintsDisplay.tsx # Picross hints display
│   ├── LevelEditor.tsx  # Main editor interface
│   ├── PaletteSelector.tsx # Color palette selector
│   └── Toolbar.tsx      # Top toolbar with actions
├── constants/
│   └── palette.ts       # 64-color palette definition
├── hooks/
│   └── useLevelState.ts # Level state management
├── types/
│   └── level.ts         # TypeScript type definitions
├── utils/
│   ├── hintsCalculator.ts # Picross hints calculation
│   └── pxlFormat.ts     # Binary file parser/serializer
├── App.tsx              # Main application component
└── main.tsx             # Application entry point

Technologies

• React 18: UI framework
• TypeScript: Type-safe development
• Vite: Build tool and dev server
• CSS Modules: Component-scoped styling

Tips

• Start by creating the puzzle structure in Logic mode
• Switch to Art mode to add colors and make it visually appealing
• The hints shown are based on the Logic layer, just like in a real Picross game
• You can paint colors on cells that aren't part of the logic, but they won't be visible during gameplay
• Use the Erase tool to quickly clear cells in either mode

License

This project is part of the Picross Paint game development toolkit.