Starting again

vasqued2 · Aug 18, 2024 · 2bad328 · 2bad328
1 parent 8adc928
commit 2bad328
Show file tree

Hide file tree

Showing 5 changed files with 78 additions and 63 deletions.
diff --git a/dist/const.js b/dist/const.js
@@ -1,4 +1,4 @@
-export let VERSION = "v0.14.1";
+export let VERSION = "v0.14.2.1beta";
 
 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/dist/render_post.js b/dist/render_post.js
@@ -1,33 +1,10 @@
-import { html } from "https://cdn.jsdelivr.net/gh/lit/dist@3/core/lit-core.min.js";
+import { html, styleMap } from "https://cdn.jsdelivr.net/gh/lit/dist@3/all/lit-all.min.js";
 
 
 // Define the rendering function
 export function renderPost(c) {
     // Render the HTML template using the provided object `c`
     const htmlTemplate = html`
-    <style>
-        .card { position: relative; overflow: hidden; padding: 16px 16px 20px; font-weight: 400; border-radius: var(--ha-card-border-radius, 10px); }
-        .title { text-align: center; font-size: 1.2em; font-weight: 500; }
-        .team-bg { opacity: 0.08; position: absolute; top: -20%; left: -20%; width: 58%; z-index: 0; }
-        .opponent-bg { opacity: 0.08; position: absolute; top: -20%; right: -20%; width: 58%; z-index: 0; }
-        .card-content { display: flex; justify-content: space-evenly; align-items: center; text-align: center; position: relative; z-index: 1; }
-        .team { text-align: center; width: 35%; }
-        .logo { max-height: 6.5em; }
-        .team img { max-width: 90px; }
-        .circle { display:${c.initialsDisplay}; width: 1em; height: 1em; padding: 10px; line-height: 3em; border: 2px solid gray; border-radius: 50%; font-size: 2em; color: white; text-align: center; background: black }
-        .score { font-size: ${c.scoreSize}; text-align: center; line-height: 1; }
-        .score1op { opacity: ${c.scoreOp[1]}; }
-        .score2op { opacity: ${c.scoreOp[2]}; }
-        .divider { font-size: 2.5em; text-align: center; opacity: 0; }
-        .name { font-size: 1.4em; margin-bottom: 4px; }
-        .rank { font-size:0.8em; display: ${c.rankDisplay}; }
-        .post-series-info { display:${c.seriesSummaryDisplay}; font-size: 1.2em; text-align: center; margin: 4px; }
-        .post-row1 { font-size: 1.2em; text-align: center; }
-        .left-clickable { text-decoration: none; color: inherit; }
-        .right-clickable { text-decoration: none; color: inherit; }
-        .bottom-clickable { text-decoration: none; color: inherit; }
-        .disabled { pointer-events: none; cursor: default; }
-    </style>
     <ha-card>
         <div class="card">
             <div class="title">${c.title}</div>
@@ -37,26 +14,24 @@ export function renderPost(c) {
                 <div class="team">
                     <a class="left-clickable ${!c.url[1] ? 'disabled' : ''}" href="${c.url[1] ? c.url[1] : '#'}" target="_blank">
                         <img class="logo" src="${c.logo[1]}" onerror="this.onerror=null; this.src='${c.logoError[1]}';" />
-                        <div class="circle">${c.initials[1]}</div>
-                        <div class="name"><span class="rank">${c.rank[1]}</span> ${c.name[1]}</div>
+                        <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 score1op">${c.score[1]}</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 score2op">${c.score[2]}</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" src="${c.logo[2]}" onerror="this.onerror=null; this.src='${c.logoError[2]}';" />
-                        <div class="circle">${c.initials[2]}</div>
-                        <div class="name"><span class="rank">${c.rank[2]}</span> ${c.name[2]}</div>
+                        <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>
             <a class="bottom-clickable ${!c.bottomURL ? 'disabled' : ''}" href="${c.bottomURL ? c.bottomURL : '#'}" target="_blank">
                 <div class="post-row1">${c.finalTerm}</div>
-                <div class="post-series-info">${c.seriesSummary}</div>
+                <div class="post-series-info" style=${styleMap({ '--series-summary-display': c.seriesSummaryDisplay })}>${c.seriesSummary}</div>
             </a>
         </div>
     </ha-card>

diff --git a/dist/render_pre.js b/dist/render_pre.js
@@ -1,34 +1,10 @@
-import { html } from "https://cdn.jsdelivr.net/gh/lit/dist@3/core/lit-core.min.js";
+import { html, styleMap } from "https://cdn.jsdelivr.net/gh/lit/dist@3/all/lit-all.min.js";
 
 
 // Define the rendering function
 export function renderPre(c) {
     // Render the HTML template using the provided object `c`
     const htmlTemplate = html`
-    <style>
-        .card { position: relative; overflow: hidden; padding: 16px 16px 20px; font-weight: 400; border-radius: var(--ha-card-border-radius, 10px); }
-        .title { text-align: center; font-size: 1.2em; font-weight: 500; }
-        .team-bg { opacity: 0.08; position: absolute; top: -20%; left: -20%; width: 58%; z-index: 0; }
-        .opponent-bg { opacity: 0.08; position: absolute; top: -20%; right: -20%; width: 58%; z-index: 0; }
-        .card-content { display: flex; justify-content: space-evenly; align-items: center; text-align: center; position: relative; z-index: 1; }
-        .team { text-align: center; width: 35%; }
-        .logo { max-height: 6.5em; }
-        .team img { max-width: 90px; }
-        .circle { display:${c.initialsDisplay}; width: 1em; height: 1em; padding: 10px; line-height: 3em; border: 2px solid gray; border-radius: 50%; font-size: 2em; color: white; text-align: center; background: black }
-        .name { font-size: 1.4em; margin-bottom: 4px; }
-        .rank { font-size:0.8em; display: ${c.rankDisplay}; }
-        .line { height: 1px; background-color: var(--primary-text-color); margin:10px 0; }
-        .gameday { font-size: 1.4em; height: 1.4em; }
-        .gamedate { font-size: 1.1em; height: 1.1em; }
-        .gametime { font-size: 1.1em; height: 1.1em; }
-        .pre-series-info { display:${c.seriesSummaryDisplay}; font-size: 1.2em; text-align: center; margin: 4px; }
-        .pre-row1 { font-weight: 500; font-size: 1.2em; height: 1.2em; margin: 6px 0 2px; }
-        .pre-row1, .pre-row2, .pre-row3 { display: flex; justify-content: space-between; align-items: center; margin: 2px 0; }
-        .left-clickable { text-decoration: none; color: inherit; }
-        .right-clickable { text-decoration: none; color: inherit; }
-        .bottom-clickable { text-decoration: none; color: inherit; }
-        .disabled { pointer-events: none; cursor: default; }
-    </style>
     <ha-card>
         <div class="card">
             <div class="title">${c.title}</div>
@@ -38,8 +14,7 @@ export function renderPre(c) {
                 <div class="team">
                     <a class="left-clickable ${!c.url[1] ? 'disabled' : ''}" href="${c.url[1] ? c.url[1] : '#'}" target="_blank">
                         <img class="logo" src="${c.logo[1]}" onerror="this.onerror=null; this.src='${c.logoError[1]}';" />
-                        <div class="circle">${c.initials[1]}</div>
-                        <div class="name"><span class="rank">${c.rank[1]}</span> ${c.name[1]}</div>
+                        <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>
@@ -51,13 +26,12 @@ export function renderPre(c) {
                 <div class="team">
                     <a class="right-clickable ${!c.url[2] ? 'disabled' : ''}" href="${c.url[2] ? c.url[2] : '#'}" target="_blank">
                         <img class="logo" src="${c.logo[2]}" onerror="this.onerror=null; this.src='${c.logoError[2]}';" />
-                        <div class="circle">${c.initials[2]}</div>
-                        <div class="name"><span class="rank">${c.rank[2]}</span> ${c.name[2]}</div>
+                        <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>
-            <div class="pre-series-info">${c.seriesSummary}</div>
+            <div class="pre-series-info" style=${styleMap({"--series_summary-display": `${c.seriesSummaryDisplay}`})}>${c.seriesSummary}</div>
             <div class="line"></div>
             <a class="bottom-clickable ${!c.bottomURL ? 'disabled' : ''}" href="${c.bottomURL ? c.bottomURL : '#'}" target="_blank">
                 <div class="pre-row1">

diff --git a/dist/styles.js b/dist/styles.js
@@ -0,0 +1,59 @@
+import { css } from "https://cdn.jsdelivr.net/gh/lit/dist@3/all/lit-all.min.js";
+
+export const cardStyles = css`
+.card { position: relative; overflow: hidden; padding: 16px 16px 20px; font-weight: 400; border-radius: var(--ha-card-border-radius, 10px); }
+.title { text-align: center; font-size: 1.2em; font-weight: 500; }
+.team-bg { opacity: 0.08; position: absolute; top: -20%; left: -20%; width: 58%; z-index: 0; }
+.opponent-bg { opacity: 0.08; position: absolute; top: -20%; right: -20%; width: 58%; z-index: 0; }
+.card-content { display: flex; justify-content: space-evenly; align-items: center; text-align: center; position: relative; z-index: 1; }
+.team { text-align: center; width: 35%; }
+.team img { max-width: 90px; }
+.logo { max-height: 6.5em; }
+.score { opacity: var(--score1_opacity, 1); font-size: var(--score_size, 3em); text-align: center; line-height: 1; }
+.line { height: 1px; background-color: var(--primary-text-color); margin:10px 0; }
+.left-clickable { text-decoration: none; color: inherit; }
+.right-clickable { text-decoration: none; color: inherit; }
+.bottom-clickable { text-decoration: none; color: inherit; }
+.disabled { pointer-events: none; cursor: default; }
+
+.possession { opacity: var(--possession-opacity, 1); font-size: 2.5em; text-align: center; font-weight:900; }
+.divider { font-size: 2.5em; text-align: center; margin: 0 4px; }
+.name { font-size: 1.4em; margin-bottom: 4px; }
+.rank { display: var(--rank-display, inline); font-size:0.8em; }
+.record { font-size:1.0em; height 1.0em; }
+.timeouts-wrapper { margin: 0.4em auto; width: 70%; display: var(--timeouts-display, inline); }
+.timeout { height: 0.6em; border-radius: 0.3em; background-color: var(--timeout-color, #000000); border: var(--timeout-border, 1px) solid var(--timeout-border-color, #ffffff); width: 20%; display: inline-block; margin: 0.4em auto; position: relative; opacity: var(--timeout-opacity, 0.2); }
+.bases { display: var(--bases-display, inherit); font-size: 2.5em; text-align: center; font-weight:900; }
+.on-base { opacity: var(--on-base-opacity, 1); display: inline-block; }
+.pitcher { opacity: 0.0; display: inline-block; }
+.in-row1 { font-size: 1em; height: 1em; margin: 6px 0 2px; }
+.in-row2 { ; font-size: 1em; height: 1em; margin: 6px 0 2px; }
+.in-row1, .in-row2 { display: flex; justify-content: space-between; align-items: center; margin: 2px 0; }
+.last-play { font-size: 1.2em; width: 100%; white-space: nowrap; overflow: hidden; box-sizing: border-box; }
+.last-play p { animation : slide var(--last-play-speed, 18s) linear infinite; display: inline-block; padding-left: 100%; margin: 2px 0 12px; }
+@keyframes slide { 0%   { transform: translate(0, 0); } 100% { transform: translate(-100%, 0); } }
+.down-distance { text-align: right; }
+.play-clock { font-size: 1.4em; height: 1.4em; text-align: center; }
+.outs { display: var(--outs-display, inherit); text-align: center; }
+
+.bar-wrapper { display: var(--bar-display, inherit) }
+.bar-text { text-align: center; }
+.bar-flex { width: 100%; display: flex; justify-content: center; margin-top: 4px; }
+.bar-right { width: var(--bar-length, 0); background-color: var(--bar-color, red); height: 0.8em; border-radius: 0 0.4em 0.4em 0; border: var(--bar-border, 1px) solid var(--bar-border-color, lightgrey); border-left: 0; transition: all 1s ease-out; }
+.bar-left { width: var(--bar-length, 0); background-color: var(--bar-color, blue); height: 0.8em; border-radius: 0.4em 0 0 0.4em; border: var(--bar-border, 1px) solid var(--bar-border-color, lightgrey); border-right: 0; transition: all 1s ease-out; }
+.bar { display: flex; align-items: center; }
+.bar1-label { flex: 0 0 10px; padding: 0 10px 0 0; margin-top: 4px; }
+.bar2-label { flex: 0 0 10px; padding: 0 0 0 10px; text-align: right; margin-top: 4px; }
+.in-series-info { display: var(--series-summary-display, none); font-size: 1.2em; text-align: center; margin: 4px; }
+
+.gameday { font-size: 1.4em; height: 1.4em; }
+.gamedate { font-size: 1.1em; height: 1.1em; }
+.gametime { font-size: 1.1em; height: 1.1em; }
+.pre-row1 { font-weight: 500; font-size: 1.2em; height: 1.2em; margin: 6px 0 2px; }
+.pre-row1, .pre-row2, .pre-row3 { display: flex; justify-content: space-between; align-items: center; margin: 2px 0; }
+.pre-series-info { display: var(--series-summary-display, none); font-size: 1.2em; text-align: center; margin: 4px; }
+
+.post-row1 { font-size: 1.2em; text-align: center; }
+.post-series-info { display: var(--series-summary-display, none); font-size: 1.2em; text-align: center; margin: 4px; }
+
+`;
diff --git a/dist/teamtracker_card.js b/dist/teamtracker_card.js
@@ -1,4 +1,4 @@
-import { LitElement } from "https://cdn.jsdelivr.net/gh/lit/dist@3/core/lit-core.min.js";
+import { LitElement, css } from "https://cdn.jsdelivr.net/gh/lit/dist@3/all/lit-all.min.js";
 import { Translator } from "./localize/translator.js";
 import { VERSION } from "./const.js";
 import { renderBye } from './render_bye.js';
@@ -9,6 +9,7 @@ import { renderPost } from './render_post.js';
 import { renderPre } from './render_pre.js';
 import { initCardData, setCardFormat, setDefaults, setStartInfo } from './set_defaults.js';
 import { setSportData } from './set_sports.js';
+import { cardStyles } from './styles.js';
 
 
 export class TeamTrackerCard extends LitElement {
@@ -20,6 +21,12 @@ export class TeamTrackerCard extends LitElement {
         };
     }
 
+    static get styles() {
+        return css`
+            ${cardStyles}
+        `;
+    }
+
     setConfig(config) {
         this._config = config;
         this._actionConfig = {