canvas

by kassiomaia

HTML

<canvas id="board"></canvas>

JavaScript

const ColorTones = {
	COLOR_TONE_LOW: 0,
  COLOR_TONE_LOW_1: 1,
  COLOR_TONE_LOW_2: 2,
  COLOR_TONE_LOW_3: 3,
  COLOR_TONE_MEDIUM: 4,
  COLOR_TONE_MEDIUM_1: 5,
  COLOR_TONE_MEDIUM_2: 6,
  COLOR_TONE_MEDIUM_3: 7,
  COLOR_TONE_HIGH: 8,
  COLOR_TONE_SUPER_HIGH: 9
}

const {
	COLOR_TONE_LOW,
  COLOR_TONE_LOW_1,
  COLOR_TONE_LOW_2,
  COLOR_TONE_LOW_3,
  COLOR_TONE_MEDIUM,
  COLOR_TONE_MEDIUM_1,
  COLOR_TONE_MEDIUM_2,
  COLOR_TONE_MEDIUM_3,
  COLOR_TONE_HIGH,
  COLOR_TONE_SUPER_HIGH,
} = ColorTones

const ColorPallete = (function(palete, names, colors) {

	const mapOfColors = new Map(names.map((name, index) => [name, colors[index]]))

	function Color(value) {
  	Object.assign(this, { value })
  }
  
  Color.prototype = {
  	valueOf() {
    	return this.toRGB()
    },
    toString() {
    	return this.toRGB().toString()
    },
  	tone(level) {
			const hsl = this.toRGB().toHSL()
      hsl.l = level * 10
      return hsl.toString()
    },
    lightness(level) {
			const hsl = this.toRGB().toHSL()
      hsl.l = level
      const { r, g, b } = hsl.toRGB()
      const hexadecial = '#' + [r, g, b].map(value => {
      	const hex = Number(value).toString(16)
        if (hex.length === 1) {
        	return `0${hex}`
        }
        return hex;
      }).join('')
      return new Color(hexadecial)
    },
    saturation(level) {
			const hsl = this.toRGB().toHSL()
      console.log(hsl.h, hsl.s, hsl.l)
      hsl.s = level
      const { r, g, b } = hsl.toRGB()
      const hexadecial = '#' + [r, g, b].map(value => {
      	const hex = Number(value).toString(16)
        if (hex.length === 1) {
        	return `0${hex}`
        }
        return hex;
      }).join('')
      console.log(hexadecial)
      return new Color(hexadecial)
    },
    hue(level) {
			const hsl = this.toRGB().toHSL()
      hsl.h = level * 180 / Math.PI
      const { r, g, b } = hsl.toRGB()
      const hexadecial = '#' + [r, g, b].map(value => {
      	const hex = Number(value).toString(16)
        if...