@thewhateverapp/tile-sdk 0.13.37 → 0.14.1

package/dist/scene/timeline/TimelineExecutor.d.ts

@@ -0,0 +1,6 @@
+import type { SceneContextValue } from '../SceneContext';
+/**
+ * Hook to execute timeline events
+ */
+export declare function useTimelineExecutor(context: SceneContextValue): void;
+//# sourceMappingURL=TimelineExecutor.d.ts.map

package/dist/scene/timeline/TimelineExecutor.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TimelineExecutor.d.ts","sourceRoot":"","sources":["../../../src/scene/timeline/TimelineExecutor.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,iBAAiB,EAAe,MAAM,iBAAiB,CAAC;AAItE;;GAEG;AACH,wBAAgB,mBAAmB,CAAC,OAAO,EAAE,iBAAiB,QAsC7D"}

package/dist/scene/timeline/TimelineExecutor.js

@@ -0,0 +1,236 @@
+'use client';
+import { useGameLoop } from '../../pixi';
+import { getEasing } from '@thewhateverapp/scene-sdk';
+/**
+ * Hook to execute timeline events
+ */
+export function useTimelineExecutor(context) {
+    const { spec, timeline, entities, camera, emitEvent, spawnEntity, bpm } = context;
+    const timelineEvents = spec.timeline ?? [];
+    useGameLoop((delta) => {
+        const state = timeline.current;
+        const elapsedMs = state.elapsedMs;
+        const currentBeat = state.currentBeat;
+        // Process pending timeline events
+        while (state.nextEventIndex < timelineEvents.length) {
+            const event = timelineEvents[state.nextEventIndex];
+            // Calculate event trigger time
+            let triggerTime;
+            if (event.atBeat !== undefined) {
+                triggerTime = beatToMs(event.atBeat, bpm);
+            }
+            else if (event.atTimeMs !== undefined) {
+                triggerTime = event.atTimeMs;
+            }
+            else {
+                // No timing specified, skip
+                state.nextEventIndex++;
+                continue;
+            }
+            // Check if event should fire
+            if (elapsedMs >= triggerTime) {
+                executeEvent(event, context);
+                state.nextEventIndex++;
+            }
+            else {
+                // Events are ordered, so we can stop here
+                break;
+            }
+        }
+        // Update active tweens
+        updateTweens(state.activeTweens, elapsedMs, context);
+    });
+}
+/**
+ * Convert beat number to milliseconds
+ */
+function beatToMs(beat, bpm) {
+    return (beat / (bpm / 60)) * 1000;
+}
+/**
+ * Execute a timeline event
+ */
+function executeEvent(event, context) {
+    const { entities, camera, timeline, emitEvent, spawnEntity } = context;
+    switch (event.type) {
+        case 'tween': {
+            const targetEntity = event.target ? entities.current.get(event.target) : null;
+            if (!targetEntity)
+                break;
+            const params = event.params;
+            const startValue = params.from ?? getPropertyValue(targetEntity, params.property);
+            const endValue = params.to;
+            const duration = params.duration;
+            // Add to active tweens
+            timeline.current.activeTweens.push({
+                targetId: event.target,
+                property: params.property,
+                startValue,
+                endValue,
+                startTime: timeline.current.elapsedMs,
+                duration,
+                easing: params.easing ?? 'linear',
+            });
+            break;
+        }
+        case 'pulse': {
+            const targetEntity = event.target ? entities.current.get(event.target) : null;
+            if (!targetEntity)
+                break;
+            const params = event.params;
+            const originalScale = targetEntity.scaleX;
+            const targetScale = params.scale ?? 1.2;
+            const duration = params.durationMs ?? (params.durationBeats ? beatToMs(params.durationBeats, context.bpm) : 200);
+            // Create scale up tween
+            timeline.current.activeTweens.push({
+                targetId: event.target,
+                property: 'scaleX',
+                startValue: originalScale,
+                endValue: originalScale * targetScale,
+                startTime: timeline.current.elapsedMs,
+                duration: duration / 2,
+                easing: 'easeOut',
+            });
+            // Create scale down tween (delayed)
+            setTimeout(() => {
+                timeline.current.activeTweens.push({
+                    targetId: event.target,
+                    property: 'scaleX',
+                    startValue: originalScale * targetScale,
+                    endValue: originalScale,
+                    startTime: timeline.current.elapsedMs,
+                    duration: duration / 2,
+                    easing: 'easeIn',
+                });
+            }, duration / 2);
+            break;
+        }
+        case 'colorSwap': {
+            const targetEntity = event.target ? entities.current.get(event.target) : null;
+            if (!targetEntity)
+                break;
+            targetEntity.fill = event.params.to;
+            break;
+        }
+        case 'cameraShake': {
+            const params = event.params;
+            const duration = params.durationMs ?? (params.durationBeats ? beatToMs(params.durationBeats, context.bpm) : 200);
+            camera.current.shakeIntensity = params.strength;
+            camera.current.shakeTimeRemaining = duration;
+            break;
+        }
+        case 'spawn': {
+            const params = event.params;
+            if (params.prefabId) {
+                const pos = params.at ?? { x: 0, y: 0 };
+                spawnEntity(params.prefabId, pos.x, pos.y);
+            }
+            break;
+        }
+        case 'toggle': {
+            const targetEntity = event.target ? entities.current.get(event.target) : null;
+            if (!targetEntity)
+                break;
+            const property = event.params.property ?? 'visible';
+            if (property === 'visible') {
+                targetEntity.visible = event.params.value ?? !targetEntity.visible;
+            }
+            break;
+        }
+        case 'set': {
+            const targetEntity = event.target ? entities.current.get(event.target) : null;
+            if (!targetEntity)
+                break;
+            setPropertyValue(targetEntity, event.params.path, event.params.value);
+            break;
+        }
+        case 'emit': {
+            emitEvent(event.params.event, event.params.payload);
+            break;
+        }
+    }
+}
+/**
+ * Update active tweens
+ */
+function updateTweens(tweens, elapsedMs, context) {
+    const { entities } = context;
+    const completedIndices = [];
+    for (let i = 0; i < tweens.length; i++) {
+        const tween = tweens[i];
+        const targetEntity = entities.current.get(tween.targetId);
+        if (!targetEntity) {
+            completedIndices.push(i);
+            continue;
+        }
+        const elapsed = elapsedMs - tween.startTime;
+        const progress = Math.min(elapsed / tween.duration, 1);
+        // Apply easing
+        const easingFn = getEasing(tween.easing);
+        const easedProgress = easingFn ? easingFn(progress) : progress;
+        // Interpolate value
+        const value = tween.startValue + (tween.endValue - tween.startValue) * easedProgress;
+        // Set property
+        setPropertyValue(targetEntity, tween.property, value);
+        // Check if complete
+        if (progress >= 1) {
+            completedIndices.push(i);
+        }
+    }
+    // Remove completed tweens (in reverse order to preserve indices)
+    for (let i = completedIndices.length - 1; i >= 0; i--) {
+        tweens.splice(completedIndices[i], 1);
+    }
+}
+/**
+ * Get a property value from an entity
+ */
+function getPropertyValue(entity, path) {
+    switch (path) {
+        case 'x':
+            return entity.x;
+        case 'y':
+            return entity.y;
+        case 'rotation':
+            return entity.rotation;
+        case 'scaleX':
+            return entity.scaleX;
+        case 'scaleY':
+            return entity.scaleY;
+        case 'alpha':
+            return entity.alpha;
+        default:
+            return 0;
+    }
+}
+/**
+ * Set a property value on an entity
+ */
+function setPropertyValue(entity, path, value) {
+    switch (path) {
+        case 'x':
+            entity.x = value;
+            break;
+        case 'y':
+            entity.y = value;
+            break;
+        case 'rotation':
+            entity.rotation = value;
+            break;
+        case 'scaleX':
+            entity.scaleX = value;
+            break;
+        case 'scaleY':
+            entity.scaleY = value;
+            break;
+        case 'alpha':
+            entity.alpha = value;
+            break;
+        case 'visible':
+            entity.visible = value;
+            break;
+        case 'fill':
+            entity.fill = value;
+            break;
+    }
+}

