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
		this.utterance = new SpeechSynthesisUtterance(this.word);
		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("pecNane");
		root.appendChild(name);
		root.mom = this;
		root.addEventListener("click",(e)=>{
			var targ = e.currentTarget.mom;
			window.speechSynthesis.speak(targ.utterance);
		});
		this.DOM = root;
	}
}

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

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.
}