diff --git a/css/styles.css b/css/styles.css index 3fc576546..de4ef9ede 100644 --- a/css/styles.css +++ b/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; } \ No newline at end of file diff --git a/src/Location.js b/src/Location.js index 81832f0ae..36085b85c 100644 --- a/src/Location.js +++ b/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 \ No newline at end of file + 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; + }); + +} \ No newline at end of file diff --git a/src/PurchaseServers.js b/src/PurchaseServers.js index 8c244760c..4c8e20d9b 100644 --- a/src/PurchaseServers.js +++ b/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); } \ No newline at end of file diff --git a/utils/PurchaseServerBox.js b/utils/PurchaseServerBox.js index 83b003360..b8527e527 100644 --- a/utils/PurchaseServerBox.js +++ b/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();