Polytopia Web JS

//Game Assets
var tribes = [
  {
    name:"Xin-Xi"
  },
  {
    name:"Imperius"
  },
  {
    name:"Bardur"
  },
  {
    name:"Oumaji"
  },
  {
    name:"Kickoo"
  },
  {
    name:"Hoodrick"
  },
  {
    name:"Luxidoor"
  },
  {
    name:"Vengir"
  },
  {
    name:"Zebasi"
  },
  {
    name:"Ai-Mo"
  },
  {
    name:"Quetzali"
  },
  {
    name:"Yadakk"
  },
  {
    name:"Aquarion"
  },
  {
    name:"Elyrion"
  },
  {
    name:"Polaris"
  },
];

//Game Settings
var gamemode = "domination";
var playerNum = 2;
var computerNum = 0;
var scoreToWin = 10000;
var timeLimit = 9999;
var mapWidth = 11;
var mapHeight = 11;
var maxResources = 9999;
var permaVision = true;
var hpMod = 1;
var atkMod = 1;
var defMod = 1;

//Game Info
var players = [];

function defaultRules() {
  gamemode = document.getElementById("gamemode").value;
  playerNum = document.getElementById("players").value;
  if (gamemode == "domination") {
    document.getElementById("stwContainer").style = "display:none;";
    //computerNum = playerNum - 1;
    timeLimit = 9999;
    maxResources = 9999;
    permaVision = true;
    mapWidth = Math.ceil(Math.sqrt(playerNum*50));
    mapHeight = Math.ceil(Math.sqrt(playerNum*50));
    hpMod = 1;
    atkMod = 1;
    defMod = 1;
  } else if (gamemode == "glory") {
    document.getElementById("stwContainer").style = "";
    //computerNum = playerNum - 1;
    scoreToWin = 10000;
    timeLimit = 9999;
    maxResources = 9999;
    permaVision = true;
    mapWidth = Math.ceil(Math.sqrt(playerNum*50));
    mapHeight = Math.ceil(Math.sqrt(playerNum*50));
    hpMod = 1;
    atkMod = 1;
    defMod = 1;
  } else if (gamemode == "perfection") {
    document.getElementById("stwContainer").style = "display:none;";
    //computerNum = playerNum - 1;
    timeLimit = 30;
    maxResources = 9999;
    permaVision = true;
    mapWidth = Math.ceil(Math.sqrt(playerNum*50));
    mapHeight = Math.ceil(Math.sqrt(playerNum*50));
    hpMod = 1;
    atkMod = 1;
    defMod = 1;
  }
  document.getElementById("timelimit").value = timeLimit;
  document.getElementById("maxresources").value = maxResources;
  document.getElementById("permavision").checked = permaVision;
  document.getElementById("width").value = mapWidth;
  document.getElementById("height").value = mapHeight;
  document.getElementById("hpMod").value = hpMod;
  document.getElementById("atkMod").value = atkMod;
  document.getElementById("defMod").value = defMod;
}

function startGame() {
  //Set Game Settings
  gamemode = document.getElementById("gamemode").value;
  playerNum = Math.round(document.getElementById("players").value);
  if (playerNum < 2) {
    playerNum = 2;
  } else if (playerNum > 8) {
    playerNum = 8;
  }
  computerNum = Math.round(document.getElementById("computers").value);
  scoreToWin = Math.round(document.getElementById("scoretowin").value);
  if (scoreToWin < 1) {
    scoreToWin = 1;
  }
  timeLimit = Math.round(document.getElementById("timelimit").value);
  if (timeLimit < 1) {
    timeLimit = 1;
  }
  maxResources = Math.round(document.getElementById("maxresources").value);
  if (maxResources < 1) {
    maxResources = 1;
  }
  permaVision = Math.round(document.getElementById("permavision").checked);
  mapWidth = Math.round(document.getElementById("width").value);
  mapHeight = Math.round(document.getElementById("height").value);
  if (mapWidth < 5) {
    mapWidth = 5;
  } else if (mapWidth > 25) {
    mapWidth = 25;
  }
  if (mapHeight < 5) {
    mapHeight = 5;
  } else if (mapHeight > 25) {
    mapHeight = 25;
  }
  if (mapWidth*mapHeight < playerNum*50) {
    mapWidth = Math.ceil(Math.sqrt(playerNum*50));
    mapHeight = Math.ceil(Math.sqrt(playerNum*50));
  }
  hpMod = document.getElementById("hpMod").value;
  atkMod = document.getElementById("atkMod").value;
  defMod = document.getElementById("defMod").value;
  document.getElementById("startGame").style = "display:none;";

  //Tribe Selects
  document.getElementById("tribeSelect").innerHTML = "";
  document.getElementById("tribeSelect").style = "";
  for (var i=0; i<playerNum; i++) {
    document.getElementById("tribeSelect").innerHTML += '<div><h2>Player '+(i+1)+'</h2><input type="text" id="playerName'+(i+1)+'" name="playerName'+(i+1)+'" value="Player '+(i+1)+'" maxlength="20"></div><br>';
    var tribeOptions = '<option value="random">Random</option>';
    for (var k=0; k<tribes.length; k++){
      tribeOptions += '<option value="'+k+'">'+tribes[k].name+'</option>';
    }
    document.getElementById("tribeSelect").innerHTML += '<select name="tribe'+i+'" id="tribe'+i+'">'+tribeOptions+'</select>';
  }
  document.getElementById("tribeSelect").innerHTML += "<br><br><hr><br><button onclick='generateWorld()'>Generate World</button>";
}

function generateWorld() {
  document.getElementById("tribeSelect").style = "display:none;";
  document.getElementById("game").style="";
  for (var i=0; i<playerNum; i++) {
    var getTribe;
    if (document.getElementById("tribe"+i).value == "random") {
       getTribe = tribes[randomNum(0,(tribes.length - 1))];
    } else {
      getTribe = tribes[document.getElementById("tribe"+i).value];
    }
    players.push(
      {
        name:document.getElementById("playerName"+(i+1)).value,
        tribe:getTribe,
      }
    );
  }

  for (var h=0; h<mapHeight; h++) {
    document.getElementById("board").innerHTML += '<div id="row'+h+'" style="display:inline-block;"></div>';
    for (var w=0; w<mapWidth; w++) {
      document.getElementById("row"+h).innerHTML += '<div id="tile'+w+'_'+h+'" style="background-color:red; height:50px; width:50px;" onclick="tileAction('+w+','+h+')"></div>';
    }
  }
}

function tileAction(x_val,y_val) {
  console.log(x_val +" "+ y_val)
}

function randomNum(min, max) {
  return Math.floor(Math.random() * (max - min + 1) ) + min;
}