@bedard/hexboard 0.0.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (38) hide show
  1. package/.github/workflows/build.yml +65 -0
  2. package/.github/workflows/release.yml +0 -0
  3. package/.vscode/settings.json +5 -0
  4. package/LICENSE +21 -0
  5. package/README.md +8 -0
  6. package/dist/index.d.ts +127 -0
  7. package/dist/index.js +1056 -0
  8. package/eslint.config.js +85 -0
  9. package/index.html +22 -0
  10. package/package.json +58 -0
  11. package/src/lib/components/hexboard/Hexboard.vue +865 -0
  12. package/src/lib/components/hexboard/constants.ts +389 -0
  13. package/src/lib/components/hexboard/dom.ts +19 -0
  14. package/src/lib/components/hexboard/geometry.ts +59 -0
  15. package/src/lib/components/hexboard/haptics.ts +56 -0
  16. package/src/lib/components/hexboard/pieces/Celtic.vue +22 -0
  17. package/src/lib/components/hexboard/pieces/Fantasy.vue +22 -0
  18. package/src/lib/components/hexboard/pieces/Gioco.vue +22 -0
  19. package/src/lib/components/hexboard/pieces/Spatial.vue +22 -0
  20. package/src/lib/components/hexboard/pieces/index.ts +4 -0
  21. package/src/lib/components/hexboard/types.ts +28 -0
  22. package/src/lib/index.ts +1 -0
  23. package/src/sandbox/App.vue +28 -0
  24. package/src/sandbox/components/Button.vue +8 -0
  25. package/src/sandbox/components/icons/Github.vue +3 -0
  26. package/src/sandbox/components/icons/Menu.vue +3 -0
  27. package/src/sandbox/components/icons/X.vue +3 -0
  28. package/src/sandbox/index.ts +5 -0
  29. package/src/sandbox/tailwind.css +59 -0
  30. package/src/sandbox/views/HomeToolbar.vue +80 -0
  31. package/src/tests/example.test.tsx +18 -0
  32. package/src/tests/hexboard.test.tsx +832 -0
  33. package/src/tests/utils.ts +26 -0
  34. package/tsconfig.json +30 -0
  35. package/tsconfig.node.json +10 -0
  36. package/vite.config.ts +42 -0
  37. package/vite.sandbox.config.ts +21 -0
  38. package/vitest.config.ts +35 -0
