Real-time Synchronization

User A Device                 Reflector Server              User B Device
┌─────────────┐              ┌─────────────┐              ┌─────────────┐
│    View A   │              │             │              │    View B   │
│     ↕       │              │   Orders    │              │     ↕       │
│   Model A   │ ←── Events ──│   Events    │── Events ──→ │   Model B   │
│ (Teatime VM)│              │             │              │ (Teatime VM)│
└─────────────┘              └─────────────┘              └─────────────┘

class CounterModel extends Multisynq.Model {
    init() {
        this.count = 0;
        
        // Subscribe to events from any view
        this.subscribe(this.sessionId, "increment", this.handleIncrement);
        this.subscribe(this.sessionId, "reset", this.handleReset);
    }
    
    handleIncrement() {
        // This runs identically on every user's device
        this.count += 1;
        
        // Notify all views of the change
        this.publish(this.sessionId, "countChanged", this.count);
    }
    
    handleReset() {
        this.count = 0;
        this.publish(this.sessionId, "countChanged", this.count);
    }
}

class CounterView extends Multisynq.View {
    constructor(model) {
        super(model);
        
        // Listen for model changes
        this.subscribe(this.sessionId, "countChanged", this.updateDisplay);
        
        // Set up UI event handlers
        this.setupButtons();
        
        // Display initial state
        this.updateDisplay(model.count);
    }
    
    setupButtons() {
        document.getElementById("increment").onclick = () => {
            // Send event to model (will sync to all users)
            this.publish(this.sessionId, "increment");
        };
        
        document.getElementById("reset").onclick = () => {
            this.publish(this.sessionId, "reset");
        };
    }
    
    updateDisplay(count) {
        document.getElementById("counter").textContent = count;
    }
}

class ChatModel extends Multisynq.Model {
    init() {
        this.messages = [];
        this.subscribe(this.sessionId, "sendMessage", this.addMessage);
    }
    
    addMessage({ text, username }) {
        // Deterministic ID generation
        const message = {
            id: this.random().toString(),  // Synchronized random
            text: text,
            username: username,
            timestamp: this.now()          // Synchronized time
        };
        
        this.messages.push(message);
        this.publish(this.sessionId, "messagesUpdated", this.messages);
    }
}

class CursorModel extends Multisynq.Model {
    init() {
        this.cursors = new Map();
        this.subscribe(this.sessionId, "view-join", this.userJoined);
        this.subscribe(this.sessionId, "view-exit", this.userLeft);
        this.subscribe(this.sessionId, "cursorMove", this.updateCursor);
    }
    
    userJoined(viewId) {
        this.cursors.set(viewId, { x: 0, y: 0, color: this.getRandomColor() });
        this.publish(this.sessionId, "cursorsChanged", this.getCursorsArray());
    }
    
    userLeft(viewId) {
        this.cursors.delete(viewId);
        this.publish(this.sessionId, "cursorsChanged", this.getCursorsArray());
    }
    
    updateCursor({ viewId, x, y }) {
        if (this.cursors.has(viewId)) {
            this.cursors.get(viewId).x = x;
            this.cursors.get(viewId).y = y;
            this.publish(this.sessionId, "cursorsChanged", this.getCursorsArray());
        }
    }
    
    getRandomColor() {
        const colors = ['red', 'blue', 'green', 'purple', 'orange'];
        return colors[Math.floor(this.random() * colors.length)];
    }
    
    getCursorsArray() {
        return Array.from(this.cursors.entries()).map(([viewId, cursor]) => ({
            viewId,
            ...cursor
        }));
    }
}

class GameModel extends Multisynq.Model {
    init() {
        this.startTime = this.now(); // Synchronized start time
        this.gameLoop();
    }
    
    gameLoop() {
        const currentTime = this.now();
        const elapsedTime = currentTime - this.startTime;
        
        // Game logic based on synchronized time
        this.updateGameState(elapsedTime);
        
        // Schedule next update
        this.future(16).gameLoop(); // ~60 FPS
    }
}

class LootModel extends Multisynq.Model {
    init() {
        this.subscribe(this.sessionId, "openChest", this.generateLoot);
    }
    
    generateLoot() {
        // Every user gets the same "random" result
        const lootRoll = this.random();
        
        let loot;
        if (lootRoll < 0.1) {
            loot = "legendary";
        } else if (lootRoll < 0.3) {
            loot = "rare";
        } else {
            loot = "common";
        }
        
        this.publish(this.sessionId, "lootReceived", loot);
    }
}

class TimerModel extends Multisynq.Model {
    init() {
        this.timeLeft = 60; // 60 seconds
        this.startCountdown();
    }
    
    startCountdown() {
        this.publish(this.sessionId, "timerUpdate", this.timeLeft);
        
        if (this.timeLeft > 0) {
            this.timeLeft--;
            // Schedule next tick in 1 second
            this.future(1000).startCountdown();
        } else {
            this.publish(this.sessionId, "timerExpired");
        }
    }
}

class NetworkView extends Multisynq.View {
    constructor(model) {
        super(model);
        this.isConnected = true;
    }
    
    update(time) {
        // Check connection status (this is automatic)
        const connected = this.session && this.session.view;
        
        if (connected !== this.isConnected) {
            this.isConnected = connected;
            this.updateConnectionIndicator();
        }
    }
    
    updateConnectionIndicator() {
        const indicator = document.getElementById("connection-status");
        indicator.textContent = this.isConnected ? "Connected" : "Reconnecting...";
        indicator.className = this.isConnected ? "connected" : "disconnected";
    }
}

// Use the Widget Dock for easy multi-device testing
Multisynq.Session.join({
    apiKey: "your-api-key",
    appId: "com.example.test",
    model: TestModel,
    view: TestView
}).then(session => {
    // Show QR code for joining from other devices
    Multisynq.App.makeWidgetDock();
});

Multisynq.Session.join({
    // ... other options
    debug: ["session", "messages", "events", "ticks"]
});