topazcube 0.0.1 → 0.0.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "topazcube",
-  "version": "0.0.1",
+  "version": "0.0.3",
   "description": "TopazCube is a real-time collaborative document editing, and multiplayer game library.",
   "author": "László Matuska @BitOfGold",
   "license": "Apache-2.0",
@@ -14,10 +14,9 @@
   },
   "files": [
     "src",
-    "test",
+    "dist",
     "LICENSE",
-    "README.md",
-    "package.json"
+    "README.md"
   ],
   "keywords": [
     "multiplayer",
@@ -33,8 +32,15 @@
   ],
   "sideEffects": false,
   "exports": {
-    "import": "./dist/topazcube.mjs",
-    "require": "./dist/topazcube.js"
+    ".": {
+      "import": "./dist/topazcube.js"
+    },
+    "./client": {
+      "import": "./dist/topazcube.js"
+    },
+    "./server": {
+      "import": "./src/server.js"
+    }
   },
   "type": "module",
   "scripts": {
@@ -43,13 +49,13 @@
     "preview": "vite preview --host 0.0.0.0 --port 8800"
   },
   "devDependencies": {
-    "vite": "^6.2.0",
-    "vite-plugin-glsl": "^1.3.3"
+    "vite": "^6.3.2"
   },
   "dependencies": {
-    "@msgpack/msgpack": "^3.1.0",
+    "@msgpack/msgpack": "^3.1.1",
     "fast-json-patch": "^3.1.1",
     "mongodb": "^6.15.0",
+    "util": "^0.12.5",
     "ws": "^8.18.1"
   }
 }

package/src/topazcube.js

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

package/test/todo/client/App.jsx

@@ -1,224 +0,0 @@
-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

@@ -1,13 +0,0 @@
-@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

@@ -1,13 +0,0 @@
-<!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

@@ -1,7 +0,0 @@
-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

@@ -1,24 +0,0 @@
-{
-  "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

@@ -1,10 +0,0 @@
-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

@@ -1,19 +0,0 @@
-{
-  "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

@@ -1,33 +0,0 @@
-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()