Making a collaborative Color Grid

npx create-next-app@latest colorgrid --ts --tailwind
cd colorgrid
npm install @y-sweet/sdk @y-sweet/react

npm run dev

import { getOrCreateDocAndToken } from '@y-sweet/sdk'
import { YDocProvider } from '@y-sweet/react'
import { randomId } from '@/lib/utils'
import { ColorGrid } from './ColorGrid'
 
// *****************************************************
// ** TODO: Replace this with your connection string **
// *****************************************************
// For simplicity, we are hard-coding the connection string in the
// file. In a real app, you should instead pass this in through a
// secret store or environment variable.
const CONNECTION_STRING = "[paste your connection string]"
 
export default function Home({ searchParams }: { searchParams: { doc: string } }) {
  const docId = searchParams.doc ?? randomId()
  async function getClientToken() {
    'use server'
    // In a production application, you'd want to authenticate the user and
    // check that they have access to the given doc.
    return await getOrCreateDocAndToken(CONNECTION_STRING, docId)
  }
  return (
    <YDocProvider docId={docId} setQueryParam="doc" authEndpoint={getClientToken}>
      <ColorGrid />
    </YDocProvider>
  )
}

'use client'
 
import { useMap } from '@y-sweet/react'
 
const GRID_SIZE = 10
const DEFAULT_COLOR = 'white'
// For simplicty, we'll just add one color option
// We'll add the color picker in the next step
const COLOR_SELECTIONS = ['black']
 
export function ColorGrid() {
  // Initialize our Color Grid as an object of cell positions that map to
  // color values. `useMap` returns a Y.Map, and subscribes the component
  // to changes in that map.
  const items = useMap<string>('colorgrid')
 
  return (
    <div className="space-y-3 p-4 lg:p-8">
      <div>Color Grid</div>
      <table>
        <tbody>
          {Array.from({ length: GRID_SIZE }, (x, i) => (
            <tr key={i}>
              {Array.from({ length: GRID_SIZE }, (x, j) => {
                // Turn the cell position as a string.
                const key = `${i},${j}`
                const itemColor = items!.get(key)
                return (
                  <td key={key}>
                    <div
                      className="w-8 h-8 cursor-pointer"
                      style={{ backgroundColor: itemColor || DEFAULT_COLOR }}
                      onClick={() => items!.set(key, COLOR_SELECTIONS[0])}
                    />
                  </td>
                )
              })}
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  )
}

'use client'
 
import { useMap } from '@y-sweet/react'
import { useState } from 'react'
 
const GRID_SIZE = 10
const COLOR_SELECTIONS = ['#500724', '#831843', '#9d174d', '#be185d', '#db2777', '#f472b6', '#f9a8d4', null]
const DEFAULT_COLOR = 'white'
 
export function ColorGrid() {
  // Initialize our Color Grid as an object of cell positions that map to
  // color values. `useMap` returns a Y.Map, and subscribes the component
  // to changes in that map.
  const items = useMap<string>('colorgrid')
  // Keep the selected color as local state.
  const [selectedColor, setSelectedColor] = useState<string | null>(COLOR_SELECTIONS[0])
 
  return (
    <div className="space-y-3 p-4 lg:p-8">
      <div>Color Grid</div>
      <div className="space-x-2 flex flex-row">
        {COLOR_SELECTIONS.map((c) => (
          <div
            key={c}
            className={`w-8 h-8 cursor-pointer ring-2 ring-offset-1 ${
              c === selectedColor ? 'ring-pink-100' : 'ring-transparent'
            }`}
            style={{ backgroundColor: c ?? DEFAULT_COLOR }}
            onClick={() => setSelectedColor(c)}
          />
        ))}
      </div>
      <table>
        <tbody>
          {Array.from({ length: GRID_SIZE }, (x, i) => (
            <tr key={i}>
              {Array.from({ length: GRID_SIZE }, (x, j) => {
                // Turn the cell position as a string.
                const key = `${i},${j}`
                const item = items!.get(key)
                return (
                  <td key={key}>
                    <div
                      className="w-8 h-8 cursor-pointer"
                      style={{ backgroundColor: item || DEFAULT_COLOR }}
                      onClick={() => {
                        if (selectedColor === null) {
                          items!.delete(key)
                        } else {
                          items!.set(key, selectedColor)
                        }
                      }}
                    />
                  </td>
                )
              })}
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  )
}