// 指定範囲のランダム整数を取得する
const getRandomRange = (min, max) => Math.floor(Math.random() * (max - min + 1) + min);

// 名前用の配列
const NAMES = ['Kyoshuke', 'Tomoyasu', 'Tsunematu', 'Makoto'];
const FASHION_NUM = 5;
const POSE_NUM = 4;

// Classの定義
class Person {
	constructor(x=0, y=0) {
		this.locate = [x, y];
		this.name = NAMES[getRandomRange(0, NAMES.length - 1)];
		this.fashion = getRandomRange(0, FASHION_NUM - 1);
		this.pose = getRandomRange(0, POSE_NUM - 1);
	}
	set locate(point) {
		this._locate = point;
	}
	set name(name) {
		this._name = name;
	}
	set fashion(index) {
		this._fashion = index;
	}
	set pose(index) {
		this._pose = index;
	}
	get locate() {
		return this._locate;
	}
	get name() {
		return this._name;
	}
	get fashion() {
		return this._fashion;
	}
	get pose() {
		return this._pose;
	}
	changePose() {
		let newIndex = getRandomRange(0, POSE_NUM - 1);
		while (newIndex === this._pose) {
			newIndex = getRandomRange(0, POSE_NUM - 1);
		}
		this._pose = newIndex;
	}
}

// Vueインスタンスを作成
let v_person = new Vue({
	el: '#canvas',
	data: {
		persons: []
	},
	components: {
		'person-component': {
			template: `
				<div class="person" @click="onclick" :style="vc_pos_style">
					<div class="person__body" :class="vc_class" :style="vc_bg_style"></div>
					<p class="person__name">{{ person.name }}</p>
				</div>
			`,
			props: ['person'],
			methods: {
				onclick: function (event) {
					event.stopPropagation();
					this.person.changePose(getRandomRange(0, POSE_NUM - 1));
				}
			},
			computed: {
				// 座標算出
				vc_pos_style: function () {
					return {
						left: this.person.locate[0] + 'px',
						top: this.person.locate[1] + 'px'
					};
				},
				// 背景画像位置算出
				vc_bg_style: function () {
					return {
						backgroundPositionY: (this.person.fashion * -80) + 'px',
						backgroundPositionX: (this.person.pose * -50) + 'px'
					};
				},
				// ファッションとポーズclass算出
				vc_class: function () {
					return 'person--fashion-' + this.person.fashion + ' person--pose-' + this.person.pose;
				}
			}
		}
	}
});

window.addEventListener('load', () => {

	// クリックで人を追加
	let canvas = document.querySelector('#canvas');
	canvas.addEventListener('click', event => {
		event.stopPropagation();
		v_person.persons.push(new Person(event.offsetX, event.offsetY));
	});

	// タイマーで生成する場合
	// let size = [canvas.clientWidth, canvas.clientHeight];
	// window.addEventListener('resize', event => {
	// 	size = [canvas.clientWidth, canvas.clientHeight];
	// });
	// let timer = setInterval( () => {
	// 	v_person.persons.push(new Person(getRandomRange(0, size[0]), getRandomRange(0, size[1])));
	// }, 200);
	// canvas.addEventListener('click', (event) => {
	// 	clearInterval(timer);
	// });

});