reemo/sockscape
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

crack crack crack the egg into the bowl

Browse source 
woom
This commit is contained in:
Malloc of Kuzkycyziklistan 2017-09-20 07:01:38 -05:00
parent 952018c018
commit c845ec219e
6 changed files with 444 additions and 67 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

72
client/index.html
View file

@ -5,6 +5,8 @@
<link rel="stylesheet" type="text/css" href="style.css" /> <link rel="stylesheet" type="text/css" href="style.css" />
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<script type="text/javascript" src="lib/load.js"></script>
<script type="text/javascript" src="js/lib.js"></script> <script type="text/javascript" src="js/lib.js"></script>
<script type="text/javascript" src="js/scape.js"></script> <script type="text/javascript" src="js/scape.js"></script>
@ -21,7 +23,7 @@
</div> </div>
<!-- THUGGINOMICS LOGIN CODE VERY FRAGILE <!-- THUGGINOMICS LOGIN CODE VERY FRAGILE -->
<div id="loginstration-wrap"> <div id="loginstration-wrap">
<h1 id="loginstration-header" class="loginstration-header"> <h1 id="loginstration-header" class="loginstration-header">
@ -38,15 +40,81 @@
<input type="text" placeholder="ENTER EMAIL" id="register-email-input"></input><br> <input type="text" placeholder="ENTER EMAIL" id="register-email-input"></input><br>
<input type="text" placeholder="ENTER USER NAME" id="register-user-input"></input><br> <input type="text" placeholder="ENTER USER NAME" id="register-user-input"></input><br>
<input type="password" placeholder="ENTER PASSWORD" id="register-password-input"></input><br> <input type="password" placeholder="ENTER PASSWORD" id="register-password-input"></input><br>
<button id="register-button-submit">CREATE ACCOUNT</button> <button id="register-button-submit">CREATE ACCOUNT</button><br>
<button id="register-button-cancel">CANCEL</button>
</div> </div>
<button id="loginstration-registration-button">REGISTER</button> <button id="loginstration-registration-button">REGISTER</button>
</div> </div>
<h1 class="error-homepage" id="error-homepage">Password is incorrect</h1>
<!-- AAAAAAAAAAA END --> <!-- AAAAAAAAAAA END -->
<!-- loading screen -->
<div id="loading-page">
<h1 class="loading-header">LOADING</h1>
<div id="loading-page-bar">
<h2 id="loading-page-bar-percent" class="loading-page-bar-percent">1%</h2>
<div id="loading-page-bar-progress"></h1>
</div>
</div>
</div>
<!-- loading end -->
<!-- FIRST UI -->
<div id="game-ui">
<div id="game-ui-sidebar-left">
<div id="game-ui-map">
map
</div>
<div id="game-ui-inventory">
inventory
</div>
<div id="game-ui-buttons">
<div id="game-ui-logout">
<p>LOGOUT</p>
</div>
<div id="game-ui-show-chat">
<p>SHOW <br> CHAT</p>
</div>
</div>
</div>
<div id="game-ui-chat-wrap">
<div id="game-ui-chat-relative">
<div id="game-chat-window">
</di>
<div id="game-ui-chatbox">
<p>Say:</p><input type="text" id="chat"></input>
</div>
</div>
</div>
</div>
</div>
<!-- END FIRST -->
</body> </body>
</html> </html>

214
client/js/scape.js
View file

