@bedard/hexboard 0.0.1

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

@@ -0,0 +1,389 @@
+import { bilerp, flip, hexagon, pivot, reflect, sum } from './geometry'
+import type { HexboardOptions, Vec } from './types'
+
+/** svg viewbox, increasing this zooms out away from the board */
+export const box = 23.6
+
+export const defaultOptions: HexboardOptions = {
+  colors: [
+    'oklch(0.9015 0.0729 70.7)',
+    '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
+  labelInactiveColor: 'oklch(70.4% 0.04 256.788)', // slate-400
+  labels: true,
+  selectedColor: 'oklch(63.7% 0.237 25.331)', // red-500
+  targetColor: 'oklch(63.7% 0.237 25.331)', // red-500
+} as const
+
+/** empty position */
+export const emptyPosition = '1/3/5/7/9/11/11/11/11/11/11 w - 0 1'
+
+/** initial position */
+export const initialPosition
+  = 'b/qbk/n1b1n/r5r/ppppppppp/11/5P5/4P1P4/3P1B1P3/2P2B2P2/1PRNQBKNRP1 w - 0 1'
+
+/** label offset */
+export const labelOffset = 1.7
+
+/** piece size */
+export const pieceSize = 1.7
+
+/** side length of regular hexagon circumscribed around a unit circle */
+export const sideLength = 2 / Math.sqrt(3)
+
+// distance between the origin of neighboring hexagons
+// one = direct neighbors, two = neighbor of neighbor, etc...
+export const one = sideLength * (Math.sqrt(3) / 2) * 2 // <- inscribed radius * 2
+export const two = one * 2
+export const three = one * 3
+export const four = one * 4
+export const five = one * 5
+
+// calculate the center for each position, using f6 as the origin
+const f6: Vec<2> = [0, 0]
+
+// the 6th rank is calculated as angled distances from F6
+const a6 = pivot(f6, 150, five)
+const b6 = pivot(f6, 150, four)
+const c6 = pivot(f6, 150, three)
+const d6 = pivot(f6, 150, two)
+const e6 = pivot(f6, 150, one)
+const g6 = pivot(f6, 30, one)
+const h6 = pivot(f6, 30, two)
+const i6 = pivot(f6, 30, three)
+const k6 = pivot(f6, 30, four)
+const l6 = pivot(f6, 30, five)
+
+// other ranks are calculated by vertically translating the 6th rank
+const a1 = sum(a6, [0, -five])
+const b1 = sum(b6, [0, -five])
+const c1 = sum(c6, [0, -five])
+const d1 = sum(d6, [0, -five])
+const e1 = sum(e6, [0, -five])
+const f1 = sum(f6, [0, -five])
+const g1 = sum(g6, [0, -five])
+const h1 = sum(h6, [0, -five])
+const i1 = sum(i6, [0, -five])
+const k1 = sum(k6, [0, -five])
+const l1 = sum(l6, [0, -five])
+
+const a2 = sum(a6, [0, -four])
+const b2 = sum(b6, [0, -four])
+const c2 = sum(c6, [0, -four])
+const d2 = sum(d6, [0, -four])
+const e2 = sum(e6, [0, -four])
+const f2 = sum(f6, [0, -four])
+const g2 = sum(g6, [0, -four])
+const h2 = sum(h6, [0, -four])
+const i2 = sum(i6, [0, -four])
+const k2 = sum(k6, [0, -four])
+const l2 = sum(l6, [0, -four])
+
+const a3 = sum(a6, [0, -three])
+const b3 = sum(b6, [0, -three])
+const c3 = sum(c6, [0, -three])
+const d3 = sum(d6, [0, -three])
+const e3 = sum(e6, [0, -three])
+const f3 = sum(f6, [0, -three])
+const g3 = sum(g6, [0, -three])
+const h3 = sum(h6, [0, -three])
+const i3 = sum(i6, [0, -three])
+const k3 = sum(k6, [0, -three])
+const l3 = sum(l6, [0, -three])
+
+const a4 = sum(a6, [0, -two])
+const b4 = sum(b6, [0, -two])
+const c4 = sum(c6, [0, -two])
+const d4 = sum(d6, [0, -two])
+const e4 = sum(e6, [0, -two])
+const f4 = sum(f6, [0, -two])
+const g4 = sum(g6, [0, -two])
+const h4 = sum(h6, [0, -two])
+const i4 = sum(i6, [0, -two])
+const k4 = sum(k6, [0, -two])
+const l4 = sum(l6, [0, -two])
+
+const a5 = sum(a6, [0, -one])
+const b5 = sum(b6, [0, -one])
+const c5 = sum(c6, [0, -one])
+const d5 = sum(d6, [0, -one])
+const e5 = sum(e6, [0, -one])
+const f5 = sum(f6, [0, -one])
+const g5 = sum(g6, [0, -one])
+const h5 = sum(h6, [0, -one])
+const i5 = sum(i6, [0, -one])
+const k5 = sum(k6, [0, -one])
+const l5 = sum(l6, [0, -one])
+
+// 7th rank and higher start to have fewer files
+const b7 = sum(b6, [0, one])
+const c7 = sum(c6, [0, one])
+const d7 = sum(d6, [0, one])
+const e7 = sum(e6, [0, one])
+const f7 = sum(f6, [0, one])
+const g7 = sum(g6, [0, one])
+const h7 = sum(h6, [0, one])
+const i7 = sum(i6, [0, one])
+const k7 = sum(k6, [0, one])
+
+const c8 = sum(c6, [0, two])
+const d8 = sum(d6, [0, two])
+const e8 = sum(e6, [0, two])
+const f8 = sum(f6, [0, two])
+const g8 = sum(g6, [0, two])
+const h8 = sum(h6, [0, two])
+const i8 = sum(i6, [0, two])
+
+const d9 = sum(d6, [0, three])
+const e9 = sum(e6, [0, three])
+const f9 = sum(f6, [0, three])
+const g9 = sum(g6, [0, three])
+const h9 = sum(h6, [0, three])
+
+const e10 = sum(e6, [0, four])
+const f10 = sum(f6, [0, four])
+const g10 = sum(g6, [0, four])
+
+const f11 = sum(f6, [0, five])
+
+/** board position data, sorted by fen order  */
+export const board: [
+  color: number,
+  origin: Vec<2>,
+  reflectedOrigin: Vec<2>,
+  path: Vec<6, Vec<2>>,
+  reflectedPath: Vec<6, Vec<2>>,
+][] = [
+  [2, f11, reflect(f11), hexagon(f11), flip(hexagon(f11))],
+  [1, e10, reflect(e10), hexagon(e10), flip(hexagon(e10))],
+  [0, f10, reflect(f10), hexagon(f10), flip(hexagon(f10))],
+  [1, g10, reflect(g10), hexagon(g10), flip(hexagon(g10))],
+  [0, d9, reflect(d9), hexagon(d9), flip(hexagon(d9))],
+  [2, e9, reflect(e9), hexagon(e9), flip(hexagon(e9))],
+  [1, f9, reflect(f9), hexagon(f9), flip(hexagon(f9))],
+  [2, g9, reflect(g9), hexagon(g9), flip(hexagon(g9))],
+  [0, h9, reflect(h9), hexagon(h9), flip(hexagon(h9))],
+  [2, c8, reflect(c8), hexagon(c8), flip(hexagon(c8))],
+  [1, d8, reflect(d8), hexagon(d8), flip(hexagon(d8))],
+  [0, e8, reflect(e8), hexagon(e8), flip(hexagon(e8))],
+  [2, f8, reflect(f8), hexagon(f8), flip(hexagon(f8))],
+  [0, g8, reflect(g8), hexagon(g8), flip(hexagon(g8))],
+  [1, h8, reflect(h8), hexagon(h8), flip(hexagon(h8))],
+  [2, i8, reflect(i8), hexagon(i8), flip(hexagon(i8))],
+  [1, b7, reflect(b7), hexagon(b7), flip(hexagon(b7))],
+  [0, c7, reflect(c7), hexagon(c7), flip(hexagon(c7))],
+  [2, d7, reflect(d7), hexagon(d7), flip(hexagon(d7))],
+  [1, e7, reflect(e7), hexagon(e7), flip(hexagon(e7))],
+  [0, f7, reflect(f7), hexagon(f7), flip(hexagon(f7))],
+  [1, g7, reflect(g7), hexagon(g7), flip(hexagon(g7))],
+  [2, h7, reflect(h7), hexagon(h7), flip(hexagon(h7))],
+  [0, i7, reflect(i7), hexagon(i7), flip(hexagon(i7))],
+  [1, k7, reflect(k7), hexagon(k7), flip(hexagon(k7))],
+  [0, a6, reflect(a6), hexagon(a6), flip(hexagon(a6))],
+  [2, b6, reflect(b6), hexagon(b6), flip(hexagon(b6))],
+  [1, c6, reflect(c6), hexagon(c6), flip(hexagon(c6))],
+  [0, d6, reflect(d6), hexagon(d6), flip(hexagon(d6))],
+  [2, e6, reflect(e6), hexagon(e6), flip(hexagon(e6))],
+  [1, f6, reflect(f6), hexagon(f6), flip(hexagon(f6))],
+  [2, g6, reflect(g6), hexagon(g6), flip(hexagon(g6))],
+  [0, h6, reflect(h6), hexagon(h6), flip(hexagon(h6))],
+  [1, i6, reflect(i6), hexagon(i6), flip(hexagon(i6))],
+  [2, k6, reflect(k6), hexagon(k6), flip(hexagon(k6))],
+  [0, l6, reflect(l6), hexagon(l6), flip(hexagon(l6))],
+  [1, a5, reflect(a5), hexagon(a5), flip(hexagon(a5))],
+  [0, b5, reflect(b5), hexagon(b5), flip(hexagon(b5))],
+  [2, c5, reflect(c5), hexagon(c5), flip(hexagon(c5))],
+  [1, d5, reflect(d5), hexagon(d5), flip(hexagon(d5))],
+  [0, e5, reflect(e5), hexagon(e5), flip(hexagon(e5))],
+  [2, f5, reflect(f5), hexagon(f5), flip(hexagon(f5))],
+  [0, g5, reflect(g5), hexagon(g5), flip(hexagon(g5))],
+  [1, h5, reflect(h5), hexagon(h5), flip(hexagon(h5))],
+  [2, i5, reflect(i5), hexagon(i5), flip(hexagon(i5))],
+  [0, k5, reflect(k5), hexagon(k5), flip(hexagon(k5))],
+  [1, l5, reflect(l5), hexagon(l5), flip(hexagon(l5))],
+  [2, a4, reflect(a4), hexagon(a4), flip(hexagon(a4))],
+  [1, b4, reflect(b4), hexagon(b4), flip(hexagon(b4))],
+  [0, c4, reflect(c4), hexagon(c4), flip(hexagon(c4))],
+  [2, d4, reflect(d4), hexagon(d4), flip(hexagon(d4))],
+  [1, e4, reflect(e4), hexagon(e4), flip(hexagon(e4))],
+  [0, f4, reflect(f4), hexagon(f4), flip(hexagon(f4))],
+  [1, g4, reflect(g4), hexagon(g4), flip(hexagon(g4))],
+  [2, h4, reflect(h4), hexagon(h4), flip(hexagon(h4))],
+  [0, i4, reflect(i4), hexagon(i4), flip(hexagon(i4))],
+  [1, k4, reflect(k4), hexagon(k4), flip(hexagon(k4))],
+  [2, l4, reflect(l4), hexagon(l4), flip(hexagon(l4))],
+  [0, a3, reflect(a3), hexagon(a3), flip(hexagon(a3))],
+  [2, b3, reflect(b3), hexagon(b3), flip(hexagon(b3))],
+  [1, c3, reflect(c3), hexagon(c3), flip(hexagon(c3))],
+  [0, d3, reflect(d3), hexagon(d3), flip(hexagon(d3))],
+  [2, e3, reflect(e3), hexagon(e3), flip(hexagon(e3))],
+  [1, f3, reflect(f3), hexagon(f3), flip(hexagon(f3))],
+  [2, g3, reflect(g3), hexagon(g3), flip(hexagon(g3))],
+  [0, h3, reflect(h3), hexagon(h3), flip(hexagon(h3))],
+  [1, i3, reflect(i3), hexagon(i3), flip(hexagon(i3))],
+  [2, k3, reflect(k3), hexagon(k3), flip(hexagon(k3))],
+  [0, l3, reflect(l3), hexagon(l3), flip(hexagon(l3))],
+  [1, a2, reflect(a2), hexagon(a2), flip(hexagon(a2))],
+  [0, b2, reflect(b2), hexagon(b2), flip(hexagon(b2))],
+  [2, c2, reflect(c2), hexagon(c2), flip(hexagon(c2))],
+  [1, d2, reflect(d2), hexagon(d2), flip(hexagon(d2))],
+  [0, e2, reflect(e2), hexagon(e2), flip(hexagon(e2))],
+  [2, f2, reflect(f2), hexagon(f2), flip(hexagon(f2))],
+  [0, g2, reflect(g2), hexagon(g2), flip(hexagon(g2))],
+  [1, h2, reflect(h2), hexagon(h2), flip(hexagon(h2))],
+  [2, i2, reflect(i2), hexagon(i2), flip(hexagon(i2))],
+  [0, k2, reflect(k2), hexagon(k2), flip(hexagon(k2))],
+  [1, l2, reflect(l2), hexagon(l2), flip(hexagon(l2))],
+  [2, a1, reflect(a1), hexagon(a1), flip(hexagon(a1))],
+  [1, b1, reflect(b1), hexagon(b1), flip(hexagon(b1))],
+  [0, c1, reflect(c1), hexagon(c1), flip(hexagon(c1))],
+  [2, d1, reflect(d1), hexagon(d1), flip(hexagon(d1))],
+  [1, e1, reflect(e1), hexagon(e1), flip(hexagon(e1))],
+  [0, f1, reflect(f1), hexagon(f1), flip(hexagon(f1))],
+  [1, g1, reflect(g1), hexagon(g1), flip(hexagon(g1))],
+  [2, h1, reflect(h1), hexagon(h1), flip(hexagon(h1))],
+  [0, i1, reflect(i1), hexagon(i1), flip(hexagon(i1))],
+  [1, k1, reflect(k1), hexagon(k1), flip(hexagon(k1))],
+  [2, l1, reflect(l1), hexagon(l1), flip(hexagon(l1))],
+]
+
+/** board labels */
+export const labels: [string, Vec<2>, Vec<2>][] = [
+  ['11', bilerp(g10, f11, labelOffset), reflect(bilerp(g10, f11, labelOffset))],
+  ['10', bilerp(f10, e10, labelOffset), reflect(bilerp(f10, e10, labelOffset))],
+  ['9', bilerp(e9, d9, labelOffset), reflect(bilerp(e9, d9, labelOffset))],
+  ['8', bilerp(d8, c8, labelOffset), reflect(bilerp(d8, c8, labelOffset))],
+  ['7', bilerp(c7, b7, labelOffset), reflect(bilerp(c7, b7, labelOffset))],
+  ['6', bilerp(b6, a6, labelOffset), reflect(bilerp(b6, a6, labelOffset))],
+  ['5', bilerp(b5, a5, labelOffset), reflect(bilerp(b5, a5, labelOffset))],
+  ['4', bilerp(b4, a4, labelOffset), reflect(bilerp(b4, a4, labelOffset))],
+  ['3', bilerp(b3, a3, labelOffset), reflect(bilerp(b3, a3, labelOffset))],
+  ['2', bilerp(b2, a2, labelOffset), reflect(bilerp(b2, a2, labelOffset))],
+  ['1', bilerp(b1, a1, labelOffset), reflect(bilerp(b1, a1, labelOffset))],
+
+  ['a', bilerp(a2, a1, labelOffset), reflect(bilerp(a2, a1, labelOffset))],
+  ['b', bilerp(b2, b1, labelOffset), reflect(bilerp(b2, b1, labelOffset))],
+  ['c', bilerp(c2, c1, labelOffset), reflect(bilerp(c2, c1, labelOffset))],
+  ['d', bilerp(d2, d1, labelOffset), reflect(bilerp(d2, d1, labelOffset))],
+  ['e', bilerp(e2, e1, labelOffset), reflect(bilerp(e2, e1, labelOffset))],
+  ['f', bilerp(f2, f1, labelOffset), reflect(bilerp(f2, f1, labelOffset))],
+  ['g', bilerp(g2, g1, labelOffset), reflect(bilerp(g2, g1, labelOffset))],
+  ['h', bilerp(h2, h1, labelOffset), reflect(bilerp(h2, h1, labelOffset))],
+  ['i', bilerp(i2, i1, labelOffset), reflect(bilerp(i2, i1, labelOffset))],
+  ['k', bilerp(k2, k1, labelOffset), reflect(bilerp(k2, k1, labelOffset))],
+  ['l', bilerp(l2, l1, labelOffset), reflect(bilerp(l2, l1, labelOffset))],
+
+  ['1', bilerp(k1, l1, labelOffset), reflect(bilerp(k1, l1, labelOffset))],
+  ['2', bilerp(k2, l2, labelOffset), reflect(bilerp(k2, l2, labelOffset))],
+  ['3', bilerp(k3, l3, labelOffset), reflect(bilerp(k3, l3, labelOffset))],
+  ['4', bilerp(k4, l4, labelOffset), reflect(bilerp(k4, l4, labelOffset))],
+  ['5', bilerp(k5, l5, labelOffset), reflect(bilerp(k5, l5, labelOffset))],
+  ['6', bilerp(k6, l6, labelOffset), reflect(bilerp(k6, l6, labelOffset))],
+  ['7', bilerp(i7, k7, labelOffset), reflect(bilerp(i7, k7, labelOffset))],
+  ['8', bilerp(h8, i8, labelOffset), reflect(bilerp(h8, i8, labelOffset))],
+  ['9', bilerp(g9, h9, labelOffset), reflect(bilerp(g9, h9, labelOffset))],
+  ['10', bilerp(f10, g10, labelOffset), reflect(bilerp(f10, g10, labelOffset))],
+  ['11', bilerp(e10, f11, labelOffset), reflect(bilerp(e10, f11, labelOffset))],
+]
+
+/** perimeter of the board */
+export const perimeter: Vec<93, Vec<2>> = [
+  board[0 /* f11 */][3][5],
+  board[0 /* f11 */][3][0],
+  board[0 /* f11 */][3][1],
+  board[3 /* g10 */][3][5],
+  board[3 /* g10 */][3][0],
+  board[3 /* g10 */][3][1],
+  board[8 /* h9 */][3][5],
+  board[8 /* h9 */][3][0],
+  board[8 /* h9 */][3][1],
+  board[15 /* i8 */][3][5],
+  board[15 /* i8 */][3][0],
+  board[15 /* i8 */][3][1],
+  board[24 /* k7 */][3][5],
+  board[24 /* k7 */][3][0],
+  board[24 /* k7 */][3][1],
+  board[35 /* l6 */][3][5],
+  board[35 /* l6 */][3][0],
+  board[35 /* l6 */][3][1],
+  board[35 /* l6 */][3][2],
+  board[46 /* l5 */][3][0],
+  board[46 /* l5 */][3][1],
+  board[46 /* l5 */][3][2],
+  board[57 /* l4 */][3][0],
+  board[57 /* l4 */][3][1],
+  board[57 /* l4 */][3][2],
+  board[68 /* l3 */][3][0],
+  board[68 /* l3 */][3][1],
+  board[68 /* l3 */][3][2],
+  board[79 /* l2 */][3][0],
+  board[79 /* l2 */][3][1],
+  board[79 /* l2 */][3][2],
+  board[90 /* l1 */][3][0],
+  board[90 /* l1 */][3][1],
+  board[90 /* l1 */][3][2],
+  board[90 /* l1 */][3][3],
+  board[89 /* k1 */][3][2],
+  board[89 /* k1 */][3][3],
+  board[89 /* k1 */][3][4],
+  board[88 /* i1 */][3][1],
+  board[88 /* i1 */][3][2],
+  board[88 /* i1 */][3][3],
+  board[87 /* h1 */][3][1],
+  board[87 /* h1 */][3][2],
+  board[87 /* h1 */][3][3],
+  board[86 /* g1 */][3][1],
+  board[86 /* g1 */][3][2],
+  board[86 /* g1 */][3][3],
+  board[85 /* f1 */][3][1],
+  board[85 /* f1 */][3][2],
+  board[85 /* f1 */][3][3],
+  board[85 /* f1 */][3][4],
+  board[84 /* e1 */][3][3],
+  board[84 /* e1 */][3][4],
+  board[83 /* d1 */][3][2],
+  board[83 /* d1 */][3][3],
+  board[83 /* d1 */][3][4],
+  board[82 /* c1 */][3][2],
+  board[82 /* c1 */][3][3],
+  board[82 /* c1 */][3][4],
+  board[81 /* b1 */][3][2],
+  board[81 /* b1 */][3][3],
+  board[81 /* b1 */][3][4],
+  board[80 /* a1 */][3][2],
+  board[80 /* a1 */][3][3],
+  board[80 /* a1 */][3][4],
+  board[80 /* a1 */][3][5],
+  board[69 /* a2 */][3][3],
+  board[69 /* a2 */][3][4],
+  board[69 /* a2 */][3][5],
+  board[58 /* a3 */][3][3],
+  board[58 /* a3 */][3][4],
+  board[58 /* a3 */][3][5],
+  board[47 /* a4 */][3][3],
+  board[47 /* a4 */][3][4],
+  board[47 /* a4 */][3][5],
+  board[36 /* a5 */][3][3],
+  board[36 /* a5 */][3][4],
+  board[36 /* a5 */][3][5],
+  board[25 /* a6 */][3][3],
+  board[25 /* a6 */][3][4],
+  board[25 /* a6 */][3][5],
+  board[16 /* b7 */][3][4],
+  board[16 /* b7 */][3][5],
+  board[16 /* b7 */][3][0],
+  board[9 /* c8 */][3][4],
+  board[9 /* c8 */][3][5],
+  board[9 /* c8 */][3][0],
+  board[4 /* d9 */][3][4],
+  board[4 /* d9 */][3][5],
+  board[4 /* d9 */][3][0],
+  board[1 /* e10 */][3][4],
+  board[1 /* e10 */][3][5],
+  board[1 /* e10 */][3][0],
+]

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

@@ -0,0 +1,19 @@
+import { x, y } from './geometry'
+import type { Vec } from './types'
+
+/** create svg vector path */
+export function d(arr: Vec<2>[]) {
+  if (arr.length === 0) {
+    return ''
+  }
+
+  const [origin, ...points] = arr
+
+  let path = `M ${x(origin[0])} ${y(origin[1])} L `
+
+  for (const point of points) {
+    path += `${x(point[0])} ${y(point[1])} `
+  }
+
+  return `${path} Z`
+}

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

@@ -0,0 +1,59 @@
+import { box, sideLength } from './constants'
+import type { Vec } from './types'
+
+/** bilinearly interpolate between two points */
+export function bilerp(p1: Vec<2>, p2: Vec<2>, t: number): Vec<2> {
+  return [p1[0] + t * (p2[0] - p1[0]), p1[1] + t * (p2[1] - p1[1])]
+}
+
+/** reflect a path of points across the origin */
+export function flip<T extends Vec<2>[]>(path: T) {
+  return path.map(reflect) as T
+}
+
+/** calculate hexagon vertices around a given point */
+export function hexagon(origin: Vec<2>): Vec<6, Vec<2>> {
+  return [
+    pivot(origin, -300, sideLength),
+    pivot(origin, 0, sideLength),
+    pivot(origin, -60, sideLength),
+    pivot(origin, -120, sideLength),
+    pivot(origin, -180, sideLength),
+    pivot(origin, -240, sideLength),
+  ]
+}
+
+/** pivot counter-clockwise around a point */
+export function pivot(point: Vec<2>, deg: number, distance: number): Vec<2> {
+  const rad = radians(deg)
+
+  return [
+    distance * Math.cos(rad) + point[0],
+    distance * Math.sin(rad) + point[1],
+  ]
+}
+
+/** convert degrees to radians */
+export function radians(deg: number) {
+  return deg * (Math.PI / 180)
+}
+
+/** reflect a point across the origin */
+export function reflect(v: Vec<2>): Vec<2> {
+  return [-v[0], -v[1]]
+}
+
+/** sum two vectors */
+export function sum(v1: Vec<2>, v2: Vec<2>): Vec<2> {
+  return [v1[0] + v2[0], v1[1] + v2[1]]
+}
+
+/** convert cartesian X value to SVG coordinate */
+export function x(n: number) {
+  return box / 2 + n
+}
+
+/** convert cartesian Y value to SVG coordinate */
+export function y(n: number) {
+  return box / 2 - n
+}

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

@@ -0,0 +1,56 @@
+/** 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)
+}

package/src/lib/components/hexboard/pieces/Celtic.vue

@@ -0,0 +1,22 @@
+<template>
+  <svg v-if="type === 'p'" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 933.3 933.3"><style id="style-base">.base{fill-opacity:1;fill-rule:evenodd;stroke-miterlimit:4;stroke-dasharray:none;stroke-linecap:round;stroke-linejoin:round;stroke-opacity:1}.stroke-medium{stroke-width:20}.stroke-color{stroke:#000}</style><defs id="defs2718"><linearGradient xlink:href="#fillGradient" id="main-gradient" x1="462.1" x2="1135.2" y1="776.1" y2="839.4" gradientTransform="matrix(.64593 0 0 .64727 -26.8 91.2)" gradientUnits="userSpaceOnUse" /><linearGradient id="fillGradient"><stop id="stop0" offset="0" stop-color="#7f899b" stop-opacity="1" /><stop id="stop1" offset="1" stop-color="#1c1c2f" stop-opacity="1" /></linearGradient></defs><path id="boundary" fill="none" stroke-width="35" d="M464 199.7c-72.1.9-129.8 57.9-134.5 124.2-2.4 33 45.3 89 73.2 106.6-137.4 31-2.7 70.6-2.7 127.7 0 39.4-53.5 65.7-24.2 91-15.9 64.2-62.6 87.4-119.2 113.5-27.9 35.7-13 95.3 39.4 98.7 36.7 2.4 307.5 3 345.4-1.1 58.3-6.4 67.4-67.3 40.5-101-57-17.6-118.7-42.6-131.1-108.7 30.3-25.4-31.6-52.2-31.6-92.4 0-57.1 150.2-90.4 6.4-127.7 27.9-17.6 72.4-73.6 73.2-106.6 1.6-64.7-65.8-125-134.7-124.2Z" class="base stroke-color" /><path id="main" fill="url(#main-gradient)" d="M464 199.7c-72.1.9-129.8 57.9-134.5 124.2-2.4 33 45.3 89 73.2 106.6-137.4 31-2.7 70.6-2.7 127.7 0 39.4-53.5 65.7-24.2 91-15.9 64.2-62.6 87.4-119.2 113.5-27.9 35.7-13 95.3 39.4 98.7 36.7 2.4 307.5 3 345.4-1.1 58.3-6.4 67.4-67.3 40.5-101-57-17.6-118.7-42.6-131.1-108.7 30.3-25.4-31.6-52.2-31.6-92.4 0-57.1 150.2-90.4 6.4-127.7 27.9-17.6 72.4-73.6 73.2-106.6 1.6-64.7-65.8-125-134.7-124.2Z" class="base stroke-color stroke-medium" /><path id="deco-side" fill="none" d="M617.8 863.6c58.3-6.4 67.4-58 40.5-91.6-57-17.7-118.7-52-131.1-118 30.2-25.5-31.6-52.3-31.6-92.5 0-57.1 150.2-90.4 6.4-127.7 27.9-17.6 72.4-73.6 73.2-106.6 1.6-64.7-58.2-120-127.2-119.2" class="base stroke-color stroke-medium" opacity=".5" /><path id="deco-lines" fill="none" d="M416.6 466h94.8zM408 627.7h112.2zm-99.4 153.5h320z" class="base stroke-color stroke-medium" opacity=".5" /></svg>
+  <svg v-else-if="type === 'n'" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 933 933"><style id="style-base">.base{fill-opacity:1;fill-rule:evenodd;stroke-miterlimit:4;stroke-dasharray:none;stroke-linecap:round;stroke-linejoin:round;stroke-opacity:1}.stroke-medium{stroke-width:20}.stroke-color{stroke:#000}</style><defs id="defs2202"><linearGradient xlink:href="#fillGradient" id="main-gradient" x1="824.6" x2="992.7" y1="119.5" y2="168.5" gradientTransform="translate(-3372 -24) scale(4.2241)" gradientUnits="userSpaceOnUse" /><linearGradient id="fillGradient"><stop id="stop0" offset="0" stop-color="#7f899b" stop-opacity="1" /><stop id="stop1" offset="1" stop-color="#1c1c2f" stop-opacity="1" /></linearGradient></defs><path id="boundary" fill="none" stroke-width="35" d="m394 44-24 83-59-68-4 89c-91 91-38 111-172 316-9 13-25 24-29 42-15 80 88 60 106 69 71-57 100-58 137-98 42 15 108-3 147-45-26 77-136 132-169 267 39 37 0 74-47 71-52 12-34 109 19 109l452-3c63 0 72-92 30-108-40 0-58-41-26-69 4-74 3-143-12-214-2-7 2-22 10-24-6-23-30-45-40-69-5-11-18-17 19-18-11-22-61-58-76-78-6-7 25-13 19-19-35-37-85-50-109-68-8-6 23-15 14-21-33-21-102-48-145-65z" class="base stroke-color" /><path id="main" fill="url(#main-gradient)" d="m394 44-24 83-59-68-4 89c-91 91-38 111-172 316-9 13-25 24-29 42-15 80 88 60 106 69 71-57 100-58 137-98 42 15 108-3 147-45-26 77-136 132-169 267 39 37 0 74-47 71-52 12-34 109 19 109l452-3c63 0 72-92 30-108-40 0-58-41-26-69 4-74 3-143-12-214-2-7 2-22 10-24-6-23-30-45-40-69-5-11-18-17 19-18-11-22-61-58-76-78-6-7 25-13 19-19-35-37-85-50-109-68-8-6 23-15 14-21-33-21-102-48-145-65z" class="base stroke-color stroke-medium" /><path id="eyebrow" fill="none" d="M336 282c-28 2-50 16-65 41" class="base stroke-color stroke-medium" /><path id="eye" fill="none" d="M310 316c12 8 25 5 22-12" class="base stroke-color stroke-medium" /><path id="nose" fill="none" d="M155 501c-13-5-23 17-15 17" class="base stroke-color stroke-medium" /><path id="cheek" fill="none" d="M508 405c10-13 9-19 11-27" class="base stroke-color stroke-medium" /><path id="deco-lines" fill="none" d="M644 699H370zm64 64H360z" class="base stroke-color stroke-medium" opacity=".5" /><path id="deco-side" fill="none" d="M723 876c63 0 78-76 36-92-39 0-58-60-25-88 3-74 3-143-13-213-2-7 2-23 11-24-7-24-31-36-41-60-5-12-18-17 20-19-12-21-61-57-77-77-5-7 25-13 19-20-34-36-84-49-109-68-8-6 23-14 15-20-33-22-81-55-124-72" class="base stroke-color stroke-medium" opacity=".5" /></svg>
+  <svg v-else-if="type === 'b'" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 933 933"><style id="style-base">.base{fill-opacity:1;fill-rule:evenodd;stroke-miterlimit:4;stroke-dasharray:none;stroke-linecap:round;stroke-linejoin:round;stroke-opacity:1}.stroke-medium{stroke-width:20}.stroke-color{stroke:#000}</style><defs id="defs1927"><linearGradient xlink:href="#fillGradient" id="main-gradient" x1="683" x2="739.5" y1="74" y2="69" gradientTransform="matrix(6.26023 0 0 7.12396 -3967 -262)" gradientUnits="userSpaceOnUse" /><linearGradient id="fillGradient"><stop id="stop0" offset="0" stop-color="#7f899b" stop-opacity="1" /><stop id="stop1" offset="1" stop-color="#1c1c2f" stop-opacity="1" /></linearGradient></defs><path id="boundary" fill="none" stroke-width="35" d="M468 50c-34 0-62 23-62 52 0 8 2 16 6 23-71 20-122 79-122 164 3 78 42 150 105 194-63 25-3 53-3 118-46 83-62 91-140 149-6 4-52 9-57 14-32 42-15 110 46 114 42 3 417 4 460-1 67-7 78-78 47-116-5-6-52-12-59-16-61-33-139-82-160-144 0-65 71-93 8-118 65-45 102-110 109-194 4-46-21-92-60-125l-65 146c-6 15-23 21-38 15-15-7-22-24-15-39l67-153a197 197 0 0 0-13-5c5-8 8-17 8-26 0-29-28-52-62-52z" class="base stroke-color" /><path id="main" fill="url(#main-gradient)" d="M468 50c-34 0-62 23-62 52 0 8 2 16 6 23-71 20-122 79-122 164 3 78 42 150 105 194-63 25-3 53-3 118-46 83-62 91-140 149-6 4-52 9-57 14-32 42-15 110 46 114 42 3 417 4 460-1 67-7 78-78 47-116-5-6-52-12-59-16-61-33-139-82-160-144 0-65 71-93 8-118 65-45 102-110 109-194 4-46-21-92-60-125l-65 146c-6 15-23 21-38 15-15-7-22-24-15-39l67-153a197 197 0 0 0-13-5c5-8 8-17 8-26 0-29-28-52-62-52z" class="base stroke-color stroke-medium" /><path id="deco-lines" fill="none" d="M413 510h105zm-20 200h145zm-100 80h355z" class="base stroke-color stroke-medium" opacity=".5" /><path id="deco-top" fill="none" d="M350 410c40 48 237 35 287-129" class="base stroke-color stroke-medium" opacity=".5" /><path id="deco-side" fill="none" d="M685 867c67-7 77-49 46-88-5-6-52-11-58-15-62-34-139-92-160-153 0-66 70-113 7-137 65-45 102-110 110-195 4-46-5-52-44-85" class="base stroke-color stroke-medium" opacity=".5" /></svg>
+  <svg v-else-if="type === 'r'" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 933 933"><style id="style-base">.base{fill-opacity:1;fill-rule:evenodd;stroke-miterlimit:4;stroke-dasharray:none;stroke-linecap:round;stroke-linejoin:round;stroke-opacity:1}.stroke-medium{stroke-width:20}.stroke-color{stroke:#000}</style><defs id="defs1553"><linearGradient xlink:href="#fillGradient" id="main-gradient" x1="660.5" x2="757.7" y1="90.4" y2="103.7" gradientTransform="matrix(6.24848 0 0 7.11058 -3961 -265)" gradientUnits="userSpaceOnUse" /><linearGradient id="fillGradient"><stop id="stop0" offset="0" stop-color="#7f899b" stop-opacity="1" /><stop id="stop1" offset="1" stop-color="#1c1c2f" stop-opacity="1" /></linearGradient></defs><path id="boundary" fill="none" stroke-width="35" d="M775 112H649v81l-114 9v-80l-131 1v81l-109-11v-81l-117 3c-12 98 48 121 7 191l101 53c5 107 28 247 19 315-35 27 32 53-55 71-10 2-58 9-62 14-32 41-15 110 45 114 43 3 432 3 476-2 67-7 77-77 46-116-4-6-42-12-59-15-78-13-19-43-54-62-11-74 9-210 20-320l104-51c-32-77 20-88 9-195z" class="base stroke-color" /><path id="main" fill="url(#main-gradient)" d="M775 112H649v81l-114 9v-80l-131 1v81l-109-11v-81l-117 3c-12 98 48 121 7 191l101 53c5 107 28 247 19 315-35 27 32 53-55 71-10 2-58 9-62 14-32 41-15 110 45 114 43 3 432 3 476-2 67-7 77-77 46-116-4-6-42-12-59-15-78-13-19-43-54-62-11-74 9-210 20-320l104-51c-32-77 20-88 9-195z" class="base stroke-color stroke-medium" /><path id="deco-lines" fill="none" d="m239 277 389 2zm100 81h215zm0 331h243Zm-80 86h429Z" class="base stroke-color stroke-medium" opacity=".5" /><path id="deco-side" fill="none" d="M670 871c67-7 100-61 69-99-5-6-43-16-60-19-78-13-21-56-56-75-11-74 11-223 23-333l99-51c-28-59 21-100 9-182" class="base stroke-color stroke-medium" opacity=".5" /></svg>
+  <svg v-else-if="type === 'q'" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 933 933"><style id="style-base">.base{fill-opacity:1;fill-rule:evenodd;stroke-miterlimit:4;stroke-dasharray:none;stroke-linecap:round;stroke-linejoin:round;stroke-opacity:1}.stroke-medium{stroke-width:20}.stroke-color{stroke:#000}</style><defs id="defs1194"><linearGradient xlink:href="#fillGradient" id="main-gradient" x1="660.5" x2="757.7" y1="90.4" y2="103.7" gradientTransform="matrix(6.24848 0 0 7.12396 -3975 -259)" gradientUnits="userSpaceOnUse" /><linearGradient id="fillGradient"><stop id="stop0" offset="0" stop-color="#7f899b" stop-opacity="1" /><stop id="stop1" offset="1" stop-color="#1c1c2f" stop-opacity="1" /></linearGradient></defs><path id="boundary" fill="none" stroke-width="35" d="M593 82c-29 0-53 22-53 48 0 17 10 32 25 41-43 105-76 239-108 240-44 0-70-137-99-236 15-8 26-24 26-41 0-27-24-48-53-48s-52 21-52 48c0 23 18 42 42 46 10 109 28 237-10 259-39 23-84-108-150-212 8-9 13-20 13-32 0-26-23-48-52-48s-52 22-53 48c-2 41 44 48 53 48 50 127 52 174 80 292 10 39 46 39 63 81 8 19 11 93-28 117-6 4-65 19-69 24-32 41-15 110 45 114 43 3 450 4 493-1 67-8 78-78 47-116-5-6-56-14-71-25-27-20-40-88-34-113 10-39 47-35 56-68 38-140 36-179 97-305h4c29 0 53-21 53-48 0-26-24-48-53-48s-53 22-53 48c0 13 6 24 14 32-76 95-128 230-165 209-44-25-10-144 5-260 23-5 39-24 39-46 0-26-23-48-52-48z" class="base stroke-color" /><path id="main" fill="url(#main-gradient)" d="M593 82c-29 0-53 22-53 48 0 17 10 32 25 41-43 105-76 239-108 240-44 0-70-137-99-236 15-8 26-24 26-41 0-27-24-48-53-48s-52 21-52 48c0 23 18 42 42 46 10 109 28 237-10 259-39 23-84-108-150-212 8-9 13-20 13-32 0-26-23-48-52-48s-52 22-53 48c-2 41 44 48 53 48 50 127 52 174 80 292 10 39 46 39 63 81 8 19 11 93-28 117-6 4-65 19-69 24-32 41-15 110 45 114 43 3 450 4 493-1 67-8 78-78 47-116-5-6-56-14-71-25-27-20-40-88-34-113 10-39 47-35 56-68 38-140 36-179 97-305h4c29 0 53-21 53-48 0-26-24-48-53-48s-53 22-53 48c0 13 6 24 14 32-76 95-128 230-165 209-44-25-10-144 5-260 23-5 39-24 39-46 0-26-23-48-52-48z" class="base stroke-color stroke-medium" /><path id="deco-lines" fill="none" d="M284 578h317zm12 140h243zm-55 74h428z" class="base stroke-color stroke-medium" opacity=".5" /><path id="deco-side" fill="none" d="M590 440c-53-47-15-146-2-264 22-6 39-24 39-46 0-27-24-39-53-39m111 780c67-7 78-68 47-107-5-6-56-13-71-24-27-20-40-107-34-132 10-39 44-35 54-68 42-140 38-170 99-296h4c29 0 55-21 55-47 0-27-24-39-53-39" class="base stroke-color stroke-medium" opacity=".5" /></svg>
+  <svg v-else-if="type === 'k'" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 933 933"><style id="style-base">.base{fill-opacity:1;fill-rule:evenodd;stroke-miterlimit:4;stroke-dasharray:none;stroke-linecap:round;stroke-linejoin:round;stroke-opacity:1}.stroke-medium{stroke-width:20}.stroke-color{stroke:#000}</style><defs id="defs787"><linearGradient xlink:href="#fillGradient" id="main-gradient" x1="660.5" x2="757.7" y1="90.4" y2="103.7" gradientTransform="matrix(6.24848 0 0 7.12397 -3963 -235)" gradientUnits="userSpaceOnUse" /><linearGradient id="fillGradient"><stop id="stop0" offset="0" stop-color="#7f899b" stop-opacity="1" /><stop id="stop1" offset="1" stop-color="#1c1c2f" stop-opacity="1" /></linearGradient></defs><path id="boundary" fill="none" stroke-width="35" d="M422 56c-7 24 3 53 2 83l-94-4v93l92-4-5 105-43-3C189 247 38 189 177 445c13 23 75 75 39 110 14 37 45 29 63 72 7 19 11 92-29 117-6 3-66 18-70 24-33 41-15 110 45 114 42 2 453 3 497-2 67-7 77-77 46-116-4-6-57-14-72-25-27-20-41-87-34-112 9-39 45-36 55-68-57-41 31-83 45-110 133-252 2-202-189-122l-48 1-5-104 91 4v-93l-93 4c-3-28 10-63 2-83z" class="base stroke-color" /><path id="main" fill="url(#main-gradient)" d="M422 56c-7 24 3 53 2 83l-94-4v93l92-4-5 105-43-3C189 247 38 189 177 445c13 23 75 75 39 110 14 37 45 29 63 72 7 19 11 92-29 117-6 3-66 18-70 24-33 41-15 110 45 114 42 2 453 3 497-2 67-7 77-77 46-116-4-6-57-14-72-25-27-20-41-87-34-112 9-39 45-36 55-68-57-41 31-83 45-110 133-252 2-202-189-122l-48 1-5-104 91 4v-93l-93 4c-3-28 10-63 2-83z" class="base stroke-color stroke-medium" /><path id="deco-side" fill="none" d="M696 880c67-7 81-68 50-107-4-6-52-9-67-20-27-20-42-101-36-126 10-39 36-36 46-68-47-45 31-74 45-100 133-253 41-194-171-119l-52-1-5-130 87 4 2-67-90 2c-6-29 11-58 3-82m-91 146-75-1" class="base stroke-color stroke-medium" opacity=".5" /><path id="deco-lines" fill="none" d="M258 560c152 17 275 15 382 0M311 728h242zm-56 65h429z" class="base stroke-color stroke-medium" opacity=".5" /><path id="deco-top" fill="none" d="M376 335c-55-13-170-60-216-59-13 0-21 4-22 13m72 176c58 71 494 59 555-95" class="base stroke-color stroke-medium" opacity=".5" /></svg>
+  <svg v-else-if="type === 'P'" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 933 933"><style id="style-base">.base{fill-opacity:1;fill-rule:evenodd;stroke-miterlimit:4;stroke-dasharray:none;stroke-linecap:round;stroke-linejoin:round;stroke-opacity:1}.stroke-medium{stroke-width:20}.stroke-color{stroke:#000}</style><defs id="defs2718"><linearGradient xlink:href="#fillGradient" id="main-gradient" x1="462.1" x2="1135.2" y1="776.1" y2="839.4" gradientTransform="matrix(.64593 0 0 .64727 -27 91)" gradientUnits="userSpaceOnUse" /><linearGradient id="fillGradient"><stop id="stop0" offset="0" stop-color="#fff" stop-opacity="1" /><stop id="stop1" offset="1" stop-color="#bfd3d7" stop-opacity="1" /></linearGradient></defs><path id="boundary" fill="none" stroke-width="35" d="M464 200c-72 1-130 58-135 124-2 33 46 89 74 106-138 31-3 71-3 128 0 40-53 66-24 91-16 64-63 88-119 114-28 35-13 95 39 98 37 3 307 3 345-1 59-6 68-67 41-101-57-17-119-42-131-108 30-26-32-53-32-93 0-57 150-90 7-128 27-17 72-73 73-106 1-65-66-125-135-124Z" class="base stroke-color" /><path id="main" fill="url(#main-gradient)" d="M464 200c-72 1-130 58-135 124-2 33 46 89 74 106-138 31-3 71-3 128 0 40-53 66-24 91-16 64-63 88-119 114-28 35-13 95 39 98 37 3 307 3 345-1 59-6 68-67 41-101-57-17-119-42-131-108 30-26-32-53-32-93 0-57 150-90 7-128 27-17 72-73 73-106 1-65-66-125-135-124Z" class="base stroke-color stroke-medium" /><path id="deco-side" fill="none" d="M618 864c58-7 67-58 40-92-57-18-118-52-131-118 30-25-31-52-31-93 0-57 150-90 6-127 28-18 72-74 73-107 2-65-58-120-127-119" class="base stroke-color stroke-medium" opacity=".5" /><path id="deco-lines" fill="none" d="M417 466h94zm-9 162h112zm-99 153h320z" class="base stroke-color stroke-medium" opacity=".5" /></svg>
+  <svg v-else-if="type === 'N'" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 933 933"><style id="style-base">.base{fill-opacity:1;fill-rule:evenodd;stroke-miterlimit:4;stroke-dasharray:none;stroke-linecap:round;stroke-linejoin:round;stroke-opacity:1}.stroke-medium{stroke-width:20}.stroke-color{stroke:#000}</style><defs id="defs2202"><linearGradient xlink:href="#fillGradient" id="main-gradient" x1="824.6" x2="992.7" y1="119.5" y2="168.5" gradientTransform="translate(-3372 -24) scale(4.2241)" gradientUnits="userSpaceOnUse" /><linearGradient id="fillGradient"><stop id="stop0" offset="0" stop-color="#fff" stop-opacity="1" /><stop id="stop1" offset="1" stop-color="#bfd3d7" stop-opacity="1" /></linearGradient></defs><path id="boundary" fill="none" stroke-width="35" d="m394 44-24 83-59-68-4 89c-91 91-38 111-172 316-9 13-25 24-29 42-15 80 88 60 106 69 71-57 100-58 137-98 42 15 108-3 147-45-26 77-136 132-169 267 39 37 0 74-47 71-52 12-34 109 19 109l452-3c63 0 72-92 30-108-40 0-58-41-26-69 4-74 3-143-12-214-2-7 2-22 10-24-6-23-30-45-40-69-5-11-18-17 19-18-11-22-61-58-76-78-6-7 25-13 19-19-35-37-85-50-109-68-8-6 23-15 14-21-33-21-102-48-145-65z" class="base stroke-color" /><path id="main" fill="url(#main-gradient)" d="m394 44-24 83-59-68-4 89c-91 91-38 111-172 316-9 13-25 24-29 42-15 80 88 60 106 69 71-57 100-58 137-98 42 15 108-3 147-45-26 77-136 132-169 267 39 37 0 74-47 71-52 12-34 109 19 109l452-3c63 0 72-92 30-108-40 0-58-41-26-69 4-74 3-143-12-214-2-7 2-22 10-24-6-23-30-45-40-69-5-11-18-17 19-18-11-22-61-58-76-78-6-7 25-13 19-19-35-37-85-50-109-68-8-6 23-15 14-21-33-21-102-48-145-65z" class="base stroke-color stroke-medium" /><path id="eyebrow" fill="none" d="M336 282c-28 2-50 16-65 41" class="base stroke-color stroke-medium" /><path id="eye" fill="none" d="M310 316c12 8 25 5 22-12" class="base stroke-color stroke-medium" /><path id="nose" fill="none" d="M155 501c-13-5-23 17-15 17" class="base stroke-color stroke-medium" /><path id="cheek" fill="none" d="M508 405c10-13 9-19 11-27" class="base stroke-color stroke-medium" /><path id="deco-lines" fill="none" d="M644 699H370zm64 64H360z" class="base stroke-color stroke-medium" opacity=".5" /><path id="deco-side" fill="none" d="M723 876c63 0 78-76 36-92-39 0-58-60-25-88 3-74 3-143-13-213-2-7 2-23 11-24-7-24-31-36-41-60-5-12-18-17 20-19-12-21-61-57-77-77-5-7 25-13 19-20-34-36-84-49-109-68-8-6 23-14 15-20-33-22-81-55-124-72" class="base stroke-color stroke-medium" opacity=".5" /></svg>
+  <svg v-else-if="type === 'B'" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 933 933"><style id="style-base">.base{fill-opacity:1;fill-rule:evenodd;stroke-miterlimit:4;stroke-dasharray:none;stroke-linecap:round;stroke-linejoin:round;stroke-opacity:1}.stroke-medium{stroke-width:20}.stroke-color{stroke:#000}</style><defs id="defs1927"><linearGradient xlink:href="#fillGradient" id="main-gradient" x1="683" x2="739.5" y1="74" y2="69" gradientTransform="matrix(6.26023 0 0 7.12396 -3967 -262)" gradientUnits="userSpaceOnUse" /><linearGradient id="fillGradient"><stop id="stop0" offset="0" stop-color="#fff" stop-opacity="1" /><stop id="stop1" offset="1" stop-color="#bfd3d7" stop-opacity="1" /></linearGradient></defs><path id="boundary" fill="none" stroke-width="35" d="M468 50c-34 0-62 23-62 52 0 8 2 16 6 23-71 20-122 79-122 164 3 78 42 150 105 194-63 25-3 53-3 118-46 83-62 91-140 149-6 4-52 9-57 14-32 42-15 110 46 114 42 3 417 4 460-1 67-7 78-78 47-116-5-6-52-12-59-16-61-33-139-82-160-144 0-65 71-93 8-118 65-45 102-110 109-194 4-46-21-92-60-125l-65 146c-6 15-23 21-38 15-15-7-22-24-15-39l67-153a197 197 0 0 0-13-5c5-8 8-17 8-26 0-29-28-52-62-52z" class="base stroke-color" /><path id="main" fill="url(#main-gradient)" d="M468 50c-34 0-62 23-62 52 0 8 2 16 6 23-71 20-122 79-122 164 3 78 42 150 105 194-63 25-3 53-3 118-46 83-62 91-140 149-6 4-52 9-57 14-32 42-15 110 46 114 42 3 417 4 460-1 67-7 78-78 47-116-5-6-52-12-59-16-61-33-139-82-160-144 0-65 71-93 8-118 65-45 102-110 109-194 4-46-21-92-60-125l-65 146c-6 15-23 21-38 15-15-7-22-24-15-39l67-153a197 197 0 0 0-13-5c5-8 8-17 8-26 0-29-28-52-62-52z" class="base stroke-color stroke-medium" /><path id="deco-lines" fill="none" d="M413 510h105zm-20 200h145zm-100 80h355z" class="base stroke-color stroke-medium" opacity=".5" /><path id="deco-top" fill="none" d="M350 410c40 48 237 35 287-129" class="base stroke-color stroke-medium" opacity=".5" /><path id="deco-side" fill="none" d="M685 867c67-7 77-49 46-88-5-6-52-11-58-15-62-34-139-92-160-153 0-66 70-113 7-137 65-45 102-110 110-195 4-46-5-52-44-85" class="base stroke-color stroke-medium" opacity=".5" /></svg>
+  <svg v-else-if="type === 'R'" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 933 933"><style id="style-base">.base{fill-opacity:1;fill-rule:evenodd;stroke-miterlimit:4;stroke-dasharray:none;stroke-linecap:round;stroke-linejoin:round;stroke-opacity:1}.stroke-medium{stroke-width:20}.stroke-color{stroke:#000}</style><defs id="defs1553"><linearGradient xlink:href="#fillGradient" id="main-gradient" x1="660.5" x2="757.7" y1="90.4" y2="103.7" gradientTransform="matrix(6.24848 0 0 7.11058 -3961 -265)" gradientUnits="userSpaceOnUse" /><linearGradient id="fillGradient"><stop id="stop0" offset="0" stop-color="#fff" stop-opacity="1" /><stop id="stop1" offset="1" stop-color="#bfd3d7" stop-opacity="1" /></linearGradient></defs><path id="boundary" fill="none" stroke-width="35" d="M775 112H649v81l-114 9v-80l-131 1v81l-109-11v-81l-117 3c-12 98 48 121 7 191l101 53c5 107 28 247 19 315-35 27 32 53-55 71-10 2-58 9-62 14-32 41-15 110 45 114 43 3 432 3 476-2 67-7 77-77 46-116-4-6-42-12-59-15-78-13-19-43-54-62-11-74 9-210 20-320l104-51c-32-77 20-88 9-195z" class="base stroke-color" /><path id="main" fill="url(#main-gradient)" d="M775 112H649v81l-114 9v-80l-131 1v81l-109-11v-81l-117 3c-12 98 48 121 7 191l101 53c5 107 28 247 19 315-35 27 32 53-55 71-10 2-58 9-62 14-32 41-15 110 45 114 43 3 432 3 476-2 67-7 77-77 46-116-4-6-42-12-59-15-78-13-19-43-54-62-11-74 9-210 20-320l104-51c-32-77 20-88 9-195z" class="base stroke-color stroke-medium" /><path id="deco-lines" fill="none" d="m239 277 389 2zm100 81h215zm0 331h243Zm-80 86h429Z" class="base stroke-color stroke-medium" opacity=".5" /><path id="deco-side" fill="none" d="M670 871c67-7 100-61 69-99-5-6-43-16-60-19-78-13-21-56-56-75-11-74 11-223 23-333l99-51c-28-59 21-100 9-182" class="base stroke-color stroke-medium" opacity=".5" /></svg>
+  <svg v-else-if="type === 'Q'" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 933 933"><style id="style-base">.base{fill-opacity:1;fill-rule:evenodd;stroke-miterlimit:4;stroke-dasharray:none;stroke-linecap:round;stroke-linejoin:round;stroke-opacity:1}.stroke-medium{stroke-width:20}.stroke-color{stroke:#000}</style><defs id="defs1194"><linearGradient xlink:href="#fillGradient" id="main-gradient" x1="660.5" x2="757.7" y1="90.4" y2="103.7" gradientTransform="matrix(6.24848 0 0 7.12396 -3975 -259)" gradientUnits="userSpaceOnUse" /><linearGradient id="fillGradient"><stop id="stop0" offset="0" stop-color="#fff" stop-opacity="1" /><stop id="stop1" offset="1" stop-color="#bfd3d7" stop-opacity="1" /></linearGradient></defs><path id="boundary" fill="none" stroke-width="35" d="M593 82c-29 0-53 22-53 48 0 17 10 32 25 41-43 105-76 239-108 240-44 0-70-137-99-236 15-8 26-24 26-41 0-27-24-48-53-48s-52 21-52 48c0 23 18 42 42 46 10 109 28 237-10 259-39 23-84-108-150-212 8-9 13-20 13-32 0-26-23-48-52-48s-52 22-53 48c-2 41 44 48 53 48 50 127 52 174 80 292 10 39 46 39 63 81 8 19 11 93-28 117-6 4-65 19-69 24-32 41-15 110 45 114 43 3 450 4 493-1 67-8 78-78 47-116-5-6-56-14-71-25-27-20-40-88-34-113 10-39 47-35 56-68 38-140 36-179 97-305h4c29 0 53-21 53-48 0-26-24-48-53-48s-53 22-53 48c0 13 6 24 14 32-76 95-128 230-165 209-44-25-10-144 5-260 23-5 39-24 39-46 0-26-23-48-52-48z" class="base stroke-color" /><path id="main" fill="url(#main-gradient)" d="M593 82c-29 0-53 22-53 48 0 17 10 32 25 41-43 105-76 239-108 240-44 0-70-137-99-236 15-8 26-24 26-41 0-27-24-48-53-48s-52 21-52 48c0 23 18 42 42 46 10 109 28 237-10 259-39 23-84-108-150-212 8-9 13-20 13-32 0-26-23-48-52-48s-52 22-53 48c-2 41 44 48 53 48 50 127 52 174 80 292 10 39 46 39 63 81 8 19 11 93-28 117-6 4-65 19-69 24-32 41-15 110 45 114 43 3 450 4 493-1 67-8 78-78 47-116-5-6-56-14-71-25-27-20-40-88-34-113 10-39 47-35 56-68 38-140 36-179 97-305h4c29 0 53-21 53-48 0-26-24-48-53-48s-53 22-53 48c0 13 6 24 14 32-76 95-128 230-165 209-44-25-10-144 5-260 23-5 39-24 39-46 0-26-23-48-52-48z" class="base stroke-color stroke-medium" /><path id="deco-lines" fill="none" d="M284 578h317zm12 140h243zm-55 74h428z" class="base stroke-color stroke-medium" opacity=".5" /><path id="deco-side" fill="none" d="M590 440c-53-47-15-146-2-264 22-6 39-24 39-46 0-27-24-39-53-39m111 780c67-7 78-68 47-107-5-6-56-13-71-24-27-20-40-107-34-132 10-39 44-35 54-68 42-140 38-170 99-296h4c29 0 55-21 55-47 0-27-24-39-53-39" class="base stroke-color stroke-medium" opacity=".5" /></svg>
+  <svg v-else-if="type === 'K'" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 933 933"><style id="style-base">.base{fill-opacity:1;fill-rule:evenodd;stroke-miterlimit:4;stroke-dasharray:none;stroke-linecap:round;stroke-linejoin:round;stroke-opacity:1}.stroke-medium{stroke-width:20}.stroke-color{stroke:#000}</style><defs id="defs787"><linearGradient xlink:href="#fillGradient" id="main-gradient" x1="660.5" x2="757.7" y1="90.4" y2="103.7" gradientTransform="matrix(6.24848 0 0 7.12397 -3963 -235)" gradientUnits="userSpaceOnUse" /><linearGradient id="fillGradient"><stop id="stop0" offset="0" stop-color="#fff" stop-opacity="1" /><stop id="stop1" offset="1" stop-color="#bfd3d7" stop-opacity="1" /></linearGradient></defs><path id="boundary" fill="none" stroke-width="35" d="M422 56c-7 24 3 53 2 83l-94-4v93l92-4-5 105-43-3C189 247 38 189 177 445c13 23 75 75 39 110 14 37 45 29 63 72 7 19 11 92-29 117-6 3-66 18-70 24-33 41-15 110 45 114 42 2 453 3 497-2 67-7 77-77 46-116-4-6-57-14-72-25-27-20-41-87-34-112 9-39 45-36 55-68-57-41 31-83 45-110 133-252 2-202-189-122l-48 1-5-104 91 4v-93l-93 4c-3-28 10-63 2-83z" class="base stroke-color" /><path id="main" fill="url(#main-gradient)" d="M422 56c-7 24 3 53 2 83l-94-4v93l92-4-5 105-43-3C189 247 38 189 177 445c13 23 75 75 39 110 14 37 45 29 63 72 7 19 11 92-29 117-6 3-66 18-70 24-33 41-15 110 45 114 42 2 453 3 497-2 67-7 77-77 46-116-4-6-57-14-72-25-27-20-41-87-34-112 9-39 45-36 55-68-57-41 31-83 45-110 133-252 2-202-189-122l-48 1-5-104 91 4v-93l-93 4c-3-28 10-63 2-83z" class="base stroke-color stroke-medium" /><path id="deco-side" fill="none" d="M696 880c67-7 81-68 50-107-4-6-52-9-67-20-27-20-42-101-36-126 10-39 36-36 46-68-47-45 31-74 45-100 133-253 41-194-171-119l-52-1-5-130 87 4 2-67-90 2c-6-29 11-58 3-82m-91 146-75-1" class="base stroke-color stroke-medium" opacity=".5" /><path id="deco-lines" fill="none" d="M258 560c152 17 275 15 382 0M311 728h242zm-56 65h429z" class="base stroke-color stroke-medium" opacity=".5" /><path id="deco-top" fill="none" d="M376 335c-55-13-170-60-216-59-13 0-21 4-22 13m72 176c58 71 494 59 555-95" class="base stroke-color stroke-medium" opacity=".5" /></svg>
+</template>
+
+<script setup lang="ts">
+import type { Piece } from '@bedard/hexchess'
+
+defineProps<{
+  type: Piece | null
+}>()
+</script>