Splittertech/tickLeisteClient
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Javascript hinzugefügt

Browse source
This commit is contained in:
Franziska 2021-03-29 13:46:41 +02:00
parent f48c5f4fe3
commit f7336776cb
3 changed files with 152 additions and 25 deletions
Download patch file Download diff file Expand all files Collapse all files

31
website/Tickleiste.html
View file

@ -3,45 +3,50 @@
<head> <head>
<title>Tickleiste</title> <title>Tickleiste</title>
<link rel="stylesheet" href="stylesheet.css"> <link rel="stylesheet" href="stylesheet.css">
<script type="text/javascript" src="javascript.js"></script> <script defer type="text/javascript" src="javascript.js"></script>
<meta charset="utf-8">
</head> </head>
<body> <body>
<div id="wrapper"> <div id="wrapper">
<div id="center"> <div id="center">
<h1>Tickleiste</h1> <h1>Tickleiste</h1>
<img src="tickleiste.png" width= "1024" height= "724"> <img src="tickleiste.png" width= "100%" height= "auto">
</div> </div>
<div id="right"> <div id="right">
<div id="aktuellerTick"> <div id="aktuellerTick">
<h3>aktueller Tick</h3> <h3>aktueller Tick</h3>
<p>-</p> <p id="p1">-</p>
</div> </div>
<div id="aktuellerSpieler"> <div id="aktuellerSpieler">
<h3>aktueller Spieler</h3> <h3>aktueller Spieler</h3>
<p>-</p> <p id="p2">-</p>
</div> </div>
<div id="hinzufügen"> <div id="hinzufügen">
<input type="text" placeholder="Name"></input> <form>
<input type="submit" class="sub" value="Spieler hinzufügen"></input> <input type="text" placeholder="Name" id="A"></input>
<input type="button" class="sub" value="Spieler hinzufügen" id="a"></input>
</form>
</div> </div>
<div id ="löschen"> <div id ="löschen">
<input type="text" placeholder="Name"></input> <form>
<input type="submit" class="sub" value="Spieler löschen"></input> <input type="text" placeholder="Name" id="B"></input>
<input type="button" class="sub" value="Spieler löschen" id="b"></input>
</form>
</div> </div>
<div id="ändern"> <div id="ändern">
<form action="/action_page.php" method_"POST"> <form>
<input type="text" placeholder="Name"></input> <input type="text" placeholder="Name" id="C1"></input>
<input type="text" placeholder="Tick" pattern="[0-9]"></input> <input type="text" placeholder="Tick" pattern="[0-9]" id="C2"></input>
<input type="submit" class="sub" value="Tick ändern"></input> <input type="button" class="sub" value="Tick ändern" id="c"></input>
</form> </form>
</div> </div>
<div id="Liste"> <div id="Liste">
<h3>Spielerliste</h3> <h3>Spielerliste</h3>
<p>-</p> <p id="p3">-</p>
</div> </div>
</div> </div>
</div> </div>

123
website/javascript.js
View file

@ -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" : <UnknownPlayer>, "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() {
}*/

23
website/stylesheet.css
View file

@ -1,32 +1,28 @@
#wrapper { #wrapper {
width: 1800px; width: 100%;
/*background-color:red;*/
} }
#center { #center {
text-align: center; text-align: center;
width:1024px; width: 55%;
float:left; float:left;
/* background-color:green;*/
} }
#right { #right {
width:650px; width:35%;
margin-left:1150px; margin-left: 60%;
/* background-color:blue;*/
} }
#aktuellerTick { #aktuellerTick {
width:300px; width:50%;
text-align: center; text-align: center;
float:left; float:left;
} }
#aktuellerSpieler { #aktuellerSpieler {
width:300px; width:50%;
text-align: center; text-align: center;
margin-left:50px;
float: right; float: right;
} }
@ -42,8 +38,11 @@
text-align: right; text-align: right;
} }
input[type="submit"] { input[type="button"] {
width:150px; width:25%;
}
input[type="text"] {
width:30%
} }
#Liste { #Liste {