@oasisomniverse/js 1.0.0

package/src/signup.js

@@ -0,0 +1,154 @@
+/**
+ * OasisSignup — new avatar registration popup widget
+ * Usage: const w = new OasisSignup({ onSuccess: (data) => {} }); w.open();
+ */
+class OasisSignup {
+  constructor({ container, apiUrl = 'https://api.web4.oasisomniverse.one', onSuccess = null, onClose = null } = {}) {
+    this._apiUrl = apiUrl;
+    this._onSuccess = onSuccess;
+    this._onClose = onClose;
+    this._overlay = null;
+    this._injectStyles();
+    if (container) this._render(container);
+  }
+
+  _injectStyles() {
+    if (document.getElementById('oasis-popup-styles')) return;
+    const s = document.createElement('style'); s.id = 'oasis-popup-styles';
+    s.textContent = `
+.oasis-popup-overlay{position:fixed;inset:0;z-index:9000;background:rgba(0,0,0,.65);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .25s}
+.oasis-popup-overlay.is-open{opacity:1}
+.oasis-popup-modal{background:#0a1628;border:1px solid rgba(0,200,255,.2);border-radius:16px;box-shadow:0 24px 64px rgba(0,0,0,.6);width:90%;max-width:480px;max-height:90vh;overflow-y:auto;transform:translateY(16px);transition:transform .25s}
+.oasis-popup-overlay.is-open .oasis-popup-modal{transform:none}
+.oasis-popup-modal.lg{max-width:900px}
+.oasis-popup-header{display:flex;align-items:center;justify-content:space-between;padding:20px 24px;border-bottom:1px solid rgba(0,200,255,.1)}
+.oasis-popup-title{font-family:'Orbitron',sans-serif;font-size:14px;font-weight:700;color:#00c8ff;letter-spacing:.08em}
+.oasis-popup-close{background:none;border:none;color:#7a9bbf;font-size:22px;cursor:pointer;padding:0;line-height:1;transition:color .2s}
+.oasis-popup-close:hover{color:#fff}
+.oasis-popup-body{padding:24px}
+.oasis-field{display:flex;flex-direction:column;gap:6px;margin-bottom:16px}
+.oasis-label{font-size:11px;font-weight:600;letter-spacing:.06em;color:#7a9bbf;text-transform:uppercase}
+.oasis-input,.oasis-select,.oasis-textarea{background:rgba(255,255,255,.05);border:1px solid rgba(0,200,255,.2);border-radius:8px;padding:10px 14px;color:#fff;font-size:14px;outline:none;transition:border-color .2s;width:100%;box-sizing:border-box}
+.oasis-input:focus,.oasis-select:focus,.oasis-textarea:focus{border-color:rgba(0,200,255,.5)}
+.oasis-textarea{resize:vertical;min-height:80px}
+.oasis-select option{background:#0a1628}
+.oasis-btn{background:linear-gradient(135deg,#00c8ff,#0080ff);border:none;border-radius:8px;color:#fff;font-family:'Orbitron',sans-serif;font-size:12px;font-weight:700;letter-spacing:.08em;padding:11px 20px;cursor:pointer;transition:opacity .2s;width:100%}
+.oasis-btn:hover{opacity:.85}
+.oasis-btn:disabled{opacity:.5;cursor:not-allowed}
+.oasis-btn-ghost{background:rgba(0,200,255,.1);border:1px solid rgba(0,200,255,.3);color:#00c8ff;border-radius:8px;font-size:12px;font-weight:600;padding:9px 16px;cursor:pointer;transition:background .2s}
+.oasis-btn-ghost:hover{background:rgba(0,200,255,.2)}
+.oasis-btn-row{display:flex;gap:10px;justify-content:flex-end;margin-top:20px}
+.oasis-msg{border-radius:8px;padding:10px 14px;font-size:13px;margin-bottom:16px}
+.oasis-msg-error{background:rgba(255,80,80,.12);border:1px solid rgba(255,80,80,.3);color:#ff6b6b}
+.oasis-msg-success{background:rgba(0,200,100,.12);border:1px solid rgba(0,200,100,.3);color:#00c864}
+.oasis-grid-2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
+.oasis-info-block{background:rgba(0,200,255,.05);border:1px solid rgba(0,200,255,.1);border-radius:10px;padding:16px;margin-bottom:12px}
+.oasis-info-label{font-size:10px;font-weight:600;letter-spacing:.06em;color:#7a9bbf;text-transform:uppercase;margin-bottom:4px}
+.oasis-info-value{color:#fff;font-size:14px;font-weight:500}
+.oasis-cs{text-align:center;padding:32px 16px}
+.oasis-cs-icon{font-size:48px;margin-bottom:12px}
+.oasis-cs h3{font-family:'Orbitron',sans-serif;font-size:15px;color:#00c8ff;margin:0 0 8px}
+.oasis-cs p{color:#7a9bbf;font-size:13px;margin:0}
+.oasis-table{width:100%;border-collapse:collapse;font-size:13px}
+.oasis-table th{text-align:left;padding:10px 12px;font-size:10px;font-weight:700;letter-spacing:.06em;color:#7a9bbf;text-transform:uppercase;border-bottom:1px solid rgba(0,200,255,.1)}
+.oasis-table td{padding:10px 12px;color:#fff;border-bottom:1px solid rgba(255,255,255,.05)}
+.oasis-table tr:hover td{background:rgba(0,200,255,.04)}
+.oasis-badge{display:inline-block;padding:3px 8px;border-radius:999px;font-size:10px;font-weight:700}
+.oasis-badge-blue{background:rgba(0,200,255,.15);color:#00c8ff}
+.oasis-badge-green{background:rgba(0,200,100,.15);color:#00c864}
+.oasis-badge-red{background:rgba(255,80,80,.15);color:#ff6b6b}
+.oasis-badge-yellow{background:rgba(255,200,0,.15);color:#ffc800}
+.oasis-search-row{display:flex;gap:10px;margin-bottom:16px}
+.oasis-search-row .oasis-input{flex:1}
+.oasis-stat-row{display:flex;gap:12px;margin-bottom:20px}
+.oasis-stat{flex:1;background:rgba(0,200,255,.05);border:1px solid rgba(0,200,255,.1);border-radius:10px;padding:14px;text-align:center}
+.oasis-stat-val{font-family:'Orbitron',sans-serif;font-size:20px;font-weight:700;color:#00c8ff}
+.oasis-stat-lbl{font-size:10px;color:#7a9bbf;margin-top:4px;letter-spacing:.04em}
+.oasis-divider{border:none;border-top:1px solid rgba(0,200,255,.1);margin:16px 0}
+.oasis-section-title{font-size:11px;font-weight:700;color:#7a9bbf;letter-spacing:.08em;text-transform:uppercase;margin:0 0 12px}
+.oasis-radio-group{display:flex;gap:16px;margin-bottom:16px}
+.oasis-radio-label{display:flex;align-items:center;gap:8px;font-size:13px;color:#fff;cursor:pointer}
+.oasis-radio-label input[type=radio]{accent-color:#00c8ff}
+.oasis-link{background:none;border:none;color:#00c8ff;font-size:13px;cursor:pointer;padding:0;text-decoration:underline;text-underline-offset:2px}
+.oasis-chat-area{background:rgba(0,0,0,.2);border:1px solid rgba(0,200,255,.1);border-radius:10px;height:220px;overflow-y:auto;padding:12px;margin-bottom:12px;display:flex;flex-direction:column;gap:8px}
+.oasis-chat-bubble{background:rgba(0,200,255,.1);border-radius:10px;padding:8px 12px;font-size:13px;color:#fff;max-width:75%}
+.oasis-chat-bubble.mine{background:rgba(0,128,255,.2);align-self:flex-end}
+.oasis-chat-input-row{display:flex;gap:8px}
+.oasis-chat-input-row .oasis-input{flex:1}
+`;
+    document.head.appendChild(s);
+  }
+
+  open() {
+    if (this._overlay) return;
+    this._overlay = document.createElement('div');
+    this._overlay.className = 'oasis-popup-overlay';
+    this._overlay.innerHTML = `<div class="oasis-popup-modal">
+      <div class="oasis-popup-header"><span class="oasis-popup-title">Create Avatar</span><button class="oasis-popup-close">×</button></div>
+      <div class="oasis-popup-body">${this._buildBody()}</div>
+    </div>`;
+    this._overlay.querySelector('.oasis-popup-close').addEventListener('click', () => this.close());
+    this._overlay.addEventListener('click', e => { if (e.target === this._overlay) this.close(); });
+    document.body.appendChild(this._overlay);
+    requestAnimationFrame(() => this._overlay.classList.add('is-open'));
+    this._attachEvents();
+  }
+
+  _buildBody() {
+    return `
+      <div id="oasis-signup-msg"></div>
+      <div class="oasis-grid-2">
+        <div class="oasis-field"><label class="oasis-label">First Name</label><input class="oasis-input" id="oasis-su-first" type="text" placeholder="Ada" /></div>
+        <div class="oasis-field"><label class="oasis-label">Last Name</label><input class="oasis-input" id="oasis-su-last" type="text" placeholder="Lovelace" /></div>
+      </div>
+      <div class="oasis-field"><label class="oasis-label">Username</label><input class="oasis-input" id="oasis-su-user" type="text" placeholder="ada_lovelace" autocomplete="username" /></div>
+      <div class="oasis-field"><label class="oasis-label">Email</label><input class="oasis-input" id="oasis-su-email" type="email" placeholder="ada@example.com" /></div>
+      <div class="oasis-field"><label class="oasis-label">Password</label><input class="oasis-input" id="oasis-su-pass" type="password" placeholder="••••••••" /></div>
+      <div class="oasis-field"><label class="oasis-label">Confirm Password</label><input class="oasis-input" id="oasis-su-pass2" type="password" placeholder="••••••••" /></div>
+      <button class="oasis-btn" id="oasis-su-submit" style="margin-top:4px">Create Avatar</button>
+    `;
+  }
+
+  _attachEvents() {
+    this._overlay.querySelector('#oasis-su-submit').addEventListener('click', () => this._doSignup());
+  }
+
+  async _doSignup() {
+    const f = (id) => this._overlay.querySelector(id).value.trim();
+    const msgEl = this._overlay.querySelector('#oasis-signup-msg');
+    const btn = this._overlay.querySelector('#oasis-su-submit');
+    if (!f('#oasis-su-user') || !f('#oasis-su-email') || !f('#oasis-su-pass')) {
+      msgEl.innerHTML = '<div class="oasis-msg oasis-msg-error">Please fill in all required fields.</div>'; return;
+    }
+    if (this._overlay.querySelector('#oasis-su-pass').value !== this._overlay.querySelector('#oasis-su-pass2').value) {
+      msgEl.innerHTML = '<div class="oasis-msg oasis-msg-error">Passwords do not match.</div>'; return;
+    }
+    btn.textContent = 'Creating…'; btn.disabled = true; msgEl.innerHTML = '';
+    try {
+      const res = await fetch(`${this._apiUrl}/api/avatar/register`, {
+        method: 'POST', headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ firstName: f('#oasis-su-first'), lastName: f('#oasis-su-last'), username: f('#oasis-su-user'), email: f('#oasis-su-email'), password: this._overlay.querySelector('#oasis-su-pass').value })
+      });
+      const data = await res.json();
+      if (!res.ok || data.isError) throw new Error(data.message || 'Registration failed');
+      msgEl.innerHTML = '<div class="oasis-msg oasis-msg-success">Avatar created! Check your email to verify.</div>';
+      if (this._onSuccess) this._onSuccess(data);
+    } catch (e) {
+      msgEl.innerHTML = `<div class="oasis-msg oasis-msg-error">${e.message}</div>`;
+      btn.textContent = 'Create Avatar'; btn.disabled = false;
+    }
+  }
+
+  close() {
+    if (!this._overlay) return;
+    const el = this._overlay; this._overlay = null;
+    el.classList.remove('is-open');
+    el.addEventListener('transitionend', () => el.remove(), { once: true });
+    if (this._onClose) this._onClose();
+  }
+
+  _render(container) { container.innerHTML = `<div class="oasis-popup-body">${this._buildBody()}</div>`; }
+  destroy() { this.close(); }
+}
+
+window.OasisSignup = OasisSignup;

