task sort

async function taskXCPX() {
  // Select all the div elements inside the specified container
  let elements = document.querySelectorAll("#__next > div > div.room-layout > div > div.Store_storeDialog__K3NJB > div.Store_box__j6_U4.Store_modal-box-container__S2ExC.commons_uikit__Nmsxg.commons_frame__f5hXE.commons_purpleinset___KfX2 > div > div.Store_store-tabs-wrapper__OfH4C > div > div > div.Store_items-content__FtMRE > div");

  // Array to store the extracted data
  let data = [];

  elements.forEach((element, index) => {
    // Get the inner text of the selected element
    let innerText = element.innerText;

    // Split the inner text into an array based on newline characters
    let textArray = innerText.split('\n');

    // Remove the first and last elements from the array
    textArray.shift();
    textArray.pop();

    // Select the first image inside the specified container if it exists
    let rewardIcon = document.querySelector(`#__next > div > div.room-layout > div > div.Store_storeDialog__K3NJB > div.Store_box__j6_U4.Store_modal-box-container__S2ExC.commons_uikit__Nmsxg.commons_frame__f5hXE.commons_purpleinset___KfX2 > div > div.Store_store-tabs-wrapper__OfH4C > div > div > div.Store_items-content__FtMRE > div:nth-child(${index + 1}) > div > div > div.Store_card-header__FTHH8 > div:nth-child(2) > div > img`);

    // Select the second image inside the specified container if it exists
    let taskIcon = document.querySelector(`#__next > div > div.room-layout > div > div.Store_storeDialog__K3NJB > div.Store_box__j6_U4.Store_modal-box-container__S2ExC.commons_uikit__Nmsxg.commons_frame__f5hXE.commons_purpleinset___KfX2 > div > div.Store_store-tabs-wrapper__OfH4C > div > div > div.Store_items-content__FtMRE > div:nth-child(${index + 1}) > div > div > div.Store_card-img-wrapper__hyk51 > img`);

    let rewardTask = textArray[0].padStart(4, 'ㅤ');
    let tierTask = textArray[1].padStart(4, 'ㅤ');
    let qtyTask = textArray[2].padStart(3, 'ㅤ');
    let nameTask = textArray[3];
    let rIcon = rewardIcon ? rewardIcon.src : '';
    let tIcon = taskIcon ? taskIcon.src : '';

    // Push the extracted data into the array
    data.push({
      reward: rewardTask,
      tier: tierTask,
      qty: qtyTask,
      name: nameTask,
      rIcon: rIcon,
      tIcon: tIcon
    });
  });

  // Sort the data array based on the reward task (assuming rewardTask is a number)
  data.sort((a, b) => parseFloat(a.reward.replace(/ㅤ/g, '')) - parseFloat(b.reward.replace(/ㅤ/g, '')));

  // Generate the HTML content from the sorted data
  let result = 'Reward ㅤ| Tier | Qty | Task <br>';
  data.forEach(item => {
    result += `${item.reward} <img src='${item.rIcon}' height='20px' width='20px'> | ${item.tier} | ${item.qty} | <img src='${item.tIcon}' height='20px' width='20px'> ${item.name} <br>`;
  });

  // Set the HTML content to the div
  const squareBox = document.getElementById('squareBox'); // Assuming squareBox is the id of your target div
  squareBox.innerHTML = result;

  buttonNav();
}