initial commit

2023-02-23 12:09:27 +01:00 · 2023-02-23 12:09:27 +01:00 · a1c91f6d4e
commit a1c91f6d4e
14 changed files with 1633 additions and 0 deletions
--- a/assets/index.html
+++ b/assets/index.html
@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <title>CRDT Playground</title>
+  </head>
+  <body onload="setup()">
+    <textarea id="doctext" name="story" rows="5" cols="33" oninput="" >
+      It was a dark and stormy night...
+    </textarea>
+
+    <script src="/index.js"></script>
+  </body>
+</html>
--- a/assets/index.js
+++ b/assets/index.js
@ -0,0 +1,66 @@
+const areaId = "doctext";
+const validEvents = [
+  "insertText",
+  "insertFromPaste",
+  "insertLineBreak",
+  "deleteContentBackward",
+  "deleteContentForward",
+];
+
+let selectionStart = 0;
+let selectionEnd = 0;
+
+let area;
+let ws;
+
+const uuid = self.crypto.randomUUID();
+
+function setup() {
+  area = document.querySelector(`#${areaId}`);
+  ws = new WebSocket("ws://localhost:3000/ws");
+
+  setupUi();
+  setupWs();
+}
+
+function setupUi() {
+  document.addEventListener("selectionchange", onSelectionChange, false);
+  area.addEventListener("input", onInput, false);
+}
+
+function setupWs() {
+  ws.onmessage = function (e) {
+    let payload = JSON.parse(e.data);
+    if (payload.client !== uuid) {
+      area.value = payload.doc;
+    }
+  };
+}
+
+function onSelectionChange(event) {
+  const activeElement = document.activeElement;
+
+  if (activeElement && activeElement.id === areaId) {
+    selectionStart = area.selectionStart;
+    selectionEnd = area.selectionEnd;
+  }
+}
+
+function onInput(event) {
+  if (!validEvents.includes(event.inputType)) return;
+  const payload = {
+    client: uuid,
+    time: performance.now(),
+    action: event.inputType,
+    data: event.data,
+    start: selectionStart,
+    end: selectionEnd,
+  };
+
+  ws.send(JSON.stringify(payload));
+
+  console.log(event.inputType);
+  console.log(selectionStart);
+  console.log(selectionEnd);
+  console.log(event.data);
+}