v0.14.7 Release Candidate (#112)

- Use dark mode logos when dark mode theme is active
vasqued2 · Sep 3, 2024 · abb7f82 · abb7f82
1 parent 213d902
commit abb7f82
Show file tree

Hide file tree

Showing 9 changed files with 84 additions and 40 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>