trunk
vilmibm 2020-11-24 22:50:24 -08:00
parent 8589aae749
commit fd76c5ebe4
2 changed files with 45 additions and 73 deletions

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;

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,14 +51,20 @@ 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 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`);
}
}
infoRender(elem, tableElem) {
return () => {
const cardElem = tableElem.querySelector(".card:hover"); const cardElem = tableElem.querySelector(".card:hover");
if (cardElem == null) { if (cardElem == null) {
elem.innerHTML = ""; elem.innerHTML = "";
@ -76,10 +72,10 @@ function infoRender(tableElem) {
} }
elem.innerHTML = cardElem.querySelector("span").innerHTML; elem.innerHTML = cardElem.querySelector("span").innerHTML;
} }
} }
function tableRender(tarot, table) { tableRender(elem, table) {
return function(elem) { return () => {
const cardsOut = elem.querySelectorAll('.card'); const cardsOut = elem.querySelectorAll('.card');
for (let cardElem of cardsOut) { for (let cardElem of cardsOut) {
if (!table.has(cardElem.getAttribute('data-cardName'))) { if (!table.has(cardElem.getAttribute('data-cardName'))) {
@ -99,35 +95,11 @@ function tableRender(tarot, table) {
cardElem.setAttribute("data-cardName", cardName) cardElem.setAttribute("data-cardName", cardName)
cardElem.setAttribute("style", "float:left; width: 150px; height: 250px; border: 1px solid pink;"); cardElem.setAttribute("style", "float:left; width: 150px; height: 250px; border: 1px solid pink;");
cardElem.querySelector("span").innerHTML = cardName; cardElem.querySelector("span").innerHTML = cardName;
cardElem.addEventListener("mouseenter", tarot.render.bind(tarot)); cardElem.addEventListener("mouseenter", this.render.bind(this));
elem.append(cardElem); 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;