engagelab-captcha-sdk 1.0.0

package/src/challenges/grid.ts

@@ -0,0 +1,147 @@
+import { t } from '../i18n';
+
+export interface GridResult {
+  selectedCells: number[];
+  clickSequence: { cell: number; timestamp: number }[];
+  passtime: number;
+}
+
+export class GridChallenge {
+  private startTime = 0;
+  private selected = new Set<number>();
+  private clickSequence: { cell: number; timestamp: number }[] = [];
+  private cellElements: HTMLElement[] = [];
+
+  create(imageBase64: string, instruction: string, gridSize: number): {
+    element: HTMLElement;
+    getResult: () => GridResult;
+  } {
+    const wrapper = document.createElement('div');
+    wrapper.style.cssText = 'width:100%;max-width:380px;margin:0 auto;';
+
+    const instructionEl = document.createElement('div');
+    instructionEl.style.cssText = 'font-size:14px;color:#333;margin-bottom:10px;text-align:center;font-weight:500;';
+    instructionEl.textContent = instruction;
+    wrapper.appendChild(instructionEl);
+
+    const gridWrapper = document.createElement('div');
+    gridWrapper.style.cssText = 'position:relative;width:100%;';
+    wrapper.appendChild(gridWrapper);
+
+    const img = document.createElement('img');
+    img.src = `data:image/png;base64,${imageBase64}`;
+    img.style.cssText = 'width:100%;display:block;border-radius:8px;user-select:none;';
+    gridWrapper.appendChild(img);
+
+    const overlay = document.createElement('div');
+    overlay.style.cssText = `
+      position:absolute;top:0;left:0;width:100%;height:100%;
+      display:grid;grid-template-columns:repeat(${gridSize},1fr);
+      grid-template-rows:repeat(${gridSize},1fr);gap:2px;padding:2px;
+      border-radius:8px;overflow:hidden;
+    `;
+    overlay.setAttribute('role', 'grid');
+    overlay.setAttribute('aria-label', instruction);
+    gridWrapper.appendChild(overlay);
+
+    this.cellElements = [];
+    const totalCells = gridSize * gridSize;
+
+    for (let i = 0; i < totalCells; i++) {
+      const cell = document.createElement('div');
+      cell.style.cssText = `
+        cursor:pointer;border:2px solid transparent;border-radius:4px;
+        transition:background 0.15s,border-color 0.15s;
+        display:flex;align-items:center;justify-content:center;
+      `;
+      cell.dataset.cell = String(i);
+      cell.setAttribute('role', 'gridcell');
+      cell.setAttribute('aria-selected', 'false');
+      cell.setAttribute('tabindex', i === 0 ? '0' : '-1');
+      cell.setAttribute('aria-label', `Cell ${Math.floor(i / gridSize) + 1}-${(i % gridSize) + 1}`);
+
+      cell.addEventListener('click', () => this.toggleCell(i, cell));
+      cell.addEventListener('keydown', (e: KeyboardEvent) => {
+        let nextIdx = i;
+        if (e.key === 'ArrowRight') nextIdx = Math.min(i + 1, totalCells - 1);
+        else if (e.key === 'ArrowLeft') nextIdx = Math.max(i - 1, 0);
+        else if (e.key === 'ArrowDown') nextIdx = Math.min(i + gridSize, totalCells - 1);
+        else if (e.key === 'ArrowUp') nextIdx = Math.max(i - gridSize, 0);
+        else if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); this.toggleCell(i, cell); return; }
+        else return;
+        e.preventDefault();
+        const nextCell = this.cellElements[nextIdx];
+        if (nextCell) {
+          cell.setAttribute('tabindex', '-1');
+          nextCell.setAttribute('tabindex', '0');
+          nextCell.focus();
+        }
+      });
+      cell.addEventListener('mouseenter', () => {
+        if (!this.selected.has(i)) {
+          cell.style.background = 'rgba(24,144,255,0.1)';
+        }
+      });
+      cell.addEventListener('mouseleave', () => {
+        if (!this.selected.has(i)) {
+          cell.style.background = 'transparent';
+        }
+      });
+
+      overlay.appendChild(cell);
+      this.cellElements.push(cell);
+    }
+
+    const hint = document.createElement('div');
+    hint.style.cssText = 'font-size:12px;color:#999;text-align:center;margin-top:8px;';
+    hint.textContent = `已选 0 个`;
+    wrapper.appendChild(hint);
+
+    const updateHint = () => {
+      hint.textContent = `已选 ${this.selected.size} 个`;
+    };
+
+    const origToggle = this.toggleCell.bind(this);
+    this.toggleCell = (idx: number, el: HTMLElement) => {
+      origToggle(idx, el);
+      updateHint();
+    };
+
+    this.startTime = Date.now();
+
+    return {
+      element: wrapper,
+      getResult: () => ({
+        selectedCells: Array.from(this.selected).sort((a, b) => a - b),
+        clickSequence: this.clickSequence,
+        passtime: Date.now() - this.startTime,
+      }),
+    };
+  }
+
+  private toggleCell(index: number, el: HTMLElement): void {
+    if (this.selected.has(index)) {
+      this.selected.delete(index);
+      el.style.background = 'transparent';
+      el.style.borderColor = 'transparent';
+      el.innerHTML = '';
+      el.setAttribute('aria-selected', 'false');
+    } else {
+      this.selected.add(index);
+      el.style.background = 'rgba(24,144,255,0.25)';
+      el.style.borderColor = '#1890ff';
+      el.innerHTML = '<svg width="24" height="24" viewBox="0 0 24 24" fill="none" aria-hidden="true"><path d="M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2z" fill="#1890ff"/></svg>';
+      el.setAttribute('aria-selected', 'true');
+    }
+
+    this.clickSequence.push({
+      cell: index,
+      timestamp: Date.now(),
+    });
+  }
+
+  destroy(): void {
+    this.cellElements = [];
+    this.selected.clear();
+  }
+}

