Player Better

2025-11-28 19:25:31 -05:00
parent ec77c0b268
commit 43c7068724
5 changed files with 160 additions and 30 deletions
--- a/public/assets/css/style.css
+++ b/public/assets/css/style.css
@@ -13,6 +13,7 @@ body {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
+    table-layout: auto;
 }

 .header {
@@ -58,6 +59,45 @@ body {
    grid-area: sw;
 }

+.cursor-question {
+    cursor: help;
+
+    position: relative;
+    display: inline-block;
+}
+
+.cursor-question .tooltip-text {
+    visibility: hidden;
+    font: 16px tahoma, sans-serif;
+    width: 200px;
+    background-color: #0C0C0C;
+    border: 2px solid #EEEEEE;
+    color: #EEEEEE;
+    text-align: left;
+    border-radius: 6px;
+    padding: 5px;
+    padding-left: 8px;
+    padding-right: 8px;
+    z-index: 1;
+    position: absolute;
+    top: 110%;
+    left: 50%;
+    transform: translate(-50%, 20px);
+    opacity: 0;
+    transition: opacity 0.3s ease-out, transform 0.3s ease-out;
+    font-size: 14px;
+}
+
+.cursor-question:hover {
+    text-decoration: underline;
+}
+
+.cursor-question:hover .tooltip-text {
+    visibility: visible;
+    transform: translate(-50%, 0px);
+    opacity: 1;
+}
+
 .box {
    border: 2px solid #AAAAAA;
    border-radius: 16px;
@@ -69,11 +109,46 @@ body {
    justify-content: flex-start;
    text-justify: center;
    gap: 5px;
+    overflow: hidden;
+}
+
+.box table {
+    width: 100%;
+}
+
+.box tbody {
+    display: block;
+    overflow-y: auto;
+    overflow-x: hidden;
+    max-height: calc((100vh - 100px) / 2 - 100px);
+}
+
+.box thead,
+.box tbody tr {
+    display: table;
+    width: 100%;
+    table-layout: fixed;
+}
+
+.box table td:first-child,
+.box table th:first-child {
+    width: 35px;
+    white-space: nowrap;
+}
+
+.box table thead td {
+    font-weight: bold;
+}
+
+.box table td:nth-child(2),
+.box table th:nth-child(2) {
+    width: 50px;
+    white-space: nowrap;
 }

 .grid-container {
    display: grid;
-    grid-template-columns: 50px, 50px;
+    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto;
    grid-template-areas: 
    "header header"
@@ -287,12 +362,12 @@ a:focus {

 table {
    border-collapse: collapse;
-    border: 2px solid #CCCCCC;
+    border: 1px solid #CCCCCC;
 }

 thead {
    color: #FFFFFF;
-    border: 2px solid #CCCCCC;
+    /*border: 2px solid #CCCCCC;*/
 }

 thead th {
--- a/public/home.js
+++ b/public/home.js
@@ -24,7 +24,7 @@ async function updateOffense() {
    const offenseBody = document.querySelector("#offense tbody");
    

-    let resultObject = await postData("/getHighestOffense", { amount: 10 }, token);
+    let resultObject = await postData("/getHighestOffense", { amount: 100 }, token);
    console.log(resultObject);

    if (resultObject.matches.length === 0) {
@@ -38,6 +38,7 @@ async function updateOffense() {
    //   headerRow.innerHTML += `<td>${attribute}</td>`; 
    //});
    headerRow.innerHTML = `
+            <td>Rank</td>
            <td>Position</td>
            <td>Name</td>
            <td>Team</td>
@@ -46,14 +47,17 @@ async function updateOffense() {
    offenseHeader.appendChild(headerRow);

    offenseBody.innerHTML = "";
+    let i = 0;
    resultObject.matches.forEach(player => {
+        i++;
        const row = document.createElement("tr");

        row.innerHTML = `
+            <td>${i}</td>
            <td>${player.Position}</td>
            <td><a href="/player/${player.PlayerID}">${player.PlayerName}</a></td>
            <td>${player.Team}</td>
-            <td>${(player.OffenseScore + "000000").slice(0, 8)}</td>
+            <td>${Math.floor(player.OffenseScore)}</td>
        `;
        offenseBody.appendChild(row);
    });
@@ -67,7 +71,7 @@ async function updatePaydirt() {
    const paydirtBody = document.querySelector("#paydirt tbody");
    

-    let resultObject = await postData("/getHighestPaydirt", { amount: 10 }, token);
+    let resultObject = await postData("/getHighestPaydirt", { amount: 100 }, token);
    console.log(resultObject);

    if (resultObject.matches.length === 0) {
@@ -81,6 +85,7 @@ async function updatePaydirt() {
    //   headerRow.innerHTML += `<td>${attribute}</td>`; 
    //});
    headerRow.innerHTML = `
+            <td>Rank</td>
            <td>Position</td>
            <td>Name</td>
            <td>Team</td>
@@ -89,14 +94,17 @@ async function updatePaydirt() {
    paydirtHeader.appendChild(headerRow);

    paydirtBody.innerHTML = "";
+    let i = 0;
    resultObject.matches.forEach(player => {
+        i++;
        const row = document.createElement("tr");

        row.innerHTML = `
+            <td>${i}</td>
            <td>${player.Position}</td>
            <td><a href="/player/${player.PlayerID}">${player.PlayerName}</a></td>
            <td>${player.Team}</td>
-            <td>${(player.PaydirtScore + "000000").slice(0, 8)}</td>
+            <td>${Math.floor(player.PaydirtScore)}</td>
        `;
        paydirtBody.appendChild(row);
    });
@@ -108,7 +116,7 @@ async function updateHighest() {
    const tableHeader = document.querySelector("#highest thead");
    const tableBody = document.querySelector("#highest tbody");
    
-    let resultObject = await postData("/getHighest", { amount: 10 }, token);
+    let resultObject = await postData("/getHighest", { amount: 100 }, token);
    console.log(resultObject);

    if (resultObject.matches.length === 0) {
@@ -122,25 +130,29 @@ async function updateHighest() {
    //   headerRow.innerHTML += `<td>${attribute}</td>`; 
    //});
    headerRow.innerHTML = `
-            <td>Name</td>
-            <td>Contract</td>
-            <td>Team</td>
+            <td>Rank</td>
            <td>Position</td>
+            <td>Name</td>
+            <td>Team</td>
+            <td>Contract</td>
        `;
    tableHeader.appendChild(headerRow);

    tableBody.innerHTML = "";
+    let i = 0;
    resultObject.matches.forEach(player => {
+        i++;
        const row = document.createElement("tr");

        //for (attribute in player) {
        //    row.innerHTML += `<td>${player}</td>l`;
        //}
        row.innerHTML = `
-            <td><a href="/player/${player.PlayerID}">${player.PlayerName}</a></td>
-            <td>${formatSalary(player.TotalValue)}</td>
-            <td>${player.Team}</td>
+            <td>${i}</td>
            <td>${player.Position}</td>
+            <td><a href="/player/${player.PlayerID}">${player.PlayerName}</a></td>
+            <td>${player.Team}</td>
+            <td>${formatSalary(player.TotalValue)}</td>
        `;
        tableBody.appendChild(row);
    });
@@ -160,22 +172,35 @@ async function updateFavorites() {
    //   headerRow.innerHTML += `<td>${attribute}</td>`; 
    //});
    headerRow.innerHTML = `
+            <td>Rank</td>
+            <td>Position</td>
            <td>Name</td>
            <td>Team</td>
-            <td>Position</td>
+            <td>Remove</td>
        `;
    tableHeader.appendChild(headerRow);

    tableBody.innerHTML = "";
    console.log(resultObject.watchlist);
+    let i = 0;
    resultObject.watchlist.forEach(player => {
+        i++;
        const row = document.createElement("tr");

        row.innerHTML = `
+            <td>${i}</td>
+            <td>${player.Position}</td>
            <td><a href="/player/${player.PlayerID}">${player.PlayerName}</a></td>
            <td>${player.Team}</td>
-            <td>${player.Position}</td>
+            <td><a href="#" class="remove" data-id="${player.PlayerID}">Stop Watching</a></td>
        `;
        tableBody.appendChild(row);
    });
+
+    document.querySelectorAll(".remove").forEach(element => {
+        element.addEventListener("click", async e => {
+            postData("/toggleWatched", { id: element.dataset.id }, token);
+            element.closest("tr").remove();
+        })
+    });
 };
--- a/public/player.html
+++ b/public/player.html
@@ -20,14 +20,29 @@
            </div>
            <div class="info">
                <p><b>Height:</b></p>
-                <p class="attribute-Height"></p>
+                <p class="attribute-Height format-height"></p>
            </div>
            <div class="info">
                <p><b>Weight:</b></p>
-                <p class="attribute-Weight"></p>
+                <p class="attribute-Weight format-weight"></p>
+            </div>
+        </div>
+        <div class="info-container">
+            <div class="info">
+                <div class="cursor-question">
+                    <p><b>PayDirt Score:</b></p>
+                    <span class="tooltip-text">A player's <b>PayDirt score</b> is calculated by weighting their offense score by their APY. It is used to evaluate the worth of their contract.</span>
+                </div>
+                <p class="attribute-PaydirtScore format-integer"></p>
+            </div>
+            <div class="info">
+                <div class="cursor-question">
+                    <p><b>Offense Score:</b></p>
+                    <span class="tooltip-text">A player's <b>offense score</b> is calculated by combining several of their offense stats into a weighted score. It is indicative of their overall performance.</span>
+                </div>
+                <p class="attribute-OffenseScore format-integer"></p>
            </div>
        </div>
-
        <table id="overview">
            <thead></thead>
            <tbody></tbody>
--- a/public/player.js
+++ b/public/player.js
@@ -62,8 +62,8 @@ async function populatePlayerData() {
    const playerStatsObject = resultObject.matches;

    
-    let playerObjectResult = await postData("/getPlayer", {
-        id: id
+    let playerObjectResult = await postData("/getPlayerScores", {
+        playerID: id
    }, token);
    if (playerObjectResult.success === false) {
        console.log("Invalid ID");
@@ -71,10 +71,23 @@ async function populatePlayerData() {
    }

    const playerObject = playerObjectResult.match;
+    console.log(playerObjectResult);

    for (const [attribute, value] of Object.entries(playerObject)) {
        console.log(`.attribute-${attribute}`);
        document.querySelectorAll(`.attribute-${attribute}`).forEach(element => {
+            if (element.classList.contains("format-weight")) {
+                element.textContent = value + " lbs";
+                return;
+            }
+            if (element.classList.contains("format-height")) {
+                element.textContent = `${value.split("-")[0]}' ${value.split("-")[1]}"`;
+                return;
+            }
+            if (element.classList.contains("format-integer")) {
+                element.textContent = Math.floor(value);
+                return;
+            }
            if (element.classList.contains("format-salary")) {
                element.textContent = formatSalary(value);
                return;
@@ -82,7 +95,7 @@ async function populatePlayerData() {
            element.textContent = value;
        })
    };
-
+    
    createStatsTable(playerStatsObject);
    createOverviewTable(playerObject);
 }
@@ -158,9 +171,9 @@ async function createStatsTable(playerObject) {
        //    row.innerHTML += `<td>${player}</td>l`;
        //}
        rowElement.innerHTML = `
-            <td>${row.Season}</td>
+            <td>${row.season}</td>
            <td>${row.SeasonType === "REG" ? "Regular" : "Post"}</td>
-            <td>${row.Week}</td>
+            <td>${row.week}</td>
            <td>${row.pass_attempts}</td>
            <td>${row.complete_pass}</td>
            <td>${row.total_yards}</td>