topazcube 0.0.1

package/package.json

@@ -0,0 +1,55 @@
+{
+  "name": "topazcube",
+  "version": "0.0.1",
+  "description": "TopazCube is a real-time collaborative document editing, and multiplayer game library.",
+  "author": "László Matuska @BitOfGold",
+  "license": "Apache-2.0",
+  "homepage": "https://topazcube.com",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/BitOfGold/topazcube.git"
+  },
+  "bugs": {
+    "url": "https://github.com/BitOfGold/topazcube/issues"
+  },
+  "files": [
+    "src",
+    "test",
+    "LICENSE",
+    "README.md",
+    "package.json"
+  ],
+  "keywords": [
+    "multiplayer",
+    "multiplayer game",
+    "multiplayer server",
+    "multiplayer client",
+    "multiplayer document",
+    "collaborative document",
+    "multiplayer editor",
+    "collaborative editor",
+    "multiplayer game",
+    "collaborative game"
+  ],
+  "sideEffects": false,
+  "exports": {
+    "import": "./dist/topazcube.mjs",
+    "require": "./dist/topazcube.js"
+  },
+  "type": "module",
+  "scripts": {
+    "dev": "reset && vite --host 0.0.0.0 --port 8800",
+    "build": "vite build",
+    "preview": "vite preview --host 0.0.0.0 --port 8800"
+  },
+  "devDependencies": {
+    "vite": "^6.2.0",
+    "vite-plugin-glsl": "^1.3.3"
+  },
+  "dependencies": {
+    "@msgpack/msgpack": "^3.1.0",
+    "fast-json-patch": "^3.1.1",
+    "mongodb": "^6.15.0",
+    "ws": "^8.18.1"
+  }
+}

package/src/client.js

