Skip to content
Snippets Groups Projects
Commit c49eee0c authored by Leonhard Strohmidel's avatar Leonhard Strohmidel
Browse files

~refactoring frontend

parent 0c2323b8
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
src/templates/frontend/frontend.css 0 → 100644
+ 90
− 0
View file @ c49eee0c
@font-face { font-family: PressStart2P; src: url('../static/PressStart2P-Regular.ttf'); }
body{
font-family: PressStart2P;
}
#player_select{
display: none;
}
#final_screen{
display: none;
}
#oponents{
display: none;
}
h1, h2, h3, h4, h5 .h1, .h2, .h3, .h4, .h5{
font-family: PressStart2P;
}
.defult_row{
height: 33px;
}
.answer_row{
height: 298px;
}
.team_row{
height: 200px;
}
.answer_bg{
height: 50px;
font-size: 20px;
}
.fails{
height: 37px;
color: #c83200;
font-size: 34px;
font-family: PressStart2P;
margin-bottom: 7px;
}
.largest{
font-size: 150px;
}
.xxl{
font-size: 50px;
}
.xl{
font-size: 42px;
}
.l{
font-size: 34px;
}
.ccc-blue{
color: #0084b0;
}
.ccc-green{
color: #00a356;
}
.bg-black{
background-color: black !important;
}
.bg-grey{
background-color: #1e1e3c;
}
.table td{
border: none;
}
.vertical-center {
min-height: 100%; /* Fallback for browsers do NOT support vh unit */
min-height: 100vh; /* These two lines are counted as one :-) */
display: flex;
align-items: center;
}
\ No newline at end of file
src/templates/frontend.jinja → src/templates/frontend/frontend.jinja
+ 8
− 98
View file @ c49eee0c
<html>
<head>
<title>Doesn't matter</title>
<title>CFD Frontend</title>
<meta name="viewport" content="width = device-width, initial-scale = 1">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">
<link type="text/css" rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">
<link type="text/css" rel="stylesheet" href="frontend.css">
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/socket.io/1.4.8/socket.io.min.js"></script>
<script>
<script src="frontend.js">
var socket = io.connect("ws://localhost:5000");
socket.on("round", function(data){
......@@ -14,10 +15,13 @@
document.getElementById("round_points").innerHTML=data["points"];
document.getElementById("question").innerHTML=data["question"];
document.getElementById("points_left").innerHTML=data["current_team_points"][0];
document.getElementById("points_right").innerHTML=data["current_team_points"][1];
document.getElementById("team_right").innerHTML=data["current_teams"][1];
document.getElementById("team_left").innerHTML=data["current_teams"][0];
document.getElementById("logo_left").src="../"+ data["current_team_logos"][0];
document.getElementById("logo_right").src="../"+ data["current_team_logos"][1];
......@@ -84,100 +88,6 @@
</script>
</head>
<style>
@font-face { font-family: PressStart2P; src: url('../static/PressStart2P-Regular.ttf'); }
body{
font-family: PressStart2P;
}
#player_select{
display: none;
}
#final_screen{
display: none;
}
#oponents{
display: none;
}
h1, h2, h3, h4, h5 .h1, .h2, .h3, .h4, .h5{
font-family: PressStart2P;
}
.defult_row{
height: 33px;
}
.answer_row{
height: 298px;
}
.team_row{
height: 200px;
}
.answer_bg{
height: 50px;
font-size: 20px;
}
.fails{
height: 37px;
color: #c83200;
font-size: 34px;
font-family: PressStart2P;
margin-bottom: 7px;
}
.largest{
font-size: 150px;
}
.xxl{
font-size: 50px;
}
.xl{
font-size: 42px;
}
.l{
font-size: 34px;
}
.ccc-blue{
color: #0084b0;
}
.ccc-green{
color: #00a356;
}
.bg-black{
background-color: black !important;
}
.bg-grey{
background-color: #1e1e3c;
}
.table td{
border: none;
}
.vertical-center {
min-height: 100%; /* Fallback for browsers do NOT support vh unit */
min-height: 100vh; /* These two lines are counted as one :-) */
display: flex;
align-items: center;
}
</style>
<body class="bg-black text-light vertical-center">
<div class="container-fluid" id="intro">
......
src/templates/frontend/frontend.js 0 → 100644
+ 57
− 0
View file @ c49eee0c
class Team{
constructor (name="", logo_path="", side){
this.name = name;
this.logo_path = logo_path;
this.errors = 0;
this.points = 0;
this.points_element = document.getElementById("points_" + side);
this.errors_element = document.getElementById("fails_" + side);
this.name_element = document.getElementById("team_" + side);
this.logo_element = document.getElementById("logo_" + side);
}
update_elements(){
this.points_element.innerHTML = this.points;
var fails_string = "";
for(x = 0; x < this.fails; x++){
fails_string += "X";
}
this.errors_element.innerHTML = fails_string;
this.name_element.innerHTML = this.name;
}
parse_from_json(json){
this.name = json.name;
this.logo_path = json.logo_path;
this.errors = json.errors;
this.points = json.points;
}
}
var socket = io.connect("ws://localhost:5000");
var team_left;
var team_right;
socket.on("init_team_left", function(data){
team_left = new Team(side="left");
team_left.parse_from_json(data);
});
socket.on("init_team_right", function(data){
team_right = new Team(side="right");
team_right.parse_from_json(data);
});
socket.on("update_team_left", function(data){
team_left.parse_from_json(data);
});
socket.on("update_team_right", function(data){
team_right.parse_from_json(data);
});
src/views/game.py
+ 4
− 0
View file @ c49eee0c
......@@ -93,6 +93,10 @@ def create_random_round():
return render_game_view(game)
#################################
# Following do change do frontend
#################################
@game.route("/show_answer", methods=["POST"])
def show_answer():
game = form_verify_game(request)
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment