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,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 = "";
@@ -76,10 +72,10 @@ function infoRender(tableElem) {
       }
       elem.innerHTML = cardElem.querySelector("span").innerHTML;
     }
-}
+  }
 
-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;