public/puppeteer/pick-and-click.js

const body = document.querySelector('body')

const count = document.createElement('div')
count.className = 'count'
count.textContent = 'hsl(0, 50%, 0%)'

const hueText = document.createElement('div')
hueText.className = 'text hue'
hueText.textContent = 'hue'

const luminosityText = document.createElement('div')
luminosityText.className = 'text luminosity'
luminosityText.textContent = 'luminosity'

const origin = document.createElement('div')
origin.className = 'text origin'

const picked = document.createElement('div')
picked.className = 'text picked'
picked.textContent = 'Color successfully picked!'

const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg')
svg.setAttributeNS(
  'http://www.w3.org/2000/xmlns/',
  'xmlns:xlink',
  'http://www.w3.org/1999/xlink',
)
svg.setAttribute('width', window.innerWidth)
svg.setAttribute('height', window.innerHeight)
svg.setAttribute('viewBox', `0 0 ${window.innerWidth} ${window.innerHeight}`)

const axisX = document.createElementNS('http://www.w3.org/2000/svg', 'line')
axisX.setAttribute('y1', window.innerHeight)
axisX.setAttribute('y2', 0)
svg.append(axisX)

const axisY = document.createElementNS('http://www.w3.org/2000/svg', 'line')
axisY.setAttribute('x1', window.innerWidth)
axisY.setAttribute('x2', 0)
svg.append(axisY)

body.append(count, hueText, luminosityText, origin, picked, svg)

export const pick = () => {
  document.addEventListener('mousemove', (e) => set(e))
  setTimeout(
    () => document.removeEventListener('mousemove', (e) => set(e)),
    500,
  )

  body.addEventListener('click', click)
  setTimeout(() => document.removeEventListener('click', click), 500)

  body.addEventListener('copy', copy)
  setTimeout(() => document.removeEventListener('copy', copy), 500)
}

const click = (e) => {
  document.execCommand('copy')
  const wave = document.createElement('div')
  wave.className = 'wave'
  wave.style.top = `${e.clientY - 10}px`
  wave.style.left = `${e.clientX - 10}px`
  body.append(wave)
  setTimeout(() => wave.remove(), 150)
}

const copy = (event) => {
  event.preventDefault()
  if (event.clipboardData) {
    event.clipboardData.setData('text/plain', count.textContent)
    picked.classList.add('fade-in')
    setTimeout(() => picked.classList.remove('fade-in'), 1000)
  }
}

const calc = (number, max) =>
  Math.round(Math.min(max, Math.max(0, max * number)))

const set = ({ clientX, clientY }) => {
  const { innerWidth, innerHeight } = window
  const padding = 100
  const mouseX = clientX - padding
  const mouseY = clientY - padding

  const hue = calc(mouseX / (innerWidth - padding * 2), 360)
  const luminosity = calc(mouseY / (innerHeight - padding * 2), 100)
  const color = `hsl(${hue}, 50%, ${luminosity}%)`

  axisX.setAttribute('x1', clientX)
  axisX.setAttribute('x2', clientX)
  axisY.setAttribute('y1', clientY)
  axisY.setAttribute('y2', clientY)

  axisX.setAttribute('stroke', color)
  axisY.setAttribute('stroke', color)

  body.style.color = color
  body.style.background = color
  origin.style.background = color
  count.textContent = color

  hueText.textContent = `hue\n${hue}`
  luminosityText.textContent = `${luminosity}\nluminosity`
}