// svgCompassRock.js

(function () {
  /* global AdventureJS A */

  var p = AdventureJS.Display.prototype;

  /**
   */
  p.svgCompassRock = `
<svg class="ajs-compass rock" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 100 100">
  <g class="northwest ajs-compass-direction  ordinal" data-exit="northwest">
    <g class="shape">
      <polygon class="rock" points="0 32 0 0 32 0 0 32"/>
    </g>
    <g class="label">
      <text class="rock" transform="translate(7 16.3) rotate(-45)"><tspan x="0" y="0">NW</tspan></text>
    </g>
  </g>
  <g class="north ajs-compass-direction  cardinal" data-exit="north">
    <g class="shape">
      <polygon class="rock" points="26.8 18.4 45.2 0 53.6 0 72.1 18.4 26.8 18.4"/>
    </g>
    <g class="label">
      <text class="rock" transform="translate(47.3 11.9)"><tspan x="0" y="0">N</tspan></text>
    </g>
  </g>
  <g class="northeast ajs-compass-direction  ordinal" data-exit="northeast">
    <g class="shape">
      <polygon class="rock" points="67.9 0 99.9 0 99.9 32 67.9 0"/>
    </g>
    <g class="label">
      <text class="rock" transform="translate(85.1 8.6) rotate(45)"><tspan x="0" y="0">NE</tspan></text>
    </g>
  </g>
  <g class="west ajs-compass-direction  cardinal" data-exit="west">
    <g class="shape">
      <polygon class="rock" points="18.4 72.5 0 54.1 0 45.6 18.4 27.2 18.4 72.5"/>
    </g>
    <g class="label">
      <text class="rock" transform="translate(7 52.8)"><tspan x="0" y="0">W</tspan></text>
    </g>
  </g>
  <g class="east ajs-compass-direction  cardinal" data-exit="east">
    <g class="shape">
      <polygon class="rock" points="81.1 72.5 100 53.5 100 46.2 81.1 27.2 81.1 72.5"/>
    </g>
    <g class="label">
      <text class="rock" transform="translate(88 52.8)"><tspan x="0" y="0">E</tspan></text>
    </g>
  </g>
  <g class="southwest ajs-compass-direction  ordinal" data-exit="southwest">
    <g class="shape">
      <polygon class="rock" points="0 67.9 0 99.9 32 99.9 0 67.9"/>
    </g>
    <g class="label">
      <text class="rock" transform="translate(4.1 88.1) rotate(45)"><tspan x="0" y="0">SW</tspan></text>
    </g>
  </g>
  <g class="south ajs-compass-direction  cardinal" data-exit="south">
    <g class="shape">
      <polygon class="rock" points="26.8 81.1 45.7 99.9 53.2 99.9 72.1 81.1 26.8 81.1"/>
    </g>
    <g class="label">
      <text class="rock" transform="translate(48 93)"><tspan x="0" y="0">S</tspan></text>
    </g>
  </g>
  <g class="southeast ajs-compass-direction  ordinal" data-exit="southeast">
    <g class="shape">
      <polygon class="rock" points="67.9 99.9 99.9 99.9 99.9 67.9 67.9 99.9"/>
    </g>
    <g class="label">
      <text class="rock" transform="translate(89 94.9) rotate(-45)"><tspan x="0" y="0">SE</tspan></text>
    </g>
  </g>
  <g class="up ajs-compass-direction " data-exit="up">
    <g class="shape">
      <polygon class="rock" points="33.5 72.3 49.4 56.4 65.4 72.3 33.5 72.3"/>
    </g>
    <g class="label">
      <text class="rock" transform="translate(47.3 68.4)"><tspan x="0" y="0">U</tspan></text>
    </g>
  </g>
  <g class="down ajs-compass-direction " data-exit="down">
    <g class="shape">
      <polygon class="rock" points="33.5 27.3 49.4 43.3 65.4 27.3 33.5 27.3"/>
    </g>
    <g class="label">
      <text class="rock" transform="translate(47.3 36.3)"><tspan x="0" y="0">D</tspan></text>
    </g>
  </g>
  <g class="in ajs-compass-direction " data-exit="in">
    <g class="shape">
      <polygon class="rock" points="26.9 65.8 42.9 49.8 26.9 33.9 26.9 65.8"/>
    </g>
    <g class="label">
      <text class="rock" transform="translate(31.7 52.8)"><tspan x="0" y="0">I</tspan></text>
    </g>
  </g>
  <g class="out ajs-compass-direction " data-exit="out">
    <g class="shape">
      <polygon class="rock" points="72.1 65.8 56.1 49.8 72.1 33.9 72.1 65.8"/>
    </g>
    <g class="label">
      <text class="rock" transform="translate(63.3 52.8)"><tspan x="0" y="0">O</tspan></text>
    </g>
  </g>
</svg>
`;
})();