package/src/challenges/icons.ts

@@ -0,0 +1,106 @@
+import { t } from '../i18n';
+
+export interface IconResult {
+  clicks: { x: number; y: number; timestamp: number; index: number }[];
+  passtime: number;
+}
+
+export class IconChallenge {
+  private resolve?: (result: IconResult) => void;
+  private clicks: { x: number; y: number; timestamp: number; index: number }[] = [];
+  private startTime = 0;
+
+  create(imageBase64: string, instruction: string, iconCount: number): {
+    element: HTMLElement;
+    promise: Promise<IconResult>;
+  } {
+    this.clicks = [];
+    this.startTime = performance.now();
+
+    const wrapper = document.createElement('div');
+    const title = document.createElement('div');
+    title.className = 'elc-title';
+    title.textContent = instruction;
+
+    const imgContainer = document.createElement('div');
+    imgContainer.className = 'elc-image-container';
+    imgContainer.style.position = 'relative';
+    imgContainer.style.display = 'inline-block';
+
+    const img = document.createElement('img');
+    img.src = `data:image/png;base64,${imageBase64}`;
+    img.alt = t('challenge.imageAlt');
+    img.draggable = false;
+    img.style.display = 'block';
+    img.setAttribute('role', 'img');
+    imgContainer.appendChild(img);
+
+    const markerLayer = document.createElement('div');
+    markerLayer.style.cssText = 'position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;';
+    imgContainer.appendChild(markerLayer);
+
+    const clickInfo = document.createElement('div');
+    clickInfo.style.cssText = 'text-align:center;font-size:13px;color:#888;margin:8px 0;';
+    clickInfo.textContent = `已选择 0 个`;
+
+    const promise = new Promise<IconResult>((resolve) => {
+      this.resolve = resolve;
+    });
+
+    img.addEventListener('click', (e) => {
+      const rect = img.getBoundingClientRect();
+      const x = e.clientX - rect.left;
+      const y = e.clientY - rect.top;
+      const relX = x / rect.width;
+      const relY = y / rect.height;
+
+      this.clicks.push({
+        x: relX,
+        y: relY,
+        timestamp: performance.now(),
+        index: this.clicks.length,
+      });
+
+      const marker = document.createElement('div');
+      marker.style.cssText = `
+        position:absolute; left:${relX * 100}%; top:${relY * 100}%;
+        width:28px; height:28px; margin:-14px 0 0 -14px;
+        background:#4CAF50; color:#fff; border-radius:50%;
+        display:flex; align-items:center; justify-content:center;
+        font-size:12px; font-weight:bold; box-shadow:0 2px 6px rgba(0,0,0,0.3);
+        pointer-events:none;
+      `;
+      marker.textContent = String(this.clicks.length);
+      markerLayer.appendChild(marker);
+
+      clickInfo.textContent = `已选择 ${this.clicks.length} 个`;
+    });
+
+    const submitBtn = document.createElement('button');
+    submitBtn.className = 'elc-submit';
+    submitBtn.textContent = t('icons.confirm');
+    submitBtn.addEventListener('click', () => {
+      this.resolve?.({
+        clicks: this.clicks,
+        passtime: performance.now() - this.startTime,
+      });
+    });
+
+    const resetBtn = document.createElement('button');
+    resetBtn.style.cssText = 'width:100%;padding:8px;margin-top:8px;border:1px solid #ddd;border-radius:8px;background:#fff;cursor:pointer;font-size:13px;color:#666;';
+    resetBtn.textContent = t('icons.reset');
+    resetBtn.addEventListener('click', () => {
+      this.clicks = [];
+      markerLayer.innerHTML = '';
+      clickInfo.textContent = '已选择 0 个';
+    });
+
+    wrapper.appendChild(title);
+    wrapper.appendChild(imgContainer);
+    wrapper.appendChild(clickInfo);
+    wrapper.appendChild(submitBtn);
+    wrapper.appendChild(resetBtn);
+
+    return { element: wrapper, promise };
+  }
+}

