diff --git a/src/templates/frontend/frontend.css b/src/templates/frontend/frontend.css
new file mode 100644
index 0000000000000000000000000000000000000000..7c9454cf89c6831f9336efd20af1829fae820faa
--- /dev/null
+++ b/src/templates/frontend/frontend.css
@@ -0,0 +1,90 @@
+@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
diff --git a/src/templates/frontend.jinja b/src/templates/frontend/frontend.jinja
similarity index 81%
rename from src/templates/frontend.jinja
rename to src/templates/frontend/frontend.jinja
index f036bc6158310a0665936b3c205beeb6c8570817..0b9be7c0e22c4f456b3f58589e78564d3c7a86f7 100644
--- a/src/templates/frontend.jinja
+++ b/src/templates/frontend/frontend.jinja
@@ -1,12 +1,13 @@
<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">
diff --git a/src/templates/frontend/frontend.js b/src/templates/frontend/frontend.js
new file mode 100644
index 0000000000000000000000000000000000000000..46e11cedce6f4941b72fcd5445d4672f8e98ed18
--- /dev/null
+++ b/src/templates/frontend/frontend.js
@@ -0,0 +1,57 @@
+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);
+});
+
+
diff --git a/src/views/game.py b/src/views/game.py
index aa0a1dc6ef5dceb7b4392a634dfc40465f551e80..bf4f26015ad688f4e85b67809721e4536706ed62 100644
--- a/src/views/game.py
+++ b/src/views/game.py
@@ -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)