Lightsquare

A chessboard that stays smooth on every phone.

5.2 kBcore, gzipped
0dependencies
450+tests
MITlicence

01 Play Morphy, Paris 1858

Drag or tap to play both sides. ← → step through the Opera game, ↑ ↓ jump to its ends, F flips. Against the computer you can premove while it thinks. With a mouse, draw arrows with the right button; Alt and Shift change the colour.

02 Looks one object, for the whole page

Board

Pieces

Labels

Piece size

Slide

Arrows

Circles

Thickness

Strength

Badges

Check

Glow

03 Measure on this device

–script fps

–worst gap

–move, ms

–finger, ms

"Stuck script" freezes this page's script on and off. The slides keep moving, because the browser moves them, not the script.

The trial keeps all 32 pieces on layers of their own all the time, instead of only the piece that moves. On a desktop it costs about the same; a phone decides. Each verdict sends what was measured since the one before.

04 How it stays smooth

The browser moves the pieces. The script only says where.

A phone in Low Power Mode lets a page's script run about 30 times a second, unevenly. A board that moves its pieces from script, frame by frame, is held to that. Lightsquare writes the new place of a piece once and hands the slide to the browser. The design as one picture.

One state

The position, the marks and what may move are one plain object. Your app and the player's finger both change it.

Compare

The new state is compared with what is on screen. A piece that stays is not touched; a piece that moved keeps its element.

A few writes

A move is five small writes to the page, whatever the position. No measuring, no timers, no animation loop.

The browser slides

The piece gets a new transform and a CSS transition. From there no script runs until it has arrived.

Transforms onlyA moving piece changes its transform and nothing else.
Nothing at restA board that is not moving asks for no frame, no paint, no timer.
No chess rules insideYour app says which moves are allowed. The board never judges.
Any size, no scriptPlaces are fractions of the board's width. A resize runs nothing.
One measure per dragThe board is measured once, when the press begins.
Every rule has a testThe rules are checked against the source and in real browsers.

05 Measured next to others

The same game, the same browser, every board driven the same way.

Lightsquare next to the boards most used on the web. The browser's own counters are read, and where another board does better, the table says so.

No results yet. Run npm run measure in compare/.

06 Use it

import { lightsquare } from "@kibitzo/lightsquare";
import { shapes } from "@kibitzo/lightsquare/shapes";
import "@kibitzo/lightsquare/lightsquare.css";
import "@kibitzo/lightsquare/pieces/kibitzo.css";

const board = lightsquare(element, {
  movable: "white",
  targets,                      // Map: where each piece may go
  onMove({ from, to }) {
    // your chess rules decide; then confirm or take back
    board.set({ position: fenAfterTheMove });
  },
});

board.use(shapes({ arrows: [{ from: "e2", to: "e4" }], draw: true }));

npm install @kibitzo/lightsquare. MIT, no dependencies. It draws every board of Kibitzo.

@kibitzo/lightsquare5.2 kBpieces, marks, coordinates, tap and drag, premove, what each change was
@kibitzo/lightsquare/shapes2.0 kBarrows and circles, drawn by the app or the user
@kibitzo/lightsquare/promotion0.7 kBthe promotion picker
@kibitzo/lightsquare/a11y1.2 kBscreen readers and moves by keyboard
@kibitzo/lightsquare/premove0.8 kBwhere a piece could premove to
@kibitzo/lightsquare/theme0.7 kBlooks as data, for one board or a whole page
@kibitzo/lightsquare/editor1.7 kBa position editor: move, remove and add pieces
@kibitzo/lightsquare/overlay0.4 kByour own HTML on a square
@kibitzo/lightsquare/react0.5 kBa React component