I have this bug, that only shows up in production, where the tutorial box is on the same layer as the scrolling map, instead of with the container for the scrolling map. The result is that the tutorial doesn't stay on screen when scrolling around the map, and instead blocks the top left tiles from the player's use. And this only happens in production; in development the tutorial behaves just fine.
The tutorial's content is defined in src/game.jsx as a tutorialModes attribute of game. Display is handled in src/comp_localMap.jsx, near the bottom of the LocalMap function. It is wrapped inside a FixedPositionChild component. This is defined in src/libs/DraggableMap.jsx, which only renders its children. Now, the way that DraggableMap uses this is where the magic happens.
With all of its children, I create two lists: one for regular components, and one for any components labeled as FixedPositionChild. The normal components are rendered as part of the map, like normal. All the FixedPositionChild components are rendered outside the scrolling div, thus remaining in a fixed location.
This works quite well, but I can't figure out why it doesn't work in production mode. I think it has to do with filtering out FixedPositionChild. I do know that in production mode, the FixedPositionChild is appearing in the same div as the map tiles, but in development mode it is in the same div with the scrolling div (as it should be). I don't know how to correct this
I have this bug, that only shows up in production, where the tutorial box is on the same layer as the scrolling map, instead of with the container for the scrolling map. The result is that the tutorial doesn't stay on screen when scrolling around the map, and instead blocks the top left tiles from the player's use. And this only happens in production; in development the tutorial behaves just fine.
The tutorial's content is defined in src/game.jsx as a
tutorialModes
attribute ofgame
. Display is handled in src/comp_localMap.jsx, near the bottom of theLocalMap
function. It is wrapped inside aFixedPositionChild
component. This is defined in src/libs/DraggableMap.jsx, which only renders its children. Now, the way thatDraggableMap
uses this is where the magic happens. With all of its children, I create two lists: one for regular components, and one for any components labeled asFixedPositionChild
. The normal components are rendered as part of the map, like normal. All theFixedPositionChild
components are rendered outside the scrolling div, thus remaining in a fixed location.This works quite well, but I can't figure out why it doesn't work in production mode. I think it has to do with filtering out
FixedPositionChild
. I do know that in production mode, theFixedPositionChild
is appearing in the same div as the map tiles, but in development mode it is in the same div with the scrolling div (as it should be). I don't know how to correct thisAny help with this bug will be much appreciated