From 342cb39090ff0890daf1806592d85ad59a1016ec Mon Sep 17 00:00:00 2001
From: Gene Liverman <gene@technicalissues.us>
Date: Fri, 5 Jun 2026 14:42:37 -0400
Subject: [PATCH] ux: auto-size card, fix default font 404, add getGridOptions
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Default width changed from 500 to 0 (auto); when width is not set the
  card fills its column width as a square, so it works in any layout
  without requiring a pixel value in the config
- @font-face is now only injected when the user provides a fontface config
  value; the previous default loaded ITCBLKAD.TTF from /local/ which
  produces a 404 for anyone who hasn't placed that file manually
- Default font changed to "Palatino Linotype, Palatino, Book Antiqua,
  serif" — a widely available system serif with a classic feel that suits
  the wizard theme without requiring a custom font file
- Add getGridOptions() so the card behaves correctly in the HA sections
  (grid) layout, reserving the right number of rows for its square shape
- Update getCardSize() to handle the auto-size case (falls back to
  availableWidth when configuredWidth is 0)

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 wizard-clock-card.js | 40 +++++++++++++++++++++++++++-------------
 1 file changed, 27 insertions(+), 13 deletions(-)

diff --git a/wizard-clock-card.js b/wizard-clock-card.js
index 8b8d125..c014f31 100644
--- a/wizard-clock-card.js
+++ b/wizard-clock-card.js
@@ -18,13 +18,17 @@ class WizardClockCard extends HTMLElement {
       if (debugLogging) console.log(`${this.config.header ? "(" + this.config.header + ") " : ""}skipping update`);
       return;
     }
-    this.availableWidth = Math.round(Math.min(this.availableWidth, this.configuredWidth));
+    // If width is explicitly configured, cap to that size; otherwise fill the column.
+    if (this.configuredWidth > 0) {
+      this.availableWidth = Math.round(Math.min(this.availableWidth, this.configuredWidth));
+    }
+    const internalSize = this.configuredWidth > 0 ? this.configuredWidth : this.availableWidth;
 
-    this.canvas.width = this.configuredWidth;
-    this.canvas.height = this.configuredWidth;
+    this.canvas.width = internalSize;
+    this.canvas.height = internalSize;
     this.canvas.style.width = `${this.availableWidth}px`;
     this.canvas.style.height = `${this.availableWidth}px`;
-    this.scaleRatio = this.configuredWidth / this.availableWidth;
+    this.scaleRatio = internalSize / this.availableWidth;
 
     this.radius = this.canvas.height / 2;
     this.ctx.translate(this.radius, this.radius);
@@ -111,7 +115,7 @@ class WizardClockCard extends HTMLElement {
     if (this.config.fontName) {
       this.selectedFont = this.config.fontName;
     } else {
-      this.selectedFont = "itcblkad_font";
+      this.selectedFont = "Palatino Linotype, Palatino, Book Antiqua, serif";
     }
     this.fontScale = 1.1;
 
@@ -126,21 +130,18 @@ class WizardClockCard extends HTMLElement {
 
     // Set up document canvas.
 
-    this.configuredWidth = this.config.width ? this.config.width : "500";
+    this.configuredWidth = this.config.width ? this.config.width : 0;
 
     if (!this.canvas) {
       this.card = document.createElement('ha-card');
       if (this.config.header) {
         this.card.header = this.config.header;
       }
-      var fontstyle = document.createElement('style');
       if (this.config.fontface){
+        var fontstyle = document.createElement('style');
         fontstyle.innerText = "@font-face { " + this.config.fontface + " }  ";
-      } else {
-        // my default
-        fontstyle.innerText = "@font-face {    font-family: itcblkad_font;    src: local(itcblkad_font), url('/local/ITCBLKAD.TTF') format('opentype');}  ";
+        document.body.appendChild(fontstyle);
       }
-      document.body.appendChild(fontstyle);
 
       this.div = document.createElement('div');
       this.div.style.textAlign = 'center';
@@ -159,14 +160,27 @@ class WizardClockCard extends HTMLElement {
     if (debugLogging) console.log(`${this.config.header ? "(" + this.config.header + ") " : ""}getConfig end`);
   }
 
-  // getCardSize Indicates the height of the card in 50px units. 
+  // getCardSize Indicates the height of the card in 50px units.
   // Home Assistant uses this to automatically distribute all cards over the available columns.
   getCardSize() {
-    var cardSize = (this.configuredWidth / 50).toFixed(1);
+    var size = this.configuredWidth > 0 ? this.configuredWidth : (this.availableWidth || 500);
+    var cardSize = (size / 50).toFixed(1);
     if (debugLogging) console.log(`${this.config.header ? "(" + this.config.header + ") " : ""}getCardSize = ${cardSize}`);
     return cardSize;
   }
 
+  // getGridOptions is called by the HA sections layout to size the card.
+  getGridOptions() {
+    const size = this.configuredWidth > 0 ? this.configuredWidth : (this.availableWidth || 500);
+    const rows = Math.ceil(size / 56);
+    return {
+      columns: 12,
+      rows: rows,
+      min_columns: 2,
+      min_rows: rows,
+    };
+  }
+
   // get-WizardState makes all decisions about what stateStr should be. (What "number" to point to.)
   getWizardState(entity) {
     const state = this._hass.states[entity];