30:T687,function seedButton(label = "🎲 Generate seed", opts = {}) { const { disabled, undoLabel, redoLabel } = Object.assign( { disabled: false, undoLabel: "⏪ Undo", redoLabel: "⏩ Redo" }, opts ); const machine = createSeedButtonMachine(generateRandomSeed); const service = xState.interpret(machine).start(); const undoButton = html``; const redoButton = html``; const form = html``; function dispatchInputEvent() { form.dispatchEvent(new Event("input", { bubbles: true })); } function updateUi(state) { undoButton.disabled = state.value === "idle" || state.value === "bigbang"; redoButton.disabled = state.value === "idle" || state.value === "present"; form.dataset.seedButtonState = state.value; } service.subscribe((state) => { updateUi(state); dispatchInputEvent(); }); attachStyles(invalidation); invalidation.then(() => service.stop()); return Object.defineProperty(form, "value", { get() { const { seeds, head } = service.state.context; return seeds[head]; }, set(value) { service.send({ type: "GENERATE", seed: value }); } }); }31:T9d1,function createSeedButtonMachine(seedGenerator) { const { createMachine, assign } = xState; const commonEvents = { GENERATE: { target: "present", actions: "generateSeed" } }; const guards = { isHeadPointingSecond: (context) => context.head === 1, isHeadPointingSecondLast: (context) => context.head === context.seeds.length - 2 }; return createMachine( { id: "seed-button", initial: "idle", context: { seeds: [getSeedFromUrl() || seedGenerator()], head: 0 }, states: { idle: { on: { ...commonEvents } }, bigbang: { on: { ...commonEvents, REDO: [ { cond: guards.isHeadPointingSecondLast, target: "present", actions: "redo" }, { target: "past", actions: "redo" } ] } }, past: { on: { ...commonEvents, UNDO: [ { cond: guards.isHeadPointingSecond, target: "bigbang", actions: "undo" }, { target: "past", actions: "undo" } ], REDO: [ { cond: guards.isHeadPointingSecondLast, target: "present", actions: "redo" }, { target: "past", actions: "redo" } ] } }, present: { on: { ...commonEvents, UNDO: [ { cond: guards.isHeadPointingSecond, target: "bigbang", actions: "undo" }, { target: "past", actions: "undo" } ] } } } }, { actions: { generateSeed: assign({ head: (context) => context.head + 1, seeds: (context, event) => [ ...context.seeds.slice(0, context.head + 1), event.seed || seedGenerator() ] }), undo: assign({ head: (context) => Math.max(context.head - 1, 0) }), redo: assign({ head: (context) => context.head + 1 }) } } ); }32:[] 2e:{"title":"Seed Button","cells":[{"id":0,"value":"# Seed Button","pinned":false,"hidden":false,"mode":"md"},{"id":78,"value":"paragraph1 = md`> _“Finding the right seed is the hardest part in generative art.”_—Anonymous^{[[1](#footnote1)]}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":214,"value":"You can generate a numeric seed or hash using this component. The value, seed, can be used with any random generator. You can see it action in [056 Connections](https://observablehq.com/@saneef/056-connections) notebook. The pressing the first button will generate another random seed. The second button, undo, will take you back to the last generated seed.\n\nYou can provide an initial seed as URL parameter. [More it below](#seedFromUrl).\n\n## Features\n\n⏪ **Supports undo and redo.** (Try clicking generate seed button once).
\n⚡️ Can read initial seed from URL query parameter.","pinned":false,"hidden":false,"mode":"md"},{"id":189,"value":"\n## Usage\nImport into your notebook using:\n~~~js\nimport {seedButton} from '@saneef/seed-button'\n~~~\n\n... then, initialise the button using:\n\n~~~js\nviewof seed = seedButton(\"Shuffle\")\n~~~\n\n... use `seed` variable to seed your random generator.\n~~~js\nrandom.setSeed(seed)\n~~~","pinned":false,"hidden":false,"mode":"md"},{"id":217,"value":"seedFromUrl = md`### Starting seed as URL param\n\nYou can provide the starting seed number as the URL parameter.\n\nExample: \\`?seed=1001\\``","pinned":false,"hidden":false,"mode":"ojs"},{"id":197,"value":"## Examples","pinned":false,"hidden":false,"mode":"md"},{"id":244,"value":"### Default","pinned":false,"hidden":false,"mode":"md"},{"id":240,"value":"viewof seed = seedButton()","pinned":true,"hidden":false,"mode":"ojs"},{"id":242,"value":"seed","pinned":true,"hidden":false,"mode":"ojs"},{"id":248,"value":"### Custom label","pinned":false,"hidden":false,"mode":"md"},{"id":45,"value":"viewof aSeedBtn = seedButton(\"Randomize\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":53,"value":"aSeedBtn","pinned":true,"hidden":false,"mode":"ojs"},{"id":252,"value":"### Options","pinned":false,"hidden":false,"mode":"md"},{"id":204,"value":"viewof bSeedBtn = seedButton(\"Randomize\", {\n disabled: true, // Disables whole component\n undoLabel: \"Back\" // Replace label of undu button\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":203,"value":"### Write a specific seed","pinned":false,"hidden":false,"mode":"md"},{"id":202,"value":"viewof cSeedBtn = seedButton()","pinned":true,"hidden":false,"mode":"ojs"},{"id":201,"value":"cSeedBtn","pinned":true,"hidden":false,"mode":"ojs"},{"id":132,"value":"Inputs.button(\"Write a specific seed\", {\n reduce: () => {\n viewof cSeedBtn.value = 1111;\n }\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":87,"value":"## Implementation","pinned":false,"hidden":false,"mode":"md"},{"id":8,"value":"$30","pinned":true,"hidden":false,"mode":"ojs"},{"id":115,"value":"function getSeedFromUrl() {\n const s = params.get(\"seed\");\n\n return s === null ? null : +s;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":171,"value":"blockClass = `${msns}-form`","pinned":true,"hidden":false,"mode":"ojs"},{"id":108,"value":"params = new URLSearchParams(location.search)","pinned":true,"hidden":false,"mode":"ojs"},{"id":97,"value":"function generateRandomSeed() {\n return Math.floor(Math.random() * 1_000_000_000);\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":40,"value":"ns = Inputs.text().classList[0]","pinned":true,"hidden":false,"mode":"ojs"},{"id":166,"value":"msns = {\n return ns.replace(\"oi-\", \"sb-\");\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":169,"value":"newId = {\n let nextId = 0;\n\n return function newId() {\n return `${msns}-${++nextId}`;\n };\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":154,"value":"attachStyles = (placeOfUseInvalidation) => {\n const elId = `${msns}-seed-button`;\n\n if (document.getElementById(elId)) return;\n\n const style = html``;\n\n document.head.append(style);\n\n placeOfUseInvalidation.then(() => style.remove());\n invalidation.then(() => style.remove());\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":285,"value":"$31","pinned":true,"hidden":false,"mode":"ojs"},{"id":268,"value":"## Changelog\n\n- **2022-06-05 (v262):** Initial release\n- **2022-06-06 (v272):** Undo button is only shown when at least one seed is generated.\n- **2022-06-18 (v291):** Adds support for redo.\n- **2022-06-20 (v298):** Refactor event handlers. Minor style updates.","pinned":false,"hidden":false,"mode":"md"},{"id":31,"value":"## Imports","pinned":false,"hidden":false,"mode":"md"},{"id":36,"value":"html = htl.html","pinned":false,"hidden":false,"mode":"ojs"},{"id":283,"value":"xState = import(\"https://unpkg.com/@xstate/fsm@2.0.0/es/index.js?module\")\n//import(\"https://cdn.skypack.dev/xstate@4.32.1?min\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":300,"value":"import { footer } from \"@saneef/notebooks-footer\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":230,"value":"## Credits\n\n- Uses [@xstate/fsm](https://github.com/statelyai/xstate/tree/main/packages/xstate-fsm).\n- Icon on cover, [‘Dice’ by Eucalyp](https://thenounproject.com/icon/dice-1943719/) from NounProject.com","pinned":false,"hidden":false,"mode":"md"},{"id":71,"value":"footnotes = md`---\n\n## Footnotes`","pinned":false,"hidden":false,"mode":"ojs"},{"id":74,"value":"footnote1 = md`1. [^](#paragraph1) I heard this in some video about generative art. I’m not able to recall which one. If you know, please tell me.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":305,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":306,"value":"footer","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}