diff --git a/engine.js b/engine.js new file mode 100644 index 000000000..bddcd1a76 --- /dev/null +++ b/engine.js @@ -0,0 +1,177 @@ + +var Engine = { + + //Clickable objects + Clickables: { + hackButton: null, + + //Load, save, and delete + saveButton: null, + loadButton: null, + deleteButton: null + }, + + //Display objects + Display: { + //Progress bar + progress: null, + + //Display for status text (such as "Saved" or "Loaded") + statusText: null, + + hackingSkill: null, + }, + + //Player objects + Player: { + hackingSkill: 0, + money: 0, + strength: 0, + defense: 0, + agility: 0, + dexterity: 0, + }, + + //Time variables (milliseconds unix epoch time) + _timeThen: new Date().getTime(), + _timeNow: new Date().getTime(), + + _ticks: 0, //Total ticks + _idleSpeed: 200, //Speed (in ms) at which the main loop is updated + + //Display a status update text + _lastStatus: null, + displayStatusText: function(text) { + Engine.Display.statusText.innerHTML = text; + + clearTimeout(Engine._lastStatus); + //Wipe status message after 3 seconds + Engine._lastStatus = setTimeout(function() { + Engine.Display.statusText.innerHTML = ""; + }, 3000); + }, + + //Save function + saveFile: function() { + var tempSaveFile = JSON.stringify(Engine.Player); + + window.localStorage.setItem("netburnerSave", tempSaveFile); + + Engine.displayStatusText("Saved!"); + }, + + //Load saved game function + loadSave: function() { + //Check to see if file exists + if (!window.localStorage.getItem("netburnerSave")) { + Engine.displayStatusText("No save file present for load!"); + } else { + var tempSaveFile = window.localStorage.getItem("netburnerSave"); + Engine.Player = JSON.parse(tempSaveFile); + Engine.displayStatusText("Loaded successfully!"); + } + }, + + deleteSave: function() { + if (!window.localStorage.getItem("netburnerSave")) { + Engine.displayStatusText("No save file present for deletion"); + } else { + window.localStorage.removeItem("netburnerSave"); + Engine.displayStatusText("Deleted successfully!"); + } + }, + + /* Main Event Loop */ + idleTimer: function() { + //Get time difference + Engine._timeNow = new Date().getTime(); + var timeDifference = Engine._timeNow - Engine._timeThen - Engine._ticks; + + while (timeDifference >= Engine._idleSpeed) { + Engine.Display.hackingSkill.innerHTML = Engine.Player.hackingSkill; + + //Update timeDifference based on the idle speed + timeDifference -= Engine._idleSpeed; + + //Update the total tick counter + Engine._ticks += Engine._idleSpeed; + } + + var idleTime = Engine._idleSpeed - timeDifference; + + // - The $ means, "Start jQuery function" + // - The ("#progressvalue") tells jQuery to target that CSS element. + // - Next is .animate({ which means - start an animation. + // - The width: "100%" line tells jQuery what to animate. + // - the idleTime is how long the animation should run for. + // - the function() { starts AFTER the animation is finished. + // - $(this).css("width","0%"); resets the width of the element to zero. + $("#progressvalue").animate({ + width: "100%" + }, idleTime, function() { + $(this).css("width","0%"); + }); + + // Once that entire "while loop" has run, we call the IdleTimer + // function again, but this time with a timeout (delay) of + // _idleSpeed minus timeDifference + setTimeout(Engine.idleTimer, idleTime); + + }, + + /* Initialization */ + init: function() { + //Progress button + Engine.Display.Progress = document.getElementById("progressvalue"); + + //Hacking button + Engine.Clickables.hackButton = document.getElementById("hackbutton"); + + //Event Listener for hacking button + Engine.Clickables.hackButton.addEventListener("click", function() { + ++Engine.Player.hackingSkill; + + //Returns false so that once the code runs, the button won't try to do + //anything else + return false; + }); + + //Hacking Skill Display + Engine.Display.hackingSkill = document.getElementById("hackingskill"); + + //Status display + Engine.Display.statusText = document.getElementById("status"); + + //Load, save, and delete buttons + Engine.Clickables.saveButton = document.getElementById("save"); + Engine.Clickables.saveButton.addEventListener("click", function() { + Engine.saveFile(); + return false; + }); + + Engine.Clickables.loadButton = document.getElementById("load"); + Engine.Clickables.loadButton.addEventListener("click", function() { + Engine.loadSave(); + return false; + }); + + Engine.Clickables.deleteButton = document.getElementById("delete"); + Engine.Clickables.deleteButton.addEventListener("click", function() { + Engine.deleteSave(); + return false; + }); + + //Run main loop + Engine.idleTimer(); + } + +}; + +window.onload = function() { + Engine.init(); +}; + + + + + \ No newline at end of file diff --git a/index.html b/index.html new file mode 100644 index 000000000..2a4e7d303 --- /dev/null +++ b/index.html @@ -0,0 +1,36 @@ + + + + + Netburner + + + +
+ +
+ +
+
+ +

Hacking Skill: 0

+ + + +

+ + + + + +

+
+
+ + + + + + + \ No newline at end of file diff --git a/styles.css b/styles.css new file mode 100644 index 000000000..0cc1d8178 --- /dev/null +++ b/styles.css @@ -0,0 +1,73 @@ +/** This removes all padding and margins as well as + setting a default font size and family for the page **/ +* { + margin: 0; + padding: 0; + font-size: 16px; + font-family: Calibri, Arial, Helvetica; +} + +/* A border around the main container for the game */ +#container { + width: 800px; + height: 600px; + border: 1px solid black; +} + +/* Progress bar */ +#idleprogress { + width: 100%; + height: 16px; + background-color: #444 +} + +#progressvalue { + /* Start at 0% */ + width: 0%; + height: 16px; + background-color: #A1D490; +} + +/* Style all the buttons */ +input[type=button] { + width: 100px; + height: 32px; + + background-color: #f4f4f4; + border: 1px solid #333333; + + /* Makes cursor a pointer when you put mouse over button */ + cursor: pointer; +} + +input[type=button]:hover { + /* When mouse is over the item, the background color becomes orange */ + background-color: orange; +} + +h1 { + padding: 8px; +} +#hackingskill { + font-size: 24px; + color: green; +} +#hackbutton { + margin-left: 8px; +} + +/** add the same margin to the save button **/ +#save { + margin-left: 8px; +} + +/** add the same margin to the left of the status box + but also make the text purple to make it stand out + a little bit **/ +#status { + margin-left: 8px; + color: red; + + /* text-shadow: px_from_left px_from_top px_blur color */ + text-shadow: 2px 2px 8px #222 +} \ No newline at end of file