From 74b20280e2ef67d896d64a0f88478523c700be20 Mon Sep 17 00:00:00 2001
From: Michael Chadwick <michael.chadwick@gmail.com>
Date: Tue, 4 Aug 2026 17:24:20 -0700
Subject: [PATCH 1/3] added large card css style

---
 assets/css/card/root.css | 130 ++++++++++++++++++++++++---------------
 1 file changed, 82 insertions(+), 48 deletions(-)

diff --git a/assets/css/card/root.css b/assets/css/card/root.css
index 1541524..644ac09 100644
--- a/assets/css/card/root.css
+++ b/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: 85px;
+      }
+    }
+  }
+
   .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,31 @@
     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 {
+    height: 17vw;
+
+    .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 +155,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;
     }
   }

From 3bd040bfdb0d93a2f8126ce2f7a041870befdb66 Mon Sep 17 00:00:00 2001
From: Michael Chadwick <michael.chadwick@gmail.com>
Date: Fri, 7 Aug 2026 15:34:46 -0700
Subject: [PATCH 2/3] can now change cardStyle in settings

---
 assets/css/card/root.css           |   4 +--
 assets/css/modal/settings.css      |  11 ++++++++
 assets/images/card-default.png     | Bin 0 -> 3130 bytes
 assets/images/card-large.png       | Bin 0 -> 3187 bytes
 assets/js/app/constants.js         |   1 +
 assets/js/app/lib/local_storage.js |  41 +++++++++++++++++++++++++++--
 assets/js/app/modals.js            |  23 ++++++++++++++++
 assets/js/app/ui.js                |   2 ++
 8 files changed, 77 insertions(+), 5 deletions(-)
 create mode 100644 assets/images/card-default.png
 create mode 100644 assets/images/card-large.png

diff --git a/assets/css/card/root.css b/assets/css/card/root.css
index 644ac09..b72e88f 100644
--- a/assets/css/card/root.css
+++ b/assets/css/card/root.css
@@ -71,7 +71,7 @@
       width: 73px;
 
       &.large {
-        height: 85px;
+        height: 88px;
       }
     }
   }
@@ -123,8 +123,6 @@
   }
 
   &.large {
-    height: 17vw;
-
     .rank-top {
       height: 30px;
       margin: -2px;
diff --git a/assets/css/modal/settings.css b/assets/css/modal/settings.css
index 105b412..7a7eafe 100644
--- a/assets/css/modal/settings.css
+++ b/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]) {
diff --git a/assets/images/card-default.png b/assets/images/card-default.png
new file mode 100644
index 0000000000000000000000000000000000000000..99dea92d049371bd07f8223b4fa714ff86ff905d
GIT binary patch
literal 3130
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
Vjvoky8PtvcMa+I@bPdWo?%%K%Oh*6!

literal 0
HcmV?d00001

diff --git a/assets/images/card-large.png b/assets/images/card-large.png
new file mode 100644
index 0000000000000000000000000000000000000000..00ae2e3ef9e6a9e9730f7082c8f8f7c4ecf373c8
GIT binary patch
literal 3187
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

literal 0
HcmV?d00001

diff --git a/assets/js/app/constants.js b/assets/js/app/constants.js
index aa276d3..159d319 100644
--- a/assets/js/app/constants.js
+++ b/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,
diff --git a/assets/js/app/lib/local_storage.js b/assets/js/app/lib/local_storage.js
index 4db492a..ae6fe8d 100644
--- a/assets/js/app/lib/local_storage.js
+++ b/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)
   }
diff --git a/assets/js/app/modals.js b/assets/js/app/modals.js
index cf4432b..b7f527a 100644
--- a/assets/js/app/modals.js
+++ b/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">
diff --git a/assets/js/app/ui.js b/assets/js/app/ui.js
index 1b0285e..8ab6a00 100644
--- a/assets/js/app/ui.js
+++ b/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

From b8b0be737f6de3b67475b66b5800c322c5b44834 Mon Sep 17 00:00:00 2001
From: Michael Chadwick <michael.chadwick@gmail.com>
Date: Fri, 7 Aug 2026 15:37:51 -0700
Subject: [PATCH 3/3] fix settings test

---
 cypress/integration/00-basic/02-settings.cy.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/cypress/integration/00-basic/02-settings.cy.js b/cypress/integration/00-basic/02-settings.cy.js
index 4101162..e00ff72 100644
--- a/cypress/integration/00-basic/02-settings.cy.js
+++ b/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)
       })