feat(canvas): move online badge to bottom-right, add solo/multi toggle, move share to header
- Move "N online" badge to bottom-right corner, remove connection status indicator - People panel opens upward from badge with Solo/Multi mode toggle - Solo mode hides remote cursors and suppresses presence broadcasting - Notification toast when others join in solo mode with quick switch button - Move share button from floating badge to header (share arrow icon beside settings) - Share panel now drops down from header instead of floating up from bottom - Mode preference persisted to localStorage Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
parent
aabc2de7d8
commit
95db01b451
|
|
@ -134,6 +134,14 @@ export class PresenceManager extends EventTarget {
|
|||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* Show or hide all remote cursors (for single/multiplayer toggle)
|
||||
*/
|
||||
setVisible(visible: boolean) {
|
||||
const container = this.#container.querySelector(".presence-cursors") as HTMLElement;
|
||||
if (container) container.style.display = visible ? "" : "none";
|
||||
}
|
||||
|
||||
/**
|
||||
* Remove a user's presence
|
||||
*/
|
||||
|
|
|
|||
|
|
@ -552,48 +552,7 @@
|
|||
}
|
||||
|
||||
#status {
|
||||
position: fixed;
|
||||
bottom: 16px;
|
||||
right: 16px;
|
||||
padding: 8px 16px;
|
||||
background: var(--rs-bg-surface);
|
||||
border-radius: 8px;
|
||||
box-shadow: var(--rs-shadow-sm);
|
||||
font-size: 12px;
|
||||
color: var(--rs-text-muted);
|
||||
z-index: 1000;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
#status .indicator {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 50%;
|
||||
background: var(--rs-text-muted);
|
||||
}
|
||||
|
||||
#status.connected .indicator {
|
||||
background: #22c55e;
|
||||
}
|
||||
|
||||
#status.disconnected .indicator {
|
||||
background: #ef4444;
|
||||
}
|
||||
|
||||
#status.syncing .indicator {
|
||||
background: #f59e0b;
|
||||
animation: pulse 1s infinite;
|
||||
}
|
||||
|
||||
#status.offline .indicator {
|
||||
background: #f59e0b;
|
||||
}
|
||||
|
||||
#status.offline-empty .indicator {
|
||||
background: #94a3b8;
|
||||
animation: pulse 2s infinite;
|
||||
display: none;
|
||||
}
|
||||
|
||||
@keyframes pulse {
|
||||
|
|
@ -982,38 +941,17 @@
|
|||
}
|
||||
|
||||
/* ── Share badge & panel ── */
|
||||
#share-badge {
|
||||
position: fixed;
|
||||
bottom: 16px;
|
||||
right: 310px;
|
||||
padding: 6px 12px;
|
||||
background: var(--rs-bg-surface);
|
||||
border-radius: 8px;
|
||||
box-shadow: var(--rs-shadow-sm);
|
||||
font-size: 12px;
|
||||
color: var(--rs-text-muted);
|
||||
z-index: 1000;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
transition: box-shadow 0.15s;
|
||||
}
|
||||
|
||||
#share-badge:hover {
|
||||
box-shadow: 0 2px 14px rgba(0, 0, 0, 0.18);
|
||||
}
|
||||
/* share-badge is now a header icon button — see .rstack-header__share-btn in shell.css overrides below */
|
||||
|
||||
#share-panel {
|
||||
position: fixed;
|
||||
bottom: 56px;
|
||||
right: 16px;
|
||||
top: 56px;
|
||||
right: 60px;
|
||||
width: 320px;
|
||||
background: var(--rs-bg-surface);
|
||||
border-radius: 12px;
|
||||
box-shadow: var(--rs-shadow-lg);
|
||||
z-index: 1001;
|
||||
z-index: 10001;
|
||||
display: none;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
|
@ -1162,7 +1100,7 @@
|
|||
#people-online-badge {
|
||||
position: fixed;
|
||||
bottom: 16px;
|
||||
right: 170px;
|
||||
right: 16px;
|
||||
padding: 6px 12px;
|
||||
background: var(--rs-bg-surface);
|
||||
border-radius: 8px;
|
||||
|
|
@ -1198,7 +1136,7 @@
|
|||
/* ── People Panel ── */
|
||||
#people-panel {
|
||||
position: fixed;
|
||||
top: 72px;
|
||||
bottom: 56px;
|
||||
right: 16px;
|
||||
width: 280px;
|
||||
max-height: calc(100vh - 120px);
|
||||
|
|
@ -1279,6 +1217,37 @@
|
|||
font-weight: normal;
|
||||
}
|
||||
|
||||
/* ── Mode toggle (single/multi player) ── */
|
||||
.mode-toggle {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0;
|
||||
border: 1px solid var(--rs-input-border);
|
||||
border-radius: 6px;
|
||||
overflow: hidden;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.mode-toggle button {
|
||||
padding: 3px 8px;
|
||||
border: none;
|
||||
background: none;
|
||||
font-size: 11px;
|
||||
color: var(--rs-text-muted);
|
||||
cursor: pointer;
|
||||
transition: background 0.15s, color 0.15s;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.mode-toggle button.active {
|
||||
background: var(--rs-accent, #3b82f6);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.mode-toggle button:not(.active):hover {
|
||||
background: var(--rs-bg-hover);
|
||||
}
|
||||
|
||||
.people-row .actions-btn {
|
||||
padding: 2px 8px;
|
||||
border: 1px solid var(--rs-input-border);
|
||||
|
|
@ -1321,6 +1290,48 @@
|
|||
cursor: default;
|
||||
}
|
||||
|
||||
/* ── Multiplayer notification toast ── */
|
||||
#mp-notify {
|
||||
position: fixed;
|
||||
bottom: 56px;
|
||||
right: 16px;
|
||||
padding: 10px 16px;
|
||||
background: var(--rs-bg-surface);
|
||||
border-radius: 10px;
|
||||
box-shadow: var(--rs-shadow-lg);
|
||||
font-size: 12px;
|
||||
color: var(--rs-text-primary);
|
||||
z-index: 1002;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
transform: translateY(20px);
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
transition: transform 0.25s, opacity 0.25s;
|
||||
}
|
||||
|
||||
#mp-notify.show {
|
||||
transform: translateY(0);
|
||||
opacity: 1;
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
#mp-notify button {
|
||||
padding: 4px 10px;
|
||||
border: 1px solid var(--rs-accent, #3b82f6);
|
||||
border-radius: 6px;
|
||||
background: var(--rs-accent, #3b82f6);
|
||||
color: #fff;
|
||||
font-size: 11px;
|
||||
cursor: pointer;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
#mp-notify button:hover {
|
||||
filter: brightness(1.1);
|
||||
}
|
||||
|
||||
/* ── Ping toast ── */
|
||||
#ping-toast {
|
||||
position: fixed;
|
||||
|
|
@ -1368,16 +1379,12 @@
|
|||
|
||||
/* ── Share & People panel mobile ── */
|
||||
@media (max-width: 640px) {
|
||||
#share-badge {
|
||||
right: 220px;
|
||||
bottom: 12px;
|
||||
}
|
||||
#share-panel {
|
||||
width: calc(100vw - 32px);
|
||||
right: 16px;
|
||||
}
|
||||
#people-online-badge {
|
||||
right: 100px;
|
||||
right: 16px;
|
||||
bottom: 12px;
|
||||
}
|
||||
#people-panel {
|
||||
|
|
@ -2103,6 +2110,7 @@
|
|||
</div>
|
||||
<div class="rstack-header__right">
|
||||
<a class="rstack-header__demo-btn" href="https://demo.rspace.online/rspace">Try Demo</a>
|
||||
<button class="rstack-header__settings-btn" id="share-badge" title="Share this space"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 12v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8"/><polyline points="16 6 12 2 8 6"/><line x1="12" y1="2" x2="12" y2="15"/></svg></button>
|
||||
<button class="rstack-header__settings-btn" id="settings-btn" title="Space Settings"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06A1.65 1.65 0 0 0 4.68 15a1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06A1.65 1.65 0 0 0 9 4.68a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06A1.65 1.65 0 0 0 19.4 9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"/></svg></button>
|
||||
<rstack-identity></rstack-identity>
|
||||
</div>
|
||||
|
|
@ -2403,8 +2411,9 @@
|
|||
<span id="people-badge-text">1 online</span>
|
||||
</div>
|
||||
|
||||
<div id="share-badge" title="Share this space">
|
||||
<span>🔗</span> Share
|
||||
<div id="mp-notify">
|
||||
<span id="mp-notify-text"></span>
|
||||
<button id="mp-notify-switch">Switch to Multiplayer</button>
|
||||
</div>
|
||||
|
||||
<div id="share-panel">
|
||||
|
|
@ -3151,6 +3160,7 @@
|
|||
const CURSOR_THROTTLE = 50;
|
||||
|
||||
canvas.addEventListener("mousemove", (e) => {
|
||||
if (!isMultiplayer) return; // solo mode — don't broadcast cursor
|
||||
const now = Date.now();
|
||||
if (now - lastCursorUpdate < CURSOR_THROTTLE) return;
|
||||
lastCursorUpdate = now;
|
||||
|
|
@ -3166,6 +3176,7 @@
|
|||
|
||||
// Handle touch for cursor position on mobile
|
||||
canvas.addEventListener("touchmove", (e) => {
|
||||
if (!isMultiplayer) return; // solo mode — don't broadcast cursor
|
||||
if (e.touches.length !== 1) return;
|
||||
|
||||
const now = Date.now();
|
||||
|
|
@ -3181,12 +3192,14 @@
|
|||
|
||||
// Handle presence updates from other users
|
||||
sync.addEventListener("presence", (e) => {
|
||||
presence.updatePresence(e.detail);
|
||||
// Update last cursor for people panel "Navigate to"
|
||||
// Always track last cursor for Navigate-to, but only show cursors in multiplayer
|
||||
const pid = e.detail.peerId;
|
||||
if (pid && e.detail.cursor && onlinePeers.has(pid)) {
|
||||
onlinePeers.get(pid).lastCursor = e.detail.cursor;
|
||||
}
|
||||
if (isMultiplayer) {
|
||||
presence.updatePresence(e.detail);
|
||||
}
|
||||
});
|
||||
|
||||
// ── People Online panel ──
|
||||
|
|
@ -3201,9 +3214,42 @@
|
|||
const pingToast = document.getElementById("ping-toast");
|
||||
const pingToastText = document.getElementById("ping-toast-text");
|
||||
const pingToastGo = document.getElementById("ping-toast-go");
|
||||
const mpNotify = document.getElementById("mp-notify");
|
||||
const mpNotifyText = document.getElementById("mp-notify-text");
|
||||
const mpNotifySwitch = document.getElementById("mp-notify-switch");
|
||||
let pingToastTimer = null;
|
||||
let mpNotifyTimer = null;
|
||||
let openActionsId = null; // which peer's actions dropdown is open
|
||||
|
||||
// ── Single / Multiplayer mode ──
|
||||
let isMultiplayer = localStorage.getItem("rspace-multiplayer") !== "false"; // default true
|
||||
|
||||
function setMultiplayerMode(enabled) {
|
||||
isMultiplayer = enabled;
|
||||
localStorage.setItem("rspace-multiplayer", enabled ? "true" : "false");
|
||||
// Show/hide remote cursors
|
||||
presence.setVisible(enabled);
|
||||
renderPeopleBadge();
|
||||
if (peoplePanel.classList.contains("open")) renderPeoplePanel();
|
||||
}
|
||||
|
||||
mpNotifySwitch.addEventListener("click", () => {
|
||||
setMultiplayerMode(true);
|
||||
mpNotify.classList.remove("show");
|
||||
if (mpNotifyTimer) clearTimeout(mpNotifyTimer);
|
||||
});
|
||||
|
||||
function showMpNotification(username) {
|
||||
if (isMultiplayer) return; // already in multiplayer
|
||||
mpNotifyText.textContent = `${username} is online — switch to multiplayer to collaborate`;
|
||||
mpNotify.classList.add("show");
|
||||
if (mpNotifyTimer) clearTimeout(mpNotifyTimer);
|
||||
mpNotifyTimer = setTimeout(() => mpNotify.classList.remove("show"), 8000);
|
||||
}
|
||||
|
||||
// Apply initial multiplayer visibility
|
||||
if (!isMultiplayer) presence.setVisible(false);
|
||||
|
||||
// Announce ourselves
|
||||
sync.setAnnounceData({ peerId, username: storedUsername, color: localColor });
|
||||
|
||||
|
|
@ -3231,11 +3277,17 @@
|
|||
|
||||
function renderPeoplePanel() {
|
||||
peopleList.innerHTML = "";
|
||||
// Self row (no actions)
|
||||
// Self row with mode toggle
|
||||
const selfRow = document.createElement("div");
|
||||
selfRow.className = "people-row";
|
||||
selfRow.innerHTML = `<span class="dot" style="background:${escapeHtml(localColor)}"></span>
|
||||
<span class="name">${escapeHtml(storedUsername)} <span class="you-tag">(you)</span></span>`;
|
||||
<span class="name">${escapeHtml(storedUsername)} <span class="you-tag">(you)</span></span>
|
||||
<span class="mode-toggle">
|
||||
<button class="mode-solo ${isMultiplayer ? '' : 'active'}">Solo</button>
|
||||
<button class="mode-multi ${isMultiplayer ? 'active' : ''}">Multi</button>
|
||||
</span>`;
|
||||
selfRow.querySelector(".mode-solo").addEventListener("click", () => setMultiplayerMode(false));
|
||||
selfRow.querySelector(".mode-multi").addEventListener("click", () => setMultiplayerMode(true));
|
||||
peopleList.appendChild(selfRow);
|
||||
// Remote peers
|
||||
for (const [pid, peer] of onlinePeers) {
|
||||
|
|
@ -3405,6 +3457,8 @@
|
|||
onlinePeers.set(d.peerId, { username: d.username, color: d.color });
|
||||
renderPeopleBadge();
|
||||
if (peoplePanel.classList.contains("open")) renderPeoplePanel();
|
||||
// In single-player mode, notify that someone joined
|
||||
if (!isMultiplayer) showMpNotification(d.username || "Someone");
|
||||
}
|
||||
});
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue