リファレンス · 遊べる盤

SUIDO_PLAY_STYLE定数

リファレンスの説明と例は英語です。見出しと目次は日本語です。

インポート

import { SUIDO_PLAY_STYLE } from "@johnmorrisdotca/suido/play";

定義

const SUIDO_PLAY_STYLE: "\n.suido {\n  --sd-step: 80ms;\n  --sd-line: #d9d1bf; --sd-ground: #fbf8f1; --sd-edge: #3b4148; --sd-pipe: #aeb7c0; --sd-water: #1b8fe3;\n  --sd-source: #1b5fa6; --sd-bowl: #3b6a7e; --sd-leak: #e04a2f; --sd-focus: #b5452c; --sd-hint: #f6dc8a; --sd-solved: #e8f3ec;\n  --sd-wall: #7a4f2c; --sd-lock: #8a6a2e; --sd-plate: #ebe2cc; --sd-plate-edge: #8d8467; --sd-plate-solved: #dcebdc; --sd-pivot: #b5452c;\n  display: block; width: 100%; height: auto;\n  user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; touch-action: manipulation; -webkit-tap-highlight-color: transparent;\n  overflow: visible;\n}\n@media (prefers-color-scheme: dark) {\n  :root:not([data-theme=\"light\"]) .suido {\n    --sd-line: #171a18; --sd-ground: #262a27; --sd-edge: #0c0f11; --sd-pipe: #838c95; --sd-water: #4db6ff;\n    --sd-source: #2f7fcf; --sd-bowl: #6aa4bd; --sd-leak: #ff6a4d; --sd-focus: #ffb199; --sd-hint: #5a4a1a; --sd-solved: #20332a;\n    --sd-wall: #c99a64; --sd-lock: #d9b565; --sd-plate: #323830; --sd-plate-edge: #7d8a75; --sd-plate-solved: #2b4034; --sd-pivot: #ff8a6b;\n  }\n}\n:root[data-theme=\"dark\"] .suido {\n  --sd-line: #171a18; --sd-ground: #262a27; --sd-edge: #0c0f11; --sd-pipe: #838c95; --sd-water: #4db6ff;\n  --sd-source: #2f7fcf; --sd-bowl: #6aa4bd; --sd-leak: #ff6a4d; --sd-focus: #ffb199; --sd-hint: #5a4a1a; --sd-solved: #20332a;\n  --sd-wall: #c99a64; --sd-lock: #d9b565; --sd-plate: #323830; --sd-plate-edge: #7d8a75; --sd-plate-solved: #2b4034; --sd-pivot: #ff8a6b;\n}\n.suido * { user-select: none; -webkit-user-select: none; }\n.suido .sd-board { fill: var(--sd-line); }\n.suido .sd-rim { fill: none; stroke: var(--sd-leak); stroke-width: 3; stroke-dasharray: 10 8; opacity: .55; pointer-events: none; }\n.suido .sd-cell { outline: none; cursor: pointer; --sd-half: calc(var(--sd-step) / 2); --sd-lead: calc(var(--sd-step) / 2); --sd-arrive: calc(var(--k, 0) * var(--sd-step)); }\n.suido .sd-cell[data-role=\"source\"] { --sd-lead: 0ms; }\n.suido .sd-cell[data-shape=\"blank\"], .suido .sd-cell[data-locked=\"true\"] { cursor: default; }\n.suido .sd-lockframe { fill: none; stroke: var(--sd-lock); stroke-width: 3; opacity: .75; pointer-events: none; }\n.suido .sd-shackle { fill: none; stroke: var(--sd-lock); stroke-width: 3.5; stroke-linecap: round; }\n.suido .sd-lockbody { fill: var(--sd-lock); }\n.suido .sd-wall { fill: var(--sd-wall); stroke: var(--sd-edge); stroke-width: 1.5; pointer-events: none; }\n.suido .sd-ground { fill: var(--sd-ground); stroke: none; transition: fill .2s; }\n.suido[data-solved=\"true\"] .sd-ground { fill: var(--sd-solved); }\n.suido .sd-cell[data-block] .sd-ground { fill: none; }\n.suido .sd-plate { fill: var(--sd-plate); stroke: var(--sd-plate-edge); stroke-width: 4; pointer-events: none; transition: fill .2s; }\n.suido .sd-plate[data-kind=\"turn\"] { fill: var(--sd-ground); stroke-width: 3; stroke-dasharray: 10 7; }\n.suido[data-solved=\"true\"] .sd-plate[data-kind=\"turn\"] { fill: var(--sd-solved); }\n.suido[data-solved=\"true\"] .sd-plate[data-kind=\"big\"] { fill: var(--sd-plate-solved); }\n.suido .sd-cell[data-hint=\"true\"] .sd-ground, .suido[data-solved=\"true\"] .sd-cell[data-hint=\"true\"] .sd-ground, .suido .sd-plate[data-hint=\"true\"], .suido[data-solved=\"true\"] .sd-plate[data-hint=\"true\"] { fill: var(--sd-hint); }\n.suido .sd-pivot { pointer-events: none; }\n.suido .sd-pivot-disc { fill: var(--sd-ground); stroke: var(--sd-pivot); stroke-width: 3; opacity: .94; }\n.suido .sd-pivot-arrow { fill: none; stroke: var(--sd-pivot); stroke-width: 3.2; stroke-linecap: round; }\n.suido .sd-pivot-head { fill: var(--sd-pivot); }\n.suido .sd-cell:focus-visible .sd-ground { stroke: var(--sd-focus); stroke-width: 4; }\n.suido .sd-turn { transform-box: fill-box; transform-origin: center; transform: rotate(calc(var(--q, 0) * 90deg)); transition: transform .16s ease-out; }\n.suido .sd-box { fill: none; stroke: none; }\n.suido .sd-edge { fill: none; stroke: var(--sd-edge); stroke-width: 34; stroke-linecap: butt; }\n.suido .sd-hub-edge { fill: var(--sd-edge); }\n.suido .sd-pipe { fill: none; stroke: var(--sd-pipe); stroke-width: 26; stroke-linecap: butt; }\n.suido .sd-hub { fill: var(--sd-pipe); }\n.suido .sd-in, .suido .sd-out { fill: none; stroke: var(--sd-water); stroke-width: 14; stroke-linecap: butt; stroke-dasharray: 1 1; stroke-dashoffset: 1; transition: stroke-dashoffset .12s ease-in; }\n.suido .sd-arm[data-w=\"in\"] .sd-in { stroke-dashoffset: 0; transition: stroke-dashoffset var(--sd-half) linear var(--sd-arrive); }\n.suido .sd-arm[data-w=\"out\"] .sd-out, .suido .sd-arm[data-w=\"leak\"] .sd-out { stroke-dashoffset: 0; transition: stroke-dashoffset var(--sd-half) linear calc(var(--sd-arrive) + var(--sd-lead)); }\n.suido .sd-cell[data-role=\"source\"] .sd-arm[data-w=\"out\"] .sd-out, .suido .sd-cell[data-role=\"source\"] .sd-arm[data-w=\"leak\"] .sd-out { transition-duration: var(--sd-step); }\n.suido .sd-thumbwater { fill: none; stroke: var(--sd-water); stroke-width: 14; stroke-linecap: butt; }\n.suido .sd-hubwater { fill: var(--sd-water); opacity: 0; transition: opacity .12s; }\n.suido .sd-cell[data-wet=\"true\"] .sd-hubwater { opacity: 1; transition: opacity calc(var(--sd-half) / 2) linear calc(var(--sd-arrive) + var(--sd-lead)); }\n.suido .sd-leak { opacity: 0; transition: opacity .12s; }\n/* What cannot be seen is not painted. A board of a thousand pieces has two thousand arms and as many drips, almost all of them dry, and painting them all\n   (a piece of the page each) was most of a frame on a phone. They are hidden a moment after the water leaves them, so it is still seen to run back. */\n.suido .sd-cell:not([data-wet=\"true\"]) .sd-arm { visibility: hidden; transition: visibility 0s linear .45s; }\n.suido .sd-arm:not([data-w=\"leak\"]) .sd-leak { visibility: hidden; transition: opacity .12s, visibility 0s linear .45s; }\n.suido .sd-arm[data-w=\"leak\"] .sd-leak { opacity: 1; transition: opacity .15s linear calc(var(--sd-arrive) + var(--sd-lead) + var(--sd-half)); }\n.suido .sd-leak .sd-cap { stroke: var(--sd-leak); stroke-width: 6; fill: none; stroke-linecap: round; }\n.suido .sd-leak .sd-drop { fill: var(--sd-water); stroke: var(--sd-leak); stroke-width: 2.5; }\n.suido .sd-src { fill: var(--sd-source); stroke: var(--sd-edge); stroke-width: 3; }\n.suido .sd-glyph { fill: #fff; }\n.suido .sd-bowl { fill: var(--sd-ground); stroke: var(--sd-bowl); stroke-width: 6; }\n.suido .sd-fill { fill: var(--sd-water); transform-box: fill-box; transform-origin: center; transform: scale(0); transition: transform .12s ease-in; }\n.suido .sd-cell[data-wet=\"true\"] .sd-fill { transform: scale(1); transition: transform calc(var(--sd-half) * 2) ease-out calc(var(--sd-arrive) + var(--sd-lead)); }\n@media (prefers-reduced-motion: reduce) {\n  .suido { --sd-step: 0ms; }\n  .suido .sd-turn, .suido .sd-in, .suido .sd-out, .suido .sd-hubwater, .suido .sd-fill, .suido .sd-leak, .suido .sd-ground, .suido .sd-plate { transition: none !important; }\n}\n\n.suido-play {\n  --sdp-ink: #1f2320; --sdp-muted: #6b6f68; --sdp-rule: #ddd6c6; --sdp-surface: #fbf8f1; --sdp-accent: #b5452c; --sdp-good: #2f7a4f;\n  display: block; max-width: 100%; box-sizing: border-box; color: var(--sdp-ink); font-family: system-ui, -apple-system, \"Segoe UI\", sans-serif;\n}\n@media (prefers-color-scheme: dark) {\n  :root:not([data-theme=\"light\"]) .suido-play { --sdp-ink: #ece8dc; --sdp-muted: #a09d93; --sdp-rule: #3a3d38; --sdp-surface: #1d201e; --sdp-accent: #ff8a6b; --sdp-good: #6fcf97; }\n}\n:root[data-theme=\"dark\"] .suido-play { --sdp-ink: #ece8dc; --sdp-muted: #a09d93; --sdp-rule: #3a3d38; --sdp-surface: #1d201e; --sdp-accent: #ff8a6b; --sdp-good: #6fcf97; }\n.suido-play *, .suido-play *::before, .suido-play *::after { box-sizing: border-box; }\n.suido-play .sdp-board { position: relative; width: 100%; aspect-ratio: var(--sdp-ratio, 1); }\n.suido-play .sdp-board .suido { transition: opacity .15s; }\n.suido-play[aria-busy=\"true\"] .sdp-board .suido { opacity: .45; }\n.suido-play .sdp-board[data-zoomed=\"true\"] { overflow: hidden; }\n.suido-play .sdp-zoom { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-top: 8px; }\n.suido-play .sdp-chips { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-wrap: wrap; align-content: flex-start; gap: 6px; min-height: 4.4rem; }\n.suido-play .sdp-chip { border: 1px solid var(--sdp-rule); background: var(--sdp-surface); color: var(--sdp-ink); border-radius: 999px; min-height: 32px; padding: 0 12px; font-size: .8rem; font-weight: 600; display: inline-flex; align-items: center; cursor: help; }\n.suido-play .sdp-chip[data-twist=\"plain\"] { color: var(--sdp-muted); font-weight: 500; }\n.suido-play .sdp-status { margin: 8px 0 0; font-weight: 600; text-align: center; height: 2.9em; overflow: hidden; display: flex; align-items: center; justify-content: center; }\n.suido-play .sdp-status[data-solved=\"true\"] { color: var(--sdp-good); }\n.suido-play .sdp-meter { margin: 6px 0 0; text-align: center; color: var(--sdp-muted); font-size: .9rem; font-variant-numeric: tabular-nums; line-height: 1.4; height: 1.4em; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }\n.suido-play .sdp-note { margin: 4px 0 0; text-align: center; color: var(--sdp-accent); line-height: 1.4; height: 1.4em; overflow: hidden; font-weight: 600; }\n.suido-play .sdp-controls { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-top: 10px; }\n.suido-play button { font: inherit; color: inherit; user-select: none; -webkit-user-select: none; touch-action: manipulation; }\n.suido-play .sdp-button { border: 1px solid var(--sdp-rule); background: var(--sdp-surface); color: var(--sdp-ink); border-radius: 999px; min-height: 44px; min-width: 44px; padding: 0 14px; font-size: .85rem; font-weight: 600; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }\n.suido-play .sdp-button:hover:not(:disabled) { border-color: var(--sdp-ink); }\n.suido-play .sdp-button:disabled { opacity: .32; cursor: default; }\n.suido-play [hidden] { display: none !important; }\n@media (min-width: 700px) {\n  .suido-play .sdp-chips { min-height: 2.4rem; }\n}\n@media (max-width: 520px) {\n  .suido-play .sdp-status { height: 4.4em; }\n  /* Three buttons can take one row or two, by the width of a font and a language: room for two, so nothing below moves. */\n  .suido-play .sdp-controls { min-height: 5.9rem; align-content: flex-start; }\n}\n"

例

import { SUIDO_PLAY_STYLE } from "@johnmorrisdotca/suido/play";
console.log(SUIDO_PLAY_STYLE.length);

10319

出力（このページを作ったときに実行した結果）

ソースを見るGitHub で編集@johnmorrisdotca/suido 1.7.0 のソースから作成しました。

この日本語は、まだ日本語を母語とする方の確認を受けていません。訂正を歓迎します。