Skip to the content

Kazu数

Generate checked Sudoku and logic puzzles, read native rules and hints, and draw or embed playable boards.

Kazu is the Japanese word 数 for number. About the name

Contents

Reference · Ripple Effect rules

RIPPLE_PLAY_STYLEconstant

Scoped native Ripple board and player CSS.

Import it

import { RIPPLE_PLAY_STYLE } from "@johnmorrisdotca/kazu/ripple";

Also exported from: @johnmorrisdotca/kazu/ripple/play, @johnmorrisdotca/kazu

Definition

const RIPPLE_PLAY_STYLE: ".rp-root{color:var(--kz-ink,#242621);font:inherit}.rp-board{display:grid;grid-template-columns:repeat(var(--rp-width),minmax(36px,1fr));max-width:620px;margin:auto;touch-action:manipulation}.rp-cell{position:relative;aspect-ratio:1;border:1px solid var(--rp-line);background:var(--rp-surface);color:var(--rp-ink);font:500 clamp(16px,4vw,25px) system-ui;cursor:pointer;padding:0}.rp-cell[data-clue=true]{font-weight:700}.rp-cell[data-error=true]{box-shadow:inset 0 0 0 3px #bd493f}.rp-cell[data-selected=true]{background:#dce9c9;color:#1f3021}.rp-cell:focus-visible,.rp-key:focus-visible,.rp-tool:focus-visible{outline:3px solid #466f41;outline-offset:2px;z-index:1}.rp-room-right{border-right:3px solid var(--rp-ink)}.rp-room-bottom{border-bottom:3px solid var(--rp-ink)}.rp-notes{position:absolute;inset:2px;display:grid;grid-template-columns:repeat(3,1fr);font-size:10px;line-height:1;align-items:center}.rp-controls,.rp-numpad{display:flex;gap:7px;justify-content:center;flex-wrap:wrap;margin:12px auto}.rp-tool,.rp-key{font:inherit;min-height:44px;min-width:44px;border:1px solid var(--rp-line);border-radius:10px;background:var(--rp-surface);color:var(--rp-ink);cursor:pointer}.rp-tool:disabled{opacity:.5}.rp-status{min-height:1.5em;text-align:center}.rp-help{text-align:center;font-size:.9em}.rp-dialog{border:0;border-radius:16px;padding:18px;max-width:min(94vw,720px);background:#f7f3e9}.rp-close{margin-bottom:10px}.rp-tiles .rp-cell[data-clue=true]{box-shadow:inset 0 0 0 4px #c2a875}.rp-palette{display:grid;gap:8px}.rp-root[data-material=wood]{--rp-surface:#e0bf88;--rp-line:#907044;--rp-ink:#392d1f}.rp-root[data-material=slate]{--rp-surface:#364348;--rp-line:#839397;--rp-ink:#f1eee5}.rp-root[data-material=ivory]{--rp-surface:#faf7ef;--rp-line:#cfc6b2;--rp-ink:#252824}"

Examples

import { RIPPLE_PLAY_STYLE } from "@johnmorrisdotca/kazu/ripple";

console.log(RIPPLE_PLAY_STYLE.length);
1785

What it prints (run when this page was built)

View sourceEdit on GitHubMade from the source of @johnmorrisdotca/kazu 2.1.0.