260 lines
8.4 KiB
HTML
260 lines
8.4 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>StudioBridge API Tester</title>
|
|
<style>
|
|
body {
|
|
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
|
max-width: 1200px;
|
|
margin: 0 auto;
|
|
padding: 20px;
|
|
background: #1e1e2e;
|
|
color: #e0e0e0;
|
|
}
|
|
h1 {
|
|
color: #00d9ff;
|
|
border-bottom: 2px solid #8b5cf6;
|
|
padding-bottom: 10px;
|
|
}
|
|
.container {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: 20px;
|
|
margin-top: 20px;
|
|
}
|
|
.panel {
|
|
background: #2a2a3e;
|
|
border: 1px solid #3a3a4e;
|
|
border-radius: 8px;
|
|
padding: 20px;
|
|
}
|
|
h2 {
|
|
color: #8b5cf6;
|
|
margin-top: 0;
|
|
}
|
|
button {
|
|
background: linear-gradient(135deg, #00d9ff, #8b5cf6);
|
|
color: white;
|
|
border: none;
|
|
padding: 10px 20px;
|
|
border-radius: 5px;
|
|
cursor: pointer;
|
|
font-size: 14px;
|
|
margin: 5px;
|
|
transition: transform 0.2s;
|
|
}
|
|
button:hover {
|
|
transform: translateY(-2px);
|
|
}
|
|
button:active {
|
|
transform: translateY(0);
|
|
}
|
|
input, textarea {
|
|
width: 100%;
|
|
padding: 10px;
|
|
margin: 5px 0;
|
|
background: #1e1e2e;
|
|
border: 1px solid #3a3a4e;
|
|
border-radius: 4px;
|
|
color: #e0e0e0;
|
|
font-family: 'Courier New', monospace;
|
|
}
|
|
textarea {
|
|
min-height: 100px;
|
|
font-size: 12px;
|
|
}
|
|
#response {
|
|
background: #1e1e2e;
|
|
border: 1px solid #3a3a4e;
|
|
border-radius: 4px;
|
|
padding: 15px;
|
|
min-height: 400px;
|
|
max-height: 600px;
|
|
overflow-y: auto;
|
|
font-family: 'Courier New', monospace;
|
|
font-size: 12px;
|
|
white-space: pre-wrap;
|
|
word-wrap: break-word;
|
|
}
|
|
.success {
|
|
color: #4ade80;
|
|
}
|
|
.error {
|
|
color: #f87171;
|
|
}
|
|
.method-group {
|
|
margin-bottom: 15px;
|
|
}
|
|
.method-group h3 {
|
|
color: #00d9ff;
|
|
font-size: 14px;
|
|
margin-bottom: 5px;
|
|
}
|
|
.status {
|
|
padding: 10px;
|
|
background: #2a2a3e;
|
|
border-radius: 4px;
|
|
margin-bottom: 15px;
|
|
}
|
|
.status.connected {
|
|
border-left: 4px solid #4ade80;
|
|
}
|
|
.status.disconnected {
|
|
border-left: 4px solid #f87171;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<h1>🎮 AeThex StudioBridge API Tester</h1>
|
|
|
|
<div class="status" id="status">
|
|
<strong>Engine Status:</strong> <span id="statusText">Unknown</span>
|
|
</div>
|
|
|
|
<div class="container">
|
|
<div class="panel">
|
|
<h2>Quick Tests</h2>
|
|
|
|
<div class="method-group">
|
|
<h3>Scene Management</h3>
|
|
<button onclick="testMethod('getSceneTree', {})">Get Scene Tree</button>
|
|
<button onclick="testMethod('getAllNodeTypes', {})">Get All Node Types</button>
|
|
</div>
|
|
|
|
<div class="method-group">
|
|
<h3>Node Operations</h3>
|
|
<button onclick="testCreateNode()">Create Node</button>
|
|
<button onclick="testMethod('selectNode', {path: '/root'})">Select Root</button>
|
|
</div>
|
|
|
|
<div class="method-group">
|
|
<h3>File System</h3>
|
|
<button onclick="testMethod('listDirectory', {path: 'res://'})">List res://</button>
|
|
</div>
|
|
|
|
<div class="method-group">
|
|
<h3>Properties</h3>
|
|
<button onclick="testGetAllProperties()">Get Node Properties</button>
|
|
</div>
|
|
|
|
<hr style="border-color: #3a3a4e; margin: 20px 0;">
|
|
|
|
<h2>Custom Request</h2>
|
|
<label>Method:</label>
|
|
<input type="text" id="customMethod" placeholder="e.g., createNode" value="getSceneTree">
|
|
|
|
<label>Params (JSON):</label>
|
|
<textarea id="customParams" placeholder='{"path": "/root"}'>{}</textarea>
|
|
|
|
<button onclick="sendCustomRequest()">Send Request</button>
|
|
</div>
|
|
|
|
<div class="panel">
|
|
<h2>Response</h2>
|
|
<div id="response">Waiting for requests...</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
const API_URL = 'http://localhost:6007/rpc';
|
|
let nodeCounter = 1;
|
|
|
|
// Check engine status on load
|
|
checkStatus();
|
|
|
|
async function checkStatus() {
|
|
try {
|
|
const response = await fetch(API_URL, {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({ method: 'getSceneTree', params: {} })
|
|
});
|
|
|
|
if (response.ok) {
|
|
document.getElementById('status').className = 'status connected';
|
|
document.getElementById('statusText').innerHTML = '<span class="success">✓ Connected to port 6007</span>';
|
|
} else {
|
|
throw new Error('Bad response');
|
|
}
|
|
} catch (error) {
|
|
document.getElementById('status').className = 'status disconnected';
|
|
document.getElementById('statusText').innerHTML = '<span class="error">✗ Not connected (Run engine with bridge enabled)</span>';
|
|
}
|
|
}
|
|
|
|
async function testMethod(method, params) {
|
|
try {
|
|
const response = await fetch(API_URL, {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({ method, params })
|
|
});
|
|
|
|
const data = await response.json();
|
|
displayResponse(method, params, data);
|
|
} catch (error) {
|
|
displayError(method, error.message);
|
|
}
|
|
}
|
|
|
|
async function sendCustomRequest() {
|
|
const method = document.getElementById('customMethod').value;
|
|
const paramsText = document.getElementById('customParams').value;
|
|
|
|
try {
|
|
const params = JSON.parse(paramsText);
|
|
await testMethod(method, params);
|
|
} catch (error) {
|
|
displayError('Custom Request', 'Invalid JSON params: ' + error.message);
|
|
}
|
|
}
|
|
|
|
function testCreateNode() {
|
|
const params = {
|
|
type: 'Node2D',
|
|
parent: '/root',
|
|
name: `TestNode${nodeCounter++}`
|
|
};
|
|
testMethod('createNode', params);
|
|
}
|
|
|
|
function testGetAllProperties() {
|
|
testMethod('getAllProperties', { path: '/root' });
|
|
}
|
|
|
|
function displayResponse(method, params, data) {
|
|
const responseDiv = document.getElementById('response');
|
|
const timestamp = new Date().toLocaleTimeString();
|
|
|
|
let output = `[${timestamp}] ${method}\n`;
|
|
output += `Params: ${JSON.stringify(params, null, 2)}\n\n`;
|
|
|
|
if (data.success) {
|
|
output += `<span class="success">✓ SUCCESS</span>\n`;
|
|
output += `Result:\n${JSON.stringify(data.result, null, 2)}`;
|
|
} else {
|
|
output += `<span class="error">✗ ERROR</span>\n`;
|
|
output += `Error: ${data.error}`;
|
|
}
|
|
|
|
output += '\n' + '='.repeat(60) + '\n\n';
|
|
|
|
responseDiv.innerHTML = output + responseDiv.innerHTML;
|
|
}
|
|
|
|
function displayError(method, errorMsg) {
|
|
const responseDiv = document.getElementById('response');
|
|
const timestamp = new Date().toLocaleTimeString();
|
|
|
|
let output = `[${timestamp}] ${method}\n`;
|
|
output += `<span class="error">✗ NETWORK ERROR</span>\n`;
|
|
output += `${errorMsg}\n`;
|
|
output += '='.repeat(60) + '\n\n';
|
|
|
|
responseDiv.innerHTML = output + responseDiv.innerHTML;
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>
|