add ressources & planet buildings view

4 years ago · d14d408176
24 changed files with 899 additions and 59 deletions
--- a/buildings.html
+++ b/buildings.html
@ -0,0 +1,354 @@
 <!doctype html>
 <html lang="en">

 <head>
  <!-- Required meta tags -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

  <!-- Bootstrap CSS -->
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
  <link rel="stylesheet" href="css/style.css">
  <link rel="stylesheet" href="css/dark-theme.css">

  <title>gogame</title>
 </head>

 <body class="dark-theme">
  <div class="container">
    <table class="resourcesTable" style="margin-left:auto;margin-right:auto;">
      <thead>
        <tr>
          <th scope="col">
            <img src="images/metal.png">
            <br>
            Metal
          </th>
          <th scope="col">
            <img src="images/crystal.png">
            <br>
            Crystal
          </th>
          <th scope="col">
            <img src="images/deuterium.png">
            <br>
            Detuerium
          </th>
          <th scope="col">
            <img src="images/energy.png">
            <br>
            Energy
          </th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td id="metal"></td>
          <td id="crystal"></td>
          <td id="deuterium"></td>
          <td id="energy"></td>
        </tr>
      </tbody>
    </table>
    <div class="row">
      <div class="col-sm-2">
        <br><br><br><br><br>
        <a href="dashboard.html">Dashboard</a><br>
        <a href="buildings.html">Buildings</a>

        <br><br><br><br><br>
        <div onclick="logout()" class="btn btn-primary">Logout</div>
      </div>
      <div class="col-sm-10">
        User Name: <span id="name"></span>
        <br>
        Planet Name: <span id="planetname"></span>

        <table>
          <tbody>
            <tr>
              <th>Fields</th>
              <th>
                <!-- <font color="#00FF00">75</font> / <font color="#FF0000">250</font> - still 175 Free fields for construction -->
              </th>
            </tr>
            <tr>
              <td>
                <img src="images/buildings/metalmine.png" width="120" height="120" border="0" align="top">
              </td>
              <td>
                <a href="#">Metal Mine</a> <span id="metalmineLevel">(Level 0)</span><br>
                Used in the extraction of metal ore, metal mines are of primary importance to all emerging and established empires.<br>
                <div id="metalmineResources"></div>
                Construction Time: 00h 00m 00s
                <br>
              </td>
              <td>
                <div id="btnBuildMetalMine">

                </div>
              </td>
            </tr>
            <tr>
              <td>
                <a href="infos.php?gid=2">
                  <img src="images/buildings/crystalmine.png" width="120" height="120" border="0" align="top">
                </a>
              </td>
              <td>
                <a href="infos.php?gid=2">Crystal Mine</a> <span id="crystalmineLevel">(Level 0)</span><br>
                Crystals are the main resource used to build electronic circuits and form certain alloy compounds.<br>
                <div id="crystalmineResources"></div>
                <br>
              </td>
              <td>
                <div id="btnBuildCrystalMine">

                </div>
              </td>
            </tr>
            <tr>
              <td>
                <a href="infos.php?gid=3">
                  <img src="images/buildings/deuteriummine.png" width="120" height="120" border="0" align="top">
                </a>
              </td>
              <td>
                <a href="infos.php?gid=3">Deuterium Synthesizer</a> <span id="deuteriummineLevel">(Level 0)</span><br>
                Deuterium is used as fuel for spaceships and is harvested in the deep sea. Deuterium is a rare substance and is thus relatively expensive.<br>
                <div id="deuteriummineResources"></div>
                <br>
              </td>
              <td>
                <div id="btnBuildDeuteriumMine">

                </div>
              </td>
            </tr>
            <tr>
              <td>
                <a href="infos.php?gid=4">
                  <img src="images/buildings/solarmine.png" width="120" height="120" border="0" align="top">
                </a>
              </td>
              <td>
                <a href="infos.php?gid=4">Solar Plant</a> <span id="energymineLevel">(Level 0)</span><br>
                Solar power plants absorb energy from solar radiation. All mines need energy to operate.<br>
                <div id="energymineResources"></div>
                <br>
              </td>
              <td>
                <div id="btnBuildEnergyMine">

                </div>
              </td>
            </tr>
            <tr>
              <td>
                <a href="infos.php?gid=12">
                  <img src="images/buildings/fusionreactor.png" width="120" height="120" border="0" align="top">
                </a>
              </td>
              <td>
                <a href="infos.php?gid=12">Fusion Reactor</a> <span id="fusionreactorLevel">(Level 0)</span><br>
                The fusion reactor uses deuterium to produce energy.<br>
                <div id="fusionreactorResources"></div>
                <br>
              </td>
              <td>
                <div id="btnBuildFusionReactor">

                </div>
              </td>
            </tr>
            <tr>
              <td>
                <a href="infos.php?gid=14">
                  <img src="images/buildings/roboticsfactory.png" width="120" height="120" border="0" align="top">
                </a>
              </td>
              <td>
                <a href="infos.php?gid=14">Robotics Factory</a> <span id="roboticsfactoryLevel">(Level 0)</span><br>
                Robotic factories provide construction robots to aid in the construction of buildings. Each level increases the speed of the upgrade of buildings.<br>
                <div id="roboticsfactoryResources"></div>
                <br>
              </td>
              <td>
                <div id="btnBuildRoboticsFactory">

                </div>
              </td>
            </tr>
            <tr>
              <td>
                <a href="infos.php?gid=21">
                  <img src="images/buildings/shipyard.png" width="120" height="120" border="0" align="top">
                </a>
              </td>
              <td>
                <a href="infos.php?gid=21">Shipyard</a> <span id="shipyardLevel">(Level 0)</span><br>
                All types of ships and defensive facilities are built in the planetary shipyard.<br>
                <div id="shipyardResources"></div>
                <br>
              </td>
              <td>
                <div id="btnBuildShipyard">

                </div>
              </td>
            </tr>
            <tr>
              <td>
                <a href="infos.php?gid=22">
                  <img src="images/buildings/metalstorage.png" width="120" height="120" border="0" align="top">
                </a>
              </td>
              <td>
                <a href="infos.php?gid=22">Metal Storage</a> <span id="metalstorageLevel">(Level 0)</span><br>
                Provides storage for excess metal.<br>
                <div id="metalstorageResources"></div>
                <br>
              </td>
              <td>
                <div id="btnBuildMetalStorage">

                </div>
              </td>
            </tr>
            <tr>
              <td>
                <a href="infos.php?gid=23">
                  <img src="images/buildings/crystalstorage.png" width="120" height="120" border="0" align="top">
                </a>
              </td>
              <td>
                <a href="infos.php?gid=23">Crystal Storage</a> <span id="crystalstorageLevel">(Level 0)</span><br>
                Provides storage for excess crystal.<br>
                <div id="crystalstorageResources"></div>
                <br>
              </td>
              <td>
                <div id="btnBuildCrystalStorage">

                </div>
              </td>
            </tr>
            <tr>
              <td>
                <a href="infos.php?gid=24">
                  <img src="images/buildings/deuteriumstorage.png" width="120" height="120" border="0" align="top">
                </a>
              </td>
              <td>
                <a href="infos.php?gid=24">Deuterium Tank</a> <span id="deuteriumstorageLevel">(Level 0)</span><br>
                Giant tanks for storing newly-extracted deuterium.<br>
                <div id="deuteriumstorageResources"></div>
                <br>
              </td>
              <td>
                <div id="btnBuildDeuteriumStorage">

                </div>
              </td>
            </tr>
            <tr>
              <td>
                <a href="infos.php?gid=31">
                  <img src="images/buildings/ressearchlab.png" width="120" height="120" border="0" align="top">
                </a>
              </td>
              <td>
                <a href="infos.php?gid=31">Research Lab</a> <span id="ressearchlabLevel">(Level 0)</span><br>
                A research lab is required in order to conduct research into new technologies.<br>
                <div id="ressearchlabResources"></div>
                <br>
              </td>
              <td>
                <div id="btnBuildRessearchLab">

                </div>
              </td>
            </tr>
            <tr>
              <td>
                <a href="infos.php?gid=34">
                  <img src="images/buildings/alliancedepot.png" width="120" height="120" border="0" align="top">
                </a>
              </td>
              <td>
                <a href="infos.php?gid=34">Alliance Depot</a> <span id="alliancedepotLevel">(Level 0)</span><br>
                The alliance depot supplies fuel to friendly fleets in orbit helping with defense.<br>
                <div id="alliancedepotResources"></div>
                <br>
              </td>
              <td>
                <div id="btnBuildAllianceDepot">

                </div>
              </td>
            </tr>
            <tr>
              <td>
                <a href="infos.php?gid=44">
                  <img src="images/buildings/missilesilo.png" width="120" height="120" border="0" align="top">
                </a>
              </td>
              <td>
                <a href="infos.php?gid=44">Missile Silo</a> <span id="missilesiloLevel">(Level 0)</span><br>
                Perfect to store missiles<br>
                <div id="missilesiloResources"></div>
                <br>
              </td>
              <td>
                <div id="btnBuildMissileSilo">

                </div>
              </td>
            </tr>
            <tr>
              <td>
                <a href="infos.php?gid=80">
                  <img src="images/buildings/spacedock.png" width="120" height="120" border="0" align="top">
                </a>
              </td>
              <td>
                <a href="infos.php?gid=80">Spacedock</a> <span id="spacedockLevel">(Level 0)</span><br>
                The space dock offers the possibility to repair destroyed ships that have left a wreckage field as a result of a battle. The maximum repair time is 12 hours, but it takes at least 30 minutes until the ships can be put into service.
                <br>From
                the formation of the wreck field there are 3 days time to start the repair. The repaired ships must be actively put back into service after the repair has expired. If this does not happen, they automatically return to service after 3
                days. <br>Since the space dock floats in orbit, it does not require planetary fields.
                <div id="spacedockResources"></div>
                <br>
              </td>
              <td>
                <div id="btnBuildSpacedock">

                </div>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>


  </div>


  <!-- Optional JavaScript -->
  <!-- jQuery first, then Popper.js, then Bootstrap JS -->
  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>

  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>


  <script src="constants.js"></script>
  <script src="calc.js"></script>
  <script src="user.js"></script>
  <script src="buildings.js"></script>

 </body>

 </html>
