laantungir/super_ball
1
0
Fork 1
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Working on ui

Browse Source
This commit is contained in:
Your Name
2025-09-24 14:05:19 -04:00
parent 6f46fce625
commit f10ee66972
3 changed files with 105 additions and 47 deletions
Download Patch File Download Diff File Expand all files Collapse all files

42
web/superball.html
View File

@@ -542,7 +542,7 @@
<div class="thrower-details-section collapsed" id="details-${index}">
${thrower.icon ? `
<div style="margin-bottom: 15px;">
<img src="${thrower.icon}" style="width: 50px; height: 50px; border-radius: var(--border-radius); border: var(--border-width) solid var(--primary-color); filter: grayscale(100%); transition: filter 0.3s ease;" onmouseover="this.style.filter='grayscale(0%) saturate(50%)'" onmouseout="this.style.filter='grayscale(100%)'">
<img src="${thrower.icon}" style="width: 50px; height: 50px; border-radius: var(--border-radius); border: var(--border-width) solid var(--primary-color); filter: grayscale(100%); transition: filter 0.3s ease; object-fit: cover; object-position: center;" onmouseover="this.style.filter='grayscale(0%) saturate(50%)'" onmouseout="this.style.filter='grayscale(100%)'">
</div>
` : ''}
@@ -762,16 +762,17 @@
select.removeChild(select.lastChild);
}
// Add discovered throwers
// Add discovered throwers with real-time online status check
discoveredThrowers.forEach(thrower => {
const option = document.createElement('option');
option.value = thrower.pubkey;
// Always check current online status when populating
const onlineStatus = isThrowerOnline(thrower) ? '🟢' : '🔴';
option.textContent = `${onlineStatus} ${thrower.name} (${thrower.pubkey.substring(0, 8)}...)`;
select.appendChild(option);
});
console.log('INFO', `Populated thrower dropdown for bounce ${bounceId} with ${discoveredThrowers.length} throwers`);
console.log('INFO', `Populated thrower dropdown for bounce ${bounceId} with ${discoveredThrowers.length} throwers (with current online status)`);
}
// Update all existing thrower dropdowns with current online status
@@ -904,7 +905,7 @@
return null;
}
// Populate relay dropdown with relays the selected thrower can read from
// Populate relay dropdown with relays the selected thrower can throw to (write to)
function populateRelayDropdown(bounceId, throwerPubkey) {
const relaySelect = document.getElementById(`relay-select-${bounceId}`);
const relayInput = document.getElementById(`bounce-relays-${bounceId}`);
@@ -927,17 +928,15 @@
return;
}
// Get relays the thrower can read from (read or both)
const readableRelays = thrower.relayList.relays.filter(r => r.type === 'read' || r.type === 'both');
// Get relays the thrower can write to (write or both)
// Get relays the thrower can write to (write or both) - these are the relays it can throw to
const writableRelays = thrower.relayList.relays.filter(r => r.type === 'write' || r.type === 'both');
if (readableRelays.length === 0) {
relaySelect.innerHTML = '<option value="">-- This thrower cannot read from any relays --</option><option value="__manual__">⊕ Add manually (enter relay URL)</option>';
// Show manual option since thrower has no readable relays
if (writableRelays.length === 0) {
relaySelect.innerHTML = '<option value="">-- This thrower cannot throw to any relays --</option><option value="__manual__">⊕ Add manually (enter relay URL)</option>';
// Show manual option since thrower has no writable relays
const manualOption = relaySelect.querySelector('option[value="__manual__"]');
manualOption.classList.remove('hidden');
console.log('WARN', `Thrower ${thrower.name} cannot read from any relays`);
console.log('WARN', `Thrower ${thrower.name} cannot throw to any relays`);
return;
}
@@ -949,8 +948,8 @@
relaySelect.appendChild(allRelaysOption);
}
// Add readable relays to dropdown
readableRelays.forEach(relay => {
// Add writable relays to dropdown (these are the relays the thrower can throw to)
writableRelays.forEach(relay => {
const option = document.createElement('option');
option.value = relay.url;
option.textContent = relay.url;
@@ -967,7 +966,7 @@
relayInput.value = '';
relayManualDiv.classList.add('hidden');
console.log('INFO', `Populated relay dropdown for bounce ${bounceId} with ${readableRelays.length} readable relays and ${writableRelays.length} writable relays from ${thrower.name}`);
console.log('INFO', `Populated relay dropdown for bounce ${bounceId} with ${writableRelays.length} writable relays that ${thrower.name} can throw to`);
}
// Clear relay dropdown
@@ -1142,7 +1141,7 @@
</div>
</div>
<div class="input-group">
<label for="relay-select-${bounceId}">Target Relay:</label>
<label for="relay-select-${bounceId}">Thrower throws to this relay(s):</label>
<select id="relay-select-${bounceId}" onchange="onRelaySelect(${bounceId})" style="width: 100%; margin-bottom: 10px;">
<option value="">-- Select a thrower first --</option>
<option value="__manual__" class="hidden">⊕ Add manually (enter relay URL)</option>
@@ -1647,19 +1646,12 @@
const throwerName = getThrowerName(bounce, bounceNumber);
if (isFirst) {
// User sends the outermost routing event (first bounce created)
// For the first bounce, we skip the user publishing step since it's handled by the button
// Start directly with relay propagation after the button click
const routingEventSize = JSON.stringify(bounce.routingEvent).length;
const relays = getRelaysForBounce(bounceNumber);
// Step 1: User sends to relay
flow.push({
time: currentTime,
actor: userName,
action: `Publishes routing event`,
size: routingEventSize
});
// Step 2: Relay propagates (immediate)
// Step 1: Relay propagates (immediate after button click)
currentTime += 2000; // 2 seconds for relay propagation
flow.push({
time: currentTime,