Improved UI for Charharf Urdu game

readme.md

This is a bookmarklet that you can use to improve the UI of https://charharf.chaoticity.com/ game. Once activated, you will be able to click or tap the letters in the guessed words to change their color. Colors are yellow, orange, red and grey.

To use on desktop browser

1. Create a new bookmark in your browser by right-clicking the bookmarks bar and selecting "New Bookmark" or "Add Page" (depending on your browser).
2. Name the bookmark something like "CharHarf Colorizer" or any other name you prefer.
3. In the URL field, paste the javascript code from the next file in this gist.
4. Save the bookmark.
5. To use the bookmarklet, navigate to https://charharf.chaoticity.com/ first. Then click the bookmarklet in your bookmarks bar. The script should be executed, and the functionality should be applied to the webpage.

To use on Firefox mobile

1. Go to any random page and bookmark it.
2. Go to your bookmarks and edit the book.
3. Name the bookmark something like "CharHarf Colorizer" or any other name you prefer.
4. In the URL field, paste the javascript code from the next file in this gist.
5. Save the bookmark.
6. To use the bookmarklet, navigate to https://charharf.chaoticity.com/ . Then click on the addressbar. And search for the bookmark name. Click the bookmark. The script should be executed, and the functionality should be applied to the webpage.

License

Public domain.

Credits

Created using Mistral Large on 23-03-2024

charharf_colorizer.js

javascript:(function(){const%20t=document.querySelector("%23scores%20tbody"),l=[["%23fac527","%23fac527","%23fac527","%23fac527"]],c=["%23fac527","%23f27d2f","%233799f9","%23686868"];t.addEventListener("click",e=>{if(e.target.classList.contains("letter")){const%20r=e.target.closest("tr").rowIndex,o=Array.from(e.target.parentNode.children).indexOf(e.target);l[r][o]=c[l[r][o]===c[c.length-1]?0:c.indexOf(l[r][o])+1],e.target.style.backgroundColor=l[r][o]}});const%20m=new%20MutationObserver((e=>{e.forEach(e=>{if(e.addedNodes.length)recolorRows()})}));m.observe(t,{childList:!0});function%20recolorRows(){const%20e=t.querySelectorAll("tr");l.unshift(new%20Array(4).fill("%23fac527"));e.forEach((e,r)=>{const%20o=e.querySelectorAll(".letter");o.forEach((e,o)=>{e.style.backgroundColor=l[r][o]})})};recolorRows();})();

charharf_colorizer_full.js

//If you want to improve this

const tbodyElement = document.querySelector('#scores tbody');
const letterColors = [["#fac527", "#fac527", "#fac527", "#fac527"]]; // Initialize with the first row's colors
const colors = ["#fac527", "#f27d2f", "#3799f9", "#686868"];

tbodyElement.addEventListener('click', (event) => {
  if (event.target.classList.contains('letter')) {
    const rowIndex = event.target.closest('tr').rowIndex;
    const columnIndex = Array.from(event.target.parentNode.children).indexOf(event.target);

    letterColors[rowIndex][columnIndex] = colors[(letterColors[rowIndex][columnIndex] === colors[colors.length - 1] ? 0 : colors.indexOf(letterColors[rowIndex][columnIndex]) + 1)];
    event.target.style.backgroundColor = letterColors[rowIndex][columnIndex];
  }
});

const observer = new MutationObserver((mutations) => {
  mutations.forEach((mutation) => {
    if (mutation.addedNodes.length) {
      recolorRows();
    }
  });
});

observer.observe(tbodyElement, { childList: true });

function recolorRows() {
  const rows = tbodyElement.querySelectorAll('tr');

  letterColors.unshift(new Array(4).fill("#fac527")); // Add a new row of colors to the top of the letterColors array

  rows.forEach((row, rowIndex) => {
    const cells = row.querySelectorAll('.letter');

    cells.forEach((cell, columnIndex) => {
      cell.style.backgroundColor = letterColors[rowIndex][columnIndex];
    });
  });
}

recolorRows(); // Initialize the colors of the existing rows