0.0.4

gazhay · Mar 23, 2024 · 604bbf9 · 604bbf9
1 parent df2fd6d
commit 604bbf9
Show file tree

Hide file tree

Showing 5 changed files with 97 additions and 25 deletions.
diff --git a/.github/workflows/main.yml b/.github/workflows/main.yml
@@ -0,0 +1,8 @@
+- name: Upload a Build Artifact
+  uses: actions/[email protected]
+  with:
+    # Artifact name
+    name: # optional, default is artifact
+    # A file, directory or wildcard pattern that describes what to upload
+    path: 
+    # The desired behavior if no files are found using the provided path.
diff --git a/README.md b/README.md
@@ -1,6 +1,13 @@
 sauce4zwift Club Ladder Live Score
 ========
 
+Changes v0.0.4 - March 2024
+---------------------------
+
+* Make the teams use club colours. (This may be horrible for some teams)
+* added experimental "gap" feature - H key toggles on off **untested**
+* added a bit of testing for "finished" state.
+
 Changelog December 2023
 -----------------------
 

diff --git a/manifest.json b/manifest.json
@@ -1,26 +1,26 @@
 {
     "manifest_version": 1,
-    "name": "Club Ladder Live",
-    "description": "Attempt to live score matches",
-    "author": "Gareth Hay",
-    "website_url": "https://ladder.cycleracing.club",
-    "version": "0.0.3",
-    "content_js": [],
-    "content_css": [],
-    "web_root": "pages",
-    "windows": [{
-        "file": "pages/mod.html",
-        "id": "ladder-live",
-        "name": "Club Ladder Live",
-        "description": "Live score for ladder events",
+    "name"            : "Club Ladder Live",
+    "description"     : "Proof-of-concept live score",
+    "author"          : "Gareth Hay",
+    "website_url"     : "https://ladder.cycleracing.club",
+    "version"         : "0.0.4",
+    "content_js"      : [],
+    "content_css"     : [],
+    "web_root"        : "pages",
+    "windows"         : [{
+        "file"          : "pages/mod.html",
+        "id"            : "ladder-live",
+        "name"          : "Club Ladder Live",
+        "description"   : "Live score for ladder events",
         "always_visible": true,
-        "overlay": true,
-        "frame": false,
+        "overlay"       : true,
+        "frame"         : false,
         "default_bounds": {
-            "width": 800,
+            "width" : 800,
             "height": 660,
-            "x": 100,
-            "y": -100
+            "x"     : 100,
+            "y"     : -100
         }
     }]
 }
diff --git a/pages/mod.html b/pages/mod.html
@@ -6,6 +6,11 @@
         <script src="src/mod.mjs" type="module"></script>
         <link rel="stylesheet" href="css/ladder-ripped.css">
         <style media="screen">
+        :root{
+            --winnercolor : rgba(237, 93, 36,1);
+            --homeText : black;
+            --awayText : black;
+        }
             html{
                 width         : 800px;
                 height        : 660px;
@@ -113,8 +118,16 @@
                 justify-content: center;
                 align-items: center;
             }
-            .homeScore{ margin-right : 0; background : var(--ladder-secondary-bg); }
-            .awayScore{ margin-left  : 0; background : var(--ladder-tertiary-bg); }
+            .homeScore{
+                margin-right : 0;
+                background : var(--ladder-secondary-bg);
+                color : var(--homeText);
+            }
+            .awayScore{
+                margin-left  : 0;
+                background : var(--ladder-tertiary-bg);
+                color : var(--awayText);
+            }
             .topBar section.homeScore{ font-size: 40px; }
             .topBar section.awayScore{ font-size: 40px; }
 
@@ -189,10 +202,11 @@
                 display:none;
             }
             .winning{
-                color : var(--ladder-primary);
+                color : var(--winnercolor);
+                font-weight : bold;
+                -webkit-text-stroke: 1px rgba(0,0,0,0.3);
             }
             .losing{
-                color : var(ladder-text-bg);
             }
             .move{ -webkit-app-region: drag; }
 
@@ -216,6 +230,12 @@
                 opacity : 0.5;
             }
 
+            .gapped{
+                border-top : 1px solid rgba(237, 194, 85,0.6);
+            }
+            .finished{
+                border: 2px solid rgba(220,220,220,1);
+            }
         </style>
     </head>
     <body class="move">

