@bedard/hexboard 0.0.2 → 0.0.4

package/package.json

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

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

@@ -190,9 +190,8 @@ import {
 } from './constants'
 import { d } from './dom'
 import { x, y } from './geometry'
-import { hapticConfirm } from './haptics'
 import GiocoPieces from './pieces/Gioco.vue'
-import type { HexboardOptions } from './types'
+import type { HexboardOptions, Rect } from './types'
 
 //
 // props
@@ -264,7 +263,7 @@ const pointerCoords = shallowRef({ x: 0, y: 0 })
 const pointerdownPosition = shallowRef<number | null>(null)
 
 /** rect of promotion anchor element */
-const promotionRect = shallowRef<DOMRect>(new DOMRect())
+const promotionRect = shallowRef(rect())
 
 /** staging display data */
 const staging = shallowRef<{
@@ -285,7 +284,7 @@ const staging = shallowRef<{
 const svgEl = useTemplateRef('svgEl')
 
 /** rect of svg element on pointerdown */
-const svgRect = shallowRef<DOMRect>(new DOMRect())
+const svgRect = shallowRef<Rect>(rect())
 
 /** flag to skip click handling after promotion cancel */
 let skipNextClick = false
@@ -582,7 +581,7 @@ function listen() {
 /** measure promotion element rect */
 function measurePromotionRect() {
   promotionRect.value
-    = staging.value.promotionEl?.getBoundingClientRect() ?? new DOMRect()
+    = staging.value.promotionEl?.getBoundingClientRect() ?? rect()
 }
 
 /** click position */
@@ -674,7 +673,7 @@ function onPointerupPosition(index: number, evt: PointerEvent) {
 
     // Keep selection but reset drag state
     pointerdownPosition.value = null
-    svgRect.value = new DOMRect()
+    svgRect.value = rect()
     return
   }
 
@@ -701,7 +700,7 @@ function onPointerupPosition(index: number, evt: PointerEvent) {
   // If clicking on any piece, keep the selection (it was set in pointerdown)
   if (props.hexchess?.board[index]) {
     pointerdownPosition.value = null
-    svgRect.value = new DOMRect()
+    svgRect.value = rect()
     return
   }
 
@@ -734,8 +733,6 @@ function cancelPromotion() {
 function onPointerdownPosition(index: number, evt: PointerEvent) {
   evt.preventDefault()
 
-  hapticConfirm()
-
   // Don't start new interactions during promotion
   if (staging.value.hexchess) {
     return
@@ -750,10 +747,6 @@ function onPointerdownPosition(index: number, evt: PointerEvent) {
   if (props.autoselect) {
     selected.value = index
     targets.value = props.hexchess?.movesFrom(index).map(san => san.to) ?? []
-
-    if (normalizedOptions.value.haptics) {
-      hapticConfirm()
-    }
   }
 
   if (!isPlayingPosition(index)) {
@@ -813,7 +806,7 @@ function onPointerupWindow() {
   // If dragging a piece, keep the selection but reset drag state
   if (pointerdownPosition.value !== null) {
     pointerdownPosition.value = null
-    svgRect.value = new DOMRect()
+    svgRect.value = rect()
     return
   }
 
@@ -836,6 +829,20 @@ function promote(promotion: 'n' | 'b' | 'r' | 'q') {
   }
 }
 
+function rect(data: Partial<Rect> = {}): Rect {
+  return {
+    bottom: 0,
+    height: 0,
+    left: 0,
+    right: 0,
+    top: 0,
+    width: 0,
+    x: 0,
+    y: 0,
+    ...data,
+  }
+}
+
 /** reset state */
 function resetState() {
   document.body.style.setProperty('cursor', null)
@@ -848,7 +855,7 @@ function resetState() {
     promotionTo: null,
     selected: null,
   }
-  svgRect.value = new DOMRect()
+  svgRect.value = rect()
   targets.value = []
 }
 

package/src/lib/components/hexboard/constants.ts

@@ -10,7 +10,6 @@ export const defaultOptions: HexboardOptions = {
     'oklch(0.8366 0.1165 66.29)',
     'oklch(0.6806 0.1423 75.83)',
   ],
-  haptics: true,
   highlightColor: 'oklch(90.5% 0.182 98.111 / 75%)', // yellow-300 / 75% opacity
   labelActiveColor: 'oklch(76.9% 0.188 70.08)', // amber-500
   labelColor: 'oklch(55.4% 0.046 257.417)', // slate-500

package/src/lib/components/hexboard/types.ts

@@ -2,8 +2,6 @@
 export interface HexboardOptions {
   /** position colors */
   colors: [string, string, string]
-  /** haptic feedback vibrations */
-  haptics: boolean
   /** color of highlighted position */
   highlightColor: string
   /** color of active label relative to mouseover */
@@ -20,6 +18,18 @@ export interface HexboardOptions {
   selectedColor: string
 }
 
+/** rect */
+export type Rect = {
+  bottom: number
+  height: number
+  left: number
+  right: number
+  top: number
+  width: number
+  x: number
+  y: number
+}
+
 /** uniform tuple of length `T`, `number` by default */
 export type Vec<
   T extends number,

package/src/sandbox/App.vue

@@ -10,7 +10,48 @@
       :hexchess
       :playing="true"
       @move="onMove"
-    />
+    >
+      <template #promotion="{ b, n, q, r, promote }">
+        <div class="absolute bg-gray-50 cursor-pointer flex left-1/2 bottom-full rounded-md shadow-md overflow-hidden -translate-x-1/2">
+          <button
+            class="aspect-square border-r border-gray-200 cursor-pointer flex items-center justify-center size-12 hover:bg-gray-200"
+            @click="promote('b')"
+          >
+            <Component
+              class="size-3/4"
+              :is="b"
+            />
+          </button>
+          <button
+            class="aspect-square border-r border-gray-200 cursor-pointer flex items-center justify-center size-12 hover:bg-gray-200"
+            @click="promote('n')"
+          >
+            <Component
+              class="size-3/4"
+              :is="n"
+            />
+          </button>
+          <button
+            class="aspect-square border-r border-gray-200 cursor-pointer flex items-center justify-center size-12 hover:bg-gray-200"
+            @click="promote('r')"
+          >
+            <Component
+              class="size-3/4"
+              :is="r"
+            />
+          </button>
+          <button
+            class="aspect-square cursor-pointer flex items-center justify-center size-12 hover:bg-gray-200"
+            @click="promote('q')"
+          >
+            <Component
+              class="size-3/4"
+              :is="q"
+            />
+          </button>
+        </div>
+      </template>
+    </Hexboard>
   </div>
 </template>
 

package/src/lib/components/hexboard/haptics.ts

@@ -1,56 +0,0 @@
-/** check if haptics are supported */
-export const supportsHaptics
-  = typeof window === 'undefined'
-    ? false
-    : window.matchMedia('(pointer: coarse)').matches
-
-/** trigger haptic feedback */
-function tick() {
-  try {
-    // use the native api if supported
-    if (navigator.vibrate) {
-      navigator.vibrate(50)
-      return
-    }
-
-    if (!supportsHaptics) return
-
-    // otherwise simulate a tep using a checkbox
-    const labelEl = document.createElement('label')
-    labelEl.ariaHidden = 'true'
-    labelEl.style.display = 'none'
-
-    const inputEl = document.createElement('input')
-    inputEl.type = 'checkbox'
-    inputEl.setAttribute('switch', '')
-    labelEl.appendChild(inputEl)
-
-    document.head.appendChild(labelEl)
-    labelEl.click()
-    document.head.removeChild(labelEl)
-  }
-  catch {
-    // do nothing
-  }
-}
-
-export function hapticConfirm() {
-  if (navigator.vibrate) {
-    navigator.vibrate([50, 70, 50])
-    return
-  }
-
-  tick()
-  setTimeout(tick, 120)
-}
-
-export function hapticError() {
-  if (navigator.vibrate) {
-    navigator.vibrate([50, 70, 50, 70, 50])
-    return
-  }
-
-  tick()
-  setTimeout(tick, 120)
-  setTimeout(tick, 240)
-}