This replaces the "randomize colors" and "randomize" buttons on the creature and mandala pages with a single randomizer widget that allows the user to choose whether they want to randomize the colors, symbols, or both.
By default, both colors and symbols are randomized.
Note that this is really only a temporary solution, though: ideally we'll want to provide a more powerful UI that allows users to mark _any_ parameter for randomization, e.g. via "pinning" values or somesuch.
This improves the layout of all our pages to look more like the mandala page.
Additionally, some form widgets now have better layout, and the header takes up less vertical space.
At an implementation level, the component hierarchy of pages has been inverted to make this kind of layout easier. Now fully laid-out pages are contained within `<Page>` components that are at the top of the component hierarchy, and which are defined by each specific page (mandala, creature, vocabulary, etc).
I had to do a few architectural things to avoid circular imports, though; most notably, this involved the creation of a new React context called a `PageContext`.
It uses CSS grid, which should be pretty well-supported amongst recent browsers.
This fixes#67 by making the background color selection/randomization code more DRY via the addition of a new `SvgCompositionContext` and a `CompositionContextWidget`.
It also documents the `SvgSymbolContext` type, and moves the "randomize colors" button closer to the actual colors.
The random colors are currently terrible! Maneesh will help us make them better. :)
Also, there is some annoying code duplication going on here between the creature and mandala pages, but I really wanted to add the button to both and also want to eat dinner soon, so I am filing #67 and saving the refactoring for later.
Really the eye creature is only useful for me as a debugging tool, so this moves it over to a separate debug page.
It also removes the whole concept of randomizing the eye creature, mainly because it ignores all the rules set forth in the normal creature randomizer, so it's not terribly useful.
This simplifies the code for `creature-page.tsx` a bunch and hopefully makes it easier to understand.
This adds an extremely simple Mandala page (for #24) with a single circle Mandala comprised of several eyes. The symbol style is configurable, but parameters for the actual Mandala are not (yet).
Doing this also involved factoring out a `<SvgTransforms>` component, which makes setting up SVG transforms a bit easier.
Also moved `getSymbol` of `creature-page.tsx` and into `svg-vocabulary.tsx`, with the new name `getSvgSymbol`.
This fixes#53. Note that this means the eye creature isn't observable from the UI, as moving the slider to "bonkers" shows the eye with parts randomly replaced. The "pristine" eye creature can still be shown for debugging purposes by adding `&eye=on` to the end of the URL.
This fixes#39 by adding a "Randomly invert symbols" checkbox.
If the inversion is undesirable, disabling it will keep the existing creature but remove the inversion.
Note that this checkbox is only displayed when the creature complexity isn't bonkers.
This refactors `creature-symbol.tsx` so that it doesn't have to rely on awkwardly introspecting `JSX.Element` instances to do its job. Now all of that mumbo-jumbo, which is only really useful for when we want to manually construct symbols like the eye creature, is encapsulated in `creature-symbol-factory.tsx`.
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.
Atul Varma