cleanup

cardpile.js

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

tarot.js

@@ -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,73 +51,55 @@ class Tarot {
   }
 
   render() {
-    for (const renderer of this.renderers) {
-      renderer.render();
+    for (const r of this.renderers) {
+      r();
     }
   }
-}
 
-function infoRender(tableElem) {
-  return function(elem) {
-    const cardElem = tableElem.querySelector(".card:hover");
-    if (cardElem == null) {
-      elem.innerHTML = "";
-      return
+  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`);
     }
-    elem.innerHTML = cardElem.querySelector("span").innerHTML;
   }
-}
 
-function tableRender(tarot, table) {
-  return function(elem) {
-    const cardsOut = elem.querySelectorAll('.card');
-    for (let cardElem of cardsOut) {
-      if (!table.has(cardElem.getAttribute('data-cardName'))) {
-        cardElem.remove();
+  infoRender(elem, tableElem) {
+    return () => {
+      const cardElem = tableElem.querySelector(".card:hover");
+      if (cardElem == null) {
+        elem.innerHTML = "";
+        return
       }
+      elem.innerHTML = cardElem.querySelector("span").innerHTML;
     }
+  }
 
-    for (let cardName of table.cards) {
-      const found = elem.querySelector(`[data-cardName="${cardName}"]`);
-      if (found != null) {
-        continue;
+  tableRender(elem, table) {
+    return () => {
+      const cardsOut = elem.querySelectorAll('.card');
+      for (let cardElem of cardsOut) {
+        if (!table.has(cardElem.getAttribute('data-cardName'))) {
+          cardElem.remove();
+        }
       }
 
-      let bp = document.querySelector(".card.blueprint");
-      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", tarot.render.bind(tarot));
-      elem.append(cardElem);
+      for (let cardName of table.cards) {
+        const found = elem.querySelector(`[data-cardName="${cardName}"]`);
+        if (found != null) {
+          continue;
+        }
+
+        let bp = document.querySelector(".card.blueprint");
+        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;