some more chat stuff

src/client/game.ts

@@ -95,6 +95,14 @@ export class Game {
 
       this.me = user;
 
+      this.chat.addMessage(
+        `Welcome to Icy3d World Experiment, ${user.display_name}!`,
+        null,
+        {
+          color: '#fbff4e',
+        },
+      );
+
       const player = Player.fromUser(user, this.renderer.scene);
       player.setCharacter(this.character);
       this.players.push(player);
@@ -122,12 +130,19 @@ export class Game {
       }
 
       const newplayer = PlayerEntity.fromUser(user, this.renderer.scene);
+      this.chat.addMessage(`${user.display_name} has joined the game.`, null, {
+        color: '#fbff4e',
+      });
       this.players.push(newplayer);
     });
 
     this.socket.on('playerleave', (user) => {
       const findPlayer = this.players.find((item) => item.user.id === user.id);
       if (findPlayer) {
+        this.chat.addMessage(`${user.display_name} has left the game.`, null, {
+          color: '#fbff4e',
+        });
+
         this.renderer.scene.remove(findPlayer.container);
         findPlayer.dispose();
         this.players.splice(this.players.indexOf(findPlayer), 1);
@@ -144,6 +159,14 @@ export class Game {
         newplayer.addUncommittedChanges(player);
         this.players.push(newplayer);
       });
+
+      this.chat.addMessage(
+        `List of players: ${list.map((user) => user.display_name).join(', ')}`,
+        null,
+        {
+          color: '#fbff4e',
+        },
+      );
     });
 
     this.socket.on('playerupdate', (data) => {
@@ -186,6 +209,16 @@ export class Game {
       // experimental stuff
       this.experimentalPlayerCmd(event.message, event.sender);
     });
+
+    this.socket.on('disconnect', () => {
+      this.chat.addMessage(
+        `Disconnected from the server, reconnecting..`,
+        null,
+        {
+          color: '#ff0000',
+        },
+      );
+    });
   }
 
   private experimentalPlayerCmd(message: string, sender: IcyNetUser) {

src/client/object/chat.ts

@@ -3,7 +3,7 @@ import seedrandom from 'seedrandom';
 
 const nameColorPallete = {
   H: [1, 360],
-  S: [30, 100],
+  S: [0, 100],
   L: [50, 100],
 };
 
@@ -41,7 +41,7 @@ export class Chat {
       'Type a message here and press Enter to send...',
     );
 
-    this._input.setAttribute('maxlength', '260');
+    this._input.setAttribute('maxlength', '280');
 
     this._input.addEventListener('keydown', (e) => {
       e.stopPropagation();
@@ -158,6 +158,7 @@ export class Chat {
       .getMinutes()
       .toString()
       .padStart(2, '0')}`;
+    msgTime.setAttribute('title', stamp.toString());
 
     // optional sender
     if (sender) {
@@ -168,7 +169,7 @@ export class Chat {
 
     // optional color for content
     if (meta?.color) {
-      msgSender.style.setProperty('--name-color', meta.color);
+      msgContent.style.setProperty('--text-color', meta.color);
     }
     msgContent.innerText = message;
     msg.append(msgContent);

src/client/scss/index.scss

@@ -49,16 +49,24 @@ body {
     width: 24px;
     height: 24px;
     appearance: none;
-    background-color: transparent;
+    background-color: #fff;
     background-position: center center;
     background-repeat: no-repeat;
     cursor: pointer;
-    background-image: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 style=%27width:24px;height:24px%27 viewBox=%270 0 24 24%27%3E%3Cpath fill=%27%23ffffff%27 d=%27M20 2H4C2.9 2 2 2.9 2 4V22L6 18H20C21.1 18 22 17.1 22 16V4C22 2.9 21.1 2 20 2M20 16H5.2L4 17.2V4H20V16Z%27 /%3E%3C/svg%3E");
+    background-image: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 style=%27width:24px;height:24px%27 viewBox=%270 0 24 24%27%3E%3Cpath fill=%27%23878787%27 d=%27M20 2H4C2.9 2 2 2.9 2 4V22L6 18H20C21.1 18 22 17.1 22 16V4C22 2.9 21.1 2 20 2M20 16H5.2L4 17.2V4H20V16Z%27 /%3E%3C/svg%3E");
     padding: 1rem;
-    border: 2px solid #ddd;
+    border: 2px solid transparent;
     border-radius: 100%;
     background-size: 70%;
     margin-bottom: 0.5rem;
+
+    transition-property: background-color, border-color;
+    transition-timing-function: linear;
+    transition-duration: 150ms;
+
+    &:hover {
+      background-color: rgb(233, 233, 233);
+    }
   }
 
   &__wrapper {
@@ -86,6 +94,7 @@ body {
     display: flex;
     flex-direction: row;
     gap: 0.5rem;
+    text-shadow: 1px 1px 2px black;
 
     &-timestamp {
       color: #646464;
@@ -108,6 +117,8 @@ body {
     }
 
     &-content {
+      --text-color: #fff;
+      color: var(--text-color);
       overflow-wrap: anywhere;
     }
   }
@@ -137,7 +148,11 @@ body {
 
   &__wrapper.visible {
     .chat__history {
-      background-color: #6464644d;
+      background-color: rgba(73, 73, 73, 0.3);
+    }
+
+    .chat__toggle {
+      border-color: #878787;
     }
   }
 }

src/server/object/game.ts

@@ -95,7 +95,7 @@ export class Game {
         });
 
         socket.on('chat-send', (raw) => {
-          const message = raw.trim().substring(0, 260);
+          const message = raw.trim().substring(0, 280);
           this.io.emit('chat', { sender: publicUserInfo, message });
         });
       }