vilmibm
/
tarot
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

cleanup

trunk
vilmibm 2020-11-24 22:50:24 -08:00
parent 8589aae749
commit fd76c5ebe4
2 changed files with 45 additions and 73 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
cardpile.js
View File

@ -15,7 +15,7 @@ class CardPile {
return this.cards.size; return this.cards.size;
} }
drawRandom() { random() {
const size = this.cards.size const size = this.cards.size
if (size === 0) { if (size === 0) {
return null; return null;

116
tarot.js
View File

@ -15,42 +15,32 @@ class Tarot {
const infoElem = document.querySelector("#info"); const infoElem = document.querySelector("#info");
const resetElem = document.querySelector("#reset"); const resetElem = document.querySelector("#reset");
// TODO bring those top level functions in as methods
this.renderers = [ this.renderers = [
new Renderer( this.deckRender(deckElem, this.deck),
deckElem, this.tableRender(tableElem, this.table),
deckRender(this.deck)), this.infoRender(infoElem, tableElem)
new Renderer(
tableElem,
tableRender(this, this.table)),
new Renderer(
infoElem,
infoRender(tableElem, deckElem))
]; ];
// handlers
// TODO make it feel similar to the renderers? or just have a general way to list out events
// that should trigger a render
tableElem.addEventListener("mouseenter", this.render.bind(this)); tableElem.addEventListener("mouseenter", this.render.bind(this));
tableElem.addEventListener("mouseleave", this.render.bind(this)); tableElem.addEventListener("mouseleave", this.render.bind(this));
deckElem.addEventListener("click", this.drawCard.bind(this)); deckElem.addEventListener("click", this.drawCard.bind(this));
resetElem.addEventListener("click", this.reset.bind(this)); resetElem.addEventListener("click", this.reset.bind(this));
this.render();
} }
reset() { reset() {
let card = this.table.drawRandom(); let card = this.table.random();
while (card != null) { while (card != null) {
this.deck.add(card); this.deck.add(card);
card = this.table.drawRandom(); card = this.table.random();
} }
this.render(); this.render();
} }
drawCard() { drawCard() {
let cardName = this.deck.drawRandom(); let cardName = this.deck.random();
if (cardName === null) { if (cardName === null) {
this.render(); this.render();
return; return;
@ -61,73 +51,55 @@ class Tarot {
} }
render() { render() {
for (const renderer of this.renderers) { for (const r of this.renderers) {
renderer.render(); r();
} }
} }
}
function infoRender(tableElem) { deckRender(elem, deck) {
return function(elem) { return () => {
const cardElem = tableElem.querySelector(".card:hover"); const width = deck.size / 5;
if (cardElem == null) { elem.setAttribute("style", `float:left; height: 250px; width: 150px; border-left: 1px solid white; border-top: 1px solid white; border-bottom: ${width}px solid white; border-right: ${width}px solid white`);
elem.innerHTML = "";
return
} }
elem.innerHTML = cardElem.querySelector("span").innerHTML;
} }
}
function tableRender(tarot, table) { infoRender(elem, tableElem) {
return function(elem) { return () => {
const cardsOut = elem.querySelectorAll('.card'); const cardElem = tableElem.querySelector(".card:hover");
for (let cardElem of cardsOut) { if (cardElem == null) {
if (!table.has(cardElem.getAttribute('data-cardName'))) { elem.innerHTML = "";
cardElem.remove(); return
} }
elem.innerHTML = cardElem.querySelector("span").innerHTML;
} }
}
for (let cardName of table.cards) { tableRender(elem, table) {
const found = elem.querySelector(`[data-cardName="${cardName}"]`); return () => {
if (found != null) { const cardsOut = elem.querySelectorAll('.card');
continue; for (let cardElem of cardsOut) {
if (!table.has(cardElem.getAttribute('data-cardName'))) {
cardElem.remove();
}
} }
let bp = document.querySelector(".card.blueprint"); for (let cardName of table.cards) {
let cardElem = bp.cloneNode(true); const found = elem.querySelector(`[data-cardName="${cardName}"]`);
cardElem.classList.remove("blueprint"); if (found != null) {
cardElem.setAttribute("data-cardName", cardName) continue;
cardElem.setAttribute("style", "float:left; width: 150px; height: 250px; border: 1px solid pink;"); }
cardElem.querySelector("span").innerHTML = cardName;
cardElem.addEventListener("mouseenter", tarot.render.bind(tarot)); let bp = document.querySelector(".card.blueprint");
elem.append(cardElem); let cardElem = bp.cloneNode(true);
cardElem.classList.remove("blueprint");
cardElem.setAttribute("data-cardName", cardName)
cardElem.setAttribute("style", "float:left; width: 150px; height: 250px; border: 1px solid pink;");
cardElem.querySelector("span").innerHTML = cardName;
cardElem.addEventListener("mouseenter", this.render.bind(this));
elem.append(cardElem);
}
} }
} }
} }
function deckRender(deck) {
return function(elem) {
const width = deck.size / 5;
elem.setAttribute("style", `float:left; height: 250px; width: 150px; border-left: 1px solid white; border-top: 1px solid white; border-bottom: ${width}px solid white; border-right: ${width}px solid white`);
}
}
function deckClick(deckElem, deck) {
return function() {
console.log(deckElem, deck);
}
}
class Renderer {
constructor(element, renderFn) {
this.element = element;
this.renderFn = renderFn;
}
render() {
this.renderFn(this.element);
}
}
export default Tarot; export default Tarot;