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;
}
drawRandom() {
random() {
const size = this.cards.size
if (size === 0) {
return null;

View File

@ -15,42 +15,32 @@ class Tarot {
const infoElem = document.querySelector("#info");
const resetElem = document.querySelector("#reset");
// TODO bring those top level functions in as methods
this.renderers = [
new Renderer(
deckElem,
deckRender(this.deck)),
new Renderer(
tableElem,
tableRender(this, this.table)),
new Renderer(
infoElem,
infoRender(tableElem, deckElem))
this.deckRender(deckElem, this.deck),
this.tableRender(tableElem, this.table),
this.infoRender(infoElem, tableElem)
];
// 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("mouseleave", this.render.bind(this));
deckElem.addEventListener("click", this.drawCard.bind(this));
resetElem.addEventListener("click", this.reset.bind(this));
this.render();
}
reset() {
let card = this.table.drawRandom();
let card = this.table.random();
while (card != null) {
this.deck.add(card);
card = this.table.drawRandom();
card = this.table.random();
}
this.render();
}
drawCard() {
let cardName = this.deck.drawRandom();
let cardName = this.deck.random();
if (cardName === null) {
this.render();
return;
@ -61,14 +51,20 @@ class Tarot {
}
render() {
for (const renderer of this.renderers) {
renderer.render();
}
for (const r of this.renderers) {
r();
}
}
function infoRender(tableElem) {
return function(elem) {
deckRender(elem, deck) {
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");
if (cardElem == null) {
elem.innerHTML = "";
@ -78,8 +74,8 @@ function infoRender(tableElem) {
}
}
function tableRender(tarot, table) {
return function(elem) {
tableRender(elem, table) {
return () => {
const cardsOut = elem.querySelectorAll('.card');
for (let cardElem of cardsOut) {
if (!table.has(cardElem.getAttribute('data-cardName'))) {
@ -99,35 +95,11 @@ function tableRender(tarot, table) {
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", tarot.render.bind(tarot));
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;