bienenkisteBuilder = (frames, data, inside = false) => {
const selectedCover = coverPicker(data.cover)
const selectedBase = basePicker("HORIZONTAL")
const padding = inside ? 8: 4
const width= frames * 12
const height = depthToPx(data.boxes[0].depth) +selectedBase.height+padding*2
const quadBoxScale = d3.scaleBand().domain(["0","1","2","3"]).range([0,width]).paddingInner(inside ? 0.2 : 0.1)
const svg = DOM.svg(width, height)
const stack = d3.select(svg).attr("style", "overflow:visible")
const base = stack.selectAll(".base")
.data([data])
.enter()
.append("svg")
.attr("width", width+8)
.attr("height", selectedBase.height)
.attr("x", -4)
.attr("y", height-selectedBase.height)
.attr("viewBox",`0 0 ${selectedBase.width} ${selectedBase.height}`)
.attr("style", "overflow:visible")
.attr("preserveAspectRatio","none")
base.append("path")
.attr("d", selectedBase.outline)
.attr("fill","#7B5045")
.attr("fill",inside ? "#A67735" :"#7B5045")
.attr("style",d=> `stroke-width:4;stroke:${inside ? "#7B371F" : "none"}; `)
const baseShadow = base.append("g")
.attr("style", "mix-blend-mode:multiply")
.attr("opacity", inside ? 0 :0.25)
.attr("width", selectedBase.width)
.attr("height", selectedBase.height)
baseShadow.append("path")
.attr("d",selectedBase.shadow1)
.attr("fill","#282927")
baseShadow.append("path")
.attr("d",selectedBase.shadow2)
.attr("fill","#282927")
baseShadow.append("path")
.attr("d",selectedBase.shadow3)
.attr("fill","#282927")
const boxes = stack.selectAll(".boxes")
.data(data.boxes)
.enter()
.append("svg")
.attr("class", "boxes")
.attr("style", "overflow:visible")
.attr("x",(d,i)=>i* 3*width/4)
.attr("y",d=>height-padding*2-selectedBase.height-depthToPx(d.depth))
.attr("height",d=>depthToPx(d.depth) + padding + (d.excluder ? 8 : 4))
.attr("width",width)
boxes.append("rect")
.attr("fill", d=> inside ? typeToColours(d.type)[1] :"#CFA67C")
.attr("width", (d,i)=>i===0 ? 3*width/4-padding : width/4)
.attr("height", d=> depthToPx(d.depth))
.attr("rx", 4)
.attr("ry", 4)
.attr("style",d=> `stroke-width:4;stroke:${inside ? typeToColours(d.type)[0] : "none"}; `)
boxes.append("line")
.attr("x1",2)
.attr("y1",0)
.attr("x2",width-2)
.attr("y2",0)
.attr("style", d=>`stroke:#7B5045; stroke-width:${d.excluder ? 4: 0}; stroke-dasharray: 8;stroke-linecap:round`)
const outline = stack.selectAll(".outline")
.data([data])
.enter()
.append("svg")
.attr("class", "outline")
.attr("style", "overflow:visible")
outline.append("rect")
.attr("fill",d=> inside ? "none" :"#CFA67C")
.attr("style",d=> `stroke-width:8;stroke:${inside ? "#737373" : "none"}; `)
.attr("x",-padding)
.attr("y",-padding)
.attr("rx", 4)
.attr("ry", 4)
.attr("width",width+padding*2)
.attr("height",d=>depthToPx(d.boxes[0].depth)+padding*2)
const shadow = outline.append("g")
.attr("style", "mix-blend-mode:multiply")
.attr("opacity", inside ? 0 :0.25)
.attr("width",width+padding*2)
.attr("height",d=>depthToPx(d.boxes[0].depth)+padding*2)
shadow.append("path")
.attr("d",d=>`M${-padding} ${-padding}L${(width+padding)*.90} ${ (depthToPx(d.boxes[0].depth)+padding*2)*.1} L${width+padding} ${depthToPx(d.boxes[0].depth)+padding*2} L${width+padding} ${-padding} Z`)
.attr("fill","#282927")
shadow.append("path")
.attr("d","M0.548096 0.945803L29.4514 0.945801L25.1159 7.09676L4.88362 7.09676L0.548096 0.945803Z")
.attr("fill","#282927")
.attr("transform",d=>`translate(${width/2-14}, ${ (depthToPx(d.boxes[0].depth)+padding*2)/2-3})`)
return svg
}