From f7336776cb86303e9982215e2c80c6e585c29c63 Mon Sep 17 00:00:00 2001 From: Franziska Date: Mon, 29 Mar 2021 13:46:41 +0200 Subject: [PATCH] =?UTF-8?q?Javascript=20hinzugef=C3=BCgt?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- website/Tickleiste.html | 31 +++++----- website/javascript.js | 123 ++++++++++++++++++++++++++++++++++++++++ website/stylesheet.css | 23 ++++---- 3 files changed, 152 insertions(+), 25 deletions(-) diff --git a/website/Tickleiste.html b/website/Tickleiste.html index ad50aea..7817b92 100644 --- a/website/Tickleiste.html +++ b/website/Tickleiste.html @@ -3,45 +3,50 @@ Tickleiste - + +

Tickleiste

- +
diff --git a/website/javascript.js b/website/javascript.js index e69de29..54b4e24 100644 --- a/website/javascript.js +++ b/website/javascript.js @@ -0,0 +1,123 @@ +var ws = new WebSocket("ws://localhost:9998/echo"); +let addButton = document.getElementById("a"); +let deleteButton = document.getElementById("b"); +let changeTickButton = document.getElementById("c"); +var players = []; + + + +ws.onmessage = function(evt){ + var msg = evt.data; + var obj = JSON.parse(msg); + if (obj.eventType == "SetPlayerTickE") { + for (i = 0; i < players.length; i++){ + if (players[i].UUID == obj.playerUUID){ + players[i].Tick = obj.tick; + } + } + PlayerList(); + CurrentPlayer(); + } + if (obj.eventType == "AddPlayerTickE") { + var newPlayer = new Object (); + newPlayer.Name = obj.playerName; + newPlayer.UUID = obj.playerUUID; + newPlayer.Tick = "0"; + players.push(newPlayer); + PlayerList(); + CurrentPlayer(); + } + if (obj.eventType == "InitializeTickLeisteE") { + + } + if (obj.eventType == "ChangeNameE") { + for (i = 0; i < players.length; i++){ + if (players[i].UUID == obj.playerUUID){ + players[i].Name = obj.playerName; + } + } + } + if (obj.eventType == "RemovePlayerE") { + for (i = 0; i < players.length; i++){ + if (players[i].UUID == obj.playerUUID){ + players.splice(i,1); + } + } + PlayerList(); + CurrentPlayer(); + } + else { + console.error('Invalid Event received'); + } +} + + + + +addButton.onclick = function() { + ws.send('{"requestType" : "AddPlayerTickR" "' + document.getElementById("A") + '", "player" : , "tick" :}'); +} + +deleteButton.onclick = function() { + var UUID = ""; + for (i = 0; i < players.length; i++){ + if (players[i].Name == document.getElementById("B")){ + UUID = players[i].UUID; + } + } + ws.send('{"requestType" : "RemovePlayerR", "playerUUID" : "' + UUID + '"}'); + } + +changeTickButton.onclick = function() { + var UUID = ""; + var Tick = document.getElementById("C2"); + for (i = 0; i < players.length; i++){ + if (players[i].Name == document.getElementById("C1")){ + UUID = players[i].UUID; + } + } + ws.send('{"requestType" : "SetPlayerTickR", "playerUUID" : "' + UUID + '", "tick" : "' + Tick + '"}'); + } + +function PlayerList(){ + var content = ""; + for (i = 0; i < players.length; i++){ + content = content + players[i].Name + " " + players[i].Tick + "\n"; + } + document.getElementById("p3").innerHTML = content; + } + +function CurrentPlayer(){ + var curr = "-"; + var smallest = Infinity; + for (i = 0; i < players.length; i++){ + if (parseInt(players[i].Tick) < smallest){ + smallest = parseInt(players[i].Tick); + curr = players[i].Name; + } + } + if (smallest != Infinity){ + document.getElementById("p1").innerHTML = curr; + document.getElementById("p2").innerHTML = "" + smallest; + } + } + + +/*function WebSocketTest() { + + if ("WebSocket" in window) { + + + ws.onopen = function() { + + }; + + ws.onmessage = function (evt) { + var received_msg = evt.data; + alert("Message is received..."); + }; + + ws.onclose = function() { + + + }*/ diff --git a/website/stylesheet.css b/website/stylesheet.css index d245689..722ea00 100644 --- a/website/stylesheet.css +++ b/website/stylesheet.css @@ -1,32 +1,28 @@ #wrapper { - width: 1800px; - /*background-color:red;*/ + width: 100%; } #center { text-align: center; - width:1024px; + width: 55%; float:left; - /* background-color:green;*/ } #right { - width:650px; - margin-left:1150px; - /* background-color:blue;*/ + width:35%; + margin-left: 60%; } #aktuellerTick { - width:300px; + width:50%; text-align: center; float:left; } #aktuellerSpieler { - width:300px; + width:50%; text-align: center; - margin-left:50px; float: right; } @@ -42,8 +38,11 @@ text-align: right; } -input[type="submit"] { - width:150px; +input[type="button"] { + width:25%; +} +input[type="text"] { + width:30% } #Liste {