Reformatted DialogBox and PurchaseServerBox. Implemented purchase server, untested (will test when I do a playthrough so i get enough moeny)

css/styles.css

@@ -78,16 +78,16 @@ h1 {
     width: 100%; /* Full width */
     height: 100%; /* Full height */
     overflow: auto; /* Enable scroll if needed */
-    background-color: #333; /* Fallback color */
+    background-color: black; /* Fallback color */
     background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
 }
 
 #dialog-box-content {
-    background-color: #555;
-    margin: 15% auto; /* 15% from the top and centered */
-    padding: 1px;
-    border: 1px solid #555;
-    width: 80%; /* Could be more or less, depending on screen size */
+    background-color: black;
+    margin: 20% auto; /* 15% from the top and centered */
+    padding: 10px;
+    border: 5px solid #FFFFFF;
+    width: 40%; /* Could be more or less, depending on screen size */
 }
 
 .dialog-box-text {
@@ -97,57 +97,73 @@ h1 {
 #dialog-box-close-button {
     color: #aaa;
     float: right;
-    font-size: 28px;
+    font-size: 20px;
     font-weight: bold;
+    -webkit-border-radius: 12px;
+    -moz-border-radius: 12px;
+    border-radius: 12px;
+    -moz-box-shadow: 1px 1px 3px #000;
+    -webkit-box-shadow: 1px 1px 3px #000;
+    box-shadow: 1px 1px 3px #000;
 }
 
 #dialog-box-close-button:hover,
 #dialog-box-close-button:focus {
-    color: black;
+    color: white;
     text-decoration: none;
     cursor: pointer;
 }
 
 /* Pop-up Yes/no box */
-#yes-no-box-container {
+#purchase-server-box-container {
     display: none; /* Hidden by default */
     position: fixed; /* Stay in place */
     z-index: 1; /* Sit on top */
     left: 0;
+    right: 0;
+    bottom: 0;
     top: 0;
     width: 100%; /* Full width */
     height: 100%; /* Full height */
     overflow: auto; /* Enable scroll if needed */
-    background-color: #333; /* Fallback color */
+    background-color: black; /* Fallback color */
     background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
+    transition: opacity 400ms ease-in;
 }
 
-#yes-no-box-content {
-    background-color: #555;
+#purchase-server-box-content {
+    background-color: black;
     margin: 15% auto; /* 15% from the top and centered */
     padding: 1px;
-    border: 1px solid #555;
+    border: 5px solid #FFFFFF;
     width: 80%; /* Could be more or less, depending on screen size */
+    color: #66ff33;
 }
 
-#yes-no-box-yes, #yes-no-box-no {
+#purchase-server-box-input {
+    color: white;
+}
+
+#purchase-server-box-confirm,
+#purchase-server-box-cancel {
     color: #aaa;
     float: right;
-    font-size: 28px;
+    font-size: 14px;
     font-weight: bold;
+    padding: 2px;
+    border: 1px solid white
 }
 
-#yes-no-box-yes:hover,
-#yes-no-box-yes:focus {
-    color: black;
+#purchase-server-box-confirm:hover,
+#purchase-server-box-confirm:focus {
+    color: #66ff33;
     text-decoration: none;
     cursor: pointer;
 }
 
-
-#yes-no-box-no:hover,
-#yes-no-box-no:focus {
-    color: black;
+#purchase-server-box-cancel:hover,
+#purchase-server-box-cancel:focus {
+    color: #66ff33;
     text-decoration: none;
     cursor: pointer;
 }

src/Location.js

@@ -433,6 +433,9 @@ displayLocationContent = function() {
 			
             softwareJob.style.display = "block";
             businessJob.style.display = "block";
+            purchase1gb.style.display = "block";
+            purchase2gb.style.display = "block";
+            purchase4gb.style.display = "block";
             break;
 
         case Locations.Sector12CarmichaelSecurity:
@@ -1102,16 +1105,58 @@ initLocationButtons = function() {
     });
     
     purchase1gb.addEventListener("click", function() {
-        askToPurchaseServer(1);
-    }); 
+        purchaseServerBoxCreate(1, 100000);
+        return false;
+    });
     
-}   purchase2gb  
-    purchase4gb  
-    purchase8gb  
-    purchase16gb 
-    purchase32gb 
-    purchase64gb 
-    purchase128gb
-    purchase256gb
-    purchase512gb
-    purchase1tb  
+    purchase2gb.addEventListener("click", function() {
+        purchaseServerBoxCreate(2, 250000);
+        return false;
+    });
+    
+    purchase4gb.addEventListener("click", function() {
+        purchaseServerBoxCreate(4, 600000);
+        return false;
+    });
+    
+    purchase8gb.addEventListener("click", function() {
+        purchaseServerBoxCreate(8, 1500000);
+        return false;
+    });
+    
+    purchase16gb.addEventListener("click", function() {
+        purchaseServerBoxCreate(16, 4000000);
+        return false;
+    });
+    
+    purchase32gb.addEventListener("click", function() {
+        purchaseServerBoxCreate(32, 9000000);
+        return false;
+    });
+    
+    purchase64gb.addEventListener("click", function() {
+        purchaseServerBoxCreate(64, 20000000);
+        return false;
+    });
+    
+    purchase128gb.addEventListener("click", function() {
+        purchaseServerBoxCreate(128, 45000000);
+        return false;
+    });
+    
+    purchase256gb.addEventListener("click", function() {
+        purchaseServerBoxCreate(256, 100000000);
+        return false;
+    });
+    
+    purchase512gb.addEventListener("click", function() {
+        purchaseServerBoxCreate(512, 250000000);
+        return false;
+    });
+    
+    purchase1tb.addEventListener("click", function() {
+        purchaseServerBoxCreate(1024, 600000000);
+        return false;
+    });
+    
+}   

src/PurchaseServers.js

@@ -1,14 +1,25 @@
 /* Functions to handle Purchase of Servers */
 purchaseServer = function(ram, cost) {
-    //TODO Check if player has enough money
+    //Check if player has enough money
+    if (cost > Player.money) {
+        dialogBoxCreate("You don't have enough money to purchase this server!");
+        return;
+    }
     
     
     var newServ = new Server();
     var hostname = document.getElementById("purchase-server-box-input").value;
+    if (hostname == "") {
+        dialogBoxCreate("You must enter a hostname for your new server!");
+        return;
+    }
+    
     newServ.init(createRandomIp(), hostname, "", true, false, true, true, ram);
     
     AddToAllServers(newServ);
     Player.purchasedServers.push(newServ);
     
-    //TODO Dialog box saying successfully purchased
+    Player.money -= cost; 
+    
+    dialogBoxCreate("Server successfully purchased with hostname " + hostname);
 }

utils/PurchaseServerBox.js

@@ -35,7 +35,9 @@ purchaseServerBoxCreate = function(ram, cost) {
     
     var confirmButton = document.getElementById("purchase-server-box-confirm");
     confirmButton.addEventListener("click", function() {
+        purchaseServerBoxClose();
         purchaseServer(ram, cost);
+        return false;
     });
     
     purchaseServerBoxOpen();