diff --git a/src/templates/frontend/frontend.jinja b/src/templates/frontend/frontend.jinja index a4b732f3e3319ca5e5b2c60d045ba45089bed8b0..5af4a8070c068225a04d34b653c3da3f4d476a4d 100644 --- a/src/templates/frontend/frontend.jinja +++ b/src/templates/frontend/frontend.jinja @@ -13,25 +13,29 @@ socket.on("round", function(data){ data = JSON.parse(data) - document.getElementById("round_points").innerHTML=data["points"]; - document.getElementById("question").innerHTML=data["question"]; + var round_points = document.getElementsByClass("round_points"); + for(var el in round_points){ el.innerHTML = data["points"]; } - document.getElementById("points_left").innerHTML=data["current_team_points"][0]; - document.getElementById("points_right").innerHTML=data["current_team_points"][1]; + var round_points = document.getElementsByClass("question"); + for(var el in round_points){ el.innerHTML = data["question"]; } - 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]; + var round_points = document.getElementsByClass("points_left"); + for(var el in round_points){ el.innerHTML = data["current_team_points"][0]; } - document.getElementById("oponent-img-left").src="../"+ data["current_team_logos"][0]; - document.getElementById("oponent-img-right").src="../"+ data["current_team_logos"][1]; + var round_points = document.getElementsByClass("points_right"); + for(var el in round_points){ el.innerHTML = data["current_team_points"][1]; } - document.getElementById("oponent-name-left").innerHTML=data["current_teams"][0]; - document.getElementById("oponent-name-right").innerHTML=data["current_teams"][1]; + var round_points = document.getElementsByClass("team_right"); + for(var el in round_points){ el.innerHTML = data["current_teams"][1]; } - + var round_points = document.getElementsByClass("team_left"); + for(var el in round_points){ el.innerHTML = data["current_teams"][0]; } + + var round_points = document.getElementsByClass("logo_left"); + for(var el in round_points){ el.src="../"+ data["current_team_logos"][0]; } + + var round_points = document.getElementsByClass("logo_right"); + for(var el in round_points){ el.src="../"+ data["current_team_logos"][1]; } answers_inner_html = "" for(answer in data["answers"]){ @@ -206,11 +210,11 @@ </div> <div class="col-8 ccc-blue"> - <h3 id="question"></h3> + <h3 class="question"></h3> </div> <div class="col-2 ccc-green text-right"> - <h3 id="round_points"></h3> + <h3 class="round_points"></h3> </div> </div> @@ -220,7 +224,7 @@ </div> <div class="col-10"> - <table class="table" id="answers"> + <table class="table" class="answers"> </table> </div> @@ -235,12 +239,12 @@ </div> <div class="col-4 text-left"> - <h3 id="team_left"></h3> + <h3 class="team_left"></h3> </div> <div class="col-4 text-right"> - <h3 id="team_right"></h3> + <h3 class="team_right"></h3> </div> <div class="col-2"> @@ -252,21 +256,21 @@ </div> <div class="col-2 text-left"> - <img id="logo_left" height="200"> + <img class="logo_left" height="200"> </div> <div class="col-2 ccc-green text-left"> - <div class="fails" id="fails_left"></div> - <h1 class="xxl" id="points_left">-</h1> + <div class="fails" class="fails_left"></div> + <h1 class="xxl" class="points_left">-</h1> </div> <div class="col-2 ccc-green text-right"> - <div class="fails" id="fails_right"></div> - <h1 class="xxl" id="points_right">-</h1> + <div class="fails" class="fails_right"></div> + <h1 class="xxl" class="points_right">-</h1> </div> <div class="col-2 text-right"> - <img id="logo_right" height="200"> + <img class="logo_right" height="200"> </div> <div class="col-2"> @@ -288,15 +292,15 @@ <div class="container-fluid" id="oponents"> <div class="row"> <div class="col-5 text-center"> - <img id="oponent-img-left" width="500"> - <h2 id="oponent-name-left"></h2> + <img class="logo_eft" width="500"> + <h2 class="team_left"></h2> </div> <div class="col-2 text-center"> <h1 class="ccc-green largest">vs</h1> </div> <div class="col-5 text-center"> - <img id="oponent-img-right" width="500"> - <h2 id="oponent-name-right"></h2> + <img class="logo_right" width="500"> + <h2 class="team_right"></h2> </div> </div> </div>