Added html files and engine

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();
+};
+
+
+	
+
+		

index.html

@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <title>Netburner</title>
+    <link rel="stylesheet" type="text/css" href="styles.css" />
+  </head>
+  <body>
+    <div id="container">
+        <!-- Progress Bar -->
+        <div id="idleprogress">
+            <!-- Another div to change the width of it without affecting the idleprogress container -->
+            <div id="progressvalue"></div>
+        </div>
+    
+        <h1>Hacking Skill: <span id="hackingskill">0</span></h1>
+        <input type="button" id="hackbutton" value="Hack Button" />
+        
+        <!-- Buttons for save, load and delete -->
+        <br /><br />
+        <input type="button" id="save" value="Save" /> 
+        <input type="button" id="load" value="Load" /> 
+        <input type="button" id="delete" value="Delete" />
+        
+        <!-- Status text area -->
+        <br /><br />
+        <div id="status"></div>
+    </div>
+    
+    <!-- We'll add in the jQuery library here - direct from
+     the Google CDN (Content Delivery Network). -->
+	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
+    
+    <script src="engine.js"></script>
+  </body>
+</html>

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
+}