This adds a bit of debugging information on mouseover.
For example, a tooltip with the text `bird@tail.arm[0]` can be interpreted as "a bird symbol attached to the tail symbol's first arm attachment point."
The implementation is a bit funky: we basically annotate the SVG DOM with various `data` attributes, and on mouseover we traverse the DOM from the element the mouse is over all the way up to the SVG root element, picking out relevant `data` attributes and building a tooltip out of it. This ended up being easier than e.g. passing a bunch of props down the whole tree in React.
This builds upon #30 and #33 by adding support for randomly nested symbols in complexity levels 0-4 of the creature page.
Currently, we don't _recursively_ nest symbols, so e.g. we won't make an eye containing an eye containing a cube. And for now we'll only add a nested symbol if the parent symbol has the `always_nest` metadata property defined.
This adds basic support for nesting (#17). It does not swap fill/stroke colors based on the position of the nesting box, though. It also only nests a symbol in the eye creature and "bonkers" complexity setting for now--support for nesting in complexity levels 1-4 is forthcoming.
The nested symbol is essentially uniformly scaled as much as possible without extending outside the boundaries of its parent's nesting box.
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.
This attempts to manually scale the strokes on creatures so they aren't affected by scale.
The weird thing here is that applying `vector-effect="non-scaling-stroke"` does not appear to do the trick--rather, it makes all the strokes look _super heavy_. So in this PR we scale the stroke by the inverse of whatever we're cumulatively scaling by when we're drawing something.
This fixes a bunch of bugs in our attachment-related code, and in so doing refactors things to make more sense, adds more tests, and also adds documentation.
Atul Varma