export class pec {
	// this is the object for the pecs themselves, this will be used both
	// to populate the library, and to occupy pecSlot objects
	constructor (word,image) {
		var me = this;
		this.word = "string" == typeof word ? word : "Empty";
		this.image = image; // Add image processing here
		var root = document.createElement("div");
		root.draggable = true;
		root.classList.add("pec");
		var img = document.createElement("img");
		img.src = me.image;
		img.classList.add("pecImage");
		root.appendChild(img);
		var name = document.createElement("span");
		name.innerText = word;
		name.classList.add("pecName");
		root.appendChild(name);
		root.mom = this;
		root.addEventListener("click",(e)=>{
			// tts synth api is inconsistant at best,
			// need to find a more reliable solution.
			var targ = e.currentTarget.mom;
			var utter = new SpeechSynthesisUtterance(targ.word);
			console.log(targ.word);
			utter.lang = utter.voice.lang
			utter.onend = () => { console.log("Talked?"); };
			window.speechSynthesis.speak(utter);
		});
		this.DOM = root;
	}
}

class pecSlot {
	// Do I actually need this?
}

export class pecBoard {
	constructor (pecs=[]) {
		var initPecs = [
			null,null,null,null,
			null,null,null,null,
			null,null,null,null,
			null,null,null,null];
		pecs.map((p,i)=>{ if (p instanceof pec) { initPecs[i] = p; } });
		this.pecs = initPecs;
	}
}

class pecBook {
	// I don't know if I need this one ether.
}