Added Player, Server, Terminal, and engine javascript files. Implemented basic terminal UI. Implemented main menu tabs (only added Character and Terminal for now

This commit is contained in:
Daniel Xie 2016-10-17 03:24:39 -05:00
parent d7a00af2b6
commit 7c03b274d7
8 changed files with 371 additions and 227 deletions

@ -4,28 +4,54 @@
margin: 0; margin: 0;
padding: 0; padding: 0;
font-size: 16px; font-size: 16px;
font-family: Calibri, Arial, Helvetica; font-family: 'Lucida Console', 'Lucida Sans Unicode', 'Fira Mono', 'Consolas', 'Times New Roman';
background-color: #252527;
background-color: black;
} }
/* A border around the main container for the game */ p {
#container { color: #66ff33;
width: 800px;
height: 600px;
border: 1px solid black;
} }
/* Progress bar */ .mainmenu {
#idleprogress { list-style-type: none;
width: 100%; margin: 0;
height: 16px; padding: 0;
background-color: #444 width: 10%;
position: fixed;
height: 100%;
overflow: auto;
border: 0;
border-bottom: 1px solid #000000;
border-radius: 0;
background-color: #333;
} }
#progressvalue { .mainmenu>li a {
/* Start at 0% */ display: block;
width: 0%; color: #e6e6e6;
height: 16px; background-color: #333;
background-color: #A1D490; padding: 16px;
text-decoration: none;
}
.mainmenu>li a.active {
background-color: #4CAF50;
color: white;
}
.mainmenu>li a:hover:not(.active) {
background-color: #555;
color: white;
}
#character-container {
position: fixed;
padding-top: 10px;
padding-left: 10px;
margin-left: 10%;
width: 99%;
} }
/* Style all the buttons */ /* Style all the buttons */
@ -48,13 +74,6 @@ input[type=button]:hover {
h1 { h1 {
padding: 8px; padding: 8px;
} }
#hackingskill {
font-size: 24px;
color: green;
}
#hackbutton {
margin-left: 8px;
}
/** add the same margin to the save button **/ /** add the same margin to the save button **/
#save { #save {

32
css/terminal.css Normal file

@ -0,0 +1,32 @@
#terminal-container {
position: fixed;
margin-left: 10%;
width: 99%;
}
#terminal {
padding-top: 10px;
padding-left: 10px;
height: auto;
font-size: 16px;
}
#terminal-input {
background-color: black;
color: #66ff33;
transition: height 1s;
}
.terminal-input {
display: table-cell;
padding: 0px !important;
margin: 0px !important;
border: 0px;
background-color: black;
font-size: 16px;
outline: none;
color: #66ff33;
}

177
engine.js

@ -1,177 +0,0 @@
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();
};

@ -3,34 +3,59 @@
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<title>Netburner</title> <title>Netburner</title>
<link rel="stylesheet" type="text/css" href="styles.css" /> <link rel="stylesheet" type="text/css" href="css/styles.css" />
<link rel="stylesheet" type="text/css" href="css/terminal.css" />
</head> </head>
<body> <body>
<div id="container"> <div id="mainmenu-container">
<!-- Progress Bar --> <!-- Main menu -->
<div id="idleprogress"> <ul class="mainmenu">
<!-- Another div to change the width of it without affecting the idleprogress container --> <li class="terminal-tab">
<div id="progressvalue"></div> <a href="#" id="terminal-menu-link"> Terminal </a>
</li>
<li class="character-tab">
<a href="#" id="character-menu-link"> Character </a>
</li>
<li class="gym-tab">
<a href=#Gym> Gym </a>
</li>
</ul>
</div> </div>
<h1>Hacking Skill: <span id="hackingskill">0</span></h1> <div id="terminal-container">
<input type="button" id="hackbutton" value="Hack Button" /> <!-- Terminal -->
<table id="terminal">
<tr id="terminal-input">
<td>$ <input type="text" class="terminal-input"/></td>
</tr>
<!-- Buttons for save, load and delete --> </table> <!-- End terminal -->
<br /><br /> </div> <!-- End terminal-container -->
<input type="button" id="save" value="Save" />
<input type="button" id="load" value="Load" />
<input type="button" id="delete" value="Delete" />
<!-- Status text area --> <div id="character-container">
<br /><br /> <p id="character-info"> </p>
<div id="status"></div> </div> <!-- End terminal-container -->
</div>
<!-- We'll add in the jQuery library here - direct from <!-- We'll add in the jQuery library here - direct from
the Google CDN (Content Delivery Network). --> the Google CDN (Content Delivery Network). -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="engine.js"></script> <!-- Always keep the terminal in focus -->
<script type="text/javascript">
$(document).ready(function() {
$('.terminal-input').focus();
});
$(document).keydown(function() {
$('.terminal-input').focus();
})
</script>
<script src="src/Terminal.js"></script>
<script src="src/Player.js"></script>
<script src="src/Server.js"></script>
<script src="src/engine.js"></script>
</body> </body>
</html> </html>

