@kolkrabbi/kol-component 0.6.0 → 0.7.0

package/src/chess/apparatus/ChessBoard.jsx

@@ -0,0 +1,210 @@
+import { useMemo } from 'react'
+import { Chess } from 'chess.js'
+import { ChessPiece } from '../index.js'
+
+const FILES = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h']
+const PIECE_TYPE_MAP = {
+  p: 'pawn',
+  r: 'rook',
+  n: 'knight',
+  b: 'bishop',
+  q: 'queen',
+  k: 'king'
+}
+
+const BOARD_THEMES = {
+  'blue-gray': { light: '#E8EDF9', dark: '#B7C0D8' },
+  'gray': { light: '#EFEFEF', dark: '#A6A6A6' },
+  'green-white': { light: '#ffffff', dark: '#0a682a' },
+  'olive': { light: '#EFEED2', dark: '#779557' },
+  'dark': { light: '#4D4D51', dark: '#242427' },
+  'brown': { light: '#F0D9B5', dark: '#B58863' }
+}
+
+const buildBoardState = (fen) => {
+  const chess = new Chess()
+  if (fen) {
+    /* chess.js v1 load() returns void and THROWS on invalid FENs — and it
+     * validates playability (kings required), not renderability. Display
+     * states like the cleared board are legitimate here, so on throw we
+     * place the FEN's board portion piece-by-piece instead of reverting
+     * to the start position. */
+    try {
+      chess.load(fen)
+    } catch {
+      chess.clear()
+      const ranks = fen.split(' ')[0].split('/')
+      ranks.forEach((rank, r) => {
+        let file = 0
+        for (const ch of rank) {
+          if (/\d/.test(ch)) { file += Number(ch); continue }
+          const square = 'abcdefgh'[file] + (8 - r)
+          try {
+            chess.put({ type: ch.toLowerCase(), color: ch === ch.toLowerCase() ? 'b' : 'w' }, square)
+          } catch { /* unplaceable char — leave square empty */ }
+          file += 1
+        }
+      })
+    }
+  }
+  return chess.board()
+}
+
+const getSquareTone = (fileIndex, rankIndex) =>
+  (fileIndex + rankIndex) % 2 === 0 ? 'light' : 'dark'
+
+const getBoardSize = (size) => {
+  if (size === 'fluid') return '100%'
+  const sizeMap = {
+    mobile: '384px',
+    tablet: '520px',
+    desktop: '760px'
+  }
+  return sizeMap[size] || size
+}
+
+const getPieceSize = (size) => {
+  if (size === 'fluid') return '75%'
+  const sizeMap = {
+    sm: '44px',
+    md: '64px',
+    lg: '76px',
+    mobile: '40px',
+    tablet: '52px',
+    desktop: '76px'
+  }
+  return sizeMap[size] || sizeMap.lg
+}
+
+const ChessBoard = ({ fen, size = 'desktop', orientation = 'white', showPieces = true, lastMove = null, pieceSet = 'default', boardTheme = 'green-white' }) => {
+  const boardState = useMemo(() => buildBoardState(fen), [fen])
+  const isFluid = size === 'fluid'
+  const boardPixelSize = getBoardSize(size)
+  const piecePixelSize = getPieceSize(size)
+  const squarePixelSize = isFluid ? '100%' : `${parseInt(boardPixelSize) / 8}px`
+  const coordinatePaddingClass = size === 'mobile' ? 'p-1' : size === 'tablet' ? '!p-1.5' : 'p-2'
+  const coordinateTypographyClass = size === 'mobile' ? 'kol-helper-xxxs' : 'kol-helper-xs'
+  const rankIndices =
+    orientation === 'white'
+      ? [...Array(boardState.length).keys()]
+      : [...Array(boardState.length).keys()].reverse()
+  const fileIndices =
+    orientation === 'white'
+      ? [...Array(FILES.length).keys()]
+      : [...Array(FILES.length).keys()].reverse()
+
+  const filesForOrientation = orientation === 'white' ? FILES : [...FILES].reverse()
+  const ranksForOrientation =
+    orientation === 'white'
+      ? [...Array(8).keys()].map((i) => 8 - i)
+      : [...Array(8).keys()].map((i) => i + 1)
+
+  const theme = BOARD_THEMES[boardTheme] || BOARD_THEMES['green-white']
+
+  return (
+    <div className="chess-board-wrapper">
+      <div
+        className={`chess-board${isFluid ? ' chess-board--fluid' : ''}`}
+        style={isFluid ? undefined : { width: boardPixelSize, height: boardPixelSize }}
+      >
+        <div className="chess-board__grid">
+          {rankIndices.map((rankIndex) =>
+            fileIndices.map((fileIndex) => {
+              const square = boardState[rankIndex][fileIndex]
+              const tone = getSquareTone(fileIndex, rankIndex)
+              const coordinate = `${FILES[fileIndex]}${8 - rankIndex}`
+              const pieceType = square?.type ?? null
+              const pieceColor = square?.color === 'b' ? 'black' : 'white'
+              const pieceName = pieceType ? PIECE_TYPE_MAP[pieceType] : null
+
+              const isLastMoveSquare = lastMove && (coordinate === lastMove.from || coordinate === lastMove.to)
+
+              const squareClass =
+                tone === 'light'
+                  ? 'chess-square chess-square--light'
+                  : 'chess-square chess-square--dark'
+
+              const highlightClass = isLastMoveSquare ? 'chess-square--highlighted' : ''
+
+              const rankNum = 8 - rankIndex
+              const fileLetter = FILES[fileIndex]
+              const isDarkSquare = tone === 'dark'
+              const textColor = isDarkSquare ? 'text-white' : 'text-[#166534]'
+              const isFirstRank = rankNum === 1
+              const isFirstRankFromBlack = rankNum === 8
+              const isAFile = fileIndex === 0
+
+              const squareColor = tone === 'light' ? theme.light : theme.dark
+
+              return (
+                <div
+                  key={coordinate}
+                  className={`${squareClass} ${highlightClass}`}
+                  data-square={coordinate}
+                  style={{ backgroundColor: squareColor }}
+                >
+                  {showPieces && pieceName ? (
+                    <div className="relative z-10 flex items-center justify-center" style={{ width: squarePixelSize, height: squarePixelSize }}>
+                      <ChessPiece piece={pieceName} color={pieceColor} size={piecePixelSize} pieceSet={pieceSet} />
+                    </div>
+                  ) : null}
+
+                  {/* Coordinate labels - absolutely positioned to overlay on pieces */}
+                  <div className="absolute inset-0 pointer-events-none">
+                    {orientation === 'white' ? (
+                      // White orientation labels
+                      isFirstRank ? (
+                        coordinate === 'a1' ? (
+                          <div className={`${coordinatePaddingClass} flex justify-between w-full h-full`}>
+                            <div className={`flex items-start text-white ${coordinateTypographyClass} uppercase`}>
+                              <span>1</span>
+                            </div>
+                            <div className={`flex items-end text-white ${coordinateTypographyClass} uppercase`}>
+                              <span>A</span>
+                            </div>
+                          </div>
+                        ) : (
+                          <div className={`${coordinatePaddingClass} flex justify-end items-end ${textColor} ${coordinateTypographyClass} uppercase w-full h-full`}>
+                            <span>{fileLetter}</span>
+                          </div>
+                        )
+                      ) : isAFile ? (
+                        <div className={`${coordinatePaddingClass} flex justify-start items-start ${textColor} ${coordinateTypographyClass} uppercase w-full h-full`}>
+                          <span>{rankNum}</span>
+                        </div>
+                      ) : null
+                    ) : (
+                      // Black orientation labels (flipped)
+                      isFirstRankFromBlack ? (
+                        coordinate === 'a8' ? (
+                          <div className={`${coordinatePaddingClass} flex justify-between w-full h-full`}>
+                            <div className={`flex items-start text-white ${coordinateTypographyClass} uppercase`}>
+                              <span>8</span>
+                            </div>
+                            <div className={`flex items-end text-white ${coordinateTypographyClass} uppercase`}>
+                              <span>A</span>
+                            </div>
+                          </div>
+                        ) : (
+                          <div className={`${coordinatePaddingClass} flex justify-end items-end ${textColor} ${coordinateTypographyClass} uppercase w-full h-full`}>
+                            <span>{fileLetter}</span>
+                          </div>
+                        )
+                      ) : isAFile ? (
+                        <div className={`${coordinatePaddingClass} flex justify-start items-start ${textColor} ${coordinateTypographyClass} uppercase w-full h-full`}>
+                          <span>{rankNum}</span>
+                        </div>
+                      ) : null
+                    )}
+                  </div>
+                </div>
+              )
+            })
+          )}
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default ChessBoard

package/src/chess/apparatus/ChessBoardFullscreen.jsx

@@ -0,0 +1,49 @@
+import ChessBoard from './ChessBoard'
+import ChessSidebar from './ChessSidebar'
+
+const ChessBoardFullscreen = ({
+  boardProps = {},
+  sidebarProps = {},
+  wrapperClassName = '',
+  sidebarWidth = '400px'
+}) => {
+  const {
+    className: boardContainerClassName = '',
+    size: boardSize = 'desktop',
+    ...restBoardProps
+  } = boardProps
+
+  const {
+    className: sidebarClassName = 'w-full h-full bg-fg-04 text-auto',
+    size: sidebarSize = 'desktop',
+    variant: sidebarVariant = 'minimal',
+    ...restSidebarProps
+  } = sidebarProps
+
+  const rootClassName = ['relative w-full', wrapperClassName].filter(Boolean).join(' ')
+
+  return (
+    <div className={rootClassName} style={{ minHeight: '100dvh' }}>
+      <div
+        className={`flex h-full w-full items-center justify-center ${boardContainerClassName}`}
+        style={{ paddingRight: sidebarWidth, paddingLeft: 0, minHeight: '100dvh' }}
+      >
+        <ChessBoard size={boardSize} {...restBoardProps} />
+      </div>
+
+      <div
+        className="absolute inset-y-0 right-0 flex"
+        style={{ width: sidebarWidth }}
+      >
+        <ChessSidebar
+          size={sidebarSize}
+          variant={sidebarVariant}
+          className={`h-full w-full ${sidebarClassName}`}
+          {...restSidebarProps}
+        />
+      </div>
+    </div>
+  )
+}
+
+export default ChessBoardFullscreen

package/src/chess/apparatus/ChessBoardWithControls.jsx

@@ -0,0 +1,41 @@
+import { useChessControls, ChessControlsProvider } from '../context/ChessControlsContext'
+import ChessBoard from './ChessBoard'
+import AlternativeControlsMock from './AlternativeControlsMock'
+import PlaybackControls from './PlaybackControls'
+
+const ChessBoardView = () => {
+  const { snapshots, moveIndex, orientation, lastMove, pieceSet, boardTheme } = useChessControls()
+  return (
+    <ChessBoard
+      fen={snapshots[moveIndex]?.fen}
+      size="fluid"
+      orientation={orientation}
+      lastMove={lastMove}
+      pieceSet={pieceSet}
+      boardTheme={boardTheme}
+    />
+  )
+}
+
+const ChessBoardWithControlsContent = () => {
+  return (
+    <div className="flex flex-col lg:flex-row gap-6 lg:gap-8">
+      <div className="flex-1 min-w-0">
+        <ChessBoardView />
+      </div>
+      <div className="w-full lg:w-[440px] lg:flex-shrink-0">
+        <AlternativeControlsMock />
+      </div>
+    </div>
+  )
+}
+
+const ChessBoardWithControls = ({ externalGame = null, chessData }) => {
+  return (
+    <ChessControlsProvider externalGame={externalGame} chessData={chessData}>
+      <ChessBoardWithControlsContent />
+    </ChessControlsProvider>
+  )
+}
+
+export default ChessBoardWithControls

package/src/chess/apparatus/ChessBoardWithSidebar.jsx

@@ -0,0 +1,122 @@
+import { ChessControlsProvider, useChessControls } from '../context/ChessControlsContext'
+import ChessBoard from './ChessBoard'
+import ChessBoardFullscreen from './ChessBoardFullscreen'
+import ChessSidebar from './ChessSidebar'
+
+const ToolbarButton = ({ label, onClick }) => (
+  <button type="button" onClick={onClick} className="board-toolbar__button">
+    {label}
+  </button>
+)
+
+const ChessBoardWithSidebarContent = ({ className = '', onToggleFullscreen = null, isFullscreen = false }) => {
+  const {
+    snapshots,
+    moveIndex,
+    orientation,
+    selectedGame,
+    selectedGameId,
+    filteredGames,
+    setSelectedGameId,
+    goToStart,
+    goToEnd,
+    stepBackward,
+    stepForward,
+    togglePlayback
+  } = useChessControls()
+
+  const handleSelectGame = (event) => {
+    setSelectedGameId(event.target.value || null)
+  }
+
+  if (isFullscreen) {
+    const fullscreenWrapperClassName = ['min-h-dvh', className].filter(Boolean).join(' ')
+    return (
+      <ChessBoardFullscreen
+        wrapperClassName={fullscreenWrapperClassName}
+        boardProps={{
+          size: 'desktop',
+          fen: snapshots[moveIndex]?.fen,
+          orientation
+        }}
+        sidebarProps={{
+          selectedGame,
+          selectedGameId,
+          sampleGames: filteredGames,
+          moveIndex,
+          onSelectGame: handleSelectGame,
+          onGoToStart: goToStart,
+          onStepBackward: stepBackward,
+          onStepForward: stepForward,
+          onGoToEnd: goToEnd,
+          onTogglePlayback: togglePlayback,
+          size: 'desktop',
+          variant: 'minimal',
+          className: 'w-full h-full bg-fg-04 text-auto',
+          onToggleFullscreen,
+          isFullscreen
+        }}
+      />
+    )
+  }
+
+  const rootClassName = ['board-playback', className].filter(Boolean).join(' ')
+
+  return (
+    <div className={rootClassName}>
+      <div className="board-playback__toolbar board-playback__toolbar--left">
+        <ToolbarButton label="⏮" onClick={goToStart} />
+        <ToolbarButton label="▶" onClick={togglePlayback} />
+        <ToolbarButton label="⏭" onClick={goToEnd} />
+      </div>
+
+      <div className="board-playback__toolbar board-playback__toolbar--right">
+        <ToolbarButton label="⏮" onClick={goToStart} />
+        <ToolbarButton label="◀" onClick={stepBackward} />
+        <ToolbarButton label="▶" onClick={togglePlayback} />
+        <ToolbarButton label="▸" onClick={stepForward} />
+        <ToolbarButton label="⏭" onClick={goToEnd} />
+      </div>
+
+      <div className="board-playback__content">
+        <ChessBoard fen={snapshots[moveIndex]?.fen} size="fluid" orientation={orientation} />
+
+        <ChessSidebar
+          selectedGame={selectedGame}
+          selectedGameId={selectedGameId}
+          sampleGames={filteredGames}
+          moveIndex={moveIndex}
+          onSelectGame={handleSelectGame}
+          onGoToStart={goToStart}
+          onStepBackward={stepBackward}
+          onStepForward={stepForward}
+          onGoToEnd={goToEnd}
+          onTogglePlayback={togglePlayback}
+          size="desktop"
+          onToggleFullscreen={onToggleFullscreen}
+          isFullscreen={isFullscreen}
+        />
+      </div>
+    </div>
+  )
+}
+
+const ChessBoardWithSidebar = ({
+  className = '',
+  onToggleFullscreen = null,
+  isFullscreen = false,
+  externalGame = null,
+  chessData
+}) => {
+  return (
+    <ChessControlsProvider externalGame={externalGame} chessData={chessData}>
+      <ChessBoardWithSidebarContent
+        className={className}
+        onToggleFullscreen={onToggleFullscreen}
+        isFullscreen={isFullscreen}
+      />
+    </ChessControlsProvider>
+  )
+}
+
+export default ChessBoardWithSidebar

package/src/chess/apparatus/ChessSidebar.jsx

@@ -0,0 +1,131 @@
+import { ChessPiece } from '../index.js'
+
+const getPieceSize = (size) => {
+  const sizeMap = {
+    sm: '28px',
+    md: '40px',
+    lg: '52px'
+  }
+  return sizeMap[size] || sizeMap.lg
+}
+
+const ChessSidebar = ({
+  selectedGame = null,
+  selectedGameId = null,
+  sampleGames = [],
+  moveIndex = 0,
+  onSelectGame = () => {},
+  onGoToStart = () => {},
+  onStepBackward = () => {},
+  onStepForward = () => {},
+  onGoToEnd = () => {},
+  onTogglePlayback = () => {},
+  size = 'desktop',
+  className = '',
+  variant = 'default',
+  onToggleFullscreen = null,
+  isFullscreen = false
+}) => {
+  const piecePixelSize = getPieceSize(size)
+  const getSidebarClass = (variant) => {
+    switch (variant) {
+      case 'minimal':
+        return 'board-playback__sidebar--minimal'
+      case 'plain':
+        return 'board-playback__sidebar--plain'
+      default:
+        return 'board-playback__sidebar'
+    }
+  }
+  const sidebarClass = getSidebarClass(variant)
+  const showFullscreenToggle = typeof onToggleFullscreen === 'function'
+  const fullscreenLabel = isFullscreen ? 'Exit Fullscreen' : 'Fullscreen'
+  const toolbarButton = (label, onClick) => (
+    <button type="button" onClick={onClick} className="board-toolbar__button">
+      {label}
+    </button>
+  )
+
+  return (
+    <aside className={`${sidebarClass} ${className}`}>
+      <header className="board-playback__sidebar-header">
+        <div className="flex items-center justify-between gap-3">
+          <span className="board-playback__badge">{'{}'} Setup Position</span>
+          {showFullscreenToggle ? (
+            <button
+              type="button"
+              onClick={onToggleFullscreen}
+              className="board-toolbar__button board-toolbar__button--compact"
+            >
+              {fullscreenLabel}
+            </button>
+          ) : null}
+        </div>
+
+        <div className="space-y-2">
+          <h3 className="board-playback__title">
+            {selectedGame?.player?.username ?? 'Player'} vs{' '}
+            {selectedGame?.opponent?.username ?? 'Opponent'}
+          </h3>
+          <p className="board-playback__meta">
+            {selectedGame?.timeClass ?? 'blitz'} · {selectedGame?.timeControl ?? '180'} · move{' '}
+            {moveIndex}
+          </p>
+        </div>
+
+        <select
+          value={selectedGameId ?? ''}
+          onChange={(e) => onSelectGame(e.target.value || null)}
+          className="board-playback__select"
+        >
+          {(sampleGames || []).map((game) => (
+            <option value={game.id} key={game.id}>
+              {game.player?.username} vs {game.opponent?.username}
+            </option>
+          ))}
+        </select>
+      </header>
+
+      <div className="board-playback__palette">
+        <div className="board-playback__palette-row">
+          {['rook', 'knight', 'bishop', 'queen', 'king', 'bishop', 'knight', 'rook'].map(
+            (piece, index) => (
+              <ChessPiece key={`white-${piece}-${index}`} piece={piece} color="white" size={piecePixelSize} />
+            )
+          )}
+        </div>
+        <div className="board-playback__palette-row">
+          {['rook', 'knight', 'bishop', 'queen', 'king', 'bishop', 'knight', 'rook'].map(
+            (piece, index) => (
+              <ChessPiece key={`black-${piece}-${index}`} piece={piece} color="black" size={piecePixelSize} />
+            )
+          )}
+        </div>
+      </div>
+
+      <div className="board-playback__controls">
+        {toolbarButton('⏮', onGoToStart)}
+        {toolbarButton('◀', onStepBackward)}
+        {toolbarButton('▶', onTogglePlayback)}
+        {toolbarButton('▸', onStepForward)}
+        {toolbarButton('⏭', onGoToEnd)}
+      </div>
+
+      <div className="board-playback__footer">
+        <span>⚙</span>
+        <span>♜</span>
+        <span>♘</span>
+        <span>♞</span>
+        <div className="board-playback__avatar">
+          <div className="board-playback__avatar-img" />
+          <div>
+            <div className="board-playback__avatar-name">Tór Grimsson</div>
+            <div className="board-playback__avatar-meta">Oct 11, 2025</div>
+          </div>
+        </div>
+      </div>
+    </aside>
+  )
+}
+
+export default ChessSidebar