add large card css style

assets/css/card/root.css

@@ -29,20 +29,69 @@
     color: var(--card-suit-spade);
   }
 
+  @media (min-height: 600px) {
+    min-height: 73px;
+
+    &.large {
+      min-height: 68px;
+    }
+  }
+  @media (min-width: 376px) {
+    height: 68px;
+    width: 50px;
+
+    &.large {
+      height: 65px;
+    }
+
+    @media (min-height: 600px) {
+      font-size: 1.2rem;
+      height: 73px;
+      margin-top: 5px;
+
+      &.large {
+        height: 70px;
+      }
+    }
+  }
+  @media (min-width: 768px) {
+    @media (min-height: 600px) {
+      height: 75px;
+      width: 60px;
+
+      &.large {
+        height: 70px;
+      }
+    }
+  }
+  @media (min-width: 992px) {
+    @media (min-height: 600px) {
+      font-size: 1.3rem;
+      height: 88px;
+      width: 73px;
+
+      &.large {
+        height: 88px;
+      }
+    }
+  }
+
   .rank {
     display: flex;
     justify-content: center;
   }
+
   .rank-bot,
   .rank-top {
     display: flex;
     justify-content: space-around;
-  }
-  @media (min-width: 992px) {
-    @media (min-height: 600px) {
-      .rank-bot,
-      .rank-top {
-        padding-top: 2px;
+
+    @media (min-width: 992px) {
+      @media (min-height: 600px) {
+        .rank-bot,
+        .rank-top {
+          padding-top: 2px;
+        }
       }
     }
   }
@@ -72,40 +121,29 @@
     background-color: var(--disabled);
     opacity: 0.3;
   }
-}
-@media (min-height: 600px) {
-  .card {
-    min-height: 73px;
-  }
-}
-@media (min-width: 376px) {
-  .card {
-    height: 68px;
-    width: 50px;
-  }
 
-  @media (min-height: 600px) {
-    .card {
-      font-size: 1.2rem;
-      height: 73px;
-      margin-top: 5px;
+  &.large {
+    .rank-top {
+      height: 30px;
+      margin: -2px;
+
+      .rank-top-left {
+        font-size: 1.5em;
+      }
+
+      .rank-top-right {
+        display: none;
+      }
     }
-  }
-}
-@media (min-width: 768px) {
-  @media (min-height: 600px) {
-    .card {
-      height: 75px;
-      width: 60px;
+
+    .suit {
+      font-size: 1.8em;
+      height: auto;
+      padding-top: 3px;
     }
-  }
-}
-@media (min-width: 992px) {
-  @media (min-height: 600px) {
-    .card {
-      font-size: 1.3rem;
-      height: 88px;
-      width: 73px;
+
+    .rank-bot {
+      display: none;
     }
   }
 }
@@ -115,22 +153,16 @@
   font-size: 0.65rem;
   margin: 5px 0 0;
   text-transform: uppercase;
-}
-@media (min-width: 376px) {
-  .card-label {
+
+  @media (min-width: 376px) {
     font-size: 0.75rem;
   }
-}
-@media (min-width: 768px) {
+
   @media (min-height: 600px) {
-    .card-label {
+    @media (min-width: 768px) {
       font-size: 1rem;
     }
-  }
-}
-@media (min-width: 992px) {
-  @media (min-height: 600px) {
-    .card-label {
+    @media (min-width: 992px) {
       font-size: 1.1rem;
     }
   }

assets/css/modal/settings.css

@@ -56,6 +56,17 @@
         width: 36px;
       }
 
+      #button-setting-card-style {
+        align-items: center;
+        display: flex;
+        gap: 5px;
+
+        img {
+          height: 46px;
+          width: 39px;
+        }
+      }
+
       @media (hover: hover) {
         button:hover:not(.disabled),
         button:hover:not([disabled]) {

assets/js/app/constants.js

@@ -42,6 +42,7 @@ const DECKDLE_DEFAULT_STATE = {
 }
 const DECKDLE_DEFAULT_SETTINGS = {
   animationDisplay: true,
+  cardStyle: 'default',
   comboCounter: true,
   darkMode: false,
   firstTime: true,

assets/js/app/lib/local_storage.js

@@ -336,6 +336,25 @@ Deckdle._loadSettings = () => {
       }
     }
 
+    if (lsSettings.cardStyle !== undefined) {
+      Deckdle._saveSetting('cardStyle', lsSettings.cardStyle)
+
+      if (Deckdle.settings.cardStyle) {
+        Array.from(Deckdle.dom.interactive.cards).forEach((card) => {
+          card.classList.remove('default', 'large')
+          card.classList.add('card', Deckdle.settings.cardStyle)
+        })
+
+        setting = document.getElementById('button-setting-card-style')
+
+        if (setting) {
+          setting.dataset.status = Deckdle.settings.cardStyle
+        }
+
+        Deckdle.__setState('cardStyle', Deckdle.settings.cardStyle)
+      }
+    }
+
     if (lsSettings.comboCounter !== undefined) {
       Deckdle.settings.comboCounter = lsSettings.comboCounter
 
@@ -505,6 +524,24 @@ Deckdle._changeSetting = async (setting, value) => {
 
       break
 
+    case 'cardStyle':
+      document.getElementById('button-setting-card-style').dataset.status = value
+      // iterate over all cards and add new cardType
+      Array.from(Deckdle.dom.interactive.cards).forEach((card) => {
+        card.classList.remove('default', 'large')
+        card.classList.add('card', value)
+      })
+
+      Deckdle._saveSetting('cardStyle', value)
+
+      st = document.querySelector('#button-setting-card-style img')
+
+      if (st) {
+        st.src = `/assets/images/card-${Deckdle.settings.cardStyle}.png`
+      }
+
+      break
+
     case 'comboCounter':
       st = document.getElementById('button-setting-combo-counter').dataset.status
 
@@ -673,7 +710,7 @@ Deckdle._changeSetting = async (setting, value) => {
 
   Deckdle._saveGame('_changeSetting')
 
-  // Deckdle._logStatus(`[CHANGED] setting(${setting}, ${value})`)
+  Deckdle._logStatus(`[CHANGED] setting(${setting}, ${value})`)
 }
 // save a setting (gear icon) to localStorage
 Deckdle._saveSetting = (setting, value) => {
@@ -689,7 +726,7 @@ Deckdle._saveSetting = (setting, value) => {
     // save all settings to LS
     localStorage.setItem(DECKDLE_SETTINGS_LS_KEY, JSON.stringify(settings))
 
-    // Deckdle._logStatus(`[SAVED] setting(${setting}, ${value})`)
+    Deckdle._logStatus(`[SAVED] setting(${setting}, ${value})`)
   } else {
     console.error('could not parse local storage key', DECKDLE_SETTINGS_LS_KEY)
   }

assets/js/app/modals.js

@@ -185,6 +185,29 @@ Deckdle.modalOpen = async (type) => {
             </div>
           </div>
 
+          <!-- card style -->
+          <div class="setting-row">
+            <div class="text">
+              <div class="title">Card Style</div>
+              <div class="description">How to display cards</div>
+            </div>
+            <div class="control">
+              <div class="container">
+                <div id="button-setting-card-style"
+                  data-status=""
+                  class="select"
+                  onclick="Deckdle._changeSetting('cardStyle', event.target.value)"
+                >
+                  <img src="/assets/images/card-${Deckdle.settings.cardStyle}.png" />
+                  <select>
+                    <option value="default"${Deckdle.settings.cardStyle == 'default' ? ' selected' : ''}>Default</option>
+                    <option value="large"${Deckdle.settings.cardStyle == 'large' ? ' selected' : ''}>Large</option>
+                  </select>
+                </div>
+              </div>
+            </div>
+          </div>
+
           <!-- combo counter -->
           <div class="setting-row">
             <div class="text">

assets/js/app/ui.js

@@ -23,6 +23,8 @@ Deckdle.ui._createCard = (
     cardDiv.classList.add('card')
   }
 
+  cardDiv.classList.add(Deckdle.settings.cardStyle)
+
   cardDiv.draggable = draggable
   cardDiv.dataset.rank = card.rank
   cardDiv.dataset.suit = card.suit

cypress/integration/00-basic/02-settings.cy.js

@@ -21,7 +21,7 @@ context('00-basic', () => {
         cy.get('@window').should('exist')
         cy.get('@title').should('contain.text', 'Settings')
 
-        cy.get('@text').find('.setting-row').should('have.length', 7)
+        cy.get('@text').find('.setting-row').should('have.length', 8)
         cy.get('@switches').should('have.length', 5)
       })