package/dist/spec/schema.d.ts

@@ -28,10 +28,10 @@ declare const ActionSchema: z.ZodObject<{
     $action: z.ZodEnum<["emit", "setState", "sequence", "openTile", "openFull", "navigate", "dismiss", "fx"]>;
     payload: z.ZodOptional<z.ZodRecord<z.ZodString, z.ZodUnknown>>;
 }, "strip", z.ZodTypeAny, {
-    $action: "navigate" | "setState" | "emit" | "sequence" | "openTile" | "openFull" | "dismiss" | "fx";
+    $action: "navigate" | "setState" | "emit" | "fx" | "sequence" | "openTile" | "openFull" | "dismiss";
     payload?: Record<string, unknown> | undefined;
 }, {
-    $action: "navigate" | "setState" | "emit" | "sequence" | "openTile" | "openFull" | "dismiss" | "fx";
+    $action: "navigate" | "setState" | "emit" | "fx" | "sequence" | "openTile" | "openFull" | "dismiss";
     payload?: Record<string, unknown> | undefined;
 }>;
 declare const PropValueSchema: z.ZodType<unknown>;
@@ -347,11 +347,11 @@ export declare const OverlaySpecSchema: z.ZodObject<{
             offsetMs: z.ZodOptional<z.ZodNumber>;
             scale: z.ZodOptional<z.ZodNumber>;
         }, "strip", z.ZodTypeAny, {
-            offsetMs?: number | undefined;
             scale?: number | undefined;
-        }, {
             offsetMs?: number | undefined;
+        }, {
             scale?: number | undefined;
+            offsetMs?: number | undefined;
         }>>;
         freezeWhen: z.ZodOptional<z.ZodType<unknown, z.ZodTypeDef, unknown>>;
     }, "strip", z.ZodTypeAny, {
@@ -360,8 +360,8 @@ export declare const OverlaySpecSchema: z.ZodObject<{
         toleranceMs: number;
         onSeek: "recompute";
         transform?: {
-            offsetMs?: number | undefined;
             scale?: number | undefined;
+            offsetMs?: number | undefined;
         } | undefined;
         freezeWhen?: unknown;
     }, {
@@ -370,8 +370,8 @@ export declare const OverlaySpecSchema: z.ZodObject<{
         toleranceMs: number;
         onSeek: "recompute";
         transform?: {
-            offsetMs?: number | undefined;
             scale?: number | undefined;
+            offsetMs?: number | undefined;
         } | undefined;
         freezeWhen?: unknown;
     }>;
@@ -703,14 +703,14 @@ export declare const OverlaySpecSchema: z.ZodObject<{
     }, "strip", z.ZodTypeAny, {
         id: string;
         type: "realtime" | "keyspace" | "host";
-        channel: string;
         target: string;
+        channel: string;
         transform?: string | undefined;
     }, {
         id: string;
         type: "realtime" | "keyspace" | "host";
-        channel: string;
         target: string;
+        channel: string;
         transform?: string | undefined;
     }>, "many">>;
 }, "strip", z.ZodTypeAny, {
@@ -726,8 +726,8 @@ export declare const OverlaySpecSchema: z.ZodObject<{
         toleranceMs: number;
         onSeek: "recompute";
         transform?: {
-            offsetMs?: number | undefined;
             scale?: number | undefined;
+            offsetMs?: number | undefined;
         } | undefined;
         freezeWhen?: unknown;
     };
@@ -788,8 +788,8 @@ export declare const OverlaySpecSchema: z.ZodObject<{
     subscriptions?: {
         id: string;
         type: "realtime" | "keyspace" | "host";
-        channel: string;
         target: string;
+        channel: string;
         transform?: string | undefined;
     }[] | undefined;
 }, {
@@ -805,8 +805,8 @@ export declare const OverlaySpecSchema: z.ZodObject<{
         toleranceMs: number;
         onSeek: "recompute";
         transform?: {
-            offsetMs?: number | undefined;
             scale?: number | undefined;
+            offsetMs?: number | undefined;
         } | undefined;
         freezeWhen?: unknown;
     };
@@ -867,8 +867,8 @@ export declare const OverlaySpecSchema: z.ZodObject<{
     subscriptions?: {
         id: string;
         type: "realtime" | "keyspace" | "host";
-        channel: string;
         target: string;
+        channel: string;
         transform?: string | undefined;
     }[] | undefined;
 }>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@thewhateverapp/tile-sdk",
-  "version": "0.13.37",
+  "version": "0.14.1",
   "description": "SDK for building interactive tiles on The Whatever App platform",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
@@ -32,6 +32,10 @@
     "./templates/video": {
       "types": "./dist/templates/video/index.d.ts",
       "import": "./dist/templates/video/index.js"
+    },
+    "./scene": {
+      "types": "./dist/scene/index.d.ts",
+      "import": "./dist/scene/index.js"
     }
   },
   "files": [
@@ -60,12 +64,15 @@
   "author": "The Whatever App",
   "license": "MIT",
   "dependencies": {
+    "@thewhateverapp/scene-sdk": "^0.1.1",
+    "matter-js": "^0.19.0",
     "zod": "^3.22.0"
   },
   "peerDependencies": {
     "react": "^18.0.0",
     "@pixi/react": "^7.0.0",
-    "pixi.js": "^7.0.0"
+    "pixi.js": "^7.0.0",
+    "@pixi/filter-glow": "^5.0.0"
   },
   "peerDependenciesMeta": {
     "@pixi/react": {
@@ -73,10 +80,15 @@
     },
     "pixi.js": {
       "optional": true
+    },
+    "@pixi/filter-glow": {
+      "optional": true
     }
   },
   "devDependencies": {
+    "@pixi/filter-glow": "^5.0.0",
     "@pixi/react": "^7.1.2",
+    "@types/matter-js": "^0.19.0",
     "@types/node": "^20.0.0",
     "@types/react": "^18.2.48",
     "eslint": "^9.39.1",