package/src/star-field.js

@@ -0,0 +1,68 @@
+/**
+ * OasisStarField — animated canvas starfield background
+ * Usage:
+ *   const sf = new OasisStarField({ container: document.body, starCount: 160 })
+ *   sf.destroy() // clean up
+ */
+class OasisStarField {
+  constructor({ container = document.body, starCount = 160, speed = 0.3 } = {}) {
+    this._container = container;
+    this._starCount = starCount;
+    this._speed = speed;
+    this._stars = [];
+    this._raf = null;
+
+    this._canvas = document.createElement('canvas');
+    Object.assign(this._canvas.style, {
+      position: 'fixed', inset: '0', width: '100%', height: '100%',
+      pointerEvents: 'none', zIndex: '0'
+    });
+    this._ctx = this._canvas.getContext('2d');
+    container.prepend(this._canvas);
+
+    this._resize = this._resize.bind(this);
+    this._tick = this._tick.bind(this);
+    window.addEventListener('resize', this._resize);
+    this._resize();
+    this._init();
+    this._raf = requestAnimationFrame(this._tick);
+  }
+
+  _resize() {
+    this._canvas.width = window.innerWidth;
+    this._canvas.height = window.innerHeight;
+  }
+
+  _init() {
+    this._stars = Array.from({ length: this._starCount }, () => ({
+      x: Math.random() * window.innerWidth,
+      y: Math.random() * window.innerHeight,
+      r: Math.random() * 1.4 + 0.3,
+      o: Math.random() * 0.6 + 0.2,
+      dy: (Math.random() * 0.3 + 0.1) * this._speed
+    }));
+  }
+
+  _tick() {
+    const { width, height } = this._canvas;
+    const ctx = this._ctx;
+    ctx.clearRect(0, 0, width, height);
+    for (const s of this._stars) {
+      ctx.beginPath();
+      ctx.arc(s.x, s.y, s.r, 0, Math.PI * 2);
+      ctx.fillStyle = `rgba(200,230,255,${s.o})`;
+      ctx.fill();
+      s.y -= s.dy;
+      if (s.y < -2) { s.y = height + 2; s.x = Math.random() * width; }
+    }
+    this._raf = requestAnimationFrame(this._tick);
+  }
+
+  destroy() {
+    cancelAnimationFrame(this._raf);
+    window.removeEventListener('resize', this._resize);
+    this._canvas.remove();
+  }
+}
+
+window.OasisStarField = OasisStarField;

package/src/verify-email.js

