iou1name/anonkun
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

revamp dice post ui, change 'var' to 'let'

Browse Source
This commit is contained in:
iou1name 2018-07-02 16:10:50 -04:00
parent 3b39d55b7b
commit fd91294698
3 changed files with 64 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
events.py
View File

@ -3,13 +3,14 @@
SocketIO events. SocketIO events.
""" """
import time import time
import random
import bleach import bleach
from flask import session from flask import session
from flask_socketio import SocketIO, emit, join_room from flask_socketio import SocketIO, emit, join_room
import database as db
import tools import tools
import database as db
socketio = SocketIO() socketio = SocketIO()
@ -93,3 +94,18 @@ def update_post(data):
post_id = data["post_id"] post_id = data["post_id"]
db.update_quest_post(post_id, post) db.update_quest_post(post_id, post)
emit("update_post", data, room=room) emit("update_post", data, room=room)
@socketio.on('dice_post')
def dice_post(data):
"""
Called when the QM posts a new dice call.
"""
print(data)
room = data["room"]
res = db.get_quest_meta(quest_id=room)
if not res:
return
if session.get("user_id") != res[3]:
return
emit("dice_post", data, room=room)

6
templates/base.html
View File

@ -5,7 +5,7 @@
<link rel="stylesheet" type="text/css" href="/static/anonkun.css"> <link rel="stylesheet" type="text/css" href="/static/anonkun.css">
<script> <script>
function toggleHeader() { function toggleHeader() {
var xhr = new XMLHttpRequest(); let xhr = new XMLHttpRequest();
if (document.getElementById('header').style.display == 'initial') { if (document.getElementById('header').style.display == 'initial') {
document.getElementById('header').style.display = 'none'; document.getElementById('header').style.display = 'none';
document.getElementById('headerHidden').style.display = 'initial'; document.getElementById('headerHidden').style.display = 'initial';
@ -23,12 +23,12 @@
</head> </head>
<body> <body>
<ul id="header" class="header" style="{% if session.get("hide_header") == True %}display:none;{% else %}display:initial;{% endif %}"> <ul id="header" class="header" style="{% if session.get("hide_header") == True %}display:none;{% else %}display:initial;{% endif %}">
<li><a onclick="toggleHeader();" href="javascript:void(0);">^</a></li> <li><a onclick="toggleHeader();" href="javascript:void(0);">⤒</a></li>
<li><a href="{{ url_for('.index') }}">Home</a></li> <li><a href="{{ url_for('.index') }}">Home</a></li>
{% block header %}{% endblock %} {% block header %}{% endblock %}
</ul> </ul>
<ul id="headerHidden" class="header" style="{% if session.get("hide_header") == True %}display:initial;{% else %}display:none;{% endif %}"> <ul id="headerHidden" class="header" style="{% if session.get("hide_header") == True %}display:initial;{% else %}display:none;{% endif %}">
<li><a onclick="toggleHeader();" href="javascript:void(0);">^</a></li> <li><a onclick="toggleHeader();" href="javascript:void(0);">⤓</a></li>
</ul> </ul>
<div id="content">{% block content %}{% endblock %} </div> <div id="content">{% block content %}{% endblock %} </div>
</body> </body>

58
templates/quest.html
View File

@ -15,30 +15,32 @@
socket.emit('joined', {room: {{ room_id }}}); socket.emit('joined', {room: {{ room_id }}});
}); });
socket.on('message', function(data) { socket.on('message', function(data) {
var date = new Date(data.date * 1000); let date = new Date(data.date * 1000);
var date_str = date.getFullYear() + '-' + padToTwo(date.getMonth()+1) + '-' + padToTwo(date.getDate()) + ' '; let date_str = date.getFullYear() + '-' + padToTwo(date.getMonth()+1) + '-' + padToTwo(date.getDate()) + ' ';
date_str += padToTwo(date.getHours()) + ':' + padToTwo(date.getMinutes()) + ':' + padToTwo(date.getSeconds()); date_str += padToTwo(date.getHours()) + ':' + padToTwo(date.getMinutes()) + ':' + padToTwo(date.getSeconds());
var msg_str = '<div class="messageHeader">\n<span class="messageName">' + data.name + '</span> '; let msg_str = '<div class="messageHeader">\n<span class="messageName">' + data.name + '</span> ';
msg_str += '<span class="messageDate">' + date_str + '</span>\n</div>\n'; msg_str += '<span class="messageDate">' + date_str + '</span>\n</div>\n';
msg_str += '<div class="message">' + data.message + '</div>\n'; msg_str += '<div class="message">' + data.message + '</div>\n<hr>';
var mbox = document.getElementById('chatWindow'); let mbox = document.getElementById('chatWindow');
mbox.innerHTML = mbox.innerHTML + msg_str; mbox.innerHTML = mbox.innerHTML + msg_str;
mbox.scrollTop = mbox.scrollHeight; mbox.scrollTop = mbox.scrollHeight;
}); });
socket.on('new_post', function(data) { socket.on('new_post', function(data) {
var qposts = document.getElementById('questPosts'); let qposts = document.getElementById('questPosts');
qposts.innerHTML = qposts.innerHTML + '<div class="questPost">' + data.post + '</div>'; qposts.innerHTML = qposts.innerHTML + '<div class="questPost">' + data.post + '</div>';
}); });
socket.on('update_post', function(data) { socket.on('update_post', function(data) {
var post_id = data.post_id; let post_id = data.post_id;
document.getElementById('questPostData-' + post_id).innerHTML = data.post; document.getElementById('questPostData-' + post_id).innerHTML = data.post;
}); });
var mtarea = document.getElementById('messageTextArea'); socket.on('dice_post', function(data) {
});
let mtarea = document.getElementById('messageTextArea');
mtarea.addEventListener('keypress', function(event) { mtarea.addEventListener('keypress', function(event) {
if (event.key == 'Enter' && !event.shiftKey) { if (event.key == 'Enter' && !event.shiftKey) {
var text = mtarea.value.trim(); let text = mtarea.value.trim();
mtarea.value = ''; mtarea.value = '';
if (text == '') { return; } if (text == '') { return; }
socket.emit('message', {message: text, name: 'Anonymous', room: {{ room_id }}}); socket.emit('message', {message: text, name: 'Anonymous', room: {{ room_id }}});
@ -55,8 +57,8 @@
{% if session.get("user_id") == owner_id %} {% if session.get("user_id") == owner_id %}
<script> <script>
function makePost() { function makePost() {
var qparea = document.getElementById('postTextArea'); let qparea = document.getElementById('postTextArea');
var text = qparea.value.trim(); let text = qparea.value.trim();
qparea.value = ''; qparea.value = '';
if (text == '') { return; } if (text == '') { return; }
socket.emit('new_post', {post: text, room: {{ room_id }}}); socket.emit('new_post', {post: text, room: {{ room_id }}});
@ -70,14 +72,24 @@
function save_post(post_id) { function save_post(post_id) {
document.getElementById('questPostData-' + post_id).contentEditable = 'false'; document.getElementById('questPostData-' + post_id).contentEditable = 'false';
document.getElementById('questPostData-' + post_id).style.border = null; document.getElementById('questPostData-' + post_id).style.border = null;
var text = document.getElementById('questPostData-' + post_id).innerHTML; let text = document.getElementById('questPostData-' + post_id).innerHTML;
socket.emit('update_post', {post_id: post_id, post: text, room: {{ room_id }}}); socket.emit('update_post', {post_id: post_id, post: text, room: {{ room_id }}});
document.getElementById('savePost-' + post_id).style.display = 'none'; document.getElementById('savePost-' + post_id).style.display = 'none';
} }
function dice_post() {
let formData = new FormData(document.getElementById('QMDicePostForm'));
formData.append('room', {{ room_id }});
let obj = {};
formData.forEach(function(value, key) {
obj[key] = value;
});
socket.emit('dice_post', obj);
document.getElementById('QMDicePostForm').reset();
}
</script> </script>
<script> <script>
function openPostTab(event, modeName) { function openPostTab(event, modeName) {
var i, QMPostTabContent, QMPostTab; let i, QMPostTabContent, QMPostTab;
QMPostTabContent = document.getElementsByClassName("QMPostTabContent"); QMPostTabContent = document.getElementsByClassName("QMPostTabContent");
for (i = 0; i < QMPostTabContent.length; i++) { for (i = 0; i < QMPostTabContent.length; i++) {
@ -136,7 +148,24 @@
<input type="submit" name="newPost" value="Post" onclick="makePost();"/> <input type="submit" name="newPost" value="Post" onclick="makePost();"/>
</div> </div>
<div id="QMPostDice" class="QMPostTabContent" style="display:none;"> <div id="QMPostDice" class="QMPostTabContent" style="display:none;">
Dice for the dice god. 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"/>
d <input type="number" name="diceSides" min="1" max="99"/>
±<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="checkbox" onclick="document.getElementById('diceBest').disabled=!this.checked;"/>
<span class="tooltip" title="Pick out the N highest rolls after the dice call has been closed. This should be lower than the number of rolls taken.">Best:</span>
<input type="number" name="diceBest" id="diceBest" min="1" max="99" disabled/><br />
<input type="submit" name="submit" value="Roll 'em"/>
</form>
</div> </div>
<div id="QMPostPoll" class="QMPostTabContent" style="display:none;"> <div id="QMPostPoll" class="QMPostTabContent" style="display:none;">
The polls are rigged. The polls are rigged.
@ -157,6 +186,7 @@
</div> </div>
<div class="messageMessage">{{ message[4] }}</div> <div class="messageMessage">{{ message[4] }}</div>
</div> </div>
<hr>
{% endfor %} {% endfor %}
{% endautoescape %} {% endautoescape %}
</div> </div>