some tidbits

src/client/game.ts

@@ -46,34 +46,6 @@ export class Game {
     // end of
 
     this.chat.registerSendFunction((message) => {
-      if (message.startsWith('!party')) {
-        const array = message.split(' ');
-        const name = array.slice(2).join(' ');
-
-        if (array[1] === 'join') {
-          this.party.push(name);
-          this.chat.addMessage(`Joined party of user "${name}".`);
-        }
-
-        if (array[1] === 'leave') {
-          this.party.splice(this.party.indexOf(name), 1);
-          this.chat.addMessage(`Left party of user "${name}".`);
-        }
-
-        if (array[1] === 'clear') {
-          this.party.length = 0;
-          this.chat.addMessage('Cleared party list.');
-        }
-
-        if (array[1] === 'list') {
-          this.chat.addMessage(
-            `You have joined the watch party of: ${this.party.join(', ')}`,
-          );
-        }
-
-        localStorage.setItem('party', this.party.join('|'));
-      }
-
       this.socket.emit('chat-send', message);
     });
 
@@ -190,12 +162,45 @@ export class Game {
       this.chat.addMessage(event.message, event.sender.display_name);
 
       // experimental stuff
-      this.experimentalPlayerCmd(event.message, event.sender.display_name);
+      this.experimentalPlayerCmd(event.message, event.sender);
     });
   }
 
-  private experimentalPlayerCmd(message: string, sender: string) {
+  private experimentalPlayerCmd(message: string, sender: IcyNetUser) {
-    if (!(sender === this.me.display_name || this.party.includes(sender))) {
+    if (message.startsWith('!party') && this.me.id === sender.id) {
+      const array = message.split(' ');
+      const name = array.slice(2).join(' ');
+
+      if (array[1] === 'join') {
+        this.party.push(name);
+        this.chat.addMessage(`Joined party of user "${name}".`);
+      }
+
+      if (array[1] === 'leave') {
+        this.party.splice(this.party.indexOf(name), 1);
+        this.chat.addMessage(`Left party of user "${name}".`);
+      }
+
+      if (array[1] === 'clear') {
+        this.party.length = 0;
+        this.chat.addMessage('Cleared party list.');
+      }
+
+      if (array[1] === 'list') {
+        this.chat.addMessage(
+          `You have joined the watch party of: ${this.party.join(', ')}`,
+        );
+      }
+
+      localStorage.setItem('party', this.party.join('|'));
+    }
+
+    if (
+      !(
+        sender.display_name === this.me.display_name ||
+        this.party.includes(sender.display_name)
+      )
+    ) {
       return;
     }
 

src/client/object/chat.ts

@@ -119,14 +119,15 @@ export class Chat {
 
   public show() {
     this._visible = true;
-    this._wrapper.classList.add('visible');
+    this.element.classList.add('visible');
-    this._wrapper.classList.remove('invisible');
+    this.element.classList.remove('invisible');
+    this.scrollBottom();
   }
 
   public hide() {
     this._visible = false;
-    this._wrapper.classList.remove('visible');
+    this.element.classList.remove('visible');
-    this._wrapper.classList.add('invisible');
+    this.element.classList.add('invisible');
   }
 
   public focus(rehide = false) {
@@ -172,9 +173,12 @@ export class Chat {
     msgContent.innerText = message;
     msg.append(msgContent);
 
-    // const bottomed = this._history.scrollTop ,this._history.scrollHeight;
+    const lFactor = this._history.offsetHeight + this._history.scrollTop;
+    const wasAtBottom = lFactor > this._history.scrollHeight - 100;
+
     this._history.append(msg);
-    this._history.scrollTop = this._history.scrollHeight;
+
+    wasAtBottom && this.scrollBottom();
 
     setTimeout(() => {
       msg.classList.add('chat__message--old');
@@ -192,4 +196,8 @@ export class Chat {
   public setKeyHandlerEnabled(isEnabled: boolean) {
     this._keyhandler = isEnabled;
   }
+
+  public scrollBottom() {
+    this._history.scrollTop = this._history.scrollHeight;
+  }
 }

src/client/object/joystick.ts

@@ -9,6 +9,7 @@ export class Joystick {
   private prevMousePos = new Vector2();
   private center = new Vector2();
   private knobCenter = new Vector2();
+  private knobPosition = new Vector2();
   private mouseCenterOffset = new Vector2();
   private radiusSquare = new Vector2();
   private negRadiusSquare = new Vector2();
@@ -37,11 +38,10 @@ export class Joystick {
         this.prevMousePos.copy(this.mousePos);
         this.mousePos.fromArray([e.touches[0].clientX, e.touches[0].clientY]);
         this.mouseCenterOffset.copy(this.center).sub(this.mousePos);
-        this.mouseCenterOffset.clamp(this.negRadiusSquare, this.radiusSquare);
+        this.mouseCenterOffset.clampLength(-this.radius, this.radius);
 
-        const knobPosition = new Vector2();
+        this.knobPosition.copy(this.knobCenter).sub(this.mouseCenterOffset);
-        knobPosition.copy(this.knobCenter).sub(this.mouseCenterOffset);
+        this.knob.style.transform = `translate(${this.knobPosition.x}px, ${this.knobPosition.y}px)`;
-        this.knob.style.transform = `translate(${knobPosition.x}px, ${knobPosition.y}px)`;
 
         this.appliedForce
           .copy(this.mouseCenterOffset)

src/client/object/pony-loader.ts

@@ -23,6 +23,9 @@ class PonyModel {
         (gltf) => {
           this.ponyModel = gltf.scene;
           this.animations = gltf.animations;
+          // temp: disable frustum culling for eyes
+          this.ponyModel.children[0].children[2].frustumCulled = false;
+
           resolve(gltf.scene);
 
           // gltf.animations; // Array<THREE.AnimationClip>

src/client/scss/index.scss

@@ -53,7 +53,7 @@ body {
     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=%27currentColor%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%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");
     padding: 1rem;
     border: 2px solid #ddd;
     border-radius: 100%;
@@ -112,7 +112,7 @@ body {
     }
   }
 
-  &.invisible {
+  &__wrapper.invisible {
     .chat {
       &__input-wrapper {
         display: none;
@@ -135,7 +135,7 @@ body {
     }
   }
 
-  &.visible {
+  &__wrapper.visible {
     .chat__history {
       background-color: #6464644d;
     }
@@ -147,7 +147,7 @@ body {
     &__wrapper {
       right: 8px;
 
-      &:not(.focused) {
+      &:not(.visible) {
         &, *:not(input):not(button) {
           pointer-events: none;
         }