@@ -0,0 +1,251 @@
+import { applyOperation, applyPatch } from "fast-json-patch"
+import { encode, decode } from "@msgpack/msgpack"
+import { reactive, opmsg, msgop } from "./utils.js"
+
+export default class TopazCubeClient {
+  CYCLE = 100 // update/patch rate in ms
+  url = ""
+  documents = {}
+  autoReconnect = true
+  allowSync = true
+  isConnected = false
+  isConnecting = false
+  isPatched = false
+  stats = {
+    send: 0,
+    rec: 0,
+    sendBps: 0,
+    recBps: 0,
+    ping: 0,
+    stdiff: 0, // server time difference
+  }
+  lastFullState = 0
+  lastPatch = 0
+  le = true // Server is little endian
+  _documentChanges = {}
+  constructor({
+    url, // server url
+  }) {
+    this.url = url
+    this.socket = null
+    this._startLoop()
+  }
+
+  /*= UPDATE ===================================================================*/
+
+  _startLoop() {
+    if (this._loopiv) {
+      clearInterval(this._loopiv)
+    }
+    this._loopiv = setInterval(() => {
+      this._loop()
+    }, this.CYCLE)
+  }
+
+  _loop() {
+    if (!this.isConnected) {
+      return
+    }
+    this._sendPatches()
+  }
+
+  _countLoop() {
+    this._stats.sendBps = this._stats.send
+    this._stats.recBps = this._stats.rec
+    this._stats.send = 0
+    this._stats.rec = 0
+  }
+
+  /*= CONNECTION ===============================================================*/
+
+  subscribe(name) {
+    this.documents[name] = {}
+    this.send({ c: "sub", n: name })
+  }
+
+  unsubscribe(name) {
+    this.send({ c: "unsub", n: name })
+    delete this.documents[name]
+  }
+
+  connect() {
+    if (this.isConnecting) {
+      return
+    }
+    this.isConnecting = true
+    this._clear()
+    console.log("connecting...")
+
+    this.socket = new WebSocket(this.url)
+
+    // message received
+    this.socket.onmessage = async (event) => {
+      let buffer = await event.data.arrayBuffer()
+      this.stats.rec += buffer.byteLength
+      let message = decode(buffer)
+      let time = Date.now()
+      if (message.c == "full") {
+        let name = message.n
+        let doc = message.doc
+        this.documents[name] = doc
+        this.isPatched = false
+        this.document = reactive(name, this.documents[name], this._onDocumentChange.bind(this))
+        this.isPatched = false
+        this.lastFullState = message.t
+        this.le = message.le
+        this.onChange(name)
+      } else if (message.c == "patch") {
+        // patch
+        this.lastPatch = message.t
+        let name = message.n
+        if (message.doc) {
+          this.isPatched = true
+          for (let op of message.doc) {
+            let dop = msgop(op)
+            applyOperation(this.documents[name], dop)
+          }
+          this.isPatched = false
+        }
+        this.onChange(name)
+      } else if (message.c == "hello") {
+        time = Date.now()
+        let lastct = message.ct
+        let ping = time - lastct
+        let stime = message.t
+        this.stats.stdiff = stime + ping / 2 - time
+        this.stats.ping = ping
+        console.log("ping", ping, "ms", "stdiff", this.stats.stdiff, "ms")
+      }
+    }
+
+    // connection closed
+    this.socket.onclose = (event) => {
+      this.isConnected = false
+      this.isConnecting = false
+      this.lastFullState = 0
+      this.socket = null
+      this.onDisconnect()
+      if (this.autoReconnect) {
+        setTimeout(() => {
+          this._reconnect()
+        }, 500 + Math.random() * 500)
+      }
+    }
+
+    this.socket.onerror = (event) => {
+      this.isConnected = false
+      this.isConnecting = false
+      this.lastFullState = 0
+      this.socket = null
+      this.onDisconnect()
+
+      if (this.autoReconnect) {
+        setTimeout(() => {
+          this._reconnect()
+        }, 500 + Math.random() * 500)
+      }
+    }
+
+    this.socket.onopen = (event) => {
+      this.isConnecting = false
+      this.isConnected = true
+      this.lastFullState = 0
+      this._ping()
+      this.onConnect()
+    }
+  }
+
+  disconnect() {
+    this.isConnected = false
+    this.isConnecting = false
+    this.lastFullState = 0
+    this.socket.close()
+    this.socket = null
+  }
+
+  destroy() {
+    this.autoReconnect = false
+    this.disconnect()
+    this.socket = null
+  }
+
+  onConnect() {}
+
+  onDisconnect() {}
+
+  _clear() {
+    this.stats.sendBps = 0
+    this.stats.recBps = 0
+    this.stats.send = 0
+    this.stats.rec = 0
+    this.documents = {}
+    this._documentChanges = {}
+    this.lastFullState = 0
+    this.lastPatch = 0
+    this.isPatched = false
+    this.le = true
+  }
+
+  _reconnect() {
+    if (!this.isConnected) {
+      if (!this.isConnecting) {
+        this.connect()
+      }
+    }
+  }
+
+  _ping() {
+    if (this.isConnected) {
+      this.send({ c: "hello", ct: Date.now() })
+    }
+  }
+
+  /*= MESSAGES =================================================================*/
+
+  onChange(name) {}
+
+  send(operation) {
+    try {
+      let enc = encode(operation)
+      this.stats.send += enc.byteLength
+      this.socket.send(enc)
+    } catch (e) {
+      console.error("send failed", e)
+    }
+  }
+
+  _onDocumentChange(name, op, target, path, value) {
+    if (this.isPatched || !this.allowSync) {
+      return
+    }
+    if (path.indexOf("/_") >= 0) {
+      return
+    }
+    if (!this._documentChanges[name]) {
+      this._documentChanges[name] = []
+    }
+    this._documentChanges[name].push(opmsg(op, target, path, value))
+  }
+
+  _sendPatches() {
+    for (let name in this._documentChanges) {
+      let dc = this._documentChanges[name]
+      if (dc.length == 0) {
+        continue
+      }
+      let record = {
+        n: name,
+        c: "sync",
+        ct: Date.now(),
+      }
+
+      if (dc.length > 0) {
+        record.p = dc
+      }
+      this.send(record)
+      this._documentChanges[name].length = 0
+      this.onChange(name)
+    }
+  }
+
+}

package/src/server.js

