Side by side, Firefox and Chrome, talking to one another.

With some finagling of the database, I moved Scopique and Stargrace into the same system so they could chat. Upon character selection, everyone in the system the character loads into is notified that they have arrived. In addition — which I just realized was not captured in this screenshot — the “who’s here?” list of characters is refreshed. Chat happens between all clients in the same “room” (i.e. star system) and when a character leaves a system, they are removed from the chat room list for that room.

The map now has labels. The central hub is the current system. The blue gates are labeled with the ID values of the systems to which they lead. Gates are odd ducks in that they have two equally weighted ID values representing either side of their traversal, so one gate record represents both an entrance or an exit to or from a single system so we don’t have to have 2 gate records — inbound and outbound — for each location. I also wired up the gates so when you click on one, you are moved to a new system. This is best represented by the map updating and the chat window refreshing.

One last item of note to make this update current. I got the panel resize code working for both map and chat panels. For the map panel, when the Golden Layout resize event fires, it uses the panel’s new dimensions to recalculate the positions of all elements in the map window and uses CSS to move them so that they maintain their centered and arrayed positions. For chat, I re-wrote the layout entirely using the CSS “display: grid” system. I hadn’t been aware of this rabbit-hole of layout goodness until today, and it’s stupidly powerful; like what Bootstrap does, but without the bloat or handholding or worse — without support for older browsers. That means that going forward, this project is only compatible with the newest browsers despite my best efforts to keep it as browser-agnostic as possible.

Scopique

Owner and author.

Leave a Reply

Your email address will not be published. Required fields are marked *