westc/vue3-component-clickable-dragon-balls.html

## vue3-component-clickable-dragon-balls.html
<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset='UTF-8'>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Clickable Dragon Balls</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/3.2.37/vue.global.prod.min.js"></script>
    <script>
      addEventListener('DOMContentLoaded', () => {
        Vue.createApp({
          data() {
            return {
              offset: 60
            };
          },
          components: {
            'dragon-balls': {
              props: {
                offset: {
                  type: Number,
                  default: 60
                }
              },
              data() {
                return {hue: 0};
              },
              computed: {
                cssStyle() {
                  return {
                    height: '1em',
                    width: '1em',
                    color: this.hue ? `hsl(${this.hue}deg, 100%, 50%)` : 'black',
                    filter: 'drop-shadow(0 0 1px #FFF) drop-shadow(0 0 1px #FFF) drop-shadow(0 0 1px #000)',
                    userSelect: 'none',
                    cursor: 'pointer'
                  }
                }
              },
              template: `
                <svg xmlns="http://www.w3.org/2000/svg" @click="click" :style="cssStyle" viewBox="0 0 512 512"><path fill="currentColor" d="M324.582 17.393c-93.624 0-169.723 76.094-169.723 169.72c0 93.627 76.098 169.725 169.722 169.725c93.624 0 169.725-76.098 169.725-169.725c0-93.624-76.1-169.72-169.725-169.72zm0 18.69c83.523 0 151.033 67.507 151.033 151.03c0 83.525-67.51 151.033-151.033 151.033c-83.523 0-151.03-67.508-151.03-151.033c0-83.525 67.507-151.03 151.03-151.03M356.54 62.01c-4.802-.08-9.63.392-14.448 1.474c-34.385 7.73-39.338 45.97.678 50.385c30.042 3.316 51.002 53.078 45.642 90.703c-6.692 46.976 45.08 44.456 59.164-2.53c18.33-61.148-34.38-139.084-91.037-140.032zm-33.093 65.316l-15.857 42.883l-31-5.303l22.71 27.352l-21.933 26.414l29.07-4.97l17.01 46.005l17.008-45.992l29.375 5.023l-21.988-26.48l22.765-27.418l-31.306 5.353l-15.853-42.866zm-297.633 67.56c-1.02.027-2.096.09-3.23.206h-.002v.002a53.428 53.428 0 0 0-3.193.437v19.075c1.79-.417 3.474-.755 5.108-.923c1.993-.206 4.99.048 8.97.048c48.645 0 88.188 39.026 88.188 87.602S82.11 388.936 33.47 388.936c-4.908 0-9.516-.402-14.08-1.172v18.896c4.576.628 9.247.965 14.08.965c58.69 0 106.874-47.533 106.874-106.293c0-58.76-48.184-106.29-106.875-106.29c-1.366 0-2.954-.105-4.767-.15a54.258 54.258 0 0 0-2.89-.007zM49.8 238.282c-3.21-.066-6.43.286-9.618 1.11c-18.975 4.897-24.602 31.424-2.22 32.938v-.004c17.73 1.2 23.966 21.076 22.374 41.6c-1.972 25.428 34.927 23.09 41.713-2.442c8.68-32.663-21.24-72.554-52.25-73.2zm146.815 115.413c-37.322 0-67.78 30.457-67.78 67.78s30.458 67.78 67.78 67.78s67.78-30.457 67.78-67.78s-30.458-67.78-67.78-67.78m0 18.69a48.95 48.95 0 0 1 49.09 49.09a48.95 48.95 0 0 1-49.09 49.09a48.95 48.95 0 0 1-49.09-49.09a48.949 48.949 0 0 1 49.09-49.09m3.627 17.55c-1.13 0-2.265.104-3.402.323c-10.146 1.957-13.307 13.24-2.44 17.844c6.05 2.562 13.452 9.213 10.127 23.478c-3.156 13.546 17.432 13.867 21.98.225c6.02-18.053-9.33-41.855-26.265-41.87"/></svg>
              `,
              methods: {
                click() {
                  const offset = +this.offset;
                  let {hue} = this;
                  hue = hue + offset;
                  this.hue = hue < 0
                    ? ((hue % 360) + 360) % 360
                    : (hue >= 360 + offset)
                      ? 0
                      : hue;
                }
              }
            },
          }
        }).mount(document.querySelector('#vueApp'));
      });
    </script>
  </head>
  <body>
    <div id="vueApp">
      <h1 style="text-align: center; font-family: Tahoma;">
        <dragon-balls style="transform: scaleX(-1);" :offset="offset"></dragon-balls>
        Clickable Dragon Balls
        <dragon-balls :offset="offset"></dragon-balls>
      </h1>
      <div style="text-align: center;">
        Hue Offset
        <input type="number" v-model="offset" min="1" max="360" />
      </div>
    </div>
  </body>
