If dark mode, use dark mode logos for background (#117)

- Use dark mode background logos when dark mode theme is active
vasqued2 · Sep 9, 2024 · 4bc76f6 · 4bc76f6
1 parent e6fbe9d
commit 4bc76f6
Show file tree

Hide file tree

Showing 8 changed files with 54 additions and 19 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.8";
+export let VERSION = "v0.14.9";
 
 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_bye.js b/src/render_bye.js
@@ -7,10 +7,12 @@ export function renderBye(c) {
     const htmlTemplate = html`
     <ha-card>
         <div class="card">
-            <img class="team-bg" src="${c.logoBG[team]}" />
+            <img class="team-bg" src="${c.logoBG[team]}"
+                onerror="this.onerror=null; this.src='${c.logoBGAlternate[team]}';" />
             <div class="card-content">
                 <div class="team">
-                    <img src="${c.logo[team]}" />
+                    <img class="logo" src="${c.logo[team]}" 
+                        onerror="this.onerror=null; this.src='${c.logoAlternate[team]}'; this.onerror=function() { this.src='${c.logoError[team]}'; };" />
                     <div class="name">${c.name[team]}</div>
                 </div>
                 <div class="bye">${c.byeTerm}</div>

diff --git a/src/render_in.js b/src/render_in.js
@@ -9,8 +9,10 @@ export function renderIn(c) {
     <ha-card>
         <div class="card">
             <div class="title">${c.title}</div>
-            <img class="team-bg" src="${c.logoBG[1]}" />
-            <img class="opponent-bg" src="${c.logoBG[2]}" />
+            <img class="team-bg" src="${c.logoBG[1]}"
+                onerror="this.onerror=null; this.src='${c.logoBGAlternate[1]}';" />
+            <img class="opponent-bg" src="${c.logoBG[2]}"
+                onerror="this.onerror=null; this.src='${c.logoBGAlternate[2]}';" />
             <div class="card-content">
                 <div class="team">
                     <a class="left-clickable ${!c.url[1] ? 'disabled' : ''}" href="${c.url[1] ? c.url[1] : '#'}" target="_blank">

diff --git a/src/render_post.js b/src/render_post.js
@@ -9,8 +9,10 @@ export function renderPost(c) {
     <ha-card>
         <div class="card">
             <div class="title">${c.title}</div>
-            <img class="team-bg" src="${c.logoBG[1]}" />
-            <img class="opponent-bg" src="${c.logoBG[2]}" />
+            <img class="team-bg" src="${c.logoBG[1]}"
+                onerror="this.onerror=null; this.src='${c.logoBGAlternate[1]}';" />
+            <img class="opponent-bg" src="${c.logoBG[2]}"
+                onerror="this.onerror=null; this.src='${c.logoBGAlternate[2]}';" />
             <div class="card-content">
                 <div class="team">
                     <a class="left-clickable ${!c.url[1] ? 'disabled' : ''}" href="${c.url[1] ? c.url[1] : '#'}" target="_blank">

diff --git a/src/render_pre.js b/src/render_pre.js
@@ -9,8 +9,10 @@ export function renderPre(c) {
     <ha-card>
         <div class="card">
             <div class="title">${c.title}</div>
-            <img class="team-bg" src="${c.logoBG[1]}" />
-            <img class="opponent-bg" src="${c.logoBG[2]}" />
+            <img class="team-bg" src="${c.logoBG[1]}"
+                onerror="this.onerror=null; this.src='${c.logoBGAlternate[1]}';" />
+            <img class="opponent-bg" src="${c.logoBG[2]}"
+                onerror="this.onerror=null; this.src='${c.logoBGAlternate[2]}';" />
             <div class="card-content">
                 <div class="team">
                     <a class="left-clickable ${!c.url[1] ? 'disabled' : ''}" href="${c.url[1] ? c.url[1] : '#'}" target="_blank">

diff --git a/src/set_defaults.js b/src/set_defaults.js
@@ -5,6 +5,7 @@ import { ERROR_HEADSHOT_URL } from "./const.js";
 //
 export function initCardData(c) {
     c.logoBG = [];
+    c.logoBGAlternate = [];
     c.logo = [];
     c.logoAlternate = [];
     c.logoError = [];
@@ -81,6 +82,7 @@ export function setDefaults(t, lang, stateObj, c, o, sport, team, oppo) {
     }
     c.logoError[team] = ERROR_HEADSHOT_URL;
     c.logoBG[team] = stateObj.attributes.team_logo;
+    c.logoBGAlternate[team] = stateObj.attributes.team_logo;
     c.name[team] = stateObj.attributes.team_name;
     if (o.teamURL == 'more-info') {
         c.url[team] = null;
@@ -98,6 +100,7 @@ export function setDefaults(t, lang, stateObj, c, o, sport, team, oppo) {
     }
     c.logoError[oppo] = ERROR_HEADSHOT_URL;
     c.logoBG[oppo] = stateObj.attributes.opponent_logo;
+    c.logoBGAlternate[oppo] = stateObj.attributes.opponent_logo;
     c.name[oppo] = stateObj.attributes.opponent_name;
     if (o.opponentURL == 'more-info') {
         c.url[oppo] = null;
@@ -111,7 +114,16 @@ export function setDefaults(t, lang, stateObj, c, o, sport, team, oppo) {
     c.playClock = stateObj.attributes.clock;
     if (o.showLeague) {
         c.logoBG[team] = stateObj.attributes.league_logo
+        c.logoBGAlternate[team] = stateObj.attributes.league_logo
         c.logoBG[oppo] = stateObj.attributes.league_logo
+        c.logoBGAlternate[oppo] = stateObj.attributes.league_logo
+    }
+    if (c.logoBG[team] && o.darkMode) {
+        c.logoBG[team] = c.logoBG[team].replace('/500/', '/500-dark/')
+    }
+
+    if (c.logoBG[oppo] && o.darkMode) {
+        c.logoBG[oppo] = c.logoBG[oppo].replace('/500/', '/500-dark/')
     }
 
     c.score[team] = stateObj.attributes.team_score;