@ -1,10 +1,34 @@
var SockContext = (function () {
function SockContext() {
}
Object.defineProperty(SockContext, "masterSock", {
get: function () {
return this._masterSock;
},
enumerable: true,
configurable: true
});
Object.defineProperty(SockContext, "slaveSock", {
get: function () {
return this._slaveSock;
},
enumerable: true,
configurable: true
});
SockContext.init = function () {
if (this.didInit)
return;
};
return SockContext;
}());
SockContext.didInit = false;
var Entrypoint = (function () { var Entrypoint = (function () {
function Entrypoint() { function Entrypoint() {
} }
Entrypoint.initCheck = function () { Entrypoint.initCheck = function () {
var done = true; var done = true;
for (var i in Entrypoint.initStatus) for (var i in this.initStatus)
done = done && Entrypoint.initStatus[i]; done = done && this.initStatus[i];
if (done) if (done)
Entrypoint.ready(); Entrypoint.ready();
}; };
@ -14,14 +38,13 @@ var Entrypoint = (function () {
FileCache.initCache( FileCache.initCache(
// SUCCESS // SUCCESS
function () { function () {
Entrypoint.initStatus.fileCache = true; _this.initStatus.fileCache = true;
_this.initCheck(); _this.initCheck();
}, },
// FAILURE // FAILURE
function (error) { function (error) {
CriticalStop.redirect(error); CriticalStop.redirect(error);
}); });
Connection.open();
}; };
Entrypoint.ready = function () { Entrypoint.ready = function () {
}; };
@ -34,6 +57,7 @@ var FileCache = (function () {
function FileCache() { function FileCache() {
} }
FileCache.initCache = function (success, error) { FileCache.initCache = function (success, error) {
var _this = this;
var request = window.indexedDB.open("fileCache", 3); var request = window.indexedDB.open("fileCache", 3);
request.onupgradeneeded = function (event) { request.onupgradeneeded = function (event) {
var db = event.target.result; var db = event.target.result;
@ -50,12 +74,12 @@ var FileCache = (function () {
error("Could not upgrade the client database to the most recent version."); error("Could not upgrade the client database to the most recent version.");
}; };
request.onsuccess = function (event) { request.onsuccess = function (event) {
FileCache.dbHandle = request.result; _this.dbHandle = request.result;
success(); success();
}; };
}; };
FileCache.getMeta = function (fileName, success, error) { FileCache.getMeta = function (fileName, success, error) {
var query = FileCache.dbHandle.transaction("metadata"); var query = this.dbHandle.transaction("metadata");
var store = query.objectStore("metadata"); var store = query.objectStore("metadata");
var request = store.get(fileName); var request = store.get(fileName);
request.onsuccess = function () { request.onsuccess = function () {
@ -66,12 +90,12 @@ var FileCache = (function () {
}; };
}; };
FileCache.setMeta = function (meta) { FileCache.setMeta = function (meta) {
var query = FileCache.dbHandle.transaction("metadata", "readwrite"); var query = this.dbHandle.transaction("metadata", "readwrite");
var store = query.objectStore("metadata"); var store = query.objectStore("metadata");
store.put(meta); store.put(meta);
}; };
FileCache.getFile = function (fileName, success, error) { FileCache.getFile = function (fileName, success, error) {
var query = FileCache.dbHandle.transaction("files"); var query = this.dbHandle.transaction("files");
var store = query.objectStore("files"); var store = query.objectStore("files");
var request = store.get(fileName); var request = store.get(fileName);
request.onsuccess = function () { request.onsuccess = function () {
@ -82,10 +106,17 @@ var FileCache = (function () {
}; };
}; };
FileCache.setFile = function (fileName, data) { FileCache.setFile = function (fileName, data) {
var query = FileCache.dbHandle.transaction("files", "readwrite"); var query = this.dbHandle.transaction("files", "readwrite");
var store = query.objectStore("files"); var store = query.objectStore("files");
store.put({ name: fileName, data: data }); store.put({ name: fileName, data: data });
}; };
FileCache.deleteFile = function (fileName) {
var query = this.dbHandle.transaction("files", "readwrite");
var store = query.objectStore("files");
store.delete(fileName);
store = query.objectStore("metadata");
store.delete(fileName);
};
return FileCache; return FileCache;
}()); }());
FileCache.dbHandle = null; FileCache.dbHandle = null;
@ -94,46 +125,106 @@ var FileMeta = (function () {
} }
return FileMeta; return FileMeta;
}()); }());
var MasterProtocol = (function () {
function MasterProtocol() {
}
Object.defineProperty(MasterProtocol, "packetHandlers", {
get: function () {
return [
{ id: 1, event: this.keyExchange }
];
},
enumerable: true,
configurable: true
});
MasterProtocol.keyExchange = function (data, conn) {
var response = Key.generateResponsePacket(data);
if (Key.succeeded) {
Cipher.init(Key.privateKey);
conn.send(response);
}
else
CriticalStop.redirect("Could not establish an encrypted connection with the server.");
};
MasterProtocol.loginAttempt = function (username, password) {
};
return MasterProtocol;
}());
var SlaveProtocol = (function () {
function SlaveProtocol() {
}
Object.defineProperty(SlaveProtocol, "packetHandlers", {
get: function () {
return [
{ id: 1, event: this.userLoginResponse }
];
},
enumerable: true,
configurable: true
});
SlaveProtocol.userLoginResponse = function (data, conn) {
console.log("mario has logged in");
};
return SlaveProtocol;
}());
var Rendering = (function () { var Rendering = (function () {
function Rendering() { function Rendering() {
} }
return Rendering; return Rendering;
}()); }());
var Connection = (function () { var Connection = (function () {
function Connection() { function Connection(address, handles, useCipher, onOpen, onClose, onError) {
if (useCipher === void 0) { useCipher = false; }
if (onOpen === void 0) { onOpen = null; }
if (onClose === void 0) { onClose = null; }
if (onError === void 0) { onError = null; }
var _this = this;
this.sock = null;
this._isOpen = false;
this.handles = [];
this.onOpenFunc = null;
this.onCloseFunc = null;
this.onErrorFunc = null;
this.address = address;
this.useCipher = useCipher;
this.onOpenFunc = onOpen;
this.onCloseFunc = onClose;
this.onErrorFunc = onError;
handles.forEach(function (element) {
_this.handles[element.id] = element.event;
});
} }
Object.defineProperty(Connection, "isOpen", { Object.defineProperty(Connection.prototype, "isOpen", {
get: function () { get: function () {
return Connection._isOpen; return this._isOpen;
}, },
enumerable: true, enumerable: true,
configurable: true configurable: true
}); });
Connection.open = function (onOpen) { Connection.prototype.open = function () {
if (onOpen === void 0) { onOpen = null; } if (this._isOpen)
if (Connection._isOpen)
return; return;
// FLAG replace hard coded url with one loaded from a config file // FLAG replace hard coded url with one loaded from a config file
Connection.sock = new WebSocket("ws://localhost:6770"); this.sock = new WebSocket(this.address);
Connection.sock.binaryType = "arraybuffer"; this.sock.binaryType = "arraybuffer";
Connection.onOpenFunc = onOpen; this.sock.onopen = this.onOpen;
Connection.sock.onopen = Connection.onOpen; this.sock.onmessage = this.onMessage;
Connection.sock.onmessage = Connection.onMessage; this.sock.onerror = this.onError;
Connection.sock.onclose = Connection.onClose; this.sock.onclose = this.onClose;
}; };
Connection.send = function (msg) { Connection.prototype.send = function (msg) {
Connection.sock.send(msg.getBytes()); this.sock.send(msg.getBytes());
}; };
Connection.onOpen = function (event) { Connection.prototype.onOpen = function (event) {
Connection._isOpen = true; this._isOpen = true;
if (Connection.onOpenFunc) if (this.onOpenFunc)
Connection.onOpenFunc(); this.onOpenFunc(this);
}; };
Connection.onMessage = function (event) { Connection.prototype.onMessage = function (event) {
var raw = new Uint8Array(event.data); var raw = new Uint8Array(event.data);
var msg; var msg;
try { try {
msg = !Cipher.ready ? Packet.fromBytes(raw) msg = !this.useCipher || !Cipher.ready ? Packet.fromBytes(raw)
: Packet.fromBytes(Cipher.parse(raw)); : Packet.fromBytes(Cipher.parse(raw));
} }
catch (e) { catch (e) {
@ -141,41 +232,38 @@ var Connection = (function () {
return; return;
} }
console.log(msg); console.log(msg);
switch (msg.id) { if (msg.id < this.handles.length && this.handles[msg.id] !== undefined)
case 0 /* KeyExchange */: this.handles[msg.id](msg, this);
var response = Key.generateResponsePacket(msg); /*
if (Key.succeeded) { switch(msg.id) {
Cipher.init(Key.privateKey); case kMasterId.KeyExchange:
Connection.send(response);
}
else
CriticalStop.redirect("Could not establish an encrypted connection with the server.");
break; break;
case 1 /* LoginAttempt */: case kMasterId.LoginAttempt:
break; break;
case 2 /* RegistrationAttempt */: case kMasterId.RegistrationAttempt:
break; break;
} }
*/
}; };
Connection.onClose = function (event) { Connection.prototype.onError = function (event) {
Connection._isOpen = false; if (this.onErrorFunc)
this.onErrorFunc(event, this);
};
Connection.prototype.onClose = function (event) {
this._isOpen = false;
Cipher.close(); Cipher.close();
if (Connection.onCloseFunc) if (this.onCloseFunc)
Connection.onCloseFunc(); this.onCloseFunc(this);
}; };
Connection.close = function (onClose) { Connection.prototype.close = function () {
if (onClose === void 0) { onClose = null; } if (!this._isOpen)
if (!Connection._isOpen)
return; return;
Connection.onCloseFunc = onClose; this.sock.close();
Connection.sock.close();
}; };
return Connection; return Connection;
}()); }());
Connection.sock = null;
Connection._isOpen = false;
Connection.onOpenFunc = null;
Connection.onCloseFunc = null;
var Key = (function () { var Key = (function () {
function Key() { function Key() {
} }
@ -202,7 +290,7 @@ var Key = (function () {
var serverKey = new bigInt(request[2].toString(), 16); var serverKey = new bigInt(request[2].toString(), 16);
var clientKey = generator.modPow(Key.secret, modulus); var clientKey = generator.modPow(Key.secret, modulus);
Key._privateKey = serverKey.modPow(Key.secret, modulus); Key._privateKey = serverKey.modPow(Key.secret, modulus);
return Packet.create(0 /* KeyExchange */, [clientKey.toString(16)]); return Packet.create(1 /* KeyExchange */, [clientKey.toString(16)]);
}; };
return Key; return Key;
}()); }());
@ -308,10 +396,12 @@ var Packet = (function () {
}; };
Packet.fromBytes = function (bytes) { Packet.fromBytes = function (bytes) {
var packet = new Packet; var packet = new Packet;
packet._id = bytes[0]; if (!bytes.subarray(0, 4).every(function (v, i) { return v === Packet.magicNumber[i]; }))
var regionCount = bytes[1]; return null;
packet._id = bytes[4];
var regionCount = bytes[5];
var regionLengths = []; var regionLengths = [];
var ptr = 2; var ptr = 6;
for (var i = 0; i < regionCount; ++i) { for (var i = 0; i < regionCount; ++i) {
if (bytes[ptr] < 0xFE) if (bytes[ptr] < 0xFE)
regionLengths.push(bytes[ptr]); regionLengths.push(bytes[ptr]);
@ -332,7 +422,7 @@ var Packet = (function () {
return packet; return packet;
}; };
Packet.prototype.getBytes = function () { Packet.prototype.getBytes = function () {
var headerSize = 2, bodySize = 0; var headerSize = 6, bodySize = 0;
this._regions.forEach(function (region) { this._regions.forEach(function (region) {
bodySize += region.byteLength; bodySize += region.byteLength;
++headerSize; ++headerSize;
@ -342,9 +432,10 @@ var Packet = (function () {
headerSize += 4; headerSize += 4;
}); });
var buffer = new Uint8Array(headerSize + bodySize); var buffer = new Uint8Array(headerSize + bodySize);
var headerPtr = 2, bodyPtr = headerSize; var headerPtr = 6, bodyPtr = headerSize;
buffer[0] = this._id % 256; buffer.set(Packet.magicNumber, 0);
buffer[1] = this._regions.length; buffer[4] = this._id % 256;
buffer[5] = this._regions.length;
this._regions.forEach(function (region) { this._regions.forEach(function (region) {
var regionLength = region.byteLength; var regionLength = region.byteLength;
if (regionLength < 0xFE) if (regionLength < 0xFE)
@ -367,6 +458,7 @@ var Packet = (function () {
}; };
return Packet; return Packet;
}()); }());
Packet.magicNumber = new Uint8Array([0xF0, 0x9F, 0xA6, 0x91]);
// ** STRING EXTENSIONS ** \\ // ** STRING EXTENSIONS ** \\
String.prototype.replaceAll = function (needle, replace, ignoreCase) { String.prototype.replaceAll = function (needle, replace, ignoreCase) {
if (ignoreCase === void 0) { ignoreCase = false; } if (ignoreCase === void 0) { ignoreCase = false; }

40
client/lib/load.js Normal file
View file

@ -0,0 +1,40 @@
/*
This has everything needed to show / hide the loading page.
example of how this would work:
user clicks login:
showLoading() is called;
feed the progress returns to the the updateProgress(x , y);
progress is updated until current = remains;
loading page is then hidden revealing the next page;
*/
var bar;
var percent;
var loading;
window.addEventListener("load", function () {
loading = document.getElementById("loading-page");
bar = document.getElementById("loading-page-bar-progress");
});
function showLoading(){
loading.style.display = "flex";
}
function hideLoading(){
loading.style.display = "none";
}
function updateProgress(current , remain){
if(current != remain){
var percent = (current / remain) * 100 + "%";
bar.style.width = percent;
percent = document.getElementById("loading-page-bar-percent").innerHTML = percent;
} else {
hideLoading();
}
}

6
client/lib/loginstration.js
View file

@ -5,9 +5,10 @@
var login_wrap; var login_wrap;
var login_header; var login_header;
var register_button; var register_button;
var login; global.login;
var register; var register;
var create; var create;
var cancel;
window.addEventListener("load", function () { window.addEventListener("load", function () {
// Define var's for transition; // Define var's for transition;
@ -17,8 +18,10 @@ window.addEventListener("load", function () {
login = document.getElementById('loginstration-login'); login = document.getElementById('loginstration-login');
register = document.getElementById('loginstration-registration'); register = document.getElementById('loginstration-registration');
create = document.getElementById("register-button-submit"); create = document.getElementById("register-button-submit");
cancel = document.getElementById("register-button-cancel");
register_button.addEventListener("click" , prepareRegister); register_button.addEventListener("click" , prepareRegister);
create.addEventListener("click" , prepareLogin); create.addEventListener("click" , prepareLogin);
cancel.addEventListener("click" , prepareLogin);
}); });
function prepareRegister(){ function prepareRegister(){
@ -51,5 +54,4 @@ function prepareLogin(){
login_header.className += " " + "displayYes"; login_header.className += " " + "displayYes";
register_button.className = "displayYes" register_button.className = "displayYes"
} }

177
client/style.css
View file

@ -29,13 +29,21 @@ body {
display: none; display: none;
} }
.error-homepage{
font-family: Scape;
position: absolute;
bottom:0;
left:25px;
color:red;
display: none;
}
/* LOGINSTRATION */ /* LOGINSTRATION */
#loginstration-wrap { #loginstration-wrap {
position: absolute; position: absolute;
width:600px; width:600px;
height:600px; height:700px;
left: 0; left: 0;
right: 0; right: 0;
top:0; top:0;
@ -43,6 +51,7 @@ body {
margin: auto; margin: auto;
background: url('img/sock.png') center no-repeat; background: url('img/sock.png') center no-repeat;
background-size: contain; background-size: contain;
/* FLEX BOX - USED TO CENTER CHILD ELEMENTS DYNAMICALLY*/ /* FLEX BOX - USED TO CENTER CHILD ELEMENTS DYNAMICALLY*/
display:flex; display:flex;
@ -195,8 +204,174 @@ body {
cursor:pointer; cursor:pointer;
} }
#register-button-cancel{
font-family: Scape;
color: yellow;
width: 200px;
height:50px;
font-size: 20px;
background: #000;
padding:10px;
transition: 0.1s;
border: 1px solid white;
cursor:pointer;
}
/* REGISTER END */ /* REGISTER END */
/* LOADING page */
#loading-page{
font-family: Scape;
position: absolute;
width:100%;
height:100%;
left:0;
top:0;
display: none;
justify-content: center;
align-items: center;
flex-direction: column;
z-index: 9999;
background: black;
}
.loading-header{
color:yellow;
}
#loading-page-bar{
width:30%;
height:50px;
border:1px solid white;
display:block;
position: relative;
}
.loading-page-bar-percent{
color:white;
position: absolute;
width: 100%;
height:100%;
text-align: center;
vertical-align: middle;
margin-top:8px;
z-index: 99;
text-shadow: 0px 0px 1px black;
}
#loading-page-bar-progress{
position: absolute;
left:0;
bottom:0;
top:0;
width:1%;
height:100%;
background: yellow;
}
/* LOADING page END */
#game-ui{
position: absolute;
top:0;
bottom:0;
left:0;
right:0;
width: 100%;
height: 100%;
z-index: 99;
background: darkgreen;
font-family: Scape;
display:none;
}
#game-ui-sidebar-left{
position:relative;
top:0;
bottom:0;
left:0;
width:25%;
height:100%;
background: tan;
}
#game-ui-map{
position: absolute;
top:1%;
left:2.5%;
width:95%;
height:35%;
background:red;
}
#game-ui-inventory{
position: absolute;
bottom:10%;
height:52.5%;
width:95%;
left:2.5%;
background: blue;
}
#game-ui-buttons{
position: absolute;
bottom:0;
background: orange;
width:100%;
height:10%;
display: flex;
justify-content:space-between;
align-items: center;
}
#game-ui-logout{
background: yellow;
width:46%;
height:90%;
margin-left:2.6%;
display: flex;
justify-content: center;
align-items: center;
}
#game-ui-show-chat{
background:yellow;
width:46%;
height:90%;
margin-right: 2.6%;
display: flex;
justify-content: center;
align-items: center;
}
#game-ui-chat-wrap{
position: absolute;
left:25%;
height:28%;
bottom:0;
margin:0;
width:75%;
}
#game-ui-chat-relative{
position: relative;
margin:0;
width:100%;
height:100%;
background: rgba(255,255,255,0.75);
}
#game-ui-chat-window{
}
/* ANIMATIONS */ /* ANIMATIONS */
.sockSpinTo{ .sockSpinTo{

2
client/tsconfig.json
View file

@ -1,7 +1,7 @@
{ {
"compilerOptions": { "compilerOptions": {
"target": "es5", "target": "es5",
"out": "bin/scape.js", "out": "js/scape.js",
"watch": true "watch": true
} }
} }