Tickleiste speichern und laden hinzugefügt

This commit is contained in:
Franziska 2021-03-31 22:59:18 +02:00
parent ef67d52c38
commit c3f8cafaeb
3 changed files with 93 additions and 21 deletions

View file

@ -10,8 +10,7 @@
<div id="wrapper"> <div id="wrapper">
<div id="center"> <div id="center">
<h1>Tickleiste</h1> <h1>Tickleiste</h1>
<canvas id="coveringCanvas" width="100" height="100" style="border:1px solid #000000;">
</canvas>
<img src="tickleiste.png" width= "100%" height= "auto"> <img src="tickleiste.png" width= "100%" height= "auto">
<form> <form>
<input type="text" pattern="[0-9a-f]" placeholder="TickleistenID" id="D"></input> <input type="text" pattern="[0-9a-f]" placeholder="TickleistenID" id="D"></input>
@ -20,6 +19,12 @@
<form> <form>
<input type="button" class="sub" value="Neu laden" id="e"></input> <input type="button" class="sub" value="Neu laden" id="e"></input>
</form> </form>
<form>
<input type="button" class="sub" value="Tickleiste speichern" id="f"></input>
</form>
<form>
<input type="file" onchange="loadFile(this)" accept=".json" >
</form>
<p id="p4">-<p> <p id="p4">-<p>
</div> </div>

View file

@ -3,6 +3,7 @@ let deleteButton = document.getElementById("b");
let changeTickButton = document.getElementById("c"); let changeTickButton = document.getElementById("c");
let changeIdButton = document.getElementById("d"); let changeIdButton = document.getElementById("d");
let reloadButton = document.getElementById("e"); let reloadButton = document.getElementById("e");
let saveButton = document.getElementById("f");
var players = []; var players = [];
let Id = Math.floor(Math.random()*10000000000000000).toString(16) let Id = Math.floor(Math.random()*10000000000000000).toString(16)
var ws = new WebSocket("ws:10.9.1.129:8080/" + Id); var ws = new WebSocket("ws:10.9.1.129:8080/" + Id);
@ -130,8 +131,8 @@ changeTickButton.onclick = function() {
} }
} }
} }
console.log(Tick); /*console.log(Tick);
console.log('{"requestType" : "SetPlayerTickR", "playerUUID" : "' + UUID + '", "tick" : {"tickType" : "' + type + '", "tickValue" : ' + Tick + '}}'); console.log('{"requestType" : "SetPlayerTickR", "playerUUID" : "' + UUID + '", "tick" : {"tickType" : "' + type + '", "tickValue" : ' + Tick + '}}');*/
ws.send('{"requestType" : "SetPlayerTickR", "playerUUID" : "' + UUID + '", "tick" : {"tickType" : "' + type + '", "tickValue" : ' + Tick + '}}'); ws.send('{"requestType" : "SetPlayerTickR", "playerUUID" : "' + UUID + '", "tick" : {"tickType" : "' + type + '", "tickValue" : ' + Tick + '}}');
} }
@ -148,6 +149,10 @@ reloadButton.onclick = function() {
ws.send('{"requestType" : "TickLeisteR"}'); ws.send('{"requestType" : "TickLeisteR"}');
} }
saveButton.onclick = function(){
download("Tickleiste.json", JSON.stringify(players));
}
/*Updates the Playerlist according to the content of players.*/ /*Updates the Playerlist according to the content of players.*/
function PlayerList(){ function PlayerList(){
@ -160,28 +165,89 @@ function PlayerList(){
/*Updates the current Player according to the Player with the smallest Tick in players.*/ /*Updates the current Player according to the Player with the smallest Tick in players.*/
function CurrentPlayer(){ function CurrentPlayer(){
var curr = "-"; document.getElementById("p2").innerHTML = players[0].Name;
var smallest = Infinity; document.getElementById("p1").innerHTML = "" + players[0].Tick;
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("p2").innerHTML = curr;
document.getElementById("p1").innerHTML = "" + smallest;
}
} }
function AddPlayer(player){ function AddPlayer(player){
for (i = 0; i<players.length;i++){ if (player.Tick == "Abwarten"){
if (player.Tick < players[i].Tick){ players.push(player);
players.splice(i,0,player); }
break; else {
if (player.Tick == "Bereithalten"){
for (i = players.length; i>0;i++){
if (players[i-1].Tick != "Abwarten"){
players.splice(i,0,player);
break;
}
}
}
else {
for (i = 0; i<players.length;i++){
if (player.Tick < players[i].Tick){
players.splice(i,0,player);
break;
}
}
} }
} }
} }
function loadFile(input){
let file = input.files[0];
let reader = new FileReader();
reader.readAsText(file);
reader.onload = function() {
var pl = JSON.parse(reader.result);
var tickleiste = initializeJSONFormat(pl);
ws.send(tickleiste);
};
reader.onerror = function() {
console.log(reader.error);
};
}
function initializeJSONFormat(arr) {
var tick = -999;
var tickleiste = "";
var type = "";
for (i=0;i<arr.length;i++){
if (arr[i].Tick == "Abwarten" || arr[i].Tick == "Bereithalten"){
type = arr[i].Tick;
}
else {
type = "Tick";
}
if (arr[i].Tick > tick){
tickleiste = tickleiste + ']], [{"tickType" : "' + type + '", "tickvalue" : "' + arr[i].Tick + '"}, ["' + arr[i].Name + ', ';
}
else {
tickleiste = tickleiste + arr[i].Name + ', ';
}
}
tickleiste = tickleiste.slice(1);
tickleiste = '{"requestType" : "InitializeTickLeisteR", "tickLeiste" : [' + tickleiste + ']}';
return tickleiste;
}
function download(filename, text) {
var element = document.createElement('a');
element.setAttribute('href', 'data:text/json;charset=utf-8,' + encodeURIComponent(text));
element.setAttribute('download', filename);
element.style.display = 'none';
document.body.appendChild(element);
element.click();
document.body.removeChild(element);
}

1
website/test.json Normal file
View file

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