Conquer Online Minimap

[Kelwa]

i saw this code in many websites

function rotatePosition(n, t) {
   var i = (n - t) * 32 + 4096,
       r = (n + t - 383) * 16 + 4096;
   return [i, r]
}

// here you get the map image element and also get the container that will handle the animation
const mapContainer = document.getElementById("mapContainer");

// Create a dynamic div with the class "seller-circle" for the seller pointer
const sellerDiv = document.createElement("div");
sellerDiv.classList.add("seller-circle");

// here you get all the table rows except the header row
const tableRows = document.querySelectorAll("#table1 tr:not(:first-child)");
// Add a mouseover event listener to each table row
tableRows.forEach(row => {
   row.addEventListener("mouseover", () => {
       // Access the row's data attributes
       const coordX1 = parseInt(row.getAttribute("data-seller-x"));
       const coordY1 = parseInt(row.getAttribute("data-seller-y"));
       var t = coordX1, i = coordY1, r = rotatePosition(t, i);
       t = r[0] * .0625;
       i = r[1] * .0625;
       var f = 512, e = 512, o = f / 512, s = e / 512;
       t *= o;
       i *= s;
       t -= 5;
       i -= 5;
       const coordX = t;
       const coordY = i;

       // Check if the values are within the valid range (0 to 512)
       if (!isNaN(coordX) && coordX >= 0 && coordX <= 512 &&
           !isNaN(coordY) && coordY >= 0 && coordY <= 512) {
           // Values are valid, you can use them here
           //console.log("Coordinates: X =", coordX, "Y =", coordY);

           // Set position for the "seller" circle relative to the game map
           sellerDiv.style.left = `${coordX}px`;
           sellerDiv.style.top = `${coordY}px`;

           // Show the "seller" pointer
           sellerDiv.style.display = "block";
           mapContainer.appendChild(sellerDiv);

       } else {
           // Values are not valid, hide the "seller" circle
           console.log("Invalid coordinates.");
       }
   });

   // Add a mouseout event listener to reset the row's style when the mouse leaves
   row.addEventListener("mouseout", () => {
       sellerDiv.style.display = "none"; // Reset to default
   });
});

this is for shown x,y in image

but this only for market, i know "383" is the floor bounds in map , and "4096" it's image size that i want to show * 8 i think like (512*8) = 4096, but i don't know "32"and "16" from where?

anyone can help?

[Spirited]

I'm not super knowledgeable when it comes to client stuff, nor have I tried doing rotations in Conquer Online (so super out of my element), but isn't a tile in Conquer Online 16 pixels tall and 32 pixels across?

[Kelwa]

I'm not super knowledgeable when it comes to client stuff, nor have I tried doing rotations in Conquer Online (so super out of my element), but isn't a tile in Conquer Online 16 pixels tall and 32 pixels across?

Thanks for replying, I tried it on Twin City, this number 383 I changed to 972, this number 32 I changed to 9.7, and this number 16 I changed to 7.3, and it worked well, but I still do not know where this number came from, even though Twin City is larger than the market and with The inferred numbers are lower, hahahaha

[Diab]

The map coordinates is a representation of the cells on the drawn map.

the map is made of a "puzzle" which has a specific width and height and is made up from images with a specific pixel width/height typically 256

so

the real width is puzzle width * pixel width (usually 256)

real height is puzzle height * pixel height (should the same as pixel width)

map width is real width / cell width (64)

map height is real height / cell height (32)

you need to also take into account the fact that the image is a scaled down version of the map

scaleX = imageWidth / realWidth

scaleY = imageHeight / realHeight

there is more calculations that need to be done to convert from map coordinates to a coordinate on a minimap image but those should be all the variables you will need