From 012571006439439b247ca3b701cf7d065abe14b9 Mon Sep 17 00:00:00 2001 From: Atul Varma Date: Sun, 21 Feb 2021 21:13:14 -0500 Subject: [PATCH] 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 | 3 ++- lib/pages/creature-page.tsx | 10 ++-------- lib/specs.ts | 2 ++ 3 files changed, 6 insertions(+), 9 deletions(-) diff --git a/lib/colors.ts b/lib/colors.ts index 76881c9..efc408e 100644 --- a/lib/colors.ts +++ b/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", diff --git a/lib/pages/creature-page.tsx b/lib/pages/creature-page.tsx index 507c72a..9dfb840 100644 --- a/lib/pages/creature-page.tsx +++ b/lib/pages/creature-page.tsx @@ -136,18 +136,12 @@ const CreatureSymbol: React.FC = (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 = (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} diff --git a/lib/specs.ts b/lib/specs.ts index ff2dc5c..75a03eb 100644 --- a/lib/specs.ts +++ b/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",