Investigate how `Widget.Image` should be used to render materials

[with-heart]

So far I haven't taken into account Image but it appears that we need to in order to accurately render the UI.

As an example, here's how the SpectatorsIcon is rendered currently:

If we hover over its container, we can see that it's being centered within it but is still being tiled:

Details

Here are some notes about SpectatorsIcon specifically that should help us figure out what's going on here:

• textures/menu/icons/spectators_icon.png

  {
   "width": 80,
   "height": 52
  }

• Widget.ViewPort

  {
   "width": 500,
   "height": 49,
   "xorigin": 0,
   "yorigin": 64,
   "alignment": "TopLeft"
  }

• Widget.Image

  {
   "width": 48,
   "height": 32,
   "xorigin": 0,
   "yorigin": 2,
   "alignment": "TopLeft"
  }

Questions to answer

• [ ] does Image with dimensions that don't match the actual image resize it?

  It appears that it might resize the image. The aspect ratio of the .png is 0.65 while the aspect ratio of Image is 0.66667 which isn't too far off. We need to test this to be sure.

• [ ] how do ViewPort and Image work in tandem? is Image a new container?

• [ ] how does the image size, ViewPort, and Image work in tandem?

[with-heart]

I created a sandbox to play around with this stuff here: https://codesandbox.io/p/sandbox/charming-microservice-mnl66s?file=%2Fsrc%2Fui.tsx%3A104%2C35

Still not sure I have an answer to any of the questions yet but I'm getting somewhere at least.

[with-heart]

Note to self: textures.json should probably only be used for defs. Rendering the svg might only involve ViewPort/Image.

[with-heart]

According to a conversation with Perplexity, the solution here is to set width and height for the pattern or (and???) image to match the size of the widget and not the size of the texture.