echomirror-sdk/examples/vanilla-js/index.html at main · ghzhost/echomirror-sdk · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>EchoMirror SDK — Vanilla JS Example</title>
  <style>
    body { font-family: system-ui, sans-serif; max-width: 480px; margin: 48px auto; padding: 0 24px; color: #0c1a2e; }
    h1 { font-size: 1.5rem; margin-bottom: 24px; }
    button { padding: 10px 20px; background: #6366f1; color: white; border: none; border-radius: 8px; cursor: pointer; font-size: 1rem; }
    button:hover { background: #4f46e5; }
    input[type=range] { width: 100%; margin: 8px 0; }
    textarea { width: 100%; height: 80px; padding: 8px; border: 1px solid #e5e7eb; border-radius: 8px; font-size: 1rem; }
    .result { margin-top: 16px; padding: 12px; background: #f0fdf4; border-radius: 8px; color: #166534; }
    label { font-weight: 500; }
  </style>
</head>
<body>
  <h1>EchoMirror SDK — Vanilla JS</h1>

  <label for="score">Mood score: <span id="score-value">7</span>/10</label>
  <input type="range" id="score" min="1" max="10" value="7" />

  <textarea id="note" placeholder="How are you feeling? (optional)"></textarea>

  <button id="log-btn" style="margin-top: 12px; width: 100%">Log Mood</button>

  <div id="result" style="display:none" class="result"></div>

  <h1 style="margin-top: 48px">@echomirror/wasm — client-side helpers</h1>
  <p id="wasm-hash" class="result" style="display:none"></p>
  <p id="wasm-avg" class="result" style="display:none"></p>

  <script type="module">
    // In production: import { EchoMirrorClient } from 'https://cdn.jsdelivr.net/npm/@echomirror/core/+esm'
    // This example uses a mock for demonstration.

    const scoreEl = document.getElementById('score')
    const scoreValueEl = document.getElementById('score-value')
    const noteEl = document.getElementById('note')
    const logBtn = document.getElementById('log-btn')
    const resultEl = document.getElementById('result')

    scoreEl.addEventListener('input', () => {
      scoreValueEl.textContent = scoreEl.value
    })

    logBtn.addEventListener('click', async () => {
      logBtn.disabled = true
      logBtn.textContent = 'Logging…'

      // SDK call (replace with real client once API is live)
      await new Promise(r => setTimeout(r, 600)) // simulate network

      resultEl.style.display = 'block'
      resultEl.textContent = `Mood logged: ${scoreEl.value}/10 — Great, keep your streak going!`
      noteEl.value = ''
      logBtn.disabled = false
      logBtn.textContent = 'Log Mood'
    })

    // @echomirror/wasm: crypto + local aggregation that runs entirely in
    // the browser, no server round-trip. `init()` fetches and instantiates
    // the .wasm binary once — call it before anything else.
    import { init, hashPublicKey, MoodBuffer } from '@echomirror/wasm'

    await init()

    const anonymizedId = hashPublicKey('GDEMO...PUBLICKEY')
    document.getElementById('wasm-hash').style.display = 'block'
    document.getElementById('wasm-hash').textContent = `Anonymized wallet id: ${anonymizedId.slice(0, 16)}…`

    // MoodBuffer owns wasm-side memory — always free() it (or use
    // `using` in an environment that supports it) once you're done.
    using localHistory = new MoodBuffer()
    for (const score of [7, 8, 6, 9, 7]) localHistory.push(score)
    document.getElementById('wasm-avg').style.display = 'block'
    document.getElementById('wasm-avg').textContent =
      `Local 5-entry average (computed in wasm): ${localHistory.average().toFixed(1)}/10`
  </script>
</body>
</html>