viewof overlay = { const height = 200 const iconSize = 130 const transitionTime = .3 function map(streamFeatures) { // via https://observablehq.com/@mbostock/u-s-state-map const p = 80 const svg = d3.create('svg').attr('viewBox', [-p, -p, 975 + p * 2, 610 + p * 2]).attr('width', iconSize + 20).attr('height', iconSize) svg .append('path') .datum(topojson.mesh(us, us.objects.states)) .attr('fill', 'none') .attr('stroke', 'rgba(255, 255, 255, .75)') .attr('stroke-width', '40px') .attr('stroke-linejoin', 'round') .attr('d', path) svg .append('g') .attr('fill', '#222') .attr('stroke', '#222') .attr('stroke-width', '5px') .selectAll('path') .data(topojson.feature(us, us.objects.states).features) .enter().append('path') .attr('d', path) svg .append('path') .datum(topojson.mesh(us, us.objects.states, (a, b) => a !== b)) .attr('fill', 'none') .attr('stroke', '#444') .attr('stroke-width', '7px') .attr('stroke-linejoin', 'round') .attr('pointer-events', 'none') .attr('d', path) const points = svg.append('g') .selectAll('path') .data(streamFeatures) .enter().append('path') .attr('d', path) .attr('fill', (d) => d.properties.Status === 'Live' ? 'orangered' : '#999') .attr('opacity', .5) return svg.node() } function onNodeAdded(el) { if (el.className === 'icon') { el.style.transition = `all ${transitionTime}s linear ${transitionTime}s` el.style.transform = 'perspective(400px) rotateY(-90deg)' el.getBoundingClientRect() el.style.transform = 'perspective(400px) rotateY(0deg)' } else if (el.className === 'text') { el.style.position = 'absolute' el.style.transform = 'translateX(-5px)' el.style.opacity = 0 el.style.transition = `all ${transitionTime}s linear ${transitionTime}s` el.getBoundingClientRect() el.style.transform = 'translateX(0)' el.style.opacity = 1 } } function onBeforeNodeDiscarded(el) { if (el.className === 'icon') { el.style.transition = 'none' el.style.position = 'absolute' el.style.transform = 'perspective(400px) rotateY(0deg)' el.getBoundingClientRect() el.style.transition = `all ${transitionTime}s linear` el.style.transform = 'perspective(400px) rotateY(90deg)' setTimeout(() => {el.parentNode.removeChild(el)}, transitionTime * 1000) return false } else if (el.className === 'text') { el.style.transition = `all ${transitionTime}s linear` el.style.transform = 'translateX(5px)' el.style.opacity = 0 setTimeout(() => {el.parentNode.removeChild(el)}, transitionTime * 1000) return false } } function update({overlayView, streamFeatures}) { let icon let text if (overlayView === 'map') { icon = map(streamFeatures) text = html`${streamFeatures.length ? html`tracking ${streamFeatures.length} live streams ` : ''}woke.net/streams` } else if (overlayView === 'discord') { icon = html`

` text = html`join us discord.gg/woke` } else if (overlayView === 'woke') { icon = html`

` text = html`share a stream woke.net/submit` } const newNode = html`

${icon}

${text}

` morphdom(node, newNode, {onNodeAdded, onBeforeNodeDiscarded}) } const node = html`

` node.value = {update} return node }