Magical
Multiplayer
Data.

import { LarkDatabase } from '@lark-sh/client';

const db = new LarkDatabase('landing-page/checkboxes', {
  anonymous: true
});

// Subscribe to realtime updates
db.ref('boxes').on('value', (snapshot) => {
  const boxes = snapshot.val() || {};

  // Update each checkbox element
  for (let i = 0; i < 100; i++) {
    const el = document.getElementById(`box-${i}`);
    el.classList.toggle('checked', !!boxes[i]);
  }
});

// Toggle a checkbox on click
async function toggle(id) {
  const ref = db.ref(`boxes/${id}`);
  const snap = await ref.once();
  await ref.set(!snap.val());
}

import { useEffect, useState } from 'react';
import { LarkDatabase } from '@lark-sh/client';

const db = new LarkDatabase('landing-page/checkboxes', {
  anonymous: true
});

function Checkboxes() {
  const [boxes, setBoxes] = useState({});

  useEffect(() => {
    return db.ref('boxes').on('value', snap => {
      setBoxes(snap.val() || {});
    });
  }, []);

  const toggle = async (id) => {
    const ref = db.ref(`boxes/${id}`);
    const snap = await ref.once();
    await ref.set(!snap.val());
  };

  return (
    <div className="grid">
      {Array(100).fill(0).map((_, i) => (
        <div
          key={i}
          className={boxes[i] ? 'checked' : ''}
          onClick={() => toggle(i)}
        />
      ))}
    </div>
  );
}

{
  "rules": {
    "cursors": {
      ".volatile": true, // Fire-and-forget 20Hz!
      ".read": true,
      "$session_id": {
        ".write": true,
        ".validate": "newData.hasChildren(['x', 'y'])"
      }
    },
    "boxes": {
      ".read": true,
      "$index": {
        ".write": true,
        ".validate": "newData.isBoolean() && $index.matches(/^[0-9]+$/)"
      }
    }
  }
}