From ef67d52c3800d4aad47154a85fcf6078ba1da477 Mon Sep 17 00:00:00 2001
From: Franziska <franziska.schaeffer@gmail.com>
Date: Wed, 31 Mar 2021 19:23:11 +0200
Subject: [PATCH] =?UTF-8?q?sortierung=20von=20Playerlist=20hinzugef=C3=BCg?=
 =?UTF-8?q?t?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 website/Tickleiste.html |  3 ++-
 website/javascript.js   | 16 ++++++++++++++--
 website/stylesheet.css  | 13 +++++++++++++
 website/test.html       | 38 ++++++++++++++++++++++++++++++++++++++
 4 files changed, 67 insertions(+), 3 deletions(-)
 create mode 100644 website/test.html
diff --git a/website/Tickleiste.html b/website/Tickleiste.html
index 239a13f..1cfd143 100644
--- a/website/Tickleiste.html
+++ b/website/Tickleiste.html
@@ -10,7 +10,8 @@
         <div id="wrapper">
             <div id="center">
                 <h1>Tickleiste</h1>
-
+                <canvas id="coveringCanvas" width="100" height="100" style="border:1px solid #000000;">
+                </canvas> 
                 <img src="tickleiste.png" width= "100%" height= "auto">
                 <form>
                         <input type="text" pattern="[0-9a-f]" placeholder="TickleistenID" id="D"></input>
diff --git a/website/javascript.js b/website/javascript.js
index ea76d7e..ff9e9c9 100644
--- a/website/javascript.js
+++ b/website/javascript.js
@@ -21,6 +21,9 @@ ws.onmessage = function(evt){
             for (i = 0; i < players.length; i++){
                 if (players[i].UUID == obj.playerUUID){
                     players[i].Tick = obj.tick.tickValue;
+                    var pl = players[i];
+                    players.splice(i,1);
+                    AddPlayer(pl);
                 }
             }
             PlayerList();
@@ -38,7 +41,7 @@ ws.onmessage = function(evt){
             else {
             newPlayer.Tick = tickType;
             }
-            players.push(newPlayer);
+            Add(newPlayer);
             PlayerList();
             CurrentPlayer();
         }
@@ -48,7 +51,7 @@ ws.onmessage = function(evt){
             players = [];
             for (i = 0; i<obj.tickLeiste.length;i++){
                 for (j =0;j<obj.tickLeiste[i][1].length;j++ ){
-                    players.push({Tick: obj.tickLeiste[i][0].tickValue, UUID: obj.tickLeiste[i][1][j][0], Name: obj.tickLeiste[i][1][j][1]});
+                    AddPlayer({Tick: obj.tickLeiste[i][0].tickValue, UUID: obj.tickLeiste[i][1][j][0], Name: obj.tickLeiste[i][1][j][1]});
                 }
             }
             PlayerList();
@@ -171,5 +174,14 @@ function CurrentPlayer(){
                         }
                     }
 
+function AddPlayer(player){
+                        for (i = 0; i<players.length;i++){
+                            if (player.Tick < players[i].Tick){
+                                players.splice(i,0,player);
+                                break;
+                            }
+                        }
+                    }
+
 
 
diff --git a/website/stylesheet.css b/website/stylesheet.css
index 722ea00..3e26033 100644
--- a/website/stylesheet.css
+++ b/website/stylesheet.css
@@ -48,3 +48,16 @@ input[type="text"] {
 #Liste {
     text-align: center
 }
+
+#coveringCanvas {
+    height:54%; 
+    position:absolute; 
+    top:100px;
+    left:10px;
+    right:10px;
+    bottom:200px;
+    background-color: rgba(255,0,0,.1);
+    text-align: center;
+    width: 55%;
+    float:left;
+}
diff --git a/website/test.html b/website/test.html
new file mode 100644
index 0000000..89df0c0
--- /dev/null
+++ b/website/test.html
@@ -0,0 +1,38 @@
+<!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>  
