@bedard/hexboard 0.0.9 → 0.0.11

package/package.json

@@ -3,34 +3,34 @@
   "description": "Component library for hexchess.club",
   "devDependencies": {
     "@bedard/hexchess": "^2.5.1",
-    "@eslint/js": "^9.39.1",
+    "@eslint/js": "^9.39.3",
     "@headlessui/vue": "^1.7.23",
     "@heroicons/vue": "^2.2.0",
-    "@stylistic/eslint-plugin": "^5.6.1",
-    "@tailwindcss/vite": "^4.1.17",
-    "@types/node": "^22.19.2",
-    "@vitejs/plugin-vue": "^6.0.2",
-    "@vitejs/plugin-vue-jsx": "^5.1.2",
-    "@vitest/browser": "^4.0.15",
-    "@vitest/browser-playwright": "^4.0.15",
-    "@vitest/coverage-v8": "^4.0.15",
-    "@vitest/ui": "^4.0.15",
+    "@stylistic/eslint-plugin": "^5.9.0",
+    "@tailwindcss/vite": "^4.2.1",
+    "@types/node": "^22.19.12",
+    "@vitejs/plugin-vue": "^6.0.4",
+    "@vitejs/plugin-vue-jsx": "^5.1.4",
+    "@vitest/browser": "^4.0.18",
+    "@vitest/browser-playwright": "^4.0.18",
+    "@vitest/coverage-v8": "^4.0.18",
+    "@vitest/ui": "^4.0.18",
     "@vue/test-utils": "^2.4.6",
-    "eslint": "^9.39.1",
+    "eslint": "^9.39.3",
     "eslint-plugin-simple-import-sort": "^12.1.1",
-    "eslint-plugin-vue": "^10.6.2",
+    "eslint-plugin-vue": "^10.8.0",
     "globals": "^16.5.0",
-    "jsdom": "^27.3.0",
-    "playwright": "^1.57.0",
-    "tailwindcss": "^4.1.17",
+    "jsdom": "^27.4.0",
+    "playwright": "^1.58.2",
+    "tailwindcss": "^4.2.1",
     "typescript": "^5.9.3",
-    "typescript-eslint": "^8.49.0",
+    "typescript-eslint": "^8.56.1",
     "vite": "^6.4.1",
     "vite-plugin-dts": "^4.5.4",
-    "vitest": "^4.0.15",
-    "vitest-browser-vue": "^2.0.1",
-    "vue": "^3.5.25",
-    "vue-tsc": "^3.1.8"
+    "vitest": "^4.0.18",
+    "vitest-browser-vue": "^2.0.2",
+    "vue": "^3.5.29",
+    "vue-tsc": "^3.2.5"
   },
   "keywords": [
     "hexchess"
@@ -58,5 +58,5 @@
   "license": "MIT",
   "type": "module",
   "types": "dist/index.d.ts",
-  "version": "0.0.9"
+  "version": "0.0.11"
 }

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

@@ -172,6 +172,7 @@ import {
   type Component,
   computed,
   h,
+  onBeforeMount,
   onMounted,
   onUnmounted,
   shallowRef,
@@ -230,6 +231,8 @@ const props = withDefaults(
 
 const emit = defineEmits<{
   clickPosition: [position: number]
+  dragendPosition: [position: number]
+  dragstartPosition: [position: number]
   move: [san: San]
 }>()
 
@@ -462,6 +465,12 @@ const promotionPieces = computed(() => {
 // lifecycle
 //
 
+onBeforeMount(() => {
+  if (props.autoselect) {
+    selectCurrentTargets()
+  }
+})
+
 onMounted(() => {
   if (props.active) {
     listen()
@@ -486,6 +495,8 @@ watch(
   val => (val ? listen() : unlisten()),
 )
 
+watch(selected, selectCurrentTargets)
+
 //
 // methods
 //
@@ -537,17 +548,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 +585,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 +646,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 +663,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 +684,62 @@ 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()
+  }
+
+  emit('dragstartPosition', index)
+}
+
+/** 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()
@@ -663,6 +759,8 @@ function onPointerupPosition(index: number, evt: PointerEvent) {
       targetIndex = Number(posAttr)
     }
 
+    emit('dragendPosition', targetIndex)
+
     const san = new San({ from: pointerdownPosition.value, to: targetIndex })
     attemptMove(san, evt)
 
@@ -707,100 +805,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
-  }
-
-  // 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
-    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
@@ -819,6 +823,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 (
@@ -865,6 +876,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

@@ -502,6 +502,72 @@ test('dragging piece off board results in selection only, dragging state resets'
   await expect.element(page.getByTestId('drag-piece')).not.toBeInTheDocument()
 })
 
+test('drag emits dragstartPosition and dragendPosition', async () => {
+  const selected = ref<number | null>(null)
+  const targets = ref<number[]>([])
+  const onDragstartPosition = vi.fn()
+  const onDragendPosition = vi.fn()
+
+  setup(() => {
+    return () => (
+      <Hexboard
+        active
+        autoselect
+        playing="w"
+        v-model:selected={selected.value}
+        v-model:targets={targets.value}
+        onDragendPosition={onDragendPosition}
+        onDragstartPosition={onDragstartPosition}
+      />
+    )
+  })
+
+  await dragMove(page, 'f5f6')
+
+  await expect(onDragstartPosition).toHaveBeenCalledOnce()
+  await expect(onDragstartPosition).toHaveBeenCalledWith(index('f5'))
+  await expect(onDragendPosition).toHaveBeenCalledOnce()
+  await expect(onDragendPosition).toHaveBeenCalledWith(index('f6'))
+})
+
+test('drag start emits dragstartPosition; release off board does not emit dragendPosition', async () => {
+  const selected = ref<number | null>(null)
+  const targets = ref<number[]>([])
+  const onDragstartPosition = vi.fn()
+  const onDragendPosition = vi.fn()
+
+  setup(() => {
+    return () => (
+      <Hexboard
+        active
+        autoselect
+        playing="w"
+        v-model:selected={selected.value}
+        v-model:targets={targets.value}
+        onDragendPosition={onDragendPosition}
+        onDragstartPosition={onDragstartPosition}
+      />
+    )
+  })
+
+  const whitePiecePosition = page.getByTestId('position-f5')
+
+  await whitePiecePosition
+    .element()
+    .dispatchEvent(new PointerEvent('pointerdown', { bubbles: true }))
+  await nextTick()
+
+  await expect(onDragstartPosition).toHaveBeenCalledOnce()
+  await expect(onDragstartPosition).toHaveBeenCalledWith(index('f5'))
+  await expect(onDragendPosition).not.toHaveBeenCalled()
+
+  window.dispatchEvent(new PointerEvent('pointerup', { bubbles: true }))
+  await nextTick()
+
+  await expect(onDragstartPosition).toHaveBeenCalledOnce()
+  await expect(onDragendPosition).not.toHaveBeenCalled()
+})
+
 test('drag and drop piece emits move event', async () => {
   const selected = ref<number | null>(null)
   const targets = ref<number[]>([])
@@ -846,3 +912,26 @@ test('drag capture', async () => {
 
   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()
+
+  await expect(targets.value).toEqual([index('e5'), index('e6')])
+})