forked from root/public
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
68 lines
1.8 KiB
68 lines
1.8 KiB
4 years ago
|
const body = document.querySelector('body')
|
||
|
|
||
|
const box = document.createElement('div')
|
||
|
box.className = 'box'
|
||
|
body.append(box)
|
||
|
|
||
|
const { top, bottom, left, right } = box.getBoundingClientRect()
|
||
|
|
||
|
const diameter = 50
|
||
|
const radius = diameter / 2
|
||
|
|
||
|
const insideX = (clientX) => clientX > left + radius && clientX < right - radius
|
||
|
const insideY = (clientY) => clientY > top + radius && clientY < bottom - radius
|
||
|
|
||
|
let isInside = false
|
||
|
|
||
|
export const createCircle = () => {
|
||
|
document.addEventListener('click', (e) => create(e))
|
||
|
setTimeout(() => document.removeEventListener('click', create), 500)
|
||
|
}
|
||
|
|
||
|
const create = ({ clientX, clientY }) => {
|
||
4 years ago
|
const circle = document.createElement('div')
|
||
|
circle.className = 'circle'
|
||
|
body.append(circle)
|
||
|
circle.style.top = `${clientY - radius}px`
|
||
|
circle.style.left = `${clientX - radius}px`
|
||
|
circle.style.background = 'white'
|
||
4 years ago
|
const hasEntered = insideX(clientX) && insideY(clientY)
|
||
|
if (hasEntered) {
|
||
4 years ago
|
circle.style.background = 'var(--purple)'
|
||
4 years ago
|
}
|
||
|
isInside = false
|
||
|
}
|
||
|
|
||
|
export const moveCircle = () => {
|
||
|
document.addEventListener('mousemove', (e) => move(e))
|
||
|
setTimeout(() => document.removeEventListener('mousemove', move), 500)
|
||
|
}
|
||
|
|
||
|
const move = (e) => {
|
||
4 years ago
|
const circles = [...document.getElementsByClassName('circle')]
|
||
|
const circle = circles[circles.length - 1]
|
||
|
if (!circle) return
|
||
|
position(e, circle)
|
||
4 years ago
|
}
|
||
|
|
||
4 years ago
|
const position = ({ clientX, clientY }, circle) => {
|
||
4 years ago
|
const hasEntered = insideX(clientX) && insideY(clientY)
|
||
|
|
||
|
if (hasEntered) {
|
||
|
isInside = true
|
||
4 years ago
|
circle.style.background = 'var(--purple)'
|
||
4 years ago
|
}
|
||
|
|
||
|
if (isInside) {
|
||
|
if (insideY(clientY)) {
|
||
4 years ago
|
circle.style.top = `${clientY - radius}px`
|
||
4 years ago
|
}
|
||
|
if (insideX(clientX)) {
|
||
4 years ago
|
circle.style.left = `${clientX - radius}px`
|
||
4 years ago
|
}
|
||
|
} else {
|
||
4 years ago
|
circle.style.top = `${clientY - radius}px`
|
||
|
circle.style.left = `${clientX - radius}px`
|
||
4 years ago
|
}
|
||
|
}
|