Working on the Player's UI

[jetrotal]

Hey! I've been testing writing stuff in CSS and JS that could be used on the Player's page UI:

https://codepen.io/jetrotau/full/ZEJqmEE It already has functions related to the client side of the chat, like:

Display Alerts:

var msg = buildMessage.alert( "Connected to Room 3", "warning" );
displayMessage(msg);

// where :
// "warning" = Yellow BG alert
// "error" = Red BG alert
// having no parameter = black BG alert

Display Chat Messages from Client:

var msg = buildMessage.chat( playerName,"Any kind of Text", 1 )
displayMessage(msg);

// where :
// playerName = is a var that deals with the NickName selection
// 1 = is what tells the message builder that it's a message from the client.

Display Chat Messages from Other Players:

var msg = buildMessage.chat( "AnotherPlayer", "Testing Message From outside")
displayMessage(msg);

// where :
// "AnotherPlayer" = can be any kind of string
// the lack of the 1 param, tells to the builder that this is not a message from the client.

---

Clear Chat Button + Info Button + Alerts

Hide Chat Button:

You can also customize the colors scheme of it:

I didn't want to make a mess in your code, so hosted it on codepen: https://codepen.io/jetrotau/full/ZEJqmEE But I tried to keep the names of the HTML elements and some variables that I saw on the current Play page.

I also organized the functions for readability and easy maintenance.

feel free to use or discard any of the ideas from it.

[twig33]

Looks really good, thanks! However, it may be a little ahead of the project. Right now, there's actually no differentiation between messages and "connected to..." alerts. The client also doesn't tell if a chat message comes from itself or another player. And you can only set your name once.

Also, I found a bug: if you send some messages, then scroll up, then send another message, it will scroll to the bottom. I don't think that's good, because it could prevent people from comfortably reading older messages.

[jetrotal]

maybe, the differentiation can be made by sending strings formatted as JSON, like:

var incomingMSG = `{
  "message": {
      "source": "Server",
      "type": "alert",
      "user": "warning",
      "content": "Connected to Room 3"
  }
}`

then the js side of it could parse the message string as an object.

I'll check later the scrolling issue Fixed the chat scroll bug!