260 lines
11 KiB
HTML
260 lines
11 KiB
HTML
{% extends "base.html" %}
|
|
{% block title %}{{ quest_title }}{% endblock %}
|
|
{% block head %}
|
|
<script type="text/javascript" src="/static/socket.io.slim.js"></script>
|
|
<script>
|
|
document.execCommand("defaultParagraphSeparator", false, "br");
|
|
var socket;
|
|
var tid = setInterval( function () {
|
|
if ( document.readyState !== 'complete' ) return;
|
|
clearInterval( tid );
|
|
|
|
document.getElementById('chatWindow').scrollTop = document.getElementById('chatWindow').scrollHeight;
|
|
socket = io.connect('https://' + document.domain + ':' + location.port);
|
|
socket.on('connect', function() {
|
|
socket.emit('joined', {room: {{ room_id }}});
|
|
});
|
|
socket.on('message', function(data) {
|
|
let msg_str = '<div class="messageHeader"><span class="messageName">' + data.name + '</span> ';
|
|
msg_str += '<span class="messageDate">' + strftime(data.date) + '</span></div>';
|
|
msg_str += '<div class="message">' + data.message + '</div><hr>';
|
|
|
|
let mbox = document.getElementById('chatWindow');
|
|
mbox.innerHTML = mbox.innerHTML + msg_str;
|
|
mbox.scrollTop = mbox.scrollHeight;
|
|
});
|
|
socket.on('new_post', function(data) {
|
|
let qposts = document.getElementById('questPosts');
|
|
let post_str = '<div class="questPost"><div class="questPostMeta">' + strftime(data.date);
|
|
{% if session.get("user_id") == owner_id %}
|
|
if (data.post_type == 'text') {
|
|
post_str += '<br /><a href="javascript:void(0);" onclick="edit_post(\'' + data.post_id + '\')">Edit</a>';
|
|
post_str += '<a href="javascript:void(0);" id="savePost-' + data.post_id + '" onclick="save_post(\'' + data.post_id + '\')" style="display:none;">Save</a>';
|
|
}
|
|
else if (data.post_type == 'dice') {
|
|
post_str += '<br /><a href="javascript:void(0);" id="close_dc-' + data.post_id + '" onclick="close_dice_call(' + data.post_id + ')">Close</a>';
|
|
post_str += '<a href="javascript:void(0);" id="open_dc-' + data.post_id + '" onclick="open_dice_call(' + data.post_id + ')" style="display:none;">Open</a>'
|
|
}
|
|
{% endif %}
|
|
post_str += '</div><div class="questPostData" id="questPostData-' + data.post_id + '">';
|
|
if (data.post_type == 'text') {
|
|
post_str += data.post;
|
|
}
|
|
else if (data.post_type == 'dice') {
|
|
post_str += '<h3>' + data.post + ' - Open</h3>';
|
|
}
|
|
post_str += '</div></div><br />';
|
|
qposts.innerHTML = qposts.innerHTML + post_str;
|
|
});
|
|
socket.on('update_post', function(data) {
|
|
let post_id = data.post_id;
|
|
let post = document.getElementById('questPostData-' + post_id);
|
|
if (data.post_type == 'text') {
|
|
post.innerHTML = data.post;
|
|
}
|
|
else if (data.post_type == 'dice') {
|
|
post.innerHTML += '<b>' + data.post + '</b><br />';
|
|
}
|
|
});
|
|
socket.on('close_dice_call', function(data) {
|
|
let post = document.getElementById('questPostData-' + data.post_id);
|
|
post.firstElementChild.textContent = post.firstElementChild.textContent.replace('Open', 'Closed');
|
|
});
|
|
socket.on('open_dice_call', function(data) {
|
|
let post = document.getElementById('questPostData-' + data.post_id);
|
|
post.firstElementChild.textContent = post.firstElementChild.textContent.replace('Closed', 'Open');
|
|
});
|
|
let mtarea = document.getElementById('messageTextArea');
|
|
mtarea.addEventListener('keypress', function(event) {
|
|
if (event.key == 'Enter' && !event.shiftKey) {
|
|
let text = mtarea.value.trim();
|
|
mtarea.value = '';
|
|
if (text == '') { return; }
|
|
socket.emit('message', {message: text, name: 'Anonymous', room: {{ room_id }}});
|
|
}
|
|
});
|
|
}, 100 );
|
|
</script>
|
|
<script>
|
|
function padToTwo(number) {
|
|
if (number<=99) { number = ("0"+number).slice(-2); }
|
|
return number;
|
|
}
|
|
function strftime(date) {
|
|
date = new Date(date * 1000);
|
|
let date_str = date.getFullYear() + '-' + padToTwo(date.getMonth()+1) + '-' + padToTwo(date.getDate()) + ' ';
|
|
date_str += padToTwo(date.getHours()) + ':' + padToTwo(date.getMinutes()) + ':' + padToTwo(date.getSeconds());
|
|
return date_str;
|
|
}
|
|
</script>
|
|
{% if session.get("user_id") == owner_id %}
|
|
<script>
|
|
function makePost() {
|
|
let qparea = document.getElementById('postTextArea');
|
|
let text = qparea.value.trim();
|
|
qparea.value = '';
|
|
if (text == '') { return; }
|
|
socket.emit('new_post', {post: text, room: {{ room_id }}});
|
|
}
|
|
function edit_post(post_id) {
|
|
document.getElementById('questPostData-' + post_id).contentEditable = 'true';
|
|
document.execCommand("defaultParagraphSeparator", false, "br");
|
|
document.getElementById('questPostData-' + post_id).style.border = '1px solid #ccc';
|
|
document.getElementById('savePost-' + post_id).style.display = 'initial';
|
|
document.getElementById('editPost-' + post_id).style.display = 'none';
|
|
}
|
|
function save_post(post_id) {
|
|
document.getElementById('questPostData-' + post_id).contentEditable = 'false';
|
|
document.getElementById('questPostData-' + post_id).style.border = null;
|
|
let text = document.getElementById('questPostData-' + post_id).innerHTML;
|
|
socket.emit('update_post', {post_id: post_id, post: text, room: {{ room_id }}});
|
|
document.getElementById('savePost-' + post_id).style.display = 'none';
|
|
document.getElementById('editPost-' + post_id).style.display = 'initial';
|
|
}
|
|
function dice_post() {
|
|
let formData = new FormData(document.getElementById('QMDicePostForm'));
|
|
let obj = {};
|
|
formData.forEach(function(value, key) {
|
|
obj[key] = value;
|
|
});
|
|
obj.room = {{ room_id }};
|
|
socket.emit('dice_post', obj);
|
|
document.getElementById('QMDicePostForm').reset();
|
|
}
|
|
function close_dice_call(post_id) {
|
|
document.getElementById('close_dc-' + post_id).style.display = 'none';
|
|
document.getElementById('open_dc-' + post_id).style.display = 'initial';
|
|
socket.emit('close_dice_call', {post_id: post_id, room: {{ room_id }}});
|
|
}
|
|
function open_dice_call(post_id) {
|
|
document.getElementById('close_dc-' + post_id).style.display = 'initial';
|
|
document.getElementById('open_dc-' + post_id).style.display = 'none';
|
|
socket.emit('open_dice_call', {post_id: post_id, room: {{ room_id }}});
|
|
}
|
|
</script>
|
|
<script>
|
|
function openPostTab(event, modeName) {
|
|
let i, QMPostTabContent, QMPostTab;
|
|
|
|
QMPostTabContent = document.getElementsByClassName("QMPostTabContent");
|
|
for (i = 0; i < QMPostTabContent.length; i++) {
|
|
QMPostTabContent[i].style.display = "none";
|
|
}
|
|
|
|
QMPostTab = document.getElementsByClassName("QMPostTab");
|
|
for (i = 0; i < QMPostTab.length; i++) {
|
|
QMPostTab[i].className = QMPostTab[i].className.replace(" active", "");
|
|
}
|
|
|
|
document.getElementById(modeName).style.display = "block";
|
|
event.currentTarget.className += " active";
|
|
}
|
|
</script>
|
|
{% endif %}
|
|
{% endblock %}
|
|
{% block header %}
|
|
{% if session.get("user_id") == owner_id %}
|
|
<li><a href="{{ url_for('.quest', quest_title=ident_title + '/edit_quest') }}">Edit Quest</a></li>
|
|
{% endif %}
|
|
{% endblock %}
|
|
{% block content %}
|
|
<div id="questContainer">
|
|
<div id="questPane">
|
|
<center><h1>{{ quest_title }}</h1></center>
|
|
<div id="questPosts">
|
|
{% for quest_post in quest_posts %}
|
|
<div class="questPost">
|
|
<div class="questPostMeta">
|
|
{{ quest_post[4] | strftime }}
|
|
{% if session.get("user_id") == owner_id %}
|
|
{% if quest_post[2] == "text" %}
|
|
<br /><a href="javascript:void(0);" id="editPost-{{ quest_post[0] }}" onclick="edit_post({{ quest_post[0] }})">Edit</a>
|
|
<a href="javascript:void(0);" id="savePost-{{ quest_post[0] }}" onclick="save_post('{{ quest_post[0] }}')" style="display:none;">Save</a>
|
|
{% elif quest_post[2] == "dice" and quest_post == quest_posts|last %}
|
|
{% if quest_post[0] == dice_call %}
|
|
<br /><a href="javascript:void(0);" id="close_dc-{{ quest_post[0] }}" onclick="close_dice_call({{ quest_post[0] }})">Close</a>
|
|
<a href="javascript:void(0);" id="open_dc-{{ quest_post[0] }}" onclick="open_dice_call({{ quest_post[0] }})" style="display:none;">Open</a>
|
|
{% else %}
|
|
<br /><a href="javascript:void(0);" id="close_dc-{{ quest_post[0] }}" onclick="close_dice_call({{ quest_post[0] }})" style="display:none;">Close</a>
|
|
<a href="javascript:void(0);" id="open_dc-{{ quest_post[0] }}" onclick="open_dice_call({{ quest_post[0] }})">Open</a>
|
|
{% endif %}
|
|
{% endif %}
|
|
{% endif %}
|
|
</div>
|
|
<div class="questPostData" id="questPostData-{{ quest_post[0] }}">
|
|
{% if quest_post[2] == "text" %}
|
|
{% autoescape false %}
|
|
{{ quest_post[3] }}
|
|
{% endautoescape %}
|
|
{% elif quest_post[2] == "dice" %}
|
|
<h3>{{ quest_post[3] }} - {% if quest_post[0] == dice_call %}Open{% else %}Closed{% endif %}</h3>
|
|
{% for quest_roll in quest_rolls %}
|
|
{% if quest_roll[2] == quest_post[0] %}
|
|
<div id="questRollId-{{ quest_roll[0] }}">
|
|
<b>Rolled {{ quest_roll[4] }} ({{ quest_roll[3] }})</b>
|
|
</div>
|
|
{% endif %}
|
|
{% endfor %}
|
|
{% endif %}
|
|
</div>
|
|
</div><br />
|
|
{% endfor %}
|
|
</div>
|
|
{% if session.get("user_id") == owner_id %}
|
|
<div id="QMPostPane">
|
|
<div>
|
|
<ul id="QMPostTabs">
|
|
<li><a class="QMPostTab active" href="javascript:void(0);" onclick="openPostTab(event, 'QMPostText')">Text</a></li>
|
|
<li><a class="QMPostTab" href="javascript:void(0);" onclick="openPostTab(event, 'QMPostDice')">Dice</a></li>
|
|
<li><a class="QMPostTab" href="javascript:void(0);" onclick="openPostTab(event, 'QMPostPoll')">Poll</a></li>
|
|
</ul>
|
|
</div>
|
|
<div id="QMPostText" class="QMPostTabContent" style="display:initial;">
|
|
<textarea id="postTextArea"></textarea><br />
|
|
<input type="submit" name="newPost" value="Post" onclick="makePost();"/>
|
|
</div>
|
|
<div id="QMPostDice" class="QMPostTabContent" style="display:none;">
|
|
Dice for the dice god.<br />
|
|
<form id="QMDicePostForm" action="javascript:void(0);" onsubmit="dice_post();">
|
|
Dice: <input type="number" name="diceNum" min="1" max="99" required/>
|
|
d <input type="number" name="diceSides" min="1" max="99" required/>
|
|
±<input type="number" name="diceMod" min="-999" max="999"/>
|
|
<input type="checkbox" name="diceStrict"/>
|
|
<span class="tooltip" title="Only take matching rolls.">Strict</span><br />
|
|
<input type="checkbox" onclick="document.getElementById('diceChal').disabled=!this.checked;"/>
|
|
<span class="tooltip" title="Dice challenge">DC:</span>
|
|
<input type="number" name="diceChal" id="diceChal" min="1" max="99" disabled/><br />
|
|
<input type="checkbox" onclick="document.getElementById('diceRolls').disabled=!this.checked;"/>
|
|
<span class="tooltip" title="Automatically close the dice call after this many rolls have been made.">Rolls Taken:</span>
|
|
<input type="number" name="diceRolls" id="diceRolls" min="1" max="99" disabled/><br />
|
|
<input type="submit" name="submit" value="Roll 'em"/>
|
|
</form>
|
|
</div>
|
|
<div id="QMPostPoll" class="QMPostTabContent" style="display:none;">
|
|
The polls are rigged.
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
<br />
|
|
<br />
|
|
<div id="chatPane">
|
|
<h1>Chat</h1>
|
|
<div id="chatWindow">
|
|
{% autoescape false %}
|
|
{% for message in messages %}
|
|
<div class="message">
|
|
<div class="messageHeader">
|
|
<span class="messageName">Anonymous</span> <span class="messageDate">{{ message[3] | strftime }}</span>
|
|
</div>
|
|
<div class="messageMessage">{{ message[4] }}</div>
|
|
</div>
|
|
<hr>
|
|
{% endfor %}
|
|
{% endautoescape %}
|
|
</div>
|
|
<div id="messageTextDiv"><textarea id="messageTextArea"></textarea></div>
|
|
</div>
|
|
</div>
|
|
{% endblock %}
|