@@ -0,0 +1,335 @@
+import https from "https"
+import fs from "fs"
+import { reactive, clonewo_, opmsg, msgop, getUID } from "./utils.js"
+import fastjsonpatch from "fast-json-patch"
+import { encode, decode } from "@msgpack/msgpack"
+import WebSocket, { WebSocketServer } from "ws"
+import { MongoClient } from "mongodb"
+
+const { applyPatch, applyOperation, observe } = fastjsonpatch
+
+const LITTLE_ENDIAN = (() => {
+  const buffer = new ArrayBuffer(2)
+  new DataView(buffer).setInt16(0, 256, true)
+  return new Int16Array(buffer)[0] === 256
+})()
+
+export default class TopazCubeServer {
+  allowSync = true // allow clients to sync their changes (no server authorization)
+  CYCLE = 100 // update/patch rate in ms
+  clients = new Set()
+  _documentChanges = {}
+  documents = {}
+  isLoading = {}
+
+  constructor({ port = 8799, https = false }) {
+    this.port = port
+    if (https) {
+      const httpsServer = https.createServer({
+        key: fs.readFileSync("./.cert/privkey.pem"),
+        cert: fs.readFileSync("./.cert/fullchain.pem"),
+      })
+      httpsServer.listen(this.port)
+      this.wss = new WebSocketServer({ server: httpsServer })
+      console.log("TopazCubeServer running on HTTPS port " + this.port)
+    } else {
+      this.wss = new WebSocketServer({ port: this.port })
+      console.log("TopazCubeServer running on port " + this.port)
+    }
+    this.wss.on("connection", (client) => {
+      this._onConnected(client)
+    })
+
+    this._initDB()
+    this._exited = false
+    process.stdin.resume()
+    process.on("SIGINT", () => {
+      this._exitSignal("SIGINT")
+    })
+    process.on("SIGQUIT", () => {
+      this._exitSignal("SIGQUIT")
+    })
+    process.on("SIGTERM", () => {
+      this._exitSignal("SIGTERM")
+    })
+    process.on("SIGUSR2", () => {
+      this._exitSignal("SIGUSR2")
+    })
+    this._startLoop()
+  }
+  
+  canCreate(client, name) {
+    return true;
+  }
+  
+  onCreate(name) {
+    return {
+      data: {}
+    }
+  }
+
+  // to be redefined, to be called when a new document is hydrated
+  // (created, or loaded from db)
+  onHydrate(name, doc) {
+  }
+
+  _makeReactive(name) {
+    //console.log(`Making document '${name}' reactive`, this.documents[name])
+    this.documents[name] = reactive(name, this.documents[name], this._onDocumentChange.bind(this))
+  }
+
+  _createEmptyDocument(name) {
+    let doc = this.onCreate(name)
+    if (!doc) {
+      return
+    }
+    this.documents[name] = doc
+  }
+
+  async _waitLoad(name) {
+    if (this.isLoading[name]) {
+      while (this.isLoading[name]) {
+        await new Promise(resolve => setTimeout(resolve, 50));
+      }
+    }
+  }
+  
+  async _checkDocument(name, client) {
+    await this._waitLoad(name)
+    if (!this.documents[name]) {
+      this.isLoading[name] = true;
+      await this._loadDocument(name);
+      if (!this.documents[name] && this.canCreate(client, name)) {
+        this._createEmptyDocument(name)
+      }
+      if (this.documents[name]) {
+        if (!this._documentChanges[name]) {
+          this._documentChanges[name] = []
+        }  
+        this._makeReactive(name)
+        this.onHydrate(name, this.documents[name])
+      }
+      this.isLoading[name] = false
+    }
+  }
+
+  /*= UPDATE =================================================================*/
+
+  // to be redefined. called every 1/20s
+  onUpdate(name, doc, dt) {}
+
+  _startLoop() {
+    this.lastUpdate = Date.now()
+    if (this._loopiv) {
+      clearInterval(this._loopiv)
+    }
+    this._loopiv = setInterval(() => {
+      this._loop()
+    }, this.CYCLE)
+  }
+
+  _loop() {
+    let dt = Date.now() - this.lastUpdate
+    for (let name in this.documents) {
+      this.onUpdate(name, this.documents[name], dt)
+    }
+    this.lastUpdate = Date.now()
+    this._sendPatches()
+  }
+
+  /*= MESSAGES ===============================================================*/
+
+  // to be redefined. Called on message (operation) from client
+  onMessage(client, message) {}
+
+  // to be redefined. Called when a client connects
+  onConnect(client) {}
+
+  // to be redefined. Called when a client disconnects
+  onDisconnect(client) {}
+
+  _onConnected(client) {
+    client.ID = getUID()
+    client.subscribed = {}
+    console.log("client connected", client.ID)
+    this.clients.add(client)
+    client.on("error", () => {
+      this._onError(client, arguments)
+    })
+    client.on("message", (message) => {
+      let dec = decode(message)
+      this._onMessage(client, dec)
+    })
+    client.on("close", (message) => {
+      this._onDisconnected(client)
+      this.onDisconnect(client)
+    })
+    this.onConnect(client)
+  }
+
+  async _onMessage(client, message) {
+    if (message.c == "hello") {
+      //console.log('client hello')
+      this.send(client, { c: "hello", t: Date.now(), ct: message.ct })
+    } else if (message.c == "sync" && this.allowSync && client.subscribed[message.n] && this.documents[message.n]) {
+      let name = message.n
+      if (!this._documentChanges[name]) {
+        this._documentChanges[name] = []
+      }
+      for (let op of message.p) {
+        this._documentChanges[name].push(op)
+        let dop = msgop(op)
+        applyOperation(this.documents[name], dop)
+      }
+    } else if (message.c == "sub") {
+      await this._checkDocument(message.n, client)
+      if (!this.documents[message.n]) {
+        this.send(client, { c: "error", t: Date.now(), message: "Document not found" })
+        return
+      }
+      client.subscribed[message.n] = true
+      this._sendFullState(message.n, client)
+    } else if (message.c == "unsub") {
+      client.subscribed[message.n] = false
+    } else {
+      this.onMessage(client, message)
+    }
+  }
+
+  _onError(client, args) {
+    console.error("onError:", args)
+  }
+
+  _onDisconnected(client) {
+    console.log("client disconnected")
+  }
+
+  send(client, message) {
+    let enc = encode(message)
+    client.send(enc)
+  }
+
+  broadcast(message) {
+    let enc = encode(message)
+    for (let client of this.clients) {
+      client.send(enc)
+    }
+  }
+
+  async _sendFullState(name, client) {
+    await this._waitLoad(name)
+    let fullState = {
+      c: "full",
+      le: LITTLE_ENDIAN,
+      t: Date.now(),
+      n: name,
+      doc: clonewo_(this.documents[name]),
+    }
+    this.send(client, fullState)
+  }
+
+  _sendPatches() {
+    let now = Date.now()
+
+    for (let name in this._documentChanges) {
+      let dc = this._documentChanges[name];
+      if (dc.length > 0) {
+        let record = {
+          c: "patch",
+          t: now, // server time
+          n: name,
+          doc: dc
+        }
+        for (let client of this.clients) {
+          if (client.subscribed[name]) {
+            this.send(client, record)
+          }
+        }
+        this._documentChanges[name] = []
+      }
+    }
+  }
+
+  _onDocumentChange(name, op, target, path, value) {
+    if (path.indexOf("/_") >= 0) {
+      return
+    }
+    this._documentChanges[name].push(opmsg(op, target, path, value))
+  }
+  
+  async _initDB() {
+    await this._connectDB()
+  }
+
+  async _connectDB() {
+    this.mongoClient = new MongoClient("mongodb://localhost:27017")
+    try {
+      await this.mongoClient.connect()
+      console.log("Connected to MongoDB")
+      const db = this.mongoClient.db("topazcube")
+      this._DB = db.collection("documents")
+    } catch (error) {
+      console.error("Error connecting to MongoDB:", error)
+      this.mongoClient = null
+    }
+  }
+
+  async _loadDocument(name) {
+    if (this._DB) {
+      try {
+        const doc = await this._DB.findOne({ name: name })
+        if (doc) {
+          delete doc._id
+          this.documents[name] = doc
+        }
+      } catch (error) {
+        console.error("Error loading document from MongoDB:", error)
+      }
+    } else {
+      console.warn("MongoDB client not initialized. Document not loaded.")
+    }
+  }
+  
+  async _saveDocument(name) {
+    if (this._DB) {
+      try {
+        const doc = this.documents[name]
+        let newdoc = clonewo_(doc, "__")
+        console.log(`Saving document '${name}' to MongoDB`)
+        await this._DB.updateOne({ name: name }, { $set: newdoc }, { upsert: true })
+        console.log("Document saved to MongoDB")
+      } catch (error) {
+        console.error("Error saving document to MongoDB:", error)
+      }
+    } else {
+      console.warn("MongoDB client not initialized. Document not saved.")
+    }
+  }
+
+  async _saveAllDocuments() {
+    for (let name in this.documents) {
+      await this._saveDocument(name)
+    }
+  }
+  
+  async onHydrate(name, document) {
+    document._hydrated = true
+  }
+  
+  _exitSignal(signal) {
+    if (!this._exited) {
+      console.log("\nEXIT: Caught interrupt signal " + signal)
+      this._exited = true
+      clearInterval(this._loopiv)
+      this.onBeforeExit()
+      this.broadcast({ server: "Going down" })
+      this._saveAllDocuments()
+      this.wss.close()
+      setTimeout(() => process.exit(0), 1000)
+    }
+  }
+
+  // Called on program exit
+
+  onBeforeExit() {}
+}