--- a/buildings.js
+++ b/buildings.js
@ -0,0 +1,212 @@
 function printResources(r) {
  let html = "";
  html += `Requires:`;
  if (r.Metal <= user.Resources.Metal) {
    html += ` Metal: <b style="color:lime;">` + r.Metal + `</b>`;
  } else {
    html += ` Metal: <b style="color:red;">` + r.Metal + `</b>`;
  }

  if (r.Crystal <= user.Resources.Crystal) {
    html += ` Crystal: <b style="color:lime;">` + r.Crystal + `</b>`;
  } else {
    html += ` Crystal: <b style="color:red;">` + r.Crystal + `</b>`;
  }

  if (r.Deuterium <= user.Resources.Deuterium) {
    html += ` Deuterium: <b style="color:lime;">` + r.Deuterium + `</b>`;
  } else {
    html += ` Deuterium: <b style="color:red;">` + r.Deuterium + `</b>`;
  }

  if (r.Energy <= user.Resources.Energy) {
    html += ` Energy: <b style="color: lime;">` + r.Energy + `</b>`;
  } else {
    html += ` Energy: <b style="color: red;">` + r.Energy + `</b>`;
  }

  return html;
 }
 function printPlanet(planet) {
  let r = {};
  document.getElementById("planetname").innerHTML = planet.Name;

  // metalmine
  document.getElementById("metalmineLevel").innerHTML = "(Level " + planet.Buildings.metalmine + ")";
  if (planet.Buildings.metalmine == undefined) {
    document.getElementById("btnBuildMetalMine").innerHTML = "Build building";
    r = metalmineCost(1);
    document.getElementById("metalmineResources").innerHTML = printResources(r);
  } else {
    document.getElementById("btnBuildMetalMine").innerHTML = "Build level " + (+ (planet.Buildings.metalmine) + + (1));
    r = metalmineCost((+ (planet.Buildings.metalmine) + + (1)));
    document.getElementById("metalmineResources").innerHTML = printResources(r);
  }

  // crystalmine
  document.getElementById("crystalmineLevel").innerHTML = "(Level " + planet.Buildings.crystalmine + ")";
  if (planet.Buildings.crystalmine == undefined) {
    document.getElementById("btnBuildCrystalMine").innerHTML = "Build building";
    r = crystalmineCost(1);
    document.getElementById("crystalmineResources").innerHTML = printResources(r);
  } else {
    document.getElementById("btnBuildCrystalMine").innerHTML = "Build level " + (+ (planet.Buildings.crystalmine) + + (1));
    r = crystalmineCost((+ (planet.Buildings.crystalmine) + + (1)));
    document.getElementById("crystalmineResources").innerHTML = printResources(r);
  }

  // deuteriummine
  document.getElementById("deuteriummineLevel").innerHTML = "(Level " + planet.Buildings.deuteriummine + ")";
  if (planet.Buildings.deuteriummine == undefined) {
    document.getElementById("btnBuildDeuteriumMine").innerHTML = "Build building";
    r = deuteriummineCost(1);
    document.getElementById("deuteriummineResources").innerHTML = printResources(r);
  } else {
    document.getElementById("btnBuildDeuteriumMine").innerHTML = "Build level " + (+ (planet.Buildings.deuteriummine) + + (1));
    r = deuteriummineCost((+ (planet.Buildings.deuteriummine) + + (1)));
    document.getElementById("deuteriummineResources").innerHTML = printResources(r);
  }

  // energymine
  document.getElementById("energymineLevel").innerHTML = "(Level " + planet.Buildings.energymine + ")";
  if (planet.Buildings.energymine == undefined) {
    document.getElementById("btnBuildEnergyMine").innerHTML = "Build building";
    r = energymineCost(1);
    document.getElementById("energymineResources").innerHTML = printResources(r);
  } else {
    document.getElementById("btnBuildEnergyMine").innerHTML = "Build level " + (+ (planet.Buildings.energymine) + + (1));
    r = energymineCost((+ (planet.Buildings.energymine) + + (1)));
    document.getElementById("energymineResources").innerHTML = printResources(r);
  }

  // fusionreactor
  document.getElementById("fusionreactorLevel").innerHTML = "(Level " + planet.Buildings.fusionreactor + ")";
  if (planet.Buildings.fusionreactor == undefined) {
    document.getElementById("btnBuildFusionReactor").innerHTML = "Build building";
    r = fusionreactorCost(1);
    document.getElementById("fusionreactorResources").innerHTML = printResources(r);
  } else {
    document.getElementById("btnBuildFusionReactor").innerHTML = "Build level " + (+ (planet.Buildings.fusionreactor) + + (1));
    r = fusionreactorCost((+ (planet.Buildings.fusionreactor) + + (1)));
    document.getElementById("fusionreactorResources").innerHTML = printResources(r);
  }

  // roboticsfactory
  document.getElementById("roboticsfactoryLevel").innerHTML = "(Level " + planet.Buildings.roboticsfactory + ")";
  if (planet.Buildings.roboticsfactory == undefined) {
    document.getElementById("btnBuildRoboticsFactory").innerHTML = "Build building";
    r = roboticsfactoryCost(1);
    document.getElementById("roboticsfactoryResources").innerHTML = printResources(r);
  } else {
    document.getElementById("btnBuildRoboticsFactory").innerHTML = "Build level " + (+ (planet.Buildings.roboticsfactory) + + (1));
    r = roboticsfactoryCost((+ (planet.Buildings.roboticsfactory) + + (1)));
    document.getElementById("roboticsfactoryResources").innerHTML = printResources(r);
  }

  // shipyard
  document.getElementById("shipyardLevel").innerHTML = "(Level " + planet.Buildings.shipyard + ")";
  if (planet.Buildings.shipyard == undefined) {
    document.getElementById("btnBuildShipyard").innerHTML = "Build building";
    r = shipyardCost(1);
    document.getElementById("shipyardResources").innerHTML = printResources(r);
  } else {
    document.getElementById("btnBuildShipyard").innerHTML = "Build level " + (+ (planet.Buildings.shipyard) + + (1));
    r = shipyardCost((+ (planet.Buildings.shipyard) + + (1)));
    document.getElementById("shipyardResources").innerHTML = printResources(r);
  }

  // metalstorage
  document.getElementById("metalstorageLevel").innerHTML = "(Level " + planet.Buildings.metalstorage + ")";
  if (planet.Buildings.metalstorage == undefined) {
    document.getElementById("btnBuildMetalStorage").innerHTML = "Build building";
    r = metalstorageCost(1);
    document.getElementById("metalstorageResources").innerHTML = printResources(r);
  } else {
    document.getElementById("btnBuildMetalStorage").innerHTML = "Build level " + (+ (planet.Buildings.metalstorage) + + (1));
    r = metalstorageCost((+ (planet.Buildings.metalstorage) + + (1)));
    document.getElementById("metalstorageResources").innerHTML = printResources(r);
  }

  // crystalstorage
  document.getElementById("crystalstorageLevel").innerHTML = "(Level " + planet.Buildings.crystalstorage + ")";
  if (planet.Buildings.crystalstorage == undefined) {
    document.getElementById("btnBuildCrystalStorage").innerHTML = "Build building";
    r = crystalstorageCost(1);
    document.getElementById("crystalstorageResources").innerHTML = printResources(r);
  } else {
    document.getElementById("btnBuildCrystalStorage").innerHTML = "Build level " + (+ (planet.Buildings.crystalstorage) + + (1));
    r = crystalstorageCost((+ (planet.Buildings.crystalstorage) + + (1)));
    document.getElementById("crystalstorageResources").innerHTML = printResources(r);
  }

  // deuteriumstorage
  document.getElementById("deuteriumstorageLevel").innerHTML = "(Level " + planet.Buildings.deuteriumstorage + ")";
  if (planet.Buildings.deuteriumstorage == undefined) {
    document.getElementById("btnBuildDeuteriumStorage").innerHTML = "Build building";
    r = deuteriumstorageCost(1);
    document.getElementById("deuteriumstorageResources").innerHTML = printResources(r);
  } else {
    document.getElementById("btnBuildDeuteriumStorage").innerHTML = "Build level " + (+ (planet.Buildings.deuteriumstorage) + + (1));
    r = deuteriumstorageCost((+ (planet.Buildings.deuteriumstorage) + + (1)));
    document.getElementById("deuteriumstorageResources").innerHTML = printResources(r);
  }

  // ressearchlab
  document.getElementById("ressearchlabLevel").innerHTML = "(Level " + planet.Buildings.ressearchlab + ")";
  if (planet.Buildings.ressearchlab == undefined) {
    document.getElementById("btnBuildRessearchLab").innerHTML = "Build building";
    r = ressearchlabCost(1);
    document.getElementById("ressearchlabResources").innerHTML = printResources(r);
  } else {
    document.getElementById("btnBuildRessearchLab").innerHTML = "Build level " + (+ (planet.Buildings.ressearchlab) + + (1));
    r = ressearchlabCost((+ (planet.Buildings.ressearchlab) + + (1)));
    document.getElementById("ressearchlabResources").innerHTML = printResources(r);
  }

  // alliancedepot
  document.getElementById("alliancedepotLevel").innerHTML = "(Level " + planet.Buildings.alliancedepot + ")";
  if (planet.Buildings.alliancedepot == undefined) {
    document.getElementById("btnBuildAllianceDepot").innerHTML = "Build building";
    r = alliancedepotCost(1);
    document.getElementById("alliancedepotResources").innerHTML = printResources(r);
  } else {
    document.getElementById("btnBuildAllianceDepot").innerHTML = "Build level " + (+ (planet.Buildings.alliancedepot) + + (1));
    r = alliancedepotCost((+ (planet.Buildings.alliancedepot) + + (1)));
    document.getElementById("alliancedepotResources").innerHTML = printResources(r);
  }

  // missilesilo
  document.getElementById("missilesiloLevel").innerHTML = "(Level " + planet.Buildings.missilesilo + ")";
  if (planet.Buildings.missilesilo == undefined) {
    document.getElementById("btnBuildMissileSilo").innerHTML = "Build building";
    r = missilesiloCost(1);
    document.getElementById("missilesiloResources").innerHTML = printResources(r);
  } else {
    document.getElementById("btnBuildMissileSilo").innerHTML = "Build level " + (+ (planet.Buildings.missilesilo) + + (1));
    r = missilesiloCost((+ (planet.Buildings.missilesilo) + + (1)));
    document.getElementById("missilesiloResources").innerHTML = printResources(r);
  }

  // spacedock
  document.getElementById("spacedockLevel").innerHTML = "(Level " + planet.Buildings.spacedock + ")";
  if (planet.Buildings.spacedock == undefined) {
    document.getElementById("btnBuildSpacedock").innerHTML = "Build building";
    r = spacedockCost(1);
    document.getElementById("spacedockResources").innerHTML = printResources(r);
  } else {
    document.getElementById("btnBuildSpacedock").innerHTML = "Build level " + (+ (planet.Buildings.spacedock) + + (1));
    r = spacedockCost((+ (planet.Buildings.spacedock) + + (1)));
    document.getElementById("spacedockResources").innerHTML = printResources(r);
  }
 }

 let planetid = localStorage.getItem("mainplanet");
 let planet = {};
 // get user data
 axios.get(url + "/planets/" + planetid, config).then(function(res) {
  console.log("buildings", res.data);
  planet = res.data.planet;
  printPlanet(planet);
 }).catch(function(error) {
  console.log(error);
 });
