Skip to content
Find file
Fetching contributors…
Cannot retrieve contributors at this time
373 lines (317 sloc) 10.3 KB
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<script src="js/jquery-1.7.1.min.js"></script>
<script src="js/jquery.terminal-0.4.11.js"></script>
<script src="js/jquery.mousewheel.min.js"></script>
<script src="js/jquery-ui-1.8.19.custom.min.js"></script>
<script src="bootstrap/js/bootstrap.js"></script>
<script src="bootstrap-plugins/bootstrap-modal.js"></script>
<link href="css/jquery.terminal.css" rel="stylesheet"/>
<link href="bootstrap/css/bootstrap-responsive.css" rel="stylesheet"/>
<link href="bootstrap/css/bootstrap.css" rel="stylesheet"/>
<link href="css/custom.css" rel="stylesheet"/>
</head>
<body id="terminals">
<ul class="nav nav-tabs" id="tabs">
<li id="join-channel"><a>Join channel</a></li>
</ul>
<div id="overlays">
<div id="info" style="top: 100px; left: 700px"></div>
</div>
<div class="modal hide fade" id="login-modal">
<div class="modal-header">
<a class="close" data-dismiss="modal">×</a>
<h3>Login</h3>
</div>
<div class="modal-body">
<form class="well">
<input type="text" class="span3" placeholder="Nick" id="nick-input">
<input type="password" class="span3" placeholder="Password">
<p id="login-text"></p>
</form>
</div>
<div class="modal-footer">
<a class="btn btn-primary" id="login-btn">Login</a>
<a class="btn" id="register-btn">Register</a>
</div>
</div>
<div class="modal hide fade" id="register-modal">
<div class="modal-header">
<a class="close" data-dismiss="modal">×</a>
<h3>Register</h3>
</div>
<div class="modal-body">
<form class="form-horizontal" id="register-form">
<fieldset>
<!-- <legend>Register</legend> -->
<div class="control-group" id="nick-input-group">
<label class="control-label" for="nick-input">Nick</label>
<div class="controls">
<input type="text" class="input-xlarge" id="nick-register-input">
<span class="control-group error" id="nick-error-span"></span>
</div>
</div>
<div class="control-group" id="password-input-group-1">
<label class="control-label" for="password-input-1">Enter password</label>
<div class="controls">
<input type="password" class="input-xlarge" id="password-input-1">
<span class="control-group error" id="password-error-span1"></span>
</div>
</div>
<div class="control-group" id="password-input-group-2">
<label class="control-label" for="input01">Repeat password</label>
<div class="controls">
<input type="password" class="input-xlarge" id="password-input-2">
<span class="control-group error" id="password-error-span2"></span>
<p class="help-block" id="register-form-help-block"></p>
</div>
</div>
</fieldset>
</form>
</div>
<div class="modal-footer">
<a class="btn btn-primary" id="register-accept-btn">Register</a>
<a class="btn" id="cancel-register-btn">Cancel</a>
</div>
</div>
</body>
<script type="text/javascript">
var socket = new WebSocket("ws://0.0.0.0:3000/");
function send (msg) {
// for debugging purposes
console.log("SENT MSG: " + msg);
socket.send(msg);
}
socket.onopen = function () {
};
socket.onmessage = function (evt) {
var msg = evt.data;
console.log('GOT MSG: ' + msg);
handle_msg(msg);
// $("#oda").terminal().echo(msg);
};
socket.onclose = function (e) {
for (var i = 0; i < terminals.length; i++) {
var term = $("#" + terminals[i]);
term.terminal().error("Disconnected.");
}
};
socket.onerror = function (e) {
console.log("error: " + e.code);
$("#oda").terminal().error("error: " + e.code)
};
// parser ---------------------------------
function Parser (text) {
this.rest = jQuery.trim(text);
this.getNextToken = function () {
var space_idx = this.rest.indexOf(' ');
if (space_idx == -1) {
var r = this.rest;
this.rest = "";
return r;
}
var r = this.rest.slice(0, space_idx);
this.rest = jQuery.trim(this.rest.slice(space_idx+1));
return r;
}
this.getRest = function () {
return this.rest;
}
}
// command handling ---------------------------
function handle_msg (msg) {
var parser = new Parser(msg);
var cmd = parser.getNextToken();
if (cmd === 'msg') {
var from = parser.getNextToken();
var chan = parser.getNextToken();
var chan_element = $("#" + chan);
var m = parser.getRest();
if (from !== nick)
chan_element.terminal().echo(from + "> " + m);
} else if (cmd === 'join') {
var user = parser.getNextToken();
var chan = parser.getNextToken();
var chan_element = $("#" + chan);
chan_element.data('channel').add_user(user);
chan_element.terminal().echo(user + " has joined the channel.");
} else if (cmd === 'leave') {
var user = parser.getNextToken();
var chan = parser.getNextToken();
var chan_element = $("#" + chan);
chan_element.data('channel').remove_user(user);
chan_element.terminal().echo(user + " has left the channel.");
} else if (cmd === 'users') {
var chan = parser.getNextToken();
var users = parser.getRest().split(',');
if (terminals.indexOf(chan) === -1) {
add_terminal(chan);
}
var chan_element = $("#" + chan);
for (var i = 0; i < users.length; i++) {
chan_element.data('channel').add_user(users[i]);
}
} else if (cmd === 'login') {
var t1 = parser.getNextToken();
if (t1 === 'ok') {
login_ok();
} else if (t1 === 'nickinuse') {
$("#login-text").html("Nick is in use.");
}
} else {
for (var i = 0; i < terminals.length; i++) {
$("#" + terminals[i]).terminal().error('SERVER: ' + msg);
}
}
}
// --------------------------------------
var terminals = [];
var nick;
var current_terminal;
function add_terminal (name) {
$("#terminals").append('<div id="' + name + '"></div>');
jQuery(function ($, undefined) {
$('#' + name).terminal(function (command, term) {
if (command[0] === "/") {
send(command.slice(1));
} else {
send("msg " + name + " " + command);
}
},
{ greetings: 'Channel: ' + name,
name: name,
prompt: nick + '> '});
});
var tab_name = name + "_tab";
$("#tabs").append('<li id="' + tab_name + '"><a>' + name + ' <span id="close-' + name + '"> [x]</a>'
+ '</span></li>');
$("#" + tab_name).click(function () {
switch_terminal(name);
});
$("#close-" + name).click(function () {
if (current_terminal === name) {
close_terminal(name);
}
});
$("#" + name).data('channel', new Channel(name));
terminals.push(name);
}
function Channel (name) {
this.name = name
this.users = [];
this.add_user = function (nick) {
this.users.push(nick);
if (this.name === current_terminal)
update_user_info_div(this.users);
};
this.remove_user = function (nick) {
this.users.splice(this.users.indexOf(nick), 1);
if (this.name === current_terminal)
update_user_info_div(this.users);
};
}
function close_terminal (name) {
send("leave " + name);
$("#" + name).remove();
$("#" + name + "_tab").remove();
terminals.splice(terminals.indexOf(name), 1); // wth
switch_terminal(terminals[0]);
}
function switch_terminal (name) {
for (idx in terminals) {
$("#" + terminals[idx]).hide();
$("#" + terminals[idx] + "_tab").removeAttr("class");
}
$("#" + name).show();
$("#" + name + "_tab").attr("class", "active");
scroll_bottom(name);
current_terminal = name;
update_user_info_div($("#" + name).data('channel').users);
}
function scroll_bottom (terminal_name) {
var t = $("#" + terminal_name).terminal();
t.scroll(t.height());
}
function update_user_info_div (users) {
$("#info").html("");
$("#info").append("<h2>Users</h2>");
for (var i=0; i < users.length; i++) {
if (i !== 0) {
$("#info").append("<br>");
}
$("#info").append(users[i]);
}
}
function login_ok () {
$("#login-text").html("");
$("#login-modal").modal('hide');
add_terminal('oda');
switch_terminal('oda');
// $("#tabs").append('');
// for some reason, sending join cmd without waiting doesn't seem like sending the cmd
setTimeout(function () {
send("join oda");
}, 1000);
}
$(document).ready(function () {
$("#login-modal").modal('show');
$("#login-btn").click(function () {
$("#login-text").html("Logging in..");
send("login " + $("#nick-input").val());
nick = $("#nick-input").val();
// $("#login-text").html("");
// $("#login-modal").modal('hide');
// add_terminal('oda');
// switch_terminal('oda');
// $("#tabs").append('');
});
$("#register-btn").click(function () {
console.log("ok");
$("#login-modal").modal('hide');
setTimeout(function () {
$("#register-modal").modal('show');
}, 300);
$("#cancel-register-btn").click(function () {
$("#register-modal").modal('hide');
setTimeout(function () {
$("#login-modal").modal('show');
}, 300);
});
$("#register-accept-btn").click(function () {
var nick = $("#nick-register-input").val();
var pwd = $("#password-input-1").val();
var pwd2 = $("#password-input-2").val();
var err = false;
if (pwd !== pwd2) {
$("#password-input-group-1").addClass("error");
$("#password-error-span1").html("Passwords doesn't match.");
$("#password-input-group-2").addClass("error");
err = true;
} else {
$("#password-input-group-1").removeClass("error");
$("#password-input-group-2").removeClass("error");
$("#password-error-span1").html("");
}
if (nick.length < 4) {
$("#nick-error-span").html("Nick should be longer than 3 characters.");
$("#nick-input-group").addClass("error");
err = true;
} else {
$("nick-error-span").html("");
$("#nick-input-group").removeClass("error");
}
if (!err) {
$("#register-form-help-block").html("Register....");
}
console.log("accept register");
});
});
$("#join-channel").click(function () {
$("#" + current_terminal).terminal().insert("/join ");
});
$("#info").draggable();
});
</script>
</html>
Something went wrong with that request. Please try again.