Add anchor attachment point type. (#23)

This fixes #21 by changing the existing "tail" attachment point (`#ff0000`) to be called the "anchor" attachment point, since that's primarily what we're using it for.  It also adds a brand-new "tail" attachment point with color `#be0027`, which is expected to be oriented in the direction the tail should point (not the _opposite_ direction of the tail, which is how the old tail attachment point was oriented).

Note that this change means, for now, that no symbols have tail attachment points.  An error will be logged in the console when viewing the "Creature!" page for now because of this (since the default composition attaches a symbol to the tail), but as soon as Nina updates the SVGs, this should go away.

lib/colors.ts

@@ -6,7 +6,8 @@ export const FILL_REPLACEMENT_COLOR = "#ffffff";
 export const ATTACHMENT_POINT_COLORS: {
   [key in AttachmentPointType]: string;
 } = {
-  tail: "#ff0000",
+  anchor: "#ff0000",
+  tail: "#be0027",
   leg: "#ffff00",
   arm: "#00ff00",
   horn: "#00ffff",

lib/pages/creature-page.tsx

@@ -136,18 +136,12 @@ const CreatureSymbol: React.FC<CreatureSymbolProps> = (props) => {
 
   for (let attachIndex of attachmentIndices) {
     const parentAp = safeGetAttachmentPoint(parent, attachTo, attachIndex);
-    const ourAp = safeGetAttachmentPoint(data, "tail");
+    const ourAp = safeGetAttachmentPoint(data, "anchor");
 
     if (!parentAp || !ourAp) {
       continue;
     }
 
-    // If we're being attached as a tail, we want to actually rotate
-    // the attachment an extra 180 degrees, as the tail attachment
-    // point is facing the opposite direction that we actually
-    // want to orient the tail in.
-    const extraRot = attachTo === "tail" ? 180 : 0;
-
     // If we're attaching something oriented towards the left, horizontally flip
     // the attachment image.
     let xFlip = parentAp.normal.x < 0 ? -1 : 1;
@@ -169,7 +163,7 @@ const CreatureSymbol: React.FC<CreatureSymbolProps> = (props) => {
         transformOrigin={ourAp.point}
         translate={t.translation}
         scale={{ x: ctx.attachmentScale * xFlip, y: ctx.attachmentScale }}
-        rotate={xFlip * t.rotation + extraRot}
+        rotate={xFlip * t.rotation}
       >
         {ourSymbol}
       </AttachmentTransform>

lib/specs.ts

@@ -13,6 +13,7 @@ export type PointWithNormal = {
 };
 
 type AttachmentPointSpecs = {
+  anchor: PointWithNormal[];
   tail: PointWithNormal[];
   leg: PointWithNormal[];
   arm: PointWithNormal[];
@@ -33,6 +34,7 @@ export type AttachmentPoint = PointWithNormal & {
 };
 
 export const ATTACHMENT_POINT_TYPES: AttachmentPointType[] = [
+  "anchor",
   "tail",
   "leg",
   "arm",