package/src/topazcube.js

@@ -0,0 +1,3 @@
+import TopazCubeClient from "./client.js"
+import TopazCubeServer from "./server.js"
+export { TopazCubeClient, TopazCubeServer }

package/src/utils.js

@@ -0,0 +1,216 @@
+export function reactive(name, object, callback, path = "", ID = null) {
+  if (object === null || typeof object !== "object") {
+    return object
+  }
+  for (const property in object) {
+    object[property] = reactive(name, object[property], callback, path + "/" + property, ID)
+  }
+
+  return new Proxy(object, {
+    get(target, property) {
+      return Reflect.get(...arguments)
+    },
+    set(target, property, value) {
+      let pn = path + "/" + property
+      let newvalue = reactive(name, value, callback, pn, ID)
+      callback(name, "replace", target, pn, newvalue, ID)
+      return Reflect.set(target, property, newvalue)
+    },
+    deleteProperty(target, property) {
+      let pn = path + "/" + property
+      delete target[property]
+      callback(name, "delete", target, pn, null, ID)
+      return true
+    },
+  })
+}
+
+export function deepGet(obj, path) {
+  let paths = ("" + path).split("/")
+  let len = paths.length
+  for (let i = 0; i < len; i++) {
+    if (obj[paths[i]] == undefined) {
+      return undefined
+    } else {
+      obj = obj[paths[i]]
+    }
+  }
+  return obj
+}
+
+export function deepSet(obj, path, value) {
+  let paths = ("" + path).split("/")
+  let len = paths.length
+  let i
+  for (i = 0; i < len - 1; i++) {
+    obj = obj[paths[i]]
+  }
+  obj[paths[i]] = value
+}
+
+// recursive clone oject, without properties that starts with _ (or __)
+
+export function clonewo_(obj, excludeStart = "_") {
+  if (obj === null || typeof obj !== "object") {
+    return obj
+  }
+
+  if (obj instanceof Map) {
+    const mapClone = new Map()
+    for (let [key, value] of obj) {
+      mapClone.set(clonewo_(key, excludeStart), clonewo_(value, excludeStart))
+    }
+    return mapClone
+  }
+
+  let clone
+  if (Array.isArray(obj)) {
+    clone = []
+    for (let i = 0; i < obj.length; i++) {
+      clone[i] = clonewo_(obj[i], excludeStart)
+    }
+  } else {
+    clone = {}
+    for (let key in obj) {
+      if (obj.hasOwnProperty(key) && !key.startsWith(excludeStart)) {
+        if (typeof obj[key] === "object") {
+          clone[key] = clonewo_(obj[key], excludeStart)
+        } else {
+          clone[key] = obj[key]
+        }
+      }
+    }
+  }
+
+  return clone
+}
+
+export function msgop(op) {
+  let nop = {}
+  if (!op.o) {
+    nop.op = "replace"
+  } else {
+    nop.op = {
+      a: "add",
+      r: "remove",
+      d: "delete",
+      t: "test",
+    }[op.o]
+  }
+  nop.path = op.p
+  nop.value = op.v
+  return nop
+}
+
+export function opmsg(op, target, path, value) {
+  let c = { p: path, v: value }
+  if (op != "replace") {
+    c.o = {
+      add: "a",
+      remove: "r",
+      delete: "d",
+      test: "t",
+    }[op]
+  }
+  return c
+}
+
+var _lastUID = 1
+
+export function sdate() {
+  return (Date.now() / 1000 - 1715000000) | 0
+}
+
+export function getUID() {
+  let uid = sdate()
+  if (uid <= _lastUID) {
+    uid = _lastUID + 1
+  }
+  _lastUID = uid
+  return uid
+}
+
+// - Fixed point encoding/decoding functions
+export function encode_uint32(uint, byteArray, offset = 0) {
+  if (!byteArray) {
+    byteArray = new Uint8Array(4)
+  }
+  let p = offset + 3
+  byteArray[p--] = uint & 0xff
+  uint >>= 8
+  byteArray[p--] = uint & 0xff
+  uint >>= 8
+  byteArray[p--] = uint & 0xff
+  uint >>= 8
+  byteArray[p] = uint
+  return byteArray
+}
+
+export function decode_uint32(byteArray, offset = 0) {
+  let p = offset
+  return ((byteArray[p++] & 0x7f) << 24) | (byteArray[p++] << 16) | (byteArray[p++] << 8) | byteArray[p]
+}
+
+export function encode_uint16(uint, byteArray, offset = 0) {
+  if (!byteArray) {
+    byteArray = new Uint8Array(2)
+  }
+  let p = offset + 1
+  byteArray[p--] = uint & 0xff
+  uint >>= 8
+  byteArray[p] = uint
+  return byteArray
+}
+
+export function decode_uint16(byteArray, offset = 0) {
+  let p = offset
+  return (byteArray[p++] << 8) | byteArray[p]
+}
+
+export function encode_fp248(float, byteArray, offset = 0) {
+  const fp = Math.round(Math.abs(float) * 256)
+  const enc = encode_uint32(fp, byteArray, offset)
+  if (float < 0) {
+    enc[offset] |= 0x80
+  }
+  return enc
+}
+
+export function decode_fp248(byteArray, offset = 0) {
+  const divider = (byteArray[offset] & 0x80) === 0x80 ? -256 : 256
+  byteArray[offset] &= 0x7f
+  const fp = decode_uint32(byteArray, offset)
+  return fp / divider
+}
+
+export function encode_fp1616(float, byteArray, offset = 0) {
+  const fp = Math.round(Math.abs(float) * 65536)
+  const enc = encode_uint32(fp, byteArray, offset)
+  if (float < 0) {
+    enc[offset] |= 0x80
+  }
+  return enc
+}
+
+export function decode_fp1616(byteArray, offset = 0) {
+  const divider = (byteArray[offset] & 0x80) === 0x80 ? -65536 : 65536
+  byteArray[offset] &= 0x7f
+  const fp = decode_uint32(byteArray, offset)
+  return fp / divider
+}
+
+export function encode_fp88(float, byteArray, offset = 0) {
+  const fp = Math.round(Math.abs(float) * 256)
+  const enc = encode_uint16(fp, byteArray, offset)
+  if (float < 0) {
+    enc[offset] |= 0x80
+  }
+  return enc
+}
+
+export function decode_fp88(byteArray, offset = 0) {
+  const divider = (byteArray[offset] & 0x80) === 0x80 ? -256 : 256
+  byteArray[offset] &= 0x7f
+  const fp = decode_uint16(byteArray, offset)
+  return fp / divider
+}

