Card game tweaks

remarcmij · remarcmij · commit 95bd3d0084b2 · 2018-10-27T20:48:50.000+02:00
diff --git a/src/week3/cards-web/Card.js b/src/week3/cards-web/Card.js
@@ -1,24 +1,24 @@
 'use strict';
 {
-  const CARD_TEMPLATE = `
+  const getCardHtml = (rank, symbol) => `
     <div class='card-row row-top'>
-      <div>
-        <div class="card-rank">__rank__</div>
-        <div class="card-symbol">__suit__</div>
+      <div class="card-text">
+        <div>${rank}</div>
+        <div class="card-symbol">${symbol}</div>
       </div>
-      <div>
-        <div class="card-rank">__rank__</div>
-        <div class="card-symbol">__suit__</div>
+      <div class="card-text">
+        <div>${rank}</div>
+        <div class="card-symbol">${symbol}</div>
       </div>
     </div>
     <div class='card-row row-bottom'>
-      <div>
-        <div class="card-rank">__rank__</div>
-        <div class="card-symbol">__suit__</div>
+      <div class="card-text">
+        <div>${rank}</div>
+        <div class="card-symbol">${symbol}</div>
       </div>
-      <div>
-        <div class="card-rank">__rank__</div>
-        <div class="card-symbol">__suit__</div>
+      <div class="card-text">
+        <div>${rank}</div>
+        <div class="card-symbol">${symbol}</div>
       </div>
     </div>`;
 
@@ -34,10 +34,7 @@
         class: 'card-container',
         style: `color: ${this.color}`
       });
-
-      cardContainer.innerHTML = CARD_TEMPLATE
-        .replace(/__rank__/g, this.rank)
-        .replace(/__suit__/g, this.symbol);
+      cardContainer.innerHTML = getCardHtml(this.rank, this.symbol);
     }
   }
 
diff --git a/src/week3/cards-web/CardDeck.js b/src/week3/cards-web/CardDeck.js
@@ -25,7 +25,9 @@
 
     deal(container, count) {
       if (this.canDeal(count)) {
-        const dealContainer = window.createAndAppend('div', container, { class: 'deal-container' });
+        const dealContainer = window.createAndAppend('div', container, {
+          class: 'deal-container'
+        });
         const cards = this.cards.splice(0, count);
         cards.forEach(card => card.render(dealContainer));
       }
diff --git a/src/week3/cards-web/CardGame.js b/src/week3/cards-web/CardGame.js
@@ -32,11 +32,11 @@
       this.dealButton.addEventListener('click', () => this.deal(DEAL_COUNT));
       this.updateDealLabel();
 
-      const shuffleButton = window.createAndAppend('button', toolbar, {
+      const newGameButton = window.createAndAppend('button', toolbar, {
         class: 'button',
-        text: 'SHUFFLE'
+        text: 'NEW GAME'
       });
-      shuffleButton.addEventListener('click', () => this.shuffle());
+      newGameButton.addEventListener('click', () => this.newGame());
     }
 
     deal(count) {
@@ -53,7 +53,7 @@
       this.dealCount += 1;
     }
 
-    shuffle() {
+    newGame() {
       while (this.gameContainer.firstChild) {
         this.gameContainer.removeChild(this.gameContainer.firstChild);
       }
diff --git a/src/week3/cards-web/style.css b/src/week3/cards-web/style.css
@@ -1,6 +1,7 @@
 body {
   background-color: #068649;
   font-family: 'Roboto', sans-serif;
+  overflow-y: scroll;
 }
 
 #root {
@@ -27,6 +28,7 @@ button {
   margin: 8px;
   padding: 8px 16px;
   border-radius: 4px;
+  width: 120px;
 }
 
 button:disabled {
@@ -55,7 +57,7 @@ button:disabled {
   border: none;
   border-radius: 8px;
   background-color: #fff;
-  box-shadow: 0 1px 8px 0 rgba(0, 0, 0, 0.2), 0 3px 4px 0 rgba(0, 0, 0, 0.14), 0 3px 3px -2px rgba(0, 0, 0, 0.12);
+  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
 }
 
 .card-row {
@@ -65,6 +67,16 @@ button:disabled {
   text-align: center;
 }
 
+.card-text {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.card-symbol {
+  width: 80%;
+}
+
 .row-bottom {
   transform: rotate(180deg);
 }
