@bedard/hexboard 0.0.8 → 0.0.10

package/package.json

@@ -58,5 +58,5 @@
   "license": "MIT",
   "type": "module",
   "types": "dist/index.d.ts",
-  "version": "0.0.8"
+  "version": "0.0.10"
 }

package/src/lib/components/hexboard/Hexboard.vue

@@ -172,6 +172,7 @@ import {
   type Component,
   computed,
   h,
+  onBeforeMount,
   onMounted,
   onUnmounted,
   shallowRef,
@@ -462,6 +463,12 @@ const promotionPieces = computed(() => {
 // lifecycle
 //
 
+onBeforeMount(() => {
+  if (props.autoselect) {
+    selectCurrentTargets()
+  }
+})
+
 onMounted(() => {
   if (props.active) {
     listen()
@@ -486,6 +493,8 @@ watch(
   val => (val ? listen() : unlisten()),
 )
 
+watch(selected, selectCurrentTargets)
+
 //
 // methods
 //
@@ -537,17 +546,25 @@ function attemptMove(san: San, evt?: MouseEvent) {
   }
 }
 
-/** check if user is playing the color at a position */
-function isPlayingPosition(index: number): boolean {
-  const piece = props.hexchess?.board[index]
+/** cancel promotion and restore original selection */
+function cancelPromotion() {
+  const from = staging.value.promotionFrom
 
-  if (!piece) {
-    return false
+  staging.value = {
+    hexchess: null,
+    promotionEl: null,
+    promotionFrom: null,
+    promotionTo: null,
+    selected: null,
   }
 
-  const pieceColor: Color = piece === piece.toLowerCase() ? 'b' : 'w'
+  // Keep the original piece selected
+  if (typeof from === 'number') {
+    selected.value = from
+  }
 
-  return props.playing === true || props.playing === pieceColor
+  pointerdownPosition.value = null
+  skipNextClick = true
 }
 
 /** get fill color of label */
@@ -566,6 +583,19 @@ function getLabelFill(text: string) {
   return normalizedOptions.value.labelInactiveColor
 }
 
+/** check if user is playing the color at a position */
+function isPlayingPosition(index: number): boolean {
+  const piece = props.hexchess?.board[index]
+
+  if (!piece) {
+    return false
+  }
+
+  const pieceColor: Color = piece === piece.toLowerCase() ? 'b' : 'w'
+
+  return props.playing === true || props.playing === pieceColor
+}
+
 /** listen for events */
 function listen() {
   pointerCoords.value = { x: 0, y: 0 }
@@ -614,7 +644,6 @@ function onClickPosition(index: number, evt: MouseEvent) {
   // If autoselect is enabled and clicking an unoccupied position, deselect
   if (props.autoselect && !props.hexchess.board[index]) {
     selected.value = null
-    targets.value = []
   }
 
   emit('clickPosition', index)
@@ -632,11 +661,20 @@ function onKeyupWindow(evt: KeyboardEvent) {
     // Otherwise deselect if autoselect is enabled
     if (props.autoselect) {
       selected.value = null
-      targets.value = []
     }
   }
 }
 
+/** mouseenter position */
+function onMouseenter(index: number) {
+  mouseoverPosition.value = index
+}
+
+/** mouseleave position */
+function onMouseleave() {
+  mouseoverPosition.value = null
+}
+
 /** handle piece move */
 function onPieceMove(san: San) {
   emit('move', san)
@@ -644,6 +682,60 @@ function onPieceMove(san: San) {
   resetState()
 }
 
+/** pointerdown on position */
+function onPointerdownPosition(index: number, evt: PointerEvent) {
+  evt.preventDefault()
+
+  // Don't start new interactions during promotion
+  if (staging.value.hexchess) {
+    return
+  }
+
+  // If clicking on a valid target for the selected piece, don't re-select
+  // (the move will be handled in onPointerupPosition/onClickPosition)
+  if (selected.value !== null && targets.value.includes(index)) {
+    return
+  }
+
+  const piece = props.hexchess?.board[index]
+
+  if (!piece) {
+    return
+  }
+
+  if (props.autoselect) {
+    selected.value = index
+  }
+
+  if (!isPlayingPosition(index)) {
+    return
+  }
+
+  // Only allow dragging if it's the piece's turn (or ignoreTurn is true)
+  const pieceColor: Color = piece === piece.toLowerCase() ? 'b' : 'w'
+  const isCurrentTurn = props.hexchess?.turn === pieceColor
+
+  if (!props.ignoreTurn && !isCurrentTurn) {
+    return
+  }
+
+  pointerdownPosition.value = index
+  pointerCoords.value = { x: evt.clientX, y: evt.clientY }
+
+  if (svgEl.value instanceof Element) {
+    svgRect.value = svgEl.value.getBoundingClientRect()
+  }
+}
+
+/** pointermove window */
+function onPointermoveWindow(evt: MouseEvent) {
+  if (!props.active) {
+    return
+  }
+
+  pointerCoords.value = { x: evt.clientX, y: evt.clientY }
+}
+
 /** pointerup position */
 function onPointerupPosition(index: number, evt: PointerEvent) {
   evt.stopPropagation()
@@ -707,94 +799,6 @@ function onPointerupPosition(index: number, evt: PointerEvent) {
   resetState()
 }
 
-/** cancel promotion and restore original selection */
-function cancelPromotion() {
-  const from = staging.value.promotionFrom
-
-  staging.value = {
-    hexchess: null,
-    promotionEl: null,
-    promotionFrom: null,
-    promotionTo: null,
-    selected: null,
-  }
-
-  // Keep the original piece selected
-  if (typeof from === 'number') {
-    selected.value = from
-    targets.value = props.hexchess.movesFrom(from).map(san => san.to) ?? []
-  }
-
-  pointerdownPosition.value = null
-  skipNextClick = true
-}
-
-/** pointerdown on position */
-function onPointerdownPosition(index: number, evt: PointerEvent) {
-  evt.preventDefault()
-
-  // Don't start new interactions during promotion
-  if (staging.value.hexchess) {
-    return
-  }
-
-  const piece = props.hexchess?.board[index]
-
-  if (!piece) {
-    return
-  }
-
-  if (props.autoselect) {
-    selected.value = index
-    targets.value = props.hexchess?.movesFrom(index).map(san => san.to) ?? []
-  }
-
-  if (!isPlayingPosition(index)) {
-    return
-  }
-
-  // Only allow dragging if it's the piece's turn (or ignoreTurn is true)
-  const pieceColor: Color = piece === piece.toLowerCase() ? 'b' : 'w'
-  const isCurrentTurn = props.hexchess?.turn === pieceColor
-
-  if (!props.ignoreTurn && !isCurrentTurn) {
-    return
-  }
-
-  pointerdownPosition.value = index
-  pointerCoords.value = { x: evt.clientX, y: evt.clientY }
-
-  if (svgEl.value instanceof Element) {
-    svgRect.value = svgEl.value.getBoundingClientRect()
-  }
-}
-
-/** mouseenter position */
-function onMouseenter(index: number) {
-  mouseoverPosition.value = index
-}
-
-/** mouseleave position */
-function onMouseleave() {
-  mouseoverPosition.value = null
-}
-
-/** pointermove window */
-function onPointermoveWindow(evt: MouseEvent) {
-  if (!props.active) {
-    return
-  }
-
-  pointerCoords.value = { x: evt.clientX, y: evt.clientY }
-}
-
-/** touchmove window - prevent scrolling while dragging */
-function onTouchmoveWindow(evt: TouchEvent) {
-  if (pointerdownPosition.value !== null) {
-    evt.preventDefault()
-  }
-}
-
 /** pointerup window */
 function onPointerupWindow() {
   // If staging a promotion, cancel it but keep the original piece selected
@@ -813,6 +817,13 @@ function onPointerupWindow() {
   resetState()
 }
 
+/** touchmove window - prevent scrolling while dragging */
+function onTouchmoveWindow(evt: TouchEvent) {
+  if (pointerdownPosition.value !== null) {
+    evt.preventDefault()
+  }
+}
+
 /** promote piece */
 function promote(promotion: 'n' | 'b' | 'r' | 'q') {
   if (
@@ -859,6 +870,16 @@ function resetState() {
   targets.value = []
 }
 
+/** select current targets */
+function selectCurrentTargets() {
+  if (typeof selected.value === 'number') {
+    targets.value = props.hexchess?.movesFrom(selected.value).map(san => san.to) ?? []
+  }
+  else {
+    targets.value = []
+  }
+}
+
 /** stop listening for events */
 function unlisten() {
   resetState()

package/src/tests/hexboard.test.tsx

@@ -3,7 +3,7 @@ import { expect, test, vi } from 'vitest'
 import { Hexboard } from '../lib'
 import { Hexchess } from '@bedard/hexchess'
 import { index, San } from '@bedard/hexchess'
-import { makeMove, setup } from './utils'
+import { dragMove, clickMove, setup } from './utils'
 import { page } from 'vitest/browser'
 import { ref, nextTick } from 'vue'
 import { userEvent } from 'vitest/browser'
@@ -520,23 +520,7 @@ test('drag and drop piece emits move event', async () => {
     )
   })
 
-  const fromPosition = page.getByTestId('position-f5')
-  const toPosition = page.getByTestId('position-f6')
-
-  // Start dragging the piece (pointerdown)
-  await fromPosition
-    .element()
-    .dispatchEvent(new PointerEvent('pointerdown', { bubbles: true }))
-  await nextTick()
-
-  // Verify dragging started
-  await expect.element(page.getByTestId('drag-piece')).toBeVisible()
-
-  // Move pointer to target position and release (pointerup)
-  await toPosition
-    .element()
-    .dispatchEvent(new PointerEvent('pointerup', { bubbles: true }))
-  await nextTick()
+  await dragMove(page, 'f5f6')
 
   // Verify move event was emitted with correct San object
   await expect(onMove).toHaveBeenCalledOnce()
@@ -644,7 +628,7 @@ test('promotion', async () => {
     )
   })
 
-  await makeMove(page, 'f10f11')
+  await clickMove(page, 'f10f11')
   await page.getByTestId('promote').click()
   await expect(page.getByTestId('piece-f11')).toHaveAttribute(
     'data-piece-type',
@@ -682,7 +666,7 @@ test('canceled promotion', async () => {
   })
 
   // Move pawn to promotion square
-  await makeMove(page, 'f10f11')
+  await clickMove(page, 'f10f11')
 
   // Promotion UI should be visible
   await expect.element(page.getByTestId('cancel')).toBeVisible()
@@ -730,7 +714,7 @@ test('clicking position during promotion cancels it', async () => {
   })
 
   // Move pawn to promotion square
-  await makeMove(page, 'f10f11')
+  await clickMove(page, 'f10f11')
 
   // Promotion UI should be visible
   await expect.element(page.getByTestId('promote')).toBeVisible()
@@ -771,14 +755,14 @@ test('ignoreTurn allows moving pieces out of turn', async () => {
   })
 
   // Initial position is white's turn, try to move black's pawn without ignoreTurn
-  await makeMove(page, 'f7f6')
+  await clickMove(page, 'f7f6')
   await expect(onMove).not.toHaveBeenCalled()
 
   // Enable ignoreTurn and try again
   ignoreTurn.value = true
   await nextTick()
 
-  await makeMove(page, 'f7f6')
+  await clickMove(page, 'f7f6')
   await expect(onMove).toHaveBeenCalledOnce()
   await expect(onMove).toHaveBeenCalledWith(
     expect.objectContaining({
@@ -791,6 +775,7 @@ test('ignoreTurn allows moving pieces out of turn', async () => {
 test('dragging piece to non-target position keeps selection', async () => {
   const selected = ref<number | null>(null)
   const targets = ref<number[]>([])
+  const onMove = vi.fn()
 
   setup(() => {
     return () => (
@@ -801,32 +786,86 @@ test('dragging piece to non-target position keeps selection', async () => {
           playing="w"
           v-model:selected={selected.value}
           v-model:targets={targets.value}
+          onMove={onMove}
         />
         <div data-testid="selected-value" v-text={selected.value} />
       </>
     )
   })
 
-  const piecePosition = page.getByTestId('position-f5')
-  const nonTargetPosition = page.getByTestId('position-a1')
+  await dragMove(page, 'f5a1')
 
-  // Start dragging the piece
-  await piecePosition
-    .element()
-    .dispatchEvent(new PointerEvent('pointerdown', { bubbles: true }))
-  await nextTick()
-
-  // Verify piece is selected
+  // Piece should still be selected
   await expect.element(page.getByTestId('selected-f5')).toBeVisible()
   await expect(selected.value).toBe(index('f5'))
 
-  // Release on a non-target position
-  await nonTargetPosition
-    .element()
-    .dispatchEvent(new PointerEvent('pointerup', { bubbles: true }))
+  // No move should have been emitted
+  await expect(onMove).not.toHaveBeenCalled()
+})
+
+test('click capture', async () => {
+  const hexchess = ref(
+    Hexchess.parse('b/qbk/n1b1n/r5r/ppp1ppppp/11/4pP5/4P1P4/3P1B1P3/2P2B2P2/1PRNQBKNRP1 w e6 0 2'),
+  )
+
+  setup(() => {
+    return () => (
+      <Hexboard
+        active
+        autoselect
+        playing={true}
+        hexchess={hexchess.value}
+        onMove={san => hexchess.value.applyMoveUnsafe(san)}
+      />
+    )
+  })
+
+  await clickMove(page, 'f5e5')
+
+  await expect(hexchess.value.toString()).toBe('b/qbk/n1b1n/r5r/ppp1ppppp/11/4P6/4P1P4/3P1B1P3/2P2B2P2/1PRNQBKNRP1 b - 0 2')
+})
+
+test('drag capture', async () => {
+  const hexchess = ref(
+    Hexchess.parse('b/qbk/n1b1n/r5r/ppp1ppppp/11/4pP5/4P1P4/3P1B1P3/2P2B2P2/1PRNQBKNRP1 w e6 0 2'),
+  )
+
+  setup(() => {
+    return () => (
+      <Hexboard
+        active
+        autoselect
+        playing={true}
+        hexchess={hexchess.value}
+        onMove={san => hexchess.value.applyMoveUnsafe(san)}
+      />
+    )
+  })
+
+  await dragMove(page, 'f5e5')
+
+  await expect(hexchess.value.toString()).toBe('b/qbk/n1b1n/r5r/ppp1ppppp/11/4P6/4P1P4/3P1B1P3/2P2B2P2/1PRNQBKNRP1 b - 0 2')
+})
+
+test('updates targets when autoselect is true', async () => {
+  const selected = ref<number | null>(index('f5'))
+  const targets = ref<number[]>([])
+
+  setup(() => {
+    return () => (
+      <Hexboard
+        v-model:selected={selected.value}
+        v-model:targets={targets.value}
+        autoselect
+      />
+    )
+  })
+
+  await expect(targets.value).toEqual([index('f6')])
+
+  selected.value = index('e4')
+
   await nextTick()
 
-  // Piece should still be selected
-  await expect.element(page.getByTestId('selected-f5')).toBeVisible()
-  await expect(selected.value).toBe(index('f5'))
+  await expect(targets.value).toEqual([index('e5'), index('e6')])
 })

package/src/tests/utils.ts

@@ -1,11 +1,12 @@
 import { position } from '@bedard/hexchess'
 import { San } from '@bedard/hexchess'
+import { expect } from 'vitest'
 import type { BrowserPage } from 'vitest/browser'
 import { render } from 'vitest-browser-vue'
 import { nextTick } from 'vue'
 
-/** make a move on the hexboard */
-export async function makeMove(
+/** make a move on the hexboard by clicking */
+export async function clickMove(
   page: BrowserPage,
   ...sans: string[]
 ): Promise<void> {
@@ -20,6 +21,31 @@ export async function makeMove(
   }
 }
 
+/** drag and drop a piece on the hexboard */
+export async function dragMove(
+  page: BrowserPage,
+  ...sans: string[]
+): Promise<void> {
+  for (const str of sans) {
+    const san = San.from(str)
+
+    const fromPosition = page.getByTestId(`position-${position(san.from)}`)
+    const toPosition = page.getByTestId(`position-${position(san.to)}`)
+
+    await fromPosition
+      .element()
+      .dispatchEvent(new PointerEvent('pointerdown', { bubbles: true }))
+    await nextTick()
+
+    await expect.element(page.getByTestId('drag-piece')).toBeVisible()
+
+    await toPosition
+      .element()
+      .dispatchEvent(new PointerEvent('pointerup', { bubbles: true }))
+    await nextTick()
+  }
+}
+
 /** setup a component */
 export function setup(setup: () => any): ReturnType<typeof render> {
   return render({ setup })

package/vite.config.ts

@@ -27,7 +27,24 @@ export default defineConfig({
       rollupTypes: true,
     }),
     tailwindcss(),
-    vue(),
+    vue({
+      template: {
+        compilerOptions: {
+          nodeTransforms: [
+            (node) => {
+              // remove data-testid attributes from production build
+              if (node.type === 1 && node.props) {
+                node.props = node.props
+                  .filter(prop =>
+                    !(prop.type === 6 && prop.name === 'data-testid')
+                    && !(prop.type === 7 && prop.name === 'bind' && prop.arg?.type === 4 && prop.arg.content === 'data-testid'),
+                  )
+              }
+            },
+          ],
+        },
+      },
+    }),
   ],
   resolve: {
     alias: {