package/test/todo/client/App.jsx

@@ -0,0 +1,224 @@
+import React, { useEffect, useState } from "react"
+import TopazCubeClient from "../../src/client.js"
+import "./index.css"
+import { GripHorizontal, Trash2 } from "lucide-react"
+
+function App() {
+  // Client instance
+  let [client, setClient] = useState({})
+  const [isConnected, setIsConnected] = useState(false)
+
+  // Document state (list of todos)
+  let [doc, setDoc] = useState({})
+  // Sorted todos by order field
+  const sortedTodos = doc.todos ? [...doc.todos].filter((todo) => !todo.deleted).sort((a, b) => a.order - b.order) : []
+
+  // New todo input
+  const [newTodo, setNewTodo] = useState("")
+
+  // For drag and drop reordering
+  const [draggedItem, setDraggedItem] = useState(null)
+  const [movingUp, setMovingUp] = useState(false)
+  const [dragOverIndex, setDragOverIndex] = useState(null)
+
+  // Initialize client
+  useEffect(() => {
+    class TodoClient extends TopazCubeClient {
+      constructor() {
+        super({
+          url: "ws://192.168.0.200:4799",
+        })
+      }
+
+      onConnect() {
+        setIsConnected(true)
+        this.subscribe("todos")
+      }
+
+      onDisconnect() {
+        setIsConnected(false)
+      }
+
+      onMessage(message) {
+        console.log("orig onMessage", message)
+      }
+
+      onChange(name) {
+        console.log('onChange ez', this.document)
+        setDoc({ ...this.document })
+      }
+    }
+
+    let nc = new TodoClient()
+    setClient(nc)
+    nc.connect()
+
+    return () => {
+      nc.destroy()
+    }
+  }, [])
+
+  // Add new todo
+  const addTodo = () => {
+    if (newTodo) {
+      doc.todos.push({
+        title: newTodo,
+        completed: false,
+        order: doc.todos.length,
+      })
+      setNewTodo("")
+    }
+  }
+
+  // Drag and drop handlers
+
+  const handleDragStart = (e, todo, index) => {
+    setDraggedItem(todo)
+    e.dataTransfer.effectAllowed = "move"
+    // Required for Firefox
+    e.dataTransfer.setData("text/plain", index)
+  }
+
+  const handleDragOver = (e, overTodo, overIndex) => {
+    e.preventDefault()
+    if (!draggedItem || draggedItem === overTodo) return
+    setDragOverIndex(overIndex)
+    if (draggedItem.order <= overTodo.order) {
+      setMovingUp(false)
+    } else {
+      setMovingUp(true)
+    }
+  }
+
+  const handleDragEnd = () => {
+    setDraggedItem(null)
+    setDragOverIndex(null)
+  }
+
+  const handleDrop = (e, dropTodo) => {
+    e.preventDefault()
+    if (!draggedItem || draggedItem === dropTodo) return
+
+    // Get current orders
+    const currentOrders = sortedTodos.map((todo) => todo.order)
+
+    // Find the current order of dragged and drop items
+    const draggedOrder = draggedItem.order
+    const dropOrder = dropTodo.order
+
+    // Reorder the items
+    if (draggedOrder < dropOrder) {
+      // Moving down
+      doc.todos.forEach((todo) => {
+        if (todo === draggedItem) {
+          todo.order = dropOrder
+        } else if (todo.order > draggedOrder && todo.order <= dropOrder) {
+          todo.order--
+        }
+      })
+    } else {
+      // Moving up
+      doc.todos.forEach((todo) => {
+        if (todo === draggedItem) {
+          todo.order = dropOrder
+        } else if (todo.order >= dropOrder && todo.order < draggedOrder) {
+          todo.order++
+        }
+      })
+    }
+
+    setDoc({ ...doc })
+    setDraggedItem(null)
+    setDragOverIndex(null)
+  }
+
+  return (
+    <>
+      <div className="mx-auto w-full md:max-w-2xl p-2">
+        <h1>TopazCube Client Test</h1>
+        <h2>Todo list: '{doc.title}'</h2>
+        {sortedTodos.length > 0 ? (
+          <div>
+            <ul>
+              {sortedTodos.map(
+                (todo, index) =>
+                  !todo.deleted && (
+                    <li
+                      key={index}
+                      className={`flex items-center gap-2 py-1
+                        ${index % 2 == 0 ? "bg-gray-200" : ""} ${
+                        dragOverIndex === index ? "border-" + (movingUp ? "t" : "b") + "-3 border-blue-500" : ""
+                      }`}
+                      draggable={true}
+                      onDragStart={(e) => handleDragStart(e, todo)}
+                      onDragOver={(e) => handleDragOver(e, todo, index)}
+                      onDragEnd={handleDragEnd}
+                      onDrop={(e) => handleDrop(e, todo)}>
+                      <button className="!cursor-move">
+                        <GripHorizontal />
+                      </button>
+                      <input
+                        type="checkbox"
+                        className="cursor-pointer w-5 h-5"
+                        checked={todo.completed}
+                        onChange={() => {
+                          todo.completed = !todo.completed
+                        }}
+                      />
+                      <span className="flex-grow ml-2 cursor-move">
+                        <span className={`${todo.completed ? "line-through opacity-30" : "font-bold"} cursor-text`}>
+                          {todo.title}
+                        </span>
+                      </span>
+                      <button
+                        onClick={() => {
+                          todo.deleted = true
+                        }}>
+                        <Trash2 />
+                      </button>
+                    </li>
+                  )
+              )}
+            </ul>
+          </div>
+        ) : (
+          <p>No todos yet. Add some!</p>
+        )}
+        <br />
+        <div className="flex gap-2">
+          <input
+            type="text"
+            className="flex-grow border-2 border-gray-400 px-2 py-1 rounded-md"
+            placeholder="New Todo"
+            value={newTodo}
+            onChange={(e) => setNewTodo(e.target.value)}
+          />
+          <button
+            className={`bg-gray-300 ${
+              newTodo ? "text-black" : "text-gray-400 opacity-50 !cursor-not-allowed"
+            } font-bold border-2 border-gray-400 px-4 py-2 rounded-md`}
+            onClick={addTodo}
+            onKeyDown={(e) => {
+              if (e.key === "Enter") {
+                addTodo()
+              }
+            }}>
+            Add Todo
+          </button>
+        </div>
+        <br />
+        <pre>{JSON.stringify(doc, null, 2)}</pre>
+        <br />
+      </div>
+      {!isConnected ? (
+        <div className="fixed inset-0 bg-black/70 flex items-center justify-center z-50">
+          <h2 className="text-white text-xl font-bold">Connecting...</h2>
+        </div>
+      ) : (
+        <></>
+      )}
+    </>
+  )
+}
+
+export default App

