2025-06-30 16:01:25 -06:00
|
|
|
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");
|
2025-08-12 16:10:23 -06:00
|
|
|
root.draggable = true;
|
2025-06-30 16:01:25 -06:00
|
|
|
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");
|
2025-08-12 16:10:23 -06:00
|
|
|
name.innerText = word;
|
2025-06-30 16:01:25 -06:00
|
|
|
name.classList.add("pecNane");
|
|
|
|
|
root.appendChild(name);
|
2025-08-12 16:10:23 -06:00
|
|
|
root.mom = this;
|
|
|
|
|
root.addEventListener("click",(e)=>{
|
|
|
|
|
var targ = e.currentTarget.mom;
|
|
|
|
|
window.speechSynthesis.speak(targ.utterance);
|
|
|
|
|
});
|
2025-07-07 16:08:23 -06:00
|
|
|
this.DOM = root;
|
2025-06-30 16:01:25 -06:00
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
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.
|
|
|
|
|
}
|