update register/login

buildings.js

@@ -61,7 +61,7 @@ function printPlanet(planet) {
 
   // metalmine
   if (planet.Buildings.metalmine == undefined) {
-    document.getElementById("btnBuildMetalMine").innerHTML = `<div style="color:lime;" onclick="buildBuilding('metalmine')">Build building</div>`;
+    document.getElementById("btnBuildMetalMine").innerHTML = `<div class="allowed" onclick="buildBuilding('metalmine')">Build building</div>`;
     r = metalmineCost(1);
     t = constructionTime(r, 1);
     resrourcesHtml = printResources(r);
@@ -70,7 +70,7 @@ function printPlanet(planet) {
       Construction time: ` + secondsToTime(t);
   } else {
     document.getElementById("metalmineLevel").innerHTML = "(Level " + planet.Buildings.metalmine + ")";
-    document.getElementById("btnBuildMetalMine").innerHTML = `<div style="color:lime;" onclick="buildBuilding('metalmine')">Build level ` + (+ (planet.Buildings.metalmine) + + (1)) + `</div>`;
+    document.getElementById("btnBuildMetalMine").innerHTML = `<div class="allowed" onclick="buildBuilding('metalmine')">Build level ` + (+ (planet.Buildings.metalmine) + + (1)) + `</div>`;
     r = metalmineCost((+ (planet.Buildings.metalmine) + + (1)));
     t = constructionTime(r, (+ (planet.Buildings.metalmine) + + (1)));
     resrourcesHtml = printResources(r);
@@ -87,7 +87,7 @@ function printPlanet(planet) {
 
   // crystalmine
   if (planet.Buildings.crystalmine == undefined) {
-    document.getElementById("btnBuildCrystalMine").innerHTML = `<div style="color:lime;" onclick="buildBuilding('crystalmine')">Build building</div>`;
+    document.getElementById("btnBuildCrystalMine").innerHTML = `<div class="allowed" onclick="buildBuilding('crystalmine')">Build building</div>`;
     r = crystalmineCost(1);
     t = constructionTime(r, 1);
     resrourcesHtml = printResources(r);
@@ -96,7 +96,7 @@ function printPlanet(planet) {
       Construction time: ` + secondsToTime(t);
   } else {
     document.getElementById("crystalmineLevel").innerHTML = "(Level " + planet.Buildings.crystalmine + ")";
-    document.getElementById("btnBuildCrystalMine").innerHTML = `<div style="color:lime;" onclick="buildBuilding('crystalmine')">Build level ` + (+ (planet.Buildings.crystalmine) + + (1)) + `</div>`;
+    document.getElementById("btnBuildCrystalMine").innerHTML = `<div class="allowed" onclick="buildBuilding('crystalmine')">Build level ` + (+ (planet.Buildings.crystalmine) + + (1)) + `</div>`;
     r = crystalmineCost((+ (planet.Buildings.crystalmine) + + (1)));
     t = constructionTime(r, (+ (planet.Buildings.crystalmine) + + (1)));
     resrourcesHtml = printResources(r);
@@ -113,7 +113,7 @@ function printPlanet(planet) {
 
   // deuteriummine{
   if (planet.Buildings.deuteriummine == undefined) {
-    document.getElementById("btnBuildDeuteriumMine").innerHTML = `<div style="color:lime;" onclick="buildBuilding('deuteriummine')">Build building</div>`;
+    document.getElementById("btnBuildDeuteriumMine").innerHTML = `<div class="allowed" onclick="buildBuilding('deuteriummine')">Build building</div>`;
     r = deuteriummineCost(1);
     t = constructionTime(r, 1);
     resrourcesHtml = printResources(r);
@@ -122,7 +122,7 @@ function printPlanet(planet) {
       Construction time: ` + secondsToTime(t);
   } else {
     document.getElementById("deuteriummineLevel").innerHTML = "(Level " + planet.Buildings.deuteriummine + ")";
-    document.getElementById("btnBuildDeuteriumMine").innerHTML = `<div style="color:lime;" onclick="buildBuilding('deuteriummine')">Build level ` + (+ (planet.Buildings.deuteriummine) + + (1)) + `</div>`;
+    document.getElementById("btnBuildDeuteriumMine").innerHTML = `<div class="allowed" onclick="buildBuilding('deuteriummine')">Build level ` + (+ (planet.Buildings.deuteriummine) + + (1)) + `</div>`;
     r = deuteriummineCost((+ (planet.Buildings.deuteriummine) + + (1)));
     t = constructionTime(r, (+ (planet.Buildings.deuteriummine) + + (1)));
     resrourcesHtml = printResources(r);
@@ -139,7 +139,7 @@ function printPlanet(planet) {
 
   // energymine
   if (planet.Buildings.energymine == undefined) {
-    document.getElementById("btnBuildEnergyMine").innerHTML = `<div style="color:lime;" onclick="buildBuilding('energymine')">Build building</div>`;
+    document.getElementById("btnBuildEnergyMine").innerHTML = `<div class="allowed" onclick="buildBuilding('energymine')">Build building</div>`;
     r = energymineCost(1);
     t = constructionTime(r, 1);
     resrourcesHtml = printResources(r);
@@ -148,7 +148,7 @@ function printPlanet(planet) {
       Construction time: ` + secondsToTime(t);
   } else {
     document.getElementById("energymineLevel").innerHTML = "(Level " + planet.Buildings.energymine + ")";
-    document.getElementById("btnBuildEnergyMine").innerHTML = `<div style="color:lime;" onclick="buildBuilding('energymine')">Build level ` + (+ (planet.Buildings.energymine) + + (1)) + `</div>`;
+    document.getElementById("btnBuildEnergyMine").innerHTML = `<div class="allowed" onclick="buildBuilding('energymine')">Build level ` + (+ (planet.Buildings.energymine) + + (1)) + `</div>`;
     r = energymineCost((+ (planet.Buildings.energymine) + + (1)));
     t = constructionTime(r, (+ (planet.Buildings.energymine) + + (1)));
     resrourcesHtml = printResources(r);
@@ -165,7 +165,7 @@ function printPlanet(planet) {
 
   // fusionreactor
   if (planet.Buildings.fusionreactor == undefined) {
-    document.getElementById("btnBuildFusionReactor").innerHTML = `<div style="color:lime;" onclick="buildBuilding('fusionreactor')">Build building</div>`;
+    document.getElementById("btnBuildFusionReactor").innerHTML = `<div class="allowed" onclick="buildBuilding('fusionreactor')">Build building</div>`;
     r = fusionreactorCost(1);
     t = constructionTime(r, 1);
     resrourcesHtml = printResources(r);
@@ -174,7 +174,7 @@ function printPlanet(planet) {
       Construction time: ` + secondsToTime(t);
   } else {
     document.getElementById("fusionreactorLevel").innerHTML = "(Level " + planet.Buildings.fusionreactor + ")";
-    document.getElementById("btnBuildFusionReactor").innerHTML = `<div style="color:lime;" onclick="buildBuilding('fusionreactor')">Build level ` + (+ (planet.Buildings.fusionreactor) + + (1)) + `</div>`;
+    document.getElementById("btnBuildFusionReactor").innerHTML = `<div class="allowed" onclick="buildBuilding('fusionreactor')">Build level ` + (+ (planet.Buildings.fusionreactor) + + (1)) + `</div>`;
     r = fusionreactorCost((+ (planet.Buildings.fusionreactor) + + (1)));
     t = constructionTime(r, (+ (planet.Buildings.fusionreactor) + + (1)));
     resrourcesHtml = printResources(r);
@@ -191,7 +191,7 @@ function printPlanet(planet) {
 
   // roboticsfactory
   if (planet.Buildings.roboticsfactory == undefined) {
-    document.getElementById("btnBuildRoboticsFactory").innerHTML = `<div style="color:lime;" onclick="buildBuilding('roboticsfactory')">Build building</div>`;
+    document.getElementById("btnBuildRoboticsFactory").innerHTML = `<div class="allowed" onclick="buildBuilding('roboticsfactory')">Build building</div>`;
     r = roboticsfactoryCost(1);
     t = constructionTime(r, 1);
     resrourcesHtml = printResources(r);
@@ -200,7 +200,7 @@ function printPlanet(planet) {
       Construction time: ` + secondsToTime(t);
   } else {
     document.getElementById("roboticsfactoryLevel").innerHTML = "(Level " + planet.Buildings.roboticsfactory + ")";
-    document.getElementById("btnBuildRoboticsFactory").innerHTML = `<div style="color:lime;" onclick="buildBuilding('roboticsfactory')">Build level ` + (+ (planet.Buildings.roboticsfactory) + + (1)) + `</div>`;
+    document.getElementById("btnBuildRoboticsFactory").innerHTML = `<div class="allowed" onclick="buildBuilding('roboticsfactory')">Build level ` + (+ (planet.Buildings.roboticsfactory) + + (1)) + `</div>`;
     r = roboticsfactoryCost((+ (planet.Buildings.roboticsfactory) + + (1)));
     t = constructionTime(r, (+ (planet.Buildings.roboticsfactory) + + (1)));
     resrourcesHtml = printResources(r);
@@ -217,7 +217,7 @@ function printPlanet(planet) {
 
   // shipyard
   if (planet.Buildings.shipyard == undefined) {
-    document.getElementById("btnBuildShipyard").innerHTML = `<div style="color:lime;" onclick="buildBuilding('shipyard')">Build building</div>`;
+    document.getElementById("btnBuildShipyard").innerHTML = `<div class="allowed" onclick="buildBuilding('shipyard')">Build building</div>`;
     r = shipyardCost(1);
     t = constructionTime(r, 1);
     resrourcesHtml = printResources(r);
@@ -226,7 +226,7 @@ function printPlanet(planet) {
       Construction time: ` + secondsToTime(t);
   } else {
     document.getElementById("shipyardLevel").innerHTML = "(Level " + planet.Buildings.shipyard + ")";
-    document.getElementById("btnBuildShipyard").innerHTML = `<div style="color:lime;" onclick="buildBuilding('shipyard')">Build level ` + (+ (planet.Buildings.shipyard) + + (1)) + `</div>`;
+    document.getElementById("btnBuildShipyard").innerHTML = `<div class="allowed" onclick="buildBuilding('shipyard')">Build level ` + (+ (planet.Buildings.shipyard) + + (1)) + `</div>`;
     r = shipyardCost((+ (planet.Buildings.shipyard) + + (1)));
     t = constructionTime(r, (+ (planet.Buildings.shipyard) + + (1)));
     resrourcesHtml = printResources(r);
@@ -243,7 +243,7 @@ function printPlanet(planet) {
 
   // metalstorage
   if (planet.Buildings.metalstorage == undefined) {
-    document.getElementById("btnBuildMetalStorage").innerHTML = `<div style="color:lime;" onclick="buildBuilding('metalstorage')">Build building</div>`;
+    document.getElementById("btnBuildMetalStorage").innerHTML = `<div class="allowed" onclick="buildBuilding('metalstorage')">Build building</div>`;
     r = metalstorageCost(1);
     t = constructionTime(r, 1);
     resrourcesHtml = printResources(r);
@@ -252,7 +252,7 @@ function printPlanet(planet) {
       Construction time: ` + secondsToTime(t);
   } else {
     document.getElementById("metalstorageLevel").innerHTML = "(Level " + planet.Buildings.metalstorage + ")";
-    document.getElementById("btnBuildMetalStorage").innerHTML = `<div style="color:lime;" onclick="buildBuilding('metalstorage')">Build level ` + (+ (planet.Buildings.metalstorage) + + (1)) + `</div>`;
+    document.getElementById("btnBuildMetalStorage").innerHTML = `<div class="allowed" onclick="buildBuilding('metalstorage')">Build level ` + (+ (planet.Buildings.metalstorage) + + (1)) + `</div>`;
     r = metalstorageCost((+ (planet.Buildings.metalstorage) + + (1)));
     t = constructionTime(r, (+ (planet.Buildings.metalstorage) + + (1)));
     resrourcesHtml = printResources(r);
@@ -269,7 +269,7 @@ function printPlanet(planet) {
 
   // crystalstorage
   if (planet.Buildings.crystalstorage == undefined) {
-    document.getElementById("btnBuildCrystalStorage").innerHTML = `<div style="color:lime;" onclick="buildBuilding('crystalstorage')">Build building</div>`;
+    document.getElementById("btnBuildCrystalStorage").innerHTML = `<div class="allowed" onclick="buildBuilding('crystalstorage')">Build building</div>`;
     r = crystalstorageCost(1);
     t = constructionTime(r, 1);
     resrourcesHtml = printResources(r);
@@ -278,7 +278,7 @@ function printPlanet(planet) {
       Construction time: ` + secondsToTime(t);
   } else {
     document.getElementById("crystalstorageLevel").innerHTML = "(Level " + planet.Buildings.crystalstorage + ")";
-    document.getElementById("btnBuildCrystalStorage").innerHTML = `<div style="color:lime;" onclick="buildBuilding('crystalstorage')">Build level ` + (+ (planet.Buildings.crystalstorage) + + (1)) + `</div>`;
+    document.getElementById("btnBuildCrystalStorage").innerHTML = `<div class="allowed" onclick="buildBuilding('crystalstorage')">Build level ` + (+ (planet.Buildings.crystalstorage) + + (1)) + `</div>`;
     r = crystalstorageCost((+ (planet.Buildings.crystalstorage) + + (1)));
     t = constructionTime(r, (+ (planet.Buildings.crystalstorage) + + (1)));
     resrourcesHtml = printResources(r);
@@ -295,7 +295,7 @@ function printPlanet(planet) {
 
   // deuteriumstorage
   if (planet.Buildings.deuteriumstorage == undefined) {
-    document.getElementById("btnBuildDeuteriumStorage").innerHTML = `<div style="color:lime;" onclick="buildBuilding('deuteriumstorage')">Build building</div>`;
+    document.getElementById("btnBuildDeuteriumStorage").innerHTML = `<div class="allowed" onclick="buildBuilding('deuteriumstorage')">Build building</div>`;
     r = deuteriumstorageCost(1);
     t = constructionTime(r, 1);
     resrourcesHtml = printResources(r);
@@ -304,7 +304,7 @@ function printPlanet(planet) {
       Construction time: ` + secondsToTime(t);
   } else {
     document.getElementById("deuteriumstorageLevel").innerHTML = "(Level " + planet.Buildings.deuteriumstorage + ")";
-    document.getElementById("btnBuildDeuteriumStorage").innerHTML = `<div style="color:lime;" onclick="buildBuilding('deuteriumstorage')">Build level ` + (+ (planet.Buildings.deuteriumstorage) + + (1)) + `</div>`;
+    document.getElementById("btnBuildDeuteriumStorage").innerHTML = `<div class="allowed" onclick="buildBuilding('deuteriumstorage')">Build level ` + (+ (planet.Buildings.deuteriumstorage) + + (1)) + `</div>`;
     r = deuteriumstorageCost((+ (planet.Buildings.deuteriumstorage) + + (1)));
     t = constructionTime(r, (+ (planet.Buildings.deuteriumstorage) + + (1)));
     resrourcesHtml = printResources(r);
@@ -321,7 +321,7 @@ function printPlanet(planet) {
 
   // ressearchlab
   if (planet.Buildings.ressearchlab == undefined) {
-    document.getElementById("btnBuildRessearchLab").innerHTML = `<div style="color:lime;" onclick="buildBuilding('ressearchlab')">Build building</div>`;
+    document.getElementById("btnBuildRessearchLab").innerHTML = `<div class="allowed" onclick="buildBuilding('ressearchlab')">Build building</div>`;
     r = ressearchlabCost(1);
     t = constructionTime(r, 1);
     resrourcesHtml = printResources(r);
@@ -330,7 +330,7 @@ function printPlanet(planet) {
       Construction time: ` + secondsToTime(t);
   } else {
     document.getElementById("ressearchlabLevel").innerHTML = "(Level " + planet.Buildings.ressearchlab + ")";
-    document.getElementById("btnBuildRessearchLab").innerHTML = `<div style="color:lime;" onclick="buildBuilding('ressearchlab')">Build level ` + (+ (planet.Buildings.ressearchlab) + + (1)) + `</div>`;
+    document.getElementById("btnBuildRessearchLab").innerHTML = `<div class="allowed" onclick="buildBuilding('ressearchlab')">Build level ` + (+ (planet.Buildings.ressearchlab) + + (1)) + `</div>`;
     r = ressearchlabCost((+ (planet.Buildings.ressearchlab) + + (1)));
     t = constructionTime(r, (+ (planet.Buildings.ressearchlab) + + (1)));
     resrourcesHtml = printResources(r);
@@ -347,7 +347,7 @@ function printPlanet(planet) {
 
   // alliancedepot
   if (planet.Buildings.alliancedepot == undefined) {
-    document.getElementById("btnBuildAllianceDepot").innerHTML = `<div style="color:lime;" onclick="buildBuilding('alliancedepot')">Build building</div>`;
+    document.getElementById("btnBuildAllianceDepot").innerHTML = `<div class="allowed" onclick="buildBuilding('alliancedepot')">Build building</div>`;
     r = alliancedepotCost(1);
     t = constructionTime(r, 1);
     resrourcesHtml = printResources(r);
@@ -356,7 +356,7 @@ function printPlanet(planet) {
       Construction time: ` + secondsToTime(t);
   } else {
     document.getElementById("alliancedepotLevel").innerHTML = "(Level " + planet.Buildings.alliancedepot + ")";
-    document.getElementById("btnBuildAllianceDepot").innerHTML = `<div style="color:lime;" onclick="buildBuilding('alliancedepot')">Build level ` + (+ (planet.Buildings.alliancedepot) + + (1)) + `</div>`;
+    document.getElementById("btnBuildAllianceDepot").innerHTML = `<div class="allowed" onclick="buildBuilding('alliancedepot')">Build level ` + (+ (planet.Buildings.alliancedepot) + + (1)) + `</div>`;
     r = alliancedepotCost((+ (planet.Buildings.alliancedepot) + + (1)));
     t = constructionTime(r, (+ (planet.Buildings.alliancedepot) + + (1)));
     resrourcesHtml = printResources(r);
@@ -373,7 +373,7 @@ function printPlanet(planet) {
 
   // missilesilo
   if (planet.Buildings.missilesilo == undefined) {
-    document.getElementById("btnBuildMissileSilo").innerHTML = `<div style="color:lime;" onclick="buildBuilding('missilesilo')">Build building</div>`;
+    document.getElementById("btnBuildMissileSilo").innerHTML = `<div class="allowed" onclick="buildBuilding('missilesilo')">Build building</div>`;
     r = missilesiloCost(1);
     t = constructionTime(r, 1);
     resrourcesHtml = printResources(r);
@@ -382,7 +382,7 @@ function printPlanet(planet) {
       Construction time: ` + secondsToTime(t);
   } else {
     document.getElementById("missilesiloLevel").innerHTML = "(Level " + planet.Buildings.missilesilo + ")";
-    document.getElementById("btnBuildMissileSilo").innerHTML = `<div style="color:lime;" onclick="buildBuilding('missilesilo')">Build level ` + (+ (planet.Buildings.missilesilo) + + (1)) + `</div>`;
+    document.getElementById("btnBuildMissileSilo").innerHTML = `<div class="allowed" onclick="buildBuilding('missilesilo')">Build level ` + (+ (planet.Buildings.missilesilo) + + (1)) + `</div>`;
     r = missilesiloCost((+ (planet.Buildings.missilesilo) + + (1)));
     t = constructionTime(r, (+ (planet.Buildings.missilesilo) + + (1)));
     resrourcesHtml = printResources(r);
@@ -399,7 +399,7 @@ function printPlanet(planet) {
 
   // spacedock
   if (planet.Buildings.spacedock == undefined) {
-    document.getElementById("btnBuildSpacedock").innerHTML = `<div style="color:lime;" onclick="buildBuilding('spacedock')">Build building</div>`;
+    document.getElementById("btnBuildSpacedock").innerHTML = `<div class="allowed" onclick="buildBuilding('spacedock')">Build building</div>`;
     r = spacedockCost(1);
     t = constructionTime(r, 1);
     resrourcesHtml = printResources(r);
@@ -408,7 +408,7 @@ function printPlanet(planet) {
       Construction time: ` + secondsToTime(t);
   } else {
     document.getElementById("spacedockLevel").innerHTML = "(Level " + planet.Buildings.spacedock + ")";
-    document.getElementById("btnBuildSpacedock").innerHTML = `<div style="color:lime;" onclick="buildBuilding('spacedock')">Build level ` + (+ (planet.Buildings.spacedock) + + (1)) + `</div>`;
+    document.getElementById("btnBuildSpacedock").innerHTML = `<div class="allowed" onclick="buildBuilding('spacedock')">Build level ` + (+ (planet.Buildings.spacedock) + + (1)) + `</div>`;
     r = spacedockCost((+ (planet.Buildings.spacedock) + + (1)));
     t = constructionTime(r, (+ (planet.Buildings.spacedock) + + (1)));
     resrourcesHtml = printResources(r);

css/style.css

@@ -30,3 +30,14 @@ hr {
 	text-align: center;
 	border:1px solid #ffffff;
 }
+
+.allowed {
+	color: lime;
+	cursor: pointer;
+}
+.allowed:hover {
+	text-decoration: underline;
+}
+.notallowed {
+	color: red;
+}

index.html

@@ -45,6 +45,7 @@
                   <input type="password" class="form-control" id="loginPassword" placeholder="Password">
                   <div onclick="login()" class="btn btn-primary float-right">Login</div>
                 </p>
+                <div id="loginErr"></div>
               </div>
               <div class="tab-pane fade" id="register" role="tabpanel" aria-labelledby="register-tab">
                 <h5 class="card-title">Register</h5>
@@ -60,6 +61,7 @@
                   <input type="password" class="form-control" id="registerPassword" placeholder="Password">
                   <div onclick="register()" class="btn btn-primary float-right">Register</div>
                 </p>
+                <div id="registerErr"></div>
               </div>
             </div>
 

index.js

@@ -16,9 +16,24 @@ function register() {
   axios.post(url + "/register", data)
     .then(function (res) {
     console.log(res.data);
+      document.getElementById("register").innerHTML = `
+	<br><br>
+	<div class="alert alert-success" role="alert">
+	  Registration complete. You can now Login
+	</div>
+	<br><br>
+      `;
+
   })
   .catch(function (error) {
     console.log(error);
+      document.getElementById("registerErr").innerHTML = `
+	<br><br>
+	<div class="alert alert-danger" role="alert">
+	  Something went wrong on register
+	</div>
+	<br><br>
+      `;
   });
 }
 
@@ -38,5 +53,12 @@ function login() {
   })
   .catch(function (error) {
     console.log(error);
+      document.getElementById("loginErr").innerHTML = `
+	<br><br>
+	<div class="alert alert-danger" role="alert">
+	  Something went wrong on login
+	</div>
+	<br><br>
+      `;
   });
 }