@@ -0,0 +1,77 @@
+/**
+ * OasisVerifyEmail — email verification popup widget
+ * Usage: const w = new OasisVerifyEmail({ token: 'abc' }); w.open();
+ */
+class OasisVerifyEmail {
+  constructor({ container, token = '', apiUrl = 'https://api.web4.oasisomniverse.one', onSuccess = null, onClose = null } = {}) {
+    this._token = token; this._apiUrl = apiUrl; this._onSuccess = onSuccess; this._onClose = onClose; this._overlay = null;
+    this._injectStyles();
+    if (container) this._render(container);
+  }
+
+  _injectStyles() {
+    if (document.getElementById('oasis-popup-styles')) return;
+    const s = document.createElement('style'); s.id = 'oasis-popup-styles';
+    s.textContent = `.oasis-popup-overlay{position:fixed;inset:0;z-index:9000;background:rgba(0,0,0,.65);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .25s}.oasis-popup-overlay.is-open{opacity:1}.oasis-popup-modal{background:#0a1628;border:1px solid rgba(0,200,255,.2);border-radius:16px;box-shadow:0 24px 64px rgba(0,0,0,.6);width:90%;max-width:480px;max-height:90vh;overflow-y:auto;transform:translateY(16px);transition:transform .25s}.oasis-popup-overlay.is-open .oasis-popup-modal{transform:none}.oasis-popup-modal.lg{max-width:900px}.oasis-popup-header{display:flex;align-items:center;justify-content:space-between;padding:20px 24px;border-bottom:1px solid rgba(0,200,255,.1)}.oasis-popup-title{font-family:'Orbitron',sans-serif;font-size:14px;font-weight:700;color:#00c8ff;letter-spacing:.08em}.oasis-popup-close{background:none;border:none;color:#7a9bbf;font-size:22px;cursor:pointer;padding:0;line-height:1}.oasis-popup-close:hover{color:#fff}.oasis-popup-body{padding:24px}.oasis-field{display:flex;flex-direction:column;gap:6px;margin-bottom:16px}.oasis-label{font-size:11px;font-weight:600;letter-spacing:.06em;color:#7a9bbf;text-transform:uppercase}.oasis-input,.oasis-select,.oasis-textarea{background:rgba(255,255,255,.05);border:1px solid rgba(0,200,255,.2);border-radius:8px;padding:10px 14px;color:#fff;font-size:14px;outline:none;transition:border-color .2s;width:100%;box-sizing:border-box}.oasis-input:focus{border-color:rgba(0,200,255,.5)}.oasis-btn{background:linear-gradient(135deg,#00c8ff,#0080ff);border:none;border-radius:8px;color:#fff;font-family:'Orbitron',sans-serif;font-size:12px;font-weight:700;letter-spacing:.08em;padding:11px 20px;cursor:pointer;transition:opacity .2s;width:100%}.oasis-btn:hover{opacity:.85}.oasis-btn:disabled{opacity:.5;cursor:not-allowed}.oasis-msg{border-radius:8px;padding:10px 14px;font-size:13px;margin-bottom:16px}.oasis-msg-error{background:rgba(255,80,80,.12);border:1px solid rgba(255,80,80,.3);color:#ff6b6b}.oasis-msg-success{background:rgba(0,200,100,.12);border:1px solid rgba(0,200,100,.3);color:#00c864}.oasis-grid-2{display:grid;grid-template-columns:1fr 1fr;gap:16px}.oasis-info-block{background:rgba(0,200,255,.05);border:1px solid rgba(0,200,255,.1);border-radius:10px;padding:16px;margin-bottom:12px}.oasis-info-label{font-size:10px;font-weight:600;letter-spacing:.06em;color:#7a9bbf;text-transform:uppercase;margin-bottom:4px}.oasis-info-value{color:#fff;font-size:14px;font-weight:500}.oasis-cs{text-align:center;padding:32px 16px}.oasis-cs-icon{font-size:48px;margin-bottom:12px}.oasis-cs h3{font-family:'Orbitron',sans-serif;font-size:15px;color:#00c8ff;margin:0 0 8px}.oasis-cs p{color:#7a9bbf;font-size:13px;margin:0}.oasis-table{width:100%;border-collapse:collapse;font-size:13px}.oasis-table th{text-align:left;padding:10px 12px;font-size:10px;font-weight:700;letter-spacing:.06em;color:#7a9bbf;text-transform:uppercase;border-bottom:1px solid rgba(0,200,255,.1)}.oasis-table td{padding:10px 12px;color:#fff;border-bottom:1px solid rgba(255,255,255,.05)}.oasis-badge{display:inline-block;padding:3px 8px;border-radius:999px;font-size:10px;font-weight:700}.oasis-badge-blue{background:rgba(0,200,255,.15);color:#00c8ff}.oasis-badge-green{background:rgba(0,200,100,.15);color:#00c864}.oasis-badge-red{background:rgba(255,80,80,.15);color:#ff6b6b}.oasis-search-row{display:flex;gap:10px;margin-bottom:16px}.oasis-search-row .oasis-input{flex:1}.oasis-stat-row{display:flex;gap:12px;margin-bottom:20px}.oasis-stat{flex:1;background:rgba(0,200,255,.05);border:1px solid rgba(0,200,255,.1);border-radius:10px;padding:14px;text-align:center}.oasis-stat-val{font-family:'Orbitron',sans-serif;font-size:20px;font-weight:700;color:#00c8ff}.oasis-stat-lbl{font-size:10px;color:#7a9bbf;margin-top:4px}.oasis-divider{border:none;border-top:1px solid rgba(0,200,255,.1);margin:16px 0}.oasis-section-title{font-size:11px;font-weight:700;color:#7a9bbf;letter-spacing:.08em;text-transform:uppercase;margin:0 0 12px}.oasis-radio-group{display:flex;gap:16px;margin-bottom:16px}.oasis-radio-label{display:flex;align-items:center;gap:8px;font-size:13px;color:#fff;cursor:pointer}.oasis-radio-label input[type=radio]{accent-color:#00c8ff}.oasis-link{background:none;border:none;color:#00c8ff;font-size:13px;cursor:pointer;padding:0;text-decoration:underline}.oasis-chat-area{background:rgba(0,0,0,.2);border:1px solid rgba(0,200,255,.1);border-radius:10px;height:220px;overflow-y:auto;padding:12px;margin-bottom:12px;display:flex;flex-direction:column;gap:8px}.oasis-chat-bubble{background:rgba(0,200,255,.1);border-radius:10px;padding:8px 12px;font-size:13px;color:#fff;max-width:75%}.oasis-chat-bubble.mine{background:rgba(0,128,255,.2);align-self:flex-end}.oasis-chat-input-row{display:flex;gap:8px}.oasis-chat-input-row .oasis-input{flex:1}`;
+    document.head.appendChild(s);
+  }
+
+  open() {
+    if (this._overlay) return;
+    this._overlay = document.createElement('div');
+    this._overlay.className = 'oasis-popup-overlay';
+    this._overlay.innerHTML = `<div class="oasis-popup-modal">
+      <div class="oasis-popup-header"><span class="oasis-popup-title">Verify Email</span><button class="oasis-popup-close">×</button></div>
+      <div class="oasis-popup-body">${this._buildBody()}</div>
+    </div>`;
+    this._overlay.querySelector('.oasis-popup-close').addEventListener('click', () => this.close());
+    this._overlay.addEventListener('click', e => { if (e.target === this._overlay) this.close(); });
+    document.body.appendChild(this._overlay);
+    requestAnimationFrame(() => this._overlay.classList.add('is-open'));
+    const btn = this._overlay.querySelector('#oasis-ve-submit');
+    if (btn) btn.addEventListener('click', () => this._doVerify());
+    if (this._token) this._doVerify();
+  }
+
+  _buildBody() {
+    return `
+      <div id="oasis-ve-msg"></div>
+      <div class="oasis-cs">
+        <div class="oasis-cs-icon">📧</div>
+        <h3>Verify Your Email</h3>
+        <p style="margin-bottom:20px">${this._token ? 'Verifying your email address…' : 'Enter the verification code sent to your email.'}</p>
+      </div>
+      ${this._token ? '' : `<div class="oasis-field"><label class="oasis-label">Verification Code</label><input class="oasis-input" id="oasis-ve-code" type="text" placeholder="Enter 6-digit code" /></div><button class="oasis-btn" id="oasis-ve-submit">Verify Email</button>`}
+    `;
+  }
+
+  async _doVerify() {
+    const code = this._token || (this._overlay.querySelector('#oasis-ve-code')?.value.trim());
+    const msgEl = this._overlay.querySelector('#oasis-ve-msg');
+    const btn = this._overlay.querySelector('#oasis-ve-submit');
+    if (btn) { btn.textContent = 'Verifying…'; btn.disabled = true; }
+    try {
+      const res = await fetch(`${this._apiUrl}/api/avatar/verify-email`, { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ token: code }) });
+      const data = await res.json();
+      if (!res.ok || data.isError) throw new Error(data.message || 'Verification failed');
+      msgEl.innerHTML = '<div class="oasis-msg oasis-msg-success">Email verified successfully!</div>';
+      if (this._onSuccess) this._onSuccess(data);
+    } catch (e) {
+      msgEl.innerHTML = `<div class="oasis-msg oasis-msg-error">${e.message}</div>`;
+      if (btn) { btn.textContent = 'Verify Email'; btn.disabled = false; }
+    }
+  }
+
+  close() {
+    if (!this._overlay) return;
+    const el = this._overlay; this._overlay = null;
+    el.classList.remove('is-open');
+    el.addEventListener('transitionend', () => el.remove(), { once: true });
+    if (this._onClose) this._onClose();
+  }
+
+  _render(container) { container.innerHTML = `<div class="oasis-popup-body">${this._buildBody()}</div>`; }
+  destroy() { this.close(); }
+}
+
+window.OasisVerifyEmail = OasisVerifyEmail;

