proper index page, arbituary quest pages

This commit is contained in:
iou1name 2018-06-14 19:15:51 -04:00
parent 20e78c095b
commit 76694e8260
3 changed files with 75 additions and 59 deletions

View File

@ -86,11 +86,17 @@ def unix2string(unix):
messages = [{"name":"Anonymous", "date":1528998539, "message":"lol"}, {"name":"Namefag", "date":1528998521, "message":"kek"}] messages = [{"name":"Anonymous", "date":1528998539, "message":"lol"}, {"name":"Namefag", "date":1528998521, "message":"kek"}]
@app.route("/", methods=["GET", "POST"]) @app.route("/quest/<path:questName>")
def quest(questName):
"""
An arbituary quest page.
"""
return render_template('quest.html', questName=questName, messages=messages)
@app.route("/")
def index(): def index():
if request.method == "GET": """
return render_template('index.html', messages=messages) The index page.
message = request.form.get("msg") """
messages.append(message) return render_template("index.html")
#print(message)
return redirect(url_for("index"))

View File

@ -2,59 +2,9 @@
<html> <html>
<head> <head>
<title>Meet the new anonkun.</title> <title>Meet the new anonkun.</title>
<script type="text/javascript" src="{{ url_for('static', filename='socket.io.slim.js') }}"></script>
<script>
var socket;
var tid = setInterval( function () {
if ( document.readyState !== 'complete' ) return;
clearInterval( tid );
socket = io.connect('https://' + document.domain + ':' + location.port + '/chat');
socket.on('connect', function() {
socket.emit('joined', {room: 'index'});
});
socket.on('message', function(data) {
date = new Date(data.date * 1000);
date_str = date.getFullYear() + '-' + padToTwo(date.getMonth()) + '-' + padToTwo(date.getDay()) + ' ';
date_str += padToTwo(date.getHours()) + ':' + padToTwo(date.getMinutes()) + ':' + padToTwo(date.getSeconds());
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 += '<div class="message">' + data.message + '</div>\n';
mbox = document.getElementById('messageBox');
mbox.innerHTML = mbox.innerHTML + msg_str;
mbox.scrollTop = mbox.scrollHeight;
});
document.getElementById('text').addEventListener('keypress', function(event) {
if (event.key == 'Enter') {
text = document.getElementById('text').value;
document.getElementById('text').value = '';
socket.emit('message', {message: text, name: 'Anonymous', room: 'index'});
}
});
}, 100 );
function padToTwo(number) {
if (number<=99) { number = ("0"+number).slice(-2); }
return number;
}
</script>
</head> </head>
<body> <body>
<div id="document"> <h1>Quests 'n Shiet</h1>
<h1>Chat</h1> <a href="./quest/unga-bunga-quest">Unga Bunga Quest</a>
</div>
<div id="messageBox" style="height:120px; width:320px; border:1px solid #ccc; overflow:auto;">
{% for message in messages %}
<div class="message">
<div class="messageHeader">
<span class="messageName">{{ message["name"] }}</span> <span class="messageDate">{{ message["date"] | strftime }}</span>
</div>
<div class="messageMessage">{{ message["message"] }}</div>
</div>
{% endfor %}
</div>
<textarea id="text" rows="3" cols="43" style="resize:none"></textarea>
</body> </body>
</html> </html>

60
templates/quest.html Normal file
View File

@ -0,0 +1,60 @@
<!DOCTYPE html>
<html>
<head>
<title>{{ questName }}</title>
<script type="text/javascript" src="/static/socket.io.slim.js"></script>
<script>
var socket;
var tid = setInterval( function () {
if ( document.readyState !== 'complete' ) return;
clearInterval( tid );
socket = io.connect('https://' + document.domain + ':' + location.port + '/chat');
socket.on('connect', function() {
socket.emit('joined', {room: '{{ questName }}' });
});
socket.on('message', function(data) {
date = new Date(data.date * 1000);
date_str = date.getFullYear() + '-' + padToTwo(date.getMonth()) + '-' + padToTwo(date.getDay()) + ' ';
date_str += padToTwo(date.getHours()) + ':' + padToTwo(date.getMinutes()) + ':' + padToTwo(date.getSeconds());
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 += '<div class="message">' + data.message + '</div>\n';
mbox = document.getElementById('messageBox');
mbox.innerHTML = mbox.innerHTML + msg_str;
mbox.scrollTop = mbox.scrollHeight;
});
document.getElementById('text').addEventListener('keypress', function(event) {
if (event.key == 'Enter') {
text = document.getElementById('text').value;
document.getElementById('text').value = '';
socket.emit('message', {message: text, name: 'Anonymous', room: '{{ questName }}'});
}
});
}, 100 );
function padToTwo(number) {
if (number<=99) { number = ("0"+number).slice(-2); }
return number;
}
</script>
</head>
<body>
<div id="document">
<h1>Chat</h1>
</div>
<div id="messageBox" style="height:120px; width:320px; border:1px solid #ccc; overflow:auto;">
{% for message in messages %}
<div class="message">
<div class="messageHeader">
<span class="messageName">{{ message["name"] }}</span> <span class="messageDate">{{ message["date"] | strftime }}</span>
</div>
<div class="messageMessage">{{ message["message"] }}</div>
</div>
{% endfor %}
</div>
<textarea id="text" rows="3" cols="43" style="resize:none"></textarea>
</body>
</html>