fixed the hardcoded path

JSON gefixt

website/Tickleiste.html

@@ -13,7 +13,7 @@
                 
                 <img src="tickleiste.png" width= "100%" height= "auto">
                 <form>
-                        <input type="text" pattern="[0-9a-f]" placeholder="TickleistenID" id="D">
+                        <input type="text" pattern="[a-f0-9]" placeholder="TickleistenID" id="D">
                         <input type="button" class="sub" value="Tickleiste ändern" id="tickLeistenId">
                 </form>
                 <form>

website/javascript.js

@@ -4,27 +4,37 @@ let changeTickButton = document.getElementById("changeTick");
 let changeIdButton = document.getElementById("tickLeistenId");
 let reloadButton = document.getElementById("reload");
 let saveButton = document.getElementById("save");
+let url = "wss://nerfingen.de/tickLeisteSocket/";
 var players = [];
-let Id = Math.floor(Math.random()*10000000000000000).toString(16)
-var ws = new WebSocket("ws:10.9.1.129:8080/" + Id);
+let Id = "Test" //Math.floor(Math.random()*10000000000000000).toString(16)
+var ws = new WebSocket(url + Id);
 document.getElementById("p4").innerHTML = "" + Id;
 
 
 /* Handles Events from Server */
-ws.onmessage = function(evt){
+ws.onmessage = function(evt) {messageHandling(evt)};
+
+
+
+function messageHandling(evt){
         var msg = evt.data;
         var obj = JSON.parse(msg);
         var valid = false;
-
         /*Changes Tick of one Player in players. Updates the Playerlist and current Player.*/
         if (obj.eventType == "SetPlayerTickE") {
             valid = true;
-            for (i = 0; i < players.length; i++){
+            for (var i = 0; i < players.length; i++){
                 if (players[i].UUID == obj.playerUUID){
-                    players[i].Tick = obj.tick.tickValue;
+                    if (obj.tick.tickType == "Tick"){
+                        players[i].Tick = obj.tick.tickValue;
+                    }
+                    else {
+                        players[i].Tick = obj.tick.tickType;
+                    }
                     var pl = players[i];
                     players.splice(i,1);
                     AddPlayer(pl);
+                    break;
                 }
             }
             PlayerList();
@@ -37,12 +47,12 @@ ws.onmessage = function(evt){
             newPlayer.Name = obj.playerName;
             newPlayer.UUID = obj.playerUUID;
             if (obj.tick.tickType == "Tick"){
-            newPlayer.Tick = obj.tick.tickValue;
+                newPlayer.Tick = obj.tick.tickValue;
             }
             else {
-            newPlayer.Tick = tickType;
+                newPlayer.Tick = obj.tick.tickType;
             }
-            Add(newPlayer);
+            AddPlayer(newPlayer);
             PlayerList();
             CurrentPlayer();
         }
@@ -50,11 +60,17 @@ ws.onmessage = function(evt){
         if (obj.eventType == "InitializeTickLeisteE") {
             valid = true;
             players = [];
-            for (i = 0; i<obj.tickLeiste.length;i++){
-                for (j =0;j<obj.tickLeiste[i][1].length;j++ ){
-                    AddPlayer({Tick: obj.tickLeiste[i][0].tickValue, UUID: obj.tickLeiste[i][1][j][0], Name: obj.tickLeiste[i][1][j][1]});
+            for (var i = 0; i<obj.tickLeiste.length;i++){
+                for (var j =0;j<obj.tickLeiste[i][1].length;j++){
+                    if (obj.tickLeiste[i][0].tickType == "Tick"){
+                        AddPlayer({Tick: obj.tickLeiste[i][0].tickValue, UUID: obj.tickLeiste[i][1][j][0], Name: obj.tickLeiste[i][1][j][1]});
+                    }
+                    else {
+                        AddPlayer({Tick: obj.tickLeiste[i][0].tickType, UUID: obj.tickLeiste[i][1][j][0], Name: obj.tickLeiste[i][1][j][1]});
+                    }
                 }
             }
+            
             PlayerList();
             CurrentPlayer();
 
@@ -62,7 +78,7 @@ ws.onmessage = function(evt){
         /*Changes the Name of a Player in players. Updates the Playerlist and current Player*/
         if (obj.eventType == "ChangeNameE") {
             valid = true;
-            for (i = 0; i < players.length; i++){
+            for (var i = 0; i < players.length; i++){
                 if (players[i].UUID == obj.playerUUID){
                     players[i].Name = obj.playerName;
                 }
@@ -73,7 +89,7 @@ ws.onmessage = function(evt){
         /*Removes one Player from players. Updates the Playerlist and current Player*/
         if (obj.eventType == "RemovePlayerE") {
             valid = true;
-            for (i = 0; i < players.length; i++){
+            for (var i = 0; i < players.length; i++){
                 if (players[i].UUID == obj.playerUUID){
                     players.splice(i,1);
                 }
@@ -94,20 +110,25 @@ addButton.onclick = function() {
                         var type = "";
                         if (document.getElementById("A2").value == "Abwarten") {
                             type = "Abwarten";
-                        }
-                        if (document.getElementById("A2").value == "Bereithalten") {
-                            type = "Bereithalten";
+                            ws.send('{"requestType" : "AddPlayerTickR", "playerName" : "' + document.getElementById("A1").value + '"  , "tick" : {"tickType" : "' + type + '"}}');
                         }
                         else {
-                            type = "Tick";
+                            if (document.getElementById("A2").value == "Bereithalten") {
+                                type = "Bereithalten";
+                                ws.send('{"requestType" : "AddPlayerTickR", "playerName" : "' + document.getElementById("A1").value + '"  , "tick" : {"tickType" : "' + type + '"}}');
+                            }
+                            else {
+                                type = "Tick";
+                                ws.send('{"requestType" : "AddPlayerTickR", "playerName" : "' + document.getElementById("A1").value + '"  , "tick" : {"tickType" : "' + type + '", "tickValue" : ' + document.getElementById("A2").value + '}}');
+                            }
                         }
-                        ws.send('{"requestType" : "AddPlayerTickR", "playerName" : "' + document.getElementById("A1").value + '"  , "tick" : {"tickType" : "' + type + '", "tickValue" : ' + document.getElementById("A2").value + '}}');
+                        
 }
 
 /*When the Button is clicked, a RemovePlayerR request is send to the server.*/
 deleteButton.onclick = function() {
                         var UUID = "";
-                        for (i = 0; i < players.length; i++){
+                        for (var i = 0; i < players.length; i++){
                             if (players[i].Name == document.getElementById("B").value){
                                 UUID = players[i].UUID;
                             }
@@ -120,28 +141,30 @@ changeTickButton.onclick = function() {
                         var UUID = "";
                         var Tick = document.getElementById("C2").value;
                         var type = "";
-                        for (i = 0; i < players.length; i++){
+                        for (var i = 0; i < players.length; i++){
                             if (players[i].Name == document.getElementById("C1").value){
                                 UUID = players[i].UUID;
-                                if (players[i].tick == "Abwarten" || players[i].tick == "Bereithalten"){
-                                    type = players[i].Tick;
+                                if (Tick == "Abwarten" || Tick == "Bereithalten"){
+                                    ws.send('{"requestType" : "SetPlayerTickR", "playerUUID" : "' + UUID + '", "tick" : {"tickType" : "' + Tick + '"}}');
+                                    break;
                                 }
                                 else {
                                     type = "Tick";
+                                    ws.send('{"requestType" : "SetPlayerTickR", "playerUUID" : "' + UUID + '", "tick" : {"tickType" : "' + type + '", "tickValue" : ' + Tick + '}}');
+                                    break;
                                 }
                             }
                         }
-                        /*console.log(Tick);
-                        console.log('{"requestType" : "SetPlayerTickR", "playerUUID" : "' + UUID + '", "tick" : {"tickType" : "' + type + '", "tickValue" : ' + Tick + '}}');*/
-                        ws.send('{"requestType" : "SetPlayerTickR", "playerUUID" : "' + UUID + '", "tick" : {"tickType" : "' + type + '", "tickValue" : ' + Tick + '}}');
+                        
                      }
 
 /*When the Button is clicked, a new WebSocket connection is opened with the new ID*/
 changeIdButton.onclick = function() {
-                        Id = document.getElementById("D").value;
+                        newId = document.getElementById("D").value;
                         ws.close();
-                        ws = new WebSocket("ws:10.9.1.129:8080/" + Id);
-                        document.getElementById("p4").innerHTML = "" + Id;
+                        ws = new WebSocket(url + newId);
+                        document.getElementById("p4").innerHTML = "" + newId;
+                        ws.onmessage = function(evt) {messageHandling(evt)};
                     }
 
 /*When the Button is clicked, a TickLeisteR request is send to the server.*/
@@ -157,7 +180,7 @@ saveButton.onclick = function(){
 /*Updates the Playerlist according to the content of players.*/
 function PlayerList(){
                         var content = "";
-                        for (i = 0; i < players.length; i++){
+                        for (var i = 0; i < players.length; i++){
                             content = content + players[i].Name + "  " + players[i].Tick + "<br>";
                         }
                         document.getElementById("p3").innerHTML = content;
@@ -165,33 +188,62 @@ function PlayerList(){
 
 /*Updates the current Player according to the Player with the smallest Tick in players.*/                        
 function CurrentPlayer(){
+                            if (players.length > 0 ){
                             document.getElementById("p2").innerHTML = players[0].Name;
                             document.getElementById("p1").innerHTML = "" + players[0].Tick;
+                            }
+                            else{
+                            document.getElementById("p2").innerHTML = "-";
+                            document.getElementById("p1").innerHTML = "-";
+                            }
                     }
 
 function AddPlayer(player){
+                    if (players.length == 0){
+                        players.push(player);
+                    }
+                    else {
+                        var added = false;
                         if (player.Tick == "Abwarten"){
                             players.push(player);
                         }
                         else {
                             if (player.Tick == "Bereithalten"){
-                                for (i = players.length; i>0;i++){
+                                for (var i = players.length; i>0;i--){
                                     if (players[i-1].Tick != "Abwarten"){
                                         players.splice(i,0,player);
+                                        added = true;
+                                        break;
+                                    }
+                                    if (i == 1 && added == false){
+                                        players.splice(0,0,player);
                                         break;
                                     }
                                 }
                             }
                             else {
-                                for (i = 0; i<players.length;i++){
-                                    if (player.Tick < players[i].Tick){
+                                for (var i = 0; i<players.length;i++){
+                                    if (players[i].Tick == "Abwarten" || players[i].Tick == "Bereithalten"){
                                         players.splice(i,0,player);
-                                        break;
+                                        added = true;
+                                        break
+                                    }
+                                    else {
+                                        if (player.Tick < players[i].Tick){
+                                            players.splice(i,0,player);
+                                            added = true;
+                                            break;
+                                        }
+                                        if (i == (players.length -1) && added == false){
+                                            players.push(player);
+                                            break;
+                                        }
                                     }
                                 }
                             }
                         }                        
                     }
+                }
 
 function loadFile(input){
                         let file = input.files[0];
@@ -214,11 +266,11 @@ function loadFile(input){
 
 
 
-function initializeJSONFormat(arr) {
+function initializeJSONFormat(arr) { // JSON ändern
                         var tick = -999;
                         var tickleiste = "";
                         var type = "";
-                        for (i=0;i<arr.length;i++){
+                        for (var i=0;i<arr.length;i++){
                             if (arr[i].Tick == "Abwarten" || arr[i].Tick == "Bereithalten"){
                                 type = arr[i].Tick;
                             }

website/test.html

@@ -1,38 +0,0 @@
-<!DOCTYPE html>  
- <head>  
- <title>Playing YouTube video on HTML5 canvas</title>  
- <meta name="viewport" content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0, width=device-width" />  
- <style type="text/css">  
-body {
-        margin: 0px;
-        padding: 0px;
-      } 
- </style>  
-<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
-
- </head>  
- <body>  
-<img id="scream" src="tickleiste.png" alt="The Scream" width="220" height="277">
-
-<p>Canvas:</p>
-<canvas id="myCanvas" width="500" height="500"  color="red">
-Your browser does not support the HTML5 canvas tag.</canvas>
-  <script>  
-window.onload;
-var c=document.getElementById("myCanvas");
-var ctx=c.getContext("2d");
-var img=document.getElementById("scream");
-ctx.drawImage(img,10,10);  
-var canvas = document.getElementById('myCanvas');
-      var context = canvas.getContext('2d');
-
-      context.beginPath();
-      context.rect(150, 50, 200, 100);
-      context.fillStyle = 'yellow';
-      context.fill();
-      context.lineWidth = 7;
-      context.strokeStyle = 'black';
-      context.stroke();
-  </script>  
- </body>  
- </html>  

website/test.json

@@ -1 +0,0 @@
-"Hallo"