it still looks bad

This commit is contained in:
EvilMuffinHa 2020-10-14 21:30:59 -04:00
parent 00cc143d6e
commit d69812a424
8 changed files with 291 additions and 27 deletions

View File

@ -8,6 +8,7 @@ from logging.config import dictConfig
from flask_socketio import SocketIO, emit, join_room, leave_room
import json
# Loading logging preferences
with open("logger.json", "r") as f:
dconf = json.load(f)
@ -20,6 +21,7 @@ app = Flask(__name__)
app.logger.info("Flask app loaded at " + __name__)
app.config.from_object(Config)
# Version allows css / js to load instead of taking hours to update even on run smh
version = rint(0, 300000000)
@ -52,8 +54,12 @@ def host():
games[hash]["negs"] = form.negs.data
app.logger.debug("Game host at %s", hostcode)
app.logger.info("Game created at %s", hash)
session.permanent = True
return resp
default = [10, 20, 15, 5]
with open("src/templates/games.json", "r") as f:
tmp = json.load(f)
default = [tmp["tossup"], tmp["bonus"], tmp["power"], tmp["negs"]]
return render_template('host.html', title="Host Game", version=str(version), form=form, default=default)
@ -97,6 +103,7 @@ def join():
return resp
else:
return render_template('gamenotfound.html', title="Join Game", version=str(version))
session.permanent = True
return render_template('join.html', title="Join Game", version=str(version), form=form)
@ -114,10 +121,7 @@ socketio = SocketIO(app)
# V
@socketio.on('json')
def handle_json(json):
print('received message: ' + str(json))
emit('json', json)
# Checks when a player / host joins the room
@ -132,7 +136,8 @@ def on_join(data):
if dohash(gid) == room:
username = "host"
join_room(str(room))
emit('player_join_event', games[room]["players"], room=room)
msg = {"locked": games[room]["locked"], "players": games[room]["players"]}
emit('player_join_event', msg, room=room)
# When the host sends data to server
@ -144,35 +149,64 @@ def host_msg(data):
return
msg = data["data"]
if "lock" in msg.keys():
pass # lock buzzers
games[room]["locked"] = True
emit("locked_event", msg, room=room)
elif "unlock" in msg.keys():
games[room]["locked"] = False
emit("unlocked_event", msg, room=room)
elif "kick" in msg.keys():
msg["url"] = url_for('kick')
username = msg["kick"]
del games[room]["players"][username]
emit("player_kick_event", msg, room=room)
elif "close" in msg.keys():
emit("host_leave_event", {"host": 0}, room=room)
elif "tossup" in msg.keys():
pass # give player points
if games[room]["buzzed"] == "":
return
games[room]["players"][games[room]["buzzed"]] += games[room]["tossup"]
username = games[room]["buzzed"]
games[room]["buzzed"] = ""
emit("update_score_event", {"username":username, "players": games[room]["players"]}, room=room)
emit("unlocked_event", {}, room=room)
elif "bonus" in msg.keys():
pass # give player points
if games[room]["buzzed"] == "":
return
games[room]["players"][games[room]["buzzed"]] += games[room]["bonus"]
username = games[room]["buzzed"]
games[room]["buzzed"] = ""
emit("update_score_event", {"username":username, "players": games[room]["players"]}, room=room)
emit("unlocked_event", {}, room=room)
elif "power" in msg.keys():
pass # give player points
if games[room]["buzzed"] == "":
return
games[room]["players"][games[room]["buzzed"]] += games[room]["power"]
username = games[room]["buzzed"]
games[room]["buzzed"] = ""
emit("update_score_event", {"username":username, "players": games[room]["players"]}, room=room)
emit("unlocked_event", {}, room=room)
elif "negs" in msg.keys():
pass # give player points
elif "amount" in msg.keys():
pass # give player points
if games[room]["buzzed"] == "":
return
games[room]["players"][games[room]["buzzed"]] -= games[room]["negs"]
username = games[room]["buzzed"]
games[room]["buzzed"] = ""
emit("update_score_event", {"username":username, "players": games[room]["players"]}, room=room)
emit("unlocked_event", {}, room=room)
# When the player buzzes
@socketio.on('buzz')
def buzz(data):
room = data["room"]
emit("buzz", data, room=room) # Just send it back
if not games[room]["locked"]:
games[room]["buzzed"] = data["username"]
emit("buzz_event", data, room=room) # Just send it back
emit("locked_event", {}, room=room)
# When a player / host leaves
@socketio.on('leave')
def on_leave(data):
print("player leave")
room = data['room']
username = ""
if "username" in data.keys():
@ -180,9 +214,11 @@ def on_leave(data):
else:
gid = data["_gid"]
if dohash(gid) == room:
username = "host"
leave_room(str(room))
emit('host_leave_event', {'host': 0}, room=room)
return
del games[room]["players"][username]
leave_room(room)
leave_room(str(room))
emit('player_leave_event', {"player": username}, room=room)

