Update index.js

index.js

@@ -1,7 +1,10 @@
 (() => {
   let candidates;
-  let headerContainer = document.querySelector('.wrapper-power-bar');
-  headerContainer.insertAdjacentHTML('afterend', `<dialog open style="margin-left: 0;"><table><thead><tr><th>Name</th><th>Votes</th></tr></thead><tbody id="table-body"></tbody></table></dialog>`);
+  let parties;
+  let states;
+  let headerContainer = document.querySelector('div.article-block:nth-child(7)');
+  headerContainer.innerHTML = '';
+  headerContainer.insertAdjacentHTML('afterend', `<table class="heading h3 competitive en president svelte-1gkg98x"><thead><tr><th>Name</th><th>Party</th><th>Votes</th></tr></thead><tbody id="table-body"></tbody></table><div id="state-container" style="display: grid; grid-template-columns:repeat(4, 1fr); gap: 10px;"></div>`);
   const {
     fetch: originalFetch
   } = window;
@@ -14,13 +17,15 @@
     const f = response.url.split('/').pop();
     if (f === "metadata.json") {
       const metadata = await response.json();
-      candidates = new Map(metadata.candidates.map((c) => [c.uid, c.fullName]));
+      states = new Map(metadata.geo.map((c) => [c.uid, c.name]))
+      parties = new Map(metadata.parties.map((c) => [c.code, c.name]));
+      candidates = new Map(metadata.candidates.map((c) => [c.uid, [c.fullName, parties.get(c.candidateRaces[0].majorParty)]]));
     } else if (f === "president.json") {
 
       const president = await response.json();
       let data = president[0]["state_electionTypes"].map((t) => t.state.officeRaces[0].candidateVotes.map((o) => {
         return {
-          "name": (candidates) ? candidates.get(o.candidate) : o.candidate,
+          "name": (candidates) ? candidates.get(o.candidate) : [o.candidate, "?"],
           "votes": o.totalVote
         };
       })).reduce((acc, current) => {
@@ -35,17 +40,67 @@
         return acc;
       }, []);
 
+      let stateVotes = president[0]["state_electionTypes"].map((t) => {
+        return {
+          "state": (states) ? states.get(t.state.uid) : t.uid,
+          "current": t.state.officeRaces[0].officeVotes[0].totalVote,
+          "expected": t.state.officeRaces[0].officeVotes[0].totalExpectedVote,
+          "candidates": t.state.officeRaces[0].candidateVotes.map((o) => {
+            return {
+              "name": (candidates) ? candidates.get(o.candidate) : [o.candidate, "?"],
+              "votes": o.totalVote
+            };
+          })
+        };
+      });
+
       if (data.length > 0) {
         let tableBody = document.getElementById('table-body');
         tableBody.innerHTML = '';
         data.forEach((row, index) => {
           let rowElement = tableBody.insertRow();
+          rowElement.setAttribute('class', `with-state-links row-${index} svelte-woitu6 first-poll-close-row`);
           let nameCell = rowElement.insertCell();
+          nameCell.setAttribute('class', `state en svelte-woitu6`);
+          let partyCell = rowElement.insertCell();
+          partyCell.setAttribute('class', `state en svelte-woitu6`);
           let votesCell = rowElement.insertCell();
-          nameCell.textContent = row.name;
+          votesCell.setAttribute('class', `state en svelte-woitu6`);
+          nameCell.textContent = row.name[0];
+          partyCell.textContent = row.name[1];
           votesCell.textContent = row.votes;
         });
       }
+
+      if (stateVotes.length > 0) {
+          let stateContainer = document.getElementById('state-container');
+          stateContainer.innerHTML = '';
+          stateVotes.forEach((row) => {
+             const card = document.createElement('div');
+
+             const stateInfo = document.createElement('div');
+             stateInfo.innerHTML = `
+                 <h2>${row.state} (Votes Left: ${row.expected - row.current})</h2>
+             `;
+             card.appendChild(stateInfo);
+
+             const candidateInfo = document.createElement('div');
+             candidateInfo.innerHTML = '<h3>Candidates:</h3>';
+             const candidatesList = document.createElement('ul');
+
+             row.candidates.forEach(candidate => {
+                 const listItem = document.createElement('li');
+                 listItem.innerHTML = `
+                     <span>${candidate.name[0]}</span> (${candidate.name[1]}) - ${candidate.votes} votes
+                 `;
+                 candidatesList.appendChild(listItem);
+             });
+
+             candidateInfo.appendChild(candidatesList);
+             card.appendChild(candidateInfo);
+             stateContainer.appendChild(card);
+        });
+      }
     }
     return response;
   };