blockyard 0.0.9 → 0.1.0

package/public/js/settings.js

@@ -22,6 +22,24 @@ export const SETTINGS_KEY = 'blockyard.settings';
 export const SCHEMA_VERSION = 4;
 
 export const DEFAULTS = Object.freeze({
+  // APPEARANCE (operator, 2026-09-16: "add an appearance section in preferences to change the colors
+  // of our layout. Our current scheme should be the default appearance ... as well as options for
+  // configure custom schemes by allowing users to pick colors and save to settings so it sticks").
+  // The faces themselves live in theme.js; this holds the choice and the nine custom colours, whose
+  // defaults are the shipped dark look so that Custom starts where the page starts.
+  appearance: Object.freeze({
+    mode: 'dark',             // 'light' | 'dark' | 'system' -- which face of the theme
+    theme: 'blockyard',       // a preset in theme.js PRESETS, or 'custom'
+    customBg: '#0b0d10',      // the page
+    customPanel: '#12151a',   // cards, the header, the settings sheet
+    customText: '#dfe5ee',
+    customMuted: '#96a0b0',
+    customAccent: '#f7931a',
+    customLine: '#262c36',
+    customOk: '#2ecc8f',
+    customWarn: '#f0b429',
+    customBad: '#ef5a5a',
+  }),
   space: Object.freeze({
     // OFF by default (operator, 2026-09-12: "make simple cubes the default, disable shadows by
     // default"). Shadows are the costliest single thing the board draws -- one per resting stone
@@ -123,6 +141,10 @@ export const DEFAULTS = Object.freeze({
   // the grid glow. that's just terrible"). Never-show makes the switch a control nobody may use,
   // and a control that must stay off is worse than no control: the board forces it off now.
   markets: Object.freeze({
+    // THE SWITCH (operator, 2026-09-15: "an app wide 'Enable Market Polling' checkbox"): off out
+    // of the box, so a fresh monitor makes no outbound connection but to the node. The server
+    // reads it from the shared settings file on every market request (http/api.js).
+    polling: false,
     stars: true,
     effects: true,        // the idle effects and the flight when the candles refresh
     // THE TOOLBAR REMEMBERS (operator, 2026-09-12: "We need to remember the user settings for the
@@ -166,9 +188,12 @@ export const DEFAULTS = Object.freeze({
   // for, and the board picks among whatever is left on (scheduleFx). Turn them all off and the
   // board simply rests, which `idleFx` also does in one click.
   effects: Object.freeze({
-    ripple: true, outline: true, tide: true, cascade: true, twinkle: true, scan: true,
+    ripple: true, outline: true, tide: true, cascade: true, twinkle: true, scan: true, xray: true,
     lightcycle: true, ball: true,
-    shockwave: true, nova: true, firework: true, flare: true, wave: true, quake: true,
+    // FIREWORKS ARE KEPT FOR OCCASIONS (operator, 2026-09-15: "make it disabled by default. I want
+    // to re-use that one for special occasions in the future, and don't want it in the rotation
+    // unless user selects it"): off on both boards until someone ticks it
+    shockwave: true, nova: true, firework: false, flare: true, wave: true, quake: true,
     rain: true, sparkle: true, checker: true, radar: true, vortex: true, powerup: true, combo: true, aurora: true, plasma: true,
     // the agents: something happening on the board, rather than a pattern over it
     centipede: true, tractor: true, missile: true, boulderdash: true, stormball: true,
@@ -192,10 +217,14 @@ export const DEFAULTS = Object.freeze({
   // should ship with ... Many of the effects don't translate over to the market chart"). Its own
   // no-repeat window too. All on, twelve.
   marketEffects: Object.freeze({
-    ripple: true, outline: true, tide: true, cascade: true, twinkle: true, scan: true,
+    ripple: true, outline: true, tide: true, cascade: true, twinkle: true, scan: true, xray: true,
     pulse: true,          // the surge that runs the price line
     bulge: true,          // a sphere rolls through the pipe and it swells round it
-    firework: true, flare: true, wave: true, stormball: true,
+    breathe: true,        // the line breathes between the wire and the pulse's heat
+    saber: true,          // the line ignites as a light saber
+    blackhole: true,      // the chart collapses into a black hole
+    firework: false,      // kept for occasions, off until ticked (see the block board's list)
+    flare: true, wave: true, stormball: true,
     noRepeat: 12,
     // no firstAfter here: the candle board does not land (operator, 2026-09-14: "there is no
     // 'landing' for the markets display"); after a refresh its first effect keeps the cadence below
@@ -287,15 +316,19 @@ const FX_ROW = Object.freeze({
   tide: Object.freeze({ label: 'Tide', hint: 'A swell that lifts the blocks it passes under' }),
   cascade: Object.freeze({ label: 'Cascade', hint: 'The blocks light in feerate order, richest first' }),
   twinkle: Object.freeze({ label: 'Twinkle', hint: 'Scattered blocks flash white, each on its own beat' }),
-  scan: Object.freeze({ label: 'Scan line', hint: 'A tight line crossing the board, edge to edge' }),
+  scan: Object.freeze({ label: 'Scan line', hint: 'A curtain of light standing on the board, floor to top, sweeping across: a white core, soft cyan faces, raster rippling down it, a bar it hangs from, a glowing foot with a phosphor tail, motes in the beam' }),
+  xray: Object.freeze({ label: 'X-ray', hint: 'A front sweeps the board and everything behind it goes x-ray -- bodies to glass, edges and a raster lit -- then develops back to solid' }),
   lightcycle: Object.freeze({ label: 'Light cycles', hint: 'Two riders from opposite edges, leaving light walls, until one crashes' }),
   ball: Object.freeze({ label: 'Lightning ball', hint: 'A plasma ball tracing the grid, throwing bolts and a dust trail' }),
   pulse: Object.freeze({ label: 'Energy pulse', hint: 'The surge that runs the price line on Markets, blue behind the head' }),
   bulge: Object.freeze({ label: 'Pipe bulge', hint: 'On Markets: a glowing sphere rolls through the price line left to right, and the pipe swells around it as it passes' }),
+  breathe: Object.freeze({ label: 'Breathe', hint: 'The price line breathes: three slow swells from the plain wire to the pulse\u2019s white heat and back' }),
+  saber: Object.freeze({ label: 'Light saber', hint: 'The price line ignites from its left end as a light saber -- blue, green, red or purple -- hums, spits sparks, and retracts' }),
+  blackhole: Object.freeze({ label: 'Black hole', hint: 'A point of darkness opens on the price line and grows, then drifts slowly across the chart from one side to the other: the line bends round it, the candles nearest are swallowed into orbit, and an accretion disk of the chart\u2019s own colours spirals in round the shadow -- brighter on the side coming toward you, its far side arched over the top -- until it lets everything go' }),
   shockwave: Object.freeze({ label: 'Shockwave', hint: 'A hard ring that throws the blocks it passes into the air' }),
   nova: Object.freeze({ label: 'Nova', hint: 'An implosion to the middle, then a brighter blast back out' }),
-  firework: Object.freeze({ label: 'Fireworks', hint: 'Three bursts, each at its own moment and place' }),
-  flare: Object.freeze({ label: 'Solar flare', hint: 'One block goes supernova and lights its neighbourhood' }),
+  firework: Object.freeze({ label: 'Fireworks', hint: 'A display of up to ten shells, each at its own moment and place, with its smoke. Off by default -- kept for special occasions; tick it to put it in the rotation' }),
+  flare: Object.freeze({ label: 'Supernova', hint: 'One block goes supernova: a star swells and blows out in a white-out, a debris cloud of gas expands and cools white to blue to violet, a shockwave throws what it crosses, and a pulsar is left beating at the centre' }),
   wave: Object.freeze({ label: 'Wave', hint: 'Several crests rolling across the board, the blocks riding them' }),
   quake: Object.freeze({ label: 'Quake', hint: 'The board shakes, hardest at the start, and settles' }),
   rain: Object.freeze({ label: 'Code rain', hint: 'A drop falls down every column with a white head and a green tail' }),
@@ -315,12 +348,13 @@ const FX_ROW = Object.freeze({
 });
 // where an effect reads differently on the price board, the price board's hint
 const MARKET_HINT = Object.freeze({
+  blackhole: 'A point of darkness opens on the price line and grows, then drifts slowly along the hours from one side to the other: the line bends round it, the candles nearest are swallowed into orbit, and an accretion disk of the chart\u2019s own colours spirals in round the shadow -- brighter on the side coming toward you, its far side arched over the top -- until it lets everything go',
   twinkle: 'Scattered candles flash white, each on its own beat',
-  pulse: 'The surge that runs the price line, blue behind the head',
+  pulse: 'The surge that runs the price line: the tube swells round the head and goes white-hot behind it',
   bulge: 'A glowing sphere rolls through the price line left to right, and the pipe swells around it as it passes',
   stormball: 'An electric blue sphere in a nebula flies through the chart, striking candles and charging the price line where it passes; a struck candle often throws a green arc on to another, and that one sometimes on to a third',
   cascade: 'The candles light in order, tallest first',
-  flare: 'One candle goes supernova and lights its neighbourhood',
+  flare: 'One candle goes supernova: it swells white-hot, blows out in a flash and a lens flare, a shockwave rings out across the chart, plasma is flung on every side, and a ring nebula expands and cools for the rest of the run',
 });
 // THE WINDOW'S TOP IS THE LIST'S LENGTH (operator, 2026-09-14: "for the markets page, all we have
 // is 12 effects, so max the slider out at max effects"): a window wider than the list is the same
@@ -349,7 +383,40 @@ export function fxCadence(g) {
   return { idleEvery, idleFirst };
 }
 
-export const PANEL = Object.freeze([
+// THE TABS, IN ORDER AND IN ROWS (operator, 2026-09-16: "we really need to group these better.
+// Diversions go at the very end"). The groups are written below in the order they were added; the
+// sheet shows them in this order, each row of the strip labelled: the boards, their effects, the
+// games last.
+export const TAB_ROWS = Object.freeze([
+  Object.freeze({ label: 'Boards', groups: Object.freeze(['appearance', 'space', 'sky', 'markets']) }),
+  Object.freeze({ label: 'Effects', groups: Object.freeze(['effects', 'marketEffects']) }),
+  Object.freeze({ label: 'Diversions', groups: Object.freeze(['tetrust', 'blockout', 'blockanoid']) }),
+]);
+const PANEL_GROUPS = Object.freeze([
+  Object.freeze({
+    group: 'appearance',
+    title: 'Appearance',
+    note: 'The colours of the layout: the page, its cards, text, lines, accent and charts. The 3D boards are space whatever is chosen here, and the Explorer\u2019s block and transaction pages keep their own dark cards.',
+    rows: Object.freeze([
+      Object.freeze({
+        key: 'mode', label: 'Theme mode', kind: 'segment', hint: 'Light or dark, or whichever the operating system asks for (System follows it as it changes)',
+        options: Object.freeze([['light', 'Light'], ['dark', 'Dark'], ['system', 'System']]),
+      }),
+      Object.freeze({
+        key: 'theme', label: 'Theme', kind: 'cards', hint: 'Each has a light and a dark face; the mode above picks which. Custom is the nine colours below',
+        options: Object.freeze([['blockyard', 'BlockYard'], ['mono', 'Mono'], ['nous', 'Nous'], ['github', 'GitHub'], ['catppuccin', 'Catppuccin'], ['custom', 'Custom']]),
+      }),
+      Object.freeze({ key: 'customBg', label: 'Page', kind: 'colour', hint: 'The colour behind everything. Whether Custom is a light or a dark theme follows from this one: the derived shades go the other way', custom: true }),
+      Object.freeze({ key: 'customPanel', label: 'Panels', kind: 'colour', hint: 'Cards, the header, tables and the settings sheet. Raised panels and hovers are this nudged toward the text colour', custom: true }),
+      Object.freeze({ key: 'customText', label: 'Text', kind: 'colour', hint: 'Body text and figures', custom: true }),
+      Object.freeze({ key: 'customMuted', label: 'Muted text', kind: 'colour', hint: 'Labels, hints and notes. The fainter text is this halfway to the page colour', custom: true }),
+      Object.freeze({ key: 'customAccent', label: 'Accent', kind: 'colour', hint: 'Titles, the active tab, links, buttons and the primary lines of charts', custom: true }),
+      Object.freeze({ key: 'customLine', label: 'Lines', kind: 'colour', hint: 'Card borders and table rules. The softer rules are this halfway to the page colour', custom: true }),
+      Object.freeze({ key: 'customOk', label: 'Good', kind: 'colour', hint: 'Synced, fresh, a block on time', custom: true }),
+      Object.freeze({ key: 'customWarn', label: 'Warning', kind: 'colour', hint: 'Late, stale, a caveat', custom: true }),
+      Object.freeze({ key: 'customBad', label: 'Bad', kind: 'colour', hint: 'Overdue, failed, offline', custom: true }),
+    ]),
+  }),
   Object.freeze({
     group: 'space',
     title: 'Block space',
@@ -419,8 +486,24 @@ export const PANEL = Object.freeze([
   Object.freeze({
     group: 'markets',
     title: 'Markets & Price',
-    note: 'The candle board on Markets and Kiosk.',
+    note: 'The exchange feed, and the candle board on Markets and Kiosk.',
     rows: Object.freeze([
+      Object.freeze({
+        key: 'polling', label: 'Enable market polling', kind: 'toggle',
+        hint: 'Let the server ask five exchanges (Coinbase, Kraken, Bitstamp, Bitfinex, OKX) for prices, candles and order books. '
+          + 'Off out of the box: this is the only thing the monitor ever says to anyone but your node, and until it is on, '
+          + 'Markets and Kiosk say so and the explorer shows no dollar figures. On, the server asks only while someone is looking, '
+          + 'and stops ten minutes after the last look. Shared by every screen of this monitor',
+      }),
+      // right under the polling switch it depends on (operator, 2026-09-15: "Move price line on Overview
+      // underneath Enable Market Polling")
+      Object.freeze({
+        key: 'overviewSummary', label: 'Price line on Overview', kind: 'toggle',
+        hint: 'Median, spread, 24 h volume and how many books reported, at the top of Overview. '
+          + 'It needs market polling (above); with that on, leaving this on means this monitor contacts '
+          + 'five exchanges whenever Overview is open, not only on Markets and Kiosk. '
+          + 'Switch it off and the landing page talks to nothing but your node.',
+      }),
       Object.freeze({ key: 'stars', label: 'Star field', kind: 'toggle', hint: 'The twinkling sky behind the candles' }),
       Object.freeze({ key: 'effects', label: 'Board effects', kind: 'toggle', hint: 'The idle effects while the board rests (which of them is the Market effects tab) and the flight when the candles refresh. Off draws the board and leaves it alone' }),
       Object.freeze({
@@ -431,13 +514,6 @@ export const PANEL = Object.freeze([
         key: 'range', label: 'Range', kind: 'choice', hint: 'How many hours the chart covers when the page opens',
         options: Object.freeze([['24', '24 hours'], ['48', '48 hours'], ['168', '7 days']]),
       }),
-      Object.freeze({
-        key: 'overviewSummary', label: 'Price line on Overview', kind: 'toggle',
-        hint: 'Median, spread, 24 h volume and how many books reported, at the top of Overview. '
-          + 'On by default: it needs the exchange feed, so leaving it on means this monitor '
-          + 'contacts five exchanges whenever Overview is open, not only on Markets and Kiosk. '
-          + 'Switch it off and the landing page talks to nothing but your node.',
-      }),
       Object.freeze({
         key: 'priceView', label: 'Price view', kind: 'choice', hint: 'Which one the Markets page draws. Only one at a time — they show the same hours, and two tall panels of it filled the screen',
         options: Object.freeze([['2d', 'Flat chart'], ['3d', '3D candle board']]),
@@ -503,7 +579,7 @@ export const PANEL = Object.freeze([
     note: 'What the Block space board may play while it rests. One is chosen at random every seven to thirteen seconds, never one played within the no-repeat window \u2014 so the more you leave on, the less often you see any one of them. The Markets board has a list of its own, on the next tab.',
     bulk: true,
     rows: fxRows([
-      'ripple', 'outline', 'tide', 'cascade', 'twinkle', 'scan', 'lightcycle', 'ball', 'shockwave', 'nova',
+      'ripple', 'outline', 'tide', 'cascade', 'twinkle', 'scan', 'xray', 'lightcycle', 'ball', 'shockwave', 'nova',
       'firework', 'flare', 'wave', 'quake', 'rain', 'sparkle', 'checker', 'radar', 'vortex', 'powerup',
       'combo', 'aurora', 'plasma', 'centipede', 'tractor', 'missile', 'boulderdash', 'stormball',
     ]),
@@ -511,10 +587,10 @@ export const PANEL = Object.freeze([
   Object.freeze({
     group: 'marketEffects',
     title: 'Market effects',
-    note: 'What the candle board on Markets and Kiosk may play while it rests, chosen the same way as on Block space but from the twelve that translate to a chart: fronts along the hours, bursts from the candle row, the candles lit where they stand, and the price line\u2019s own pulse, bulge and ball lightning. The Board effects switch on the Markets & Price tab is the master.',
+    note: 'What the candle board on Markets and Kiosk may play while it rests, chosen the same way as on Block space but from the sixteen that translate to a chart: fronts along the hours, bursts from the candle row, the candles lit where they stand, and the price line\u2019s own pulse, bulge and ball lightning. The Board effects switch on the Markets & Price tab is the master.',
     bulk: true,
     rows: fxRows([
-      'ripple', 'outline', 'tide', 'cascade', 'twinkle', 'scan', 'pulse', 'bulge', 'firework', 'flare', 'wave', 'stormball',
+      'ripple', 'outline', 'tide', 'cascade', 'twinkle', 'scan', 'xray', 'pulse', 'bulge', 'breathe', 'saber', 'blackhole', 'firework', 'flare', 'wave', 'stormball',
     ], MARKET_HINT, { landing: false, top: 300 }),
   }),
   Object.freeze({
@@ -545,6 +621,12 @@ export const PANEL = Object.freeze([
     ]),
   }),
 ]);
+/** The groups in the sheet's order: row by row of TAB_ROWS, then anything a row forgot (a test says nothing is). */
+export const PANEL = Object.freeze([
+  ...TAB_ROWS.flatMap((row) => row.groups.map((id) => PANEL_GROUPS.find((g) => g.group === id)).filter(Boolean)),
+  ...PANEL_GROUPS.filter((g) => !TAB_ROWS.some((row) => row.groups.includes(g.group))),
+]);
+
 
 // "group.key" -> the row that defines it. The bounds live in exactly one place now.
 const ROWS = new Map();