View File

@ -1,8 +1,10 @@
from dotenv import load_dotenv
import os
from datetime import timedelta
load_dotenv()
class Config(object):
SECRET_KEY = os.getenv('SECRET_KEY') or "debug-secret-key-for-testing-only"
PERMANENT_SESSION_LIFETIME = timedelta(days=31)

View File

@ -3,6 +3,7 @@ var socket = io();
code = document.getElementById("code").value;
name = document.getElementById("name").value;
kickurl = document.getElementById("kick").value;
hostleave = document.getElementById("hostleave").value;
function removeAllChildren(e) {
var child = e.lastElementChild;
@ -17,7 +18,8 @@ socket.on("connect", function() {
socket.emit("join", {"username": name, "room": code, "_gid": ""});
})
socket.on("player_join_event", function(data) {
socket.on("player_join_event", function(datas) {
data = datas["players"]
div = document.getElementById("sidebar");
removeAllChildren(div);
if (Object.keys(data).length == 0) {
@ -32,11 +34,20 @@ socket.on("player_join_event", function(data) {
playerDisplay.setAttribute("id", keys[key]);
playerDisplay.setAttribute("class", "playertag");
var playerLink = document.createElement("p");
playerLink.appendChild(document.createTextNode(keys[key]));
playerLink.appendChild(document.createTextNode(keys[key] + ": "));
var playerPoints = document.createElement("p");
playerPoints.setAttribute("id", keys[key] + "_points");
playerPoints.appendChild(document.createTextNode(data[keys[key]].toString()));
playerDisplay.appendChild(playerLink);
playerDisplay.appendChild(playerPoints);
playerDisplay.appendChild(document.createElement("br"));
div.appendChild(playerDisplay);
}
locked = datas["locked"]
if (locked) {
lock();
}
});
socket.on("player_leave_event", function(data) {
@ -52,8 +63,68 @@ socket.on("player_kick_event", function(data) {
element.parentNode.removeChild(element);
}
});
socket.on("host_leave_event", function(data) {
window.location = hostleave;
})
socket.on("buzz_event", function(data) {
var audio = new Audio('/static/buzz.mp3');
audio.play();
var player = data["username"];
document.getElementById(player).childNodes[0].style.color = "#2c26e2";
document.getElementById(player).childNodes[1].style.color = "#2c26e2";
})
socket.on("update_score_event", function(datas) {
var player = datas["username"];
document.getElementById(player).childNodes[0].style.color = "";
document.getElementById(player).childNodes[1].style.color = "";
data = datas["players"]
div = document.getElementById("sidebar");
removeAllChildren(div);
if (Object.keys(data).length == 0) {
var keepSidebarOpen = document.createElement("input");
keepSidebarOpen.setAttribute("type", "hidden");
div.appendChild(keepSidebarOpen);
return
}
var keys = Object.keys(data);
for (var key in keys) {
var playerDisplay = document.createElement("div");
playerDisplay.setAttribute("id", keys[key]);
playerDisplay.setAttribute("class", "playertag");
var playerLink = document.createElement("p");
playerLink.appendChild(document.createTextNode(keys[key] + ": "));
var playerPoints = document.createElement("p");
playerPoints.setAttribute("id", keys[key] + "_points");
playerPoints.appendChild(document.createTextNode(data[keys[key]].toString()));
playerDisplay.appendChild(playerLink);
playerDisplay.appendChild(playerPoints);
playerDisplay.appendChild(document.createElement("br"));
div.appendChild(playerDisplay);
}
})
socket.on("locked_event", function(data) {
lock();
})
socket.on("unlocked_event", function(data) {
unlock();
})
function lock() {
var button = document.getElementById("b_buzzer");
button.innerHTML = "LOCKED";
}
function unlock() {
var button = document.getElementById("b_buzzer");
button.innerHTML = "BUZZ! [SPACE]";
}
function buzz() {
// when client hits buzz
socket.emit("buzz", {"username": name, "room": code, "_gid": ""});
@ -68,7 +139,6 @@ $(document).on('keypress', function(e) {
window.onbeforeunload = function leave() {
// when client leaves
console.log("leave")
socket.emit("leave", {"username": name, "room": code, "_gid": ""});
}

View File

@ -1,6 +1,7 @@
var socket = io();
code = document.getElementById("copycode").value;
close_url = document.getElementById("close_url").value;
function readCookie(name) {
var nameEQ = name + "=";
@ -42,7 +43,9 @@ window.onbeforeunload = function leave() {
}
socket.on("player_join_event", function(data) {
socket.on("player_join_event", function(datas) {
data = datas["players"]
div = document.getElementById("sidebar");
removeAllChildren(div);
if (Object.keys(data).length == 0) {
@ -57,11 +60,15 @@ socket.on("player_join_event", function(data) {
playerDisplay.setAttribute("id", keys[key]);
playerDisplay.setAttribute("class", "playertag");
var playerLink = document.createElement("p");
playerLink.appendChild(document.createTextNode(keys[key]));
playerLink.appendChild(document.createTextNode(keys[key] + ": "));
var playerPoints = document.createElement("p");
playerPoints.setAttribute("id", keys[key] + "_points");
playerPoints.appendChild(document.createTextNode(data[keys[key]].toString()));
var removeLink = document.createElement("a");
removeLink.setAttribute("onclick", "removePlayer('" + keys[key] + "');");
removeLink.appendChild(document.createTextNode("Kick"));
playerDisplay.appendChild(playerLink);
playerDisplay.appendChild(playerPoints);
playerDisplay.appendChild(removeLink);
playerDisplay.appendChild(document.createElement("br"));
div.appendChild(playerDisplay);
@ -83,8 +90,138 @@ function removePlayer(playername) {
send({"kick": playername});
}
socket.on("buzz", function(message) {
function closeGame() {
send({"close": "game"});
setTimeout(function(){ window.location = close_url; }, 10);
}
function tossup() {
send({"tossup": 0});
}
function bonus() {
send({"bonus": 0});
}
function power() {
send({"power": 0});
}
function neg() {
send({"negs": 0});
}
socket.on("buzz_event", function(data) {
var audio = new Audio('/static/buzz.mp3');
audio.play();
var player = data["username"];
document.getElementById(player).childNodes[0].style.color = "#2c26e2";
document.getElementById(player).childNodes[1].style.color = "#2c26e2";
game = document.getElementById("game");
var tossup = document.createElement("a");
tossup.setAttribute("onclick", "tossup();");
tossup.setAttribute("id", "tossup");
tossup.innerHTML = "TOSSUP [T]"
var bonus = document.createElement("a");
bonus.setAttribute("onclick", "bonus();");
bonus.setAttribute("id", "bonus");
bonus.innerHTML = "BONUS [B]"
var power = document.createElement("a");
power.setAttribute("onclick", "power();");
power.setAttribute("id", "power");
power.innerHTML = "POWER [P]"
var negs = document.createElement("a");
negs.setAttribute("onclick", "neg();");
negs.setAttribute("id", "negs");
negs.innerHTML = "NEG [N]"
game.appendChild(tossup);
game.appendChild(document.createElement("br"));
game.appendChild(document.createElement("br"));
game.appendChild(document.createElement("br"));
game.appendChild(bonus);
game.appendChild(document.createElement("br"));
game.appendChild(document.createElement("br"));
game.appendChild(document.createElement("br"));
game.appendChild(power);
game.appendChild(document.createElement("br"));
game.appendChild(document.createElement("br"));
game.appendChild(document.createElement("br"));
game.appendChild(negs);
lockBuzzers();
})
socket.on("update_score_event", function(datas) {
var player = datas["username"];
document.getElementById(player).childNodes[0].style.color = "";
document.getElementById(player).childNodes[1].style.color = "";
data = datas["players"]
div = document.getElementById("sidebar");
removeAllChildren(div);
if (Object.keys(data).length == 0) {
var keepSidebarOpen = document.createElement("input");
keepSidebarOpen.setAttribute("type", "hidden");
div.appendChild(keepSidebarOpen);
return
}
var keys = Object.keys(data);
for (var key in keys) {
var playerDisplay = document.createElement("div");
playerDisplay.setAttribute("id", keys[key]);
playerDisplay.setAttribute("class", "playertag");
var playerLink = document.createElement("p");
playerLink.appendChild(document.createTextNode(keys[key] + ": "));
var playerPoints = document.createElement("p");
playerPoints.setAttribute("id", keys[key] + "_points");
playerPoints.appendChild(document.createTextNode(data[keys[key]].toString()));
var removeLink = document.createElement("a");
removeLink.setAttribute("onclick", "removePlayer('" + keys[key] + "');");
removeLink.appendChild(document.createTextNode("Kick"));
playerDisplay.appendChild(playerLink);
playerDisplay.appendChild(playerPoints);
playerDisplay.appendChild(removeLink);
playerDisplay.appendChild(document.createElement("br"));
div.appendChild(playerDisplay);
}
document.getElementById("game").innerHTML = "";
unlockBuzzers();
})
function lockBuzzers() {
send({"lock": 0});
var button = document.getElementById("lock_bz");
button.setAttribute("onclick", "unlockBuzzers();");
button.innerHTML = "Unlock Buzzers [L]";
}
function unlockBuzzers() {
send({"unlock": 0});
var button = document.getElementById("lock_bz");
button.setAttribute("onclick", "lockBuzzers();");
button.innerHTML = "Lock Buzzers [L]";
}
$(document).on('keypress', function(e) {
if (e.key === 'T' || e.key === 't') {
e.preventDefault();
tossup();
} else if (e.key === 'B' || e.key === 'b') {
e.preventDefault();
bonus();
} else if (e.key === 'P' || e.key === 'p') {
e.preventDefault();
power();
} else if (e.key === 'N' || e.key === 'n') {
e.preventDefault();
neg();
} else if (e.key === 'L' || e.key === 'l') {
var button = document.getElementById("lock_bz");
if (button.innerHTML === "Unlock Buzzers [L]") {
unlockBuzzers();
} else {
lockBuzzers();
}
}
})

View File

@ -142,6 +142,7 @@ body {
/* Style page content */
.game {
padding: 0px 10px;
display: block;
}
/* On smaller screens, where height is less than 450px, change the style of the sidebar (less padding and a smaller font size) */

View File

@ -12,10 +12,26 @@
<center>
<p>Click to copy the game code: </p>
<input id="copycode" class="copycode" name="copycode" value="{{ gamecode }}" type="text" size="32" readonly onclick="copycode();"/>
<input type="hidden" id="close_url" name="close_url" value="{{ url_for('host') }}">
<br><br><br>
<div class="button">
<a onclick="lockBuzzers();" id="lock_bz">Lock Buzzers [L]</a>
</div>
<br><br><br>
<div class="button">
<a onclick="closeGame();" id="leave">Close Game</a>
</div>
</center>
</div>
<br><br><br>
<div class="button game">
<center>
<div id="game">
</div>
</center>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/socket.io/2.2.0/socket.io.js" integrity="sha256-yr4fRk/GU1ehYJPAs8P4JlTgu0Hdsp4ZKrx8bDEDC3I=" crossorigin="anonymous"></script>
<script src="/static/host.js?version={{ version }}" type="text/javascript" charset="utf-8"></script>
{% endblock %}

View File

@ -4,6 +4,7 @@
"bonus": 20,
"power": 15,
"negs": 5,
"teams": false,
"locked": false,
"buzzed": "",
"players": {}
}

View File

@ -22,6 +22,7 @@
<br><input type="hidden" id="code" name="code" value="{{ gamecode }}"><br>
<br><input type="hidden" id="name" name="name" value="{{ username }}">
<br><input type="hidden" id="kick" name="kick" value="{{ url_for('kick') }}">
<input type="hidden" id="hostleave" name="hostleave" value="{{ url_for('join') }}">
<div class="sidebar" id="sidebar">
</div>
<div id="game">
@ -30,7 +31,7 @@
</div>
<div class="button buzzer">
<a onclick="buzz();">BUZZ! [SPACE]</a>
<a onclick="buzz();" id="b_buzzer">BUZZ! [SPACE]</a>
</div>
</center>
</div>