viewof board2 = Board()
board2
Board = function(spec = {}) {
spec.game = spec.game || Game()
const svg = d3.create("svg")
.attr("height", options.height)
.attr("width", options.width)
const element = svg.node()
// element.value = {snails: snails} //initial game state
element.value = spec.game.getState() //initialize, all at 0
const board = svg.append("g"),
sprites = svg.append("g"),
dice = svg.append("g").classed("dicebg", true)
const scaleX = d3.scaleBand()
.domain([0, 1, 2, 3, 4, 5, 6, 7, 8])
.range([0, options.width])
.padding(.3),
scaleY = d3.scaleBand()
.domain(snailsArray.map(d => d[0]))
.range([options.margins.top, options.height])
.padding(.3),
scaleLanesX = scaleX.copy().padding(.15),
scaleLanesY = scaleY.copy().padding(.15)
const lanes = board.selectAll(".lane")
.data(snailsArray)
.join(enter => enter.append("g")
.attr("class", "lane"),
update => update,
exit => exit.remove())
lanes.each(function(d) {
// console.log(this)
const lane = d3.select(this)
const array = [0,1,2,3,4,5,6,7,8]
array.map(space => {
//create spaces
lane.append("rect")
.attr("rx", scaleLanesX.bandwidth()/10)
.attr("x", d => scaleLanesX(space))
.attr("y", d => scaleLanesY(d[0]))
.attr("fill", "lightgoldenrodyellow")
.attr("width", scaleLanesX.bandwidth())
.attr("height", scaleLanesY.bandwidth())
.attr("stroke", d[0])
})
})
element.update = function(roll) {
// return Object.assign(svg.node(), {
// update: function(data) {
element.value = game.takeTurn(roll)
const transform = d => `translate(${scaleX(d[1])} ${scaleY(d[0]) - 25})`
const pieces = sprites.selectAll(".piece")
.data(element.value.snails, d => d[0])
.join(enter => enter.append("path")
.attr("d", sprite)
.attr("ry", scaleY.bandwidth()/4)
.attr("class", "piece")
.attr("transform", transform)
.attr("fill", d => d[0]),
update => update,
exit => exit.remove())
pieces.each(function(d, i) {
d3.select(this)
.transition()
.ease(d3.easeCubicOut)
.delay(2500+ Math.random() * 500) // while showing roll results
.duration(1000)
.attr("transform", transform)
})
element.dispatchEvent(new Event("input", {bubbles: true}));
// return element.value
}
return element
// })
}
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.