</html>
	<!DOCTYPE html>
	<html lang="en-US">
	<head>
	<meta charset='UTF-8'>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>Clickable Dragon Balls</title>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/3.2.37/vue.global.prod.min.js"></script>
	<script>
	addEventListener('DOMContentLoaded', () => {
	Vue.createApp({
	data() {
	return {
	offset: 60
	};
	},
	components: {
	'dragon-balls': {
	props: {
	offset: {
	type: Number,
	default: 60
	}
	},
	data() {
	return {hue: 0};
	},
	computed: {
	cssStyle() {
	return {
	height: '1em',
	width: '1em',
	color: this.hue ? `hsl(${this.hue}deg, 100%, 50%)` : 'black',
	filter: 'drop-shadow(0 0 1px #FFF) drop-shadow(0 0 1px #FFF) drop-shadow(0 0 1px #000)',
	userSelect: 'none',
	cursor: 'pointer'
	}
	}
	},
	template: `
	<svg xmlns="http://www.w3.org/2000/svg" @click="click" :style="cssStyle" viewBox="0 0 512 512"><path fill="currentColor" d="M324.582 17.393c-93.624 0-169.723 76.094-169.723 169.72c0 93.627 76.098 169.725 169.722 169.725c93.624 0 169.725-76.098 169.725-169.725c0-93.624-76.1-169.72-169.725-169.72zm0 18.69c83.523 0 151.033 67.507 151.033 151.03c0 83.525-67.51 151.033-151.033 151.033c-83.523 0-151.03-67.508-151.03-151.033c0-83.525 67.507-151.03 151.03-151.03M356.54 62.01c-4.802-.08-9.63.392-14.448 1.474c-34.385 7.73-39.338 45.97.678 50.385c30.042 3.316 51.002 53.078 45.642 90.703c-6.692 46.976 45.08 44.456 59.164-2.53c18.33-61.148-34.38-139.084-91.037-140.032zm-33.093 65.316l-15.857 42.883l-31-5.303l22.71 27.352l-21.933 26.414l29.07-4.97l17.01 46.005l17.008-45.992l29.375 5.023l-21.988-26.48l22.765-27.418l-31.306 5.353l-15.853-42.866zm-297.633 67.56c-1.02.027-2.096.09-3.23.206h-.002v.002a53.428 53.428 0 0 0-3.193.437v19.075c1.79-.417 3.474-.755 5.108-.923c1.993-.206 4.99.048 8.97.048c48.645 0 88.188 39.026 88.188 87.602S82.11 388.936 33.47 388.936c-4.908 0-9.516-.402-14.08-1.172v18.896c4.576.628 9.247.965 14.08.965c58.69 0 106.874-47.533 106.874-106.293c0-58.76-48.184-106.29-106.875-106.29c-1.366 0-2.954-.105-4.767-.15a54.258 54.258 0 0 0-2.89-.007zM49.8 238.282c-3.21-.066-6.43.286-9.618 1.11c-18.975 4.897-24.602 31.424-2.22 32.938v-.004c17.73 1.2 23.966 21.076 22.374 41.6c-1.972 25.428 34.927 23.09 41.713-2.442c8.68-32.663-21.24-72.554-52.25-73.2zm146.815 115.413c-37.322 0-67.78 30.457-67.78 67.78s30.458 67.78 67.78 67.78s67.78-30.457 67.78-67.78s-30.458-67.78-67.78-67.78m0 18.69a48.95 48.95 0 0 1 49.09 49.09a48.95 48.95 0 0 1-49.09 49.09a48.95 48.95 0 0 1-49.09-49.09a48.949 48.949 0 0 1 49.09-49.09m3.627 17.55c-1.13 0-2.265.104-3.402.323c-10.146 1.957-13.307 13.24-2.44 17.844c6.05 2.562 13.452 9.213 10.127 23.478c-3.156 13.546 17.432 13.867 21.98.225c6.02-18.053-9.33-41.855-26.265-41.87"/></svg>
	`,
	methods: {
	click() {
	const offset = +this.offset;
	let {hue} = this;
	hue = hue + offset;
	this.hue = hue < 0
	? ((hue % 360) + 360) % 360
	: (hue >= 360 + offset)
	? 0
	: hue;
	}
	}
	},
	}
	}).mount(document.querySelector('#vueApp'));
	});
	</script>
	</head>
	<body>
	<div id="vueApp">
	<h1 style="text-align: center; font-family: Tahoma;">
	<dragon-balls style="transform: scaleX(-1);" :offset="offset"></dragon-balls>
	Clickable Dragon Balls
	<dragon-balls :offset="offset"></dragon-balls>
	</h1>
	<div style="text-align: center;">
	Hue Offset
	<input type="number" v-model="offset" min="1" max="360" />
	</div>
	</div>
	</body>
	</html>