<script>
import { onMount } from 'svelte'
const height = 200
let points = [{x: 10, y: 10, speed: 0, acceleration: 0}]
let clock = 0
let showing = ''
onMount(() => {
let interval = setInterval(() => {
clock++
}, 100)
return () => clearInterval(interval)
})
function recordPoint(e) {
const dim = e.target.getBoundingClientRect()
const y = e.clientY - dim.top
const last = points[points.length - 1]
const point = {x: clock, y: height - y}
const dx = point.x - last.x
point.speed = (point.y-last.y) / dx
point.acceleration = (point.speed-last.speed)
points = [...points, point]
}
function show(item) {
showing = item
}
</script>
<div class="badges" on:mouseout={() => show(null)} class:showing>
<span style="background: black;" on:mouseover={() => show('count')}>count</span>