@ -1,6 +1,6 @@
//Netburner Player class //Netburner Player class
netburner.Player = { var Player = {
//Skills and stats //Skills and stats
hacking_skill: 1, hacking_skill: 1,
strength: 1, strength: 1,
@ -40,8 +40,8 @@ netburner.Player = {
lifetime_money: 0, lifetime_money: 0,
//Servers //Servers
discoveredServers = [], //discoveredServers = [],
purchasedServers = [], //purchasedServers = [],
//Achievements and achievement progress //Achievements and achievement progress

@ -1,6 +1,6 @@
//Netburner Server class //Netburner Server class
// Parent class for a Server object. PlayerServer and NPCServer inherit from this // Parent class for a Server object. PlayerServer and NPCServer inherit from this
netburner.Server = { var Server = {
//Connection information //Connection information
ip: "0.0.0.0", ip: "0.0.0.0",
isOnline: false, isOnline: false,
@ -11,7 +11,7 @@ netburner.Server = {
max_ram: 1, //GB max_ram: 1, //GB
ram_used: 0, ram_used: 0,
scripts = []; //scripts = [],
//Manual hack state information //Manual hack state information
is_hacking: false, is_hacking: false,

30
src/Terminal.js Normal file

@ -0,0 +1,30 @@
//Terminal
var post = function(input) {
$("#terminal-input").before('<tr class="posted"><td style="color: #66ff33;">' + input + '</td></tr>');
window.scrollTo(0, document.body.scrollHeight);
}
//command is checked on enter key press
$(document).keyup(function(event) {
if (event.keyCode == 13) {
var command = $('input[class=terminal-input]').val();
if (command.length > 0) {
post("> " + command);
$('input[class=terminal-input]').val("");
//Execute command function here
}
}
});
var executeCommand = function(command) {
var commandArray = command.split();
if (commandArray.length == 0) {
return;
}
switch (commandArray[0]) {
case
}
}

215
src/engine.js Normal file

@ -0,0 +1,215 @@
var Engine = {
//Clickable objects
Clickables: {
hackButton: null,
//Load, save, and delete
saveButton: null,
loadButton: null,
deleteButton: null,
//Main menu buttons
terminalMainMenuButton: null,
characterMainMenuButton: null,
},
//Display objects
Display: {
//Progress bar
progress: null,
//Display for status text (such as "Saved" or "Loaded")
statusText: null,
hacking_skill: null,
//Main menu content
terminalContent: null,
characterContent: null,
//Character info
characterInfo: null,
},
//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(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");
Player = JSON.parse(tempSaveFile);
Engine.displayStatusText("Loaded successfully!");
}
},
//Delete saved game function
deleteSave: function() {
if (!window.localStorage.getItem("netburnerSave")) {
Engine.displayStatusText("No save file present for deletion");
} else {
window.localStorage.removeItem("netburnerSave");
Engine.displayStatusText("Deleted successfully!");
}
},
/* Load content when a main menu button is clicked */
loadTerminalContent: function() {
Engine.hideAllContent();
Engine.Display.terminalContent.style.visibility = "visible";
},
loadCharacterContent: function() {
Engine.hideAllContent();
Engine.Display.characterContent.style.visibility = "visible";
Engine.displayCharacterInfo();
},
//Helper function that hides all content
hideAllContent: function() {
Engine.Display.terminalContent.style.visibility = "hidden";
Engine.Display.characterContent.style.visibility = "hidden";
},
/* Display character info */
displayCharacterInfo: function() {
Engine.Display.characterInfo.innerHTML = 'Money: $' + Player.money + '<br><br>' +
'Hacking Level: ' + Player.hacking_skill + '<br><br>' +
'Strength: ' + Player.strength + '<br><br>' +
'Defense: ' + Player.defense + '<br><br>' +
'Dexterity: ' + Player.dexterity + '<br><br>' +
'Agility: ' + Player.agility + '<br><br>';
},
/* 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.hacking_skill.innerHTML = Player.hacking_skill;
//Update timeDifference based on the idle speed
timeDifference -= Engine._idleSpeed;
//Update the total tick counter
Engine._ticks += Engine._idleSpeed;
}
var idleTime = Engine._idleSpeed - timeDifference;
// 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() {
//Hacking button
//Engine.Clickables.hackButton = document.getElementById("hackbutton");
//Event Listener for hacking button
//Engine.Clickables.hackButton.addEventListener("click", function() {
// ++Player.hacking_skill;
//Returns false so that once the code runs, the button won't try to do
//anything else
// return false;
//});
//Hacking Skill Display
//Engine.Display.hacking_skill = 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;
//});
//Main menu buttons and content
Engine.Clickables.terminalMainMenuButton = document.getElementById("terminal-menu-link");
Engine.Clickables.terminalMainMenuButton.addEventListener("click", function() {
Engine.loadTerminalContent();
return false;
});
Engine.Clickables.characterMainMenuButton = document.getElementById("character-menu-link");
Engine.Clickables.characterMainMenuButton.addEventListener("click", function() {
Engine.loadCharacterContent();
return false;
});
Engine.Display.terminalContent = document.getElementById("terminal-container");
Engine.Display.characterContent = document.getElementById("character-container");
Engine.Display.characterContent.style.visibility = "hidden";
//Character info
Engine.Display.characterInfo = document.getElementById("character-info");
Engine.displayCharacterInfo();
//Message at the top of terminal
post("Netburner v1.0");
//Run main loop
Engine.idleTimer();
}
};
window.onload = function() {
Engine.init();
};