diff --git a/pages/src/mod.mjs b/pages/src/mod.mjs
@@ -6,6 +6,9 @@ doc.classList.remove("frame");
 const DEBUG       = "";//"debug";
 var   USER        = 0;
 const SERVER      = (DEBUG!="")?"http://arwen.lan:5000":"https://ladder.cycleracing.club";
+var   GAPPY       = false;
+
+console.log("ClubLadder mod ",DEBUG, SERVER);
 
 var INTERESTEDIN  = [];
 
@@ -17,6 +20,12 @@ let riderCache    = [];
 let riderMaxes    = {};
 let finishers     = [];
 
+const contrastColor       = (incol,darkColor="#000",lightColor="#fff")=>{
+    const threshold = 186;
+    if (incol.startsWith("#")) incol = hexToRgb(incol);
+    return (((incol[0] * 0.299) + (incol[1] * 0.587) + (incol[2] * 0.114)) > threshold) ? darkColor : lightColor;
+}
+
 var positionsCreated = 0;
 const riderHTML = (riderId,isHome) =>{
     // if (positionsCreated>=10) return "";
@@ -32,7 +41,7 @@ const riderHTML = (riderId,isHome) =>{
     return output;
 }
 async function fetchFromLadder(){
-    if (USER==0) return null;
+    if (USER==0 && DEBUG=="") return null;
     console.log("Setting up",`${SERVER}/whatFixtureShouldIBeIn/${USER}${DEBUG}`);
     let myLadderData = await fetch(`${SERVER}/whatFixtureShouldIBeIn/${USER}${DEBUG}`).then(response=>response.json());
     if (!myLadderData || myLadderData.length==0){
@@ -58,8 +67,19 @@ async function fetchFromLadder(){
         common.subscribe(`athlete/${rider}`, onAthleteData);
     }
     setupIndividuals(myLadderData, INTERESTEDIN);
+
+    setupClubColors(myLadderData);
+
     return true;
 }
+
+function setupClubColors( data ){
+    if (data?.homeClub?.color1     ) document.documentElement.style.setProperty("--ladder-secondary-bg", data.homeClub.color1);
+    if (data?.homeClub?.textColor1 ) document.documentElement.style.setProperty("--homeText", data.homeClub.textColor1);
+    if (data?.awayClub?.color1     ) document.documentElement.style.setProperty("--ladder-tertiary-bg" , data.awayClub.color1);
+    if (data?.homeClub?.textColor1 ) document.documentElement.style.setProperty("--awayText" , data.awayClub.textColor1);
+}
+
 let ts = 0;
 function onAthleteData(data){
     data.staleness = new Date();
@@ -115,6 +135,7 @@ function renderData(){
     let homeScore = 0;
     let awayScore = 0;
     let position  = 0;
+    let lastDist  = 0;
     riderCache.sort( (a,b)=>{
         let aVal = a.state.eventDistance;
         let bVal = b.state.eventDistance;
@@ -146,6 +167,19 @@ function renderData(){
         } else {
             domForRider.classList.remove("d-none");
         }
+        if (rider.finsihed){
+            domForRider.classList.add("finsihed");
+        } else {
+            domForRider.classList.remove("finsihed");
+        }
+        if (GAPPY){
+            if (lastDist>0 && lastDist-rider.state.eventDistance > 500){
+                domForRider.classList.add("gapped");
+            } else {
+                domForRider.classList.remove("gapped");
+            }
+            lastDist = rider.state.eventDistance;
+        }
     }
     document.querySelectorAll(".rider").forEach(e=>{
         if (e.querySelector(".position").textContent=="-1"){
@@ -158,8 +192,8 @@ function renderData(){
             if (e.classList.contains("awayRider")) awayScore += ~~(e.querySelector(".score").textContent);
         }
     });
-    let homeScoreDom = document.querySelector(".homeScore");
-    let awayScoreDom = document.querySelector(".awayScore");
+    let homeScoreDom = document.querySelector(".SplashHomeTeam");
+    let awayScoreDom = document.querySelector(".SplashAwayTeam");
 
     awayScoreDom.textContent = awayScore;
     homeScoreDom.textContent = homeScore;
@@ -231,6 +265,9 @@ window.addEventListener('keydown', (e)=>{
         backgroundOpacity -= 0.10;
         backgroundOpacity = Math.min(1,backgroundOpacity);
         document.body.style["background"] = `rgba(0,0,0,${backgroundOpacity})`;
+    } else if (e.code == "KeyH"){
+        GAPPY = !GAPPY;
+        console.log("Gap mode ",GAPPY);
     }
 });