package/src/view-achievements.js

@@ -0,0 +1,42 @@
+/**
+ * OasisViewAchievements — view avatar achievements popup widget
+ * Usage: const w = new OasisViewAchievements({ avatarId: '...' }); w.open();
+ */
+class OasisViewAchievements {
+  constructor({ container, avatarId = '', apiUrl = 'https://api.web4.oasisomniverse.one', onClose = null } = {}) {
+    this._avatarId = avatarId; this._apiUrl = apiUrl; this._onClose = onClose; this._overlay = null;
+    this._injectStyles(); if (container) this._render(container);
+  }
+  _injectStyles() {
+    if (document.getElementById('oasis-popup-styles')) return;
+    const s = document.createElement('style'); s.id = 'oasis-popup-styles';
+    s.textContent = `.oasis-popup-overlay{position:fixed;inset:0;z-index:9000;background:rgba(0,0,0,.65);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .25s}.oasis-popup-overlay.is-open{opacity:1}.oasis-popup-modal{background:#0a1628;border:1px solid rgba(0,200,255,.2);border-radius:16px;box-shadow:0 24px 64px rgba(0,0,0,.6);width:90%;max-width:600px;max-height:90vh;overflow-y:auto;transform:translateY(16px);transition:transform .25s}.oasis-popup-overlay.is-open .oasis-popup-modal{transform:none}.oasis-popup-header{display:flex;align-items:center;justify-content:space-between;padding:20px 24px;border-bottom:1px solid rgba(0,200,255,.1)}.oasis-popup-title{font-family:'Orbitron',sans-serif;font-size:14px;font-weight:700;color:#00c8ff;letter-spacing:.08em}.oasis-popup-close{background:none;border:none;color:#7a9bbf;font-size:22px;cursor:pointer;padding:0;line-height:1}.oasis-popup-close:hover{color:#fff}.oasis-popup-body{padding:24px}.oasis-badge{display:inline-block;padding:3px 8px;border-radius:999px;font-size:10px;font-weight:700}.oasis-badge-blue{background:rgba(0,200,255,.15);color:#00c8ff}.oasis-badge-green{background:rgba(0,200,100,.15);color:#00c864}.oasis-badge-yellow{background:rgba(255,200,0,.15);color:#ffc800}.oasis-stat-row{display:flex;gap:12px;margin-bottom:20px}.oasis-stat{flex:1;background:rgba(0,200,255,.05);border:1px solid rgba(0,200,255,.1);border-radius:10px;padding:14px;text-align:center}.oasis-stat-val{font-family:'Orbitron',sans-serif;font-size:20px;font-weight:700;color:#00c8ff}.oasis-stat-lbl{font-size:10px;color:#7a9bbf;margin-top:4px}.oasis-ach-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:12px}.oasis-ach-card{background:rgba(0,200,255,.05);border:1px solid rgba(0,200,255,.1);border-radius:10px;padding:16px;text-align:center}.oasis-ach-icon{font-size:32px;margin-bottom:8px}.oasis-ach-name{font-size:12px;font-weight:700;color:#fff;margin-bottom:4px}.oasis-ach-desc{font-size:10px;color:#7a9bbf}.oasis-cs{text-align:center;padding:32px 16px}.oasis-cs-icon{font-size:48px;margin-bottom:12px}.oasis-cs h3{font-family:'Orbitron',sans-serif;font-size:15px;color:#00c8ff;margin:0 0 8px}.oasis-cs p{color:#7a9bbf;font-size:13px;margin:0}.oasis-msg-error{background:rgba(255,80,80,.12);border:1px solid rgba(255,80,80,.3);color:#ff6b6b;border-radius:8px;padding:10px 14px;font-size:13px}`;
+    document.head.appendChild(s);
+  }
+  open() {
+    if (this._overlay) return;
+    this._overlay = document.createElement('div');
+    this._overlay.className = 'oasis-popup-overlay';
+    this._overlay.innerHTML = `<div class="oasis-popup-modal"><div class="oasis-popup-header"><span class="oasis-popup-title">Achievements</span><button class="oasis-popup-close">×</button></div><div class="oasis-popup-body" id="oasis-vach-body"><div class="oasis-cs"><div class="oasis-cs-icon">⏳</div><p>Loading…</p></div></div></div>`;
+    this._overlay.querySelector('.oasis-popup-close').addEventListener('click', () => this.close());
+    this._overlay.addEventListener('click', e => { if (e.target === this._overlay) this.close(); });
+    document.body.appendChild(this._overlay);
+    requestAnimationFrame(() => this._overlay.classList.add('is-open'));
+    this._load();
+  }
+  async _load() {
+    const body = this._overlay.querySelector('#oasis-vach-body');
+    try {
+      const r = await fetch(`${this._apiUrl}/api/game/achievements?avatarId=${this._avatarId}`);
+      const data = await r.json();
+      const achs = Array.isArray(data) ? data : (data.result || []);
+      const icons = ['🏆','⭐','🎯','🔥','💎','🌟','🎖️','🏅'];
+      if (!achs.length) { body.innerHTML = '<div class="oasis-cs"><div class="oasis-cs-icon">🏆</div><h3>No Achievements</h3><p>No achievements unlocked yet.</p></div>'; return; }
+      body.innerHTML = `<div class="oasis-stat-row"><div class="oasis-stat"><div class="oasis-stat-val">${achs.length}</div><div class="oasis-stat-lbl">Unlocked</div></div><div class="oasis-stat"><div class="oasis-stat-val">${achs.filter(a=>a.rarity==='rare'||a.rarity==='legendary').length}</div><div class="oasis-stat-lbl">Rare+</div></div></div><div class="oasis-ach-grid">${achs.map((a,i)=>`<div class="oasis-ach-card"><div class="oasis-ach-icon">${icons[i%icons.length]}</div><div class="oasis-ach-name">${a.name||'Achievement'}</div><div class="oasis-ach-desc">${a.description||''}</div></div>`).join('')}</div>`;
+    } catch { body.innerHTML = '<div class="oasis-msg-error">Failed to load achievements.</div>'; }
+  }
+  close() { if (!this._overlay) return; const el = this._overlay; this._overlay = null; el.classList.remove('is-open'); el.addEventListener('transitionend', () => el.remove(), { once: true }); if (this._onClose) this._onClose(); }
+  _render(c) { c.innerHTML = '<div class="oasis-popup-body"><p style="color:#7a9bbf">Loading…</p></div>'; }
+  destroy() { this.close(); }
+}
+window.OasisViewAchievements = OasisViewAchievements;

