trancer1994.github.io/setup.html at main · trancer1994/trancer1994.github.io · 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
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Connecting Worlds setup</title>
    <script src="https://cdn.jsdelivr.net/npm/qrcode@1.5.3/build/qrcode.min.js"></script>
    <style>
      body { font-family: system-ui, sans-serif; padding: 1rem; }
      label, input, button { font-size: 1rem; }
      #qrcode { margin-top: 1rem; }
    </style>
  </head>
  <body>
    <h1>Connecting Worlds – Caregiver setup</h1>

    <label for="nick">Preferred nickname:</label>
    <input id="nick" type="text" autocomplete="off">

    <div style="margin-top: 0.75rem;">
      <button id="saveLocal">Save on this device</button>
      <button id="makeQR">Make QR code</button>
    </div>

    <p id="shortUrl"></p>
    <canvas id="qrcode"></canvas>

    <script>
      const nickInput = document.getElementById("nick");
      const saveLocal = document.getElementById("saveLocal");
      const makeQR    = document.getElementById("makeQR");
      const shortUrlP = document.getElementById("shortUrl");
      const qrCanvas  = document.getElementById("qrcode");

      const BASE_SHORT = "https://trancer1994.github.io/j";

      saveLocal.addEventListener("click", () => {
        const nick = nickInput.value.trim();
        if (!nick) return;
        localStorage.setItem("cw_nickname", nick);
        alert("Nickname saved on this device.");
      });

      makeQR.addEventListener("click", () => {
        const nick = nickInput.value.trim();
        if (!nick) return;

        const url = BASE_SHORT + "?nick=" + encodeURIComponent(nick);
        shortUrlP.textContent = "Short URL: " + url;

        QRCode.toCanvas(qrCanvas, url, { width: 200 }, err => {
          if (err) console.error(err);
        });
      });
    </script>
 <div style="margin-top: 1rem;">
  <button id="showCode">Show simple code</button>
  <p id="codeOut"></p>
</div>

<script>
  const showCode = document.getElementById("showCode");
  const codeOut  = document.getElementById("codeOut");

  showCode.addEventListener("click", () => {
    const nick = nickInput.value.trim();
    if (!nick) return;

    // Very simple deterministic hash → 4 digits
    let hash = 0;
    for (let i = 0; i < nick.length; i++) {
      hash = (hash * 31 + nick.charCodeAt(i)) >>> 0;
    }
    const code = (hash % 9000 + 1000).toString(); // 1000–9999

    codeOut.textContent = "Code for this nickname: " + code +
      " (use ?code=" + code + " on the user’s device)";

    // In a more advanced version, you could store code→nick mapping somewhere shared.
  });
</script>
 <div style="margin-top: 1rem;">
  <button id="makeCode">Generate 4‑digit code</button>
  <p id="codeOut"></p>
</div>

<script>
  const makeCode = document.getElementById("makeCode");
  const codeOut  = document.getElementById("codeOut");

  makeCode.addEventListener("click", () => {
    const nick = nickInput.value.trim();
    if (!nick) {
      codeOut.textContent = "Please enter a nickname first.";
      return;
    }

    // Deterministic 4‑digit hash
    let hash = 0;
    for (let i = 0; i < nick.length; i++) {
      hash = (hash * 31 + nick.charCodeAt(i)) >>> 0;
    }
    const code = (hash % 9000 + 1000).toString(); // always 1000–9999

    // Store mapping locally on THIS device
    localStorage.setItem("cw_code_" + code, nick);

    codeOut.textContent =
      "Generated code: " + code +
      "\nOpen: https://trancer1994.github.io/j?code=" + code +
      "\n(This only works on THIS device)";
  });
</script>
</body>
</html>