From c4f8f564d2ace61f57de1f75639cb082f737d3da Mon Sep 17 00:00:00 2001 From: Evert Prants Date: Sun, 10 Apr 2022 09:03:31 +0300 Subject: [PATCH] some tidbits --- src/client/game.ts | 67 +++++++++++++++++--------------- src/client/object/chat.ts | 20 +++++++--- src/client/object/joystick.ts | 8 ++-- src/client/object/pony-loader.ts | 3 ++ src/client/scss/index.scss | 8 ++-- 5 files changed, 61 insertions(+), 45 deletions(-) diff --git a/src/client/game.ts b/src/client/game.ts index 3a14004..5365a3a 100644 --- a/src/client/game.ts +++ b/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) { - if (!(sender === this.me.display_name || this.party.includes(sender))) { + private experimentalPlayerCmd(message: string, sender: IcyNetUser) { + 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; } diff --git a/src/client/object/chat.ts b/src/client/object/chat.ts index b083bf5..825c45c 100644 --- a/src/client/object/chat.ts +++ b/src/client/object/chat.ts @@ -119,14 +119,15 @@ export class Chat { public show() { this._visible = true; - this._wrapper.classList.add('visible'); - this._wrapper.classList.remove('invisible'); + this.element.classList.add('visible'); + this.element.classList.remove('invisible'); + this.scrollBottom(); } public hide() { this._visible = false; - this._wrapper.classList.remove('visible'); - this._wrapper.classList.add('invisible'); + this.element.classList.remove('visible'); + 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; + } } diff --git a/src/client/object/joystick.ts b/src/client/object/joystick.ts index 2cdf29d..b868b82 100644 --- a/src/client/object/joystick.ts +++ b/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(); - knobPosition.copy(this.knobCenter).sub(this.mouseCenterOffset); - this.knob.style.transform = `translate(${knobPosition.x}px, ${knobPosition.y}px)`; + this.knobPosition.copy(this.knobCenter).sub(this.mouseCenterOffset); + this.knob.style.transform = `translate(${this.knobPosition.x}px, ${this.knobPosition.y}px)`; this.appliedForce .copy(this.mouseCenterOffset) diff --git a/src/client/object/pony-loader.ts b/src/client/object/pony-loader.ts index a6a7b20..b2d166f 100644 --- a/src/client/object/pony-loader.ts +++ b/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 diff --git a/src/client/scss/index.scss b/src/client/scss/index.scss index 3dc03c9..d5ce8b4 100644 --- a/src/client/scss/index.scss +++ b/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; }