spoint 0.1.16 → 0.1.18

package/apps/interactable/index.js

@@ -2,57 +2,25 @@ export default {
   server: {
     setup(ctx) {
       ctx.entity.custom = { mesh: 'box', color: 0x00ff88, sx: 1.5, sy: 0.5, sz: 1.5, label: 'INTERACT' }
-      ctx.state.interactionRadius = 3.5
-      ctx.state.interactionCooldown = new Map()
       ctx.state.interactionCount = 0
 
       ctx.physics.setStatic(true)
       ctx.physics.addBoxCollider([0.75, 0.25, 0.75])
-
-      ctx.time.every(0.1, () => {
-        const nearby = ctx.players.getNearest(ctx.entity.position, ctx.state.interactionRadius)
-        if (!nearby) return
-
-        const now = Date.now()
-        const playerId = nearby.id
-        const lastInteract = ctx.state.interactionCooldown.get(playerId) || 0
-
-        if (nearby.state?.interact && now - lastInteract > 500) {
-          ctx.state.interactionCooldown.set(playerId, now)
-          ctx.state.interactionCount++
-
-          const messages = [
-            'Hello there!',
-            'You found the interact button!',
-            'Nice to meet you!',
-            'This button works!',
-            `Interacted ${ctx.state.interactionCount} times total`
-          ]
-          const msg = messages[ctx.state.interactionCount % messages.length]
-
-          ctx.players.send(playerId, {
-            type: 'interact_response',
-            message: msg,
-            count: ctx.state.interactionCount
-          })
-
-          ctx.network.broadcast({
-            type: 'interact_effect',
-            position: ctx.entity.position,
-            playerId: playerId
-          })
-        }
-      })
+      ctx.physics.setInteractable(3.5)
     },
 
-    teardown(ctx) {
-      ctx.state.interactionCooldown?.clear()
-    },
-
-    onMessage(ctx, msg) {
-      if (msg.type === 'player_leave') {
-        ctx.state.interactionCooldown?.delete(msg.playerId)
-      }
+    onInteract(ctx, player) {
+      ctx.state.interactionCount++
+      const messages = [
+        'Hello there!',
+        'You found the interact button!',
+        'Nice to meet you!',
+        'This button works!',
+        `Interacted ${ctx.state.interactionCount} times total`
+      ]
+      const msg = messages[ctx.state.interactionCount % messages.length]
+      ctx.players.send(player.id, { type: 'interact_response', message: msg, count: ctx.state.interactionCount })
+      ctx.network.broadcast({ type: 'interact_effect', position: ctx.entity.position, playerId: player.id })
     }
   },
 
@@ -60,8 +28,7 @@ export default {
     setup(engine) {
       this._lastMessage = null
       this._messageExpire = 0
-      this._showingInteract = false
-      this._isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)
+      this._canInteract = false
       this._wasRegistered = false
     },
 
@@ -70,86 +37,37 @@ export default {
       const pos = ent?.position
       const local = engine.client?.state?.players?.find(p => p.id === engine.playerId)
       if (!pos || !local?.position) {
-        if (this._wasRegistered) {
-          engine.mobileControls?.unregisterInteractable(ent?.id || 'interactable')
-          this._wasRegistered = false
-        }
+        if (this._wasRegistered) { engine.mobileControls?.unregisterInteractable(this._wasRegistered); this._wasRegistered = false }
         return
       }
-
-      const dx = pos[0] - local.position[0]
-      const dy = pos[1] - local.position[1]
-      const dz = pos[2] - local.position[2]
-      const dist = Math.sqrt(dx * dx + dy * dy + dz * dz)
-      const canInteract = dist < 3.5
-
-      if (canInteract && !this._wasRegistered) {
-        engine.mobileControls?.registerInteractable(ent.id, 'INTERACT')
-        this._wasRegistered = ent.id
-      } else if (!canInteract && this._wasRegistered) {
-        engine.mobileControls?.unregisterInteractable(this._wasRegistered)
-        this._wasRegistered = false
-      }
-
+      const dx = pos[0]-local.position[0], dy = pos[1]-local.position[1], dz = pos[2]-local.position[2]
+      const canInteract = dx*dx+dy*dy+dz*dz < 3.5*3.5
+      if (canInteract && !this._wasRegistered) { engine.mobileControls?.registerInteractable(ent.id, 'INTERACT'); this._wasRegistered = ent.id }
+      else if (!canInteract && this._wasRegistered) { engine.mobileControls?.unregisterInteractable(this._wasRegistered); this._wasRegistered = false }
       this._canInteract = canInteract
     },
 
     teardown(engine) {
-      if (this._wasRegistered) {
-        engine.mobileControls?.unregisterInteractable('interactable')
-        this._wasRegistered = false
-      }
-    },
-
-    onInput(input, engine) {
-      if (input.interact && !this._wasInteracting) {
-        this._showingInteract = true
-        this._messageExpire = Date.now() + 2000
-      }
-      this._wasInteracting = input.interact
+      if (this._wasRegistered) { engine.mobileControls?.unregisterInteractable(this._wasRegistered); this._wasRegistered = false }
     },
 
     onEvent(payload, engine) {
-      if (payload.type === 'interact_response') {
-        this._lastMessage = payload.message
-        this._messageExpire = Date.now() + 3000
-      }
-      if (payload.type === 'interact_effect') {
-        this._lastMessage = 'Someone interacted!'
-        this._messageExpire = Date.now() + 1500
-      }
+      if (payload.type === 'interact_response') { this._lastMessage = payload.message; this._messageExpire = Date.now() + 3000 }
+      if (payload.type === 'interact_effect') { this._lastMessage = 'Someone interacted!'; this._messageExpire = Date.now() + 1500 }
     },
 
     render(ctx) {
       const h = ctx.h
       const pos = ctx.entity.position
       if (!h || !pos) return { position: pos }
-
       const ui = []
-
       if (this._lastMessage && Date.now() < this._messageExpire) {
-        const timeLeft = (this._messageExpire - Date.now()) / 3000
-        const opacity = Math.min(1, timeLeft * 2)
-        ui.push(
-          h('div', {
-            style: `position:fixed;top:30%;left:50%;transform:translate(-50%,-50%);padding:16px 32px;background:rgba(0,0,0,0.8);border-radius:12px;color:#0f0;font-weight:bold;font-size:20px;text-align:center;border:2px solid #0f0;opacity:${opacity}`
-          }, this._lastMessage)
-        )
+        const opacity = Math.min(1, ((this._messageExpire - Date.now()) / 3000) * 2)
+        ui.push(h('div', { style: `position:fixed;top:30%;left:50%;transform:translate(-50%,-50%);padding:16px 32px;background:rgba(0,0,0,0.8);border-radius:12px;color:#0f0;font-weight:bold;font-size:20px;text-align:center;border:2px solid #0f0;opacity:${opacity}` }, this._lastMessage))
       }
-
       const custom = { ...ctx.entity.custom }
-      if (this._canInteract) {
-        custom.glow = true
-        custom.glowColor = 0x00ff88
-        custom.glowIntensity = 0.5
-      }
-
-      return {
-        position: pos,
-        rotation: ctx.entity.rotation,
-        custom,
-        ui: ui.length > 0 ? h('div', null, ...ui) : null
-      }
+      if (this._canInteract) { custom.glow = true; custom.glowColor = 0x00ff88; custom.glowIntensity = 0.5 }
+      return { position: pos, rotation: ctx.entity.rotation, custom, ui: ui.length > 0 ? h('div', null, ...ui) : null }
     }
   }
 }

