Skip to content

Commit

Permalink
Fixes to timeouts, status bar, and bases
Browse files Browse the repository at this point in the history
  • Loading branch information
@vasqued2
vasqued2 committed Aug 18, 2024
1 parent c5fd588 commit a174e6f
Show file tree
Hide file tree
Showing 4 changed files with 41 additions and 54 deletions.
38 changes: 19 additions & 19 deletions dist/render_in.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,10 +16,10 @@ export function renderIn(c) {
<img class="logo" src="${c.logo[1]}" onerror="this.onerror=null; 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" style=${styleMap({"--timeouts-display": `${c.timeoutsDisplay}`})}>
<div class="timeouts1" style=${styleMap({"--timeouts1-color": `${c.color[1]}`, "--timeouts-border": `${c.clrOut}px`, "--timeouts-border-color": `${c.outColor}`})}></div>
<div class="timeouts1" style=${styleMap({"--timeouts1-color": `${c.color[1]}`, "--timeouts-border": `${c.clrOut}px`, "--timeouts-border-color": `${c.outColor}`})}></div>
<div class="timeouts1" style=${styleMap({"--timeouts1-color": `${c.color[1]}`, "--timeouts-border": `${c.clrOut}px`, "--timeouts-border-color": `${c.outColor}`})}></div>
<div class="timeouts-wrapper" style=${styleMap({"--timeouts-display": `${c.timeoutsDisplay}`})}>
<div class="timeout" style=${styleMap({"--timeout-opacity": `${c.timeouts[1]} >= 1 ? 1 : 0.2`, "--timeout-color": `${c.color[1]}`, "--timeout-border": `${c.outlineWidth}px`, "--timeout-border-color": `${c.outlineColor}`})}></div>
<div class="timeout" style=${styleMap({"--timeout-opacity": `${c.timeouts[1]} >= 2 ? 1 : 0.2`, "--timeout-color": `${c.color[1]}`, "--timeout-border": `${c.outlineWidth}px`, "--timeout-border-color": `${c.outlineColor}`})}></div>
<div class="timeout" style=${styleMap({"--timeout-opacity": `${c.timeouts[1]} >= 3 ? 1 : 0.2`, "--timeout-color": `${c.color[1]}`, "--timeout-border": `${c.outlineWidth}px`, "--timeout-border-color": `${c.outlineColor}`})}></div>
</div>
</a>
</div>
Expand All @@ -33,26 +33,26 @@ export function renderIn(c) {
<img class="logo" src="${c.logo[2]}" onerror="this.onerror=null; 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" style=${styleMap({"--timeouts-display": `${c.timeoutsDisplay}`})}>
<div class="timeouts2" style=${styleMap({"--timeouts2-color": `${c.color[2]}`, "--timeouts-border": `${c.clrOut}px`, "--timeouts-border-color": `${c.outColor}`})}></div>
<div class="timeouts2" style=${styleMap({"--timeouts2-color": `${c.color[2]}`, "--timeouts-border": `${c.clrOut}px`, "--timeouts-border-color": `${c.outColor}`})}></div>
<div class="timeouts2" style=${styleMap({"--timeouts2-color": `${c.color[2]}`, "--timeouts-border": `${c.clrOut}px`, "--timeouts-border-color": `${c.outColor}`})}></div>
</div>
<div class="timeouts-wrapper" style=${styleMap({"--timeouts-display": `${c.timeoutsDisplay}`})}>
<div class="timeout" style=${styleMap({"--timeout-opacity": `${c.timeouts[2]} >= 1 ? 1 : 0.2`, "--timeout-color": `${c.color[2]}`, "--timeout-border": `${c.outlineWidth}px`, "--timeout-border-color": `${c.outlineColor}`})}></div>
<div class="timeout" style=${styleMap({"--timeout-opacity": `${c.timeouts[2]} >= 2 ? 1 : 0.2`, "--timeout-color": `${c.color[2]}`, "--timeout-border": `${c.outlineWidth}px`, "--timeout-border-color": `${c.outlineColor}`})}></div>
<div class="timeout" style=${styleMap({"--timeout-opacity": `${c.timeouts[2]} >= 3 ? 1 : 0.2`, "--timeout-color": `${c.color[2]}`, "--timeout-border": `${c.outlineWidth}px`, "--timeout-border-color": `${c.outlineColor}`})}></div>
</div>
</a>
</div>
</div>
<div class="play-clock">${c.playClock}</div>
<div class="bases" style=${styleMap({"--bases-display": `${c.basesDisplay}`})}>
<div class="on-second" style=${styleMap({"--on-second-opacity": `${c.onSecondOp}`})}>&bull;</div>
<div class="on-base" style=${styleMap({"--on-base-opacity": `${c.onSecondOp}`})}>&bull;</div>
</div>
<div class="bases" style=${styleMap({"--bases-display": `${c.basesDisplay}`})}>
<div class="on-third" style=${styleMap({"--on-third-opacity": `${c.onThirdOp}`})}>&bull;</div>
<div class="on-base" style=${styleMap({"--on-base-opacity": `${c.onThirdOp}`})}>&bull;</div>
<div class="pitcher"></div>
<div class="on-first" style=${styleMap({"--on-first-opacity": `${c.onFirstOp}`})}>&bull;</div>
<div class="on-base" style=${styleMap({"--on-base-opacity": `${c.onFirstOp}`})}>&bull;</div>
</div>
<div class="outs" style=${styleMap({"--outs-display": `${c.outsDisplay}`})}>${c.in0}</div>
<div class="in-series-info" style=${styleMap({"--series_summary-display": `${c.seriesSummaryDisplay}`})}>${c.seriesSummary}</div>
<div class="line1"></div>
<div class="line"></div>
<a class="bottom-clickable ${!c.bottomURL ? 'disabled' : ''}" href="${c.bottomURL ? c.bottomURL : '#'}" target="_blank">
<div class="in-row1">
<div class="venue">${c.venue}</div>
Expand All @@ -62,17 +62,17 @@ export function renderIn(c) {
<div class="location">${c.location}</div>
<div class="network">${c.in2}</div>
</div>
<div class="line2"></div>
<div class="line"></div>
<div class="last-play" style=${styleMap({"--last-play-speed": `${c.lastPlaySpeed}s`})}>
<p>${c.lastPlay}</p>
</div>
<div class="bar-wrapper">
<div class="bar-text" style=${styleMap({"--bar-display": `${c.barDisplay}`})}>${c.gameBar}</div>
<div class="bar" style=${styleMap({"--bar-wrapper-display": `${c.barwrapperDisplay}`})}>
<div class="bar-wrapper" style=${styleMap({"--bar-display": `${c.barDisplay}`})}>
<div class="bar-text">${c.gameBar}</div>
<div class="bar">
<div class="bar1-label">${c.barLabel[1]}</div>
<div class="bar-flex">
<div class="bar1-length" style=${styleMap({"--bar1-length": `${c.barLength[1]}%`, "--bar1-color": `${c.color[1]}`, "--bar1-border": `${c.clrOut}px`, "--bar1-border-color": `${c.outColor}`})}></div>
<div class="bar2-length" style=${styleMap({"--bar2-length": `${c.barLength[2]}%`, "--bar2-color": `${c.color[2]}`, "--bar2-border": `${c.clrOut}px`, "--bar2-border-color": `${c.outColor}`})}></div>
<div class="bar-left" style=${styleMap({"--bar-length": `${c.barLength[1]}%`, "--bar-color": `${c.color[1]}`, "--bar-border": `${c.outlineWidth}px`, "--bar-border-color": `${c.outlineColor}`})}></div>
<div class="bar-right" style=${styleMap({"--bar-length": `${c.barLength[2]}%`, "--bar-color": `${c.color[2]}`, "--bar-border": `${c.outlineWidth}px`, "--bar-border-color": `${c.outlineColor}`})}></div>
</div>
<div class="bar2-label">${c.barLabel[2]}</div>
</div>
Expand Down
7 changes: 3 additions & 4 deletions dist/set_defaults.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,6 @@ export function setDefaults(t, lang, stateObj, c, o, sport, team, oppo) {
c.outsDisplay = 'none';
c.basesDisplay = 'none';
c.barDisplay = 'inherit';
c.barWrapDisplay = "flex";
c.timeoutsDisplay = 'inline';
c.rankDisplay = 'inline';
c.seriesSummaryDisplay = 'none';
Expand Down Expand Up @@ -218,11 +217,11 @@ export function setDefaults(t, lang, stateObj, c, o, sport, team, oppo) {

export function setCardFormat(o, c) {

c.clrOut = 0;
c.outColor = o.outlineColor;
c.outlineWidth = 0;
c.outlineColor = o.outlineColor;

if (o.outline == true) {
c.clrOut = 1;
c.outlineWidth = 1;
}
}

Expand Down
6 changes: 0 additions & 6 deletions dist/set_sports.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -54,20 +54,17 @@ export function setBaseball(t, stateObj, c, team, oppo) {
// setBasketball()
// timeoutsDisplay = 'none';
// barDisplay = "none";
// barWrapDisplay = "none";
//
export function setBasketball(t, stateObj, c, team, oppo) {
c.timeoutsDisplay = 'none';
c.barDisplay = 'none';
c.barWrapDisplay = "none";
}


//
// SetCricket()
// timeoutsDisplay = 'none';
// barDisplay = "none";
// barWrapDisplay = "none";
// in1 = odds;
// in2 = quarter;
// score = split score into 2 parts
Expand All @@ -78,7 +75,6 @@ export function setCricket(t, stateObj, c, team, oppo) {

c.timeoutsDisplay = 'none';
c.barDisplay = "none";
c.barWrapDisplay = "none";

c.in1 = stateObj.attributes.odds;
c.in2 = stateObj.attributes.quarter;
Expand Down Expand Up @@ -146,13 +142,11 @@ export function setHockey(t, stateObj, c, team, oppo) {
// title = use event_name if title is not set
// timeoutsDisplay = 'none';
// barDisplay = "none";
// barWrapDisplay = "none";
//
export function setMMA(t, stateObj, c, team, oppo) {
c.title = c.title || stateObj.attributes.event_name;
c.timeoutsDisplay = 'none';
c.barDisplay = "none";
c.barWrapDisplay = "none";

c.logo[team] = MMA_HEADSHOT_URL + stateObj.attributes.team_id + ".png";
c.logo[oppo] = MMA_HEADSHOT_URL + stateObj.attributes.opponent_id + ".png";
Expand Down
44 changes: 19 additions & 25 deletions dist/styles.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,26 +9,23 @@ export const cardStyles = css`
.team { text-align: center; width: 35%; }
.team img { max-width: 90px; }
.logo { max-height: 6.5em; }
.score { font-size: var(--score_size, 3em); opacity: var(--score_opacity, 1); 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; }
.possession1 { opacity: var(--possession1-opacity, 1); font-size: 2.5em; text-align: center; font-weight:900; }
.possession2 { opacity: var(--possession2-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; }
.line1 { height: 1px; background-color: var(--primary-text-color); margin:10px 0; }
.line2 { height: 1px; background-color: var(--primary-text-color); margin:10px 0; }
.timeouts { margin: 0.4em auto; width: 70%; display: var(--timeouts-display, inline); }
.timeouts div.timeouts2:nth-child(-n + 2) { opacity: 1; }
.timeouts div.timeouts1:nth-child(-n + 2) { opacity: 1; }
.timeouts1 { height: 0.6em; border-radius: 0.3em; background-color: var(--timeouts1-color, #000000); border: var(--timeouts-border, 1px) solid var(--timeouts-border-color, #ffffff); width: 20%; display: inline-block; margin: 0.4em auto; position: relative; opacity: 0.2; }
.timeouts2 { height: 0.6em; border-radius: 0.3em; background-color: var(--timeouts2-color, #000000); border: var(--timeouts-border, 1px) solid var(--timeouts-border-color, #ffffff); width: 20%; display: inline-block; margin: 0.4em auto; position: relative; opacity: 0.2; }
.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-first { opacity: var(--on-first-opacity, 1); display: inline-block; }
.on-second { opacity: var(--on-second-opacity, 1); display: inline-block; }
.on-third { opacity: var(--on-third-opacity, 1); display: inline-block; }
.on-base { opacity: var(--on-base-opacity, 1); display: inline-block; }
.pitcher { opacity: 0.0; display: inline-block; }
.in-series-info { display: var(--series-summary-display, none); font-size: 1.2em; text-align: center; margin: 4px; }
.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; }
Expand All @@ -38,28 +35,25 @@ export const cardStyles = css`
.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-text { display: var(--bar-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; }
.bar1-length { width: var(--bar1-length, 100%); background-color: var(--bar1-color, #000000); height: 0.8em; border-radius: 0.4em 0 0 0.4em; border: var(--bar1-border, 1px) solid var(--bar1-border-color, #ffffff); border-right: 0; transition: all 1s ease-out; }
.bar2-length { width: var(--bar2-length, 100%); background-color: var(--bar2-color, #ffffff); height: 0.8em; border-radius: 0 0.4em 0.4em 0; border: var(--bar2-border, 1px) solid var(--bar2-border-color, #ffffff); border-left: 0; transition: all 1s ease-out; }
.bar { display: var(--bar-wrapper-display, flex); align-items: center; }
.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; }
.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; }
.in-series-info { display: var(--series-summary-display, none); font-size: 1.2em; text-align: center; margin: 4px; }
.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: var(--series-summary-display, none); 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; }
.pre-series-info { display: var(--series-summary-display, none); font-size: 1.2em; text-align: center; margin: 4px; }
.score { font-size: var(--score_size, 3em); opacity: var(--score_opacity, 1); text-align: center; line-height: 1; }
.post-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; }
`;

0 comments on commit a174e6f

Please sign in to comment.