{% extends "base.html" %}
{% block content %}
<div class="centered" id="container">
<textarea disabled="disabled" autocomplete="off" cols="100" rows="25" id="chat"></textarea>
<br>
<input autocomplete="off" style="width: 725px;" placeholder="Your message here..." type="text" id="input">
</div>
<script type="text/javascript">
$(function () {
var searching = true;
function appendChat(text) {
var chatVal = $("#chat").val();
chatVal += text + "\n";
$("#chat").val(chatVal);
}
function poll() {
setTimeout(function() {
// hit the read endpoint
// the read endpoint will return false if matching is in progress
// otherwise will return an array
$.ajax({
url: "./main/read/", success: function (data) {
if (data === false) {
$("#container").waitMe({
effect: "ios",
text: "Finding match. Please wait...",
bg: 'rgba(255,255,255,0.7)',
color: '#000',
maxSize: ''
});
searching = true;
} else {
$("#container").waitMe("hide");
if (searching) {
appendChat("Friendly Replicator Android (Fran): Match found!");
searching = !searching;
}
if (data) {
$.each(data, function (index, value) {
appendChat(value);
});
}
}
}, dataType: "json", complete: poll
});
}, 2000);
}
$('#input').keydown(function (e){
if(e.keyCode == 13){
var val = $("#input").val();
$("#input").val("");
appendChat("You: " + val);
$.post("./main/send/", {message : val});
}
});
$("#container").waitMe({
effect: "ios",
text: "Finding match. Please wait...",
bg: 'rgba(255,255,255,0.7)',
color: '#000',
maxSize: ''
});
poll();
});
</script>
{% endblock %}