--- a/calc.js
+++ b/calc.js
@ -0,0 +1,211 @@
 function metalmineCost(lvl) {
  const base = {
 		Metal:     60,
 		Crystal:   15,
 		Deuterium: 0,
 		Energy:    0,
 	};
  // cost = base * 1.5^(lvl-1)
  let cost = {};
  cost.Metal = Math.round(base.Metal * 1.5**(lvl-1));
  cost.Crystal = Math.round(base.Crystal * 1.5**(lvl-1));
  cost.Deuterium = Math.round(base.Deuterium * 1.5**(lvl-1));
  cost.Energy = Math.round(base.Energy * 1.5**(lvl-1));
  return cost;
 }
 function crystalmineCost(lvl) {
  const base = {
 		Metal:     48,
 		Crystal:   24,
 		Deuterium: 0,
 		Energy:    0,
 	};
 	// cost = base * 1.6^(lvl-1)
  let cost = {};
  cost.Metal = Math.round(base.Metal * 1.6**(lvl-1));
  cost.Crystal = Math.round(base.Crystal * 1.6**(lvl-1));
  cost.Deuterium = Math.round(base.Deuterium * 1.6**(lvl-1));
  cost.Energy = Math.round(base.Energy * 1.6**(lvl-1));
  return cost;
 }
 function deuteriummineCost(lvl) {
  const base = {
 		Metal:     225,
 		Crystal:   75,
 		Deuterium: 0,
 		Energy:    0,
 	};
  // cost = base * 1.5^(lvl-1)
  let cost = {};
  cost.Metal = Math.round(base.Metal * 1.5**(lvl-1));
  cost.Crystal = Math.round(base.Crystal * 1.5**(lvl-1));
  cost.Deuterium = Math.round(base.Deuterium * 1.5**(lvl-1));
  cost.Energy = Math.round(base.Energy * 1.5**(lvl-1));
  return cost;
 }
 function energymineCost(lvl) {
  const base = {
 		Metal:     75,
 		Crystal:   30,
 		Deuterium: 0,
 		Energy:    0,
 	};
  // cost = base * 1.5^(lvl-1)
  let cost = {};
  cost.Metal = Math.round(base.Metal * 1.5**(lvl-1));
  cost.Crystal = Math.round(base.Crystal * 1.5**(lvl-1));
  cost.Deuterium = Math.round(base.Deuterium * 1.5**(lvl-1));
  cost.Energy = Math.round(base.Energy * 1.5**(lvl-1));
  return cost;
 }
 function fusionreactorCost(lvl) {
  const base = {
 		Metal:     900,
 		Crystal:   360,
 		Deuterium: 180,
 		Energy:    0,
 	};
  // cost = base * 1.8^(lvl-1)
  let cost = {};
  cost.Metal = Math.round(base.Metal * 1.8**(lvl-1));
  cost.Crystal = Math.round(base.Crystal * 1.8**(lvl-1));
  cost.Deuterium = Math.round(base.Deuterium * 1.8**(lvl-1));
  cost.Energy = Math.round(base.Energy * 1.8**(lvl-1));
  return cost;
 }
 function roboticsfactoryCost(lvl) {
  const base = {
 		Metal:     400,
 		Crystal:   120,
 		Deuterium: 200,
 		Energy:    0,
 	};
  // cost = base * 2^(lvl-1)
  let cost = {};
  cost.Metal = Math.round(base.Metal * 2**(lvl-1));
  cost.Crystal = Math.round(base.Crystal * 2**(lvl-1));
  cost.Deuterium = Math.round(base.Deuterium * 2**(lvl-1));
  cost.Energy = Math.round(base.Energy * 2**(lvl-1));
  return cost;
 }
 function shipyardCost(lvl) {
  const base = {
 		Metal:     400,
 		Crystal:   200,
 		Deuterium: 100,
 		Energy:    0,
 	};
  // cost = base * 2^(lvl-1)
  let cost = {};
  cost.Metal = Math.round(base.Metal * 2**(lvl-1));
  cost.Crystal = Math.round(base.Crystal * 2**(lvl-1));
  cost.Deuterium = Math.round(base.Deuterium * 2**(lvl-1));
  cost.Energy = Math.round(base.Energy * 2**(lvl-1));
  return cost;
 }
 function metalstorageCost(lvl) {
  const base = {
 		Metal:     1000,
 		Crystal:   0,
 		Deuterium: 0,
 		Energy:    0,
 	};
  // cost = base * 2^(lvl-1)
  let cost = {};
  cost.Metal = Math.round(base.Metal * 2**(lvl-1));
  cost.Crystal = 0;
  cost.Deuterium = 0;
  cost.Energy = 0;
  return cost;
 }
 function crystalstorageCost(lvl) {
  const base = {
 		Metal:     1000,
 		Crystal:   500,
 		Deuterium: 0,
 		Energy:    0,
 	};
  // cost = base * 2^(lvl-1)
  let cost = {};
  cost.Metal = Math.round(base.Metal * 2**(lvl-1));
  cost.Crystal = Math.round(base.Crystal * 2**(lvl-1));
  cost.Deuterium = Math.round(base.Deuterium * 2**(lvl-1));
  cost.Energy = Math.round(base.Energy * 2**(lvl-1));
  return cost;
 }
 function deuteriumstorageCost(lvl) {
  const base = {
 		Metal:     1000,
 		Crystal:   1000,
 		Deuterium: 0,
 		Energy:    0,
 	};
  // cost = base * 2^(lvl-1)
  let cost = {};
  cost.Metal = Math.round(base.Metal * 2**(lvl-1));
  cost.Crystal = Math.round(base.Crystal * 2**(lvl-1));
  cost.Deuterium = Math.round(base.Deuterium * 2**(lvl-1));
  cost.Energy = Math.round(base.Energy * 2**(lvl-1));
  return cost;
 }
 function ressearchlabCost(lvl) {
  const base = {
 		Metal:     200,
 		Crystal:   400,
 		Deuterium: 200,
 		Energy:    0,
 	};
  // cost = base * 1.5^(lvl-1)
  let cost = {};
  cost.Metal = Math.round(base.Metal * 1.5**(lvl-1));
  cost.Crystal = Math.round(base.Crystal * 1.5**(lvl-1));
  cost.Deuterium = Math.round(base.Deuterium * 1.5**(lvl-1));
  cost.Energy = Math.round(base.Energy * 1.5**(lvl-1));
  return cost;
 }

 function alliancedepotCost(lvl) {
  const base = {
 		Metal:     20000,
 		Crystal:   40000,
 		Deuterium: 0,
 		Energy:    0,
 	};
  // cost = base * 2^(lvl-1)
  let cost = {};
  cost.Metal = Math.round(base.Metal * 2**(lvl-1));
  cost.Crystal = Math.round(base.Crystal * 2**(lvl-1));
  cost.Deuterium = Math.round(base.Deuterium * 2**(lvl-1));
  cost.Energy = Math.round(base.Energy * 2**(lvl-1));
  return cost;
 }
 function missilesiloCost(lvl) {
  const base = {
 		Metal:     20000,
 		Crystal:   20000,
 		Deuterium: 1000,
 		Energy:    0,
 	};
  // cost = base * 2^(lvl-1)
  let cost = {};
  cost.Metal = Math.round(base.Metal * 2**(lvl-1));
  cost.Crystal = Math.round(base.Crystal * 2**(lvl-1));
  cost.Deuterium = Math.round(base.Deuterium * 2**(lvl-1));
  cost.Energy = Math.round(base.Energy * 2**(lvl-1));
  return cost;
 }
 function spacedockCost(lvl) {
  const base = {
 		Metal:     20000,
 		Crystal:   20000,
 		Deuterium: 1000,
 		Energy:    0,
 	};
  // cost = base * 2^(lvl-1)
  let cost = {};
  cost.Metal = Math.round(base.Metal * 2**(lvl-1));
  cost.Crystal = Math.round(base.Crystal * 2**(lvl-1));
  cost.Deuterium = Math.round(base.Deuterium * 2**(lvl-1));
  cost.Energy = Math.round(base.Energy * 2**(lvl-1));
  return cost;
 }