package/test/todo/client/index.css

@@ -0,0 +1,13 @@
+@import "tailwindcss";
+
+h1 {
+    @apply text-2xl font-bold pb-4;
+}
+
+h2 {
+    @apply text-xl font-bold pb-2;
+}
+
+button {
+    @apply transition-all duration-300 font-bold px-2 py-1 rounded-md hover:opacity-50 hover:scale-115 cursor-pointer;
+}

package/test/todo/client/index.html

@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>TopazCube Client Test</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="main.jsx"></script>
+  </body>
+</html>

package/test/todo/client/main.jsx

@@ -0,0 +1,7 @@
+import React from 'react'
+import { createRoot } from 'react-dom/client';
+import App from './App'
+
+const root = createRoot(document.getElementById('root'))
+root.render(<App />)
+

package/test/todo/client/package.json

@@ -0,0 +1,24 @@
+{
+  "name": "topazcube-test-client",
+  "private": true,
+  "version": "0.0.1",
+  "type": "module",
+  "scripts": {
+    "dev": "vite --host 0.0.0.0 --port 4800"
+  },
+  "devDependencies": {
+    "vite": "^6.2.0"
+  },
+  "dependencies": {
+    "@msgpack/msgpack": "^3.1.0",
+    "@tailwindcss/vite": "^4.0.9",
+    "@vitejs/plugin-react": "^4.3.4",
+    "collections": "^5.1.13",
+    "fast-json-patch": "^3.1.1",
+    "lucide-react": "^0.476.0",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "tailwindcss": "^4.0.9",
+    "ws": "^8.18.1"
+  }
+}

