Kevin Powell - Community•16mo ago

Using default values from a JSON file

I have this issue on the live version: https://cozynova.online/mvptimer/ I would like to use the default values from a JSON file if the user inputs nothing, at the moment I assume values of true/false, but I feel like I'm not doing it correctly. tl;dr 1. If user inputs nothing -> use CDR values 2. If user inputs something -> use their values (already working)

MVP Timer

Looking to set up a timer for an MVP?

3 Replies

Myndi•16mo ago

This is the code snippet handling this:

// Cards generator on click
showMvpBtn.addEventListener("click", async () => {
  const selectedMvpId = parseInt(mvpSelect.value, 10);
  const selectedRespawn = respawnSelect.value;

  // Condition 1: Check if selectedMvpId is NaN and show a toast message
  if (isNaN(selectedMvpId)) {
    showToast("Error: You didn't select anything");
    return;
  }

  const mvps = await getMvps();
  const mvp = mvps.find((m) => m.id === selectedMvpId);
  const respawnInfo = mvp.respawn.find((r) => r.map === selectedRespawn);
  const cdr = respawnInfo?.cdr;
  const maxDelay = respawnInfo?.max_delay;
  const totalDelay = cdr + maxDelay;

  const currentTime = DateTime.utc().minus({ hours: 7 });

  // Condition 2: Use CDR value by default if user inputs nothing in the death time
  const hasUserInput =
    deathTimeHours.value.trim() !== "" ||
    deathTimeMinutes.value.trim() !== "" ||
    deathTimeSeconds.value.trim() !== "";

  const deathTime = hasUserInput
    ? {
        hours: parseInt(deathTimeHours.value) || 0,
        minutes: parseInt(deathTimeMinutes.value) || 0,
        seconds: parseInt(deathTimeSeconds.value) || 0,
      }
    : {
        hours: 0,
        minutes: 0,
        seconds: 0,
      };

  const deathTimeInGMT7 = currentTime.startOf("day").plus({
    hours: deathTime.hours,
    minutes: deathTime.minutes,
    seconds: deathTime.seconds,
  });

  const timeDifferenceMs = currentTime.diff(
    deathTimeInGMT7,
    "milliseconds"
  ).milliseconds;

  // Condition 3: If it's a future time from the actual
  if (deathTimeInGMT7 > currentTime) {
    showToast("Error: You can't add future time");
  }

  // Condition 4: If the Time Difference is greater than the Total Delay
  else if (timeDifferenceMs > totalDelay) {
    showToast("Error: Looks like it has respawned");
  } else if (cardExists(selectedMvpId.toString(), selectedRespawn)) {
    showToast("Error: You can't add duplicates");
  } else {
    showMvp(mvp, selectedRespawn, deathTime);
  }
});

// Cards generator on click
showMvpBtn.addEventListener("click", async () => {
  const selectedMvpId = parseInt(mvpSelect.value, 10);
  const selectedRespawn = respawnSelect.value;

  // Condition 1: Check if selectedMvpId is NaN and show a toast message
  if (isNaN(selectedMvpId)) {
    showToast("Error: You didn't select anything");
    return;
  }

  const mvps = await getMvps();
  const mvp = mvps.find((m) => m.id === selectedMvpId);
  const respawnInfo = mvp.respawn.find((r) => r.map === selectedRespawn);
  const cdr = respawnInfo?.cdr;
  const maxDelay = respawnInfo?.max_delay;
  const totalDelay = cdr + maxDelay;

  const currentTime = DateTime.utc().minus({ hours: 7 });

  // Condition 2: Use CDR value by default if user inputs nothing in the death time
  const hasUserInput =
    deathTimeHours.value.trim() !== "" ||
    deathTimeMinutes.value.trim() !== "" ||
    deathTimeSeconds.value.trim() !== "";

  const deathTime = hasUserInput
    ? {
        hours: parseInt(deathTimeHours.value) || 0,
        minutes: parseInt(deathTimeMinutes.value) || 0,
        seconds: parseInt(deathTimeSeconds.value) || 0,
      }
    : {
        hours: 0,
        minutes: 0,
        seconds: 0,
      };

  const deathTimeInGMT7 = currentTime.startOf("day").plus({
    hours: deathTime.hours,
    minutes: deathTime.minutes,
    seconds: deathTime.seconds,
  });

  const timeDifferenceMs = currentTime.diff(
    deathTimeInGMT7,
    "milliseconds"
  ).milliseconds;

  // Condition 3: If it's a future time from the actual
  if (deathTimeInGMT7 > currentTime) {
    showToast("Error: You can't add future time");
  }

  // Condition 4: If the Time Difference is greater than the Total Delay
  else if (timeDifferenceMs > totalDelay) {
    showToast("Error: Looks like it has respawned");
  } else if (cardExists(selectedMvpId.toString(), selectedRespawn)) {
    showToast("Error: You can't add duplicates");
  } else {
    showMvp(mvp, selectedRespawn, deathTime);
  }
});