package/src/view-avatar-karma.js

@@ -0,0 +1,50 @@
+/**
+ * OasisViewAvatarKarma — view a specific avatar's karma breakdown popup widget
+ * Usage: const w = new OasisViewAvatarKarma({ avatarId: '...' }); w.open();
+ */
+class OasisViewAvatarKarma {
+  constructor({ container, avatarId = '', apiUrl = 'https://api.web4.oasisomniverse.one', onClose = null } = {}) {
+    this._avatarId = avatarId; this._apiUrl = apiUrl; this._onClose = onClose; this._overlay = null;
+    this._injectStyles(); if (container) this._render(container);
+  }
+  _injectStyles() {
+    if (document.getElementById('oasis-popup-styles')) return;
+    const s = document.createElement('style'); s.id = 'oasis-popup-styles';
+    s.textContent = `.oasis-popup-overlay{position:fixed;inset:0;z-index:9000;background:rgba(0,0,0,.65);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .25s}.oasis-popup-overlay.is-open{opacity:1}.oasis-popup-modal{background:#0a1628;border:1px solid rgba(0,200,255,.2);border-radius:16px;box-shadow:0 24px 64px rgba(0,0,0,.6);width:90%;max-width:560px;max-height:90vh;overflow-y:auto;transform:translateY(16px);transition:transform .25s}.oasis-popup-overlay.is-open .oasis-popup-modal{transform:none}.oasis-popup-header{display:flex;align-items:center;justify-content:space-between;padding:20px 24px;border-bottom:1px solid rgba(0,200,255,.1)}.oasis-popup-title{font-family:'Orbitron',sans-serif;font-size:14px;font-weight:700;color:#00c8ff;letter-spacing:.08em}.oasis-popup-close{background:none;border:none;color:#7a9bbf;font-size:22px;cursor:pointer;padding:0;line-height:1}.oasis-popup-close:hover{color:#fff}.oasis-popup-body{padding:24px}.oasis-info-block{background:rgba(0,200,255,.05);border:1px solid rgba(0,200,255,.1);border-radius:10px;padding:16px;margin-bottom:12px}.oasis-info-label{font-size:10px;font-weight:600;letter-spacing:.06em;color:#7a9bbf;text-transform:uppercase;margin-bottom:4px}.oasis-info-value{color:#fff;font-size:14px;font-weight:500}.oasis-stat-row{display:flex;gap:12px;margin-bottom:20px}.oasis-stat{flex:1;background:rgba(0,200,255,.05);border:1px solid rgba(0,200,255,.1);border-radius:10px;padding:14px;text-align:center}.oasis-stat-val{font-family:'Orbitron',sans-serif;font-size:20px;font-weight:700;color:#00c8ff}.oasis-stat-lbl{font-size:10px;color:#7a9bbf;margin-top:4px}.oasis-cs{text-align:center;padding:32px 16px}.oasis-cs-icon{font-size:48px;margin-bottom:12px}.oasis-cs h3{font-family:'Orbitron',sans-serif;font-size:15px;color:#00c8ff;margin:0 0 8px}.oasis-cs p{color:#7a9bbf;font-size:13px;margin:0}.oasis-msg-error{background:rgba(255,80,80,.12);border:1px solid rgba(255,80,80,.3);color:#ff6b6b;border-radius:8px;padding:10px 14px;font-size:13px}.oasis-section-title{font-size:11px;font-weight:700;color:#7a9bbf;letter-spacing:.08em;text-transform:uppercase;margin:0 0 12px}`;
+    document.head.appendChild(s);
+  }
+  open() {
+    if (this._overlay) return;
+    this._overlay = document.createElement('div');
+    this._overlay.className = 'oasis-popup-overlay';
+    this._overlay.innerHTML = `<div class="oasis-popup-modal"><div class="oasis-popup-header"><span class="oasis-popup-title">Avatar Karma</span><button class="oasis-popup-close">×</button></div><div class="oasis-popup-body" id="oasis-vak-body"><div class="oasis-cs"><div class="oasis-cs-icon">⏳</div><p>Loading karma…</p></div></div></div>`;
+    this._overlay.querySelector('.oasis-popup-close').addEventListener('click', () => this.close());
+    this._overlay.addEventListener('click', e => { if (e.target === this._overlay) this.close(); });
+    document.body.appendChild(this._overlay);
+    requestAnimationFrame(() => this._overlay.classList.add('is-open'));
+    this._load();
+  }
+  async _load() {
+    const body = this._overlay.querySelector('#oasis-vak-body');
+    try {
+      const r = await fetch(`${this._apiUrl}/api/karma/avatar/${this._avatarId}`);
+      const data = await r.json();
+      const k = data.result || data;
+      body.innerHTML = `<div class="oasis-stat-row">
+        <div class="oasis-stat"><div class="oasis-stat-val">${k.total??0}</div><div class="oasis-stat-lbl">Total ⚡</div></div>
+        <div class="oasis-stat"><div class="oasis-stat-val">${k.thisWeek??0}</div><div class="oasis-stat-lbl">This Week</div></div>
+        <div class="oasis-stat"><div class="oasis-stat-val">${k.rank??'—'}</div><div class="oasis-stat-lbl">Rank</div></div>
+      </div>
+      <p class="oasis-section-title">Karma Breakdown</p>
+      <div class="oasis-info-block"><div class="oasis-info-label">Health</div><div class="oasis-info-value">${k.health??0}</div></div>
+      <div class="oasis-info-block"><div class="oasis-info-label">Food</div><div class="oasis-info-value">${k.food??0}</div></div>
+      <div class="oasis-info-block"><div class="oasis-info-label">Environment</div><div class="oasis-info-value">${k.environment??0}</div></div>
+      <div class="oasis-info-block"><div class="oasis-info-label">Community</div><div class="oasis-info-value">${k.community??0}</div></div>
+      <div class="oasis-info-block"><div class="oasis-info-label">Other</div><div class="oasis-info-value">${k.other??0}</div></div>`;
+    } catch { body.innerHTML = '<div class="oasis-msg-error">Failed to load karma data.</div>'; }
+  }
+  close() { if (!this._overlay) return; const el = this._overlay; this._overlay = null; el.classList.remove('is-open'); el.addEventListener('transitionend', () => el.remove(), { once: true }); if (this._onClose) this._onClose(); }
+  _render(c) { c.innerHTML = '<div class="oasis-popup-body"><p style="color:#7a9bbf">Loading…</p></div>'; }
+  destroy() { this.close(); }
+}
+window.OasisViewAvatarKarma = OasisViewAvatarKarma;

