diff --git a/dist/scoreboard.js b/dist/scoreboard.js index 49906d0..c7c343a 100644 --- a/dist/scoreboard.js +++ b/dist/scoreboard.js @@ -298,7 +298,22 @@ `.scoreboard-container .scoreboard-score-cell { color: var(--scoreIndicatorNumberColor); }`, - `.scoreboard-container :is(.blank-end-cell,.end-label-cell,.total-label-cell,.team-label-cell) { + `.scoreboard-container .blank-end-cell { + text-transform: uppercase; + color: var(--foregroundColor); + font-size: var(--textFontSize); + }`, + `.scoreboard-container .end-label-cell { + text-transform: uppercase; + color: var(--foregroundColor); + font-size: var(--textFontSize); + }`, + `.scoreboard-container .total-label-cell { + text-transform: uppercase; + color: var(--foregroundColor); + font-size: var(--textFontSize); + }`, + `.scoreboard-container .team-label-cell { text-transform: uppercase; color: var(--foregroundColor); font-size: var(--textFontSize); @@ -335,7 +350,13 @@ `.scoreboard-container .team-name { padding: 8px; }`, - `.scoreboard-container :is(.team-name,.blank-end-cell) span { + `.scoreboard-container .team-name span { + font-size: var(--textFontSize); + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + }`, + `.scoreboard-container blank-end-cell span { font-size: var(--textFontSize); overflow: hidden; text-overflow: ellipsis; @@ -681,4 +702,4 @@ Object.defineProperty(exports, '__esModule', { value: true }); -}))); +}))); \ No newline at end of file diff --git a/dist/scoreboard.min.js b/dist/scoreboard.min.js index 6957972..de131cf 100644 --- a/dist/scoreboard.min.js +++ b/dist/scoreboard.min.js @@ -1 +1 @@ -!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports):"function"==typeof define&&define.amd?define(["exports"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self).scoreboard={})}(this,(function(e){"use strict";function t(e){return e.map(((e,t)=>[t,e]))}const o={team1Color:"rgb(255, 134, 134)",team2Color:"rgb(255, 255, 74)",team3Color:"rgb(114, 186, 255)",backgroundColor:"#fff",foregroundColor:"#000",scoreIndicatorNumberColor:"#f00",flashBackgroundColor:"rgb(255, 233, 37)",scoresFontSize:"max(3vw, 24px)",textFontSize:"max(1.6vw, 16px)",borderSize:"3px",borderColor:"var(--foregroundColor)",gridLineSize:"1px",borderRadius:"11px",fontFamily:'-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif',fontWeight:"bold"};function n(e){return{team1:e.map((e=>e.team1Points)).reduce(((e,t)=>e+t),0),team2:e.map((e=>e.team2Points)).reduce(((e,t)=>e+t),0)}}function r(e,o,n=!1){if(n){let n=-1,r=o;for(const[o,a]of t(e))0===a.team1Points&&0===a.team2Points||(n=o,r=a.team1Points>a.team2Points?0:1);const a=(e.length-n+1)%2==1;if(void 0===r)return;return a?r:(r+1)%2}{const t=e.filter((e=>0!==e.team1Points||0!==e.team2Points));return 0===t.length?o:0===t.reverse()[0].team1Points?0:1}}function a(e){let o=0,r=0;const a=n(e),c=Math.max(12,a.team1,a.team2),s=new Array(c).fill(void 0),l=new Array(c).fill(void 0),d=new Set;for(const[n,a]of t(e)){const e=n+1;if(a.team1Points>0)o+=a.team1Points,s[o-1]=e;else if(a.team2Points>0)r+=a.team2Points,l[r-1]=e;else{if(0!==a.team1Points||0!==a.team2Points)throw new Error("Only one team can score in a given end.");d.add(e)}}return{team1Line:s,team2Line:l,blanks:d}}let c=!1;function s(e,t){return e.type===t}e.gameStateReducer=function(e,t){const o=JSON.parse(JSON.stringify(e));return s(t,"score")?o.ends.push({team1Points:0===t.payload.team?t.payload.points:0,team2Points:1===t.payload.team?t.payload.points:0}):s(t,"noop"),o},e.getClubStyleCardIndexes=a,e.getEndsFromClubStyle=function(e,t="lenient"){if(e.team1Line.length!==e.team2Line.length)throw new Error("Lines must be of the same length.");const{team1Line:o,team2Line:n}=e,r=new Set(e.blanks),a={},c=[];for(let e=0;e0&&"strict"===t)throw new Error("Encountered duplicate end cards.");let s=Math.max(...Object.keys(a).map(Number),0);for(let e=1;e<=s;++e)if(void 0===a[e]){if("strict"===t)throw new Error(`Missing card for end ${e}.`);if("lenient"===t){const t=c.shift();t?a[e]={points:t.points,team:t.team}:(r.add(e),a[e]={points:0,team:0})}}for(const e of c)s++,a[s]={points:e.points,team:e.team};const l=[];let d=0,i=0;for(let e=1;e<=s;++e){let r=0,c=0;if(0!==a[e].points){if(0===a[e].team){if(r=a[e].points-d,r>8){if("strict"===t)throw new Error("Invalid score reported for Team 1 (more than 8 points).");"lenient"===t&&(r=0)}if(r<0){if("strict"===t)throw new Error("Encountered out of order end cards.");"lenient"===t&&(a[e].points+=o.length,r=a[e].points-d)}d=a[e].points}if(1===a[e].team){if(c=a[e].points-i,c>8){if("strict"===t)throw new Error("Invalid score reported for Team 2 (more than 8 points).");"lenient"===t&&(c=0)}if(c<0){if("strict"===t)throw new Error("Encountered out of order end cards.");"lenient"===t&&(a[e].points+=n.length,c=a[e].points-i)}i=a[e].points}}l.push({team1Points:r,team2Points:c})}return l},e.getHammerTeam=r,e.getScore=n,e.render=function(e,t,s={}){var l,d,i,m,b,p;const{variant:u="baseball",sheetName:f="",style:v=o,showTenEnds:g=!1,team1:h={},team2:E={}}=s;!function(e=[]){if(c)return;c=!0;const t=document.createElement("style");document.head.append(t);const o=t.sheet,n=[".scoreboard-container {\n box-sizing: border-box;\n font-family: var(--fontFamily);\n display: grid;\n grid-template-rows: 1fr 1fr 1fr;\n border: var(--borderSize) solid var(--borderColor);\n font-size: var(--scoresFontSize);\n font-weight: var(--fontWeight);\n background-color: var(--foregroundColor);\n gap: var(--gridLineSize);\n border-radius: var(--borderRadius);\n }",".scoreboard-container * {\n box-sizing: inherit;\n }",".scoreboard-container .scoreboard-score-cell {\n color: var(--scoreIndicatorNumberColor);\n }",".scoreboard-container :is(.blank-end-cell,.end-label-cell,.total-label-cell,.team-label-cell) {\n text-transform: uppercase;\n color: var(--foregroundColor);\n font-size: var(--textFontSize);\n }",".scoreboard-container .scoreboard-cell {\n background-color: var(--backgroundColor);\n display: flex;\n justify-content: space-evenly;\n align-items: center;\n min-width: 0;\n transition: background-color 3s ease-out 3s;\n }",".scoreboard-container .flash {\n background-color: var(--flashBackgroundColor) !important;\n }",".scoreboard-container .scoreboard-cell.blank-cell {\n word-spacing: 0.5em;\n }",".scoreboard-container .scoreboard-cell.tl {\n border-top-left-radius: calc(var(--borderRadius) - var(--borderSize));\n }",".scoreboard-container .scoreboard-cell.tr {\n border-top-right-radius: calc(var(--borderRadius) - var(--borderSize));\n }",".scoreboard-container .scoreboard-cell.bl {\n border-bottom-left-radius: calc(var(--borderRadius) - var(--borderSize));\n }",".scoreboard-container .scoreboard-cell.br {\n border-bottom-right-radius: calc(var(--borderRadius) - var(--borderSize));\n }",".scoreboard-container .scoreboard-end-label-cell {\n font-size: var(--textFontSize);\n }",".scoreboard-container .team-name {\n padding: 8px;\n }",".scoreboard-container :is(.team-name,.blank-end-cell) span {\n font-size: var(--textFontSize);\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n }",".scoreboard-container .team-name.team-1 {\n background-color: var(--team1Color);\n }",".scoreboard-container .team-name.team-2 {\n background-color: var(--team2Color);\n }",".scoreboard-container .logical-container {\n display: contents;\n }"].concat(e);for(const e of n)null==o||o.insertRule(e)}(s.additionalCssRules);const C=document.createElement("div");C.classList.add("scoreboard-container");const x=(String(1e7)+-1e3+-4e3+-8e3+-1e11).replace(/[018]/g,(e=>(parseInt(e,10)^crypto.getRandomValues(new Uint8Array(1))[0]&15>>parseInt(e,10)/4).toString(16)));C.setAttribute("data-scoreboard-id",x),C.setAttribute("data-scoreboard-variant",u);const L=n(t.ends);r(t.ends,t.LSFE,s.doubles);const S=Object.assign(Object.assign({},o),v);for(const[e,t]of Object.entries(S))C.style.setProperty(`--${e}`,t);if("club"===u){const e=Math.max(12,L.team1,L.team2)+(void 0!==t.LSFE?1:0);C.style.gridTemplateColumns=`3fr repeat(${e}, 1fr) 2fr`;const o=a(t.ends),n=Array.from(o.blanks).sort(),r=n.filter(((e,t)=>t%2==0)),c=n.filter(((e,t)=>t%2==1)),s=document.createElement("div");s.classList.add("team-name","team-1","scoreboard-cell","tl");const i=document.createElement("span"),m=null!==(l=h.name)&&void 0!==l?l:"Team 1";if(i.setAttribute("title",m),i.textContent=m,s.append(i),h.color&&(s.style.backgroundColor=h.color),C.append(s),void 0!==t.LSFE){const e=document.createElement("div");e.classList.add("scoreboard-cell","lsfe-indicator-cell"),0===t.LSFE&&(e.textContent="*"),C.append(e)}for(const e of o.team1Line){const t=document.createElement("div");t.classList.add("scoreboard-cell","scoreboard-end-cell"),void 0!==e&&(t.textContent=String(e)),C.append(t)}const b=document.createElement("div");b.classList.add("scoreboard-cell","scoreboard-end-cell","tr");for(const e of r){const t=document.createElement("div");t.textContent=String(e),b.append(t)}C.append(b);const p=document.createElement("div");p.classList.add("scoreboard-cell","sheet-name"),p.textContent=f,C.append(p);for(let o=0;o0&&(e.textContent=String(n)),C.append(e)}const u=document.createElement("div");u.classList.add("scoreboard-cell","blank-end-cell");const v=document.createElement("span");v.textContent="Blank",u.append(v),C.append(u);const g=document.createElement("div");g.classList.add("team-name","team-2","scoreboard-cell","bl");const x=document.createElement("span"),S=null!==(d=E.name)&&void 0!==d?d:"Team 2";if(x.setAttribute("title",S),x.textContent=S,g.append(x),E.color&&(g.style.backgroundColor=E.color),C.append(g),void 0!==t.LSFE){const e=document.createElement("div");e.classList.add("scoreboard-cell","lsfe-indicator-cell"),1===t.LSFE&&(e.textContent="*"),C.append(e)}for(const e of o.team2Line){const t=document.createElement("div");t.classList.add("scoreboard-cell","scoreboard-end-cell"),void 0!==e&&(t.textContent=String(e)),C.append(t)}const y=document.createElement("div");y.classList.add("scoreboard-cell","scoreboard-end-cell","br");for(const e of c){const t=document.createElement("div");t.textContent=String(e),y.append(t)}C.append(y)}else if("baseball"===u){const e=Math.max(g?10:8,t.ends.length),o=e+(t.LSFE?1:0);C.style.gridTemplateColumns=`3fr repeat(${o}, 1fr) 2fr`;const n=document.createElement("div");if(n.classList.add("scoreboard-cell","team-label-cell","tl"),n.textContent="Team",C.append(n),t.LSFE){const e=document.createElement("div");e.classList.add("scoreboard-cell"),C.append(e)}for(let t=0;t0){if(e.children.length>1||null==e.children[0].getAttribute("data-scoreboard-id"))throw new Error("Container element must be empty or contain one scoreboard.");const t=e.children[0];if(t.getAttribute("data-scoreboard-variant")===u&&t.children.length===C.children.length)for(let e=0;e{for(const t of e.querySelectorAll(".flash"))t.classList.remove("flash")}),100)},Object.defineProperty(e,"__esModule",{value:!0})})); +!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports):"function"==typeof define&&define.amd?define(["exports"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self).scoreboard={})}(this,function(e){"use strict";function t(e){return e.map((e,t)=>[t,e])}const o={team1Color:"rgb(255, 134, 134)",team2Color:"rgb(255, 255, 74)",team3Color:"rgb(114, 186, 255)",backgroundColor:"#fff",foregroundColor:"#000",scoreIndicatorNumberColor:"#f00",flashBackgroundColor:"rgb(255, 233, 37)",scoresFontSize:"max(3vw, 24px)",textFontSize:"max(1.6vw, 16px)",borderSize:"3px",borderColor:"var(--foregroundColor)",gridLineSize:"1px",borderRadius:"11px",fontFamily:'-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif',fontWeight:"bold"};function n(e){return{team1:e.map(e=>e.team1Points).reduce((e,t)=>e+t,0),team2:e.map(e=>e.team2Points).reduce((e,t)=>e+t,0)}}function r(e,o,n=!1){if(n){let n=-1,r=o;for(const[o,a]of t(e))0===a.team1Points&&0===a.team2Points||(n=o,r=a.team1Points>a.team2Points?0:1);const a=(e.length-n+1)%2==1;if(void 0===r)return;return a?r:(r+1)%2}{const t=e.filter(e=>0!==e.team1Points||0!==e.team2Points);return 0===t.length?o:0===t.reverse()[0].team1Points?0:1}}function a(e){let o=0,r=0;const a=n(e),c=Math.max(12,a.team1,a.team2),s=new Array(c).fill(void 0),l=new Array(c).fill(void 0),d=new Set;for(const[n,a]of t(e)){const e=n+1;if(a.team1Points>0)s[(o+=a.team1Points)-1]=e;else if(a.team2Points>0)l[(r+=a.team2Points)-1]=e;else{if(0!==a.team1Points||0!==a.team2Points)throw new Error("Only one team can score in a given end.");d.add(e)}}return{team1Line:s,team2Line:l,blanks:d}}let c=!1;function s(e,t){return e.type===t}e.gameStateReducer=function(e,t){const o=JSON.parse(JSON.stringify(e));return s(t,"score")?o.ends.push({team1Points:0===t.payload.team?t.payload.points:0,team2Points:1===t.payload.team?t.payload.points:0}):s(t,"noop"),o},e.getClubStyleCardIndexes=a,e.getEndsFromClubStyle=function(e,t="lenient"){if(e.team1Line.length!==e.team2Line.length)throw new Error("Lines must be of the same length.");const{team1Line:o,team2Line:n}=e,r=new Set(e.blanks),a={},c=[];for(let e=0;e0&&"strict"===t)throw new Error("Encountered duplicate end cards.");let s=Math.max(...Object.keys(a).map(Number),0);for(let e=1;e<=s;++e)if(void 0===a[e]){if("strict"===t)throw new Error(`Missing card for end ${e}.`);if("lenient"===t){const t=c.shift();t?a[e]={points:t.points,team:t.team}:(r.add(e),a[e]={points:0,team:0})}}for(const e of c)a[++s]={points:e.points,team:e.team};const l=[];let d=0,i=0;for(let e=1;e<=s;++e){let r=0,c=0;if(0!==a[e].points){if(0===a[e].team){if((r=a[e].points-d)>8){if("strict"===t)throw new Error("Invalid score reported for Team 1 (more than 8 points).");"lenient"===t&&(r=0)}if(r<0){if("strict"===t)throw new Error("Encountered out of order end cards.");"lenient"===t&&(a[e].points+=o.length,r=a[e].points-d)}d=a[e].points}if(1===a[e].team){if((c=a[e].points-i)>8){if("strict"===t)throw new Error("Invalid score reported for Team 2 (more than 8 points).");"lenient"===t&&(c=0)}if(c<0){if("strict"===t)throw new Error("Encountered out of order end cards.");"lenient"===t&&(a[e].points+=n.length,c=a[e].points-i)}i=a[e].points}}l.push({team1Points:r,team2Points:c})}return l},e.getHammerTeam=r,e.getScore=n,e.render=function(e,t,s={}){var l,d,i,m,p,b;const{variant:u="baseball",sheetName:f="",style:v=o,showTenEnds:g=!1,team1:h={},team2:E={}}=s;!function(e=[]){if(c)return;c=!0;const t=document.createElement("style");document.head.append(t);const o=t.sheet,n=[".scoreboard-container {\n box-sizing: border-box;\n font-family: var(--fontFamily);\n display: grid;\n grid-template-rows: 1fr 1fr 1fr;\n border: var(--borderSize) solid var(--borderColor);\n font-size: var(--scoresFontSize);\n font-weight: var(--fontWeight);\n background-color: var(--foregroundColor);\n gap: var(--gridLineSize);\n border-radius: var(--borderRadius);\n }",".scoreboard-container * {\n box-sizing: inherit;\n }",".scoreboard-container .scoreboard-score-cell {\n color: var(--scoreIndicatorNumberColor);\n }",".scoreboard-container .blank-end-cell {\n text-transform: uppercase;\n color: var(--foregroundColor);\n font-size: var(--textFontSize);\n }",".scoreboard-container .end-label-cell {\n text-transform: uppercase;\n color: var(--foregroundColor);\n font-size: var(--textFontSize);\n }",".scoreboard-container .total-label-cell {\n text-transform: uppercase;\n color: var(--foregroundColor);\n font-size: var(--textFontSize);\n }",".scoreboard-container .team-label-cell {\n text-transform: uppercase;\n color: var(--foregroundColor);\n font-size: var(--textFontSize);\n }",".scoreboard-container .scoreboard-cell {\n background-color: var(--backgroundColor);\n display: flex;\n justify-content: space-evenly;\n align-items: center;\n min-width: 0;\n transition: background-color 3s ease-out 3s;\n }",".scoreboard-container .flash {\n background-color: var(--flashBackgroundColor) !important;\n }",".scoreboard-container .scoreboard-cell.blank-cell {\n word-spacing: 0.5em;\n }",".scoreboard-container .scoreboard-cell.tl {\n border-top-left-radius: calc(var(--borderRadius) - var(--borderSize));\n }",".scoreboard-container .scoreboard-cell.tr {\n border-top-right-radius: calc(var(--borderRadius) - var(--borderSize));\n }",".scoreboard-container .scoreboard-cell.bl {\n border-bottom-left-radius: calc(var(--borderRadius) - var(--borderSize));\n }",".scoreboard-container .scoreboard-cell.br {\n border-bottom-right-radius: calc(var(--borderRadius) - var(--borderSize));\n }",".scoreboard-container .scoreboard-end-label-cell {\n font-size: var(--textFontSize);\n }",".scoreboard-container .team-name {\n padding: 8px;\n }",".scoreboard-container .team-name span {\n font-size: var(--textFontSize);\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n }",".scoreboard-container blank-end-cell span {\n font-size: var(--textFontSize);\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n }",".scoreboard-container .team-name.team-1 {\n background-color: var(--team1Color);\n }",".scoreboard-container .team-name.team-2 {\n background-color: var(--team2Color);\n }",".scoreboard-container .logical-container {\n display: contents;\n }"].concat(e);for(const e of n)null==o||o.insertRule(e)}(s.additionalCssRules);const C=document.createElement("div");C.classList.add("scoreboard-container");const x=(String(1e7)+-1e3+-4e3+-8e3+-1e11).replace(/[018]/g,e=>(parseInt(e,10)^crypto.getRandomValues(new Uint8Array(1))[0]&15>>parseInt(e,10)/4).toString(16));C.setAttribute("data-scoreboard-id",x),C.setAttribute("data-scoreboard-variant",u);const S=n(t.ends);r(t.ends,t.LSFE,s.doubles);const L=Object.assign(Object.assign({},o),v);for(const[e,t]of Object.entries(L))C.style.setProperty(`--${e}`,t);if("club"===u){const e=Math.max(12,S.team1,S.team2)+(void 0!==t.LSFE?1:0);C.style.gridTemplateColumns=`3fr repeat(${e}, 1fr) 2fr`;const o=a(t.ends),n=Array.from(o.blanks).sort(),r=n.filter((e,t)=>t%2==0),c=n.filter((e,t)=>t%2==1),s=document.createElement("div");s.classList.add("team-name","team-1","scoreboard-cell","tl");const i=document.createElement("span"),m=null!==(l=h.name)&&void 0!==l?l:"Team 1";if(i.setAttribute("title",m),i.textContent=m,s.append(i),h.color&&(s.style.backgroundColor=h.color),C.append(s),void 0!==t.LSFE){const e=document.createElement("div");e.classList.add("scoreboard-cell","lsfe-indicator-cell"),0===t.LSFE&&(e.textContent="*"),C.append(e)}for(const e of o.team1Line){const t=document.createElement("div");t.classList.add("scoreboard-cell","scoreboard-end-cell"),void 0!==e&&(t.textContent=String(e)),C.append(t)}const p=document.createElement("div");p.classList.add("scoreboard-cell","scoreboard-end-cell","tr");for(const e of r){const t=document.createElement("div");t.textContent=String(e),p.append(t)}C.append(p);const b=document.createElement("div");b.classList.add("scoreboard-cell","sheet-name"),b.textContent=f,C.append(b);for(let o=0;o0&&(e.textContent=String(n)),C.append(e)}const u=document.createElement("div");u.classList.add("scoreboard-cell","blank-end-cell");const v=document.createElement("span");v.textContent="Blank",u.append(v),C.append(u);const g=document.createElement("div");g.classList.add("team-name","team-2","scoreboard-cell","bl");const x=document.createElement("span"),L=null!==(d=E.name)&&void 0!==d?d:"Team 2";if(x.setAttribute("title",L),x.textContent=L,g.append(x),E.color&&(g.style.backgroundColor=E.color),C.append(g),void 0!==t.LSFE){const e=document.createElement("div");e.classList.add("scoreboard-cell","lsfe-indicator-cell"),1===t.LSFE&&(e.textContent="*"),C.append(e)}for(const e of o.team2Line){const t=document.createElement("div");t.classList.add("scoreboard-cell","scoreboard-end-cell"),void 0!==e&&(t.textContent=String(e)),C.append(t)}const y=document.createElement("div");y.classList.add("scoreboard-cell","scoreboard-end-cell","br");for(const e of c){const t=document.createElement("div");t.textContent=String(e),y.append(t)}C.append(y)}else if("baseball"===u){const e=Math.max(g?10:8,t.ends.length),o=e+(t.LSFE?1:0);C.style.gridTemplateColumns=`3fr repeat(${o}, 1fr) 2fr`;const n=document.createElement("div");if(n.classList.add("scoreboard-cell","team-label-cell","tl"),n.textContent="Team",C.append(n),t.LSFE){const e=document.createElement("div");e.classList.add("scoreboard-cell"),C.append(e)}for(let t=0;t0){if(e.children.length>1||null==e.children[0].getAttribute("data-scoreboard-id"))throw new Error("Container element must be empty or contain one scoreboard.");const t=e.children[0];if(t.getAttribute("data-scoreboard-variant")===u&&t.children.length===C.children.length)for(let e=0;e{for(const t of e.querySelectorAll(".flash"))t.classList.remove("flash")},100)},Object.defineProperty(e,"__esModule",{value:!0})}); \ No newline at end of file diff --git a/index.html b/index.html index 6de44b1..938a3f5 100644 --- a/index.html +++ b/index.html @@ -116,7 +116,7 @@ team2, variant: "club", sheetName: "B", - additionalCssRules: [`:is(.scoreboard-end-cell,.scoreboard-end-label-cell):nth-child(odd) {background-color: #ddd !important;}`], + additionalCssRules: [`.scoreboard-end-label-cell:nth-child(odd) {background-color: #ddd !important;}`,`.scoreboard-end-cell:nth-child(odd) {background-color: #ddd !important;}`], style: { //team2Color: "rgb(114, 186, 255)", }, diff --git a/scoreboard.ts b/scoreboard.ts index 1bef5d0..1630067 100644 --- a/scoreboard.ts +++ b/scoreboard.ts @@ -476,75 +476,96 @@ function ensureStyles(additionalCssRules: string[] = []) { const rules = [ `.scoreboard-container { - box-sizing: border-box; - font-family: var(--fontFamily); - display: grid; - grid-template-rows: 1fr 1fr 1fr; - border: var(--borderSize) solid var(--borderColor); - font-size: var(--scoresFontSize); - font-weight: var(--fontWeight); - background-color: var(--foregroundColor); - gap: var(--gridLineSize); - border-radius: var(--borderRadius); - }`, + box-sizing: border-box; + font-family: var(--fontFamily); + display: grid; + grid-template-rows: 1fr 1fr 1fr; + border: var(--borderSize) solid var(--borderColor); + font-size: var(--scoresFontSize); + font-weight: var(--fontWeight); + background-color: var(--foregroundColor); + gap: var(--gridLineSize); + border-radius: var(--borderRadius); + }`, `.scoreboard-container * { - box-sizing: inherit; - }`, + box-sizing: inherit; + }`, `.scoreboard-container .scoreboard-score-cell { - color: var(--scoreIndicatorNumberColor); - }`, - `.scoreboard-container :is(.blank-end-cell,.end-label-cell,.total-label-cell,.team-label-cell) { - text-transform: uppercase; - color: var(--foregroundColor); - font-size: var(--textFontSize); - }`, + color: var(--scoreIndicatorNumberColor); + }`, + `.scoreboard-container .blank-end-cell { + text-transform: uppercase; + color: var(--foregroundColor); + font-size: var(--textFontSize); + }`, + `.scoreboard-container .end-label-cell { + text-transform: uppercase; + color: var(--foregroundColor); + font-size: var(--textFontSize); + }`, + `.scoreboard-container .total-label-cell { + text-transform: uppercase; + color: var(--foregroundColor); + font-size: var(--textFontSize); + }`, + `.scoreboard-container .team-label-cell { + text-transform: uppercase; + color: var(--foregroundColor); + font-size: var(--textFontSize); + }`, `.scoreboard-container .scoreboard-cell { - background-color: var(--backgroundColor); - display: flex; - justify-content: space-evenly; - align-items: center; - min-width: 0; - transition: background-color 3s ease-out 3s; - }`, + background-color: var(--backgroundColor); + display: flex; + justify-content: space-evenly; + align-items: center; + min-width: 0; + transition: background-color 3s ease-out 3s; + }`, `.scoreboard-container .flash { - background-color: var(--flashBackgroundColor) !important; - }`, + background-color: var(--flashBackgroundColor) !important; + }`, `.scoreboard-container .scoreboard-cell.blank-cell { - word-spacing: 0.5em; - }`, + word-spacing: 0.5em; + }`, `.scoreboard-container .scoreboard-cell.tl { - border-top-left-radius: calc(var(--borderRadius) - var(--borderSize)); - }`, + border-top-left-radius: calc(var(--borderRadius) - var(--borderSize)); + }`, `.scoreboard-container .scoreboard-cell.tr { - border-top-right-radius: calc(var(--borderRadius) - var(--borderSize)); - }`, + border-top-right-radius: calc(var(--borderRadius) - var(--borderSize)); + }`, `.scoreboard-container .scoreboard-cell.bl { - border-bottom-left-radius: calc(var(--borderRadius) - var(--borderSize)); - }`, + border-bottom-left-radius: calc(var(--borderRadius) - var(--borderSize)); + }`, `.scoreboard-container .scoreboard-cell.br { - border-bottom-right-radius: calc(var(--borderRadius) - var(--borderSize)); - }`, + border-bottom-right-radius: calc(var(--borderRadius) - var(--borderSize)); + }`, `.scoreboard-container .scoreboard-end-label-cell { - font-size: var(--textFontSize); - }`, + font-size: var(--textFontSize); + }`, `.scoreboard-container .team-name { - padding: 8px; - }`, - `.scoreboard-container :is(.team-name,.blank-end-cell) span { - font-size: var(--textFontSize); - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; - }`, + padding: 8px; + }`, + `.scoreboard-container .team-name span { + font-size: var(--textFontSize); + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + }`, + `.scoreboard-container blank-end-cell span { + font-size: var(--textFontSize); + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + }`, `.scoreboard-container .team-name.team-1 { - background-color: var(--team1Color); - }`, + background-color: var(--team1Color); + }`, `.scoreboard-container .team-name.team-2 { - background-color: var(--team2Color); - }`, + background-color: var(--team2Color); + }`, `.scoreboard-container .logical-container { - display: contents; - }`, + display: contents; + }`, ].concat(additionalCssRules); for (const rule of rules) { styleSheet?.insertRule(rule);