package/test/todo/client/vite.config.js

@@ -0,0 +1,10 @@
+import { defineConfig } from 'vite'
+import tailwindcss from '@tailwindcss/vite'
+import react from '@vitejs/plugin-react';
+
+export default defineConfig({
+  plugins: [
+    react(),
+    tailwindcss(),
+  ],
+})

package/test/todo/server/package.json

@@ -0,0 +1,19 @@
+{
+  "name": "topazcube-test-server",
+  "private": true,
+  "version": "0.0.1",
+  "type": "module",
+  "scripts": {
+    "dev": "reset && nodemon todoserver.js"
+  },
+  "devDependencies": {
+    "vite": "^6.2.0"
+  },
+  "dependencies": {
+    "@msgpack/msgpack": "^3.1.0",
+    "collections": "^5.1.13",
+    "fast-json-patch": "^3.1.1",
+    "mongodb": "^6.15.0",
+    "ws": "^8.18.1"
+  }
+}

package/test/todo/server/todoserver.js

@@ -0,0 +1,33 @@
+import TopazCubeServer from "../../src/server.js"
+
+class TodoServer extends TopazCubeServer {
+  constructor() {
+    super({
+      port: 4799,
+    })
+  }
+
+  canCreate(client, name) {
+    return true;
+  }
+
+  onCreate(name) {
+    return {
+      todos: [],
+    }
+  }
+
+  canUpdate(client, name) {
+    return true;
+  }
+  
+  onHydrate(name, doc) {
+    doc.random = Math.random()
+  }
+  onUpdate(name, doc, dt) {}
+  onMessage(client, message) {}
+
+
+}
+
+let server = new TodoServer()