@oasisomniverse/js 1.0.0

package/src/view-leagues.js

@@ -0,0 +1,41 @@
+/**
+ * OasisViewLeagues — view game leagues popup widget
+ * Usage: const w = new OasisViewLeagues({}); w.open();
+ */
+class OasisViewLeagues {
+  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-green{background:rgba(0,200,100,.15);color:#00c864}.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">View Leagues</span><button class="oasis-popup-close">×</button></div><div class="oasis-popup-body" id="oasis-vl-body"><div class="oasis-cs"><div class="oasis-cs-icon">⏳</div><p>Loading leagues…</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-vl-body');
+    try {
+      const r = await fetch(`${this._apiUrl}/api/game/leagues`);
+      const data = await r.json();
+      const leagues = Array.isArray(data) ? data : (data.result || []);
+      if (!leagues.length) { body.innerHTML = '<div class="oasis-cs"><div class="oasis-cs-icon">🏆</div><h3>No Leagues</h3><p>No active leagues found.</p></div>'; return; }
+      body.innerHTML = `<table class="oasis-table"><thead><tr><th>League</th><th>Members</th><th>Season</th><th>Status</th></tr></thead><tbody>${leagues.map(l=>`<tr><td>${l.name||'—'}</td><td>${l.memberCount??0}</td><td>${l.season||'—'}</td><td><span class="oasis-badge ${l.isActive?'oasis-badge-green':'oasis-badge-yellow'}">${l.isActive?'Active':'Ended'}</span></td></tr>`).join('')}</tbody></table>`;
+    } catch { body.innerHTML = '<div class="oasis-msg-error">Failed to load leagues.</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.OasisViewLeagues = OasisViewLeagues;

package/src/view-mission.js

@@ -0,0 +1,44 @@
+/**
+ * OasisViewMission — view mission details popup widget
+ * Usage: const w = new OasisViewMission({ missionId: '...' }); w.open();
+ */
+class OasisViewMission {
+  constructor({ container, missionId = '', apiUrl = 'https://api.web4.oasisomniverse.one', onClose = null } = {}) {
+    this._missionId = missionId; 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:520px;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-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-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-mission-hero{text-align:center;padding:20px 0 16px;border-bottom:1px solid rgba(0,200,255,.1);margin-bottom:20px}.oasis-mission-icon{font-size:48px}.oasis-mission-name{font-size:18px;font-weight:700;color:#fff;margin-top:8px}`;
+    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">Mission Details</span><button class="oasis-popup-close">×</button></div><div class="oasis-popup-body" id="oasis-vm-body"><div class="oasis-cs"><div class="oasis-cs-icon">⏳</div><p>Loading mission…</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-vm-body');
+    try {
+      const r = await fetch(`${this._apiUrl}/api/mission/${this._missionId}`);
+      const data = await r.json();
+      const m = data.result || data;
+      body.innerHTML = `<div class="oasis-mission-hero"><div class="oasis-mission-icon">🎯</div><div class="oasis-mission-name">${m.name||'Mission'}</div><div style="margin-top:8px"><span class="oasis-badge oasis-badge-blue">${m.missionType||'Mission'}</span> <span class="oasis-badge ${m.status==='active'?'oasis-badge-green':'oasis-badge-yellow'}">${m.status||'—'}</span></div></div>
+      <div class="oasis-info-block"><div class="oasis-info-label">Description</div><div class="oasis-info-value">${m.description||'No description.'}</div></div>
+      <div class="oasis-info-block"><div class="oasis-info-label">Karma Reward</div><div class="oasis-info-value">+${m.karmaReward??0} ⚡</div></div>
+      <div class="oasis-info-block"><div class="oasis-info-label">Difficulty</div><div class="oasis-info-value">${m.difficulty||'—'}</div></div>
+      <div class="oasis-info-block"><div class="oasis-info-label">Deadline</div><div class="oasis-info-value">${m.endDate?new Date(m.endDate).toLocaleDateString():'No deadline'}</div></div>`;
+    } catch { body.innerHTML = '<div class="oasis-msg-error">Failed to load mission.</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.OasisViewMission = OasisViewMission;

package/src/view-oasis-nft.js

@@ -0,0 +1,46 @@
+/**
+ * OasisViewOasisNft — view NFT details popup widget
+ * Usage: const w = new OasisViewOasisNft({ nftId: '...' }); w.open();
+ */
+class OasisViewOasisNft {
+  constructor({ container, nftId = '', apiUrl = 'https://api.web4.oasisomniverse.one', onBuy = null, onClose = null } = {}) {
+    this._nftId = nftId; this._apiUrl = apiUrl; this._onBuy = onBuy; 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:520px;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-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-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-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-nft-hero{text-align:center;padding:24px;background:rgba(0,200,255,.04);border-radius:12px;margin-bottom:20px;border:1px solid rgba(0,200,255,.1)}.oasis-nft-hero-icon{font-size:64px;margin-bottom:10px}.oasis-nft-hero-name{font-size:20px;font-weight:700;color:#fff}.oasis-price-big{font-family:'Orbitron',sans-serif;font-size:24px;font-weight:700;color:#00c8ff;margin-top:4px}`;
+    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">NFT Details</span><button class="oasis-popup-close">×</button></div><div class="oasis-popup-body" id="oasis-vnft-body"><div class="oasis-cs"><div class="oasis-cs-icon">⏳</div><p>Loading NFT…</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-vnft-body');
+    try {
+      const r = await fetch(`${this._apiUrl}/api/nft/${this._nftId}`);
+      const data = await r.json();
+      const n = data.result || data;
+      body.innerHTML = `<div class="oasis-nft-hero"><div class="oasis-nft-hero-icon">🖼️</div><div class="oasis-nft-hero-name">${n.name||'NFT'}</div>${n.price?`<div class="oasis-price-big">${n.price} ${n.currency||'ETH'}</div>`:''}</div>
+      <div class="oasis-info-block"><div class="oasis-info-label">Collection</div><div class="oasis-info-value">${n.collection||'—'}</div></div>
+      <div class="oasis-info-block"><div class="oasis-info-label">Creator</div><div class="oasis-info-value">${n.creator||'—'}</div></div>
+      <div class="oasis-info-block"><div class="oasis-info-label">Blockchain</div><div class="oasis-info-value"><span class="oasis-badge oasis-badge-blue">${n.chain||'ETH'}</span></div></div>
+      <div class="oasis-info-block"><div class="oasis-info-label">Description</div><div class="oasis-info-value">${n.description||'No description.'}</div></div>
+      ${n.isListed ? `<button class="oasis-btn" id="oasis-vnft-buy">Purchase NFT</button>` : ''}`;
+      if (n.isListed) this._overlay.querySelector('#oasis-vnft-buy').addEventListener('click', () => { if (this._onBuy) this._onBuy(n); this.close(); });
+    } catch { body.innerHTML = '<div class="oasis-msg-error">Failed to load NFT.</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.OasisViewOasisNft = OasisViewOasisNft;

package/src/view-tournaments.js

@@ -0,0 +1,41 @@
+/**
+ * OasisViewTournaments — view game tournaments popup widget
+ * Usage: const w = new OasisViewTournaments({}); w.open();
+ */
+class OasisViewTournaments {
+  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:640px;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-badge-red{background:rgba(255,80,80,.15);color:#ff6b6b}.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">Tournaments</span><button class="oasis-popup-close">×</button></div><div class="oasis-popup-body" id="oasis-vt-body"><div class="oasis-cs"><div class="oasis-cs-icon">⏳</div><p>Loading tournaments…</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-vt-body');
+    try {
+      const r = await fetch(`${this._apiUrl}/api/game/tournaments`);
+      const data = await r.json();
+      const ts = Array.isArray(data) ? data : (data.result || []);
+      if (!ts.length) { body.innerHTML = '<div class="oasis-cs"><div class="oasis-cs-icon">🎮</div><h3>No Tournaments</h3><p>No tournaments are currently running.</p></div>'; return; }
+      body.innerHTML = `<table class="oasis-table"><thead><tr><th>Tournament</th><th>Players</th><th>Prize</th><th>Status</th></tr></thead><tbody>${ts.map(t=>`<tr><td>${t.name||'—'}</td><td>${t.playerCount??0}/${t.maxPlayers??'∞'}</td><td>${t.prizePool||'—'}</td><td><span class="oasis-badge ${t.status==='active'?'oasis-badge-green':t.status==='upcoming'?'oasis-badge-yellow':'oasis-badge-red'}">${t.status||'unknown'}</span></td></tr>`).join('')}</tbody></table>`;
+    } catch { body.innerHTML = '<div class="oasis-msg-error">Failed to load tournaments.</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.OasisViewTournaments = OasisViewTournaments;

package/src/vote-karma.js

@@ -0,0 +1,61 @@
+/**
+ * OasisVoteKarma — vote karma for an avatar popup widget
+ * Usage: const w = new OasisVoteKarma({ targetAvatarId: '...', onVote: (result) => {} }); w.open();
+ */
+class OasisVoteKarma {
+  constructor({ container, targetAvatarId = '', apiUrl = 'https://api.web4.oasisomniverse.one', onVote = null, onClose = null } = {}) {
+    this._targetAvatarId = targetAvatarId; this._apiUrl = apiUrl; this._onVote = onVote; 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-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-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-karma-selector{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:16px}.oasis-karma-opt{background:rgba(0,200,255,.07);border:1px solid rgba(0,200,255,.15);border-radius:8px;padding:10px 4px;text-align:center;cursor:pointer;transition:all .2s;font-size:11px;color:#7a9bbf}.oasis-karma-opt:hover,.oasis-karma-opt.selected{background:rgba(0,200,255,.18);border-color:rgba(0,200,255,.5);color:#00c8ff}`;
+    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">Vote Karma</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._overlay.querySelectorAll('.oasis-karma-opt').forEach(el => el.addEventListener('click', () => { this._overlay.querySelectorAll('.oasis-karma-opt').forEach(o => o.classList.remove('selected')); el.classList.add('selected'); }));
+    this._overlay.querySelector('#oasis-vk-submit').addEventListener('click', () => this._doVote());
+  }
+  _buildBody() {
+    const categories = [{ v: 'health', l: '❤️ Health' }, { v: 'food', l: '🌿 Food' }, { v: 'environment', l: '🌍 Env' }, { v: 'community', l: '🤝 Community' }, { v: 'education', l: '📚 Education' }, { v: 'tech', l: '💡 Tech' }, { v: 'arts', l: '🎨 Arts' }, { v: 'other', l: '✨ Other' }];
+    return `<div id="oasis-vk-msg"></div>
+    ${!this._targetAvatarId ? `<div class="oasis-field"><label class="oasis-label">Avatar Username</label><input class="oasis-input" id="oasis-vk-user" type="text" placeholder="username" /></div>` : `<div style="color:#7a9bbf;font-size:13px;margin-bottom:16px">Voting karma for avatar ID: <strong style="color:#fff">${this._targetAvatarId}</strong></div>`}
+    <div class="oasis-label" style="margin-bottom:8px">Karma Category</div>
+    <div class="oasis-karma-selector">${categories.map(c=>`<div class="oasis-karma-opt" data-val="${c.v}">${c.l}</div>`).join('')}</div>
+    <div class="oasis-field"><label class="oasis-label">Amount</label><input class="oasis-input" id="oasis-vk-amt" type="number" min="1" max="100" value="10" /></div>
+    <div class="oasis-field"><label class="oasis-label">Reason (optional)</label><textarea class="oasis-textarea" id="oasis-vk-reason" placeholder="Why are you awarding this karma?"></textarea></div>
+    <button class="oasis-btn" id="oasis-vk-submit">Award Karma ⚡</button>`;
+  }
+  async _doVote() {
+    const msgEl = this._overlay.querySelector('#oasis-vk-msg');
+    const btn = this._overlay.querySelector('#oasis-vk-submit');
+    const selected = this._overlay.querySelector('.oasis-karma-opt.selected');
+    const amount = +this._overlay.querySelector('#oasis-vk-amt').value;
+    const reason = this._overlay.querySelector('#oasis-vk-reason').value.trim();
+    const avatarId = this._targetAvatarId || (this._overlay.querySelector('#oasis-vk-user')?.value.trim());
+    if (!selected) { msgEl.innerHTML = '<div class="oasis-msg oasis-msg-error">Please select a karma category.</div>'; return; }
+    if (!avatarId) { msgEl.innerHTML = '<div class="oasis-msg oasis-msg-error">Please enter an avatar username.</div>'; return; }
+    btn.textContent = 'Submitting…'; btn.disabled = true;
+    try {
+      const res = await fetch(`${this._apiUrl}/api/karma/vote`, { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ avatarId, karmaType: selected.dataset.val, karmaAmount: amount, reason }) });
+      const data = await res.json();
+      if (!res.ok || data.isError) throw new Error(data.message || 'Vote failed');
+      msgEl.innerHTML = `<div class="oasis-msg oasis-msg-success">+${amount} karma awarded!</div>`;
+      if (this._onVote) this._onVote(data);
+      btn.textContent = 'Submitted!';
+    } catch (e) { msgEl.innerHTML = `<div class="oasis-msg oasis-msg-error">${e.message}</div>`; btn.textContent = 'Award Karma ⚡'; 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(c) { c.innerHTML = `<div class="oasis-popup-body">${this._buildBody()}</div>`; }
+  destroy() { this.close(); }
+}
+window.OasisVoteKarma = OasisVoteKarma;