First of all, this is just what I started for fun and when I started I knew nothing about html, css, javascript, mysql, or php. So that's where you should expect my level of code and understanding to be so treat me accordingly. I have an issue with a game I started writing because I was at a long winded family function with nothing but my phone and access to my server.
I have a grid of hexes on which the game is played. The ID of the hex is a tile value (0-254), the value of the name tag is the coordinates in the hex grid expressed as X and Y coordinates, and value tag holds the coordinates of the tile in X, Y, and Z. It's an uneven map with a 12 hex row followed by an 11 hex row. I'm considering changing this to equal 12 tile rows but I just haven't yet. The game is my attempt at recreating Strategic Commander for the Palm OS but on a hex grid. So a game in the vein of Stellaris.
My problem comes into play with selecting hexes at radius N to show how far away from any given planet ships can travel. I have it working to a point but it isn't good enough so I'm here asking for help in not only fixing it but understanding it. My highlight functions follow:
Right now, I create the highlight one line at a time and move down to the next. I first draw the top, or l (which was originally supposed to be left because that's how I get the bounds) and then I draw the bottom (or r because of the previous reason). Because I use single numbers in the cells ID, the highlight wraps around the map like it's a tube so I look for when the line of hexes being drawn moves either up or down and I skip drawing the unneeded tiles. This works all the way up until size 5. After that, the skipping of a unneeded hexes interferes with the drawing of the needed ones and so the highlight no longer looks nice and round. This would be acceptable but for the fact that as the size increases, the amount of weird also increases.
The rush when I got this working was just as incredible as the disappointment of realizing that it's still not good enough.
Look, I honestly know already that this project is a little too ambitious for me to start off with but I also know that I could finish it if I could work out this issue. I also know my code is bad. Like I said, I just started playing with it. The whole project lives online HERE (if this link is against the rules, I apologize). Keep in mind that this is written on and with the screen of my iPhone 6s plus in mind. Also, on PC to see the map where I'm talking about, you have to find the button in the dom and make it not hidden. It shows up on my phone but not on the PC. I don't know why.
Finally, I'm willing to bet my left shoe that there is a better way to do this. I just don't know what that is. I feel slightly stupid for not being able to figure it out. I found a site with everything about hex grids anyone should want to know but the jargon and the sheer amount of material there makes it hard to understand. I'm actually happy to have gotten this far with just the internet. If my code is so bad that it's hopeless for me to continue, that's fine and I need to know that but just be gentle about it, okay?
Any help in getting the highlight to function past size 5 would be most appreciated. If I'm asking too much or if this isn't the right place to ask for help like this, let me know. I asked on stackoverflow and it didn't go very well so I deleted it. I still don't get the underlying purpose of that site: a help forum where one gets blasted for asking for help. Still, I'm super autistic (really, not a joke) so if I've done something inappropriate please understand that I don't mean it, or realize it.
Thanks in advance for the help if you offer it. If not, thanks for reading it at least, I guess.
The Kalma.
(I know they are a bad group in trek but it still sounds cool).
PS: I got some of the code off the internet. Any use you might want to make of it is fine by me. Again, this is just a project for the fun of it. If you make something cool, I'd love to see it.
I have a grid of hexes on which the game is played. The ID of the hex is a tile value (0-254), the value of the name tag is the coordinates in the hex grid expressed as X and Y coordinates, and value tag holds the coordinates of the tile in X, Y, and Z. It's an uneven map with a 12 hex row followed by an 11 hex row. I'm considering changing this to equal 12 tile rows but I just haven't yet. The game is my attempt at recreating Strategic Commander for the Palm OS but on a hex grid. So a game in the vein of Stellaris.
My problem comes into play with selecting hexes at radius N to show how far away from any given planet ships can travel. I have it working to a point but it isn't good enough so I'm here asking for help in not only fixing it but understanding it. My highlight functions follow:
Code:
var spd=5;
var spacetiles = document.getElementsByClassName("space");
var lrow=getrowlength(spacetiles);
var srow=lrow-1;
var totaltiles=spacetiles.length;
var i=0;
var spacecolor="rgba(0, 0, 0, 0)";
var axiscolor="rgba(0, 0, 0, 0)";
var spacehole="rgba(85, 136, 238, 0.50)";
var axishole="rgba(85, 136, 238, 0.50)";
var highlightcolor="rgba(85,136,238,0.50)";
function getrowlength(spacetiles) {
var i=0;
var tilecount=0;
while (parseInt(spacetiles[i].getAttribute("name").split(",")[1])<1) {
tilecount=tilecount+1;
i=i+1;
}
return tilecount;
}
for (i = 0; i < totaltiles; i++) {
spacetiles[i].addEventListener('click', function() {
highlight(this, spd);
}, false);
}
function clearselect() {
for (i = 0; i < this.totaltiles; i++) {
if (this.spacetiles[i].classList.contains("space")) {
this.spacetiles[i].style.backgroundColor=spacecolor;
}
if (this.spacetiles[i].classList.contains("axis")) {
this.spacetiles[i].style.backgroundColor=axiscolor;
}
}
}
function highlight(loc, spd) {
var cen=spd-3;
var i=0;
var cell = loc.getAttribute("id");
var X=parseInt(dgebi(cell).getAttribute("name").split(",")[0]);
var Y=parseInt(dgebi(cell).getAttribute("name").split(",")[1]);
var yaa = parseInt(cell) - (lrow * spd);
var yab = parseInt(cell) - (srow * spd);
var l = parseInt(cell) - spd;
var r = parseInt(cell) + spd;
var yba = parseInt(cell) + (srow * spd);
var ybb = parseInt(cell) + (lrow * spd);
var count=spd-1;
clearselect();
for (i=l; i<=r; i++) {
if (i>=0) {
if (i<totaltiles) {
var currentX=parseInt(dgebi(i).getAttribute("name").split(",")[0]);
var currentY=parseInt(dgebi(i).getAttribute("name").split(",")[1]);
if (l>-1) {
var lX=parseInt(dgebi(l).getAttribute("name").split(",")[0]);
}
if (r<totaltiles) {
var rX=parseInt(dgebi(r).getAttribute("name").split(",")[0]);
}
if (X>=5) {
if (currentX<lX) {
//skip
} else {
setStyle(i).backgroundColor=highlightcolor;
}
}
if (X<5) {
if (currentX>rX) {
//skip
} else {
setStyle(i).backgroundColor=highlightcolor;
}
}
} else {
//skip
}
}
}
while (count>=0) {
for (i=yaa+(count)*srow; i<=yab+(count)*lrow; i++) {
if (i>=0) {
if (i<totaltiles) {
var currentX=parseInt(dgebi(i).getAttribute("name").split(",")[0]);
var currentY=parseInt(dgebi(i).getAttribute("name").split(",")[1]);
if (l>-1) {
var lX=parseInt(dgebi(l).getAttribute("name").split(",")[0]);
}
if (r<totaltiles) {
var rX=parseInt(dgebi(r).getAttribute("name").split(",")[0]);
}
if (X>=5) {
if (currentX<lX) {
//skip
} else {
setStyle(i).backgroundColor=highlightcolor;
}
}
if (X<5) {
if (currentX>rX) {
//skip
} else {
setStyle(i).backgroundColor=highlightcolor;
}
}
} else {
//skip
}
}
}
for (i=yba-(count)*lrow; i<=ybb-(count)*srow; i++) {
if (i>=0) {
if (i<totaltiles) {
var currentX=parseInt(dgebi(i).getAttribute("name").split(",")[0]);
var currentY=parseInt(dgebi(i).getAttribute("name").split(",")[1]);
if (l>-1) {
var lX=parseInt(dgebi(l).getAttribute("name").split(",")[0]);
}
if (r<totaltiles) {
var rX=parseInt(dgebi(r).getAttribute("name").split(",")[0]);
}
if (X>=5) {
if (currentX<lX) {
//skip
} else {
setStyle(i).backgroundColor=highlightcolor;
}
}
if (X<5) {
if (currentX>rX) {
//skip
} else {
setStyle(i).backgroundColor=highlightcolor;
}
}
} else {
//skip
}
}
}
count--;
}
}
Right now, I create the highlight one line at a time and move down to the next. I first draw the top, or l (which was originally supposed to be left because that's how I get the bounds) and then I draw the bottom (or r because of the previous reason). Because I use single numbers in the cells ID, the highlight wraps around the map like it's a tube so I look for when the line of hexes being drawn moves either up or down and I skip drawing the unneeded tiles. This works all the way up until size 5. After that, the skipping of a unneeded hexes interferes with the drawing of the needed ones and so the highlight no longer looks nice and round. This would be acceptable but for the fact that as the size increases, the amount of weird also increases.
The rush when I got this working was just as incredible as the disappointment of realizing that it's still not good enough.
Look, I honestly know already that this project is a little too ambitious for me to start off with but I also know that I could finish it if I could work out this issue. I also know my code is bad. Like I said, I just started playing with it. The whole project lives online HERE (if this link is against the rules, I apologize). Keep in mind that this is written on and with the screen of my iPhone 6s plus in mind. Also, on PC to see the map where I'm talking about, you have to find the button in the dom and make it not hidden. It shows up on my phone but not on the PC. I don't know why.
Finally, I'm willing to bet my left shoe that there is a better way to do this. I just don't know what that is. I feel slightly stupid for not being able to figure it out. I found a site with everything about hex grids anyone should want to know but the jargon and the sheer amount of material there makes it hard to understand. I'm actually happy to have gotten this far with just the internet. If my code is so bad that it's hopeless for me to continue, that's fine and I need to know that but just be gentle about it, okay?
Any help in getting the highlight to function past size 5 would be most appreciated. If I'm asking too much or if this isn't the right place to ask for help like this, let me know. I asked on stackoverflow and it didn't go very well so I deleted it. I still don't get the underlying purpose of that site: a help forum where one gets blasted for asking for help. Still, I'm super autistic (really, not a joke) so if I've done something inappropriate please understand that I don't mean it, or realize it.
Thanks in advance for the help if you offer it. If not, thanks for reading it at least, I guess.
The Kalma.
(I know they are a bad group in trek but it still sounds cool).
PS: I got some of the code off the internet. Any use you might want to make of it is fine by me. Again, this is just a project for the fun of it. If you make something cool, I'd love to see it.
Last edited: