spoint 0.1.0 → 0.1.10

package/client/style.css

@@ -9,3 +9,254 @@ canvas { display: block; width: 100%; height: 100vh; }
 #health-text { position: absolute; top: -20px; left: 50%; transform: translateX(-50%); font-size: 14px; color: #fff; text-shadow: 0 0 4px #000; }
 #info { position: absolute; top: 10px; left: 10px; font-size: 13px; line-height: 1.6; color: #0f0; text-shadow: 0 0 2px #000; }
 #click-prompt { position: absolute; top: 50%; left: 50%; transform: translate(-50%, 30px); font-size: 18px; color: rgba(255,255,255,0.7); text-shadow: 0 0 4px #000; z-index: 20; }
+
+.loading-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 9999;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+}
+
+.loading-container {
+  text-align: center;
+  color: white;
+  max-width: 400px;
+  width: 90%;
+}
+
+.loading-header h1 {
+  margin: 0 0 10px 0;
+  font-size: 2.5rem;
+  font-weight: 700;
+  letter-spacing: 2px;
+  background: linear-gradient(135deg, #00d4ff, #0099ff);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+}
+
+.loading-stage-text {
+  margin: 0;
+  font-size: 0.95rem;
+  opacity: 0.8;
+  color: #a0a0a0;
+  min-height: 1.5rem;
+}
+
+.loading-progress-wrapper {
+  margin: 30px 0;
+  position: relative;
+}
+
+.loading-progress-bar {
+  width: 100%;
+  height: 6px;
+  background: rgba(255, 255, 255, 0.1);
+  border-radius: 3px;
+  overflow: hidden;
+}
+
+.loading-progress-fill {
+  height: 100%;
+  background: linear-gradient(90deg, #00d4ff, #0099ff);
+  width: 0%;
+  transition: width 0.2s ease-out;
+  box-shadow: 0 0 10px rgba(0, 212, 255, 0.5);
+}
+
+.loading-percent {
+  position: absolute;
+  right: 0;
+  top: -24px;
+  font-size: 0.85rem;
+  font-weight: 600;
+  min-width: 40px;
+}
+
+.loading-details {
+  font-size: 0.75rem;
+  color: #808080;
+  margin-top: 15px;
+  min-height: 1rem;
+}
+
+.loading-details .loading-current,
+.loading-details .loading-total {
+  color: #00d4ff;
+  font-weight: 600;
+}
+
+.loading-spinner {
+  display: flex;
+  justify-content: center;
+  gap: 8px;
+  margin-top: 30px;
+  height: 12px;
+}
+
+.spinner-dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background: #00d4ff;
+  opacity: 0.4;
+  animation: spin-bounce 1.2s infinite ease-in-out;
+}
+
+.spinner-dot:nth-child(1) {
+  animation-delay: -0.32s;
+}
+
+.spinner-dot:nth-child(2) {
+  animation-delay: -0.16s;
+}
+
+@keyframes spin-bounce {
+  0%, 80%, 100% {
+    opacity: 0.4;
+    transform: scale(0.8);
+  }
+  40% {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+.loading-overlay.fade-out {
+  animation: fade-out-animation 0.5s ease-out forwards;
+}
+
+@keyframes fade-out-animation {
+  from {
+    opacity: 1;
+    visibility: visible;
+  }
+  to {
+    opacity: 0;
+    visibility: hidden;
+  }
+}
+
+@media (max-width: 640px) {
+  .loading-header h1 {
+    font-size: 1.8rem;
+  }
+
+  .loading-stage-text {
+    font-size: 0.85rem;
+  }
+
+  .loading-details {
+    font-size: 0.7rem;
+  }
+}
+
+#mobile-controls {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  pointer-events: none;
+  z-index: 1000;
+  touch-action: none;
+}
+
+.mobile-joystick {
+  position: absolute;
+  border-radius: 50%;
+  background: rgba(255, 255, 255, 0.15);
+  border: 2px solid rgba(255, 255, 255, 0.3);
+  pointer-events: auto;
+  touch-action: none;
+}
+
+.mobile-joystick-knob {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  border-radius: 50%;
+  background: rgba(255, 255, 255, 0.5);
+  transform: translate(-50%, -50%);
+  touch-action: none;
+}
+
+.mobile-joystick-knob.active {
+  background: rgba(255, 255, 255, 0.7) !important;
+}
+
+.mobile-buttons {
+  position: absolute;
+  display: grid;
+  gap: 8px;
+  pointer-events: auto;
+}
+
+.mobile-button {
+  border-radius: 50%;
+  background: rgba(255, 255, 255, 0.2);
+  border: 2px solid rgba(255, 255, 255, 0.4);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: white;
+  font-weight: bold;
+  user-select: none;
+  -webkit-user-select: none;
+  touch-action: none;
+}
+
+.mobile-button.active {
+  background: rgba(255, 255, 255, 0.5) !important;
+  transform: scale(0.95);
+}
+
+.mobile-button-shoot {
+  background: rgba(255, 100, 100, 0.4);
+}
+
+.mobile-button-reload {
+  background: rgba(100, 100, 255, 0.4);
+}
+
+#ar-button {
+  position: fixed;
+  bottom: 20px;
+  left: 50%;
+  transform: translateX(-50%);
+  padding: 12px 24px;
+  background: rgba(0, 150, 0, 0.8);
+  color: white;
+  border: none;
+  border-radius: 8px;
+  font-size: 16px;
+  font-weight: bold;
+  cursor: pointer;
+  z-index: 1001;
+  touch-action: none;
+}
+
+@media (max-width: 480px) {
+  .mobile-joystick {
+    width: 100px !important;
+    height: 100px !important;
+  }
+  
+  .mobile-joystick-knob {
+    width: 40px !important;
+    height: 40px !important;
+  }
+  
+  .mobile-button {
+    width: 44px !important;
+    height: 44px !important;
+    font-size: 14px !important;
+  }
+}

package/package.json

@@ -1,11 +1,12 @@
 {
   "name": "spoint",
-  "version": "0.1.0",
+  "version": "0.1.10",
   "description": "Physics and netcode SDK for multiplayer game servers",
   "type": "module",
   "main": "src/index.js",
   "bin": {
-    "spoint": "./server.js"
+    "spoint": "./server.js",
+    "spoint-create-app": "./bin/create-app.js"
   },
   "scripts": {
     "start": "node server.js"
@@ -13,9 +14,12 @@
   "files": [
     "src/",
     "apps/",
-    "world/",
     "client/",
+    "!client/test-*.html",
+    "!client/vrm-test.html",
+    "bin/",
     "server.js",
+    "SKILL.md",
     "LICENSE",
     "README.md"
   ],

package/server.js

@@ -1,3 +1,11 @@
 #!/usr/bin/env node
 import { boot } from './src/sdk/server.js'
-await boot()
+import { scaffold } from './src/sdk/scaffold.js'
+
+const cmd = process.argv[2]
+if (cmd === 'scaffold') {
+  await scaffold()
+} else {
+  await scaffold()
+  await boot()
+}

package/src/apps/AppContext.js

@@ -70,7 +70,7 @@ export class AppContext {
       addTrimeshCollider: () => {
         ent.collider = { type: 'trimesh', model: ent.model }
         if (runtime._physics && ent.model) {
-          const bodyId = runtime._physics.addStaticTrimesh(ent.model, 0)
+          const bodyId = runtime._physics.addStaticTrimesh(runtime.resolveAssetPath(ent.model), 0)
           ent._physicsBodyId = bodyId
         }
       },

package/src/apps/AppLoader.js

@@ -1,4 +1,5 @@
 import { readdir, readFile, watch, access } from 'node:fs/promises'
+import { existsSync } from 'node:fs'
 import { join, basename, extname, resolve } from 'node:path'
 import { pathToFileURL } from 'node:url'
 
@@ -10,33 +11,39 @@ const BLOCKED_PATTERNS = [
 export class AppLoader {
   constructor(runtime, config = {}) {
     this._runtime = runtime
-    this._dir = config.dir || './apps'
+    this._dirs = config.dirs || [config.dir || './apps']
     this._watchers = new Map()
     this._loaded = new Map()
     this._onReloadCallback = null
   }
 
   async _resolvePath(name) {
-    const flat = join(this._dir, `${name}.js`)
-    try { await access(flat); return flat } catch {}
-    const folder = join(this._dir, name, 'index.js')
-    try { await access(folder); return folder } catch {}
+    for (const dir of this._dirs) {
+      const flat = join(dir, `${name}.js`)
+      try { await access(flat); return flat } catch {}
+      const folder = join(dir, name, 'index.js')
+      try { await access(folder); return folder } catch {}
+    }
     return null
   }
 
   async loadAll() {
-    const entries = await readdir(this._dir, { withFileTypes: true }).catch(() => [])
+    const seen = new Set()
     const results = []
-    for (const entry of entries) {
-      let name = null
-      if (entry.isFile() && entry.name.endsWith('.js')) {
-        name = basename(entry.name, extname(entry.name))
-      } else if (entry.isDirectory()) {
-        try { await access(join(this._dir, entry.name, 'index.js')); name = entry.name } catch {}
-      }
-      if (name) {
-        const loaded = await this.loadApp(name)
-        if (loaded) results.push(name)
+    for (const dir of this._dirs) {
+      const entries = await readdir(dir, { withFileTypes: true }).catch(() => [])
+      for (const entry of entries) {
+        let name = null
+        if (entry.isFile() && entry.name.endsWith('.js')) {
+          name = basename(entry.name, extname(entry.name))
+        } else if (entry.isDirectory()) {
+          try { await access(join(dir, entry.name, 'index.js')); name = entry.name } catch {}
+        }
+        if (name && !seen.has(name)) {
+          seen.add(name)
+          const loaded = await this.loadApp(name)
+          if (loaded) results.push(name)
+        }
       }
     }
     return results
@@ -82,28 +89,34 @@ export class AppLoader {
   }
 
   async watchAll() {
-    try {
-      const ac = new AbortController()
-      const watcher = watch(this._dir, { recursive: true, signal: ac.signal })
-      this._watchers.set('__dir__', ac)
-      ;(async () => {
-        try {
-          for await (const event of watcher) {
-            if (!event.filename || !event.filename.endsWith('.js')) continue
-            const parts = event.filename.replace(/\\/g, '/').split('/')
-            const name = parts.length > 1
-              ? parts[0]
-              : basename(event.filename, extname(event.filename))
-            await this._onFileChange(name)
-          }
-        } catch (e) {
-          if (e.name !== 'AbortError') {
-            console.error(`[AppLoader] watch error:`, e.message)
+    for (const dir of this._dirs) {
+      if (!existsSync(dir)) {
+        console.debug(`[AppLoader] skipping watch for missing directory: ${dir}`)
+        continue
+      }
+      try {
+        const ac = new AbortController()
+        const watcher = watch(dir, { recursive: true, signal: ac.signal })
+        this._watchers.set(dir, ac)
+        ;(async () => {
+          try {
+            for await (const event of watcher) {
+              if (!event.filename || !event.filename.endsWith('.js')) continue
+              const parts = event.filename.replace(/\\/g, '/').split('/')
+              const name = parts.length > 1
+                ? parts[0]
+                : basename(event.filename, extname(event.filename))
+              await this._onFileChange(name)
+            }
+          } catch (e) {
+            if (e.name !== 'AbortError') {
+              console.error(`[AppLoader] watch error:`, e.message)
+            }
           }
-        }
-      })()
-    } catch (e) {
-      console.error(`[AppLoader] watchAll error:`, e.message)
+        })()
+      } catch (e) {
+        console.error(`[AppLoader] watchAll error:`, e.message)
+      }
     }
   }
 

package/src/apps/AppRuntime.js

@@ -3,6 +3,8 @@ import { HotReloadQueue } from './HotReloadQueue.js'
 import { EventBus } from './EventBus.js'
 import { mulQuat, rotVec } from '../math.js'
 import { MSG } from '../protocol/MessageTypes.js'
+import { existsSync } from 'node:fs'
+import { resolve } from 'node:path'
 
 export class AppRuntime {
   constructor(c = {}) {
@@ -16,6 +18,7 @@ export class AppRuntime {
     this._eventBus = c.eventBus || new EventBus()
     this._eventLog = c.eventLog || null
     this._storage = c.storage || null
+    this._sdkRoot = c.sdkRoot || null
     this._eventBus.on('*', (event) => {
       if (event.channel.startsWith('system.')) return
       this._log('bus_event', { channel: event.channel, data: event.data }, event.meta)
@@ -26,6 +29,20 @@ export class AppRuntime {
     })
   }
 
+  resolveAssetPath(p) {
+    if (!p) return p
+    const local = resolve(p)
+    if (existsSync(local)) return local
+    if (this._sdkRoot) {
+      const sdk = resolve(this._sdkRoot, p)
+      if (existsSync(sdk)) {
+        console.debug(`[SDK-DEFAULT] using bundled asset: ${p}`)
+        return sdk
+      }
+    }
+    return local
+  }
+
   registerApp(name, appDef) { this._appDefs.set(name, appDef) }
 
   spawnEntity(id, config = {}) {
@@ -47,7 +64,7 @@ export class AppRuntime {
     }
     if (config.autoTrimesh && entity.model && this._physics) {
       entity.collider = { type: 'trimesh', model: entity.model }
-      entity._physicsBodyId = this._physics.addStaticTrimesh(entity.model, 0)
+      entity._physicsBodyId = this._physics.addStaticTrimesh(this.resolveAssetPath(entity.model), 0)
     }
     if (config.app) this._attachApp(entityId, config.app)
     this._spatialInsert(entity)
@@ -128,7 +145,7 @@ export class AppRuntime {
     return { tick: this.currentTick, timestamp: Date.now(), entities }
   }
 
-  queryEntities(f) { return f ? Array.from(this.entities.values()).filter(f) : Array.from(this.entities.values()) }
+  queryEntities(f) { const r = []; for (const e of this.entities.values()) { if (!f || f(e)) r.push(e) } return r }
   getEntity(id) { return this.entities.get(id) || null }
   fireEvent(eid, en, ...a) { const ad = this.apps.get(eid), c = this.contexts.get(eid); if (!ad || !c) return; this._log('app_event', { entityId: eid, event: en, args: a }, { sourceEntity: eid }); const s = ad.server || ad; if (s[en]) this._safeCall(s, en, [c, ...a], `${en}(${eid})`) }
   fireInteract(eid, p) { this.fireEvent(eid, 'onInteract', p) }
@@ -149,12 +166,19 @@ export class AppRuntime {
   }
 
   _tickCollisions() {
-    const c = Array.from(this.entities.values()).filter(e => e.collider && this.apps.has(e.id))
-    for (let i = 0; i < c.length; i++) for (let j = i + 1; j < c.length; j++) {
-      const a = c[i], b = c[j], d = Math.hypot(b.position[0]-a.position[0], b.position[1]-a.position[1], b.position[2]-a.position[2])
-      if (d < this._colR(a.collider) + this._colR(b.collider)) {
-        this.fireEvent(a.id, 'onCollision', { id: b.id, position: b.position, velocity: b.velocity })
-        this.fireEvent(b.id, 'onCollision', { id: a.id, position: a.position, velocity: a.velocity })
+    const c = []
+    for (const e of this.entities.values()) {
+      if (e.collider && this.apps.has(e.id)) { e._cachedColR = this._colR(e.collider); c.push(e) }
+    }
+    for (let i = 0; i < c.length; i++) {
+      const a = c[i], ar = a._cachedColR, ax = a.position[0], ay = a.position[1], az = a.position[2]
+      for (let j = i + 1; j < c.length; j++) {
+        const b = c[j], dx = b.position[0]-ax, dy = b.position[1]-ay, dz = b.position[2]-az
+        const rr = ar + b._cachedColR
+        if (dx*dx+dy*dy+dz*dz < rr*rr) {
+          this.fireEvent(a.id, 'onCollision', { id: b.id, position: b.position, velocity: b.velocity })
+          this.fireEvent(b.id, 'onCollision', { id: a.id, position: a.position, velocity: a.velocity })
+        }
       }
     }
   }