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 {