127 lines
3.5 KiB
HTML
127 lines
3.5 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html>
|
||
|
|
<head>
|
||
|
|
<title>WetSock Client Test</title>
|
||
|
|
<script src="/wetsock-client.js"></script>
|
||
|
|
<style>
|
||
|
|
/* Add some basic styling */
|
||
|
|
body {
|
||
|
|
font-family: Arial, sans-serif;
|
||
|
|
margin: 20px;
|
||
|
|
}
|
||
|
|
input, button {
|
||
|
|
margin-bottom: 10px;
|
||
|
|
}
|
||
|
|
#output {
|
||
|
|
border: 1px solid #ccc;
|
||
|
|
padding: 10px;
|
||
|
|
height: 300px;
|
||
|
|
overflow-y: scroll;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<h1>WetSock Client Test</h1>
|
||
|
|
|
||
|
|
<div>
|
||
|
|
<label for="pluginIdentifier">Plugin:</label>
|
||
|
|
<select id="pluginIdentifier">
|
||
|
|
<!-- Options will be populated dynamically -->
|
||
|
|
</select>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div>
|
||
|
|
<label for="actionName">Action:</label>
|
||
|
|
<select id="actionName">
|
||
|
|
<!-- Options will be populated dynamically -->
|
||
|
|
</select>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div>
|
||
|
|
<label for="entityId">Entity ID:</label>
|
||
|
|
<input type="text" id="entityId">
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div>
|
||
|
|
<label for="args">Arguments (comma-separated):</label>
|
||
|
|
<input type="text" id="args">
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<button id="sendButton">Send</button>
|
||
|
|
|
||
|
|
<h2>Output:</h2>
|
||
|
|
<div id="output"></div>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
const client = new WetSockClient('ws://wetsock.ghosted.id:80/chat');
|
||
|
|
const pluginIdentifierSelect = document.getElementById('pluginIdentifier');
|
||
|
|
const actionNameSelect = document.getElementById('actionName');
|
||
|
|
const entityIdInput = document.getElementById('entityId');
|
||
|
|
const argsInput = document.getElementById('args');
|
||
|
|
const sendButton = document.getElementById('sendButton');
|
||
|
|
const outputDiv = document.getElementById('output');
|
||
|
|
|
||
|
|
client.on('connected', () => {
|
||
|
|
log('Connected to WetSock server');
|
||
|
|
});
|
||
|
|
|
||
|
|
client.on('pluginList', (data) => {
|
||
|
|
updatePluginOptions(data.plugins);
|
||
|
|
});
|
||
|
|
|
||
|
|
client.on('actionPerformed', (data) => {
|
||
|
|
log(`Action performed: ${JSON.stringify(data)}`);
|
||
|
|
});
|
||
|
|
|
||
|
|
client.on('entityCreated', (data) => {
|
||
|
|
log(`Entity created: ${JSON.stringify(data)}`);
|
||
|
|
});
|
||
|
|
|
||
|
|
sendButton.addEventListener('click', () => {
|
||
|
|
const pluginIdentifier = pluginIdentifierSelect.value;
|
||
|
|
const actionName = actionNameSelect.value;
|
||
|
|
const entityId = entityIdInput.value;
|
||
|
|
const args = argsInput.value.split(',').map(arg => arg.trim());
|
||
|
|
|
||
|
|
if (actionName === 'create') {
|
||
|
|
client.createEntity(pluginIdentifier, { /* entity data */ });
|
||
|
|
} else {
|
||
|
|
client.performAction(pluginIdentifier, entityId, actionName, ...args);
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
function updatePluginOptions(plugins) {
|
||
|
|
pluginIdentifierSelect.innerHTML = '';
|
||
|
|
plugins.forEach((plugin) => {
|
||
|
|
const option = document.createElement('option');
|
||
|
|
option.value = plugin.identifier;
|
||
|
|
option.textContent = plugin.identifier;
|
||
|
|
pluginIdentifierSelect.appendChild(option);
|
||
|
|
});
|
||
|
|
updateActionOptions();
|
||
|
|
}
|
||
|
|
|
||
|
|
function updateActionOptions() {
|
||
|
|
const pluginIdentifier = pluginIdentifierSelect.value;
|
||
|
|
const actions = client.plugins.get(pluginIdentifier);
|
||
|
|
actionNameSelect.innerHTML = '';
|
||
|
|
actions.forEach((action) => {
|
||
|
|
const option = document.createElement('option');
|
||
|
|
option.value = action;
|
||
|
|
option.textContent = action;
|
||
|
|
actionNameSelect.appendChild(option);
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
function log(message) {
|
||
|
|
const entry = document.createElement('div');
|
||
|
|
entry.textContent = message;
|
||
|
|
outputDiv.appendChild(entry);
|
||
|
|
outputDiv.scrollTop = outputDiv.scrollHeight;
|
||
|
|
}
|
||
|
|
|
||
|
|
pluginIdentifierSelect.addEventListener('change', updateActionOptions);
|
||
|
|
</script>
|
||
|
|
</body>
|
||
|
|
</html>
|