package/client/app.js

@@ -1,5 +1,6 @@
 import * as THREE from 'three'
 import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js'
+import { DRACOLoader } from 'three/addons/loaders/DRACOLoader.js'
 import { VRMLoaderPlugin, VRMUtils } from '@pixiv/three-vrm'
 import { PhysicsNetworkClient, InputHandler, MSG } from '/src/index.client.js'
 import { createElement, applyDiff } from 'webjsx'
@@ -657,6 +658,9 @@ ground.receiveShadow = true
 scene.add(ground)
 
 const gltfLoader = new GLTFLoader()
+const dracoLoader = new DRACOLoader()
+dracoLoader.setDecoderPath('https://esm.sh/v135/three@0.171.0/examples/jsm/libs/draco/')
+gltfLoader.setDRACOLoader(dracoLoader)
 gltfLoader.register((parser) => new VRMLoaderPlugin(parser))
 const playerMeshes = new Map()
 const playerAnimators = new Map()
@@ -1154,12 +1158,10 @@ function startInputLoop() {
     const input = inputHandler.getInput()
     latestInput = input
 
-    if (input.editToggle && !cam.getEditMode()) {
-      cam.setEditMode(true)
-      console.log('[EditMode] Enabled')
-    } else if (!input.editToggle && cam.getEditMode() && inputHandler.editModeCooldown === false) {
-      cam.setEditMode(false)
-      console.log('[EditMode] Disabled')
+    const wantsEdit = !!input.editToggle
+    if (wantsEdit !== cam.getEditMode()) {
+      cam.setEditMode(wantsEdit)
+      console.log('[EditMode]', wantsEdit ? 'Enabled' : 'Disabled')
     }
 
     if (input.yaw !== undefined) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "spoint",
-  "version": "0.1.16",
+  "version": "0.1.18",
   "description": "Physics and netcode SDK for multiplayer game servers",
   "type": "module",
   "main": "src/index.js",

package/src/apps/AppContext.js

@@ -40,6 +40,7 @@ export class AppContext {
     const ent = this._entity
     const runtime = this._runtime
     return {
+      setInteractable: (radius = 3) => { ent._interactable = true; ent._interactRadius = radius },
       setStatic: (v) => { ent.bodyType = v ? 'static' : ent.bodyType },
       setDynamic: (v) => { ent.bodyType = v ? 'dynamic' : ent.bodyType },
       setKinematic: (v) => { ent.bodyType = v ? 'kinematic' : ent.bodyType },

package/src/apps/AppRuntime.js

@@ -13,7 +13,7 @@ export class AppRuntime {
     this.currentTick = 0; this.deltaTime = 0; this.elapsed = 0
     this._playerManager = c.playerManager || null; this._physics = c.physics || null; this._physicsIntegration = c.physicsIntegration || null
     this._connections = c.connections || null; this._stageLoader = c.stageLoader || null
-    this._nextEntityId = 1; this._appDefs = new Map(); this._timers = new Map()
+    this._nextEntityId = 1; this._appDefs = new Map(); this._timers = new Map(); this._interactCooldowns = new Map()
     this._hotReload = new HotReloadQueue(this)
     this._eventBus = c.eventBus || new EventBus()
     this._eventLog = c.eventLog || null
@@ -124,7 +124,7 @@ export class AppRuntime {
       const ctx = this.contexts.get(entityId); if (!ctx) continue
       this._safeCall(appDef.server || appDef, 'update', [ctx, dt], `update(${entityId})`)
     }
-    this._tickTimers(dt); this._spatialSync(); this._tickCollisions()
+    this._tickTimers(dt); this._spatialSync(); this._tickCollisions(); this._tickInteractables()
   }
 
   _encodeEntity(id, e) {
@@ -183,6 +183,27 @@ export class AppRuntime {
     }
   }
 
+  _tickInteractables() {
+    const now = Date.now()
+    for (const e of this.entities.values()) {
+      if (!e._interactable) continue
+      const players = this.getPlayers()
+      for (const p of players) {
+        const pp = p.state?.position; if (!pp) continue
+        const dx = pp[0]-e.position[0], dy = pp[1]-e.position[1], dz = pp[2]-e.position[2]
+        if (dx*dx+dy*dy+dz*dz > e._interactRadius**2) continue
+        const key = `${e.id}:${p.id}`
+        const last = this._interactCooldowns.get(key) || 0
+        if (p.lastInput?.interact && now - last > 500) {
+          this._interactCooldowns.set(key, now)
+          this.fireEvent(e.id, 'onInteract', p)
+          const bus = this._eventBus.scope ? this._eventBus : null
+          if (bus) bus.emit(`interact.${e.id}`, { player: p, entity: e })
+        }
+      }
+    }
+  }
+
   _colR(c) { return !c ? 0 : c.type === 'sphere' ? (c.radius||1) : c.type === 'capsule' ? Math.max(c.radius||0.5,(c.height||1)/2) : c.type === 'box' ? Math.max(...(c.size||c.halfExtents||[1,1,1])) : 1 }
   setPlayerManager(pm) { this._playerManager = pm }
   setStageLoader(sl) { this._stageLoader = sl }

package/src/client/InputHandler.js

@@ -18,6 +18,8 @@ export class InputHandler {
     this.menuCooldown = false
     this.mobileControls = null
     this.mobileInput = null
+    this._editActive = false
+    this._pWasDown = false
     this.editModeCooldown = false
     this.lastEditModeToggle = 0
 
@@ -123,12 +125,12 @@ export class InputHandler {
 
     const now = Date.now()
     const pPressed = this.keys.get('p') || false
-    if (pPressed && !this.editModeCooldown && now - this.lastEditModeToggle > 200) {
-      this.editModeCooldown = true
+    if (pPressed && !this._pWasDown && now - this.lastEditModeToggle > 200) {
+      this._editActive = !this._editActive
       this.lastEditModeToggle = now
-    } else if (!pPressed) {
-      this.editModeCooldown = false
     }
+    this._pWasDown = pPressed
+    this.editModeCooldown = this._editActive
 
     return {
       forward: this.keys.get('w') || this.keys.get('arrowup') || false,

package/src/client/MessageHandler.js

@@ -74,7 +74,7 @@ export class MessageHandler {
 
   _handleHeartbeat(payload) {
     if (this._smoothInterp) {
-      this._smoothInterp.updateRTT(payload.pingTime || 0, Date.now())
+      this._smoothInterp.updateRTT(payload.timestamp || 0, Date.now())
     }
   }