package/src/lib/components/hexboard/pieces/Fantasy.vue ADDED
@@ -0,0 +1,22 @@
1
+ <template>
2
+ <svg v-if="type === 'p'" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 933.33 933.33"><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="defs36222"><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><linearGradient xlink:href="#fillGradient" id="head-gradient" x1="586.53" x2="1126.02" y1="328.04" y2="534.2" gradientTransform="matrix(.73447 0 0 .736 -84.66 58.44)" gradientUnits="userSpaceOnUse" /><linearGradient xlink:href="#fillGradient" id="shoulders-gradient" x1="275.24" x2="862.65" y1="458.66" y2="560.75" gradientTransform="translate(36 28)" gradientUnits="userSpaceOnUse" /><linearGradient xlink:href="#fillGradient" id="pawn-body-gradient" x1="300.27" x2="774.05" y1="623.78" y2="764.9" gradientTransform="translate(36 28)" gradientUnits="userSpaceOnUse" /></defs><path id="boundary" fill="none" stroke-width="35" d="M473.54 222.8a122.41 110.4 0 0 0-122.41 110.4 122.41 110.4 0 0 0 122.4 110.4 122.41 110.4 0 0 0 122.42-110.4 122.41 110.4 0 0 0-122.41-110.4Zm-3.72 223.77c-30.33.31-58.7 5.23-93.47 14.16-74.2 19.07-100.1 66.02-100.1 66.02h156.33c-9 144.95-88.58 191.26-127.13 218.5-34.2 24.18-25.46 82.35 19.9 85.32 28.12 1.84 276.62 2.36 305.66-.85 51.38-5.67 52.84-66.7 19.69-87.3-49.35-30.68-125.94-65-137.16-215.67H685.1s-43.43-51.83-110.03-66.68c-42.62-9.5-74.9-13.8-105.24-13.5z" class="base stroke-color" /><ellipse id="head" cx="473.54" cy="333.21" fill="url(#head-gradient)" class="base stroke-color stroke-medium" rx="122.41" ry="110.4" /><path id="pawn-body" fill="url(#pawn-body-gradient)" d="M433.42 495.01c1.47 170.18-86.74 221.1-127.97 250.25-34.2 24.17-25.46 82.34 19.9 85.3 28.12 1.85 276.62 2.37 305.66-.84 51.38-5.67 52.84-66.7 19.69-87.3-52.61-32.71-136.2-69.54-138.5-247.1-.44-33.3-79.04-30-78.78-.3z" class="base stroke-color stroke-medium" /><path id="shoulders" fill="url(#shoulders-gradient)" d="M376.35 460.74c-74.2 19.06-100.1 66.01-100.1 66.01h408.84s-43.43-51.83-110.03-66.68c-85.23-19-129.17-17.2-198.7.67z" class="base stroke-color stroke-medium" /><path id="lower-line" fill="none" d="M379.12 739.67h187.9" class="base stroke-color stroke-medium" /></svg>
3
+ <svg v-else-if="type === 'n'" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 933.33 933.33"><style id="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="defs36222"><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><linearGradient xlink:href="#fillGradient" id="hair4-gradient" x1="705.29" x2="787.13" y1="378.29" y2="465.62" gradientTransform="translate(7.03 14.37) scale(1.03317)" gradientUnits="userSpaceOnUse" /><linearGradient xlink:href="#fillGradient" id="hair3-gradient" x1="667.03" x2="739.15" y1="299.33" y2="348.42" gradientTransform="translate(11.16 14.37) scale(1.03317)" gradientUnits="userSpaceOnUse" /><linearGradient xlink:href="#fillGradient" id="hair2-gradient" x1="598.68" x2="705.53" y1="209.76" y2="232.29" gradientTransform="translate(7.03 14.37) scale(1.03317)" gradientUnits="userSpaceOnUse" /><linearGradient xlink:href="#fillGradient" id="hair1-gradient" x1="493.79" x2="625.85" y1="157.91" y2="159.49" gradientTransform="translate(11.16 8.17) scale(1.03317)" gradientUnits="userSpaceOnUse" /><linearGradient xlink:href="#fillGradient" id="body-gradient" x1="265.65" x2="753.21" y1="255.94" y2="854.33" gradientTransform="translate(7.03 14.37) scale(1.03317)" gradientUnits="userSpaceOnUse" /></defs><path id="boundary" fill="none" stroke-width="35" d="M392.06 80.14c-18.36-3-11.42 61.28-21.76 85.2-17.72-16.27-32.58-55.02-71.12-61.9-9.76 32.5 17.09 82.29 6.86 95.1-54.43 68.26-43.29 69.9-71.7 145.17-14.11 37.42-50.6 102.3-86.53 144.44-34.5 40.45-39.45 90.11-23.43 107.38 33.01 35.59 72.53 20.25 92.67-3.13-6.86 14.01-12.93 31.98-4.28 38.68 20.07 15.53 145.3-98.02 159.1-92.74 90.13 34.42 181.5-33.94 181.28-112.96 2.6 58.75-8.3 98.14-67.92 138.21-58.04 39.02-176.52 117.76-204.58 230.25-5.88 23.58 8.24 63.05 38.75 63.54 125.9 2 275.79 2.53 400.98.2 101.42-1.87 104.4-582.63-258.52-694.3-30.3-24.46-51.43-80.14-69.8-83.14Zm237.78 99.9c18.83 1.19-51.66-28.11-60.85-39.83-3.99-5.09-15.8-6.83-29.74-6.7-30.68.26-71.73 9.56-62.7 12.2m227.08 126.66c15.36 9.78 30.78-29.67 21-29.67-14.7 0-39.67 6.9-35.15-9.7 4.96-18.23-17.98-23.86-41.15-24.18-23.16-.3-46.56 4.7-42.53 7.77m161.56 163.73c22 7.32-1.02-18.93-12.12-32.43s7.58-19.55 6.28-28.11c-3.17-20.71-37.87-24.1-58.33-23.88m72.27 181.67c7.77 15.35 39.03 13.35 52.5 8.84 18.16-6.07-43.9-24.93-29.92-53.67 7.75-15.92-43.91-31.7-55.05-32.1" class="base stroke-color" /><path id="body" fill="url(#body-gradient)" d="M553.15 425.38c.22 79.03-91.15 147.38-181.28 112.95-13.8-5.27-139.03 108.28-159.1 92.75-15.83-12.26 17.55-62.79 15.12-56.33-11.55 30.73-62.56 64.93-103.51 20.78-16.02-17.27-11.07-66.93 23.43-107.38 35.93-42.13 72.42-107.01 86.54-144.43 28.4-75.27 17.26-76.91 71.69-145.17 10.23-12.82-16.62-62.6-6.86-95.1 38.54 6.87 53.4 45.63 71.13 61.89 10.33-23.92 3.39-88.2 21.75-85.2 18.37 3 39.5 58.68 69.8 83.13C824.77 274.95 821.8 855.71 720.38 857.6c-125.2 2.32-275.07 1.8-400.98-.21-30.5-.49-44.63-39.96-38.74-63.54 28.05-112.5 146.53-191.23 204.57-230.25 59.61-40.07 70.53-79.46 67.92-138.21z" class="base stroke-color stroke-medium" /><path id="eyebrow" fill="none" d="M363.48 314.1c-30.04-5.55-56.38 3.17-78.13 24.82" class="base stroke-color stroke-medium" /><path id="eye" fill="none" d="M315.06 346.85c10.79 11 24.52 11.45 26.78-7.23" class="base stroke-color stroke-medium" /><path id="nose" fill="none" d="M162.8 545.72c-14.31-4.94-24.67 18.12-15.54 19.06" class="base stroke-color stroke-medium" /><path id="cheek1" fill="none" d="m334.42 500.28 9.8 12.18" class="base stroke-color stroke-medium" /><path id="cheek2" fill="none" d="m553.32 391.72.3-25.74" class="base stroke-color stroke-medium" /><path id="ear-right" fill="none" d="m343.72 178.28-10.45 5.46" class="base stroke-color stroke-medium" /><path id="ear-left" fill="none" d="M398.88 122.72c31.15 43.52 42.4 52.32 5.36 46.08" class="base stroke-color stroke-medium" /><path id="leg-line" fill="none" d="m459.7 763.94-26.63 63.53" class="base stroke-color stroke-medium" /><path id="hair1" fill="url(#hair1-gradient)" d="M476.55 145.72c89.44 26.22 74.35 7.3 93.22 38.01 10.57 17.21 25.21-5.86 60.07-3.68 18.83 1.18-51.66-28.13-60.85-39.84-12.76-16.27-105.57 1.66-92.44 5.5z" class="base stroke-color stroke-medium" /><path id="hair2" fill="url(#hair2-gradient)" d="M605.8 216.59c28.1 21.35 48.68-.34 47.57 36.72-.77 25.45 33.58 8.45 50.26 19.06 15.37 9.78 30.78-29.67 21-29.67-14.7 0-39.67 6.9-35.15-9.7 9.91-36.45-91.75-22.55-83.68-16.41z" class="base stroke-color stroke-medium" /><path id="hair3" fill="url(#hair3-gradient)" d="M688.43 297.17c5.47 1.91 35.26 22.07 33.88 31.66-7.11 49.46 29.36 46.26 45.05 51.49 22 7.32-1.02-18.93-12.12-32.43s7.58-19.55 6.28-28.11c-4.6-30.13-75.94-23.61-73.08-22.61z" class="base stroke-color stroke-medium" /><path id="hair4" fill="url(#hair4-gradient)" d="M740.98 401.45c5.23 9.1 17.48 19.43 21.36 33.72 3.89 14.3 5.35 27.04 13.12 42.4 7.77 15.35 39.02 13.35 52.5 8.84 18.16-6.07-43.9-24.92-29.92-53.67 8.85-18.2-59.88-36.21-57.06-31.3z" class="base stroke-color stroke-medium" /></svg>
4
+ <svg v-else-if="type === 'b'" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 933.33 933.33"><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}.fill-color{fill:#7f899b}</style><defs id="defs36222"><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><linearGradient xlink:href="#fillGradient" id="shoulders-gradient" x1="136.1" x2="784.78" y1="629.62" y2="865.1" gradientTransform="matrix(1.2051 0 0 1.18532 -52.88 -98.27)" gradientUnits="userSpaceOnUse" /><linearGradient xlink:href="#fillGradient" id="top-deco-1-gradient" x1="321.16" x2="395.43" y1="90.16" y2="128.46" gradientTransform="matrix(1.07338 0 0 1.05577 6.2 -.71)" gradientUnits="userSpaceOnUse" /><linearGradient xlink:href="#fillGradient" id="top-deco-2-gradient" x1="321.16" x2="395.43" y1="90.16" y2="128.46" gradientTransform="matrix(1.07338 0 0 1.05577 155.72 -4.82)" gradientUnits="userSpaceOnUse" /><linearGradient xlink:href="#fillGradient" id="hat-2-gradient" x1="192.3" x2="825.78" y1="446.01" y2="717.34" gradientTransform="matrix(1.07338 0 0 1.05577 6.2 -.71)" gradientUnits="userSpaceOnUse" /><linearGradient xlink:href="#fillGradient" id="crown-base-gradient" x1="192.3" x2="825.78" y1="446.01" y2="717.34" gradientTransform="matrix(1.07338 0 0 1.05577 6.2 -.71)" gradientUnits="userSpaceOnUse" /><linearGradient xlink:href="#fillGradient" id="hat-1-gradient" x1="721.62" x2="541.27" y1="220.04" y2="599.38" gradientTransform="matrix(1.07338 0 0 1.05577 6.2 -.71)" gradientUnits="userSpaceOnUse" /></defs><path id="boundary" fill="none" stroke-width="35" d="M560.57 141.42c-18.93-19.68 19.55-33.92 5.48-50.34-4.87-5.69-11.66-8.32-18.49-8.42a28.41 28.41 0 0 0-18.8 6.7c-18.08 15.62 16.5 29.9 3.1 52.27m-120.8 3.9c-18.94-19.68 19.54-33.92 5.47-50.34-4.87-5.7-11.65-8.32-18.49-8.42a28.4 28.4 0 0 0-18.79 6.7c-18.09 15.62 16.49 29.9 3.1 52.27m226.43 633.58s-2.1-38.02 4.38-54.66a14.5 14.5 0 0 0-2.33-9.62c4.54.7 8.62 1.42 12.17 2.14a336.04 336.04 0 0 0 10.05-48.9l1.6 4.42c21.99-24.41 57.8-90.4 56.74-157.4-1.06-67-5.3-95.18-25.75-157.89a515.64 515.64 0 0 0-20.28-51.83c9.8-19.13 19.48-38.3 29.35-57.4 14.58-21.22 42.26-28.33 58.6-47.94 10.41-11.23 17.07-26.11 15.4-41.53-1.08-25.65-16.18-53.41-43.17-59.52a59.47 59.47 0 0 0-17-1.55c-22.1.2-38.59 18.05-47.75 36.18-6.06 11.51-16.76 19.9-22.7 31.4-1.25 6.92 8.8 9.17 14.09 7.68 12.93-2.7 23.18-12.75 27.55-24.84 5.18-12.44 16.88-22.23 30.75-23.13 13.62-2.36 26.2 8.17 28.95 20.98 3.96 13.43 2.17 29.25-8.83 39-17.15 17.7-43.18 25.62-57.62 46.15-7.52 14.6-15.01 29.22-22.53 43.82-26.08-50.12-57.53-94.11-82.96-117.63-31.37 17.7-61.79 51.73-73.4 71l.9 2.47c-23.42-26.75-49.24-50.48-78.17-71.03-80.28 69.5-158.69 226.2-173.12 307.28-14.42 81.1.1 153.4 24.73 188.18 15.44 21.78 33.25 55.94 57.7 64.47a113.27 113.27 0 0 1 6.11-2.07 13.6 13.6 0 0 0-1.6 10.29c10.64 23.1 2.24 52.82 2.24 52.82s25.52-3.48 62.8-6.16m-9.47 19.61c-6.3.79-12.64 1.54-18.82 2.48-31.81 4.84-42.26 13.36-62.67 20.08-36.01 11.87-163.07-17.53-173.06 11.61-10 29.15 136.77 26.5 218.52 25.6 2.94-.02 5.73-.21 8.54-.38-1.25 2.89-2.54 5.75-3.77 8.65-1.89 7.18-7.56 15.13-4.52 22.6 4.8 3.66 10.84-2 15-4.49 9.86-8.86 17.12-19.88 23.73-31.33 42.09-10.36 67.11-33.43 90.45-33.47 29.78-.04 56.95 37.5 129.37 37.63 38.86.07 243.43 4.09 232.06-26.41-11.37-30.5-140.56 10.46-183.82-11.23-22.64-11.36-29.29-14.05-58.58-18.41" class="base stroke-color" /><path id="shoulders" fill="url(#shoulders-gradient)" d="M330.18 853.89c67.27-.74 99.66-38.38 129.43-38.43 29.78-.04 56.95 37.51 129.37 37.63 38.86.07 243.43 4.09 232.06-26.41-11.37-30.5-140.56 10.46-183.82-11.23-22.64-11.36-29.29-14.05-58.58-18.41-79.01-11.78-159.8-11.3-231.25-.45-31.81 4.84-42.26 13.36-62.67 20.08-36 11.87-163.07-17.53-173.06 11.61-10 29.15 136.77 26.5 218.52 25.6z" class="base stroke-color stroke-medium" /><path id="crown-base" fill="url(#crown-base-gradient)" d="M613.16 724.66c6.48-56.45-315.7-52.28-302.53 3.18 10.65 23.1 2.25 52.82 2.25 52.82s74.36-10.38 157.13-9.08c82.76 1.29 138.77 7.74 138.77 7.74s-2.1-38.02 4.38-54.66z" class="base stroke-color stroke-medium" /><path id="hat-1" fill="url(#hat-1-gradient)" d="M474.1 228.25c11.6-19.27 42.02-53.3 73.39-71 38.89 35.96 91.92 119.7 118.15 200.16 20.45 62.71 24.69 90.9 25.75 157.89 1.07 67-34.75 132.99-56.74 157.4" class="base stroke-color stroke-medium" /><path id="hat-2" fill="url(#hat-2-gradient)" d="M306.14 719.62c-24.46-8.53-42.27-42.69-57.7-64.47-24.64-34.78-39.16-107.09-24.74-188.18 14.43-81.09 92.84-237.78 173.12-307.28 97.86 69.5 160.96 174.58 210.76 314.6 26.65 74.93 39.88 156.93 15.42 242.9-57.08-11.6-250.37-22.58-316.86 2.43z" class="base stroke-color stroke-medium" /><path id="jewel" fill="none" d="M468.53 751.36c-10.23-2.71-13.36 2.07-17.11-.99-4.6-3.75-4.34-19.36-1.29-23.32 2.6-3.4 36.1-3.82 39.39-.7 3.06 2.91-.1 21.82-2.93 26.6" class="base stroke-color stroke-medium" /><path id="cross" d="M415.5 367.29c-12.27 1.91-18.38 15.14-16.84 26.36-.21 9.6 4.06 21.95-3.96 29.46-10.85 3.55-22.6-.9-33.65-1.82-9.1-.82-20.08-4.2-28.17 1.56-6.2 7.22 1.04 18.12 9.02 20.55 16.05 6.87 35.1 3.29 50.55 11.42 5.33 4.84 4.24 13.26 5.87 19.7 5.02 38.32 4.75 77.72 16.54 114.84 3.08 8.15 7.9 19.46 18.2 19.54 7.97-2.68 6.97-13.08 7.39-19.8-.97-42.1-12.84-83.13-14.73-125.14-.2-4.14.17-9.33 5.6-9.77 19.29-5.46 41.81.62 59.34-10.92 7.2-3.84 13.21-18.15 1.55-20.02-20.57-2.98-41.35 5.74-61.8 1.94-6.32-2.2-5.76-10.82-6.5-16.23-1.2-12.75 2.74-26.33-2.18-38.5a6.45 6.45 0 0 0-6.24-3.17z" class="base stroke-color stroke-medium fill-color" /><path id="top-deco-1" fill="url(#top-deco-1-gradient)" d="M382.34 145.74c13.4-22.37-21.18-36.65-3.1-52.28 10.17-8.78 27.54-9.65 37.3 1.73 14.06 16.42-24.42 30.66-5.49 50.34" class="base stroke-color stroke-medium" /><path id="top-deco-2" fill="url(#top-deco-2-gradient)" d="M531.86 141.63c13.4-22.37-21.18-36.65-3.1-52.28 10.16-8.77 27.54-9.65 37.3 1.73 14.06 16.42-24.42 30.66-5.49 50.34" class="base stroke-color stroke-medium" /><path id="stick" d="M688.53 97.64c-22.1.2-38.58 18.05-47.74 36.18-6.06 11.51-16.76 19.9-22.7 31.39-1.25 6.93 8.8 9.18 14.09 7.69 12.93-2.7 23.18-12.75 27.54-24.84 5.19-12.44 16.89-22.23 30.76-23.13 13.62-2.36 26.2 8.17 28.95 20.98 3.96 13.43 2.17 29.25-8.83 39-17.15 17.7-43.18 25.62-57.62 46.15-79.27 153.86-158.41 307.81-236.61 462.2-27.77 56-57.1 111.36-81.42 168.89-1.89 7.18-7.57 15.14-4.52 22.6 4.8 3.66 10.84-2 15-4.49 17.09-15.35 26.56-37.03 37.9-56.58 47.73-91.1 92.47-183.7 138.94-275.45 50.45-100.19 100.9-200.41 152.44-300.04 14.58-21.23 42.26-28.34 58.6-47.95 10.41-11.23 17.07-26.11 15.4-41.53-1.08-25.65-16.18-53.41-43.17-59.52a59.47 59.47 0 0 0-17-1.55z" class="base stroke-color stroke-medium fill-color" /></svg>
5
+ <svg v-else-if="type === 'r'" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 933.33 933.33"><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="defs36222"><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><linearGradient xlink:href="#fillGradient" id="upper-back-gradient" x1="7.34" x2="689.75" y1="207.66" y2="274.33" gradientTransform="matrix(1.10352 0 0 1.06757 -32.26 -16.14)" gradientUnits="userSpaceOnUse" /><linearGradient xlink:href="#fillGradient" id="body-gradient" x1="218.5" x2="906.1" y1="521.53" y2="643.2" gradientTransform="matrix(1.10352 0 0 1.06757 -32.26 -16.14)" gradientUnits="userSpaceOnUse" /><linearGradient xlink:href="#fillGradient" id="upper-wall-gradient" x1="153.41" x2="966.59" y1="229.07" y2="400.73" gradientTransform="matrix(1.10352 0 0 1.06757 -32.26 -16.14)" gradientUnits="userSpaceOnUse" /><linearGradient xlink:href="#fillGradient" id="tower-base-gradient" x1="193.15" x2="878.6" y1="715.41" y2="782.07" gradientTransform="matrix(1.10352 0 0 1.06757 -32.26 -16.14)" gradientUnits="userSpaceOnUse" /></defs><path id="boundary" fill="none" stroke-width="35" d="M468.91 119.08c-30.68-.25-61.62 1.07-71.44 4.28-3.39 33.65.9 51.98-1.82 81.9a197.55 197.55 0 0 1-30.64 5.88c.91-16.5 1.94-32.57 1.75-43.34-22.83-3.32-53.78-3.52-81.93-1.78.78-7.47 1.46-14.92 1.17-23.98-17.52-4.78-126.91 18.93-143.45 24 5.44 29.7 9.56 57.87 14.83 100.53 33.87 23.54 52.83 31.76 56.45 71.2.84-.15 1.94-.27 2.8-.41 10.96 5.29 29.17 9.84 52.39 13.59-2.92 92.32-3.7 349.07-2.77 386.38-25.97 24.61-77.23 48.98-114.08 56.75-5.47 18-10.86 38.83.25 61.22 134.5 1.22 489.67-.34 618.19-.79 6.93-24.97 12.17-43.03 5.24-62.66-38.9-7.68-85.72-19.26-120.9-54.51-2.94-65.39-2.6-320.4-2.47-385.93 23.79-3.7 44.08-8.3 59.01-13.88l.1-.51c.93.13 2.16.25 3.06.38 6.43-35.55 16.95-41.62 66.65-71.46 6.28-46.69 11.8-69.2 12.15-97.1-14.9-3.62-121.91-35.56-135.13-30.97-4.7 27.77 1.95 51.64-4.24 77.76-4.27.2-8.47.36-12.65.49-.09-14.7.25-30.26 1.6-44.17-24.98-10.7-73.24-11.03-105.79-9.63.23-12.68.64-24.4 1.5-38.05-8.75-3.1-39.15-4.94-69.83-5.2z" class="base stroke-color" /><path id="upper-back" fill="url(#upper-back-gradient)" d="M214.93 336.6s3.43-123.38 18.64-164.39c31.78-6.84 94.34-10.06 133.2-4.4.43 25.08-5.74 77.85-1.68 101.98 35.3-1.67 106.84 2.6 152.36-2.5 1.02-29.43-7.67-71.1.94-103.91 28.9-2.17 94.22-4.46 124.64 8.57-4.06 41.98.6 99.69.6 99.69l79.74 2.75-11.88 63.14c-99.56 37.2-434.27 31.67-496.56-.94z" class="base stroke-color stroke-medium" /><path id="tower-base" fill="url(#tower-base-gradient)" d="M268.16 735.55c-25.33 25.2-78.25 50.57-115.99 58.53-5.47 18.01-10.86 38.83.26 61.22 134.5 1.22 489.66-.34 618.18-.79 6.93-24.97 12.17-43.03 5.24-62.66-39.57-7.81-87.36-19.6-122.73-56.3" class="base stroke-color stroke-medium" /><path id="lower-line" fill="none" d="M212.54 805.16c157.8.07 329.05-5.8 497.82.6" class="base stroke-color stroke-medium" /><path id="body" fill="url(#body-gradient)" d="M270.3 323.45c-3.98 47.2-5.13 375.99-4.03 415.15 58.25-4.91 329-5.22 388.7-.6-3.38-73.7-2.45-413.51-2.45-413.51" class="base stroke-color stroke-medium" /><path id="bricks" fill="none" d="M372.03 395.73c-20.05-.08-34.74 1.05-60.48 3.84l69.45-3.73a593.8 593.8 0 0 0-8.97-.11zm22.2 60.6c-31.6-.1-52.54 1.48-84 4.07l107.85-3.73c-8.69-.21-16.55-.32-23.85-.35zM357.15 487c.42 15.17-.33-7.04.48 16.8zm114.1 34.8c-82.58 1.18-84.73.62-161.03 5.88zm-55.3 32.72c.37 13.37-.33-7.2.47 16.15zm47.33 35.54c-61.2-.13-106.74 1.73-153.62 6.23l180.85-6.05c-9.43-.1-18.49-.16-27.23-.18zm16.92 20.28.38 14.57c-.01-1.42-.1-4.94-.38-14.57zm.38 14.57c.05 3.25-.28-5.52.36 13.4zm-123.43-3.4c.42 15.17-.33-7.04.48 16.8zm110.81 38.17c-67.75-.19-125.29 2.36-156.87 4.68l227.46-3.47a2419.13 2419.13 0 0 0-70.59-1.2zm-52.28 22.99.38 14.57c-.02-1.42-.1-4.95-.38-14.57zm.38 14.57c.04 3.24-.29-5.52.36 13.4z" class="base stroke-color stroke-medium" /><path id="upper-wall" fill="url(#upper-wall-gradient)" d="M142.55 166.03c5.44 29.7 9.56 57.88 14.83 100.54 33.87 23.54 52.83 31.76 56.45 71.2 101.73-18.27 408.56-14.06 500.82-.37 6.43-35.55 16.95-41.63 66.65-71.46 6.28-46.69 11.8-69.2 12.15-97.1-14.9-3.61-121.91-35.56-135.13-30.97-4.7 27.78 1.95 51.64-4.24 77.76-40.06 2-75.75.48-117.2-10.28.2-34.91.15-54.06 1.87-81.08-17.5-6.22-121.64-7.32-141.28-.91-3.39 33.65.9 51.98-1.82 81.9-35.56 10.03-69.29 7.43-111.74 9.8-3.42-35.57 2.9-48.05 2.09-73.02-17.52-4.78-126.91 18.93-143.45 24z" class="base stroke-color stroke-medium" /><path id="upper-line" fill="none" d="M202.72 272.29c156.95-15.47 389.07-16.43 523.78 3.73" class="base stroke-color stroke-medium" /></svg>
6
+ <svg v-else-if="type === 'q'" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 933.33 933.33"><style id="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="defs"><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><linearGradient xlink:href="#fillGradient" id="hair5-grad" x1="785.14" x2="840.91" y1="294.76" y2="363.09" gradientTransform="translate(30 20)" gradientUnits="userSpaceOnUse" /><linearGradient xlink:href="#fillGradient" id="hair4-grad" x1="649.86" x2="711.12" y1="171.18" y2="227.75" gradientTransform="translate(30 20)" gradientUnits="userSpaceOnUse" /><linearGradient xlink:href="#fillGradient" id="hair3-grad" x1="406.01" x2="470.83" y1="103.53" y2="132.99" gradientTransform="translate(30 20)" gradientUnits="userSpaceOnUse" /><linearGradient xlink:href="#fillGradient" id="hair2-grad" x1="167.87" x2="234.62" y1="175" y2="175" gradientTransform="translate(30 20)" gradientUnits="userSpaceOnUse" /><linearGradient xlink:href="#fillGradient" id="hair1-grad" x1="23.46" x2="87.37" y1="337.86" y2="315.46" gradientTransform="translate(30 20)" gradientUnits="userSpaceOnUse" /><linearGradient xlink:href="#fillGradient" id="hairknot1-grad" x1="339.47" x2="514.54" y1="530.61" y2="571.59" gradientTransform="translate(-93.77 -199.5) scale(.85393)" gradientUnits="userSpaceOnUse" /><linearGradient xlink:href="#fillGradient" id="hairknot3-grad" x1="339.47" x2="495.02" y1="530.61" y2="584.76" gradientTransform="translate(117.23 -251.5) scale(.85393)" gradientUnits="userSpaceOnUse" /><linearGradient xlink:href="#fillGradient" id="hairknot4-grad" x1="339.47" x2="487.21" y1="530.61" y2="584.76" gradientTransform="translate(325.24 -191.5) scale(.85393)" gradientUnits="userSpaceOnUse" /><linearGradient xlink:href="#fillGradient" id="hairknot5-grad" x1="339.47" x2="498.93" y1="530.61" y2="584.76" gradientTransform="translate(447.85 -65.75) scale(.85393)" gradientUnits="userSpaceOnUse" /><linearGradient xlink:href="#fillGradient" id="hairknot2-grad" x1="339.47" x2="510.64" y1="530.61" y2="584.76" gradientTransform="translate(-219.1 -48.92) scale(.85393)" gradientUnits="userSpaceOnUse" /><linearGradient xlink:href="#fillGradient" id="filler-grad" x1="153.6" x2="761.36" y1="380.54" y2="682.21" gradientTransform="translate(30 20)" gradientUnits="userSpaceOnUse" /><linearGradient xlink:href="#fillGradient" id="crown-grad" x1="153.6" x2="761.36" y1="380.54" y2="682.21" gradientTransform="translate(30 20)" gradientUnits="userSpaceOnUse" /><linearGradient xlink:href="#fillGradient" id="fullhair-grad" x1="153.6" x2="761.36" y1="380.54" y2="682.21" gradientTransform="translate(30 20)" gradientUnits="userSpaceOnUse" /><linearGradient xlink:href="#fillGradient" id="cross-grad" x1="153.6" x2="761.36" y1="380.54" y2="682.21" gradientTransform="translate(30 20)" gradientUnits="userSpaceOnUse" /><linearGradient xlink:href="#fillGradient" id="base-grad" x1="153.6" x2="761.36" y1="380.54" y2="682.21" gradientTransform="translate(30 20)" gradientUnits="userSpaceOnUse" /></defs><path id="boundary" fill="none" stroke-width="35" d="M660.68 718.33c10.94-94.74 43.2-209.42 102.48-299.25a39.97 39.97 0 0 0 21.82 6.51c21.68 0 39.25-17.12 39.25-38.24a37.4 37.4 0 0 0-3.3-15.3c21.54.22 36.23 4.98 54.63-.16 2.68-13.83-12.17-18.27-26.41-37.32-13.28 5.43-27.97 11.58-41.09 21.86a39.95 39.95 0 0 0-23.08-7.32c-21.68 0-39.25 17.12-39.25 38.24a37.61 37.61 0 0 0 8.08 23.07c-51.19 44.95-112.72 143.43-151.22 164.96-29.6-62.18 12.69-205.2 44.46-278.64a40.14 40.14 0 0 0 15.32 3.1c21.67 0 39.25-17.13 39.25-38.25a37.6 37.6 0 0 0-7.87-22.95c20.21-5.83 40.26-11.12 51.15-12.64-4.71-5.65-1.7-16-40-37.05l-29.33 36.63a40.18 40.18 0 0 0-13.2-2.23c-21.68 0-39.25 17.12-39.25 38.24a37.78 37.78 0 0 0 11.93 27.33c-50.57 60.7-120.62 188.65-144.45 255.12-35.85-80.11-34.18-218.8-33.46-304.4 20.51-1.42 36.42-18.02 36.47-38.05 0-14.97-8.97-28.56-22.95-34.78 15.35-22.32 32.59-48.04 33.96-64.3-8.56.2-34.94 4.63-50.8 12.54-3.3 8.32-3.13 27.74-1.92 48.47-20.64 1.27-36.73 17.92-36.78 38.07.04 16.37 10.76 30.9 26.67 36.14-28.48 79.66-58.76 208.18-62.36 303.52C310.98 489.94 280 365.6 258.95 288.64c14.35-6.05 23.65-19.82 23.67-35.05 0-19.7-15.36-36.16-35.47-38.06 6.22-12.28 5.72-18.25 9.47-41.01-10.56-11.82-22.9-10.12-50.75-14.21.8 27.72 14.54 39.02 26.06 56.73-16.51 4.9-27.8 19.73-27.81 36.55 0 21.12 17.57 38.24 39.25 38.24.49-.02.98-.06 1.47-.1-3.38 94.8 13.8 225.09 25.7 282.34-41.7-28.13-88.76-82.84-132-137.35a38.04 38.04 0 0 0 18.73-32.54c0-21.12-17.57-38.24-39.25-38.24a40.23 40.23 0 0 0-10.94 1.52c-4.97-22.4-17.15-46.04-26.82-57.68-13.44 2.8-14.58 30.31-18.8 44.43 8.72 9.6 17.51 16.83 25.93 26.19a37.63 37.63 0 0 0-8.61 23.78c0 21.12 17.57 38.24 39.24 38.24a40.25 40.25 0 0 0 7.11-.71c49.02 116.08 72.23 169.42 99.97 276.2m15.22 18.27c12.59 30.53 15.92 93 15.92 93m371.88 4.18s2.31-66.7 14.6-97.08m-368.15 109c88.83 10.6 232.73 14.35 332.96 4.4" class="base stroke-color" /><path id="hair5" fill="url(#hair5-grad)" d="M875.56 371.9c2.67-13.84-12.17-18.28-26.41-37.33-19.84 8.12-42.82 17.8-59 40.52 40.86-8.43 59.44 4.06 85.41-3.2z" class="base stroke-color stroke-medium" /><path id="hair4" fill="url(#hair4-grad)" d="M744.9 226c-4.71-5.65-1.7-16-40-37.05l-48.86 61.03c27.41-8.55 70.77-21.46 88.86-23.98z" class="base stroke-color stroke-medium" /><path id="hair3" fill="url(#hair3-grad)" d="M504.62 102.52c-8.56.19-34.94 4.62-50.8 12.53-4.8 12.1-2.31 47.6.13 76.64 15.19-24.37 48.74-66.26 50.67-89.17z" class="base stroke-color stroke-medium" /><path id="hair2" fill="url(#hair2-grad)" d="M256.62 174.52c-10.56-11.81-22.9-10.12-50.75-14.21.97 33.73 21.1 43.13 33.08 69.38 15.19-24.37 12.74-25.26 17.67-55.17z" class="base stroke-color stroke-medium" /><path id="hair1" fill="url(#hair1-grad)" d="M80.26 309.78c-13.44 2.8-14.58 30.31-18.8 44.43 15.06 16.6 30.37 26.05 43.52 51.72 14.06-25.04-8.76-76.94-24.72-96.15z" class="base stroke-color stroke-medium" /><path id="filler" fill="url(#filler-grad)" d="m273.94 844.89-50.38-166.21L657.32 680l-49.51 169.68z" /><path id="crown" fill="url(#crown-grad)" d="M642.71 736.28c-122.2-43.67-283.4-43.92-402.4-.1 12.6 30.53 15.93 93 15.93 93 100.72-28.18 271.95-27.32 371.88 4.18 0 0 2.31-66.7 14.6-97.08z" class="base stroke-color stroke-medium" /><path id="fullhair" fill="url(#fullhair-grad)" d="M225.1 717.91c121.85-52.68 312.58-53.52 435.58.41 12.13-105.03 50.35-234.69 122.68-327.7C728.52 412.1 648.88 549.5 602.6 575.4c-36.3-76.27 35.54-274.2 63.48-316.13-46.9 28.21-146.15 203.01-175.47 284.78-42.27-94.44-32.38-271.08-33.39-345.1-31.8 69.55-73.51 229.37-77.78 342.3-81.2-60.86-109.85-225.26-131.5-290.4-11.93 93.8 8.88 257.17 22.62 323.23-52.8-35.6-114.44-113.92-165.61-180.3C170 549.33 193.54 596.45 225.1 717.91z" class="base stroke-color stroke-medium" /><path id="cross" fill="url(#cross-grad)" d="M437.76 719.78c-19-.1-8.58 14.64-12.32 21.12-8.53 4.95-36.24-3.83-27.32 14.34 6.32 12.87 15.76 6.81 26.37 10.96 5.28 7.27-3.64 29.36 15.04 28.9 15.43-.38 7.02-22.43 10.32-28.37 9.32-6.1 21.56 2.16 27.73-13.45 4.69-11.86-18.51-7.46-27.67-12.57-3.84-5.73 7.62-20.82-12.15-20.93z" class="base stroke-color stroke-medium" /><path id="path37" fill="url(#base-grad)" d="M274.57 845.27c88.83 10.6 232.72 14.36 332.96 4.41-56.57-25.28-259.89-25.07-332.96-4.4z" class="base stroke-color stroke-medium" /><ellipse id="hairknot2" cx="243.37" cy="253.59" fill="url(#hairknot1-grad)" class="base stroke-color stroke-medium" rx="39.25" ry="38.24" /><ellipse id="hairknot1" cx="118.02" cy="404.18" fill="url(#hairknot2-grad)" class="base stroke-color stroke-medium" rx="39.25" ry="38.24" /><ellipse id="hairknot3" cx="454.37" cy="201.59" fill="url(#hairknot3-grad)" class="base stroke-color stroke-medium" rx="39.25" ry="38.24" /><ellipse id="hairknot4" cx="662.37" cy="261.59" fill="url(#hairknot4-grad)" class="base stroke-color stroke-medium" rx="39.25" ry="38.24" /><ellipse id="hairknot5" cx="784.98" cy="387.35" fill="url(#hairknot5-grad)" class="base stroke-color stroke-medium" rx="39.25" ry="38.24" /></svg>
7
+ <svg v-else-if="type === 'k'" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 933.33 933.33"><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}.fill-color{fill:#7f899b}</style><defs id="defs36222"><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><linearGradient xlink:href="#fillGradient" id="linearGradient2272" x1="297.55" x2="368.56" y1="427.05" y2="521.22" gradientTransform="translate(19.7 .05) scale(1.02329)" gradientUnits="userSpaceOnUse" /><linearGradient xlink:href="#fillGradient" id="linearGradient2274" x1="495.3" x2="595.97" y1="448.55" y2="528.55" gradientTransform="translate(19.7 .05) scale(1.02329)" gradientUnits="userSpaceOnUse" /><linearGradient xlink:href="#fillGradient" id="base-gradient" x1="221.55" x2="633.49" y1="774.94" y2="859.35" gradientTransform="translate(19.7 .05) scale(1.02329)" gradientUnits="userSpaceOnUse" /><linearGradient xlink:href="#fillGradient" id="linearGradient2476" x1="342.53" x2="549.85" y1="145.67" y2="282.34" gradientUnits="userSpaceOnUse" /><linearGradient xlink:href="#fillGradient" id="cross-gradient" x1="379.2" x2="579.85" y1="160.25" y2="286.92" gradientTransform="translate(19.7 .05) scale(1.02329)" gradientUnits="userSpaceOnUse" /><linearGradient xlink:href="#fillGradient" id="top-base-gradient" x1="368.47" x2="494.55" y1="319.27" y2="319.27" gradientTransform="translate(19.7 .05) scale(1.02329)" gradientUnits="userSpaceOnUse" /><linearGradient xlink:href="#fillGradient" id="crown-lower-gradient" x1="129.96" x2="812.37" y1="428.66" y2="836.31" gradientTransform="translate(19.7 .05) scale(1.02329)" gradientUnits="userSpaceOnUse" /><linearGradient xlink:href="#fillGradient" id="background-gradient" x1="129.96" x2="812.37" y1="428.66" y2="836.31" gradientTransform="translate(19.7 .05) scale(1.02329)" gradientUnits="userSpaceOnUse" /><linearGradient xlink:href="#fillGradient" id="bar1and5-gradient" x1="129.96" x2="812.37" y1="428.66" y2="836.31" gradientTransform="translate(19.7 .05) scale(1.02329)" gradientUnits="userSpaceOnUse" /><linearGradient xlink:href="#fillGradient" id="bar3-gradient" x1="129.96" x2="812.37" y1="428.66" y2="836.31" gradientTransform="translate(19.7 .05) scale(1.02329)" gradientUnits="userSpaceOnUse" /><linearGradient xlink:href="#fillGradient" id="linearGradient598" x1="129.96" x2="812.37" y1="428.66" y2="836.31" gradientUnits="userSpaceOnUse" /></defs><path id="boundary" fill="none" stroke-width="35" d="M479.86 63.92c-16.08-.25-32.8 1.82-42.39 6.4-4.04 18.82 16.84 70.79 10.79 88.03-17.08-2.29-78.86-17.22-106.85-8.7-12.51 18.6-7.07 52.47 1.63 68.22 30.92 6.7 78.63-14.24 101.47-12.43 3.63 12-2.39 44.22-8.1 67.46-16.25 5-28.93 15.03-30.34 30.68a290.4 290.4 0 0 0-.93 14.46c-4.83 3.76-8.5 8.14-10.27 13.23a127.09 127.09 0 0 0-2.52 8.1l.12-.48c-18.65-12-43.48-20.62-71.76-22.29-8.44-.5-17.02-.71-25.61-.6C212 317 125.8 347.23 113.56 423.7 95.7 535.27 194.5 601.03 230.06 719.06c112.87-64.37 373.15-60.27 481.3-4.64 28.7-91.23 143.1-197.86 117.51-290.87-23.7-86.13-138.9-111.33-214.92-107.03-30.81 1.75-60.39 11.72-82.6 25.43l.03.21a80.28 80.28 0 0 0-2.28-9.64c-1.86-6.15-5.96-11.31-11.57-15.54.11-4.65.04-9.75-.3-15.44-.86-15.16-14.85-25.1-32.57-29.61-5.36-22.14-11.09-52.46-3.94-66.87 24.04-4.76 81.73 11.63 103.52 4.37 14.22-19.52 12.31-50.07 3.5-67.17-20.45-3.98-80.32 12.3-99.54 13.29.7-16.41 29.55-64.42 30.27-84.18-7.08-4.66-22.53-7.22-38.61-7.46zm113.1 341.52c19.46.15 37.21 1.87 47.75 7.83 49.02 27.73 56.43 121.52-29.14 163.98 2.2-40.6 13.33-89.65 8.67-117.47-3.46-20.68-13.94-39.33-27.28-54.34zm-257.6 3.64c-9.92 13.32-17.45 28.85-20.28 45.76-4.5 26.84 5.74 73.47 8.45 113.17-84.82-55.96-76.27-140.76-2.05-157.72 3.25-.74 8.1-1.08 13.89-1.21zm179.18 16.03c15.47 15.64 40.75 26.97 50.66 51.17 10.9 26.63 12.2 66.1 1.1 100.02-2.22-1.26-4.87-2.7-7.2-4.01-40.07-30.45-41.29-64.79-47.02-112.73-1.5-12.51-.13-23.78 2.46-34.45zm-106.71 6.18c1.93 8.5 3.36 18.06 3.76 29.34 1.35 38.1-12.44 84.08-41.67 113.37-12.07-34.48-10.98-75.34.2-102.67 7.46-18.2 23.55-29.1 37.7-40.04zm64.37 265.1c-79.44-.05-159.75 12.71-211.15 39.39 14.4 45.5 20.16 96.16 20.16 96.16 93.8-29.12 284.35-30.29 376.44 4.24 0 0 9.5-68.23 20.5-102.32-47.93-24.57-126.5-37.43-205.95-37.48zm-2.04 136.49c-65.91-.27-132.11 6.29-168.34 19.24 89.9 10.73 233.52 12.5 334.99 2.41-35.1-14.31-100.73-21.4-166.65-21.65z" class="base stroke-color" /><path id="bar2" fill="url(#linearGradient2272)" d="M315.06 626.8c23.73-34.29-7.21-128.77.02-171.97 11.74-70.1 103.85-117.15 116.15-76.5 14.58 48.2-44.63 52.76-61.1 93-15.14 36.97-11.9 98.73 17.56 135.9" class="base stroke-color stroke-medium" /><path id="bar4" fill="url(#linearGradient2274)" d="M620.26 631.74c-23.73-34.29 7.22-128.77-.02-171.96-11.74-70.1-103.85-117.16-116.14-76.51-14.59 48.2 44.62 52.76 61.1 93 15.13 36.97 11.9 98.74-17.57 135.9" class="base stroke-color stroke-medium" /><path id="cross" fill="url(#cross-gradient)" d="M430.27 294.88c5.38-15.35 19.34-72.58 14.24-89.44-22.84-1.8-70.54 19.14-101.46 12.43-8.71-15.75-14.15-49.62-1.64-68.22 28-8.52 89.77 6.41 106.85 8.7 6.05-17.24-14.83-69.21-10.79-88.03 19.19-9.17 66.84-8.26 81 1.06-.72 19.76-29.57 67.77-30.27 84.18 19.22-.99 79.1-17.27 99.53-13.3 8.82 17.1 10.73 47.66-3.49 67.18-21.79 7.26-79.48-9.13-103.52-4.37-10.13 20.44 5.62 73.2 9.5 88.63" class="base stroke-color stroke-medium" /><path id="top-base" fill="url(#top-base-gradient)" d="M437.63 380.54c-25.32-21.91-36.47-22.1-31.55-76.95 4.2-46.85 108.73-44.43 111.16-2.04 3.05 53.15-14.62 57.14-26.91 82.87" class="base stroke-color stroke-medium" /><path id="background" fill="url(#background-gradient)" d="M296.98 849.69 231.5 648.87l482.2-2.11-76.63 209.08Z" class="base stroke-color stroke-medium" /><path id="bar1and5" fill="url(#bar1and5-gradient)" d="M586.13 587.45c-29.43-15.9-91.25-54.79-124.8-56.17-25.66-1.06-78.6 33.23-105.83 54.32-117.95-53.7-116.54-156.46-34.02-175.3 13.44-3.08 53.45.47 79.88-.74-8.42-23.25-17.6-39.73-8.89-70.67-18.65-12-43.48-20.61-71.76-22.3-8.44-.5-17.02-.7-25.61-.6-83.1 1.03-169.3 31.25-181.54 107.7-17.86 111.6 80.94 177.35 116.5 295.38 112.87-64.37 373.15-60.27 481.3-4.64 28.7-91.23 143.1-197.86 117.51-290.87-23.7-86.13-138.9-111.33-214.92-107.03-30.81 1.75-60.39 11.72-82.6 25.43 4.3 24.53-4.42 44.58-11.64 65.78 35.14.01 96.8-8.16 121 5.53 53.45 30.23 57.52 139.06-54.58 174.18z" class="base stroke-color stroke-medium" /><path id="bar3" fill="url(#bar3-gradient)" d="M355.84 585.91c38.88-27.3 57.3-81.51 55.75-125.28-2.24-63.11-36-74.12-16.72-129.36 13.07-37.46 121.94-39.39 134.23 1.26 14.59 48.21-22.86 78.23-17.02 127.03 6.8 56.94 7.23 94.68 73.98 129.52" class="base stroke-color stroke-medium" /><path id="crown-lower" fill="url(#crown-lower-gradient)" d="M678.15 733.86c-95.86-49.13-314.3-51.44-417.1 1.92 14.4 45.5 20.16 96.16 20.16 96.16 93.8-29.13 284.34-30.29 376.44 4.24 0 0 9.5-68.23 20.5-102.32z" class="base stroke-color stroke-medium" /><path id="base" fill="url(#base-gradient)" d="M301.82 852.12c89.9 10.73 233.52 12.49 334.99 2.42-70.2-28.64-262.53-28.32-335-2.42z" class="base stroke-color stroke-medium" /><path id="jewel-center" d="M466.59 737.77a17.3 16.48 0 0 0-17.3 16.48 17.3 16.48 0 0 0 17.3 16.48 17.3 16.48 0 0 0 17.3-16.48 17.3 16.48 0 0 0-17.3-16.48z" class="base stroke-color stroke-medium fill-color" /><path id="jewel-right" d="M562.95 753.43a18.85 12.36 9.22 0 0-15.7 9.54 18.85 12.36 9.22 0 0 16.63 15.22 18.85 12.36 9.22 0 0 20.58-9.18 18.85 12.36 9.22 0 0-16.62-15.22 18.85 12.36 9.22 0 0-4.89-.36z" class="base stroke-color stroke-medium fill-color" /><path id="jewel-left" d="M367.89 753.35a12.36 19.34 79.73 0 0-5 .48 12.36 19.34 79.73 0 0-16.83 15.6 12.36 19.34 79.73 0 0 21.23 8.72 12.36 19.34 79.73 0 0 16.83-15.6 12.36 19.34 79.73 0 0-16.23-9.2z" class="base stroke-color stroke-medium fill-color" /></svg>
8
+ <svg v-else-if="type === 'P'" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 933.33 933.33"><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="defs36222"><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><linearGradient xlink:href="#fillGradient" id="head-gradient" x1="586.53" x2="1126.02" y1="328.04" y2="534.2" gradientTransform="matrix(.73447 0 0 .736 -84.66 58.44)" gradientUnits="userSpaceOnUse" /><linearGradient xlink:href="#fillGradient" id="shoulders-gradient" x1="275.24" x2="862.65" y1="458.66" y2="560.75" gradientTransform="translate(36 28)" gradientUnits="userSpaceOnUse" /><linearGradient xlink:href="#fillGradient" id="pawn-body-gradient" x1="300.27" x2="774.05" y1="623.78" y2="764.9" gradientTransform="translate(36 28)" gradientUnits="userSpaceOnUse" /></defs><path id="boundary" fill="none" stroke-width="35" d="M473.54 222.8a122.41 110.4 0 0 0-122.41 110.4 122.41 110.4 0 0 0 122.4 110.4 122.41 110.4 0 0 0 122.42-110.4 122.41 110.4 0 0 0-122.41-110.4Zm-3.72 223.77c-30.33.31-58.7 5.23-93.47 14.16-74.2 19.07-100.1 66.02-100.1 66.02h156.33c-9 144.95-88.58 191.26-127.13 218.5-34.2 24.18-25.46 82.35 19.9 85.32 28.12 1.84 276.62 2.36 305.66-.85 51.38-5.67 52.84-66.7 19.69-87.3-49.35-30.68-125.94-65-137.16-215.67H685.1s-43.43-51.83-110.03-66.68c-42.62-9.5-74.9-13.8-105.24-13.5z" class="base stroke-color" /><ellipse id="head" cx="473.54" cy="333.21" fill="url(#head-gradient)" class="base stroke-color stroke-medium" rx="122.41" ry="110.4" /><path id="pawn-body" fill="url(#pawn-body-gradient)" d="M433.42 495.01c1.47 170.18-86.74 221.1-127.97 250.25-34.2 24.17-25.46 82.34 19.9 85.3 28.12 1.85 276.62 2.37 305.66-.84 51.38-5.67 52.84-66.7 19.69-87.3-52.61-32.71-136.2-69.54-138.5-247.1-.44-33.3-79.04-30-78.78-.3z" class="base stroke-color stroke-medium" /><path id="shoulders" fill="url(#shoulders-gradient)" d="M376.35 460.74c-74.2 19.06-100.1 66.01-100.1 66.01h408.84s-43.43-51.83-110.03-66.68c-85.23-19-129.17-17.2-198.7.67z" class="base stroke-color stroke-medium" /><path id="lower-line" fill="none" d="M379.12 739.67h187.9" class="base stroke-color stroke-medium" /></svg>
9
+ <svg v-else-if="type === 'N'" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 933.33 933.33"><style id="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="defs36222"><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><linearGradient xlink:href="#fillGradient" id="hair4-gradient" x1="705.29" x2="787.13" y1="378.29" y2="465.62" gradientTransform="translate(7.03 14.37) scale(1.03317)" gradientUnits="userSpaceOnUse" /><linearGradient xlink:href="#fillGradient" id="hair3-gradient" x1="667.03" x2="739.15" y1="299.33" y2="348.42" gradientTransform="translate(11.16 14.37) scale(1.03317)" gradientUnits="userSpaceOnUse" /><linearGradient xlink:href="#fillGradient" id="hair2-gradient" x1="598.68" x2="705.53" y1="209.76" y2="232.29" gradientTransform="translate(7.03 14.37) scale(1.03317)" gradientUnits="userSpaceOnUse" /><linearGradient xlink:href="#fillGradient" id="hair1-gradient" x1="493.79" x2="625.85" y1="157.91" y2="159.49" gradientTransform="translate(11.16 8.17) scale(1.03317)" gradientUnits="userSpaceOnUse" /><linearGradient xlink:href="#fillGradient" id="body-gradient" x1="265.65" x2="753.21" y1="255.94" y2="854.33" gradientTransform="translate(7.03 14.37) scale(1.03317)" gradientUnits="userSpaceOnUse" /></defs><path id="boundary" fill="none" stroke-width="35" d="M392.06 80.14c-18.36-3-11.42 61.28-21.76 85.2-17.72-16.27-32.58-55.02-71.12-61.9-9.76 32.5 17.09 82.29 6.86 95.1-54.43 68.26-43.29 69.9-71.7 145.17-14.11 37.42-50.6 102.3-86.53 144.44-34.5 40.45-39.45 90.11-23.43 107.38 33.01 35.59 72.53 20.25 92.67-3.13-6.86 14.01-12.93 31.98-4.28 38.68 20.07 15.53 145.3-98.02 159.1-92.74 90.13 34.42 181.5-33.94 181.28-112.96 2.6 58.75-8.3 98.14-67.92 138.21-58.04 39.02-176.52 117.76-204.58 230.25-5.88 23.58 8.24 63.05 38.75 63.54 125.9 2 275.79 2.53 400.98.2 101.42-1.87 104.4-582.63-258.52-694.3-30.3-24.46-51.43-80.14-69.8-83.14Zm237.78 99.9c18.83 1.19-51.66-28.11-60.85-39.83-3.99-5.09-15.8-6.83-29.74-6.7-30.68.26-71.73 9.56-62.7 12.2m227.08 126.66c15.36 9.78 30.78-29.67 21-29.67-14.7 0-39.67 6.9-35.15-9.7 4.96-18.23-17.98-23.86-41.15-24.18-23.16-.3-46.56 4.7-42.53 7.77m161.56 163.73c22 7.32-1.02-18.93-12.12-32.43s7.58-19.55 6.28-28.11c-3.17-20.71-37.87-24.1-58.33-23.88m72.27 181.67c7.77 15.35 39.03 13.35 52.5 8.84 18.16-6.07-43.9-24.93-29.92-53.67 7.75-15.92-43.91-31.7-55.05-32.1" class="base stroke-color" /><path id="body" fill="url(#body-gradient)" d="M553.15 425.38c.22 79.03-91.15 147.38-181.28 112.95-13.8-5.27-139.03 108.28-159.1 92.75-15.83-12.26 17.55-62.79 15.12-56.33-11.55 30.73-62.56 64.93-103.51 20.78-16.02-17.27-11.07-66.93 23.43-107.38 35.93-42.13 72.42-107.01 86.54-144.43 28.4-75.27 17.26-76.91 71.69-145.17 10.23-12.82-16.62-62.6-6.86-95.1 38.54 6.87 53.4 45.63 71.13 61.89 10.33-23.92 3.39-88.2 21.75-85.2 18.37 3 39.5 58.68 69.8 83.13C824.77 274.95 821.8 855.71 720.38 857.6c-125.2 2.32-275.07 1.8-400.98-.21-30.5-.49-44.63-39.96-38.74-63.54 28.05-112.5 146.53-191.23 204.57-230.25 59.61-40.07 70.53-79.46 67.92-138.21z" class="base stroke-color stroke-medium" /><path id="eyebrow" fill="none" d="M363.48 314.1c-30.04-5.55-56.38 3.17-78.13 24.82" class="base stroke-color stroke-medium" /><path id="eye" fill="none" d="M315.06 346.85c10.79 11 24.52 11.45 26.78-7.23" class="base stroke-color stroke-medium" /><path id="nose" fill="none" d="M162.8 545.72c-14.31-4.94-24.67 18.12-15.54 19.06" class="base stroke-color stroke-medium" /><path id="cheek1" fill="none" d="m334.42 500.28 9.8 12.18" class="base stroke-color stroke-medium" /><path id="cheek2" fill="none" d="m553.32 391.72.3-25.74" class="base stroke-color stroke-medium" /><path id="ear-right" fill="none" d="m343.72 178.28-10.45 5.46" class="base stroke-color stroke-medium" /><path id="ear-left" fill="none" d="M398.88 122.72c31.15 43.52 42.4 52.32 5.36 46.08" class="base stroke-color stroke-medium" /><path id="leg-line" fill="none" d="m459.7 763.94-26.63 63.53" class="base stroke-color stroke-medium" /><path id="hair1" fill="url(#hair1-gradient)" d="M476.55 145.72c89.44 26.22 74.35 7.3 93.22 38.01 10.57 17.21 25.21-5.86 60.07-3.68 18.83 1.18-51.66-28.13-60.85-39.84-12.76-16.27-105.57 1.66-92.44 5.5z" class="base stroke-color stroke-medium" /><path id="hair2" fill="url(#hair2-gradient)" d="M605.8 216.59c28.1 21.35 48.68-.34 47.57 36.72-.77 25.45 33.58 8.45 50.26 19.06 15.37 9.78 30.78-29.67 21-29.67-14.7 0-39.67 6.9-35.15-9.7 9.91-36.45-91.75-22.55-83.68-16.41z" class="base stroke-color stroke-medium" /><path id="hair3" fill="url(#hair3-gradient)" d="M688.43 297.17c5.47 1.91 35.26 22.07 33.88 31.66-7.11 49.46 29.36 46.26 45.05 51.49 22 7.32-1.02-18.93-12.12-32.43s7.58-19.55 6.28-28.11c-4.6-30.13-75.94-23.61-73.08-22.61z" class="base stroke-color stroke-medium" /><path id="hair4" fill="url(#hair4-gradient)" d="M740.98 401.45c5.23 9.1 17.48 19.43 21.36 33.72 3.89 14.3 5.35 27.04 13.12 42.4 7.77 15.35 39.02 13.35 52.5 8.84 18.16-6.07-43.9-24.92-29.92-53.67 8.85-18.2-59.88-36.21-57.06-31.3z" class="base stroke-color stroke-medium" /></svg>
10
+ <svg v-else-if="type === 'B'" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 933.33 933.33"><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}.fill-color{fill:#fff}</style><defs id="defs36222"><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><linearGradient xlink:href="#fillGradient" id="shoulders-gradient" x1="136.1" x2="784.78" y1="629.62" y2="865.1" gradientTransform="matrix(1.2051 0 0 1.18532 -52.88 -98.27)" gradientUnits="userSpaceOnUse" /><linearGradient xlink:href="#fillGradient" id="top-deco-1-gradient" x1="321.16" x2="395.43" y1="90.16" y2="128.46" gradientTransform="matrix(1.07338 0 0 1.05577 6.2 -.71)" gradientUnits="userSpaceOnUse" /><linearGradient xlink:href="#fillGradient" id="top-deco-2-gradient" x1="321.16" x2="395.43" y1="90.16" y2="128.46" gradientTransform="matrix(1.07338 0 0 1.05577 155.72 -4.82)" gradientUnits="userSpaceOnUse" /><linearGradient xlink:href="#fillGradient" id="hat-2-gradient" x1="192.3" x2="825.78" y1="446.01" y2="717.34" gradientTransform="matrix(1.07338 0 0 1.05577 6.2 -.71)" gradientUnits="userSpaceOnUse" /><linearGradient xlink:href="#fillGradient" id="crown-base-gradient" x1="192.3" x2="825.78" y1="446.01" y2="717.34" gradientTransform="matrix(1.07338 0 0 1.05577 6.2 -.71)" gradientUnits="userSpaceOnUse" /><linearGradient xlink:href="#fillGradient" id="hat-1-gradient" x1="721.62" x2="541.27" y1="220.04" y2="599.38" gradientTransform="matrix(1.07338 0 0 1.05577 6.2 -.71)" gradientUnits="userSpaceOnUse" /></defs><path id="boundary" fill="none" stroke-width="35" d="M560.57 141.42c-18.93-19.68 19.55-33.92 5.48-50.34-4.87-5.69-11.66-8.32-18.49-8.42a28.41 28.41 0 0 0-18.8 6.7c-18.08 15.62 16.5 29.9 3.1 52.27m-120.8 3.9c-18.94-19.68 19.54-33.92 5.47-50.34-4.87-5.7-11.65-8.32-18.49-8.42a28.4 28.4 0 0 0-18.79 6.7c-18.09 15.62 16.49 29.9 3.1 52.27m226.43 633.58s-2.1-38.02 4.38-54.66a14.5 14.5 0 0 0-2.33-9.62c4.54.7 8.62 1.42 12.17 2.14a336.04 336.04 0 0 0 10.05-48.9l1.6 4.42c21.99-24.41 57.8-90.4 56.74-157.4-1.06-67-5.3-95.18-25.75-157.89a515.64 515.64 0 0 0-20.28-51.83c9.8-19.13 19.48-38.3 29.35-57.4 14.58-21.22 42.26-28.33 58.6-47.94 10.41-11.23 17.07-26.11 15.4-41.53-1.08-25.65-16.18-53.41-43.17-59.52a59.47 59.47 0 0 0-17-1.55c-22.1.2-38.59 18.05-47.75 36.18-6.06 11.51-16.76 19.9-22.7 31.4-1.25 6.92 8.8 9.17 14.09 7.68 12.93-2.7 23.18-12.75 27.55-24.84 5.18-12.44 16.88-22.23 30.75-23.13 13.62-2.36 26.2 8.17 28.95 20.98 3.96 13.43 2.17 29.25-8.83 39-17.15 17.7-43.18 25.62-57.62 46.15-7.52 14.6-15.01 29.22-22.53 43.82-26.08-50.12-57.53-94.11-82.96-117.63-31.37 17.7-61.79 51.73-73.4 71l.9 2.47c-23.42-26.75-49.24-50.48-78.17-71.03-80.28 69.5-158.69 226.2-173.12 307.28-14.42 81.1.1 153.4 24.73 188.18 15.44 21.78 33.25 55.94 57.7 64.47a113.27 113.27 0 0 1 6.11-2.07 13.6 13.6 0 0 0-1.6 10.29c10.64 23.1 2.24 52.82 2.24 52.82s25.52-3.48 62.8-6.16m-9.47 19.61c-6.3.79-12.64 1.54-18.82 2.48-31.81 4.84-42.26 13.36-62.67 20.08-36.01 11.87-163.07-17.53-173.06 11.61-10 29.15 136.77 26.5 218.52 25.6 2.94-.02 5.73-.21 8.54-.38-1.25 2.89-2.54 5.75-3.77 8.65-1.89 7.18-7.56 15.13-4.52 22.6 4.8 3.66 10.84-2 15-4.49 9.86-8.86 17.12-19.88 23.73-31.33 42.09-10.36 67.11-33.43 90.45-33.47 29.78-.04 56.95 37.5 129.37 37.63 38.86.07 243.43 4.09 232.06-26.41-11.37-30.5-140.56 10.46-183.82-11.23-22.64-11.36-29.29-14.05-58.58-18.41" class="base stroke-color" /><path id="shoulders" fill="url(#shoulders-gradient)" d="M330.18 853.89c67.27-.74 99.66-38.38 129.43-38.43 29.78-.04 56.95 37.51 129.37 37.63 38.86.07 243.43 4.09 232.06-26.41-11.37-30.5-140.56 10.46-183.82-11.23-22.64-11.36-29.29-14.05-58.58-18.41-79.01-11.78-159.8-11.3-231.25-.45-31.81 4.84-42.26 13.36-62.67 20.08-36 11.87-163.07-17.53-173.06 11.61-10 29.15 136.77 26.5 218.52 25.6z" class="base stroke-color stroke-medium" /><path id="crown-base" fill="url(#crown-base-gradient)" d="M613.16 724.66c6.48-56.45-315.7-52.28-302.53 3.18 10.65 23.1 2.25 52.82 2.25 52.82s74.36-10.38 157.13-9.08c82.76 1.29 138.77 7.74 138.77 7.74s-2.1-38.02 4.38-54.66z" class="base stroke-color stroke-medium" /><path id="hat-1" fill="url(#hat-1-gradient)" d="M474.1 228.25c11.6-19.27 42.02-53.3 73.39-71 38.89 35.96 91.92 119.7 118.15 200.16 20.45 62.71 24.69 90.9 25.75 157.89 1.07 67-34.75 132.99-56.74 157.4" class="base stroke-color stroke-medium" /><path id="hat-2" fill="url(#hat-2-gradient)" d="M306.14 719.62c-24.46-8.53-42.27-42.69-57.7-64.47-24.64-34.78-39.16-107.09-24.74-188.18 14.43-81.09 92.84-237.78 173.12-307.28 97.86 69.5 160.96 174.58 210.76 314.6 26.65 74.93 39.88 156.93 15.42 242.9-57.08-11.6-250.37-22.58-316.86 2.43z" class="base stroke-color stroke-medium" /><path id="jewel" fill="none" d="M468.53 751.36c-10.23-2.71-13.36 2.07-17.11-.99-4.6-3.75-4.34-19.36-1.29-23.32 2.6-3.4 36.1-3.82 39.39-.7 3.06 2.91-.1 21.82-2.93 26.6" class="base stroke-color stroke-medium" /><path id="cross" d="M415.5 367.29c-12.27 1.91-18.38 15.14-16.84 26.36-.21 9.6 4.06 21.95-3.96 29.46-10.85 3.55-22.6-.9-33.65-1.82-9.1-.82-20.08-4.2-28.17 1.56-6.2 7.22 1.04 18.12 9.02 20.55 16.05 6.87 35.1 3.29 50.55 11.42 5.33 4.84 4.24 13.26 5.87 19.7 5.02 38.32 4.75 77.72 16.54 114.84 3.08 8.15 7.9 19.46 18.2 19.54 7.97-2.68 6.97-13.08 7.39-19.8-.97-42.1-12.84-83.13-14.73-125.14-.2-4.14.17-9.33 5.6-9.77 19.29-5.46 41.81.62 59.34-10.92 7.2-3.84 13.21-18.15 1.55-20.02-20.57-2.98-41.35 5.74-61.8 1.94-6.32-2.2-5.76-10.82-6.5-16.23-1.2-12.75 2.74-26.33-2.18-38.5a6.45 6.45 0 0 0-6.24-3.17z" class="base stroke-color stroke-medium fill-color" /><path id="top-deco-1" fill="url(#top-deco-1-gradient)" d="M382.34 145.74c13.4-22.37-21.18-36.65-3.1-52.28 10.17-8.78 27.54-9.65 37.3 1.73 14.06 16.42-24.42 30.66-5.49 50.34" class="base stroke-color stroke-medium" /><path id="top-deco-2" fill="url(#top-deco-2-gradient)" d="M531.86 141.63c13.4-22.37-21.18-36.65-3.1-52.28 10.16-8.77 27.54-9.65 37.3 1.73 14.06 16.42-24.42 30.66-5.49 50.34" class="base stroke-color stroke-medium" /><path id="stick" d="M688.53 97.64c-22.1.2-38.58 18.05-47.74 36.18-6.06 11.51-16.76 19.9-22.7 31.39-1.25 6.93 8.8 9.18 14.09 7.69 12.93-2.7 23.18-12.75 27.54-24.84 5.19-12.44 16.89-22.23 30.76-23.13 13.62-2.36 26.2 8.17 28.95 20.98 3.96 13.43 2.17 29.25-8.83 39-17.15 17.7-43.18 25.62-57.62 46.15-79.27 153.86-158.41 307.81-236.61 462.2-27.77 56-57.1 111.36-81.42 168.89-1.89 7.18-7.57 15.14-4.52 22.6 4.8 3.66 10.84-2 15-4.49 17.09-15.35 26.56-37.03 37.9-56.58 47.73-91.1 92.47-183.7 138.94-275.45 50.45-100.19 100.9-200.41 152.44-300.04 14.58-21.23 42.26-28.34 58.6-47.95 10.41-11.23 17.07-26.11 15.4-41.53-1.08-25.65-16.18-53.41-43.17-59.52a59.47 59.47 0 0 0-17-1.55z" class="base stroke-color stroke-medium fill-color" /></svg>
11
+ <svg v-else-if="type === 'R'" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 933.33 933.33"><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="defs36222"><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><linearGradient xlink:href="#fillGradient" id="upper-back-gradient" x1="7.34" x2="689.75" y1="207.66" y2="274.33" gradientTransform="matrix(1.10352 0 0 1.06757 -32.26 -16.14)" gradientUnits="userSpaceOnUse" /><linearGradient xlink:href="#fillGradient" id="body-gradient" x1="218.5" x2="906.1" y1="521.53" y2="643.2" gradientTransform="matrix(1.10352 0 0 1.06757 -32.26 -16.14)" gradientUnits="userSpaceOnUse" /><linearGradient xlink:href="#fillGradient" id="upper-wall-gradient" x1="153.41" x2="966.59" y1="229.07" y2="400.73" gradientTransform="matrix(1.10352 0 0 1.06757 -32.26 -16.14)" gradientUnits="userSpaceOnUse" /><linearGradient xlink:href="#fillGradient" id="tower-base-gradient" x1="193.15" x2="878.6" y1="715.41" y2="782.07" gradientTransform="matrix(1.10352 0 0 1.06757 -32.26 -16.14)" gradientUnits="userSpaceOnUse" /></defs><path id="boundary" fill="none" stroke-width="35" d="M468.91 119.08c-30.68-.25-61.62 1.07-71.44 4.28-3.39 33.65.9 51.98-1.82 81.9a197.55 197.55 0 0 1-30.64 5.88c.91-16.5 1.94-32.57 1.75-43.34-22.83-3.32-53.78-3.52-81.93-1.78.78-7.47 1.46-14.92 1.17-23.98-17.52-4.78-126.91 18.93-143.45 24 5.44 29.7 9.56 57.87 14.83 100.53 33.87 23.54 52.83 31.76 56.45 71.2.84-.15 1.94-.27 2.8-.41 10.96 5.29 29.17 9.84 52.39 13.59-2.92 92.32-3.7 349.07-2.77 386.38-25.97 24.61-77.23 48.98-114.08 56.75-5.47 18-10.86 38.83.25 61.22 134.5 1.22 489.67-.34 618.19-.79 6.93-24.97 12.17-43.03 5.24-62.66-38.9-7.68-85.72-19.26-120.9-54.51-2.94-65.39-2.6-320.4-2.47-385.93 23.79-3.7 44.08-8.3 59.01-13.88l.1-.51c.93.13 2.16.25 3.06.38 6.43-35.55 16.95-41.62 66.65-71.46 6.28-46.69 11.8-69.2 12.15-97.1-14.9-3.62-121.91-35.56-135.13-30.97-4.7 27.77 1.95 51.64-4.24 77.76-4.27.2-8.47.36-12.65.49-.09-14.7.25-30.26 1.6-44.17-24.98-10.7-73.24-11.03-105.79-9.63.23-12.68.64-24.4 1.5-38.05-8.75-3.1-39.15-4.94-69.83-5.2z" class="base stroke-color" /><path id="upper-back" fill="url(#upper-back-gradient)" d="M214.93 336.6s3.43-123.38 18.64-164.39c31.78-6.84 94.34-10.06 133.2-4.4.43 25.08-5.74 77.85-1.68 101.98 35.3-1.67 106.84 2.6 152.36-2.5 1.02-29.43-7.67-71.1.94-103.91 28.9-2.17 94.22-4.46 124.64 8.57-4.06 41.98.6 99.69.6 99.69l79.74 2.75-11.88 63.14c-99.56 37.2-434.27 31.67-496.56-.94z" class="base stroke-color stroke-medium" /><path id="tower-base" fill="url(#tower-base-gradient)" d="M268.16 735.55c-25.33 25.2-78.25 50.57-115.99 58.53-5.47 18.01-10.86 38.83.26 61.22 134.5 1.22 489.66-.34 618.18-.79 6.93-24.97 12.17-43.03 5.24-62.66-39.57-7.81-87.36-19.6-122.73-56.3" class="base stroke-color stroke-medium" /><path id="lower-line" fill="none" d="M212.54 805.16c157.8.07 329.05-5.8 497.82.6" class="base stroke-color stroke-medium" /><path id="body" fill="url(#body-gradient)" d="M270.3 323.45c-3.98 47.2-5.13 375.99-4.03 415.15 58.25-4.91 329-5.22 388.7-.6-3.38-73.7-2.45-413.51-2.45-413.51" class="base stroke-color stroke-medium" /><path id="bricks" fill="none" d="M372.03 395.73c-20.05-.08-34.74 1.05-60.48 3.84l69.45-3.73a593.8 593.8 0 0 0-8.97-.11zm22.2 60.6c-31.6-.1-52.54 1.48-84 4.07l107.85-3.73c-8.69-.21-16.55-.32-23.85-.35zM357.15 487c.42 15.17-.33-7.04.48 16.8zm114.1 34.8c-82.58 1.18-84.73.62-161.03 5.88zm-55.3 32.72c.37 13.37-.33-7.2.47 16.15zm47.33 35.54c-61.2-.13-106.74 1.73-153.62 6.23l180.85-6.05c-9.43-.1-18.49-.16-27.23-.18zm16.92 20.28.38 14.57c-.01-1.42-.1-4.94-.38-14.57zm.38 14.57c.05 3.25-.28-5.52.36 13.4zm-123.43-3.4c.42 15.17-.33-7.04.48 16.8zm110.81 38.17c-67.75-.19-125.29 2.36-156.87 4.68l227.46-3.47a2419.13 2419.13 0 0 0-70.59-1.2zm-52.28 22.99.38 14.57c-.02-1.42-.1-4.95-.38-14.57zm.38 14.57c.04 3.24-.29-5.52.36 13.4z" class="base stroke-color stroke-medium" /><path id="upper-wall" fill="url(#upper-wall-gradient)" d="M142.55 166.03c5.44 29.7 9.56 57.88 14.83 100.54 33.87 23.54 52.83 31.76 56.45 71.2 101.73-18.27 408.56-14.06 500.82-.37 6.43-35.55 16.95-41.63 66.65-71.46 6.28-46.69 11.8-69.2 12.15-97.1-14.9-3.61-121.91-35.56-135.13-30.97-4.7 27.78 1.95 51.64-4.24 77.76-40.06 2-75.75.48-117.2-10.28.2-34.91.15-54.06 1.87-81.08-17.5-6.22-121.64-7.32-141.28-.91-3.39 33.65.9 51.98-1.82 81.9-35.56 10.03-69.29 7.43-111.74 9.8-3.42-35.57 2.9-48.05 2.09-73.02-17.52-4.78-126.91 18.93-143.45 24z" class="base stroke-color stroke-medium" /><path id="upper-line" fill="none" d="M202.72 272.29c156.95-15.47 389.07-16.43 523.78 3.73" class="base stroke-color stroke-medium" /></svg>
12
+ <svg v-else-if="type === 'Q'" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 933.33 933.33"><style id="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="defs"><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><linearGradient xlink:href="#fillGradient" id="hair5-grad" x1="785.14" x2="840.91" y1="294.76" y2="363.09" gradientTransform="translate(30 20)" gradientUnits="userSpaceOnUse" /><linearGradient xlink:href="#fillGradient" id="hair4-grad" x1="649.86" x2="711.12" y1="171.18" y2="227.75" gradientTransform="translate(30 20)" gradientUnits="userSpaceOnUse" /><linearGradient xlink:href="#fillGradient" id="hair3-grad" x1="406.01" x2="470.83" y1="103.53" y2="132.99" gradientTransform="translate(30 20)" gradientUnits="userSpaceOnUse" /><linearGradient xlink:href="#fillGradient" id="hair2-grad" x1="167.87" x2="234.62" y1="175" y2="175" gradientTransform="translate(30 20)" gradientUnits="userSpaceOnUse" /><linearGradient xlink:href="#fillGradient" id="hair1-grad" x1="23.46" x2="87.37" y1="337.86" y2="315.46" gradientTransform="translate(30 20)" gradientUnits="userSpaceOnUse" /><linearGradient xlink:href="#fillGradient" id="hairknot1-grad" x1="339.47" x2="514.54" y1="530.61" y2="571.59" gradientTransform="translate(-93.77 -199.5) scale(.85393)" gradientUnits="userSpaceOnUse" /><linearGradient xlink:href="#fillGradient" id="hairknot3-grad" x1="339.47" x2="495.02" y1="530.61" y2="584.76" gradientTransform="translate(117.23 -251.5) scale(.85393)" gradientUnits="userSpaceOnUse" /><linearGradient xlink:href="#fillGradient" id="hairknot4-grad" x1="339.47" x2="487.21" y1="530.61" y2="584.76" gradientTransform="translate(325.24 -191.5) scale(.85393)" gradientUnits="userSpaceOnUse" /><linearGradient xlink:href="#fillGradient" id="hairknot5-grad" x1="339.47" x2="498.93" y1="530.61" y2="584.76" gradientTransform="translate(447.85 -65.75) scale(.85393)" gradientUnits="userSpaceOnUse" /><linearGradient xlink:href="#fillGradient" id="hairknot2-grad" x1="339.47" x2="510.64" y1="530.61" y2="584.76" gradientTransform="translate(-219.1 -48.92) scale(.85393)" gradientUnits="userSpaceOnUse" /><linearGradient xlink:href="#fillGradient" id="filler-grad" x1="153.6" x2="761.36" y1="380.54" y2="682.21" gradientTransform="translate(30 20)" gradientUnits="userSpaceOnUse" /><linearGradient xlink:href="#fillGradient" id="crown-grad" x1="153.6" x2="761.36" y1="380.54" y2="682.21" gradientTransform="translate(30 20)" gradientUnits="userSpaceOnUse" /><linearGradient xlink:href="#fillGradient" id="fullhair-grad" x1="153.6" x2="761.36" y1="380.54" y2="682.21" gradientTransform="translate(30 20)" gradientUnits="userSpaceOnUse" /><linearGradient xlink:href="#fillGradient" id="cross-grad" x1="153.6" x2="761.36" y1="380.54" y2="682.21" gradientTransform="translate(30 20)" gradientUnits="userSpaceOnUse" /><linearGradient xlink:href="#fillGradient" id="base-grad" x1="153.6" x2="761.36" y1="380.54" y2="682.21" gradientTransform="translate(30 20)" gradientUnits="userSpaceOnUse" /></defs><path id="boundary" fill="none" stroke-width="35" d="M660.68 718.33c10.94-94.74 43.2-209.42 102.48-299.25a39.97 39.97 0 0 0 21.82 6.51c21.68 0 39.25-17.12 39.25-38.24a37.4 37.4 0 0 0-3.3-15.3c21.54.22 36.23 4.98 54.63-.16 2.68-13.83-12.17-18.27-26.41-37.32-13.28 5.43-27.97 11.58-41.09 21.86a39.95 39.95 0 0 0-23.08-7.32c-21.68 0-39.25 17.12-39.25 38.24a37.61 37.61 0 0 0 8.08 23.07c-51.19 44.95-112.72 143.43-151.22 164.96-29.6-62.18 12.69-205.2 44.46-278.64a40.14 40.14 0 0 0 15.32 3.1c21.67 0 39.25-17.13 39.25-38.25a37.6 37.6 0 0 0-7.87-22.95c20.21-5.83 40.26-11.12 51.15-12.64-4.71-5.65-1.7-16-40-37.05l-29.33 36.63a40.18 40.18 0 0 0-13.2-2.23c-21.68 0-39.25 17.12-39.25 38.24a37.78 37.78 0 0 0 11.93 27.33c-50.57 60.7-120.62 188.65-144.45 255.12-35.85-80.11-34.18-218.8-33.46-304.4 20.51-1.42 36.42-18.02 36.47-38.05 0-14.97-8.97-28.56-22.95-34.78 15.35-22.32 32.59-48.04 33.96-64.3-8.56.2-34.94 4.63-50.8 12.54-3.3 8.32-3.13 27.74-1.92 48.47-20.64 1.27-36.73 17.92-36.78 38.07.04 16.37 10.76 30.9 26.67 36.14-28.48 79.66-58.76 208.18-62.36 303.52C310.98 489.94 280 365.6 258.95 288.64c14.35-6.05 23.65-19.82 23.67-35.05 0-19.7-15.36-36.16-35.47-38.06 6.22-12.28 5.72-18.25 9.47-41.01-10.56-11.82-22.9-10.12-50.75-14.21.8 27.72 14.54 39.02 26.06 56.73-16.51 4.9-27.8 19.73-27.81 36.55 0 21.12 17.57 38.24 39.25 38.24.49-.02.98-.06 1.47-.1-3.38 94.8 13.8 225.09 25.7 282.34-41.7-28.13-88.76-82.84-132-137.35a38.04 38.04 0 0 0 18.73-32.54c0-21.12-17.57-38.24-39.25-38.24a40.23 40.23 0 0 0-10.94 1.52c-4.97-22.4-17.15-46.04-26.82-57.68-13.44 2.8-14.58 30.31-18.8 44.43 8.72 9.6 17.51 16.83 25.93 26.19a37.63 37.63 0 0 0-8.61 23.78c0 21.12 17.57 38.24 39.24 38.24a40.25 40.25 0 0 0 7.11-.71c49.02 116.08 72.23 169.42 99.97 276.2m15.22 18.27c12.59 30.53 15.92 93 15.92 93m371.88 4.18s2.31-66.7 14.6-97.08m-368.15 109c88.83 10.6 232.73 14.35 332.96 4.4" class="base stroke-color" /><path id="hair5" fill="url(#hair5-grad)" d="M875.56 371.9c2.67-13.84-12.17-18.28-26.41-37.33-19.84 8.12-42.82 17.8-59 40.52 40.86-8.43 59.44 4.06 85.41-3.2z" class="base stroke-color stroke-medium" /><path id="hair4" fill="url(#hair4-grad)" d="M744.9 226c-4.71-5.65-1.7-16-40-37.05l-48.86 61.03c27.41-8.55 70.77-21.46 88.86-23.98z" class="base stroke-color stroke-medium" /><path id="hair3" fill="url(#hair3-grad)" d="M504.62 102.52c-8.56.19-34.94 4.62-50.8 12.53-4.8 12.1-2.31 47.6.13 76.64 15.19-24.37 48.74-66.26 50.67-89.17z" class="base stroke-color stroke-medium" /><path id="hair2" fill="url(#hair2-grad)" d="M256.62 174.52c-10.56-11.81-22.9-10.12-50.75-14.21.97 33.73 21.1 43.13 33.08 69.38 15.19-24.37 12.74-25.26 17.67-55.17z" class="base stroke-color stroke-medium" /><path id="hair1" fill="url(#hair1-grad)" d="M80.26 309.78c-13.44 2.8-14.58 30.31-18.8 44.43 15.06 16.6 30.37 26.05 43.52 51.72 14.06-25.04-8.76-76.94-24.72-96.15z" class="base stroke-color stroke-medium" /><path id="filler" fill="url(#filler-grad)" d="m273.94 844.89-50.38-166.21L657.32 680l-49.51 169.68z" /><path id="crown" fill="url(#crown-grad)" d="M642.71 736.28c-122.2-43.67-283.4-43.92-402.4-.1 12.6 30.53 15.93 93 15.93 93 100.72-28.18 271.95-27.32 371.88 4.18 0 0 2.31-66.7 14.6-97.08z" class="base stroke-color stroke-medium" /><path id="fullhair" fill="url(#fullhair-grad)" d="M225.1 717.91c121.85-52.68 312.58-53.52 435.58.41 12.13-105.03 50.35-234.69 122.68-327.7C728.52 412.1 648.88 549.5 602.6 575.4c-36.3-76.27 35.54-274.2 63.48-316.13-46.9 28.21-146.15 203.01-175.47 284.78-42.27-94.44-32.38-271.08-33.39-345.1-31.8 69.55-73.51 229.37-77.78 342.3-81.2-60.86-109.85-225.26-131.5-290.4-11.93 93.8 8.88 257.17 22.62 323.23-52.8-35.6-114.44-113.92-165.61-180.3C170 549.33 193.54 596.45 225.1 717.91z" class="base stroke-color stroke-medium" /><path id="cross" fill="url(#cross-grad)" d="M437.76 719.78c-19-.1-8.58 14.64-12.32 21.12-8.53 4.95-36.24-3.83-27.32 14.34 6.32 12.87 15.76 6.81 26.37 10.96 5.28 7.27-3.64 29.36 15.04 28.9 15.43-.38 7.02-22.43 10.32-28.37 9.32-6.1 21.56 2.16 27.73-13.45 4.69-11.86-18.51-7.46-27.67-12.57-3.84-5.73 7.62-20.82-12.15-20.93z" class="base stroke-color stroke-medium" /><path id="path37" fill="url(#base-grad)" d="M274.57 845.27c88.83 10.6 232.72 14.36 332.96 4.41-56.57-25.28-259.89-25.07-332.96-4.4z" class="base stroke-color stroke-medium" /><ellipse id="hairknot2" cx="243.37" cy="253.59" fill="url(#hairknot1-grad)" class="base stroke-color stroke-medium" rx="39.25" ry="38.24" /><ellipse id="hairknot1" cx="118.02" cy="404.18" fill="url(#hairknot2-grad)" class="base stroke-color stroke-medium" rx="39.25" ry="38.24" /><ellipse id="hairknot3" cx="454.37" cy="201.59" fill="url(#hairknot3-grad)" class="base stroke-color stroke-medium" rx="39.25" ry="38.24" /><ellipse id="hairknot4" cx="662.37" cy="261.59" fill="url(#hairknot4-grad)" class="base stroke-color stroke-medium" rx="39.25" ry="38.24" /><ellipse id="hairknot5" cx="784.98" cy="387.35" fill="url(#hairknot5-grad)" class="base stroke-color stroke-medium" rx="39.25" ry="38.24" /></svg>
13
+ <svg v-else-if="type === 'K'" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 933.33 933.33"><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}.fill-color{fill:#fff}</style><defs id="defs36222"><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><linearGradient xlink:href="#fillGradient" id="linearGradient2272" x1="297.55" x2="368.56" y1="427.05" y2="521.22" gradientTransform="translate(19.7 .05) scale(1.02329)" gradientUnits="userSpaceOnUse" /><linearGradient xlink:href="#fillGradient" id="linearGradient2274" x1="495.3" x2="595.97" y1="448.55" y2="528.55" gradientTransform="translate(19.7 .05) scale(1.02329)" gradientUnits="userSpaceOnUse" /><linearGradient xlink:href="#fillGradient" id="base-gradient" x1="221.55" x2="633.49" y1="774.94" y2="859.35" gradientTransform="translate(19.7 .05) scale(1.02329)" gradientUnits="userSpaceOnUse" /><linearGradient xlink:href="#fillGradient" id="linearGradient2476" x1="342.53" x2="549.85" y1="145.67" y2="282.34" gradientUnits="userSpaceOnUse" /><linearGradient xlink:href="#fillGradient" id="cross-gradient" x1="379.2" x2="579.85" y1="160.25" y2="286.92" gradientTransform="translate(19.7 .05) scale(1.02329)" gradientUnits="userSpaceOnUse" /><linearGradient xlink:href="#fillGradient" id="top-base-gradient" x1="368.47" x2="494.55" y1="319.27" y2="319.27" gradientTransform="translate(19.7 .05) scale(1.02329)" gradientUnits="userSpaceOnUse" /><linearGradient xlink:href="#fillGradient" id="crown-lower-gradient" x1="129.96" x2="812.37" y1="428.66" y2="836.31" gradientTransform="translate(19.7 .05) scale(1.02329)" gradientUnits="userSpaceOnUse" /><linearGradient xlink:href="#fillGradient" id="background-gradient" x1="129.96" x2="812.37" y1="428.66" y2="836.31" gradientTransform="translate(19.7 .05) scale(1.02329)" gradientUnits="userSpaceOnUse" /><linearGradient xlink:href="#fillGradient" id="bar1and5-gradient" x1="129.96" x2="812.37" y1="428.66" y2="836.31" gradientTransform="translate(19.7 .05) scale(1.02329)" gradientUnits="userSpaceOnUse" /><linearGradient xlink:href="#fillGradient" id="bar3-gradient" x1="129.96" x2="812.37" y1="428.66" y2="836.31" gradientTransform="translate(19.7 .05) scale(1.02329)" gradientUnits="userSpaceOnUse" /><linearGradient xlink:href="#fillGradient" id="linearGradient598" x1="129.96" x2="812.37" y1="428.66" y2="836.31" gradientUnits="userSpaceOnUse" /></defs><path id="boundary" fill="none" stroke-width="35" d="M479.86 63.92c-16.08-.25-32.8 1.82-42.39 6.4-4.04 18.82 16.84 70.79 10.79 88.03-17.08-2.29-78.86-17.22-106.85-8.7-12.51 18.6-7.07 52.47 1.63 68.22 30.92 6.7 78.63-14.24 101.47-12.43 3.63 12-2.39 44.22-8.1 67.46-16.25 5-28.93 15.03-30.34 30.68a290.4 290.4 0 0 0-.93 14.46c-4.83 3.76-8.5 8.14-10.27 13.23a127.09 127.09 0 0 0-2.52 8.1l.12-.48c-18.65-12-43.48-20.62-71.76-22.29-8.44-.5-17.02-.71-25.61-.6C212 317 125.8 347.23 113.56 423.7 95.7 535.27 194.5 601.03 230.06 719.06c112.87-64.37 373.15-60.27 481.3-4.64 28.7-91.23 143.1-197.86 117.51-290.87-23.7-86.13-138.9-111.33-214.92-107.03-30.81 1.75-60.39 11.72-82.6 25.43l.03.21a80.28 80.28 0 0 0-2.28-9.64c-1.86-6.15-5.96-11.31-11.57-15.54.11-4.65.04-9.75-.3-15.44-.86-15.16-14.85-25.1-32.57-29.61-5.36-22.14-11.09-52.46-3.94-66.87 24.04-4.76 81.73 11.63 103.52 4.37 14.22-19.52 12.31-50.07 3.5-67.17-20.45-3.98-80.32 12.3-99.54 13.29.7-16.41 29.55-64.42 30.27-84.18-7.08-4.66-22.53-7.22-38.61-7.46zm113.1 341.52c19.46.15 37.21 1.87 47.75 7.83 49.02 27.73 56.43 121.52-29.14 163.98 2.2-40.6 13.33-89.65 8.67-117.47-3.46-20.68-13.94-39.33-27.28-54.34zm-257.6 3.64c-9.92 13.32-17.45 28.85-20.28 45.76-4.5 26.84 5.74 73.47 8.45 113.17-84.82-55.96-76.27-140.76-2.05-157.72 3.25-.74 8.1-1.08 13.89-1.21zm179.18 16.03c15.47 15.64 40.75 26.97 50.66 51.17 10.9 26.63 12.2 66.1 1.1 100.02-2.22-1.26-4.87-2.7-7.2-4.01-40.07-30.45-41.29-64.79-47.02-112.73-1.5-12.51-.13-23.78 2.46-34.45zm-106.71 6.18c1.93 8.5 3.36 18.06 3.76 29.34 1.35 38.1-12.44 84.08-41.67 113.37-12.07-34.48-10.98-75.34.2-102.67 7.46-18.2 23.55-29.1 37.7-40.04zm64.37 265.1c-79.44-.05-159.75 12.71-211.15 39.39 14.4 45.5 20.16 96.16 20.16 96.16 93.8-29.12 284.35-30.29 376.44 4.24 0 0 9.5-68.23 20.5-102.32-47.93-24.57-126.5-37.43-205.95-37.48zm-2.04 136.49c-65.91-.27-132.11 6.29-168.34 19.24 89.9 10.73 233.52 12.5 334.99 2.41-35.1-14.31-100.73-21.4-166.65-21.65z" class="base stroke-color" /><path id="bar2" fill="url(#linearGradient2272)" d="M315.06 626.8c23.73-34.29-7.21-128.77.02-171.97 11.74-70.1 103.85-117.15 116.15-76.5 14.58 48.2-44.63 52.76-61.1 93-15.14 36.97-11.9 98.73 17.56 135.9" class="base stroke-color stroke-medium" /><path id="bar4" fill="url(#linearGradient2274)" d="M620.26 631.74c-23.73-34.29 7.22-128.77-.02-171.96-11.74-70.1-103.85-117.16-116.14-76.51-14.59 48.2 44.62 52.76 61.1 93 15.13 36.97 11.9 98.74-17.57 135.9" class="base stroke-color stroke-medium" /><path id="cross" fill="url(#cross-gradient)" d="M430.27 294.88c5.38-15.35 19.34-72.58 14.24-89.44-22.84-1.8-70.54 19.14-101.46 12.43-8.71-15.75-14.15-49.62-1.64-68.22 28-8.52 89.77 6.41 106.85 8.7 6.05-17.24-14.83-69.21-10.79-88.03 19.19-9.17 66.84-8.26 81 1.06-.72 19.76-29.57 67.77-30.27 84.18 19.22-.99 79.1-17.27 99.53-13.3 8.82 17.1 10.73 47.66-3.49 67.18-21.79 7.26-79.48-9.13-103.52-4.37-10.13 20.44 5.62 73.2 9.5 88.63" class="base stroke-color stroke-medium" /><path id="top-base" fill="url(#top-base-gradient)" d="M437.63 380.54c-25.32-21.91-36.47-22.1-31.55-76.95 4.2-46.85 108.73-44.43 111.16-2.04 3.05 53.15-14.62 57.14-26.91 82.87" class="base stroke-color stroke-medium" /><path id="background" fill="url(#background-gradient)" d="M296.98 849.69 231.5 648.87l482.2-2.11-76.63 209.08Z" class="base stroke-color stroke-medium" /><path id="bar1and5" fill="url(#bar1and5-gradient)" d="M586.13 587.45c-29.43-15.9-91.25-54.79-124.8-56.17-25.66-1.06-78.6 33.23-105.83 54.32-117.95-53.7-116.54-156.46-34.02-175.3 13.44-3.08 53.45.47 79.88-.74-8.42-23.25-17.6-39.73-8.89-70.67-18.65-12-43.48-20.61-71.76-22.3-8.44-.5-17.02-.7-25.61-.6-83.1 1.03-169.3 31.25-181.54 107.7-17.86 111.6 80.94 177.35 116.5 295.38 112.87-64.37 373.15-60.27 481.3-4.64 28.7-91.23 143.1-197.86 117.51-290.87-23.7-86.13-138.9-111.33-214.92-107.03-30.81 1.75-60.39 11.72-82.6 25.43 4.3 24.53-4.42 44.58-11.64 65.78 35.14.01 96.8-8.16 121 5.53 53.45 30.23 57.52 139.06-54.58 174.18z" class="base stroke-color stroke-medium" /><path id="bar3" fill="url(#bar3-gradient)" d="M355.84 585.91c38.88-27.3 57.3-81.51 55.75-125.28-2.24-63.11-36-74.12-16.72-129.36 13.07-37.46 121.94-39.39 134.23 1.26 14.59 48.21-22.86 78.23-17.02 127.03 6.8 56.94 7.23 94.68 73.98 129.52" class="base stroke-color stroke-medium" /><path id="crown-lower" fill="url(#crown-lower-gradient)" d="M678.15 733.86c-95.86-49.13-314.3-51.44-417.1 1.92 14.4 45.5 20.16 96.16 20.16 96.16 93.8-29.13 284.34-30.29 376.44 4.24 0 0 9.5-68.23 20.5-102.32z" class="base stroke-color stroke-medium" /><path id="base" fill="url(#base-gradient)" d="M301.82 852.12c89.9 10.73 233.52 12.49 334.99 2.42-70.2-28.64-262.53-28.32-335-2.42z" class="base stroke-color stroke-medium" /><path id="jewel-center" d="M466.59 737.77a17.3 16.48 0 0 0-17.3 16.48 17.3 16.48 0 0 0 17.3 16.48 17.3 16.48 0 0 0 17.3-16.48 17.3 16.48 0 0 0-17.3-16.48z" class="base stroke-color stroke-medium fill-color" /><path id="jewel-right" d="M562.95 753.43a18.85 12.36 9.22 0 0-15.7 9.54 18.85 12.36 9.22 0 0 16.63 15.22 18.85 12.36 9.22 0 0 20.58-9.18 18.85 12.36 9.22 0 0-16.62-15.22 18.85 12.36 9.22 0 0-4.89-.36z" class="base stroke-color stroke-medium fill-color" /><path id="jewel-left" d="M367.89 753.35a12.36 19.34 79.73 0 0-5 .48 12.36 19.34 79.73 0 0-16.83 15.6 12.36 19.34 79.73 0 0 21.23 8.72 12.36 19.34 79.73 0 0 16.83-15.6 12.36 19.34 79.73 0 0-16.23-9.2z" class="base stroke-color stroke-medium fill-color" /></svg>
14
+ </template>
15
+
16
+ <script setup lang="ts">
17
+ import type { Piece } from '@bedard/hexchess'
18
+
19
+ defineProps<{
20
+ type: Piece | null
21
+ }>()
22
+ </script>
package/src/lib/components/hexboard/pieces/Gioco.vue ADDED
@@ -0,0 +1,22 @@
1
+ <template>
2
+ <svg v-if="type === 'p'" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50"><defs><linearGradient id="gioco-a-bp" gradientTransform="matrix(.94331 0 0 1 615.66 493.37)" gradientUnits="userSpaceOnUse" x1="-639.4" x2="-612.91" y1="-465.15" y2="-465.15"><stop offset="0" stop-color="#796c60" /><stop offset="1" stop-color="#4b403b" /></linearGradient></defs><path d="M25 12.264c-3.56 0-6.447 2.655-6.447 5.93 0 1.705.799 3.326 2.19 4.45h-1.666c-1.312 0-2.4.978-2.4 2.158v.438c0 1.18 1.088 2.157 2.4 2.157h2.376c0 7.293-9.342 6.457-8.689 16.78L25 44.167l12.236.008c.653-10.323-8.689-9.486-8.689-16.779h2.376c1.312 0 2.4-.978 2.4-2.157v-.438c0-1.18-1.087-2.157-2.4-2.157h-1.666c1.391-1.125 2.19-2.747 2.19-4.45 0-3.276-2.886-5.93-6.446-5.931z" fill="url(#gioco-a-bp)" stroke="#1e1e1e" stroke-linejoin="round" stroke-width="1.6" /><path d="M24.999 12.264c-.521 0-1.028.058-1.513.166 6.257.692 7.675 6.466 4.917 9.222-2.016 1.69-7.662.993-7.662.993 2.56.443 4.97 1.954 7.252 2.488-6.033 11.435 9.7 9.026 9.242 19.043.995-10.592-7.673-8.148-8.689-16.78h2.377c1.312 0 2.398-.977 2.398-2.156v-.438c0-1.18-1.086-2.158-2.398-2.158h-1.667c1.391-1.125 2.191-2.746 2.19-4.449 0-3.276-2.886-5.932-6.447-5.932z" opacity=".15" /><path d="M22.959 13.401c-1.77 1.602-2.968 3.612-3.476 6.19 0 0-1.16-4.235 3.476-6.19zM13.342 43.419c.273-5.321 2.572-6.184 7.538-11.434-1.03 3.566-7.387 5.868-7.538 11.434z" fill="#fff" opacity=".25" /></svg>
3
+ <svg v-else-if="type === 'n'" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50"><defs><linearGradient gradientTransform="matrix(1.0621 0 0 1.0589 -3487.5 459.63)" gradientUnits="userSpaceOnUse" x1="3295.1" x2="3321.5" xlink:href="#gioco-a-bn" id="gioco-b-bn" y1="-411.88" y2="-411.88" /><linearGradient id="gioco-a-bn"><stop offset="0" stop-color="#796c60" /><stop offset="1" stop-color="#4b403b" /></linearGradient><linearGradient gradientTransform="matrix(1.1509 0 0 1.1499 214.24 -138.92)" gradientUnits="userSpaceOnUse" x1="-177.63" x2="-151.24" xlink:href="#gioco-a-bn" id="gioco-c-bn" y1="156.68" y2="156.68" /></defs><path class="st28" d="m25.987 23.546-11.592 1.097-1.454-5.216 14.468-6.815 1.763-3.9 10.2 11.892-4.116 17.678H14.74c.245-11.292 9.64-8.1 11.247-14.736z" fill="url(#gioco-b-bn)" stroke="#1e1e1e" stroke-linejoin="round" stroke-width="1.6" /><path d="m29.173 8.72-.879 1.945.426-.943c2.692 3.722 5.608 7.279 8.45 10.888l-5.285 17.671h3.372l4.117-17.671z" opacity=".15" /><path d="M13.24 38.286c-1.437 0-2.627 1.216-2.627 2.685v.545l.013 2.684h28.748l.013-2.684v-.545c0-1.468-1.19-2.685-2.627-2.685H25z" fill="url(#gioco-c-bn)" stroke="#1e1e1e" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.6" /><path d="M15.62 37.633c.159-4.472 2.145-6.971 8.667-9.837-.987 1.107-6.405 2.237-8.667 9.837zM14.418 21.67l-.523-1.803L28.03 13.21l1.217-2.764-.671 3.558-14.35 5.921z" fill="#fff" opacity=".25" /></svg>
4
+ <svg v-else-if="type === 'b'" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50"><defs><linearGradient gradientTransform="matrix(1.019 0 0 1.0751 -3392.3 527.45)" gradientUnits="userSpaceOnUse" x1="3341.2" x2="3366.2" xlink:href="#gioco-a-bb" id="gioco-b-bb" y1="-469.28" y2="-469.28" /><linearGradient id="gioco-a-bb"><stop offset="0" stop-color="#796c60" /><stop offset="1" stop-color="#4b403b" /></linearGradient><linearGradient gradientTransform="matrix(1.1509 0 0 1.1499 214.24 -138.92)" gradientUnits="userSpaceOnUse" x1="-177.63" x2="-151.24" xlink:href="#gioco-a-bb" id="gioco-c-bb" y1="156.68" y2="156.68" /></defs><path d="M26.87 8.223c-5.797-2.298-6.952 2.527-4.668 5.86-9.898 10.6-11.253 16.425-6.195 24.204h17.99c6.084-6.912 2.558-14.515-4.823-22.3-2.883 4.119-3.274 7.35-3.946 11.131l-3.62-.071c-.66-6.006 7.622-15.14 5.261-18.823z" fill="url(#gioco-b-bb)" stroke="#1e1e1e" stroke-linejoin="round" stroke-width="1.6" /><path d="M24.933 7.654c-.625.02-.207.197-.771.567 0 .003.01.006.01.008 3.582-.311-2.369 11.772-3.394 18.894.536-3.014 1.325-5.68 3.082-8.725 2.003-4.351 4.237-8.681 3.008-10.169-.411-.38-1.144-.601-1.934-.575zm4.24 8.338c-.6.856-.517.67-.972 1.462 6.004 6.049 8.728 13.787 3.097 20.838h2.696c6.085-6.912 2.56-14.515-4.822-22.3z" opacity=".15" /><path d="M13.24 38.286c-1.437 0-2.627 1.216-2.627 2.685v.545l.013 2.684h28.749l.012-2.684v-.545c0-1.468-1.19-2.685-2.627-2.685H25z" fill="url(#gioco-c-bb)" stroke="#1e1e1e" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.6" /><path d="M14.895 34.327c-.716-1.396-3.266-6.812 4.513-15.739-2.1 4.86-5.958 8.69-4.513 15.739z" fill="#fff" opacity=".25" /></svg>
5
+ <svg v-else-if="type === 'r'" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50"><defs><linearGradient gradientTransform="matrix(.23554 0 0 .25454 -3002.1 473.49)" gradientUnits="userSpaceOnUse" x1="12797" x2="12909" xlink:href="#gioco-a-br" id="gioco-b-br" y1="-1764.6" y2="-1764.6" /><linearGradient id="gioco-a-br"><stop offset="0" stop-color="#796c60" /><stop offset="1" stop-color="#4b403b" /></linearGradient><linearGradient gradientTransform="translate(40.423 -.922)" gradientUnits="userSpaceOnUse" x1="-30.611" x2="-.235" xlink:href="#gioco-a-br" id="gioco-c-br" y1="42.165" y2="42.165" /></defs><path d="M12.855 10.383v7.663c0 3.268 6.53 3.774 6.53 3.774-.352 9.864-5.036 16.486-5.036 16.486l21.428-.039s-4.651-6.62-5-16.446c0 0 6.896-.507 6.896-3.774v-7.663h-4.72s.459 2.25-.47 3.26c-1.035 1.126-2.418 1.126-3.454 0-.928-1.01-.47-3.26-.47-3.26h-6.59s.459 2.25-.47 3.26c-1.122 1.22-2.699 1.22-3.82 0-.929-1.01-.47-3.26-.47-3.26z" fill="url(#gioco-b-br)" stroke="#1e1e1e" stroke-linejoin="round" stroke-width="1.6" /><path d="m37.543 10.462.014 7.585c.263 3.48-24.58 2.135-24.523 1.03 2.098 2.532 4.445 2.613 6.352 2.744 7.292.498 9.8 8.89 13.306 16.446h2.97s-4.65-6.62-5-16.446c2.547-.395 2.954-.812 4.037-1.058h.018l-.002-.004c1.023-.236 2.81-1.376 2.842-2.713v-7.663z" opacity=".15" /><path d="M13.239 38.286c-1.437 0-2.627 1.216-2.627 2.685v.544l.013 2.685h28.75l.012-2.685v-.544c0-1.469-1.19-2.685-2.627-2.685H25z" fill="url(#gioco-c-br)" stroke="#1e1e1e" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.6" /><g fill="#fff"><path d="M13.656 11.168v5.54c.48-1.867.299-4.088 1.554-5.54zM22.877 11.163c.055.896-.154 1.748-.269 2.616.48-1.866 1.823-2.616 1.823-2.616zM16.947 35.312c.875-1.143 3.603-10.333 3.233-13.244.7.39.658 10.057-3.233 13.244zM33.863 11.209c.005.598-.055 1.226-.187 2.02.48-1.867 1.295-2.04 1.295-2.04z" opacity=".25" /></g></svg>
6
+ <svg v-else-if="type === 'q'" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50"><defs><linearGradient gradientTransform="translate(209.27 -109.27) scale(.31419)" gradientUnits="userSpaceOnUse" x1="-647.27" x2="-525.69" xlink:href="#gioco-a-bq" id="gioco-b-bq" y1="418.44" y2="418.44" /><linearGradient id="gioco-a-bq"><stop offset="0" stop-color="#796c60" /><stop offset="1" stop-color="#4b403b" /></linearGradient><linearGradient gradientTransform="matrix(1.1509 0 0 1.1499 214.23 -138.92)" gradientUnits="userSpaceOnUse" x1="-177.63" x2="-151.24" xlink:href="#gioco-a-bq" id="gioco-c-bq" y1="156.68" y2="156.68" /></defs><path d="M25 6.122c-2.635 0-4.771 2.098-4.771 4.685.002 1.855 1.118 3.534 2.846 4.283-.369 2.286-1.51 7.558-4.68 8.009-2.355.334-3.855-1.287-4.88-3.144a4.19 4.19 0 0 0 1.767-3.4c0-2.327-1.921-4.214-4.291-4.214S6.699 14.228 6.7 16.555c0 2.142 1.64 3.943 3.809 4.183l4.973 17.54h19.036l4.973-17.54c2.169-.24 3.807-2.041 3.809-4.183 0-2.327-1.922-4.214-4.292-4.214s-4.29 1.887-4.29 4.214a4.19 4.19 0 0 0 1.766 3.4c-1.025 1.857-2.525 3.478-4.88 3.144-3.17-.45-4.31-5.723-4.68-8.01 1.729-.748 2.845-2.427 2.847-4.282 0-2.587-2.136-4.685-4.77-4.685z" fill="url(#gioco-b-bq)" stroke="#1e1e1e" stroke-linejoin="round" stroke-width="1.6" /><path d="M39.002 12.342a4.348 4.348 0 0 0-1.567.296c4.741 1.678 3.877 6.805.591 7.316L30.414 38.28h4.2l4.87-17.541c2.17-.241 3.808-2.042 3.81-4.184 0-2.327-1.922-4.214-4.292-4.213z" opacity=".15" /><path d="M13.227 38.286c-1.437 0-2.627 1.216-2.627 2.685v.545l.013 2.684H39.36l.013-2.684v-.545c0-1.468-1.19-2.685-2.627-2.685h-11.76z" fill="url(#gioco-c-bq)" stroke="#1e1e1e" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.6" /><g fill="#fff"><path d="M9.515 13.489c-.794 1.17-1.726 2.667-1.554 4.779 0 0-1.604-3.01 1.554-4.779zM23.659 7.23c-.853.874-2.37 2.934-2.133 5.374-.207-.084-1.73-3.893 2.133-5.374zM12.062 23.328l5.244 14.111-1.17.023z" opacity=".25" /></g></svg>
7
+ <svg v-else-if="type === 'k'" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50"><defs><linearGradient gradientTransform="matrix(.26458 0 0 .25357 227.43 -666.55)" gradientUnits="userSpaceOnUse" x1="-825.75" x2="-704.44" xlink:href="#gioco-a-bk" id="gioco-b-bk" y1="2712.8" y2="2712.8" /><linearGradient id="gioco-a-bk"><stop offset="0" stop-color="#796c60" /><stop offset="1" stop-color="#4b403b" /></linearGradient><linearGradient gradientTransform="translate(225.05 -690.53)" gradientUnits="userSpaceOnUse" x1="-215.24" x2="-184.86" xlink:href="#gioco-a-bk" id="gioco-c-bk" y1="731.78" y2="731.78" /></defs><path d="M25.006 3.868c-1.803.1-3.228 1.234-3.228 2.618 0 .565.244 1.644.693 2.097h-5.766v5.106h6.306l-2.61 2.833 2.673 2.167c-5.584.362-12.02 1.643-13.154 3.997-1.268 2.638 6.215 15.6 6.215 15.6h17.73s7.484-12.963 6.215-15.6c-1.133-2.357-7.594-3.64-13.179-3.999l2.71-2.165-2.61-2.833h6.306V8.583H27.54c.449-.453.693-1.531.693-2.097 0-1.384-1.425-2.518-3.228-2.618z" fill="url(#gioco-b-bk)" stroke="#1e1e1e" stroke-linejoin="round" stroke-width="1.6" style="paint-order: fill markers;" /><path d="m31.289 38.283 2.573-.005s7.482-12.428 6.214-15.065c-4.136-3.824-13.18-4.525-13.18-4.525 11.05 2.822 12.618 5.028 4.393 19.595z" opacity=".15" /><path d="M13.242 38.286c-1.437 0-2.627 1.216-2.627 2.685v.545l.013 2.684h28.749l.012-2.684v-.545c0-1.468-1.19-2.685-2.627-2.685h-11.76z" fill="url(#gioco-c-bk)" stroke="#1e1e1e" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.6" /><g fill="#fff"><path d="M13.283 31.138s-3.074-6.555-2.666-8.092c.408-1.536 5.987-2.736 5.987-2.736-6.486 2.71-4.786 4.558-3.321 10.828zM17.521 12.884v-3.52l1.532-.011c-.891.007-1.532 2.147-1.532 3.531zM24.798 4.67s-2.614.92-1.53 3.522c-.178-.007-2.142-2.72 1.53-3.522z" opacity=".25" /></g></svg>
8
+ <svg v-else-if="type === 'P'" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50"><defs><linearGradient id="gioco-a-wp" gradientTransform="matrix(.94331 0 0 1 615.66 493.37)" gradientUnits="userSpaceOnUse" x1="-639.4" x2="-612.91" y1="-465.15" y2="-465.15"><stop offset="0" stop-color="#fff" /><stop offset="1" stop-color="#bba38a" /></linearGradient></defs><path d="M25 12.264c-3.56 0-6.447 2.655-6.447 5.93 0 1.705.799 3.326 2.19 4.45h-1.666c-1.312 0-2.4.978-2.4 2.158v.438c0 1.18 1.088 2.157 2.4 2.157h2.376c0 7.293-9.342 6.457-8.689 16.78L25 44.167l12.236.008c.653-10.323-8.689-9.486-8.689-16.779h2.376c1.312 0 2.4-.978 2.4-2.157v-.438c0-1.18-1.087-2.157-2.4-2.157h-1.666c1.391-1.125 2.19-2.747 2.19-4.45 0-3.276-2.886-5.93-6.446-5.931z" fill="url(#gioco-a-wp)" stroke="#323232" stroke-linejoin="round" stroke-width="1.6" /><path d="M24.999 12.264c-.521 0-1.028.058-1.513.166 6.257.692 7.675 6.466 4.917 9.222-2.016 1.69-7.662.993-7.662.993 2.56.443 4.97 1.954 7.252 2.488-6.033 11.435 9.7 9.026 9.242 19.043.995-10.592-7.673-8.148-8.689-16.78h2.377c1.312 0 2.398-.977 2.398-2.156v-.438c0-1.18-1.086-2.158-2.398-2.158h-1.667c1.391-1.125 2.191-2.746 2.19-4.449 0-3.276-2.886-5.932-6.447-5.932z" opacity=".15" /><path d="M22.959 13.401c-1.77 1.602-2.968 3.612-3.476 6.19 0 0-1.16-4.235 3.476-6.19zM13.342 43.419c.273-5.321 2.572-6.184 7.538-11.434-1.03 3.566-7.387 5.868-7.538 11.434z" fill="#fff" /></svg>
9
+ <svg v-else-if="type === 'N'" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50"><defs><linearGradient gradientTransform="translate(474.35 493.34)" gradientUnits="userSpaceOnUse" x1="-462.21" x2="-434.18" xlink:href="#gioco-a-wn" id="gioco-b-wn" y1="-469.84" y2="-469.84" /><linearGradient id="gioco-a-wn"><stop offset="0" stop-color="#fff" /><stop offset="1" stop-color="#bba38a" /></linearGradient><linearGradient gradientTransform="translate(474.35 493.34)" gradientUnits="userSpaceOnUse" x1="-464.54" x2="-434.16" xlink:href="#gioco-a-wn" id="gioco-c-wn" y1="-452.1" y2="-452.1" /></defs><path class="st28" d="m25.987 23.546-11.592 1.097-1.454-5.216 14.468-6.815 1.763-3.9 10.2 11.892-4.116 17.678H14.74c.245-11.292 9.64-8.1 11.247-14.736z" fill="url(#gioco-b-wn)" stroke="#323232" stroke-linejoin="round" stroke-width="1.6" /><path d="m29.173 8.72-.879 1.945.426-.943c2.692 3.722 5.608 7.279 8.45 10.888l-5.285 17.671h3.372l4.117-17.671z" opacity=".1" /><path d="M13.24 38.286c-1.437 0-2.627 1.216-2.627 2.685v.545l.013 2.684h28.748l.013-2.684v-.545c0-1.468-1.19-2.685-2.627-2.685H25z" fill="url(#gioco-c-wn)" stroke="#323232" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.6" /><path d="M15.62 37.633c.159-4.472 2.145-6.971 8.667-9.837-.987 1.107-6.405 2.237-8.667 9.837zM14.418 21.67l-.523-1.803L28.03 13.21l1.217-2.764-.671 3.558-14.35 5.921z" fill="#fff" /></svg>
10
+ <svg v-else-if="type === 'B'" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50"><defs><linearGradient gradientTransform="matrix(1.019 0 0 1.0751 -3392.3 527.45)" gradientUnits="userSpaceOnUse" x1="3341.2" x2="3366.2" xlink:href="#gioco-a-wb" id="gioco-b-wb" y1="-469.26" y2="-469.26" /><linearGradient id="gioco-a-wb"><stop offset="0" stop-color="#fff" /><stop offset="1" stop-color="#bba38a" /></linearGradient><linearGradient gradientTransform="matrix(1.1509 0 0 1.1499 214.24 -138.92)" gradientUnits="userSpaceOnUse" x1="-177.63" x2="-151.24" xlink:href="#gioco-a-wb" id="gioco-c-wb" y1="156.68" y2="156.68" /></defs><path d="M26.87 8.223c-5.797-2.298-6.952 2.527-4.668 5.86-9.898 10.6-11.253 16.425-6.195 24.204h17.99c6.084-6.912 2.558-14.515-4.823-22.3-2.883 4.119-3.274 7.35-3.946 11.131l-3.62-.071c-.66-6.006 7.622-15.14 5.261-18.823z" fill="url(#gioco-b-wb)" stroke="#323232" stroke-linejoin="round" stroke-width="1.6" /><path d="M24.933 7.654c-.625.02-.207.197-.771.567 0 .003.01.006.01.008 3.582-.311-2.369 11.772-3.394 18.894.536-3.014 1.325-5.68 3.082-8.725 2.003-4.351 4.237-8.681 3.008-10.169-.411-.38-1.144-.601-1.934-.575zm4.24 8.338c-.6.856-.517.67-.972 1.462 6.004 6.049 8.728 13.787 3.097 20.838h2.696c6.085-6.912 2.56-14.515-4.822-22.3z" opacity=".1" /><path d="M13.24 38.286c-1.437 0-2.627 1.216-2.627 2.685v.545l.013 2.684h28.749l.012-2.684v-.545c0-1.468-1.19-2.685-2.627-2.685H25z" fill="url(#gioco-c-wb)" stroke="#323232" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.6" /><path d="M14.895 34.327c-.716-1.396-3.266-6.812 4.513-15.739-2.1 4.86-5.958 8.69-4.513 15.739z" fill="#fff" /></svg>
11
+ <svg v-else-if="type === 'R'" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50"><defs><linearGradient gradientTransform="translate(582.87 492.95)" gradientUnits="userSpaceOnUse" x1="-570.82" x2="-544.4" xlink:href="#gioco-a-wr" id="gioco-b-wr" y1="-468.61" y2="-468.61" /><linearGradient id="gioco-a-wr"><stop offset="0" stop-color="#fff" /><stop offset="1" stop-color="#bba38a" /></linearGradient><linearGradient gradientTransform="translate(582.87 492.95)" gradientUnits="userSpaceOnUse" x1="-573.06" x2="-542.69" xlink:href="#gioco-a-wr" id="gioco-c-wr" y1="-451.71" y2="-451.71" /></defs><path d="M12.855 10.383v7.663c0 3.268 6.53 3.774 6.53 3.774-.352 9.864-5.036 16.486-5.036 16.486l21.428-.039s-4.651-6.62-5-16.446c0 0 6.896-.507 6.896-3.774v-7.663h-4.72s.459 2.25-.47 3.26c-1.035 1.126-2.418 1.126-3.454 0-.928-1.01-.47-3.26-.47-3.26h-6.59s.459 2.25-.47 3.26c-1.122 1.22-2.699 1.22-3.82 0-.929-1.01-.47-3.26-.47-3.26z" fill="url(#gioco-b-wr)" stroke="#323232" stroke-linejoin="round" stroke-width="1.6" /><path d="m37.543 10.462.014 7.585c.263 3.48-24.58 2.135-24.523 1.03 2.098 2.532 4.445 2.613 6.352 2.744 7.292.498 9.8 8.89 13.306 16.446h2.97s-4.65-6.62-5-16.446c2.547-.395 2.954-.812 4.037-1.058h.018l-.002-.004c1.023-.236 2.81-1.376 2.842-2.713v-7.663z" opacity=".1" /><path d="M13.239 38.286c-1.437 0-2.627 1.216-2.627 2.685v.544l.013 2.685h28.75l.012-2.685v-.544c0-1.469-1.19-2.685-2.627-2.685H25z" fill="url(#gioco-c-wr)" stroke="#323232" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.6" /><g fill="#fff"><path d="M13.656 11.168v5.54c.48-1.867.299-4.088 1.554-5.54zM22.877 11.163c.055.896-.154 1.748-.269 2.616.48-1.866 1.823-2.616 1.823-2.616zM16.947 35.312c.875-1.143 3.603-10.333 3.233-13.244.7.39.658 10.057-3.233 13.244zM33.863 11.209c.005.598-.055 1.226-.187 2.02.48-1.867 1.295-2.04 1.295-2.04z" /></g></svg>
12
+ <svg v-else-if="type === 'Q'" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50"><defs><linearGradient gradientTransform="translate(545.92 492.79)" gradientUnits="userSpaceOnUse" x1="-540.02" x2="-501.82" xlink:href="#gioco-a-wq" id="gioco-b-wq" y1="-470.59" y2="-470.59" /><linearGradient id="gioco-a-wq"><stop offset="0" stop-color="#fff" /><stop offset="1" stop-color="#bba38a" /></linearGradient><linearGradient gradientTransform="translate(545.92 492.79)" gradientUnits="userSpaceOnUse" x1="-536.12" x2="-505.75" xlink:href="#gioco-a-wq" id="gioco-c-wq" y1="-451.55" y2="-451.55" /></defs><path d="M25 6.122c-2.635 0-4.771 2.098-4.771 4.685.002 1.855 1.118 3.534 2.846 4.283-.369 2.286-1.51 7.558-4.68 8.009-2.355.334-3.855-1.287-4.88-3.144a4.19 4.19 0 0 0 1.767-3.4c0-2.327-1.921-4.214-4.291-4.214S6.699 14.228 6.7 16.555c0 2.142 1.64 3.943 3.809 4.183l4.973 17.54h19.036l4.973-17.54c2.169-.24 3.807-2.041 3.809-4.183 0-2.327-1.922-4.214-4.292-4.214s-4.29 1.887-4.29 4.214a4.19 4.19 0 0 0 1.766 3.4c-1.025 1.857-2.525 3.478-4.88 3.144-3.17-.45-4.31-5.723-4.68-8.01 1.729-.748 2.845-2.427 2.847-4.282 0-2.587-2.136-4.685-4.77-4.685z" fill="url(#gioco-b-wq)" stroke="#323232" stroke-linejoin="round" stroke-width="1.6" /><path d="M39.002 12.342a4.348 4.348 0 0 0-1.567.296c4.741 1.678 3.877 6.805.591 7.316L30.414 38.28h4.2l4.87-17.541c2.17-.241 3.808-2.042 3.81-4.184 0-2.327-1.922-4.214-4.292-4.213z" opacity=".1" /><path d="M13.227 38.286c-1.437 0-2.627 1.216-2.627 2.685v.545l.013 2.684H39.36l.013-2.684v-.545c0-1.468-1.19-2.685-2.627-2.685h-11.76z" fill="url(#gioco-c-wq)" stroke="#323232" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.6" /><g fill="#fff"><path d="M9.515 13.489c-.794 1.17-1.726 2.667-1.554 4.779 0 0-1.604-3.01 1.554-4.779zM23.659 7.23c-.853.874-2.37 2.934-2.133 5.374-.207-.084-1.73-3.893 2.133-5.374zM12.062 23.328l5.244 14.111-1.17.023z" /></g></svg>
13
+ <svg v-else-if="type === 'K'" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50"><defs><linearGradient gradientTransform="matrix(.26458 0 0 .25357 227.43 -666.55)" gradientUnits="userSpaceOnUse" x1="-825.75" x2="-704.44" xlink:href="#gioco-a-wk" id="gioco-b-wk" y1="2712.8" y2="2712.8" /><linearGradient id="gioco-a-wk"><stop offset="0" stop-color="#fff" /><stop offset="1" stop-color="#bba38a" /></linearGradient><linearGradient gradientTransform="translate(225.05 -690.53)" gradientUnits="userSpaceOnUse" x1="-215.24" x2="-184.86" xlink:href="#gioco-a-wk" id="gioco-c-wk" y1="731.78" y2="731.78" /></defs><path d="M25.006 3.868c-1.803.1-3.228 1.234-3.228 2.618 0 .565.244 1.644.693 2.097h-5.766v5.106h6.306l-2.61 2.833 2.673 2.167c-5.584.362-12.02 1.643-13.154 3.997-1.268 2.638 6.215 15.6 6.215 15.6h17.73s7.484-12.963 6.215-15.6c-1.133-2.357-7.594-3.64-13.179-3.999l2.71-2.165-2.61-2.833h6.306V8.583H27.54c.449-.453.693-1.531.693-2.097 0-1.384-1.425-2.518-3.228-2.618z" fill="url(#gioco-b-wk)" stroke="#323232" stroke-linejoin="round" stroke-width="1.6" style="paint-order: fill markers;" /><path d="m31.289 38.283 2.573-.005s7.482-12.428 6.214-15.065c-4.136-3.824-13.18-4.525-13.18-4.525 11.05 2.822 12.618 5.028 4.393 19.595z" opacity=".1" /><path d="M13.242 38.286c-1.437 0-2.627 1.216-2.627 2.685v.545l.013 2.684h28.749l.012-2.684v-.545c0-1.468-1.19-2.685-2.627-2.685h-11.76z" fill="url(#gioco-c-wk)" stroke="#323232" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.6" /><g fill="#fff"><path d="M13.283 31.138s-3.074-6.555-2.666-8.092c.408-1.536 5.987-2.736 5.987-2.736-6.486 2.71-4.786 4.558-3.321 10.828zM17.521 12.884v-3.52l1.532-.011c-.891.007-1.532 2.147-1.532 3.531zM24.798 4.67s-2.614.92-1.53 3.522c-.178-.007-2.142-2.72 1.53-3.522z" /></g></svg>
14
+ </template>
15
+
16
+ <script setup lang="ts">
17
+ import type { Piece } from '@bedard/hexchess'
18
+
19
+ defineProps<{
20
+ type: Piece | null
21
+ }>()
22
+ </script>
package/src/lib/components/hexboard/pieces/Spatial.vue ADDED
@@ -0,0 +1,22 @@
1
+ <template>
2
+ <svg v-if="type === 'p'" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 933.333 933.333"><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="defs36222"><linearGradient id="fillGradient"><stop id="stop0" offset="0" style="stop-color:#7f899b;stop-opacity:1" /><stop id="stop1" offset="1" style="stop-color:#1c1c2f;stop-opacity:1" /></linearGradient><linearGradient xlink:href="#fillGradient" id="body-gradient" x1="316.104" x2="671.391" y1="819.382" y2="929.903" gradientTransform="matrix(.90256 0 0 .90256 49.53 -107.353)" gradientUnits="userSpaceOnUse" /><linearGradient xlink:href="#fillGradient" id="main-gradient" x1="289.323" x2="632.554" y1="510.829" y2="666.313" gradientTransform="matrix(.77344 0 0 .77344 108.282 -19.306)" gradientUnits="userSpaceOnUse" /></defs><path id="boundary" d="M460.195 305.537c-77.6 0-140.507 64.062-140.507 143.086.179 39.335 16.253 76.86 44.44 103.754-7.673-88.861 209.21-79.895 188.567 3.633 30.426-27.098 47.918-66.225 48.008-107.387 0-79.024-62.907-143.086-140.508-143.086zm47.383 247.432-101.539.66c-25.392 205.944-140.792 212.006-127.57 303.533l355.502.223c11.141-100.852-107.312-99.908-126.393-304.416z" class="base stroke-color" style="fill:none;stroke-width:35" /><path id="main" d="M460.195 305.538c-77.6 0-140.507 64.061-140.507 143.085.179 39.335 16.252 76.86 44.44 103.754-7.674-88.861 209.21-79.895 188.566 3.633 30.426-27.097 47.919-66.225 48.01-107.387 0-79.024-62.909-143.086-140.51-143.085z" class="base stroke-color stroke-medium" style="fill:url(#main-gradient)" /><path id="body" d="M278.47 857.163c-13.222-91.527 102.178-97.591 127.57-303.535l101.537-.658c19.081 204.508 137.535 203.564 126.394 304.415z" class="base stroke-color stroke-medium" style="fill:url(#body-gradient)" /></svg>
3
+ <svg v-else-if="type === 'n'" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 933.333 933.333"><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-color{stroke:#000}</style><defs id="defs36222"><linearGradient id="fillGradient"><stop id="stop0" offset="0" style="stop-color:#7f899b;stop-opacity:1" /><stop id="stop1" offset="1" style="stop-color:#1c1c2f;stop-opacity:1" /></linearGradient><linearGradient xlink:href="#fillGradient" id="main-gradient" x1="163.677" x2="741.164" y1="244.156" y2="814.156" gradientTransform="matrix(1.10882 0 0 1.10882 -23.077 -23.377)" gradientUnits="userSpaceOnUse" /></defs><path id="boundary" d="M391.91 61.45c-1.872 129.02 4.719 80.296-76.698 20.736 12.565 84.162 4.036 86.935-17.714 122.95-11.903 19.71-22.394 81.77-29.842 95.449-45.132 82.89-148.785 191.103-148.607 226.381.227 44.656 53.337 84.63 101.92 37.407-45.452 66.536 91.773-.302 149.28-41.341 76.122 46.86 182.47-4.418 184.447-79.712 34.64 170.31-288.835 199.89-306.114 420.796 241.083 55.034 375.362-124.27 522.306 14.384 75.118-217.801 82.05-581.866-267.162-718.365-47.462-18.553-67.401-66.275-111.817-98.685Z" class="base stroke-color" style="fill:none;stroke-width:35" /><path id="main" d="M391.91 61.45c-1.872 129.02 4.719 80.296-76.698 20.736 12.565 84.162 4.036 86.935-17.714 122.95-11.903 19.71-22.394 81.77-29.842 95.449-45.132 82.89-148.785 191.103-148.607 226.381.227 44.656 53.337 84.63 101.92 37.407-45.452 66.536 91.773-.302 149.28-41.341 76.122 46.86 182.47-4.418 184.447-79.712 34.64 170.31-288.835 199.89-306.114 420.796 241.083 55.034 375.362-124.27 522.306 14.384 75.118-217.801 82.05-581.866-267.162-718.365-47.462-18.553-67.401-66.275-111.817-98.685Zm-1.458 240.252c-7.892 11.198-24.49 29.475-39.052 26.8-13.465-2.475-18.883-7.04-19.504-22.984-.523-13.426 47.048-12.993 58.556-3.816z" class="base stroke-color" style="fill:url(#main-gradient);stroke-width:20" /></svg>
4
+ <svg v-else-if="type === 'b'" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 933.333 933.333"><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="defs36222"><linearGradient id="fillGradient"><stop id="stop0" offset="0" style="stop-color:#7f899b;stop-opacity:1" /><stop id="stop1" offset="1" style="stop-color:#1c1c2f;stop-opacity:1" /></linearGradient><linearGradient xlink:href="#fillGradient" id="hat-back-gradient" x1="130.983" x2="720.017" y1="444.835" y2="623.168" gradientTransform="matrix(1.14026 0 0 1.09269 -36.623 -49.028)" gradientUnits="userSpaceOnUse" /><linearGradient xlink:href="#fillGradient" id="right-shoulder-gradient" x1="130.983" x2="720.017" y1="444.835" y2="623.168" gradientTransform="scale(1.08391) rotate(-1.265 -177.406 837.59)" gradientUnits="userSpaceOnUse" /><linearGradient xlink:href="#fillGradient" id="left-shoulder-gradient" x1="130.983" x2="720.017" y1="444.835" y2="623.168" gradientTransform="scale(1.08391) rotate(3.857 339.41 930.117)" gradientUnits="userSpaceOnUse" /><linearGradient xlink:href="#fillGradient" id="hat-front-gradient" x1="130.983" x2="720.017" y1="444.835" y2="623.168" gradientTransform="matrix(1.14026 0 0 1.09269 -36.623 -49.028)" gradientUnits="userSpaceOnUse" /></defs><path id="boundary" d="M448.98 48c-1.336.083-2.83.288-4.49.613-41.9 8.217-41.13 30.064-19.472 64.426C453.686 71.737 468.722 46.767 448.98 48zm-23.962 65.04c-31.48 45.351-79.414 110.415-116.174 182.55-71.074 139.47-87.286 275.445 22.355 408.049 17.093 10.535 18.975 46.403 5.705 77.535l74.502-.512C293.255 822.167 76.736 842.687 85.38 881.047c0 0 234.234 13.973 314.129-34.361 28.104-17.003 46.841-45.08 57.846-66.34l39.511-.272c6.969 19.36 17.384 39.603 32.565 51.063 83.454 62.996 322.11 48.457 322.11 48.457.759-52.555-184.063-52.925-296.942-99.916l41.822-.287c-13.724-30.812-11.436-67.76 12.318-87.123 13.904-25.51 23.452-51.18 29.48-76.776 35.416-88.175 52.293-202.543 7.083-302.947-35.766-79.43-81.727-137.527-102.858-177.219-14.312 18.904-31.601 41.544-49.511 66.725-28.129-35.541-52.968-65.296-67.914-89.012zm117.425 22.286C575.5 91.664 592.86 67.063 566.311 72.27c-41.908 8.218-42.1 28.81-23.868 63.056z" class="base stroke-color" style="fill:none;stroke-width:35" /><path id="left-shoulder" d="M469.75 751.538c-75.953 62.86-394.82 83.129-384.37 129.51 0 0 234.232 13.973 314.127-34.362 49.838-30.15 70.243-95.148 70.243-95.148z" class="base stroke-color stroke-medium" style="fill:url(#left-shoulder-gradient)" /><path id="right-shoulder" d="M484.462 730.28c71.103 99.976 368.04 82.74 367.078 149.313 0 0-238.657 14.54-322.111-48.457-35.314-26.657-44.967-100.857-44.967-100.857z" class="base stroke-color stroke-medium" style="fill:url(#right-shoulder-gradient)" /><path id="hat-back" d="M566.31 72.27c53.134-10.42-69.586 98.53-142.088 240.803C635.197 333.98 576.496 606.13 610.414 673.437c51.72-90.89 90.848-236.611 34.888-360.892C578.678 164.583 475.829 90.015 566.31 72.27Z" class="base stroke-color stroke-medium" style="fill:url(#hat-back-gradient)" /><path id="hat-front" d="M444.49 48.612c53.134-10.42-63.143 104.704-135.645 246.978-71.075 139.47-87.287 275.445 22.354 408.049 17.093 10.535 18.975 46.403 5.705 77.535l259.516-1.783c-13.724-30.811-11.436-67.76 12.318-87.123 79.669-146.173 19.124-297.647-56.407-409.937C461.223 146.883 354.008 66.357 444.49 48.612Zm-14.743 321.674c-2.298 92.247 36.384 158.976 35.102 264.869-36.755 21.147-28.274-95.53-52.625-122.605-21.334-23.72-85.797-18.798-68.856-51.905 76.571-.497 125.42 28.967 201.45 17.075 6.755-20.32-49.367-22.89-65.196-36.026-21.285-17.665-25.342-85.432-49.875-71.408z" class="base stroke-color stroke-medium" style="fill:url(#hat-front-gradient)" /></svg>
5
+ <svg v-else-if="type === 'r'" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 933.333 933.333"><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="defs36222"><linearGradient id="fillGradient"><stop id="stop0" offset="0" style="stop-color:#7f899b;stop-opacity:1" /><stop id="stop1" offset="1" style="stop-color:#1c1c2f;stop-opacity:1" /></linearGradient><linearGradient xlink:href="#fillGradient" id="bottom-gradient" x1="88.716" x2="772.142" y1="286.248" y2="750.581" gradientTransform="matrix(1.0782 0 0 1.0782 -3.986 -14.41)" gradientUnits="userSpaceOnUse" /><linearGradient xlink:href="#fillGradient" id="center-gradient" x1="88.716" x2="772.142" y1="286.248" y2="750.581" gradientTransform="matrix(1.0782 0 0 1.0782 -37.986 -89.102)" gradientUnits="userSpaceOnUse" /><linearGradient xlink:href="#fillGradient" id="top-gradient" x1="88.716" x2="772.142" y1="286.248" y2="750.581" gradientTransform="matrix(1.0782 0 0 1.0782 -15.986 -71.102)" gradientUnits="userSpaceOnUse" /></defs><path id="boundary" d="m654.315 303.569 65.054 1.522c43.135-59.53 53.993-116.965 67.252-174.556l-114.596.086c-6.523 15.694-10.593 43.583-20.996 46.604-21.779 6.324-38.799 12.144-52.607 17.568-12.091-4.516-26.495-9.335-43.834-14.498-13.687-4.076-21.49-35.24-23.725-49.57l-116.056.084c-5.556 16.485-8.341 45.4-20.475 49.175-21.698 6.753-38.726 12.875-52.594 18.516-14.14-5.022-31.546-10.375-53.797-16.137-22.016-5.7-14.889-38.886-22.091-51.443l-107.944.078c5.63 60.878 10.46 115.728 55.924 176.38l56.53-1.84m5.462 48.09 16 381.61m345.022 0 16-381.61M279.35 787.163l-54.555-2.47c-28.96 31.656-25.96 54.006-36.674 80.349h554.18c-6.147-26.851-4.744-54.296-32.707-79.431l-55.586 1.552" class="base stroke-color" style="fill:none;stroke-width:35" /><path id="center" d="m275.822 345.629 16 397.61h345.022l16-397.61z" class="base stroke-color stroke-medium" style="fill:url(#center-gradient)" /><path id="top" d="M157.905 130.999c5.766 62.36 10.697 118.39 59.316 180.815l499.102-2.587c45.68-61.009 56.731-119.768 70.297-178.692l-114.594.086c-6.524 15.694-10.595 43.584-20.997 46.604-292.698 84.994 192.123 88.995-96.44 3.07-13.687-4.076-21.492-35.24-23.726-49.571l-116.057.085c-5.556 16.486-8.341 45.4-20.475 49.176-294.979 91.796 191.18 79.433-106.39 2.379-22.016-5.701-14.888-38.886-22.091-51.444z" class="base stroke-color stroke-medium" style="fill:url(#top-gradient)" /><path id="bottom" d="M228.12 781.161c-32.525 33.548-28.891 56.567-40 83.88H742.3c-6.51-28.445-4.55-57.555-38-83.88z" class="base stroke-color stroke-medium" style="fill:url(#bottom-gradient)" /></svg>
6
+ <svg v-else-if="type === 'q'" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 933.333 933.333"><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="defs36222"><linearGradient id="fillGradient"><stop id="stop0" offset="0" style="stop-color:#7f899b;stop-opacity:1" /><stop id="stop1" offset="1" style="stop-color:#1c1c2f;stop-opacity:1" /></linearGradient><linearGradient xlink:href="#fillGradient" id="bottom-gradient" x1="199" x2="661.667" y1="789.833" y2="789.833" gradientTransform="matrix(1.07873 0 0 1.07873 -.308 -7.803)" gradientUnits="userSpaceOnUse" /><linearGradient xlink:href="#fillGradient" id="front-hair-gradient" x1="166.781" x2="718.885" y1="239.891" y2="746.557" gradientTransform="matrix(1.07873 0 0 1.07873 -2.308 -9.803)" gradientUnits="userSpaceOnUse" /><linearGradient xlink:href="#fillGradient" id="back-hair-gradient" x1="285.639" x2="466.667" y1="287.12" y2="587.12" gradientTransform="matrix(1.07873 0 0 1.07873 -2.308 -9.803)" gradientUnits="userSpaceOnUse" /></defs><path id="boundary" d="M690.605 766.18c88.769-90.71 140.98-241.722 162.04-453.666-110.451 239.661-180.878 345.902-228.256 364.75 45.241-116.612 78.78-291.617 87.425-525.358-69.294 207.629-120.577 351.382-164.138 431.832-26.514-109.699-38.22-296.9-66.014-478.004-34.791 188.524-47.636 382.449-77.369 488.623-41.408-77.705-87.892-224.036-150.941-439.25-.989 223.42 22.967 393.006 60.406 508.846-48.155-34.212-117.283-142.337-221.014-357.238 11.588 214.478 62.838 367.984 150.213 459.816m8.033 46.627-22-2v68.117h469.834v-68.117l-16.786 2" class="base stroke-color" style="fill:none;stroke-width:35" /><path id="back-hair" d="M711.814 151.906c-225.866 676.77-260.764 678.027-458.462 3.202-1.216 275.009 35.357 468.451 88.355 580.494h256.806c58.083-112.565 103.074-307.205 113.301-583.696Z" class="base stroke-color stroke-medium" style="fill:url(#back-hair-gradient)" /><path id="front-hair" d="M481.662 105.734c-81.968 444.154-41.752 920.212-388.918 200.981 11.881 219.895 65.45 375.697 156.9 466.654h433.718c93.18-89.82 147.656-243.21 169.283-460.855-331.536 719.381-302.754 237.784-370.983-206.78Z" class="base stroke-color stroke-medium" style="fill:url(#front-hair-gradient)" /><path id="bottom" d="M228.99 809.158h469.835v70.118H228.99z" class="base stroke-color stroke-medium" style="fill:url(#bottom-gradient)" /></svg>
7
+ <svg v-else-if="type === 'k'" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 933.333 933.333"><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="defs36222"><linearGradient id="fillGradient"><stop id="stop0" offset="0" style="stop-color:#7f899b;stop-opacity:1" /><stop id="stop1" offset="1" style="stop-color:#1c1c2f;stop-opacity:1" /></linearGradient><linearGradient xlink:href="#fillGradient" id="base-gradient" x1="163.113" x2="702.697" y1="776.638" y2="778.811" gradientTransform="translate(1.366 -39.6) scale(1.10917)" gradientUnits="userSpaceOnUse" /><linearGradient xlink:href="#fillGradient" id="main-gradient" x1="150.079" x2="694.007" y1="255.254" y2="740.063" gradientTransform="translate(-23.256 -49.86) scale(1.10917)" gradientUnits="userSpaceOnUse" /><linearGradient xlink:href="#fillGradient" id="cross-gradient" x1="375.068" x2="535.576" y1="176.416" y2="308.934" gradientTransform="translate(-23.256 -49.86) scale(1.10917)" gradientUnits="userSpaceOnUse" /></defs><path id="boundary" d="M493.348 343.592v-129.84H598.06v-75.459H493.348V72.16h-69.602v66.133h-87.174v75.459h87.174v129.84m-2.358 53.141c31.212 112.7 9 276.095-66 241.96-137.19-62.44-188.192-292.18 30.844-176.93-59.33-121.286-134.17-163.98-195.037-161.568-68.981 2.735-120.017 63.407-110.19 133.268 19.373 137.709 171.584 262.12 179.55 322.2m409.326-.058c4.987-68.476 177.617-200.398 183.316-326.025 5.65-126.94-213.43-225.252-309.818 32.078 221.543-118.496 150.548 107.25 40.601 177.035-69.352 44.02-106.305-117.674-72.556-244.036m-250.62 410.864-39.452-2v71.946h483.16V803.52l-32.12 2" class="base stroke-color" style="fill:none;stroke-width:35" /><path id="cross" d="M423.747 72.16v66.134h-87.174v75.458h87.174v135.84h69.6v-135.84H598.06v-75.458H493.348V72.159Z" class="base stroke-color stroke-medium" style="fill:url(#cross-gradient)" /><path id="main" d="M543.378 461.659c221.544-118.496 150.55 107.25 40.603 177.035-70.836 44.961-107.872-124.686-70.293-252.094l-94.939 1.144c35.009 112.745 13.658 286.004-63.361 250.95-137.192-62.44-188.193-292.18 30.844-176.93C259.659 203.019 62.507 301.959 81.007 433.462c20.095 142.853 183.137 271.395 179.824 328.662h409.111c-6.554-66.35 177.37-202.804 183.256-332.544 5.65-126.94-213.432-225.252-309.82 32.079Z" class="base stroke-color stroke-medium" style="fill:url(#main-gradient)" /><path id="base" d="M221.352 801.521h483.16v73.945h-483.16z" class="base stroke-color stroke-medium" style="fill:url(#base-gradient)" /></svg>
8
+ <svg v-else-if="type === 'P'" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 933.333 933.333"><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="defs36222"><linearGradient id="fillGradient"><stop id="stop0" offset="0" style="stop-color:white;stop-opacity:1" /><stop id="stop1" offset="1" style="stop-color:#bfd3d7;stop-opacity:1" /></linearGradient><linearGradient xlink:href="#fillGradient" id="body-gradient" x1="316.104" x2="671.391" y1="819.382" y2="929.903" gradientTransform="matrix(.90256 0 0 .90256 49.53 -107.353)" gradientUnits="userSpaceOnUse" /><linearGradient xlink:href="#fillGradient" id="main-gradient" x1="289.323" x2="632.554" y1="510.829" y2="666.313" gradientTransform="matrix(.77344 0 0 .77344 108.282 -19.306)" gradientUnits="userSpaceOnUse" /></defs><path id="boundary" d="M460.195 305.537c-77.6 0-140.507 64.062-140.507 143.086.179 39.335 16.253 76.86 44.44 103.754-7.673-88.861 209.21-79.895 188.567 3.633 30.426-27.098 47.918-66.225 48.008-107.387 0-79.024-62.907-143.086-140.508-143.086zm47.383 247.432-101.539.66c-25.392 205.944-140.792 212.006-127.57 303.533l355.502.223c11.141-100.852-107.312-99.908-126.393-304.416z" class="base stroke-color" style="fill:none;stroke-width:35" /><path id="main" d="M460.195 305.538c-77.6 0-140.507 64.061-140.507 143.085.179 39.335 16.252 76.86 44.44 103.754-7.674-88.861 209.21-79.895 188.566 3.633 30.426-27.097 47.919-66.225 48.01-107.387 0-79.024-62.909-143.086-140.51-143.085z" class="base stroke-color stroke-medium" style="fill:url(#main-gradient)" /><path id="body" d="M278.47 857.163c-13.222-91.527 102.178-97.591 127.57-303.535l101.537-.658c19.081 204.508 137.535 203.564 126.394 304.415z" class="base stroke-color stroke-medium" style="fill:url(#body-gradient)" /></svg>
9
+ <svg v-else-if="type === 'N'" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 933.333 933.333"><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-color{stroke:#000}</style><defs id="defs36222"><linearGradient id="fillGradient"><stop id="stop0" offset="0" style="stop-color:white;stop-opacity:1" /><stop id="stop1" offset="1" style="stop-color:#bfd3d7;stop-opacity:1" /></linearGradient><linearGradient xlink:href="#fillGradient" id="main-gradient" x1="163.677" x2="741.164" y1="244.156" y2="814.156" gradientTransform="matrix(1.10882 0 0 1.10882 -23.077 -23.377)" gradientUnits="userSpaceOnUse" /></defs><path id="boundary" d="M391.91 61.45c-1.872 129.02 4.719 80.296-76.698 20.736 12.565 84.162 4.036 86.935-17.714 122.95-11.903 19.71-22.394 81.77-29.842 95.449-45.132 82.89-148.785 191.103-148.607 226.381.227 44.656 53.337 84.63 101.92 37.407-45.452 66.536 91.773-.302 149.28-41.341 76.122 46.86 182.47-4.418 184.447-79.712 34.64 170.31-288.835 199.89-306.114 420.796 241.083 55.034 375.362-124.27 522.306 14.384 75.118-217.801 82.05-581.866-267.162-718.365-47.462-18.553-67.401-66.275-111.817-98.685Z" class="base stroke-color" style="fill:none;stroke-width:35" /><path id="main" d="M391.91 61.45c-1.872 129.02 4.719 80.296-76.698 20.736 12.565 84.162 4.036 86.935-17.714 122.95-11.903 19.71-22.394 81.77-29.842 95.449-45.132 82.89-148.785 191.103-148.607 226.381.227 44.656 53.337 84.63 101.92 37.407-45.452 66.536 91.773-.302 149.28-41.341 76.122 46.86 182.47-4.418 184.447-79.712 34.64 170.31-288.835 199.89-306.114 420.796 241.083 55.034 375.362-124.27 522.306 14.384 75.118-217.801 82.05-581.866-267.162-718.365-47.462-18.553-67.401-66.275-111.817-98.685Zm-1.458 240.252c-7.892 11.198-24.49 29.475-39.052 26.8-13.465-2.475-18.883-7.04-19.504-22.984-.523-13.426 47.048-12.993 58.556-3.816z" class="base stroke-color" style="fill:url(#main-gradient);stroke-width:20" /></svg>
10
+ <svg v-else-if="type === 'B'" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 933.333 933.333"><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="defs36222"><linearGradient id="fillGradient"><stop id="stop0" offset="0" style="stop-color:white;stop-opacity:1" /><stop id="stop1" offset="1" style="stop-color:#bfd3d7;stop-opacity:1" /></linearGradient><linearGradient xlink:href="#fillGradient" id="hat-back-gradient" x1="130.983" x2="720.017" y1="444.835" y2="623.168" gradientTransform="matrix(1.14026 0 0 1.09269 -36.623 -49.028)" gradientUnits="userSpaceOnUse" /><linearGradient xlink:href="#fillGradient" id="right-shoulder-gradient" x1="130.983" x2="720.017" y1="444.835" y2="623.168" gradientTransform="scale(1.08391) rotate(-1.265 -177.406 837.59)" gradientUnits="userSpaceOnUse" /><linearGradient xlink:href="#fillGradient" id="left-shoulder-gradient" x1="130.983" x2="720.017" y1="444.835" y2="623.168" gradientTransform="scale(1.08391) rotate(3.857 339.41 930.117)" gradientUnits="userSpaceOnUse" /><linearGradient xlink:href="#fillGradient" id="hat-front-gradient" x1="130.983" x2="720.017" y1="444.835" y2="623.168" gradientTransform="matrix(1.14026 0 0 1.09269 -36.623 -49.028)" gradientUnits="userSpaceOnUse" /></defs><path id="boundary" d="M448.98 48c-1.336.083-2.83.288-4.49.613-41.9 8.217-41.13 30.064-19.472 64.426C453.686 71.737 468.722 46.767 448.98 48zm-23.962 65.04c-31.48 45.351-79.414 110.415-116.174 182.55-71.074 139.47-87.286 275.445 22.355 408.049 17.093 10.535 18.975 46.403 5.705 77.535l74.502-.512C293.255 822.167 76.736 842.687 85.38 881.047c0 0 234.234 13.973 314.129-34.361 28.104-17.003 46.841-45.08 57.846-66.34l39.511-.272c6.969 19.36 17.384 39.603 32.565 51.063 83.454 62.996 322.11 48.457 322.11 48.457.759-52.555-184.063-52.925-296.942-99.916l41.822-.287c-13.724-30.812-11.436-67.76 12.318-87.123 13.904-25.51 23.452-51.18 29.48-76.776 35.416-88.175 52.293-202.543 7.083-302.947-35.766-79.43-81.727-137.527-102.858-177.219-14.312 18.904-31.601 41.544-49.511 66.725-28.129-35.541-52.968-65.296-67.914-89.012zm117.425 22.286C575.5 91.664 592.86 67.063 566.311 72.27c-41.908 8.218-42.1 28.81-23.868 63.056z" class="base stroke-color" style="fill:none;stroke-width:35" /><path id="left-shoulder" d="M469.75 751.538c-75.953 62.86-394.82 83.129-384.37 129.51 0 0 234.232 13.973 314.127-34.362 49.838-30.15 70.243-95.148 70.243-95.148z" class="base stroke-color stroke-medium" style="fill:url(#left-shoulder-gradient)" /><path id="right-shoulder" d="M484.462 730.28c71.103 99.976 368.04 82.74 367.078 149.313 0 0-238.657 14.54-322.111-48.457-35.314-26.657-44.967-100.857-44.967-100.857z" class="base stroke-color stroke-medium" style="fill:url(#right-shoulder-gradient)" /><path id="hat-back" d="M566.31 72.27c53.134-10.42-69.586 98.53-142.088 240.803C635.197 333.98 576.496 606.13 610.414 673.437c51.72-90.89 90.848-236.611 34.888-360.892C578.678 164.583 475.829 90.015 566.31 72.27Z" class="base stroke-color stroke-medium" style="fill:url(#hat-back-gradient)" /><path id="hat-front" d="M444.49 48.612c53.134-10.42-63.143 104.704-135.645 246.978-71.075 139.47-87.287 275.445 22.354 408.049 17.093 10.535 18.975 46.403 5.705 77.535l259.516-1.783c-13.724-30.811-11.436-67.76 12.318-87.123 79.669-146.173 19.124-297.647-56.407-409.937C461.223 146.883 354.008 66.357 444.49 48.612Zm-14.743 321.674c-2.298 92.247 36.384 158.976 35.102 264.869-36.755 21.147-28.274-95.53-52.625-122.605-21.334-23.72-85.797-18.798-68.856-51.905 76.571-.497 125.42 28.967 201.45 17.075 6.755-20.32-49.367-22.89-65.196-36.026-21.285-17.665-25.342-85.432-49.875-71.408z" class="base stroke-color stroke-medium" style="fill:url(#hat-front-gradient)" /></svg>
11
+ <svg v-else-if="type === 'R'" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 933.333 933.333"><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="defs36222"><linearGradient id="fillGradient"><stop id="stop0" offset="0" style="stop-color:white;stop-opacity:1" /><stop id="stop1" offset="1" style="stop-color:#bfd3d7;stop-opacity:1" /></linearGradient><linearGradient xlink:href="#fillGradient" id="bottom-gradient" x1="88.716" x2="772.142" y1="286.248" y2="750.581" gradientTransform="matrix(1.0782 0 0 1.0782 -3.986 -14.41)" gradientUnits="userSpaceOnUse" /><linearGradient xlink:href="#fillGradient" id="center-gradient" x1="88.716" x2="772.142" y1="286.248" y2="750.581" gradientTransform="matrix(1.0782 0 0 1.0782 -37.986 -89.102)" gradientUnits="userSpaceOnUse" /><linearGradient xlink:href="#fillGradient" id="top-gradient" x1="88.716" x2="772.142" y1="286.248" y2="750.581" gradientTransform="matrix(1.0782 0 0 1.0782 -15.986 -71.102)" gradientUnits="userSpaceOnUse" /></defs><path id="boundary" d="m654.315 303.569 65.054 1.522c43.135-59.53 53.993-116.965 67.252-174.556l-114.596.086c-6.523 15.694-10.593 43.583-20.996 46.604-21.779 6.324-38.799 12.144-52.607 17.568-12.091-4.516-26.495-9.335-43.834-14.498-13.687-4.076-21.49-35.24-23.725-49.57l-116.056.084c-5.556 16.485-8.341 45.4-20.475 49.175-21.698 6.753-38.726 12.875-52.594 18.516-14.14-5.022-31.546-10.375-53.797-16.137-22.016-5.7-14.889-38.886-22.091-51.443l-107.944.078c5.63 60.878 10.46 115.728 55.924 176.38l56.53-1.84m5.462 48.09 16 381.61m345.022 0 16-381.61M279.35 787.163l-54.555-2.47c-28.96 31.656-25.96 54.006-36.674 80.349h554.18c-6.147-26.851-4.744-54.296-32.707-79.431l-55.586 1.552" class="base stroke-color" style="fill:none;stroke-width:35" /><path id="center" d="m275.822 345.629 16 397.61h345.022l16-397.61z" class="base stroke-color stroke-medium" style="fill:url(#center-gradient)" /><path id="top" d="M157.905 130.999c5.766 62.36 10.697 118.39 59.316 180.815l499.102-2.587c45.68-61.009 56.731-119.768 70.297-178.692l-114.594.086c-6.524 15.694-10.595 43.584-20.997 46.604-292.698 84.994 192.123 88.995-96.44 3.07-13.687-4.076-21.492-35.24-23.726-49.571l-116.057.085c-5.556 16.486-8.341 45.4-20.475 49.176-294.979 91.796 191.18 79.433-106.39 2.379-22.016-5.701-14.888-38.886-22.091-51.444z" class="base stroke-color stroke-medium" style="fill:url(#top-gradient)" /><path id="bottom" d="M228.12 781.161c-32.525 33.548-28.891 56.567-40 83.88H742.3c-6.51-28.445-4.55-57.555-38-83.88z" class="base stroke-color stroke-medium" style="fill:url(#bottom-gradient)" /></svg>
12
+ <svg v-else-if="type === 'Q'" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 933.333 933.333"><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="defs36222"><linearGradient id="fillGradient"><stop id="stop0" offset="0" style="stop-color:white;stop-opacity:1" /><stop id="stop1" offset="1" style="stop-color:#bfd3d7;stop-opacity:1" /></linearGradient><linearGradient xlink:href="#fillGradient" id="bottom-gradient" x1="199" x2="661.667" y1="789.833" y2="789.833" gradientTransform="matrix(1.07873 0 0 1.07873 -.308 -7.803)" gradientUnits="userSpaceOnUse" /><linearGradient xlink:href="#fillGradient" id="front-hair-gradient" x1="166.781" x2="718.885" y1="239.891" y2="746.557" gradientTransform="matrix(1.07873 0 0 1.07873 -2.308 -9.803)" gradientUnits="userSpaceOnUse" /><linearGradient xlink:href="#fillGradient" id="back-hair-gradient" x1="285.639" x2="466.667" y1="287.12" y2="587.12" gradientTransform="matrix(1.07873 0 0 1.07873 -2.308 -9.803)" gradientUnits="userSpaceOnUse" /></defs><path id="boundary" d="M690.605 766.18c88.769-90.71 140.98-241.722 162.04-453.666-110.451 239.661-180.878 345.902-228.256 364.75 45.241-116.612 78.78-291.617 87.425-525.358-69.294 207.629-120.577 351.382-164.138 431.832-26.514-109.699-38.22-296.9-66.014-478.004-34.791 188.524-47.636 382.449-77.369 488.623-41.408-77.705-87.892-224.036-150.941-439.25-.989 223.42 22.967 393.006 60.406 508.846-48.155-34.212-117.283-142.337-221.014-357.238 11.588 214.478 62.838 367.984 150.213 459.816m8.033 46.627-22-2v68.117h469.834v-68.117l-16.786 2" class="base stroke-color" style="fill:none;stroke-width:35" /><path id="back-hair" d="M711.814 151.906c-225.866 676.77-260.764 678.027-458.462 3.202-1.216 275.009 35.357 468.451 88.355 580.494h256.806c58.083-112.565 103.074-307.205 113.301-583.696Z" class="base stroke-color stroke-medium" style="fill:url(#back-hair-gradient)" /><path id="front-hair" d="M481.662 105.734c-81.968 444.154-41.752 920.212-388.918 200.981 11.881 219.895 65.45 375.697 156.9 466.654h433.718c93.18-89.82 147.656-243.21 169.283-460.855-331.536 719.381-302.754 237.784-370.983-206.78Z" class="base stroke-color stroke-medium" style="fill:url(#front-hair-gradient)" /><path id="bottom" d="M228.99 809.158h469.835v70.118H228.99z" class="base stroke-color stroke-medium" style="fill:url(#bottom-gradient)" /></svg>
13
+ <svg v-else-if="type === 'K'" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 933.333 933.333"><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="defs36222"><linearGradient id="fillGradient"><stop id="stop0" offset="0" style="stop-color:white;stop-opacity:1" /><stop id="stop1" offset="1" style="stop-color:#bfd3d7;stop-opacity:1" /></linearGradient><linearGradient xlink:href="#fillGradient" id="base-gradient" x1="163.113" x2="702.697" y1="776.638" y2="778.811" gradientTransform="translate(1.366 -39.6) scale(1.10917)" gradientUnits="userSpaceOnUse" /><linearGradient xlink:href="#fillGradient" id="main-gradient" x1="150.079" x2="694.007" y1="255.254" y2="740.063" gradientTransform="translate(-23.256 -49.86) scale(1.10917)" gradientUnits="userSpaceOnUse" /><linearGradient xlink:href="#fillGradient" id="cross-gradient" x1="375.068" x2="535.576" y1="176.416" y2="308.934" gradientTransform="translate(-23.256 -49.86) scale(1.10917)" gradientUnits="userSpaceOnUse" /></defs><path id="boundary" d="M493.348 343.592v-129.84H598.06v-75.459H493.348V72.16h-69.602v66.133h-87.174v75.459h87.174v129.84m-2.358 53.141c31.212 112.7 9 276.095-66 241.96-137.19-62.44-188.192-292.18 30.844-176.93-59.33-121.286-134.17-163.98-195.037-161.568-68.981 2.735-120.017 63.407-110.19 133.268 19.373 137.709 171.584 262.12 179.55 322.2m409.326-.058c4.987-68.476 177.617-200.398 183.316-326.025 5.65-126.94-213.43-225.252-309.818 32.078 221.543-118.496 150.548 107.25 40.601 177.035-69.352 44.02-106.305-117.674-72.556-244.036m-250.62 410.864-39.452-2v71.946h483.16V803.52l-32.12 2" class="base stroke-color" style="fill:none;stroke-width:35" /><path id="cross" d="M423.747 72.16v66.134h-87.174v75.458h87.174v135.84h69.6v-135.84H598.06v-75.458H493.348V72.159Z" class="base stroke-color stroke-medium" style="fill:url(#cross-gradient)" /><path id="main" d="M543.378 461.659c221.544-118.496 150.55 107.25 40.603 177.035-70.836 44.961-107.872-124.686-70.293-252.094l-94.939 1.144c35.009 112.745 13.658 286.004-63.361 250.95-137.192-62.44-188.193-292.18 30.844-176.93C259.659 203.019 62.507 301.959 81.007 433.462c20.095 142.853 183.137 271.395 179.824 328.662h409.111c-6.554-66.35 177.37-202.804 183.256-332.544 5.65-126.94-213.432-225.252-309.82 32.079Z" class="base stroke-color stroke-medium" style="fill:url(#main-gradient)" /><path id="base" d="M221.352 801.521h483.16v73.945h-483.16z" class="base stroke-color stroke-medium" style="fill:url(#base-gradient)" /></svg>
14
+ </template>
15
+
16
+ <script setup lang="ts">
17
+ import type { Piece } from '@bedard/hexchess'
18
+
19
+ defineProps<{
20
+ type: Piece | null
21
+ }>()
22
+ </script>
package/src/lib/components/hexboard/pieces/index.ts ADDED
@@ -0,0 +1,4 @@
1
+ export { default as Celtic } from './Celtic.vue'
2
+ export { default as Fantasy } from './Fantasy.vue'
3
+ export { default as Gioco } from './Gioco.vue'
4
+ export { default as Spatial } from './Spatial.vue'
package/src/lib/components/hexboard/types.ts ADDED
@@ -0,0 +1,28 @@
1
+ /** hexboard options */
2
+ export interface HexboardOptions {
3
+ /** position colors */
4
+ colors: [string, string, string]
5
+ /** haptic feedback vibrations */
6
+ haptics: boolean
7
+ /** color of highlighted position */
8
+ highlightColor: string
9
+ /** color of active label relative to mouseover */
10
+ labelActiveColor: string
11
+ /** label color */
12
+ labelColor: string
13
+ /** fill color of inactive label relative to mouseover */
14
+ labelInactiveColor: string
15
+ /** show labels */
16
+ labels: boolean
17
+ /** color of target circles */
18
+ targetColor: string
19
+ /** color of selected position */
20
+ selectedColor: string
21
+ }
22
+
23
+ /** uniform tuple of length `T`, `number` by default */
24
+ export type Vec<
25
+ T extends number,
26
+ U = number,
27
+ V extends unknown[] = [],
28
+ > = V['length'] extends T ? V : Vec<T, U, [U, ...V]>
package/src/lib/index.ts ADDED
@@ -0,0 +1 @@
1
+ export { default as Hexboard } from './components/hexboard/Hexboard.vue'
package/src/sandbox/App.vue ADDED
@@ -0,0 +1,28 @@
1
+ <template>
2
+ <div class="min-h-screen bg-gray-50 dark:bg-gray-900">
3
+ <HomeToolbar />
4
+
5
+ <Hexboard
6
+ active
7
+ autoselect
8
+ class="mx-auto max-w-screen-sm"
9
+ ignore-turn
10
+ :hexchess
11
+ :playing="true"
12
+ @move="onMove"
13
+ />
14
+ </div>
15
+ </template>
16
+
17
+ <script setup lang="ts">
18
+ import { Hexchess, type San } from '@bedard/hexchess'
19
+ import { Hexboard } from 'lib/index'
20
+ import HomeToolbar from 'sandbox/views/HomeToolbar.vue'
21
+ import { ref } from 'vue'
22
+
23
+ const hexchess = ref(Hexchess.init())
24
+
25
+ function onMove(san: San) {
26
+ hexchess.value.applyMoveUnsafe(san)
27
+ }
28
+ </script>
package/src/sandbox/components/Button.vue ADDED
@@ -0,0 +1,8 @@
1
+ <template>
2
+ <button
3
+ class="hover:bg-primary-500 bg-primary-600 focus-visible:outline-primary-600 cursor-pointer rounded-sm px-2 py-1 text-sm tracking-wide text-white shadow-xs focus-visible:outline-2 focus-visible:outline-offset-2"
4
+ type="button"
5
+ >
6
+ Button text
7
+ </button>
8
+ </template>
package/src/sandbox/components/icons/Github.vue ADDED
@@ -0,0 +1,3 @@
1
+ <template>
2
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M15 22v-4a4.8 4.8 0 0 0-1-3.5c3 0 6-2 6-5.5.08-1.25-.27-2.48-1-3.5.28-1.15.28-2.35 0-3.5 0 0-1 0-3 1.5-2.64-.5-5.36-.5-8 0C6 2 5 2 5 2c-.3 1.15-.3 2.35 0 3.5A5.403 5.403 0 0 0 4 9c0 3.5 3 5.5 6 5.5-.39.49-.68 1.05-.85 1.65-.17.6-.22 1.23-.15 1.85v4" /><path d="M9 18c-4.51 2-5-2-7-2" /></svg>
3
+ </template>
package/src/sandbox/components/icons/Menu.vue ADDED
@@ -0,0 +1,3 @@
1
+ <template>
2
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 5h16" /><path d="M4 12h16" /><path d="M4 19h16" /></svg>
3
+ </template>
package/src/sandbox/components/icons/X.vue ADDED
@@ -0,0 +1,3 @@
1
+ <template>
2
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 6 6 18" /><path d="m6 6 12 12" /></svg>
3
+ </template>
package/src/sandbox/index.ts ADDED
@@ -0,0 +1,5 @@
1
+ import { createApp } from 'vue'
2
+
3
+ import App from './App.vue'
4
+
5
+ createApp(App).mount('#app')
package/src/sandbox/tailwind.css ADDED
@@ -0,0 +1,59 @@
1
+ @import "tailwindcss";
2
+
3
+ @theme {
4
+ /** fonts */
5
+ --font-sans: Figtree;
6
+ --font-sans--0: ui-sans-serif;
7
+ --font-sans--1: system-ui;
8
+ --font-sans--2: sans-serif;
9
+ --font-sans--3: "Apple Color Emoji";
10
+ --font-sans--4: "Segoe UI Emoji";
11
+ --font-sans--5: "Segoe UI Symbol";
12
+ --font-sans--6: "Noto Color Emoji";
13
+ --font-sans--length: 7;
14
+
15
+ /* misc colors */
16
+ --color-*: initial;
17
+ --color-black: #000;
18
+ --color-transparent: transparent;
19
+ --color-white: #fff;
20
+
21
+ /* gray, zinc */
22
+ --color-gray-50: oklch(0.985 0 0);
23
+ --color-gray-100: oklch(0.967 0.001 286.375);
24
+ --color-gray-200: oklch(0.92 0.004 286.32);
25
+ --color-gray-300: oklch(0.871 0.006 286.286);
26
+ --color-gray-400: oklch(0.705 0.015 286.067);
27
+ --color-gray-500: oklch(0.552 0.016 285.938);
28
+ --color-gray-600: oklch(0.442 0.017 285.786);
29
+ --color-gray-700: oklch(0.37 0.013 285.805);
30
+ --color-gray-800: oklch(0.274 0.006 286.033);
31
+ --color-gray-900: oklch(0.21 0.006 285.885);
32
+ --color-gray-950: oklch(0.141 0.005 285.823);
33
+
34
+ /* danger, rose */
35
+ --color-danger-50: oklch(0.969 0.015 12.422);
36
+ --color-danger-100: oklch(0.941 0.03 12.58);
37
+ --color-danger-200: oklch(0.892 0.058 10.001);
38
+ --color-danger-300: oklch(0.81 0.117 11.638);
39
+ --color-danger-400: oklch(0.712 0.194 13.428);
40
+ --color-danger-500: oklch(0.645 0.246 16.439);
41
+ --color-danger-600: oklch(0.586 0.253 17.585);
42
+ --color-danger-700: oklch(0.514 0.222 16.935);
43
+ --color-danger-800: oklch(0.455 0.188 13.697);
44
+ --color-danger-900: oklch(0.41 0.159 10.272);
45
+ --color-danger-950: oklch(0.271 0.105 12.094);
46
+
47
+ /* primary, indigo */
48
+ --color-primary-50: oklch(0.962 0.018 272.314);
49
+ --color-primary-100: oklch(0.93 0.034 272.788);
50
+ --color-primary-200: oklch(0.87 0.065 274.039);
51
+ --color-primary-300: oklch(0.785 0.115 274.713);
52
+ --color-primary-400: oklch(0.673 0.182 276.935);
53
+ --color-primary-500: oklch(0.585 0.233 277.117);
54
+ --color-primary-600: oklch(0.511 0.262 276.966);
55
+ --color-primary-700: oklch(0.457 0.24 277.023);
56
+ --color-primary-800: oklch(0.398 0.195 277.366);
57
+ --color-primary-900: oklch(0.359 0.144 278.697);
58
+ --color-primary-950: oklch(0.257 0.09 281.288);
59
+ }