package/src/view-avatar.js

@@ -0,0 +1,69 @@
+/**
+ * OasisViewAvatar — view avatar profile popup widget
+ * Usage: const w = new OasisViewAvatar({ avatarId: '...' }); w.open();
+ */
+class OasisViewAvatar {
+  constructor({ container, avatarId = '', apiUrl = 'https://api.web4.oasisomniverse.one', onClose = null } = {}) {
+    this._avatarId = avatarId; this._apiUrl = apiUrl; this._onClose = onClose; this._overlay = null;
+    this._injectStyles();
+    if (container) this._render(container);
+  }
+
+  _injectStyles() {
+    if (document.getElementById('oasis-popup-styles')) return;
+    const s = document.createElement('style'); s.id = 'oasis-popup-styles';
+    s.textContent = `.oasis-popup-overlay{position:fixed;inset:0;z-index:9000;background:rgba(0,0,0,.65);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .25s}.oasis-popup-overlay.is-open{opacity:1}.oasis-popup-modal{background:#0a1628;border:1px solid rgba(0,200,255,.2);border-radius:16px;box-shadow:0 24px 64px rgba(0,0,0,.6);width:90%;max-width:560px;max-height:90vh;overflow-y:auto;transform:translateY(16px);transition:transform .25s}.oasis-popup-overlay.is-open .oasis-popup-modal{transform:none}.oasis-popup-header{display:flex;align-items:center;justify-content:space-between;padding:20px 24px;border-bottom:1px solid rgba(0,200,255,.1)}.oasis-popup-title{font-family:'Orbitron',sans-serif;font-size:14px;font-weight:700;color:#00c8ff;letter-spacing:.08em}.oasis-popup-close{background:none;border:none;color:#7a9bbf;font-size:22px;cursor:pointer;padding:0;line-height:1}.oasis-popup-close:hover{color:#fff}.oasis-popup-body{padding:24px}.oasis-field{display:flex;flex-direction:column;gap:6px;margin-bottom:16px}.oasis-label{font-size:11px;font-weight:600;letter-spacing:.06em;color:#7a9bbf;text-transform:uppercase}.oasis-input,.oasis-select,.oasis-textarea{background:rgba(255,255,255,.05);border:1px solid rgba(0,200,255,.2);border-radius:8px;padding:10px 14px;color:#fff;font-size:14px;outline:none;transition:border-color .2s;width:100%;box-sizing:border-box}.oasis-btn{background:linear-gradient(135deg,#00c8ff,#0080ff);border:none;border-radius:8px;color:#fff;font-family:'Orbitron',sans-serif;font-size:12px;font-weight:700;letter-spacing:.08em;padding:11px 20px;cursor:pointer;transition:opacity .2s}.oasis-btn:hover{opacity:.85}.oasis-btn-ghost{background:rgba(0,200,255,.1);border:1px solid rgba(0,200,255,.3);color:#00c8ff;border-radius:8px;font-size:12px;font-weight:600;padding:9px 16px;cursor:pointer}.oasis-btn-row{display:flex;gap:10px;justify-content:flex-end;margin-top:20px}.oasis-msg{border-radius:8px;padding:10px 14px;font-size:13px;margin-bottom:16px}.oasis-msg-error{background:rgba(255,80,80,.12);border:1px solid rgba(255,80,80,.3);color:#ff6b6b}.oasis-msg-success{background:rgba(0,200,100,.12);border:1px solid rgba(0,200,100,.3);color:#00c864}.oasis-grid-2{display:grid;grid-template-columns:1fr 1fr;gap:16px}.oasis-info-block{background:rgba(0,200,255,.05);border:1px solid rgba(0,200,255,.1);border-radius:10px;padding:16px;margin-bottom:12px}.oasis-info-label{font-size:10px;font-weight:600;letter-spacing:.06em;color:#7a9bbf;text-transform:uppercase;margin-bottom:4px}.oasis-info-value{color:#fff;font-size:14px;font-weight:500}.oasis-cs{text-align:center;padding:32px 16px}.oasis-cs-icon{font-size:48px;margin-bottom:12px}.oasis-cs h3{font-family:'Orbitron',sans-serif;font-size:15px;color:#00c8ff;margin:0 0 8px}.oasis-cs p{color:#7a9bbf;font-size:13px;margin:0}.oasis-table{width:100%;border-collapse:collapse;font-size:13px}.oasis-table th{text-align:left;padding:10px 12px;font-size:10px;font-weight:700;letter-spacing:.06em;color:#7a9bbf;text-transform:uppercase;border-bottom:1px solid rgba(0,200,255,.1)}.oasis-table td{padding:10px 12px;color:#fff;border-bottom:1px solid rgba(255,255,255,.05)}.oasis-badge{display:inline-block;padding:3px 8px;border-radius:999px;font-size:10px;font-weight:700}.oasis-badge-blue{background:rgba(0,200,255,.15);color:#00c8ff}.oasis-badge-green{background:rgba(0,200,100,.15);color:#00c864}.oasis-badge-red{background:rgba(255,80,80,.15);color:#ff6b6b}.oasis-search-row{display:flex;gap:10px;margin-bottom:16px}.oasis-search-row .oasis-input{flex:1}.oasis-stat-row{display:flex;gap:12px;margin-bottom:20px}.oasis-stat{flex:1;background:rgba(0,200,255,.05);border:1px solid rgba(0,200,255,.1);border-radius:10px;padding:14px;text-align:center}.oasis-stat-val{font-family:'Orbitron',sans-serif;font-size:20px;font-weight:700;color:#00c8ff}.oasis-stat-lbl{font-size:10px;color:#7a9bbf;margin-top:4px}.oasis-divider{border:none;border-top:1px solid rgba(0,200,255,.1);margin:16px 0}.oasis-section-title{font-size:11px;font-weight:700;color:#7a9bbf;letter-spacing:.08em;text-transform:uppercase;margin:0 0 12px}.oasis-avatar-hero{display:flex;align-items:center;gap:16px;margin-bottom:24px;padding-bottom:20px;border-bottom:1px solid rgba(0,200,255,.1)}.oasis-avatar-circle{width:64px;height:64px;border-radius:50%;background:linear-gradient(135deg,#00c8ff,#0080ff);display:flex;align-items:center;justify-content:center;font-size:24px;flex-shrink:0}.oasis-avatar-name{font-size:18px;font-weight:700;color:#fff}.oasis-avatar-handle{color:#7a9bbf;font-size:13px;margin-top:2px}`;
+    document.head.appendChild(s);
+  }
+
+  open() {
+    if (this._overlay) return;
+    this._overlay = document.createElement('div');
+    this._overlay.className = 'oasis-popup-overlay';
+    this._overlay.innerHTML = `<div class="oasis-popup-modal">
+      <div class="oasis-popup-header"><span class="oasis-popup-title">Avatar Profile</span><button class="oasis-popup-close">×</button></div>
+      <div class="oasis-popup-body" id="oasis-va-body"><div class="oasis-cs"><div class="oasis-cs-icon">⏳</div><p>Loading…</p></div></div>
+    </div>`;
+    this._overlay.querySelector('.oasis-popup-close').addEventListener('click', () => this.close());
+    this._overlay.addEventListener('click', e => { if (e.target === this._overlay) this.close(); });
+    document.body.appendChild(this._overlay);
+    requestAnimationFrame(() => this._overlay.classList.add('is-open'));
+    this._loadAvatar();
+  }
+
+  async _loadAvatar() {
+    const body = this._overlay.querySelector('#oasis-va-body');
+    try {
+      const r = await fetch(`${this._apiUrl}/api/avatar/${this._avatarId}`);
+      const data = await r.json();
+      const a = data.result || data;
+      body.innerHTML = `
+        <div class="oasis-avatar-hero">
+          <div class="oasis-avatar-circle">👤</div>
+          <div><div class="oasis-avatar-name">${a.firstName || ''} ${a.lastName || ''}</div><div class="oasis-avatar-handle">@${a.username || 'unknown'}</div></div>
+        </div>
+        <div class="oasis-stat-row">
+          <div class="oasis-stat"><div class="oasis-stat-val">${a.karma ?? 0}</div><div class="oasis-stat-lbl">Karma</div></div>
+          <div class="oasis-stat"><div class="oasis-stat-val">${a.level ?? 1}</div><div class="oasis-stat-lbl">Level</div></div>
+          <div class="oasis-stat"><div class="oasis-stat-val">${a.xp ?? 0}</div><div class="oasis-stat-lbl">XP</div></div>
+        </div>
+        <div class="oasis-info-block"><div class="oasis-info-label">Email</div><div class="oasis-info-value">${a.email || '—'}</div></div>
+        <div class="oasis-info-block"><div class="oasis-info-label">Bio</div><div class="oasis-info-value">${a.description || 'No bio set.'}</div></div>
+        <div class="oasis-info-block"><div class="oasis-info-label">Member Since</div><div class="oasis-info-value">${a.createdDate ? new Date(a.createdDate).toLocaleDateString() : '—'}</div></div>
+      `;
+    } catch { body.innerHTML = '<div class="oasis-msg oasis-msg-error">Failed to load avatar profile.</div>'; }
+  }
+
+  close() {
+    if (!this._overlay) return;
+    const el = this._overlay; this._overlay = null;
+    el.classList.remove('is-open');
+    el.addEventListener('transitionend', () => el.remove(), { once: true });
+    if (this._onClose) this._onClose();
+  }
+
+  _render(container) { container.innerHTML = '<div class="oasis-popup-body"><p style="color:#7a9bbf">Loading avatar…</p></div>'; }
+  destroy() { this.close(); }
+}
+
+window.OasisViewAvatar = OasisViewAvatar;

