From 7b2056db497e11d408cac179e979d3822f36625f Mon Sep 17 00:00:00 2001 From: Siim Mardus Date: Fri, 1 Mar 2024 14:39:45 +0200 Subject: [PATCH] Add Gains Period --- max/index.html | 272 ++++++++++++++++++++++++++++++++++++------------- 1 file changed, 203 insertions(+), 69 deletions(-) diff --git a/max/index.html b/max/index.html index 9e52a9c..510bd4f 100644 --- a/max/index.html +++ b/max/index.html @@ -16,14 +16,60 @@ lightgreen 100% ); } + body { display: flex; + flex-direction: column; align-items: center; justify-content: center; height: 100%; overflow: hidden; } + .hidden { + display: none !important; + } + + .controls { + position: absolute; + top: 0; + margin-top: 10vh; + border: 1px solid black; + height: 10vh; + width: 50vw; + + .title { + display: flex; + justify-content: center; + align-items: center; + margin: 20px; + } + + .options { + display: flex; + justify-content: center; + align-items: center; + flex-direction: row; + + .selection { + appearance: none; + -webkit-appearance: none; + -moz-appearance: none; + border: 1px solid #ccc; + padding: 10px 20px; + cursor: pointer; + background-color: white; + display: inline-block; + margin: 5px; + } + + .selected { + background-color: blue; + color: white; + } + } + } + .container { width: 100%; display: flex; @@ -78,8 +124,23 @@ } - -
+ + +
+
Select Time Period
+
+
+ Day +
+
+ Week +
+
+ Month +
+
+
+
koqo
@@ -223,7 +284,23 @@ return hoursTo99; } - function fetchData() { + function handleSelection(value) { + localStorage.setItem("selectedOption", value); // Store selected option in local storage + + window.location.reload(); + } + + function onPageLoad() { + var selectedOption = localStorage.getItem("selectedOption"); + if (selectedOption) { + var selection = document.getElementById(selectedOption); + selection.classList.add("selected"); + } + + fetchData(selectedOption); + } + + function fetchData(gainsPeriod) { players.forEach((player) => { fetch(`https://api.wiseoldman.net/v2/players/${player.name}`) .then((response) => { @@ -233,80 +310,137 @@ return response.json(); }) .then((playerResponse) => { - // Get remaining hours to 99 per skill - const skills = playerResponse.latestSnapshot.data.skills; - const remainingHoursTo99 = {}; - for (const [skillName, skillValues] of Object.entries(skills)) { - if ( - skillValues.level !== 99 && - skillName !== "overall" && - !player.passiveSkills.includes(skillName) - ) { - remainingHoursTo99[skillName] = getHoursTo99( - skillValues, - player.ehpTable - ); - } - } + fetch( + `https://api.wiseoldman.net/v2/players/${player.name}/gained?period=${gainsPeriod}` + ) + .then((response) => { + if (!response.ok) { + throw new Error("Network response was not ok"); + } + return response.json(); + }) + .then((gainsResponse) => { + console.log(`gains for ${player.name}`, gainsResponse); - // Get min and max hours for the range - let minHoursToMax = 0; - let maxHoursToMax = 0; - for (const [skillName, hoursTo99] of Object.entries( - remainingHoursTo99 - )) { - const { smallest, largest } = - getSmallestAndLargestNumber(hoursTo99); - // DOM logic - // to place JSON.stringify(Object.values(hoursTo99)) - // Create div for skill row - const skillNode = document.createElement("div"); - skillNode.classList.add("skill"); - // Create div for skill name - const skillNameNode = document.createElement("div"); - skillNameNode.classList.add("skill-name"); - const skillNameTextNode = document.createTextNode(skillName); - skillNameNode.appendChild(skillNameTextNode); - // Create div for skill values - const skillValuesNode = document.createElement("div"); - skillValuesNode.classList.add("skill-values"); - - let skillValuesTextNode; - if (smallest === largest) { - skillValuesTextNode = document.createTextNode( - `${smallest} hours` - ); - } else { - skillValuesTextNode = document.createTextNode( - `${smallest} - ${largest} hours` - ); - } + // Get remaining hours to 99 per skill + const skills = playerResponse.latestSnapshot.data.skills; + const remainingHoursTo99 = {}; + for (const [skillName, skillValues] of Object.entries( + skills + )) { + if ( + skillValues.level !== 99 && + skillName !== "overall" && + !player.passiveSkills.includes(skillName) + ) { + remainingHoursTo99[skillName] = getHoursTo99( + skillValues, + player.ehpTable + ); + } + } - skillValuesNode.appendChild(skillValuesTextNode); + // Get min and max hours for the range + let minHoursToMax = 0; + let maxHoursToMax = 0; + for (const [skillName, hoursTo99] of Object.entries( + remainingHoursTo99 + )) { + const { smallest, largest } = + getSmallestAndLargestNumber(hoursTo99); - skillNode.appendChild(skillNameNode); - skillNode.appendChild(skillValuesNode); + const gainedXpToday = + gainsResponse.data.skills[skillName].experience.gained; + let maxEhpForSkill = 0; + const ehpRates = player.ehpTable[skillName].forEach( + (method) => { + if (method.ehpRate > maxEhpForSkill) { + maxEhpForSkill = method.ehpRate; + } + } + ); + console.log( + `largest ehp for ${skillName} is ${maxEhpForSkill}` + ); + const gainedEhpForPeriod = Number( + gainedXpToday / maxEhpForSkill + ).toFixed(2); - document - .getElementById(`skills-todo-${player.name}`) - .appendChild(skillNode); + // DOM logic + // Create div for skill row + const skillNode = document.createElement("div"); + skillNode.classList.add("skill"); + // Create div for skill name + const skillNameNode = document.createElement("div"); + skillNameNode.classList.add("skill-name"); + const skillNameTextNode = + document.createTextNode(skillName); + skillNameNode.appendChild(skillNameTextNode); + // Create div for skill values + const skillValuesNode = document.createElement("div"); + skillValuesNode.classList.add("skill-values"); - minHoursToMax += smallest; - maxHoursToMax += largest; - } + const granularityValueMap = { + day: "Today", + week: "This week", + month: "This month", + }; - // Render into element based on values - if (minHoursToMax === maxHoursToMax) { - document.getElementById( - `ttm-${player.name}` - ).innerText = `Time to max: ${minHoursToMax} hours`; - } else { - document.getElementById( - `ttm-${player.name}` - ).innerText = `Time to max: ${minHoursToMax} - ${maxHoursToMax} hours`; - } + let skillValuesTextNode; + if (smallest === largest) { + skillValuesTextNode = document.createTextNode( + `${smallest} hours to go. ${granularityValueMap[gainsPeriod]}: ${gainedEhpForPeriod}` + ); + } else { + skillValuesTextNode = document.createTextNode( + `${smallest} - ${largest} hours to go. ${granularityValueMap[gainsPeriod]}: ${gainedEhpForPeriod}` + ); + } + + skillValuesNode.appendChild(skillValuesTextNode); + + skillNode.appendChild(skillNameNode); + skillNode.appendChild(skillValuesNode); + + document + .getElementById(`skills-todo-${player.name}`) + .appendChild(skillNode); + + minHoursToMax += smallest; + maxHoursToMax += largest; + } + + // Render into element based on values + if (minHoursToMax === maxHoursToMax) { + document.getElementById( + `ttm-${player.name}` + ).innerText = `Time to max: ${minHoursToMax} hours`; + } else { + document.getElementById( + `ttm-${player.name}` + ).innerText = `Time to max: ${minHoursToMax} - ${maxHoursToMax} hours`; + } + }) + .catch((error) => { + console.error( + "There was a problem with the fetch operation:", + error + ); + }); }) .catch((error) => { + console.log("here"); + const errorElement = document.getElementById("error"); + const controlsElement = document.getElementById("controls"); + const containerElement = document.getElementById("container"); + controlsElement.classList.add("hidden"); + containerElement.classList.add("hidden"); + errorElement.classList.remove("hidden"); + + setTimeout(() => { + window.location.reload(); + }, 1000); + console.error( "There was a problem with the fetch operation:", error