2024-04-02 15:57:41 +00:00
|
|
|
<!DOCTYPE html>
|
|
|
|
|
<html>
|
|
|
|
|
<head>
|
|
|
|
|
<title>WetSock Client Test</title>
|
|
|
|
|
<style>
|
|
|
|
|
/* Add some basic styling */
|
2024-04-07 20:06:55 +01:00
|
|
|
* {
|
|
|
|
|
box-sizing: border-box;
|
|
|
|
|
}
|
2024-04-02 15:57:41 +00:00
|
|
|
body {
|
|
|
|
|
font-family: Arial, sans-serif;
|
2024-04-07 20:06:55 +01:00
|
|
|
font-size: 16px;
|
2024-04-02 15:57:41 +00:00
|
|
|
margin: 20px;
|
|
|
|
|
}
|
|
|
|
|
input, button {
|
|
|
|
|
margin-bottom: 10px;
|
|
|
|
|
}
|
|
|
|
|
#output {
|
|
|
|
|
border: 1px solid #ccc;
|
|
|
|
|
padding: 10px;
|
|
|
|
|
height: 300px;
|
|
|
|
|
overflow-y: scroll;
|
2024-04-07 20:06:55 +01:00
|
|
|
letter-spacing: 0.125em;
|
|
|
|
|
font-size: 1rem;
|
2024-04-02 15:57:41 +00:00
|
|
|
}
|
|
|
|
|
</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>
|
2024-04-07 20:06:55 +01:00
|
|
|
<pre id="output"></pre>
|
2024-04-02 15:57:41 +00:00
|
|
|
|
2024-04-02 23:22:46 +00:00
|
|
|
<script type="module">
|
|
|
|
|
import WetSockClient from './client.js';
|
2024-04-07 20:06:55 +01:00
|
|
|
|
|
|
|
|
const url = new URL(window.location.href);
|
|
|
|
|
const wetsockAddr = [
|
|
|
|
|
url.protocol.startsWith('https') ? 'wss' : 'ws',
|
|
|
|
|
'://',
|
|
|
|
|
url.host,
|
|
|
|
|
'/chat'
|
|
|
|
|
].join('');
|
|
|
|
|
const client = new WetSockClient(wetsockAddr);
|
2024-04-02 15:57:41 +00:00
|
|
|
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');
|
|
|
|
|
|
2024-04-07 20:06:55 +01:00
|
|
|
client.on('message', (message) => {
|
|
|
|
|
log(message);
|
|
|
|
|
});
|
|
|
|
|
|
2024-04-02 15:57:41 +00:00
|
|
|
client.on('connected', () => {
|
|
|
|
|
log('Connected to WetSock server');
|
|
|
|
|
});
|
|
|
|
|
|
2024-04-07 20:06:55 +01:00
|
|
|
client.on('plugins', (plugins) => {
|
|
|
|
|
updatePluginOptions(plugins);
|
2024-04-02 15:57:41 +00:00
|
|
|
});
|
|
|
|
|
|
2024-04-07 20:06:55 +01:00
|
|
|
client.on('done', (data) => {
|
2024-04-02 15:57:41 +00:00
|
|
|
log(`Action performed: ${JSON.stringify(data)}`);
|
|
|
|
|
});
|
|
|
|
|
|
2024-04-07 20:06:55 +01:00
|
|
|
client.on('created', (data) => {
|
2024-04-02 15:57:41 +00:00
|
|
|
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());
|
|
|
|
|
|
2024-04-07 20:06:55 +01:00
|
|
|
client.send(JSON.stringify({
|
|
|
|
|
action: [
|
|
|
|
|
actionName ? `/${actionName}` : null,
|
|
|
|
|
entityId ?? null
|
|
|
|
|
].filter(v => !!v).join('.'),
|
|
|
|
|
message: String(args.length > 0 ? args.join(' ') : pluginIdentifier),
|
|
|
|
|
}));
|
2024-04-02 15:57:41 +00:00
|
|
|
});
|
|
|
|
|
|
2024-04-07 20:06:55 +01:00
|
|
|
function addOptionElement(el, config = { value: '', identifier: 'select...' }) {
|
|
|
|
|
const opt = document.createElement('option');
|
|
|
|
|
opt.setAttribute('value', config.value);
|
|
|
|
|
opt.textContent = config.identifier;
|
|
|
|
|
el.appendChild(opt);
|
|
|
|
|
}
|
|
|
|
|
|
2024-04-02 15:57:41 +00:00
|
|
|
function updatePluginOptions(plugins) {
|
|
|
|
|
pluginIdentifierSelect.innerHTML = '';
|
2024-04-07 20:06:55 +01:00
|
|
|
addOptionElement(pluginIdentifierSelect);
|
2024-04-02 15:57:41 +00:00
|
|
|
plugins.forEach((plugin) => {
|
2024-04-07 20:06:55 +01:00
|
|
|
addOptionElement(pluginIdentifierSelect, {
|
|
|
|
|
value: plugin.identifier,
|
|
|
|
|
identifier: plugin.identifier
|
|
|
|
|
});
|
2024-04-02 15:57:41 +00:00
|
|
|
});
|
|
|
|
|
updateActionOptions();
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function updateActionOptions() {
|
|
|
|
|
const pluginIdentifier = pluginIdentifierSelect.value;
|
|
|
|
|
const actions = client.plugins.get(pluginIdentifier);
|
|
|
|
|
actionNameSelect.innerHTML = '';
|
2024-04-07 20:06:55 +01:00
|
|
|
addOptionElement(actionNameSelect);
|
|
|
|
|
if(!pluginIdentifier) return;
|
2024-04-02 15:57:41 +00:00
|
|
|
actions.forEach((action) => {
|
2024-04-07 20:06:55 +01:00
|
|
|
addOptionElement(actionNameSelect, {
|
|
|
|
|
value: action,
|
|
|
|
|
identifier: action
|
|
|
|
|
});
|
2024-04-02 15:57:41 +00:00
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function log(message) {
|
|
|
|
|
const entry = document.createElement('div');
|
2024-04-07 20:06:55 +01:00
|
|
|
entry.textContent = typeof(message) == 'string' ? message : JSON.stringify(message);
|
2024-04-02 15:57:41 +00:00
|
|
|
outputDiv.appendChild(entry);
|
|
|
|
|
outputDiv.scrollTop = outputDiv.scrollHeight;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
pluginIdentifierSelect.addEventListener('change', updateActionOptions);
|
|
|
|
|
</script>
|
|
|
|
|
</body>
|
|
|
|
|
</html>
|