--- a/dashboard.html
+++ b/dashboard.html
@ -1,64 +1,88 @@
 <!doctype html>
 <html lang="en">

 <head>
  <!-- Required meta tags -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

  <!-- Bootstrap CSS -->
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
  <link rel="stylesheet" href="css/style.css">
  <link rel="stylesheet" href="css/dark-theme.css">

  <title>gogame</title>
 </head>

 <body class="dark-theme">
  <div class="container">

    <h3>Dashboard</h3>
    User Name: <span id="name"></span>

    <br><br>
    <table class="resourcesTable">
      <thead>
        <tr>
          <th scope="col">Metal</th>
          <th scope="col">Crystal</th>
          <th scope="col">Detuerium</th>
          <th scope="col">Energy</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td id="metal"></td>
          <td id="crystal"></td>
          <td id="deuterium"></td>
          <td id="energy"></td>
        </tr>
      </tbody>
    </table>

    <br><br><br><br><br>
    <div onclick="logout()" class="btn btn-primary">Logout</div>
  </div>
  </div>
  </div>


  <!-- Optional JavaScript -->
  <!-- jQuery first, then Popper.js, then Bootstrap JS -->
  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>

  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>


  <script src="constants.js"></script>
  <script src="dashboard.js"></script>

 </body>
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="css/dark-theme.css">

    <title>gogame</title>
  </head>

  <body class="dark-theme">
    <div class="container">
      <table class="resourcesTable" style="margin-left:auto;margin-right:auto;">
        <thead>
          <tr>
            <th scope="col">
              <img src="images/metal.png">
              <br>
              Metal
            </th>
            <th scope="col">
              <img src="images/crystal.png">
              <br>
              Crystal
            </th>
            <th scope="col">
              <img src="images/deuterium.png">
              <br>
              Detuerium
            </th>
            <th scope="col">
              <img src="images/energy.png">
              <br>
              Energy
            </th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td id="metal"></td>
            <td id="crystal"></td>
            <td id="deuterium"></td>
            <td id="energy"></td>
          </tr>
        </tbody>
      </table>
      <div class="row">
        <div class="col-sm-4">
          <br><br><br><br><br>
          <a href="dashboard.html">Dashboard</a><br>
          <a href="buildings.html">Buildings</a>

          <br><br><br><br><br>
          <div onclick="logout()" class="btn btn-primary">Logout</div>
        </div>
        <div class="col-sm-4">
          <h3>Dashboard</h3>
          User Name: <span id="name"></span>


        </div>
      </div>


    </div>


    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>

    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>


    <script src="constants.js"></script>
    <script src="user.js"></script>

  </body>

 </html>