package/src/view-eggs.js

@@ -0,0 +1,44 @@
+/**
+ * OasisViewEggs — view an egg's details popup widget
+ * Usage: const w = new OasisViewEggs({ eggId: '...' }); w.open();
+ */
+class OasisViewEggs {
+  constructor({ container, eggId = '', apiUrl = 'https://api.web4.oasisomniverse.one', onClose = null } = {}) {
+    this._eggId = eggId; this._apiUrl = apiUrl; this._onClose = onClose; this._overlay = null;
+    this._injectStyles(); if (container) this._render(container);
+  }
+  _injectStyles() {
+    if (document.getElementById('oasis-popup-styles')) return;
+    const s = document.createElement('style'); s.id = 'oasis-popup-styles';
+    s.textContent = `.oasis-popup-overlay{position:fixed;inset:0;z-index:9000;background:rgba(0,0,0,.65);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .25s}.oasis-popup-overlay.is-open{opacity:1}.oasis-popup-modal{background:#0a1628;border:1px solid rgba(0,200,255,.2);border-radius:16px;box-shadow:0 24px 64px rgba(0,0,0,.6);width:90%;max-width:480px;max-height:90vh;overflow-y:auto;transform:translateY(16px);transition:transform .25s}.oasis-popup-overlay.is-open .oasis-popup-modal{transform:none}.oasis-popup-header{display:flex;align-items:center;justify-content:space-between;padding:20px 24px;border-bottom:1px solid rgba(0,200,255,.1)}.oasis-popup-title{font-family:'Orbitron',sans-serif;font-size:14px;font-weight:700;color:#00c8ff;letter-spacing:.08em}.oasis-popup-close{background:none;border:none;color:#7a9bbf;font-size:22px;cursor:pointer;padding:0;line-height:1}.oasis-popup-close:hover{color:#fff}.oasis-popup-body{padding:24px}.oasis-info-block{background:rgba(0,200,255,.05);border:1px solid rgba(0,200,255,.1);border-radius:10px;padding:16px;margin-bottom:12px}.oasis-info-label{font-size:10px;font-weight:600;letter-spacing:.06em;color:#7a9bbf;text-transform:uppercase;margin-bottom:4px}.oasis-info-value{color:#fff;font-size:14px;font-weight:500}.oasis-badge{display:inline-block;padding:3px 8px;border-radius:999px;font-size:10px;font-weight:700}.oasis-badge-blue{background:rgba(0,200,255,.15);color:#00c8ff}.oasis-badge-green{background:rgba(0,200,100,.15);color:#00c864}.oasis-badge-yellow{background:rgba(255,200,0,.15);color:#ffc800}.oasis-cs{text-align:center;padding:32px 16px}.oasis-cs-icon{font-size:48px;margin-bottom:12px}.oasis-cs h3{font-family:'Orbitron',sans-serif;font-size:15px;color:#00c8ff;margin:0 0 8px}.oasis-cs p{color:#7a9bbf;font-size:13px;margin:0}.oasis-egg-hero{text-align:center;padding:24px 0 16px;border-bottom:1px solid rgba(0,200,255,.1);margin-bottom:20px}.oasis-egg-icon{font-size:64px}.oasis-egg-name{font-size:18px;font-weight:700;color:#fff;margin-top:8px}.oasis-msg-error{background:rgba(255,80,80,.12);border:1px solid rgba(255,80,80,.3);color:#ff6b6b;border-radius:8px;padding:10px 14px;font-size:13px}`;
+    document.head.appendChild(s);
+  }
+  open() {
+    if (this._overlay) return;
+    this._overlay = document.createElement('div');
+    this._overlay.className = 'oasis-popup-overlay';
+    this._overlay.innerHTML = `<div class="oasis-popup-modal"><div class="oasis-popup-header"><span class="oasis-popup-title">View Egg</span><button class="oasis-popup-close">×</button></div><div class="oasis-popup-body" id="oasis-ve-body"><div class="oasis-cs"><div class="oasis-cs-icon">⏳</div><p>Loading…</p></div></div></div>`;
+    this._overlay.querySelector('.oasis-popup-close').addEventListener('click', () => this.close());
+    this._overlay.addEventListener('click', e => { if (e.target === this._overlay) this.close(); });
+    document.body.appendChild(this._overlay);
+    requestAnimationFrame(() => this._overlay.classList.add('is-open'));
+    this._load();
+  }
+  async _load() {
+    const body = this._overlay.querySelector('#oasis-ve-body');
+    try {
+      const r = await fetch(`${this._apiUrl}/api/avatar/eggs/${this._eggId}`);
+      const data = await r.json();
+      const e = data.result || data;
+      body.innerHTML = `<div class="oasis-egg-hero"><div class="oasis-egg-icon">🥚</div><div class="oasis-egg-name">${e.name||'Unknown Egg'}</div></div>
+      <div class="oasis-info-block"><div class="oasis-info-label">Type</div><div class="oasis-info-value"><span class="oasis-badge oasis-badge-blue">${e.eggType||'Unknown'}</span></div></div>
+      <div class="oasis-info-block"><div class="oasis-info-label">Status</div><div class="oasis-info-value"><span class="oasis-badge ${e.isHatched?'oasis-badge-green':'oasis-badge-yellow'}">${e.isHatched?'Hatched':'Incubating'}</span></div></div>
+      <div class="oasis-info-block"><div class="oasis-info-label">Description</div><div class="oasis-info-value">${e.description||'No description.'}</div></div>
+      <div class="oasis-info-block"><div class="oasis-info-label">Hatched Date</div><div class="oasis-info-value">${e.hatchedDate?new Date(e.hatchedDate).toLocaleDateString():'Not yet hatched'}</div></div>`;
+    } catch { body.innerHTML = '<div class="oasis-msg-error">Failed to load egg.</div>'; }
+  }
+  close() { if (!this._overlay) return; const el = this._overlay; this._overlay = null; el.classList.remove('is-open'); el.addEventListener('transitionend', () => el.remove(), { once: true }); if (this._onClose) this._onClose(); }
+  _render(c) { c.innerHTML = '<div class="oasis-popup-body"><p style="color:#7a9bbf">Loading…</p></div>'; }
+  destroy() { this.close(); }
+}
+window.OasisViewEggs = OasisViewEggs;

