BrookJeynes / slime-rancher-2-interactive-map

An interactive map for Slime Rancher 2.
https://sr2interactivemap.com
24 stars 7 forks source link

Fixing log presentation #10

Closed Clearmist closed 2 years ago

Clearmist commented 2 years ago

Regarding issue #5

One remaining issue that I left in is the text of the logs. Because we're using pre elements white-space doesn't wrap by default. We should adjust the CSS white-space property to wrap the text or replace the pre elements with p and a terminal-like font. Although, React doesn't want you to insert elements into text like that so .replace() may not work in this way so adjusting the white-space is probably the best option. 2022-10-03 10_02_18-SR2 Interactive Map — Mozilla Firefox

Clearmist commented 2 years ago

My second commit is adding a new map layer with leaflet tooltips styled in such a way that they resemble region names. I couldn't add these in the official way because it involves learning how to make WMS map layer data and that's way too much to learn. It would also include rendering new map images for each zoom level that include the region names which would increase bandwidth requirements to use this map.

Within App.css:57 I have left a semi-transparent background style in case you like that look better. Here is a comparison. I committed using the transparent background (bottom image).

2022-10-03 14_36_50-SR2 Interactive Map — Mozilla Firefox

BrookJeynes commented 2 years ago

@Clearmist in regards to this:

One remaining issue that I left in is the text of the logs. Because we're using pre elements white-space doesn't wrap by default.

One thing we could do is pass in a list for each text paragraph? Then we would just add each item in the list as it's own p element (and change to a more terminal font). What do you think about this?

Clearmist commented 2 years ago

That would work, I just didn't want to adjust the format of your json file without your permission. 😁