Public
Edited
Dec 20, 2022
i
viewof i = Die({callback: })
viewof j = bar()
Inputs.bind(baz(), viewof i)
foo = function(state = {players: new Array(3).fill().map((d,i) => i)}, options={}) {
console.log("Foo")
const [h, w] = [100,300]
const render = options.render || ((sel, data) => {
console.log("Foo render")
sel.selectAll("text")
.data(data)
.join(enter => enter.append("text"),
update => update,
exit => exit.remove()
)
.text(d => d.players.join(", "))
return sel
})
const svg = d3.create("svg").attr("height", h).attr("width", w),
g = svg.append("g").attr("transform", `translate(${w/2} ${h/2})`)
const element = svg.node()
// let value;
Object.defineProperty(element, "value", {
get: () => state,
set: v => {
state = v;
render(g, [v]);
}
})
element.value = state
element.dispatchEvent(new Event("input", {bubbles: true}));
// render(g, [element.value])
element.onclick = () => {
state.players.push(state.players.length)
element.value = state
// element.value.players.push(element.value.players.length)
// element.value = state
// render(g, [element.value])
element.dispatchEvent(new Event("input", {bubbles: true}));
}
return element
}
bar = function(state = {players: new Array(5).fill().map((d,i) => i)}, options = {}) {
console.log("Bar")
const [h, w] = [100,300]
const render = options.render || ((sel, data) => {
console.log("Bar render")
sel.selectAll("text")
.data(data)
.join(enter => enter.append("text")
, update => update
,exit => exit.remove()
)
.text(d => d)
.attr("x", (d,i) => i * 10)
return sel
})
const svg = d3.create("svg").attr("height", h).attr("width", w),
g = svg.append("g").attr("transform", `translate(${w/2} ${h/2})`)
const element = svg.node()
// let value;
Object.defineProperty(element, "value", {
get: () => state,
set: v => {
state = v;
render(g, v.players);
}
})
// element.value = state
element.dispatchEvent(new Event("input", {bubbles: true}));
render(g, element.value.players)
element.onclick = function() {
console.log("bar onclick", this)
state.players.pop()
element.value = state
// render(g, element.value.players)
element.dispatchEvent(new Event("input", {bubbles: true}));
}
return element
}
baz = function({n = 3, players = new Array(this.n).fill().map((d,i) => i)} = {}, options={}) {
const state = {
players: players
}
console.log("baz")
const [h, w] = [100,300]
const render = options.render || ((sel, data) => {
console.log("baz render")
sel.selectAll("text")
.data(data)
.join(enter => enter.append("text"),
update => update,
exit => exit.remove()
)
.text(d => d.players.join(", "))
return sel
})
const svg = d3.create("svg").attr("height", h).attr("width", w),
g = svg.append("g").attr("transform", `translate(${w/2} ${h/2})`)
const element = svg.node()
// let value;
Object.defineProperty(element, "value", {
get: () => state,
set: function(v) {
console.log("element value", this.value)
state = v;
// this.dispatchEvent(new Event("input", {bubbles: true}));
render(g, [v]);
}
})
Object.defineProperty(element, "takeTurn", {
get: () => state,
set: v => {
state = v;
render(g, [v]);
}
})
element.value = state
element.dispatchEvent(new Event("input", {bubbles: true}));
// render(g, [element.value])
element.onclick = () => {
state.players.push(state.players.length)
element.value = state
// element.value.players.push(element.value.players.length)
// element.value = state
// render(g, [element.value])
element.dispatchEvent(new Event("input", {bubbles: true}));
}
return element
}
import {Die} from "@petroleumjelliffe/board-game-random-number-generator"
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