package/src/view-karma.js

@@ -0,0 +1,41 @@
+/**
+ * OasisViewKarma — view global karma leaderboard popup widget
+ * Usage: const w = new OasisViewKarma({}); w.open();
+ */
+class OasisViewKarma {
+  constructor({ container, apiUrl = 'https://api.web4.oasisomniverse.one', onClose = null } = {}) {
+    this._apiUrl = apiUrl; this._onClose = onClose; this._overlay = null;
+    this._injectStyles(); if (container) this._render(container);
+  }
+  _injectStyles() {
+    if (document.getElementById('oasis-popup-styles')) return;
+    const s = document.createElement('style'); s.id = 'oasis-popup-styles';
+    s.textContent = `.oasis-popup-overlay{position:fixed;inset:0;z-index:9000;background:rgba(0,0,0,.65);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .25s}.oasis-popup-overlay.is-open{opacity:1}.oasis-popup-modal{background:#0a1628;border:1px solid rgba(0,200,255,.2);border-radius:16px;box-shadow:0 24px 64px rgba(0,0,0,.6);width:90%;max-width:600px;max-height:90vh;overflow-y:auto;transform:translateY(16px);transition:transform .25s}.oasis-popup-overlay.is-open .oasis-popup-modal{transform:none}.oasis-popup-header{display:flex;align-items:center;justify-content:space-between;padding:20px 24px;border-bottom:1px solid rgba(0,200,255,.1)}.oasis-popup-title{font-family:'Orbitron',sans-serif;font-size:14px;font-weight:700;color:#00c8ff;letter-spacing:.08em}.oasis-popup-close{background:none;border:none;color:#7a9bbf;font-size:22px;cursor:pointer;padding:0;line-height:1}.oasis-popup-close:hover{color:#fff}.oasis-popup-body{padding:24px}.oasis-badge{display:inline-block;padding:3px 8px;border-radius:999px;font-size:10px;font-weight:700}.oasis-badge-blue{background:rgba(0,200,255,.15);color:#00c8ff}.oasis-badge-yellow{background:rgba(255,200,0,.15);color:#ffc800}.oasis-table{width:100%;border-collapse:collapse;font-size:13px}.oasis-table th{text-align:left;padding:10px 12px;font-size:10px;font-weight:700;letter-spacing:.06em;color:#7a9bbf;text-transform:uppercase;border-bottom:1px solid rgba(0,200,255,.1)}.oasis-table td{padding:10px 12px;color:#fff;border-bottom:1px solid rgba(255,255,255,.05)}.oasis-table tr:hover td{background:rgba(0,200,255,.04)}.oasis-cs{text-align:center;padding:32px 16px}.oasis-cs-icon{font-size:48px;margin-bottom:12px}.oasis-cs h3{font-family:'Orbitron',sans-serif;font-size:15px;color:#00c8ff;margin:0 0 8px}.oasis-cs p{color:#7a9bbf;font-size:13px;margin:0}.oasis-msg-error{background:rgba(255,80,80,.12);border:1px solid rgba(255,80,80,.3);color:#ff6b6b;border-radius:8px;padding:10px 14px;font-size:13px}`;
+    document.head.appendChild(s);
+  }
+  open() {
+    if (this._overlay) return;
+    this._overlay = document.createElement('div');
+    this._overlay.className = 'oasis-popup-overlay';
+    this._overlay.innerHTML = `<div class="oasis-popup-modal"><div class="oasis-popup-header"><span class="oasis-popup-title">Karma Leaderboard</span><button class="oasis-popup-close">×</button></div><div class="oasis-popup-body" id="oasis-vk-body"><div class="oasis-cs"><div class="oasis-cs-icon">⏳</div><p>Loading…</p></div></div></div>`;
+    this._overlay.querySelector('.oasis-popup-close').addEventListener('click', () => this.close());
+    this._overlay.addEventListener('click', e => { if (e.target === this._overlay) this.close(); });
+    document.body.appendChild(this._overlay);
+    requestAnimationFrame(() => this._overlay.classList.add('is-open'));
+    this._load();
+  }
+  async _load() {
+    const body = this._overlay.querySelector('#oasis-vk-body');
+    try {
+      const r = await fetch(`${this._apiUrl}/api/karma/leaderboard?top=20`);
+      const data = await r.json();
+      const avatars = Array.isArray(data) ? data : (data.result || []);
+      if (!avatars.length) { body.innerHTML = '<div class="oasis-cs"><div class="oasis-cs-icon">⚡</div><h3>No Data</h3><p>Karma leaderboard is empty.</p></div>'; return; }
+      body.innerHTML = `<table class="oasis-table"><thead><tr><th>#</th><th>Avatar</th><th>⚡ Total Karma</th><th>Level</th></tr></thead><tbody>${avatars.map((a,i)=>`<tr><td style="color:${i<3?'#ffc800':'#7a9bbf'};font-weight:700">${i+1}</td><td>${a.username||'—'}</td><td><span class="oasis-badge oasis-badge-blue">${a.karma??0}</span></td><td>${a.level??1}</td></tr>`).join('')}</tbody></table>`;
+    } catch { body.innerHTML = '<div class="oasis-msg-error">Failed to load karma leaderboard.</div>'; }
+  }
+  close() { if (!this._overlay) return; const el = this._overlay; this._overlay = null; el.classList.remove('is-open'); el.addEventListener('transitionend', () => el.remove(), { once: true }); if (this._onClose) this._onClose(); }
+  _render(c) { c.innerHTML = '<div class="oasis-popup-body"><p style="color:#7a9bbf">Loading…</p></div>'; }
+  destroy() { this.close(); }
+}
+window.OasisViewKarma = OasisViewKarma;