components SetupPhase.tsx

0% Statements 0/102

0% Branches 0/1

0% Functions 0/1

0% Lines 0/102

Press n or j to go to the next uncovered block, b, p or k for the previous block.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103

'use client'

import { useGameMode } from '@/contexts/GameModeContext'
import { css } from '../../../../styled-system/css'
import { useYjsDemo } from '../Provider'

export function SetupPhase() {
  const { activePlayers } = useGameMode()
  const { startGame } = useYjsDemo()

  const canStart = activePlayers.size >= 1

  return (
    <div className={containerStyle}>
      <div className={titleStyle}>Collaborative Grid Demo</div>
      <div className={descriptionStyle}>
        Click on the grid to add colored cells. See other players&apos; clicks in real-time using
        Yjs!
      </div>

      <div className={infoBoxStyle}>
        <div className={infoTitleStyle}>How it works:</div>
        <ul className={listStyle}>
          <li>Each player gets a unique color</li>
          <li>Click cells to claim them</li>
          <li>State is synchronized with Yjs CRDTs</li>
          <li>No traditional server validation - Yjs handles conflicts</li>
          <li>All players see updates in real-time</li>
        </ul>
      </div>

      <button
        type="button"
        onClick={startGame}
        disabled={!canStart}
        className={css({
          padding: '16px 32px',
          fontSize: '18px',
          fontWeight: 'bold',
          backgroundColor: canStart ? 'blue.500' : 'gray.300',
          color: 'white',
          border: 'none',
          borderRadius: '8px',
          cursor: canStart ? 'pointer' : 'not-allowed',
          transition: 'all 0.2s',
          _hover: canStart ? { backgroundColor: 'blue.600', transform: 'scale(1.05)' } : {},
        })}
      >
        {canStart ? 'Start Demo' : 'Select at least 1 player'}
      </button>
    </div>
  )
}

const containerStyle = css({
  display: 'flex',
  flexDirection: 'column',
  alignItems: 'center',
  justifyContent: 'center',
  padding: { base: '20px', md: '40px' },
  gap: '24px',
  minHeight: '60vh',
})

const titleStyle = css({
  fontSize: { base: '28px', md: '36px' },
  fontWeight: 'bold',
  color: 'blue.600',
  textAlign: 'center',
})

const descriptionStyle = css({
  fontSize: { base: '16px', md: '18px' },
  color: 'gray.700',
  textAlign: 'center',
  maxWidth: '600px',
})

const infoBoxStyle = css({
  backgroundColor: 'blue.50',
  borderRadius: '12px',
  padding: '20px',
  maxWidth: '500px',
  border: '2px solid',
  borderColor: 'blue.200',
})

const infoTitleStyle = css({
  fontSize: '18px',
  fontWeight: 'bold',
  color: 'blue.700',
  marginBottom: '12px',
})

const listStyle = css({
  fontSize: '14px',
  color: 'gray.700',
  paddingLeft: '20px',
  '& li': {
    marginBottom: '8px',
  },
})