And this is an example from the JSON file:

{
      "id": 1087,
      "name": "Orc Hero",
      "respawn": [
        {
          "map": "gef_fild03",
          "cdr": 3600000,
          "max_delay": 600000
        },
        {
          "map": "gef_fild14",
          "cdr": 3600000,
          "max_delay": 600000
        }
      ]
    }

{
      "id": 1087,
      "name": "Orc Hero",
      "respawn": [
        {
          "map": "gef_fild03",
          "cdr": 3600000,
          "max_delay": 600000
        },
        {
          "map": "gef_fild14",
          "cdr": 3600000,
          "max_delay": 600000
        }
      ]
    }

I commented the conditions, but basically right now it doesn't admit any because it's defaulted to 00:00:00 (or it assumes this time, basically). I'm still beginner in JS 😔

13eck•16mo ago

If the user inputs nothing at all you want to use the default values? Or do you want the user's input to overwrite the defaults? Both are pretty easy to do. If you want to check for any user input then you're on the right track, though I would do it a bit differently. for the latter (which is what your initial post indicates) then you do what you're doing: check for user input and if there is any, use it. Otherwise use the default. To get the default you'll either have to read the JSON and parse it (using JSON.parse()) or hardcode it into the JS file as an object (either in the main script or import it from another file). If you want to set the defaults and have any user input overwrite it, then I'll teach you something called Object.assign(). It's pretty easy: you give it an object to write to and any number of additional object to copy from. Objects are copied from left to right, so any properties in later objects overwrite earlier object. Normally the first parameter is an empty object, so all copying happen to the new object and you don't accidentally overwrite an existing object. So you do something like:

const defaultObj = {
  // whatever properties you want 
  // as the defaults
}

const userInputObj = {
  // once you get the user input
  // make an object from it
}

const combinedObj = Object.assign({}, defaultObj, uerInputObj);

const defaultObj = {
  // whatever properties you want 
  // as the defaults
}

const userInputObj = {
  // once you get the user input
  // make an object from it
}

const combinedObj = Object.assign({}, defaultObj, uerInputObj);

This makes an empty object. Then it copies the defaults. After that, any properties from the user input are copied over, overwriting any defaults. And if there is no user input then only the default object is used. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/assign Hope that helps! You'll have to validate the user input, of course! You don't want to overwrite defaults with empty strings or a bunch of NaNs :p

Myndi•16mo ago

It turns out I'm an idiot... I didn't have an Object per se, but something quite similar, but the issue was not even THE FUNCTION ITSELF.

function validateInput(input, min, max) {
  input.addEventListener("input", () => {
    const value = parseInt(input.value, 10);
    if (value < min) {
      input.value = min;
    } else if (value > max) {
      input.value = max;
    }
  });
}

function validateInput(input, min, max) {
  input.addEventListener("input", () => {
    const value = parseInt(input.value, 10);
    if (value < min) {
      input.value = min;
    } else if (value > max) {
      input.value = max;
    }
  });
}

It was this function inputting default values. So no matter how I defined it, whether the user has input something or not, by default it was assuming the values from the HTML myndiFacepalm

I cannot even describe the frustration of how silly this was. I updated it to actually do it only if the user "fucks up".

function validateInput(input, min, max) {
  input.addEventListener("input", () => {
    const value = parseInt(input.value, 10);
    if (isNaN(value)) {
      input.value = "";
    } else if (value < min) {
      input.value = min;
    } else if (value > max) {
      input.value = max;
    }
  });
}

function validateInput(input, min, max) {
  input.addEventListener("input", () => {
    const value = parseInt(input.value, 10);
    if (isNaN(value)) {
      input.value = "";
    } else if (value < min) {
      input.value = min;
    } else if (value > max) {
      input.value = max;
    }
  });
}

I don't know whether should I cry or not. Actually, I'm still troubled with some of the logic Q_Q

Gaming

Programming

Using default values from a JSON file