monitor/scripts/dev/quick_playerlist_tester.html
2025-04-16 22:30:27 +07:00

197 lines
5.7 KiB
HTML

<title>Playerlist Tester</title>
<style>
body {
margin: 0;
font: monospace;
background-color: aliceblue;
}
#navbar {
width: 100%;
background-color: lightblue;
text-align: center;
padding: 0.5em;
}
.playersRow {
display: flex;
align-items: center;
justify-content: center;
}
.playerCard {
display: flex;
flex-direction: column;
background-color: lightgoldenrodyellow;
padding: 1em;
}
.playerlistCard {
display: flex;
flex-direction: column;
background-color: rgb(250, 210, 250);
padding: 1em;
}
.playerData {
width: 545px;
height: 200px;
border: 1px;
background-color: lightgrey;
}
.playerButtons {
text-align: center;
margin-top: 1em;
}
</style>
<body>
<div id="navbar">
<input type="number" name="" id="idCounter" value="1" />
<button onclick="navbar('restart')">Server Restart</button>
<button onclick="navbar('printPlayerlist')">Print Playerlist</button>
</div>
<div class="playersRow">
<div class="playerCard">
<textarea class="playerData" id="player1"></textarea>
<div class="playerButtons">
<button onclick="txAdminPlayerlistEvent('join', 1)">Join</button>
<button onclick="txAdminPlayerlistEvent('leave',1)">Leave</button>
</div>
</div>
<div class="playerCard">
<textarea class="playerData" id="player2"></textarea>
<div class="playerButtons">
<button onclick="txAdminPlayerlistEvent('join', 2)">Join</button>
<button onclick="txAdminPlayerlistEvent('leave',2)">Leave</button>
</div>
</div>
</div>
<div class="playersRow">
<div class="playerlistCard">
<textarea class="playerData" id="playerlistInput"></textarea>
<div class="playerButtons">
<button onclick="copyPlayerlist()">Apply Playerlist</button>
</div>
</div>
</div>
</body>
<script>
const el = (id) => document.getElementById(id);
const initialData1 = {
"name": "Tabarra",
"ids": [
"license:9b9fc300cc65d22ad3b536175a4d15c0e4933753",
"fivem:271816",
"ip:0.0.0.1"
],
"hwids": [
"9:0000000000000000000000000000000000000000000000000000000000000001",
"9:0000000000000000000000000000000000000000000000000000000000000002",
"9:0000000000000000000000000000000000000000000000000000000000000003",
"9:0000000000000000000000000000000000000000000000000000000000000004",
"9:0000000000000000000000000000000000000000000000000000000000000005",
"9:0000000000000000000000000000000000000000000000000000000000000006"
]
};
const initialData2 = {
"name": "fulano",
"ids": [
"license:00000000000000000000000000000000deadbeef",
"fivem:123456",
"ip:0.0.0.0"
],
"hwids": []
};
el('player1').textContent = JSON.stringify(initialData1, null, 2);
el('player2').textContent = JSON.stringify(initialData2, null, 2);
const sendPost = async (action, data) => {
const fetchResult = await fetch(
`http://localhost:40120/dev/${action}`,
{
method: "POST", // "GET/POST"
headers: { "Content-Type": "application/json" },
body: JSON.stringify(data),
}
);
return await fetchResult.json();
};
async function txAdminPlayerlistEvent(action, which) {
const pDataString = el(`player${which}`).value;
const playerId = parseInt(el('idCounter').value);
let eventData;
if(action === 'join'){
el('idCounter').value = playerId + 1;
eventData = {
type: "txAdminPlayerlistEvent",
event: 'playerJoining',
id: playerId,
player: JSON.parse(pDataString),
}
}else if(action === 'leave'){
eventData = {
type: "txAdminPlayerlistEvent",
event: 'playerDropped',
id: playerId,
reason: 'tester',
}
}else{
throw new Error(`unknown action`);
}
try {
const resp = await sendPost('event', eventData);
console.log(resp);
} catch (error) {
console.log(error);
}
}
async function navbar(action) {
try {
if(action === 'restart'){
el('idCounter').value = 1;
}
const resp = await sendPost(action);
console.log(resp);
} catch (error) {
console.log(error);
}
}
async function copyPlayerlist(){
const playerlist = JSON.parse(el('playerlistInput').value);
for (const player of playerlist) {
const eventData = {
type: "txAdminPlayerlistEvent",
event: 'playerJoining',
id: player.id,
player: {
name: player.name,
ids: [...player.identifiers, `ip:${player.endpoint}`],
hwids: [],
},
}
try {
const resp = await sendPost('event', eventData);
console.log(resp);
} catch (error) {
console.log(eventData);
console.log(error);
}
}
console.log(playerlist.length);
}
</script>