--- a/images/buildings/alliancedepot.png
+++ b/images/buildings/alliancedepot.png
--- a/images/buildings/crystalmine.png
+++ b/images/buildings/crystalmine.png
--- a/images/buildings/crystalstorage.png
+++ b/images/buildings/crystalstorage.png
--- a/images/buildings/deuteriummine.png
+++ b/images/buildings/deuteriummine.png
--- a/images/buildings/deuteriumstorage.png
+++ b/images/buildings/deuteriumstorage.png
--- a/images/buildings/fusionreactor.png
+++ b/images/buildings/fusionreactor.png
--- a/images/buildings/metalmine.png
+++ b/images/buildings/metalmine.png
--- a/images/buildings/metalstorage.png
+++ b/images/buildings/metalstorage.png
--- a/images/buildings/missilesilo.png
+++ b/images/buildings/missilesilo.png
--- a/images/buildings/ressearchlab.png
+++ b/images/buildings/ressearchlab.png
--- a/images/buildings/roboticsfactory.png
+++ b/images/buildings/roboticsfactory.png
--- a/images/buildings/shipyard.png
+++ b/images/buildings/shipyard.png
--- a/images/buildings/solarmine.png
+++ b/images/buildings/solarmine.png
--- a/images/buildings/spacedock.png
+++ b/images/buildings/spacedock.png
--- a/images/crystal.png
+++ b/images/crystal.png
--- a/images/deuterium.png
+++ b/images/deuterium.png
--- a/images/energy.png
+++ b/images/energy.png
--- a/images/metal.png
+++ b/images/metal.png
--- a/images/planets/planet.png
+++ b/images/planets/planet.png
--- a/user.js
+++ b/user.js
@ -0,0 +1,39 @@
 const token = localStorage.getItem("token");
 console.log(token);

 if (localStorage.getItem("token")===null) {
  // redirect to dashboard
  window.location.href = "/index.html";
 }
 function logout() {
  localStorage.removeItem("token");
  window.location.href = "/index.html";
 }

 let config = {
  "crossdomain": true,
  headers: {
    "Content-Type": "application/json",
    "Authorization": "Bearer " + token
  }
 };

 let user = {};
 // get user data
 axios.get(url + "/", config)
  .then(function (res) {
  console.log(res.data);
  user = res.data.user;
  console.log(user);
  document.getElementById("name").innerHTML = user.Name;
  document.getElementById("metal").innerHTML = user.Resources.Metal;
  document.getElementById("crystal").innerHTML = user.Resources.Crystal;
  document.getElementById("deuterium").innerHTML = user.Resources.Deuterium;
  document.getElementById("energy").innerHTML = user.Resources.Energy;
  if (localStorage.getItem("mainplanet")===null) {
    localStorage.setItem("mainplanet", res.data.user.Planets[0]);
  }
 })
 .catch(function (error) {
  console.log(error);
 });