Use dark mode logo when available

vasqued2 · Sep 2, 2024 · a5bfd14 · a5bfd14
1 parent 213d902
commit a5bfd14
Show file tree

Hide file tree

Showing 8 changed files with 67 additions and 39 deletions.
diff --git a/dist/ha-teamtracker-card.js b/dist/ha-teamtracker-card.js
diff --git a/dist/ha-teamtracker-card.js.map b/dist/ha-teamtracker-card.js.map
diff --git a/src/const.js b/src/const.js
@@ -1,4 +1,4 @@
-export let VERSION = "v0.14.6";
+export let VERSION = "v0.14.7";
 
 export let GOLF_HEADSHOT_URL = "https://a.espncdn.com/i/headshots/golf/players/full/";
 export let MMA_HEADSHOT_URL = "https://a.espncdn.com/i/headshots/mma/players/full/";

diff --git a/src/render_in.js b/src/render_in.js
@@ -14,9 +14,10 @@ export function renderIn(c) {
             <div class="card-content">
                 <div class="team">
                     <a class="left-clickable ${!c.url[1] ? 'disabled' : ''}" href="${c.url[1] ? c.url[1] : '#'}" target="_blank">
-                        <img class="logo left-logo" src="${c.logo[1]}" onerror="this.onerror=null; this.src='${c.logoError[1]}';" />
-                        <div class="name left-name"><span class="rank" style=${styleMap({"--rank-display": `${c.rankDisplay}`})}>${c.rank[1]}</span> ${c.name[1]}</div>
-                        <div class="record left-record">${c.record[1]}</div>
+                        <img class="logo" src="${c.logo[1]}" 
+                            onerror="this.onerror=null; this.src='${c.logoAlternate[1]}'; this.onerror=function() { this.src='${c.logoError[1]}'; };" />
+                        <div class="name"><span class="rank" style=${styleMap({"--rank-display": `${c.rankDisplay}`})}>${c.rank[1]}</span> ${c.name[1]}</div>
+                        <div class="record">${c.record[1]}</div>
                         <div class="timeouts-wrapper" style=${styleMap({"--timeouts-display": `${c.timeoutsDisplay}`})}>
                             <div class="timeout" style=${styleMap({"--timeout-opacity": `${c.timeoutsOp[1][1]}`, "--timeout-color": `${c.color[1]}`, "--timeout-border": `${c.outlineWidth}px`, "--timeout-border-color": `${c.outlineColor}`})}></div>
                             <div class="timeout" style=${styleMap({"--timeout-opacity": `${c.timeoutsOp[1][2]}`, "--timeout-color": `${c.color[1]}`, "--timeout-border": `${c.outlineWidth}px`, "--timeout-border-color": `${c.outlineColor}`})}></div>
@@ -31,9 +32,10 @@ export function renderIn(c) {
                 <div class="possession" style=${styleMap({"--possession-opacity": `${c.possessionOp[2]}`})}>&bull;</div>
                 <div class="team">
                     <a class="right-clickable ${!c.url[2] ? 'disabled' : ''}" href="${c.url[2] ? c.url[2] : '#'}" target="_blank">
-                        <img class="logo right-logo" src="${c.logo[2]}" onerror="this.onerror=null; this.src='${c.logoError[2]}';" />
-                        <div class="name right-name"><span class="rank" style=${styleMap({"--rank-display": `${c.rankDisplay}`})}>${c.rank[2]}</span> ${c.name[2]}</div>
-                        <div class="record right-record">${c.record[2]}</div>
+                        <img class="logo" src="${c.logo[2]}" 
+                            onerror="this.onerror=null; this.src='${c.logoAlternate[2]}'; this.onerror=function() { this.src='${c.logoError[2]}'; };" />
+                        <div class="name"><span class="rank" style=${styleMap({"--rank-display": `${c.rankDisplay}`})}>${c.rank[2]}</span> ${c.name[2]}</div>
+                        <div class="record">${c.record[2]}</div>
                         <div class="timeouts-wrapper" style=${styleMap({"--timeouts-display": `${c.timeoutsDisplay}`})}>
                             <div class="timeout" style=${styleMap({"--timeout-opacity": `${c.timeoutsOp[2][1]}`, "--timeout-color": `${c.color[2]}`, "--timeout-border": `${c.outlineWidth}px`, "--timeout-border-color": `${c.outlineColor}`})}></div>
                             <div class="timeout" style=${styleMap({"--timeout-opacity": `${c.timeoutsOp[2][2]}`, "--timeout-color": `${c.color[2]}`, "--timeout-border": `${c.outlineWidth}px`, "--timeout-border-color": `${c.outlineColor}`})}></div>

diff --git a/src/render_post.js b/src/render_post.js
@@ -14,19 +14,21 @@ export function renderPost(c) {
             <div class="card-content">
                 <div class="team">
                     <a class="left-clickable ${!c.url[1] ? 'disabled' : ''}" href="${c.url[1] ? c.url[1] : '#'}" target="_blank">
-                        <img class="logo left-logo" src="${c.logo[1]}" onerror="this.onerror=null; this.src='${c.logoError[1]}';" />
-                        <div class="name left-name"><span class="rank" style=${styleMap({ '--rank-display': c.rankDisplay })}>${c.rank[1]}</span> ${c.name[1]}</div>
-                        <div class="record left-record">${c.record[1]}</div>
+                        <img class="logo" src="${c.logo[1]}" 
+                            onerror="this.onerror=null; this.src='${c.logoAlternate[1]}'; this.onerror=function() { this.src='${c.logoError[1]}'; };" />
+                        <div class="name"><span class="rank" style=${styleMap({ '--rank-display': c.rankDisplay })}>${c.rank[1]}</span> ${c.name[1]}</div>
+                        <div class="record">${c.record[1]}</div>
                     </a>
                 </div>
                 <div class="score" style=${styleMap({ '--score_opacity': c.scoreOp[1], "--score_size": c.scoreSize })}>${c.score[1]}</div>
                 <div class="divider">&nbsp&nbsp&nbsp</div>
                 <div class="score" style=${styleMap({ '--score_opacity': c.scoreOp[2], "--score_size": c.scoreSize })}>${c.score[2]}</div>
                 <div class="team">
                     <a class="right-clickable ${!c.url[2] ? 'disabled' : ''}" href="${c.url[2] ? c.url[2] : '#'}" target="_blank">
-                        <img class="logo right-logo" src="${c.logo[2]}" onerror="this.onerror=null; this.src='${c.logoError[2]}';" />
-                        <div class="name right-name"><span class="rank" style=${styleMap({ '--rank-display': c.rankDisplay })}>${c.rank[2]}</span> ${c.name[2]}</div>
-                        <div class="record right-record">${c.record[2]}</div>
+                        <img class="logo" src="${c.logo[2]}" 
+                            onerror="this.onerror=null; this.src='${c.logoAlternate[2]}'; this.onerror=function() { this.src='${c.logoError[2]}'; };" />
+                        <div class="name"><span class="rank" style=${styleMap({ '--rank-display': c.rankDisplay })}>${c.rank[2]}</span> ${c.name[2]}</div>
+                        <div class="record">${c.record[2]}</div>
                     </a>
                 </div>
             </div>

diff --git a/src/render_pre.js b/src/render_pre.js
@@ -14,9 +14,10 @@ export function renderPre(c) {
             <div class="card-content">
                 <div class="team">
                     <a class="left-clickable ${!c.url[1] ? 'disabled' : ''}" href="${c.url[1] ? c.url[1] : '#'}" target="_blank">
-                        <img class="logo left-logo" src="${c.logo[1]}" onerror="this.onerror=null; this.src='${c.logoError[1]}';" />
-                        <div class="name left-name"><span class="rank" style=${styleMap({"--rank-display": `${c.rankDisplay}`})}>${c.rank[1]}</span> ${c.name[1]}</div>
-                        <div class="record left-record">${c.record[1]}</div>
+                        <img class="logo" src="${c.logo[1]}" 
+                            onerror="this.onerror=null; this.src='${c.logoAlternate[1]}'; this.onerror=function() { this.src='${c.logoError[1]}'; };" />
+                        <div class="name"><span class="rank" style=${styleMap({"--rank-display": `${c.rankDisplay}`})}>${c.rank[1]}</span> ${c.name[1]}</div>
+                        <div class="record">${c.record[1]}</div>
                     </a>
                 </div>
                 <div class="gamewrapper">
@@ -26,9 +27,10 @@ export function renderPre(c) {
                 </div>
                 <div class="team">
                     <a class="right-clickable ${!c.url[2] ? 'disabled' : ''}" href="${c.url[2] ? c.url[2] : '#'}" target="_blank">
-                        <img class="logo right-logo" src="${c.logo[2]}" onerror="this.onerror=null; this.src='${c.logoError[2]}';" />
-                        <div class="name right-name"><span class="rank" style=${styleMap({"--rank-display": `${c.rankDisplay}`})}>${c.rank[2]}</span> ${c.name[2]}</div>
-                        <div class="record right-record">${c.record[2]}</div>
+                        <img class="logo" src="${c.logo[2]}" 
+                            onerror="this.onerror=null; this.src='${c.logoAlternate[2]}'; this.onerror=function() { this.src='${c.logoError[2]}'; };" />
+                        <div class="name"><span class="rank" style=${styleMap({"--rank-display": `${c.rankDisplay}`})}>${c.rank[2]}</span> ${c.name[2]}</div>
+                        <div class="record">${c.record[2]}</div>
                     </a>
                 </div>
             </div>

diff --git a/src/set_defaults.js b/src/set_defaults.js
@@ -6,6 +6,7 @@ import { ERROR_HEADSHOT_URL } from "./const.js";
 export function initCardData(c) {
     c.logoBG = [];
     c.logo = [];
+    c.logoAlternate = [];
     c.logoError = [];
     c.name = [];
     c.url = [];
@@ -74,6 +75,10 @@ export function setDefaults(t, lang, stateObj, c, o, sport, team, oppo) {
     // Set Scoreboard data
 
     c.logo[team] = stateObj.attributes.team_logo;
+    c.logoAlternate[team] = stateObj.attributes.team_logo;
+    if (c.logo[team] && o.darkMode) {
+        c.logo[team] = c.logo[team].replace('/500/', '/500-dark/')
+    }
     c.logoError[team] = ERROR_HEADSHOT_URL;
     c.logoBG[team] = stateObj.attributes.team_logo;
     c.name[team] = stateObj.attributes.team_name;
@@ -87,6 +92,10 @@ export function setDefaults(t, lang, stateObj, c, o, sport, team, oppo) {
     c.record[team] = stateObj.attributes.team_record;
     c.winner[team] = stateObj.attributes.team_winner || false;
     c.logo[oppo] = stateObj.attributes.opponent_logo;
+    c.logoAlternate [oppo] = stateObj.attributes.opponent_logo;
+    if (c.logo[oppo] && o.darkMode) {
+        c.logo[oppo] = c.logo[oppo].replace('/500/', '/500-dark/')
+    }
     c.logoError[oppo] = ERROR_HEADSHOT_URL;
     c.logoBG[oppo] = stateObj.attributes.opponent_logo;
     c.name[oppo] = stateObj.attributes.opponent_name;

diff --git a/src/teamtracker_card.js b/src/teamtracker_card.js
@@ -101,6 +101,7 @@ export class TeamTrackerCard extends LitElement {
             o.show_rank = false;
         }
         o.debug = this._config.debug
+        o.darkMode = this.hass.themes.darkMode
 
         //
         //  Set sport, team, and oppo