sortierung von Playerlist hinzugefügt

This commit is contained in:
Franziska 2021-03-31 19:23:11 +02:00
parent 11cb7ccdc1
commit ef67d52c38
4 changed files with 67 additions and 3 deletions

View file

@ -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>

View file

@ -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;
}
}
}

View file

@ -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;
}

38
website/test.html Normal file
View file

@ -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>