mirror of
https://github.com/bitburner-official/bitburner-src.git
synced 2024-11-10 01:33:54 +01:00
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
parent
d7a00af2b6
commit
7c03b274d7
@ -4,28 +4,54 @@
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
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 */
|
||||
#container {
|
||||
width: 800px;
|
||||
height: 600px;
|
||||
border: 1px solid black;
|
||||
p {
|
||||
color: #66ff33;
|
||||
}
|
||||
|
||||
/* Progress bar */
|
||||
#idleprogress {
|
||||
width: 100%;
|
||||
height: 16px;
|
||||
background-color: #444
|
||||
.mainmenu {
|
||||
list-style-type: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
width: 10%;
|
||||
position: fixed;
|
||||
height: 100%;
|
||||
overflow: auto;
|
||||
|
||||
border: 0;
|
||||
border-bottom: 1px solid #000000;
|
||||
border-radius: 0;
|
||||
background-color: #333;
|
||||
}
|
||||
|
||||
#progressvalue {
|
||||
/* Start at 0% */
|
||||
width: 0%;
|
||||
height: 16px;
|
||||
background-color: #A1D490;
|
||||
.mainmenu>li a {
|
||||
display: block;
|
||||
color: #e6e6e6;
|
||||
background-color: #333;
|
||||
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 */
|
||||
@ -48,13 +74,6 @@ input[type=button]:hover {
|
||||
h1 {
|
||||
padding: 8px;
|
||||
}
|
||||
#hackingskill {
|
||||
font-size: 24px;
|
||||
color: green;
|
||||
}
|
||||
#hackbutton {
|
||||
margin-left: 8px;
|
||||
}
|
||||
|
||||
/** add the same margin to the save button **/
|
||||
#save {
|
||||
32
css/terminal.css
Normal file
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
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();
|
||||
};
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
65
index.html
65
index.html
@ -3,34 +3,59 @@
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<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>
|
||||
<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>
|
||||
<div id="mainmenu-container">
|
||||
<!-- Main menu -->
|
||||
<ul class="mainmenu">
|
||||
<li class="terminal-tab">
|
||||
<a href="#" id="terminal-menu-link"> Terminal </a>
|
||||
</li>
|
||||
|
||||
<h1>Hacking Skill: <span id="hackingskill">0</span></h1>
|
||||
<input type="button" id="hackbutton" value="Hack Button" />
|
||||
<li class="character-tab">
|
||||
<a href="#" id="character-menu-link"> Character </a>
|
||||
</li>
|
||||
|
||||
<!-- 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>
|
||||
<li class="gym-tab">
|
||||
<a href=#Gym> Gym </a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div id="terminal-container">
|
||||
<!-- Terminal -->
|
||||
<table id="terminal">
|
||||
<tr id="terminal-input">
|
||||
<td>$ <input type="text" class="terminal-input"/></td>
|
||||
</tr>
|
||||
|
||||
</table> <!-- End terminal -->
|
||||
</div> <!-- End terminal-container -->
|
||||
|
||||
<div id="character-container">
|
||||
<p id="character-info"> </p>
|
||||
</div> <!-- End terminal-container -->
|
||||
|
||||
<!-- 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="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>
|
||||
</html>
|
||||
@ -1,6 +1,6 @@
|
||||
//Netburner Player class
|
||||
|
||||
netburner.Player = {
|
||||
var Player = {
|
||||
//Skills and stats
|
||||
hacking_skill: 1,
|
||||
strength: 1,
|
||||
@ -40,8 +40,8 @@ netburner.Player = {
|
||||
lifetime_money: 0,
|
||||
|
||||
//Servers
|
||||
discoveredServers = [],
|
||||
purchasedServers = [],
|
||||
//discoveredServers = [],
|
||||
//purchasedServers = [],
|
||||
|
||||
//Achievements and achievement progress
|
||||
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
//Netburner Server class
|
||||
// Parent class for a Server object. PlayerServer and NPCServer inherit from this
|
||||
netburner.Server = {
|
||||
var Server = {
|
||||
//Connection information
|
||||
ip: "0.0.0.0",
|
||||
isOnline: false,
|
||||
@ -11,7 +11,7 @@ netburner.Server = {
|
||||
max_ram: 1, //GB
|
||||
ram_used: 0,
|
||||
|
||||
scripts = [];
|
||||
//scripts = [],
|
||||
|
||||
//Manual hack state information
|
||||
is_hacking: false,
|
||||
|
||||
30
src/Terminal.js
Normal file
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
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();
|
||||
};
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user