package/src/challenges/invisible.ts

@@ -0,0 +1,57 @@
+/**
+ * Invisible (one-click) verification mode.
+ * Zero interaction - runs fingerprint + PoW + behavior scoring in background.
+ */
+import { t } from '../i18n';
+
+export class InvisibleChallenge {
+  private element: HTMLElement | null = null;
+  private verified = false;
+
+  createTrigger(onClick: () => void): HTMLElement {
+    this.element = document.createElement('div');
+    this.element.className = 'elc-invisible-btn';
+    this.element.setAttribute('role', 'checkbox');
+    this.element.setAttribute('aria-checked', 'false');
+    this.element.setAttribute('aria-label', t('invisible.button'));
+    this.element.setAttribute('tabindex', '0');
+    this.element.innerHTML = `
+      <div class="elc-check" aria-hidden="true"></div>
+      <span>${t('invisible.button')}</span>
+    `;
+    this.element.addEventListener('click', onClick);
+    this.element.addEventListener('keydown', (e: KeyboardEvent) => {
+      if (e.key === 'Enter' || e.key === ' ') {
+        e.preventDefault();
+        onClick();
+      }
+    });
+    return this.element;
+  }
+
+  showLoading() {
+    if (!this.element) return;
+    const check = this.element.querySelector('.elc-check') as HTMLElement;
+    if (check) {
+      check.innerHTML = '<div class="elc-loading-spinner" style="width:18px;height:18px;border-width:2px;"></div>';
+    }
+  }
+
+  showSuccess() {
+    this.verified = true;
+    if (!this.element) return;
+    this.element.classList.add('verified');
+    this.element.setAttribute('aria-checked', 'true');
+    const check = this.element.querySelector('.elc-check') as HTMLElement;
+    if (check) check.innerHTML = '✓';
+  }
+
+  showFail() {
+    if (!this.element) return;
+    const check = this.element.querySelector('.elc-check') as HTMLElement;
+    if (check) {
+      check.innerHTML = '✗';
+      check.style.color = '#f44336';
+    }
+  }
+}